rankwebsite: Widgets

Showing posts with label Widgets. Show all posts

How To Add Automatic Recent Post Slider In Blogger With jQuery

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
How To Add Automatic Recent Post Slider In Blogger With jQuery</h2>
 
How To Add This Slider To Blogger? 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqe9nv9EDAvCOMcVaJ47cLN6M2APrfTCEZkfDRXf3cCR2LI-L9YGJLX2h69e0EWj4JZD7vOR0f3yO7FPbbatcziB32GWTosEWWjW0BQ5uOjawn66ZdmUT31oVpsrbZAsIvBFc_D31rBTx8/s1600/dff.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How To Add Automatic Recent Post Slider In Blogger With jQuery" border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqe9nv9EDAvCOMcVaJ47cLN6M2APrfTCEZkfDRXf3cCR2LI-L9YGJLX2h69e0EWj4JZD7vOR0f3yO7FPbbatcziB32GWTosEWWjW0BQ5uOjawn66ZdmUT31oVpsrbZAsIvBFc_D31rBTx8/s400/dff.PNG" title="How To Add Automatic Recent Post Slider In Blogger With jQuery" width="400" /></a></div>
 
 
Step 1 - Applying Styles 
 
Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface It Is - Dashboard > Template) 
 
As always download a copy of your template first. 
Now find for ]]></b:skin> 
Add below code just before ]]></b:skin> 
 
/* START EasySlider By websiteranker-seo.blogspot.in */ 
 
#slide-container { 
    height: 360px; 
    position: relative; 
    width: 480px; 
} 
 
#slider { 
    height: 360px; 
    left: 25px; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    position: relative; 
    width: 480px; 
    font-family: calibri; 
} 
 
.slide-desc { 
    background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0; 
    color: #FFFFFF; 
    padding: 10px; 
    position: absolute; 
    right: 0px; 
    text-align: left; 
    top: 0; 
    width: 200px; 
    z-index: 99999; 
} 
 
.slide-desc h2 { 
    display: block; 
} 
 
.crosscol .widget-content { 
    position: relative; 
} 
 
#slider ul, #slider li, 
 
#slider2 ul, #slider2 li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
 
#slider2 { 
    margin-top: 1em; 
} 
 
#slider li, #slider2 li { 
/* 
 
define width and height of list item (slide) 
 
entire slider area will adjust according to the parameters provided here 
 
*/ 
    width: 480px; 
    height: 360px; 
    overflow: hidden; 
} 
 
#prevBtn, #nextBtn, 
 
#slider1next, #slider1prev { 
    display: block; 
    width: 30px; 
    height: 77px; 
    position: absolute; 
    left: -30px; 
    text-indent: -9999px; 
    top: 71px; 
    z-index: 1000; 
} 
 
#nextBtn, #slider1next { 
    left: 520px !important; 
} 
 
#prevBtn, #nextBtn, #slider1next, #slider1prev { 
    display: block; 
    height: 77px; 
    left: 0; 
    position: absolute; 
    top: 132px; 
    width: 30px; 
    z-index: 1000; 
} 
 
#prevBtn a, #nextBtn a, 
 
#slider1next a, #slider1prev a { 
    display: block; 
    position: relative; 
    width: 30px; 
    height: 77px; 
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0; 
} 
 
#nextBtn a, #slider1next a { 
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0; 
} 
 
/* numeric controls */ 
 
ol#controls { 
    margin: 1em 0; 
    padding: 0; 
    height: 28px; 
} 
 
ol#controls li { 
    margin: 0 10px 0 0; 
    padding: 0; 
    float: left; 
    list-style: none; 
    height: 28px; 
    line-height: 28px; 
} 
 
ol#controls li a { 
    float: left; 
    height: 28px; 
    line-height: 28px; 
    border: 1px solid #ccc; 
    background: #DAF3F8; 
    color: #555; 
    padding: 0 10px; 
    text-decoration: none; 
} 
 
ol#controls li.current a { 
    background: #5DC9E1; 
    color: #fff; 
} 
 
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus { 
    outline: none; 
} 
 
/* END EasySlider By websiteranker-seo.blogspot.in*/ 
 
 
You can edit above CSS values as you wish.You may use our HTML Editor to see a live preview of your changes.(Note - If you are editing this gadget in HTML Editor then you have to add all three codes simultaneously in editor) 
 
Step 2 - Adding JavaScript 
 
 
<ul style="text-align: left;">
<li>Now find for </body> tag</li>
<li>Add below code just after/below </body> tag.</li>
</ul>
 
 
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script> 
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script> 
<script type='text/javascript'> 
//<![CDATA[ 
$(document).ready(function(){ 
 $("#slider").easySlider({ 
 auto: true, 
 continuous: true 
 }); 
}); 
//]]> 
</script> 
 
 
Now save your template. 
 
<div style="text-align: center;">
</div>
<ul>
<li style="text-align: left;">Adding The Gadget</li>
<li style="text-align: left;">Now go to Page Layout</li>
<li style="text-align: left;">Add a Gadget > HTML/JavaScript</li>
<li style="text-align: left;">Paste below piece of code and save it.</li>
</ul>
 
 
<div id="slider"> 
<script style="text/javascript" src="http://helperblogger.ucoz.com/code/easySlider.min.js"></script> 
<script style="text/javascript"> 
 var numposts_gal = 6; 
 var numchars_gal = 150; 
 var random_posts = false; // random posts 
</script> 
 
<script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> 
</div> 
 
 
Now replace yourblog.blogspot.com with your own blog url.[Code Line - 10] (Only change blog URL don't change any other things. 
To change number of post find this var numposts_gal = 6; line in above code. (Code Line - 4) 
If you want to change number of characters to show in description find this piece of code var numchars_gal = 150; (Code Line - 5) 
Now save your all the changes and you are done.Visit your blog to see this beautiful slide.</div>

How To Add Automatic Recent Post Slider In Blogger With jQuery

How To Add Automatic Recent Post Slider In Blogger With jQuery How To Add This Slider To Blogger? Step 1 - Applying Styles Go t...

20:08

Facebook Popup Widget For Blogger | Best seo Friendly Facebook Popup widget For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
Facebook likebox popup is most important blogger widget. This facebook likebox popups  is totally different widget And Best Seo Friendly , it's look like as a wordpress popup blogs. But today I am sharing a totally bloggerized version of this popup.Facebook Popup Widget For Blogger | Best seo Friendly Facebook Popup widget For  Blogger 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEF37BgM55yTrL-jvO7DNaE5XtJ-9LvnhJ4sXCO44QR5cTT1eqa3TtXOy_3YDXEGvdpZOGjBJNnRB1WySkihp7busRiY6g5FPtS8zy8kqxWiEi7rlQ3AjL6s8dXu5hBJnHgHvoTgXFxpPc/s1600/pop.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Popup Widget For Blogger | Best seo Friendly Facebook Popup widget For Blogger" border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEF37BgM55yTrL-jvO7DNaE5XtJ-9LvnhJ4sXCO44QR5cTT1eqa3TtXOy_3YDXEGvdpZOGjBJNnRB1WySkihp7busRiY6g5FPtS8zy8kqxWiEi7rlQ3AjL6s8dXu5hBJnHgHvoTgXFxpPc/s400/pop.PNG" title="Facebook Popup Widget For Blogger | Best seo Friendly Facebook Popup widget For Blogger" width="400" /></a></div>
 
 
Before going further have a look on other popup widgets by <a href="http://websiteranker-seo.blogspot.in/" target="_blank">websiteranker</a> 
Other Popup Widgets By <a href="http://websiteranker-seo.blogspot.in/" target="_blank">websiteranker</a> 
Awesome jQuery Popup For Facebook Like Box 
Add Pop Up Email Subscribe Box With jQuey To Blogger 
Pop Up Email Subscription Form With jQuery For Blogger 
jQuery Facebook Like Box Popup With Timer For Blogger 
jQuery Pop Up For Mashable Style Widget 
Another Cool jQuery Popup For Facebook Like Box 
Pop-Up Facebook Like Box With Jquery For Blogger 
 
How to Rank Your Website  <a href="http://websiteranker-seo.blogspot.in/2016/01/how-to-use-google-keyword-planner-tool.html" target="_blank">Click Here</a>  In Just 2 Minutes 
 
Widget Installation 
 
The installation of this widget is damn easy, you can add this widget as an simple HTML/JavaScript widget. Follow below steps to add this widget 
<div style="text-align: center;">
Go to Blogger Dashboard</div>
<div style="text-align: center;">
Select your blog from</div>
<div style="text-align: center;">
Go to Layout > Add Widget > HTML/JavaScript</div>
<div style="text-align: center;">
Copy and Paste code (don't forgot to change our username with yours)</div>
<div style="text-align: center;">
Save your widget</div>
<div style="text-align: center;">
 </div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script> 
<style> 
    #hbfanback { 
        display: none; 
        background: rgba(0, 0, 0, 0.8); 
        width: 100%; 
        height: 100%; 
        position: fixed; 
        top: 0; 
        left: 0; 
        z-index: 99999; 
    } 
    #hbfan-exit { 
        width: 100%; 
        height: 100%; 
    } 
    #hbfanbox { 
        background: white; 
        width: 420px; 
        height: 270px; 
        position: absolute; 
        top: 58%; 
        left: 63%; 
        margin: -220px 0 0 -375px; 
        -webkit-box-shadow: inset 0 0 50px 0 #939393; 
        -moz-box-shadow: inset 0 0 50px 0 #939393; 
        box-shadow: inset 0 0 50px 0 #939393; 
        -webkit-border-radius: 5px; 
        -moz-border-radius: 5px; 
        border-radius: 5px; 
        margin: -220px 0 0 -375px; 
    } 
    #hbfanclose { 
        float: right; 
        cursor: pointer; 
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNuGyPhZQMswwBmJ3PYkb78OBdfIUEG3ogkMaH2mwrFarNma-9dfgs_Y_XnhAHfqlTgiYKxRMdsFnZtWo-1b5v08rTcKLzhClBAPw5wWnE0f5JRyaFPL-VBNkwrLHOlZ3lcXTYAki5gvA/s1600/hb-fanclose.png) repeat; 
        height: 15px; 
        padding: 20px; 
        position: relative; 
        padding-right: 40px; 
        margin-top: -20px; 
        margin-right: -22px; 
    } 
    .hbremove-borda { 
        height: 1px; 
        width: 366px; 
        margin: 0 auto; 
        background: #F3F3F3; 
        margin-top: 16px; 
        position: relative; 
        margin-left: 20px; 
    } 
</style> 
<script type='text/javascript'> 
    //<![CDATA[  
    jQuery.cookie = function(key, value, options) { 
        // key and at least value given, set cookie...  
        if (arguments.length > 1 && String(value) !== "[object Object]") { 
            options = jQuery.extend({}, options); 
            if (value === null || value === undefined) { 
                options.expires = -1; 
            } 
            if (typeof options.expires === 'number') { 
                var days = options.expires, 
                    t = options.expires = new Date(); 
                t.setDate(t.getDate() + days); 
            } 
            value = String(value); 
            return (document.cookie = [ 
                encodeURIComponent(key), '=', 
                options.raw ? value : encodeURIComponent(value), 
                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE  
                options.path ? '; path=' + options.path : '', 
                options.domain ? '; domain=' + options.domain : '', 
                options.secure ? '; secure' : '' 
            ].join('')); 
        } 
        // key and possibly options given, get cookie...  
        options = value || {}; 
        var result, decode = options.raw ? function(s) { 
            return s; 
        } : decodeURIComponent; 
        return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; 
    }; 
    //]]> 
</script> 
<script type='text/javascript'> 
    jQuery(document).ready(function($) { 
        if ($.cookie('popup_user_login') != 'yes') { 
            $('#hbfanback').delay(100).fadeIn('medium'); 
            $('#hbfanclose, #hbfan-exit').click(function() { 
                $('#hbfanback').stop().fadeOut('medium'); 
            }); 
        } 
        $.cookie('popup_user_login', 'yes', { 
            path: '/', 
            expires: 7 
        }); 
    }); 
</script> 
<div id='hbfanback'> 
    <div id='hbfan-exit'></div> 
    <div id='hbfanbox'> 
        <div id='hbfanclose'></div> 
        <div class='hbremove-borda'></div> 
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fwebsiteranker&amp;width=340&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:340px; height:258px;margin-left: 8%;" allowTransparency="true"></iframe> 
    </div> 
</div> 
 
Widget Customizations 
 
If you have already installed jQuery library then remove below code 
 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'></script> 
 
Replace websiteranker with your facebook fanpage username. 
 
This widget appears only once in 7 days (per person), if you want to appear it on every page load then remove below code snippet from widget code 
 
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 }); 
 
By default, This popup appears on screen for 10 seconds . If you wish to change it then edit below code. (Note: 1 Second = 1000, 10 Seconds = 10000, 20 Seconds = 20000) 
 
.delay(10000) 
 
That's All 
Have a nice day and Happy Blogging :) 
 
 </div>

Facebook Popup Widget For Blogger | Best seo Friendly Facebook Popup widget For Blogger

Facebook likebox popup is most important blogger widget. This facebook likebox popups is totally different widget And Best Seo Friendly , ...

18:48

Adsense Code Encoder | Online HTMl Encoder | HTML To XML parser | Blogger adsense converter

This Adsense Parser / escape Online tool is Very Cool. Instead of Manually parse adsense code you can easily conver any html code to xml format. This tool are very easy and accurately escape tool which are hassle free parse the any html code. How To use ? when you enter html code in to above box parse code will be generated automatically just copy and past this code to your blogger use.

Adsense Code Encoder | Online HTMl Encoder | HTML To XML parser | Blogger adsense converter

Adsense Code Encoder | Online HTMl Encoder | HTML To XML parser | Blogger adsense converter How To Add HTMl Encoder Tool In Blogger Pos...

00:39

How To Add HTMl Encoder Tool In Blogger Post | How To Put HTML Encoder Tool In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<form>
<h2 style="text-align: left;">
How To Add HTMl Encoder Tool In Blogger Post | How To Put HTML Encoder Tool In Blogger </h2>
 
Online HTML to XML parser | Blogger adsense converter | escape tool 
 
Just Follow The Steps : 
 
1. Go to Blogger > Dashboard > Template. 
 
2. Find the following code by pressing CTRL + F ( </head> ) 
  
<div>
 </div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Na8H8rUcx0UN9SiSCqrkoRLj_NGVCXBJy4k82jRetyxIuhif7fnu38fdEPQLcnI_6dQ0RpLzrbiQ-MTwTvdVmrZLT9cJJMeSXmizUcJTYzVN2D6ZrogNZbhHwTEfJ7OzwOrYNyT5rF1S/s1600/s13.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Na8H8rUcx0UN9SiSCqrkoRLj_NGVCXBJy4k82jRetyxIuhif7fnu38fdEPQLcnI_6dQ0RpLzrbiQ-MTwTvdVmrZLT9cJJMeSXmizUcJTYzVN2D6ZrogNZbhHwTEfJ7OzwOrYNyT5rF1S/s640/s13.PNG" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Add captHow To Add HTMl Encoder Tool In Blogger Post | How To Put HTML Encoder Tool In Blogger ion</td></tr>
</tbody></table>
 
 
<div dir="ltr" style="background-color: white; color: rgba(0, 0, 0, 0.701961); font-family: Roboto, sans-serif; font-size: 17px; line-height: 32px; margin: 0px; padding: 0px;" trbidi="on">
3. Paste below code just above </head></div>
<pre style="background: rgb(93, 93, 93); border-radius: 5px; color: white; font-family: Roboto, sans-serif; font-size: 16px; margin: 1em auto; padding: 1.5em 3em; text-align: justify; white-space: pre-wrap; word-wrap: break-word;"><script type='text/javascript'>
//<![CDATA[
function html2entitiesundefined){var a=/[undefined<>"'&]/g;forundefinedi=0;i<arguments.length;i++)arguments[i].value=arguments[i].value.replaceundefineda,functionundefineda){return replacecharundefineda)})}function replacecharundefineda){ifundefined"<"==a)return"&lt;";ifundefined">"==a)return"&gt;";ifundefined'"'==a)return"&quot;";ifundefined"'"==a)return"&#039;";ifundefined"&"==a)return"&amp;"};
//]]>
</script>
</pre>
<div class="MsoNormal" style="background-color: white; color: rgba(0, 0, 0, 0.701961); font-family: Roboto, sans-serif; font-size: 17px; line-height: 32px; margin: 0px; padding: 0px;">
4. Now find ]]></b:skin>  and paste the following code just above it.</div>
<div class="MsoNormal" style="background-color: white; color: rgba(0, 0, 0, 0.701961); font-family: Roboto, sans-serif; font-size: 17px; line-height: 32px; margin: 0px; padding: 0px;">
 </div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwIJicRSwxvJ4dBNTcq3S1TFbDZQ9I8-roaOe1FwLiflxzeh9aIAS7ShffLBftbDBQwNJGkkbvz3WYImPlf9nhtPub84JFjRQnEdqdIlDve_GcSyfMhPrPrA9gI-Z0ZBxebjWpCduoZB5N/s1600/s12.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="299" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwIJicRSwxvJ4dBNTcq3S1TFbDZQ9I8-roaOe1FwLiflxzeh9aIAS7ShffLBftbDBQwNJGkkbvz3WYImPlf9nhtPub84JFjRQnEdqdIlDve_GcSyfMhPrPrA9gI-Z0ZBxebjWpCduoZB5N/s640/s12.PNG" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">How To Add HTMl Encoder Tool In Blogger Post | How To Put HTML Encoder Tool In Blogger </td></tr>
</tbody></table>
<div class="MsoNormal" style="background-color: white; color: rgba(0, 0, 0, 0.701961); font-family: Roboto, sans-serif; font-size: 17px; line-height: 32px; margin: 0px; padding: 0px;">
 </div>
<pre style="background: rgb(93, 93, 93); border-radius: 5px; color: white; font-family: Roboto, sans-serif; font-size: 16px; margin: 1em auto; padding: 1.5em 3em; text-align: justify; white-space: pre-wrap; word-wrap: break-word;">input.tec2{background:none repeat scroll 0 0 #888;border:1px dotted #888;color:#FFF;font:bold 13px 'trebuchet ms',helvetica,sans-serif}
input.tec2hov{background:none repeat scroll 0 0 #aaa;border:1px dotted #aaa;color:#FFF;font:bold 13px 'trebuchet ms',helvetica,sans-serif}
textarea{width:100%;color:#3D72C0;font:14px verdana;background:#fff;border:1px dotted #ff0000}
textarea:hover{border:1px dotted #222}
</pre>
<div class="MsoNormal" style="background-color: white; color: rgba(0, 0, 0, 0.701961); font-family: Roboto, sans-serif; font-size: 17px; line-height: 32px; margin: 0px; padding: 0px;">
5. Click Save.</div>
<div class="MsoNormal" style="background-color: white; color: rgba(0, 0, 0, 0.701961); font-family: Roboto, sans-serif; font-size: 17px; line-height: 32px; margin: 0px; padding: 0px;">
 </div>
<div class="MsoNormal" style="background-color: white; color: rgba(0, 0, 0, 0.701961); font-family: Roboto, sans-serif; font-size: 17px; line-height: 32px; margin: 0px; padding: 0px;">
6. Now go to Dashboard > Create New Post > Go to HTML Section and paste the following code in it. </div>
 
<pre style="background: rgb(93, 93, 93); border-radius: 5px; color: white; font-family: Roboto, sans-serif; font-size: 16px; margin: 1em auto; padding: 1.5em 3em; text-align: justify; white-space: pre-wrap; word-wrap: break-word;"><form>
<textarea name="data1" style="width: 590px; height: 200px"></textarea>
<input class="tec2" type="button" value="Convert" onclick="html2entitiesundefinedthis.form.data1)" onmouseout="this.className='tec2'" onmouseover="this.className='tec2 tec2hov'">
<input class="tec2" type="reset" value="Clear" onmouseout="this.className='tec2'" onmouseover="this.className='tec2 tec2hov'">
</form>
</pre>
<div class="MsoNormal" style="background-color: white; color: rgba(0, 0, 0, 0.701961); font-family: Roboto, sans-serif; font-size: 17px; line-height: 32px; margin: 0px; padding: 0px;">
7. Now Click Publish ! Its Done !</div>
<div class="MsoNormal" style="background-color: white; color: rgba(0, 0, 0, 0.701961); font-family: Roboto, sans-serif; font-size: 17px; line-height: 32px; margin: 0px; padding: 0px;">
 </div>
<div class="MsoNormal" style="background-color: white; color: rgba(0, 0, 0, 0.701961); font-family: Roboto, sans-serif; font-size: 17px; line-height: 32px; margin: 0px; padding: 0px;">
 </div>
<h3 style="background-color: white; color: rgba(0, 0, 0, 0.701961); margin: 0px; padding: 0px; text-align: left;">
USE HTML ENCODER :  </h3>
<div>
<a href="http://websiteranker-seo.blogspot.in/2016/01/adsense-code-encoder-online-html.html">Adsense Code Encoder | Online HTMl Encoder | HTML To XML parser | Blogger adsense converter</a></div>
</form>
</div>
<div class="mbw-author-box">
<img alt="author-pic" height="85" src="IMG" width="85" /> About Guest Blogger Here Goes Details about your guest author</div>

How To Add HTMl Encoder Tool In Blogger Post | How To Put HTML Encoder Tool In Blogger

How To Add HTMl Encoder Tool In Blogger Post | How To Put HTML Encoder Tool In Blogger Online HTML to XML parser | Blogger adsense co...

00:28

How To Add Social Sharing Widget In Blogger | Add A Social Media Icons Widget On BloggerIin Just 1 Minute

<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
How To Add Social Sharing Widget In Blogger | Add A Social Media Icons Widget On BloggerIin Just 1 Minute</h2>
 
<h3 style="text-align: left;">
Step 1 . Open Site Share This : <a href="http://www.sharethis.com/get-sharing-tools/#sthash.pWGDxjhR.dpbs" target="_blank">Click Here</a></h3>
 
<h3 style="text-align: left;">
Step 2 .  Select Your Plateform</h3>
<h3 style="text-align: left;">
 <div class="separator" style="clear: both; font-weight: bold; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-M443v6St5Sr8L9QbSh1Yy5gx_ITnjUyKVmYD3GE5GkN7Q07sTQ4O9n5mDSWC7bM5D36OJJ9twdb0Z845KtRZJPlNU8UZJZPy6iH2Ocb1XXI6lk2-B-XoanVEeSc7VgD439Dk7J9xOl-r/s1600/s1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-M443v6St5Sr8L9QbSh1Yy5gx_ITnjUyKVmYD3GE5GkN7Q07sTQ4O9n5mDSWC7bM5D36OJJ9twdb0Z845KtRZJPlNU8UZJZPy6iH2Ocb1XXI6lk2-B-XoanVEeSc7VgD439Dk7J9xOl-r/s640/s1.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; font-weight: bold; text-align: center;">
 </div>
<div class="separator" style="clear: both; font-weight: bold; text-align: left;">
Step 3. Select Your Style Of Social Sharing Widgets :</div>
<div class="separator" style="clear: both; font-weight: bold; text-align: left;">
 </div>
<div class="separator" style="clear: both; font-weight: bold; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigDlW5UDZ5G2bs0CnFB2jptLf1QamFK7QW_urtBv6Qm-sZ6DwOmn3tPeVjUjktf7gAEGHec2GWmLMPF5DNTpZOQmzyDBBWRu4MicuQ-zfHOxg6oRf71u75gzJMer3KZMB8sKipNMImYLqb/s1600/s3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigDlW5UDZ5G2bs0CnFB2jptLf1QamFK7QW_urtBv6Qm-sZ6DwOmn3tPeVjUjktf7gAEGHec2GWmLMPF5DNTpZOQmzyDBBWRu4MicuQ-zfHOxg6oRf71u75gzJMer3KZMB8sKipNMImYLqb/s640/s3.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; font-weight: bold; text-align: center;">
 </div>
<div class="separator" style="clear: both; font-weight: bold; text-align: left;">
Step 4. Customize Your Social Sharing Widgets :</div>
<div class="separator" style="clear: both; font-weight: bold; text-align: left;">
 </div>
<div class="separator" style="clear: both; font-weight: bold; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL5fdshTBgNmpWqFqTzpFStl2ZtCEDXujwEjj1eulssw8P_9EV4hLNZpSik9YW3n4rCPeqSA2PYLGtRNV_SKoLDk1WBnaBpHKnYCOXI959M3WrozAYwYOTzJSSjSTTsWcGT68XBoRvZCjX/s1600/s4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="404" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL5fdshTBgNmpWqFqTzpFStl2ZtCEDXujwEjj1eulssw8P_9EV4hLNZpSik9YW3n4rCPeqSA2PYLGtRNV_SKoLDk1WBnaBpHKnYCOXI959M3WrozAYwYOTzJSSjSTTsWcGT68XBoRvZCjX/s640/s4.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; font-weight: bold; text-align: center;">
 </div>
<div class="separator" style="clear: both; text-align: left;">
Step 5 Get The Code : Add This Code Go To <a href="https://www.blogger.com/home" target="_blank">Blogger Dahshboard</a></div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguI0Vi_Yb0gml_kXC4f8SYQw_BUsbRBz44nmffh-9NaXVIocXo1CeuXyPY6gPo7EEN2CzEwzlPHlqLpHU-5ZFsDq3OxTjFPIRStoWMJGAV7bLJK88LosUHtdXM_2J9-c_64M94eWujhi9W/s1600/s5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="496" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguI0Vi_Yb0gml_kXC4f8SYQw_BUsbRBz44nmffh-9NaXVIocXo1CeuXyPY6gPo7EEN2CzEwzlPHlqLpHU-5ZFsDq3OxTjFPIRStoWMJGAV7bLJK88LosUHtdXM_2J9-c_64M94eWujhi9W/s640/s5.PNG" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
 </div>
<div class="separator" style="clear: both;">
 </div>
<div class="separator" style="clear: both;">
Click Anywhere Inside The Code area And Press The CTRL+F Keys To Open The Search Box</div>
<div class="separator" style="clear: both;">
 </div>
<div class="separator" style="clear: both;">
Find In search Box =   <div class='post-footer'> </div>
<div class="separator" style="clear: both;">
 </div>
<div class="separator" style="clear: both;">
Just Above This Line, Add The code For The AddThis social Sharing Buttons</div>
</h3>
<h4 style="clear: both; text-align: left;">
 You Can Find Alos </h4>
<h2 style="text-align: left;">
<a class="titlex" href="http://websiteranker-seo.blogspot.in/2016/01/how-to-use-google-keyword-planner-tool.html" style="color: #252525; font-family: Oswald, 'Bebas Neue', Bebas, 'Arial Narrow', sans-serif; font-size: 16.5px; font-weight: normal; line-height: 1.4em; text-decoration: none;">How To Use Google Keyword Planner Tool For Seo</a></h2>
<div class="separator" style="clear: both;">
 </div>
<div class="separator" style="clear: both;">
 </div>
<div class="separator" style="clear: both; font-weight: bold; text-align: left;">
 </div>
 
 </div>

How To Add Social Sharing Widget In Blogger | Add A Social Media Icons Widget On BloggerIin Just 1 Minute

How To Add Social Sharing Widget In Blogger | Add A Social Media Icons Widget On BloggerIin Just 1 Minute Step 1 . Open Site Share This...

21:29

rankwebsite

Wikipedia

How To Add Automatic Recent Post Slider In Blogger With jQuery

Facebook Popup Widget For Blogger | Best seo Friendly Facebook Popup widget For Blogger

Adsense Code Encoder | Online HTMl Encoder | HTML To XML parser | Blogger adsense converter

How To Add HTMl Encoder Tool In Blogger Post | How To Put HTML Encoder Tool In Blogger

How To Add Social Sharing Widget In Blogger | Add A Social Media Icons Widget On BloggerIin Just 1 Minute

Popular Posts

Labels

Blog Archive