Tricks For Blogger :blog templates,blog hack, tricks: Widgets

Some time you look that your blog page become so long and take much time to come up so that if your blog page is long you can add this button to go from bottom to top this will help you to go top from bottom easily

Now lets learn on how to plant the TNT of adding a floating back-to-top button to your blog.
==>>Sign in your blogger account

==>>Go To Layout > Page Elements

==>>Click on add a Gadget

==>>Click on HTML/JavaScript

==>>Now Copy paste the code below into the HTML/JavaScript widget,

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='URL Of Your Larger Button Image'" src="URL Of Your Smaller Button Image" onmouseout="this.src='URL Of Your Smaller Button Image'"/></a>

Note:- Remember to replace the required detail with specific URLs of your Back-to-top buttons
Just save your widget and view your blog with a floating Back-To-Top button at the bottom-right corner of your homepage.

11:05 / 0 comments / Read more

This widgets will help you to ask your user to leave suggestion for you if they have any idea or suggestion they can leave for you by this they can access your feedback page .by floating feedback button if visitor go down and come up feedback button easily and friendly float and catch eyes of visitor for adding this you need this two images

small image :

Large Image :

or you can also make your own images

Now host this images own hosting site and get url for this image

==>>Sign in your blogger account

==>>Go To Layout > Page Elements

==>>Click on add a Gadget

==>>Click on HTML/JavaScript

==>>Now Copy paste the code below into the HTML/JavaScript widget,


<a style="display:scroll;position:fixed;bottom:5px;left:0px;" href="URL Of Feedback Page" title="Your Feedback is always welcomed!"><img onmouseover="this.src='URL of your Larger Feedback button'" src="URL Of Your Smaller Feedback button" onmouseout="this.src='URL Of Your Smaller Feedback button'"/></a>


Note:- Remember to replace the Colored text with the required detailed specified. You can change the text “ Your Feedback is always welcomed! “ with any message you like. You must have a Contact page, where users could fill up an Email form to send you their Suggestions.

for this you can see our this posts how add contact from in blog Click Here

10:56 / 0 comments / Read more

Ok ..! just before we know the label that I would like to thank Roy Tanck karyanyalah because the label is created. For those who do not know the name of the label I will tell you the label was named Blogumulusor some people say it Blogumus it ..? Blogumulus was originally created for users of Wordpress calledTag-Cumulus is a Flash-based widget that can be animated. and as for now can be used in BLOGGERthanks to the creativity of Amanda Fazani , as we bloggers engine users can install the widget on our blog. Thank's to Amanda Fazani on creativity. then renamed dirubahlah Blogumulus To see what this animation label, OK, for those of you who are interested in labeling this flash animation or a label, we headed straight to the steps.

Login to blogger with your ID.
Click on Layout .
Click the Edit HTML .
Click on Download Full Template (this for back-up if something goes wrong). in order to secure templates.
Find a code similar to the code below:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Copy the code below and put the code (paste) the following code above.

<B: widget id = 'Label99' locked = 'false' title = ' Labels 'type =' Label '> <b:includable id='main'> <b:if cond='data:title'> <h2> <data:title/> </ h2> </ b: if> <div class='widget-content'> <script src = 'http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject . js' type = 'text / javascript' /> <div id='flashcontent'> Blogumulus by Roy Tanck <a href='http://www.roytanck.com/'> </ a> and <a href = 'http://www.bloggerbuster.com'> Amanda Fazani </ a> Posted by <a href='http://adesyams.blogspot.com/'> Ade's Tricks </ a> </ div> <script type = 'text / javascript "> var so = new SWFObject (" http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf "," tagcloud "," 240 "," ; 300 "," 7 "," # ffffff "); / / uncomment next line to enable transparency / / so.addParam ("wmode", "transparent"); so.addVariable ("tcolor" ;, "0x 333 333 "); so.addVariable (" mode "," tags "); so.addVariable (" distr "," true "); so.addVariable (" tspeed "," ; 100 "); so.addVariable (" tagcloud "," <tags> <b:loop values='data:labels' var='label'> <a expr: href = 'data: label.url' style = " 12 "> <data:label.name/> </ a> </ b: loop> </ tags>"); so.addParam ("allowScriptAccess", "always"); so.write ("flashcontent"); </ script> <b:include name='quickedit'/> </ div> </ b: includable> </ b: widget>

Then the Save Template you.

Note: In order to view this animation label compatible with your blog template, adjust the following code to the template used. Example: Changing the width, height and background color. Variable for the width and height is on the line following script,

var so = new SWFObject ("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", " 240 "," 300 "," 7 "," # ffffff " );

240 shows the width of the widget. 300 showed high widget. # ffffff menjukkan background color. 100shows the speed of rotation. Changing the text color. Variable for the width and height is on the line following script,

so.addVariable ("tcolor", "0x 333 333 ");

"Tcolor" is a variable flash, so be sure to replace just the numbers alone. Changing the font size. Variable for the width and height is on the line following script,

so.addVariable ("tagcloud", "<tags> <b:loop values='data:labels' var='label'> <a expr: href = 'data: label.url' style = ' 12 '> <Data : label.name /> </ a> </ b: loop> </ tags> ");

12 point font size is used. ~>if you want a transparent background, then you just remove the tag / / of the above script

/ / so.addParam ("wmode", "transparent");

Well, you please replace the code in the above variables according to the needs of your template.

05:15 / 0 comments / Read more

Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)

Go to Blogger Dashboard < Design tab > Edit Html
Search for </head> tag
Add below line of code Before </head> tag

4.Now go to page design and add gadget select html/JavaScript  and add below code

<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".w2bslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXbHLXIQ5UilvKz4j3cZZK2NzZpRILbi-0IhLv1FNtHF8O3cYaYNgUcpwdlI8HvJqUGny7pEmAMo9vR7W2fYIyeXL2D-BQXkdT2cYi4amS_qKAdOKMbQRZIS0gaRVSw7EqB6gPZQfT3DAw/s150/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: gray;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style>
<div class="w2bslikebox" style="">
   <div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fmithilaworld&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span><a href="http://myblogtricks.blogspot.com/">Myblogtricks</a></span>
   </div>
</div>

Change highlited area with your page name

13:01 / 0 comments / Read more

Friend in this posts i will tell you how we can combine Facebook like button with Facebook send button and share button you can easily get from face book here we will knowhow combine both like plus share button

login To Blogger ==> Design ==> Edit HTML
Backup your template
Click Expand widgets templates box
Search for <data:post.body/>
and now if you wish to add the plugin just below your post titles then add the giant code below just above <data:post.body/> or if you wish that the plugin may appear at the end of your posts then paste the following code just below <data:post.body/>

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font=""></fb:like>

10:53 / 0 comments / Read more

POSTS