Blogger

How to Replace Newer, Older & Home Navigation Links with Image Buttons?

Important!!! Back Up your Template before Making any changes in Template.

1. Go to Blogger Dashboard -> Design tab -> Edit HTML tab
2. Click on Expand Template Widgets checkbox

Replacing the Older Link

Search for <data:olderPageTitle/> and replace with below code

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinViNyW0Qx-um2qy4eQUQ_iMTXA8BZr7FomNFrF57LhvIEQYXjoi1k15XUk-f5Mdh5Pzffp8LIPmXe_JISLecX559vLpIPkbn5L0_PHpfZ6E-GDER-L0X9NpAQ32nava8S_rCaVsf6MA5Y/s1600/w2b_next.png' style='border: 0 none;vertical-align: middle;'/>

Replacing the Newer Link

Search for <data:newerPageTitle/> tag and replace with below code

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_wCjENQwz42IFEEClEHjrLuOXLS1vlr_op2u5Atp2djag9Mj6DC54HXWFY6yPtNVVyFJCwIExUli6-9x7q-A3XNEbqwcGUH6TGc9L9NaHKX18uMSvDtfdhxQfMtVRFSLyX3aRhGw99Qh/s1600/w2b_prev.png' style='border: 0 none;vertical-align: middle;'/>

Replacing the Home Link

Search for <data:homeMsg/> tag and replace with below code

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG4Euob5QsEmNMsyjOxE-UDMBkbSHsDDWg3IZwo9pvXnK3R8tSGwBxf7FcbYLQhXb8vVNNVF_8E4tqZX3ftL8QZdwagOzRxyLzAeTqmdlThkGLGI7pnXwBMynB_6rnbgeRpgk_uqrKhY1h/s1600/w2b_home.png' style='border: 0 none;vertical-align: middle;'/>

You can change your own icons by replacing the image Url in the above three codes.

Download the Attractive Shiny Buttons Set

The icons set is designed by MyBloggerTricks.com. You can download this set for Free on MyBloggerTricks.com

Download

Hope this will help you and Drop your Comments.

How to Add Jquery Slide Panel with Content

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

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

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

Step 2: Adding Jquery Slide Panel Plugin
You Must add this plugin.

1. Search for </head> tag
2. Add below line of code Before </head> tag

   <script src="http://widgets.way2blogging.org/blogger-widgets/jquery.slidePanel.min.js" type="text/javascript"></script>

Step 3: Adding Jquery Slide Panel Widget Code
Here i am Giving Widget Code generator Form and i Include all possible Options with advanced CSS Styling. You can add multiple pannels.
Customize the Trigger CSS & Panel Content CSS Fields as you need.
Settings :

1. First Click this ButtonGenerate Widget
2. for Trigger Name and Panel Content please See the Image Below.
3. Finally Generate Widget Code and Put it Before </body> tag
4. and Save your Template

If you have any Difficulty then Leave a Comment
I hope you enjoyed this widget.
If you like the widget then feel free to share and leave a Comment.

How to Add Static Facebook Like Box with Smooth Jquery Hover Effect?

Here There are 2 Simple Steps
Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

Step 2: Adding Widget Code
it’s Simple
Replace my facebook page URL below with the URL for your page.
Generate Widget

How to Add Smooth Scroll to Top with Jquery ?

there are 2 Simple Steps
Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)

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

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

Step 2: Adding Scroll to Top Script

1. Go to Blogger Dashboard < Design tab > Edit Html
2. Search for </head> tag
3. Add below section of code Before </head> tag and Save your Template.

   <style type="text/css">
   #w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left top;}
   #w2btoTopHover {background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
   #w2btoTop:active, #w2btoTop:focus {outline:none;}
   </style>
   <script src="http://widgets.way2blogging.org/blogger-widgets/w2b-jquery.ui.totop.js" type="text/javascript"></script>
   <script type="text/javascript">
   /*<![CDATA[*/
   ;(function($){$().UItoTop({easingType:'easeOutCirc'});})(jQuery); 
   /*]]>*/
   </script>

You Are Successfully Done!
Leave your Comments and Responses about this Widget!

How to Install?

1. Go to Blogger Dashboard > Design tab.
2. Click on Add a Gadget any where in your Layout.
3. Choose LinkList Gadget and Leave Title Field as Blank
4. Try to Add Some Links and Save Gadget
5. Edit LinkList Widget Once again, And Copy Widget ID From URL like in Image
   Make Sure the ID may Exact to match in the URL even a Block Letters(Capital Letters) Also for Perfect Working of This Widget!
   
   

   http://www.blogger.com/rearrange?blogID=xxxxxx&action=editWidget&
   sectionId=xxxx&widgetType=LinkList&widgetId=LinkList2

   Here is LinkList2 is the widget ID in this URL
6. Use the below Button and Generate your Widget Code then Paste it before </head> tag in your template.
   Generate Widget Code
7. Save your template, You are Done!.

Put your Comments and Feelings About this Method of installation and about this Widget, So that i can implement  more widgets and menu’s through this way! and also, share this Article with your Friends or to your Network :).

How to Add Link Nudging by jQuery?

1. First Go to Blogger Dashboard > Design Tab > Edit HTML Tab
2. Search for </head> tag
3. Add following code just Before </head> tag

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
   <script type='text/javascript'>
       var dur = 400; // Duration Of Animation in Milli Seconds
       jQuery(document).ready(function($) {
           $('a.linknudge').hover(function() {
               $(this).animate({
                   paddingLeft: '25px'
               }, dur);
           }, function() {
               $(this).animate({
                   paddingLeft: 0
               }, dur);
           });
       }); // end of Jquery Script
   </script>

4. Now Save Your template!

When You want to Add link Nudging to your links, Simply add a class “linknudge” to your links like this!

<a class='linknudge' href='http://www.way2blogging.org'>Way2blogging</a>

The above code is For Custom links those are you animating by adding a class of ‘linknudge‘
Here is another code i am giving that is for your labels as well as for your custom links

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
    var dur = 400; // Duration Of Animation in Milli Seconds
    $(document).ready(function() {
        $('a.linknudge, .Label ul li a').hover(function() {
            $(this).animate({
                paddingLeft: '25px'
            }, dur);
        }, function() {
            $(this).animate({
                paddingLeft: 0
            }, dur);
        });
    }); // end of Jquery Script
</script>