Solution Bux: Widget

Add Stylish Keyboard Keys Widget In Blogger Posts

<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuiYJtT9FBDiOsrfJJNnSeNfjiVeFjKpHlSoKw-XCON20S_ap2bPu9fq04321I9plvPLxogNm8DNJJhIkN6zTvYEfRQMXfyodV68gZXmLDevujiAfAGM-7yrJ5dLHApjYMAb5pmGfIljc/s1600/how-to-add-stylish-keyboard-keys-in-blogger-posts.png" imageanchor="1" style="clear: left; color: #5a9e25; float: left; margin: 15px 1em 1em 0px; padding: 3px 7px; text-decoration: none;"><img alt="Stylish Blogger Keyboard Keys" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuiYJtT9FBDiOsrfJJNnSeNfjiVeFjKpHlSoKw-XCON20S_ap2bPu9fq04321I9plvPLxogNm8DNJJhIkN6zTvYEfRQMXfyodV68gZXmLDevujiAfAGM-7yrJ5dLHApjYMAb5pmGfIljc/s1600/how-to-add-stylish-keyboard-keys-in-blogger-posts.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Stylish Blogger Keyboard Keys" /></a></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
Today we are going to release splendid amazing Css keyboard keys to add in your blogger posts. These Css keys will bring more beauty in your blogger posts and will make your blog more designable. We are now alerted all <b>blogspo</b>t users, they can show stylishly Keyboard keys instead of any selective text. These keys are solely developed in <b>CSS3</b> to design and have not used any image or photo, so that not to increase the blog <b>loading time. </b>So If you are the true lover of PBT then you might be familiar that recently we have shared detailed tutorial about <b>Blogger Fancy</b> Social Sharing gadget and today we have yet another this splendid tutorial to show you with the complete guide.So in this article we will guide you, How to add <b>stylish CSS3</b> keyboard keys in blogger post to make it <b>designable. </b><br /><a href="" name="more" style="color: #5a9e25;"></a></div>
<h3 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 35px; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
Why To Show The CSS3 Stylish Keyboard Keys In Blogger Posts</h3>
<div style="background-color: white; font-family: Lato, Arial, sans-serif; line-height: 20px; text-align: justify;">
<span style="color: #3d5054;">Blogger is full of beauty even a teenager can <b>customize</b> it layout interface in less than <b>a minute. </b>Every single day bundles of </span><span style="color: #0b5394;">blogger templates</span><span style="color: #3d5054;"> releasing with unique stylish designing. So to make your blog more <b>stylized</b> and designable we have to analyzed each and every corner of the<b> blog</b>. Even we can also customize the default text in <b>blogger</b> to switch into<b> Css </b>stylish designing. Generally <b>we use to</b> show the default keyboard keys text inside blogger posts whenever learning how to gadget in blogger or <b>something</b> like that. Now for better understanding and being as professional blogger we have to add some </span><b style="color: #3d5054;">css3 designing keyboard keys</b><span style="color: #3d5054;"> to help the newbies very well instead of showing default text.</span></div>
<h3 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 35px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
Adding Css Keyboard Keys In Blogger Template</h3>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">First of all we have to add the</span><b style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"> keyboard Css style</b><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"> inside the template. We will copy the below Css entire code and then past into the template. Now whenever we want to write the post and need that designable keys to show then we have only need to call the by inserting specific ids or class.</span><br />
<ol style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">
<li>Go To <b>Blogger Dashboard:</b></li>
<br />
<li>Go to <b>Template </b>>> <b>Edit Html</b>:</li>
<br />
<li>Now search for <b>]]></b:skin></b></li>
<br />
<li><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglpBI2oBNvZXBDpeK9b8YVn-0I3C4bsNRcQTF6hV51m8BNIJM_QmSz3_R62AZ734HD60fLhYGVs8nomj2yqYNGMIvaTQLs03pqmlBCS02C_MkaTsJc0t1qZ_MAEvV3q72pCYzm691UUIM/s1600/css3-keyboard-keys-in-blogger-posts.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglpBI2oBNvZXBDpeK9b8YVn-0I3C4bsNRcQTF6hV51m8BNIJM_QmSz3_R62AZ734HD60fLhYGVs8nomj2yqYNGMIvaTQLs03pqmlBCS02C_MkaTsJc0t1qZ_MAEvV3q72pCYzm691UUIM/s320/css3-keyboard-keys-in-blogger-posts.png" style="border-width: 0px; margin: 10px; max-width: 90%;" width="320" /></a></div>
</li>
<br />
<li>Click on Arrow Option to expend</li>
<br />
<li>Now past the below given code above <b>]]></b:skin></b></li>
</ol>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br />
<blockquote class="tr_bq" style="background-color: #f2f1f1; border: 1px solid rgb(221, 221, 221); color: #3d5054; float: left; font-family: Lato, Arial, sans-serif; font-size: 0.9em; line-height: 1.3em; margin-bottom: 20px; margin-left: 35px; margin-right: 35px; overflow: hidden; padding: 20px; width: 448px;">
kbd{<br />border:1px solid gray;<br />font-size:1.2em;<br />box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;<br />-webkit-border-radius:3px;<br />-moz-border-radius:3px;<br />border-radius:3px;<br />margin:2px 3px;<br />padding:1px 5px;<br />}</blockquote>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
Save your template and you done the first part:</div>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Now whenever you go to write your new post and do want to show these stylishly keyboard keys in specific location then you will need to type the following queries inside your blogger post editor html: Let me show You.</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br />
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<span style="color: red;"><b><kbd></b></span>Ctrl<span style="color: red;"><b></kbd></b></span> + <span style="color: red;"><b><kbd></b></span>F<span style="color: red;"><b></kbd></b></span></div>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
</div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0WjdPASBtAf50uA811C8i6fX6iLmuosDlrJdelINLR7wCW1GsCdDmCfIKN4dAHyOFV7b8DSOsmopp3cuKaXnEgCS2d2CvgP1sasLQvRmyOc78c0jiqId7pUIwk0F2P9JAPoF0ag9XSbY/s1600/keyboard-short-cut-keys-in-blogger.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Stylish Blogger Keyboard Keys" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0WjdPASBtAf50uA811C8i6fX6iLmuosDlrJdelINLR7wCW1GsCdDmCfIKN4dAHyOFV7b8DSOsmopp3cuKaXnEgCS2d2CvgP1sasLQvRmyOc78c0jiqId7pUIwk0F2P9JAPoF0ag9XSbY/s1600/keyboard-short-cut-keys-in-blogger.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Stylish Blogger Keyboard Keys" /></a></div>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; line-height: 20px;">After enclosing your text inside the above tags: then these texts will be visible or looks like the below text:</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br />
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2DmTux7rcJjiQY9LOAPCDhdEg1SIVIlS545Pifj4JOOLvBhn8unS6YXLoN67SaNsBne0pJzTNFyWz1AvWY9zQTQNyPyKnb9-UDYXD42sHoPSuJ_1WejENkArwwUH4dq3VPTCHi0aYaPA/s1600/stylish-keyboard-keys-for-blogger.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Demo" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2DmTux7rcJjiQY9LOAPCDhdEg1SIVIlS545Pifj4JOOLvBhn8unS6YXLoN67SaNsBne0pJzTNFyWz1AvWY9zQTQNyPyKnb9-UDYXD42sHoPSuJ_1WejENkArwwUH4dq3VPTCHi0aYaPA/s1600/stylish-keyboard-keys-for-blogger.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Demo" /></a></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; line-height: 20px; text-align: center;">
<b><span style="font-size: large;">Enjoy With........................</span></b></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; line-height: 20px; text-align: center;">
<u><i><b><span style="background-color: #cccccc; color: blue; font-family: Georgia, Times New Roman, serif; font-size: x-large;"><a href="http://solutionbux.blogspot.com/" target="_blank">Solution Bux</a></span></b></i></u><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px;"> </span></div>

Add Stylish Keyboard Keys Widget In Blogger Posts

Today we are going to release splendid amazing Css keyboard keys to add in your blogger posts. These Css keys will bring more beauty in your blogger posts and will make your blog more designable. We …

Learn More »

Add Back To Top Of The Post ButtonWidget in Blogger

<div style="line-height: 20px; text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both; font-family: Lato, Arial, sans-serif; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; font-family: Lato, Arial, sans-serif; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjEkh58Gbi9xLtv2ts4jnw-ZqwSJ31ujp3GSNe3KhndWS_XHg6O3hyBu0DbbIOeNCXjIBIlry98dDb2-AcR7Bg6VuHpEHJn3Ujhq3I-WV8alWfTz-W6pSYY0Ay0hrgP9c3Gpli43AqRGGy/s1600/How+to+add+back+to+top+butoon.png" imageanchor="1" style="background-color: transparent; color: #5a9e25; margin-left: 1em; margin-right: 1em; margin-top: 15px; padding: 3px 7px; text-align: center; text-decoration: none;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjEkh58Gbi9xLtv2ts4jnw-ZqwSJ31ujp3GSNe3KhndWS_XHg6O3hyBu0DbbIOeNCXjIBIlry98dDb2-AcR7Bg6VuHpEHJn3Ujhq3I-WV8alWfTz-W6pSYY0Ay0hrgP9c3Gpli43AqRGGy/s320/How+to+add+back+to+top+butoon.png" style="border-width: 0px; margin: 10px; max-width: 90%;" width="320" /></a></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
</div>
Back to top of the post buttons is a button once clicked it will <b>navigate</b> the user to the top of the page or post. It is<b> basically </b>used for better scrolling, users don’t have to navigate using scroll bars instead they can use this button to<b> reach</b> to top in no time. Those bloggers who wishes to <b>write a long</b> post or if you have a video blog where you post lots of <b>images</b> in the single post back to the<b> top</b> of the post button is very <b>useful </b>for you. Back to top button not only saves the time of your visitor, but it also<b> adds</b> an enjoyment factor to your blog. Just follow the steps carefully and you will <b>discover</b> how to add back to top of the post button in<b> blogger blog.</b><a href="" name="more" style="color: #5a9e25;"></a></div>
<h4 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 30px; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-align: left; text-transform: capitalize;">
<u><i style="font-weight: normal;">How To Add Back To Top Of The Post Button In Blogger Blog</i></u></h4>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; text-align: justify;">
Login to your blogger account and select the blog on which you would like to implement back to top of the post button. After that, go to <b>Layout </b>section >> <b>Add a Gadget</b> >><b>HTML/Java Scrip</b>t and paste the following code and move towards customizing.</div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="border: 1px solid rgb(221, 221, 221); color: #3d5054; float: left; font-family: Lato, Arial, sans-serif; font-size: 0.9em; line-height: 1.3em; margin-bottom: 20px; margin-left: 35px; margin-right: 35px; overflow: hidden; padding: 20px; text-align: left; width: 448px;">
<span style="background-color: #f2f1f1;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></span><br /><span style="background-color: #f2f1f1;"><script type="text/javascript" ></span><br /><span style="background-color: #f2f1f1;">/***********************************************</span><br /><span style="background-color: #f2f1f1;">* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)</span><br /><span style="background-color: #f2f1f1;">* Modified by www.probloggertricks.com</span><br /><span style="background-color: #f2f1f1;">* This notice MUST stay intact for legal use</span><br /><span style="background-color: #f2f1f1;">* Visit Project Page at http://www.dynamicdrive.com for full source code</span><br /><span style="background-color: #f2f1f1;">***********************************************/</span><br /><span style="background-color: #f2f1f1;">var scrolltotop={</span><br /><span style="background-color: #f2f1f1;">    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control</span><br /><span style="background-color: #f2f1f1;">    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).</span><br /><span style="background-color: #f2f1f1;">    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},</span><br /><span style="background-color: #f2f1f1;">    controlHTML: '<img src="</span><b style="background-color: #3d85c6;">URL Goes Here</b><span style="background-color: #f2f1f1;">" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"</span><br /><span style="background-color: #f2f1f1;">    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner</span><br /><span style="background-color: #f2f1f1;">    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links</span><br /><span style="background-color: #f2f1f1;">    state: {isvisible:false, shouldvisible:false},</span><br /><br /><span style="background-color: #f2f1f1;">    scrollup:function(){</span><br /><span style="background-color: #f2f1f1;">        if (!this.cssfixedsupport) //if control is positioned using JavaScript</span><br /><span style="background-color: #f2f1f1;">            this.$control.css({opacity:0}) //hide control immediately after clicking it</span><br /><span style="background-color: #f2f1f1;">        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)</span><br /><span style="background-color: #f2f1f1;">        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists</span><br /><span style="background-color: #f2f1f1;">            dest=jQuery('#'+dest).offset().top</span><br /><span style="background-color: #f2f1f1;">        else</span><br /><span style="background-color: #f2f1f1;">            dest=0</span><br /><span style="background-color: #f2f1f1;">        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);</span><br /><span style="background-color: #f2f1f1;">    },</span><br /><br /><span style="background-color: #f2f1f1;">    keepfixed:function(){</span><br /><span style="background-color: #f2f1f1;">        var $window=jQuery(window)</span><br /><span style="background-color: #f2f1f1;">        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx</span><br /><span style="background-color: #f2f1f1;">        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety</span><br /><span style="background-color: #f2f1f1;">        this.$control.css({left:controlx+'px', top:controly+'px'})</span><br /><span style="background-color: #f2f1f1;">    },</span><br /><br /><span style="background-color: #f2f1f1;">    togglecontrol:function(){</span><br /><span style="background-color: #f2f1f1;">        var scrolltop=jQuery(window).scrollTop()</span><br /><span style="background-color: #f2f1f1;">        if (!this.cssfixedsupport)</span><br /><span style="background-color: #f2f1f1;">            this.keepfixed()</span><br /><span style="background-color: #f2f1f1;">        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false</span><br /><span style="background-color: #f2f1f1;">        if (this.state.shouldvisible && !this.state.isvisible){</span><br /><span style="background-color: #f2f1f1;">            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])</span><br /><span style="background-color: #f2f1f1;">            this.state.isvisible=true</span><br /><span style="background-color: #f2f1f1;">        }</span><br /><span style="background-color: #f2f1f1;">        else if (this.state.shouldvisible==false && this.state.isvisible){</span><br /><span style="background-color: #f2f1f1;">            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])</span><br /><span style="background-color: #f2f1f1;">            this.state.isvisible=false</span><br /><span style="background-color: #f2f1f1;">        }</span><br /><span style="background-color: #f2f1f1;">    },</span><br /><span style="background-color: #f2f1f1;">  </span><br /><span style="background-color: #f2f1f1;">    init:function(){</span><br /><span style="background-color: #f2f1f1;">        jQuery(document).ready(function($){</span><br /><span style="background-color: #f2f1f1;">            var mainobj=scrolltotop</span><br /><span style="background-color: #f2f1f1;">            var iebrws=document.all</span><br /><span style="background-color: #f2f1f1;">            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode</span><br /><span style="background-color: #f2f1f1;">            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')</span><br /><span style="background-color: #f2f1f1;">            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')</span><br /><span style="background-color: #f2f1f1;">                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})</span><br /><span style="background-color: #f2f1f1;">                .attr({title:'Scroll Back to Top'})</span><br /><span style="background-color: #f2f1f1;">                .click(function(){mainobj.scrollup(); return false})</span><br /><span style="background-color: #f2f1f1;">                .appendTo('body')</span><br /><span style="background-color: #f2f1f1;">            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text</span><br /><span style="background-color: #f2f1f1;">                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text</span><br /><span style="background-color: #f2f1f1;">            mainobj.togglecontrol()</span><br /><span style="background-color: #f2f1f1;">            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){</span><br /><span style="background-color: #f2f1f1;">                mainobj.scrollup()</span><br /><span style="background-color: #f2f1f1;">                return false</span><br /><span style="background-color: #f2f1f1;">            })</span><br /><span style="background-color: #f2f1f1;">            $(window).bind('scroll resize', function(e){</span><br /><span style="background-color: #f2f1f1;">                mainobj.togglecontrol()</span><br /><span style="background-color: #f2f1f1;">            })</span><br /><span style="background-color: #f2f1f1;">        })</span><br /><span style="background-color: #f2f1f1;">    }</span><br /><span style="background-color: #f2f1f1;">}</span><br /><span style="background-color: #f2f1f1;">scrolltotop.init()</span><br /><span style="background-color: #f2f1f1;"></script></span></blockquote>
<br style="text-align: left;" /><div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px;">
<br /></div>
<div class="separator" style="clear: both; font-family: Lato, Arial, sans-serif;">
<span style="background-color: #cccccc; text-align: left;"><b><u><i><span style="color: blue; font-size: large;">Customize your back to top of the post button</span></i></u></b></span><br style="text-align: left;" /><br style="text-align: left;" /><div style="background-color: white; color: #3d5054; font-size: 14px; text-align: justify;">
You can select <b>different</b> images for your back to top button, here I have <b>provided </b>few you can use your own too if you want.Place any of the<b> URL</b> you like in the above code, replace “<b>URL Goes Here</b>” with any of your selected URL from below and click<b> Save.</b></div>
<div style="background-color: white; color: #3d5054; font-size: 14px;">
<br /></div>
</div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXvt33okyk-o4QGjpqfnJ-UBathNWFGvxMHrn4hW_1D7uRSE9tsMsR47VuzndLjlMLG9fewnyr1FFe97Yyqn2GyWYMt9NyjAPiYxRa3EEXgZ0Ex9Nlde801AEandTRnAJu48f4Ug3xM9em/s1600/back+to+top+paw+button.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Back to top paw Button" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXvt33okyk-o4QGjpqfnJ-UBathNWFGvxMHrn4hW_1D7uRSE9tsMsR47VuzndLjlMLG9fewnyr1FFe97Yyqn2GyWYMt9NyjAPiYxRa3EEXgZ0Ex9Nlde801AEandTRnAJu48f4Ug3xM9em/s1600/back+to+top+paw+button.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Back to top paw Button" /></a></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px;">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXvt33okyk-o4QGjpqfnJ-UBathNWFGvxMHrn4hW_1D7uRSE9tsMsR47VuzndLjlMLG9fewnyr1FFe97Yyqn2GyWYMt9NyjAPiYxRa3EEXgZ0Ex9Nlde801AEandTRnAJu48f4Ug3xM9em/s1600/back+to+top+paw+button.png</div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Y-2T_UjWvTcsY5EfKJRQJeMzmb9NY3PUh7_XQF_sUL-G03kk5T3Y37Dqkg3qKIF_-1iMg_xnkCnrUBLqdij8XQeio9IsnS_wW_LwffJwt5R_fSfSf6GaQPgdkQK8qbCJG8dWVu4cynX2/s1600/Back+to+top+Circle.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Back to top Circle Button" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Y-2T_UjWvTcsY5EfKJRQJeMzmb9NY3PUh7_XQF_sUL-G03kk5T3Y37Dqkg3qKIF_-1iMg_xnkCnrUBLqdij8XQeio9IsnS_wW_LwffJwt5R_fSfSf6GaQPgdkQK8qbCJG8dWVu4cynX2/s1600/Back+to+top+Circle.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Back to top Circle Button" /></a></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px;">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Y-2T_UjWvTcsY5EfKJRQJeMzmb9NY3PUh7_XQF_sUL-G03kk5T3Y37Dqkg3qKIF_-1iMg_xnkCnrUBLqdij8XQeio9IsnS_wW_LwffJwt5R_fSfSf6GaQPgdkQK8qbCJG8dWVu4cynX2/s1600/Back+to+top+Circle.png</div>
<br style="text-align: left;" /><div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; text-align: justify;">
I hope this <b>article</b> of mine has helped you in <b>implementing </b>back to top of the post button in<b> blogger </b>bogs, do write to us in a<b> comment</b> how do you liked it and if you have any problem in <b>implanting </b>in your <b>blogger blog.</b></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; text-align: justify;">
<b><br /></b></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; text-align: justify;">
<b>Enjoy With......... </b></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; text-align: justify;">
<b><br /></b></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; text-align: justify;">
<b><br /></b></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
<b><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px;">                                                   </span><u><span style="color: blue; font-family: Georgia, Times New Roman, serif; font-size: x-large;"><i style="background-color: #cccccc;"><a href="http://solutionbux.blogspot.com/" target="_blank">Solution Bux</a></i></span></u><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px;">  </span></b></div>
<div style="text-align: justify;">
<b><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px;"><br /></span></b></div>
</div>
</div>

Add Back To Top Of The Post ButtonWidget in Blogger

Back to top of the post buttons is a button once clicked it will navigate the user to the top of the page or post. It is basically used for better scrolling, users don’t have to navigate using scroll…

Learn More »

Arrow Key Navigation for Blogger

<br />
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH0gBQRI03UI4KxFDcDpygHBfhUn7SMb_ONbiWX84mtBezpGYvwZedx4_Fy-0wooIk77XQL5vpk0S0pFxsiznB-N9uIBquFpkYcIbnk5bwXPhksrj-zRKAT_CVCTALfCSBCzqJ7-WjlHA/?imgmax=800" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img align="left" alt="Arrow Key Navigation for Blogger" border="0" class="postthumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH0gBQRI03UI4KxFDcDpygHBfhUn7SMb_ONbiWX84mtBezpGYvwZedx4_Fy-0wooIk77XQL5vpk0S0pFxsiznB-N9uIBquFpkYcIbnk5bwXPhksrj-zRKAT_CVCTALfCSBCzqJ7-WjlHA/?imgmax=800" style="background-color: #d8d9da; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(188, 188, 188); color: #333333; font-family: 'Open Sans', Arial, sans-serif; height: auto; line-height: 25px; margin-top: 0px; max-width: 98%; padding: 5px; vertical-align: baseline;" title="Arrow Key Navigation for Blogger" /></a><b>Navigating</b> through a website using the keyboard arrow keys is really useful as you don't have to look around the page for the <b>Newer </b>or Older page links. You <b>might have </b>already seen this feature on many top blogs.It’s really easy to <b>implement</b> this feature on your Blogger Blog.You just have to add the arrow key navigation widget to your<b> blogger blog.</b></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
This is a really simple and clean widget and you can see a demo of this widget right on this page. If you use the<strong style="border: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Right and Left arrow keys</strong>, you will be able to navigate to different pages on this blog. This works not just on the post pages, but also on the blog’s home page and label pages.The Arrow Key Navigation <b>Widget</b> will be disabled when you are <b>typing something </b>into a text box on the blog(This was done to avoid the page from being changed when the user is typing something into a text box and uses the arrow keys to move around this<b> text.).</b></div>
<h3 style="border-bottom-color: rgb(231, 231, 231); border-bottom-style: solid; border-width: 0px 0px 1px; font-family: 'Bree Serif', Arial, sans-serif; line-height: 40px; margin: 10px 0px; padding: 0px 0px 3px; vertical-align: baseline;">
<span style="color: blue; font-size: x-large;"><i><u style="background-color: #cccccc;">Why should I add this widget???</u></i></span></h3>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
This is a simple light weight widget which doesn’t depend on any external libraries and it’s really easy to install as well. It will give users a better experience when they are navigating across different pages of your blog.They won't have to scroll all the way down to the bottom of the page and look for the Older and Newer page links.</div>
<h3 style="border-bottom-color: rgb(231, 231, 231); border-bottom-style: solid; border-width: 0px 0px 1px; font-family: 'Bree Serif', Arial, sans-serif; line-height: 40px; margin: 10px 0px; padding: 0px 0px 3px; vertical-align: baseline;">
<span style="color: blue; font-size: x-large;"><u><i style="background-color: #cccccc;">How to add this Widget???</i></u></span></h3>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
You can add this widget by using the<b> below one click install</b>er.</div>
<form action="http://www.blogger.com/add-widget" method="post" style="border: 0px; font-family: 'Open Sans', Arial, sans-serif; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">
<div style="background-color: white; border: 0px; color: #333333; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<span style="font-size: small;"><input name="go" src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image" value="Add Arrow Key Navigation Widget" /></span></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
Add the widget to your sidebar or footer and the Arrow Key<b> Navigation will be activated </b>on your Blog.The <b>Widget</b> title won’t appear on your Blog. So you can give it any appropriate name which will help you in identifying the widget on the l<b>ayout page.</b></div>
<h3 style="border-bottom-color: rgb(231, 231, 231); border-bottom-style: solid; border-width: 0px 0px 1px; font-family: 'Bree Serif', Arial, sans-serif; font-variant: inherit; line-height: 40px; margin: 10px 0px; padding: 0px 0px 3px; vertical-align: baseline;">
<span style="color: blue; font-size: x-large;"><i><u style="background-color: #cccccc;">How to let readers know of this Widget??</u></i></span></h3>
<div style="background-color: white; border: 0px; color: #333333; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
You might want to add some text to your blog which suggests that your Blog can be traversed using the keyboard arrow keys.Something message similar to “Use the Left or Right Arrow keys to navigate through this blog” might help.</div>
<h3 style="border-bottom-color: rgb(231, 231, 231); border-bottom-style: solid; border-width: 0px 0px 1px; font-family: 'Bree Serif', Arial, sans-serif; font-variant: inherit; line-height: 40px; margin: 10px 0px; padding: 0px 0px 3px; vertical-align: baseline;">
<span style="color: blue; font-size: x-large;"><i><u style="background-color: #cccccc;">How to Remove the Widget???</u></i></span></h3>
<div style="background-color: white; border: 0px; color: #333333; font-family: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
If you want to remove this<b> widget </b>at any time, you can do that by removing the Arrow Page <b>Navigation Widget</b> from the Layout page.</div>
<h3 style="border-bottom-color: rgb(231, 231, 231); border-bottom-style: solid; border-width: 0px 0px 1px; font-family: 'Bree Serif', Arial, sans-serif; font-variant: inherit; line-height: 40px; margin: 10px 0px; padding: 0px 0px 3px; vertical-align: baseline;">
<span style="color: blue; font-size: x-large;"><i><u style="background-color: #cccccc;">How this works???</u></i></span></h3>
</form>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
If you are<b> curious</b> about how this works, then <b>below</b> is the actual code behind the <b>widget</b>. The code listens for <b>Keyboard </b>inputs and if detects an Arrow Key event, it will redirect the user to the newer or older page. The code picks the <b>newe</b>r and older page links from the <b>Blogger’s </b>Page Navigation Links.</div>
<pre class="code" style="background-color: #eeeeee; border: 2px solid rgb(231, 231, 231); color: #333333; line-height: 25px; margin-bottom: 10px; margin-top: 10px; overflow: auto; padding: 5px 10px; vertical-align: baseline;"><span style="font-size: large;"><script type='text/javascript'>
document.onkeyup = function(event)
{
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch(event.keyCode)
{
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
break;
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
}
};
</script></span></pre>
<a href="" name="more" style="-webkit-transition: background-color, color 0.2s linear; background-color: white; border: 0px; color: #41b7d8; font-family: 'Open Sans', Arial, sans-serif; line-height: 25px; margin: 0px; padding: 0px; transition: background-color, color 0.2s linear; vertical-align: baseline;"></a><span style="background-color: white; color: #333333; font-family: 'Open Sans', Arial, sans-serif; line-height: 25px;"></span><br />
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<b>Enjoy With.............</b></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<b><br /></b></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', Arial, sans-serif; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<b><br /></b></div>
<div style="background-color: white; border: 0px; color: #333333; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<b><span style="font-family: Open Sans, Arial, sans-serif;">                                            </span><i><u><span style="font-family: Georgia, Times New Roman, serif; font-size: x-large;"><a href="http://solutionbux.blogspot.com/" target="_blank">Solution Bux</a></span></u></i><span style="font-family: Open Sans, Arial, sans-serif;">  </span></b></div>
<div style="background-color: white; border: 0px; color: #333333; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<b><span style="font-family: Open Sans, Arial, sans-serif;"><br /></span></b></div>
<div style="background-color: white; border: 0px; color: #333333; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<b><span style="font-family: Open Sans, Arial, sans-serif;"><br /></span></b></div>

Arrow Key Navigation for Blogger

Navigating through a website using the keyboard arrow keys is really useful as you don't have to look around the page for the Newer or Older page links. You might have already seen this feature on ma…

Learn More »

Popular Post Slides Widget for Blogger

<div dir="ltr" style="background-color: white; border: 0px; color: #333333; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;" trbidi="on">
<div style="border: 0px; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
<h1 class="entry-title" style="border: 0px; color: #494949; line-height: 50px; margin: 0px 0px 10px; padding: 0px; vertical-align: baseline;">
<span style="font-family: Georgia, Times New Roman, serif; font-size: large;"><i><u>Popular Post Rotating Slides Widget for Blogger:-</u></i></span></h1>
</div>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjFRIEM1FHIJ-efMdObTSl9J9bIV_Ms8NjKz0JpmObRNuM3h7iSGBDB-ft7DFLuSjbmzo-CItqvASdCXoDI8sc28MzahZLjhOqDUTN9tXTV7-H8KKfDblXI5-NGK0CMdPrKzORTjpLzcE/s1600/popular+post+slider.png" imageanchor="1" style="-webkit-transition: background-color, color 0.2s linear; border: 0px; color: #333333; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; text-decoration: none; transition: background-color, color 0.2s linear; vertical-align: baseline;"><img alt="Popular Post Rotating Slides Widget" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjFRIEM1FHIJ-efMdObTSl9J9bIV_Ms8NjKz0JpmObRNuM3h7iSGBDB-ft7DFLuSjbmzo-CItqvASdCXoDI8sc28MzahZLjhOqDUTN9tXTV7-H8KKfDblXI5-NGK0CMdPrKzORTjpLzcE/s1600/popular+post+slider.png" style="background-color: #d8d9da; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(188, 188, 188); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; height: auto; line-height: inherit; margin: 0px; max-width: 98%; padding: 5px; vertical-align: baseline;" title="Popular Post Rotating Slides Widget" /></a></div>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<br /></div>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
This is the Best and impressive widget of popular post sliding automatically. Its easy to install on blogs only you need to do copy and paste <b>HTML/Javascript </b>Widget to your blog.<br /><a href="" name="more" style="-webkit-transition: background-color, color 0.2s linear; border: 0px; color: #41b7d8; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; transition: background-color, color 0.2s linear; vertical-align: baseline;"></a>This slider have an interesting thing is that it shows your post thumbnail, post title and description too.</div>
<div style="border: 0px; font-family: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="font-size: large;"><b><i><u>Follow all the steps as given below </u>↓↓</i></b></span></span></div>
<ol style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 1.5em 0px 1.571em 21px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Go To Blogger > <b>Design</b></li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Click add a <b>gadget</b></li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Choose Popular Posts <b>Widget </b>provided by blogger</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Keep<b> post number </b>greater than 4</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Save your widget</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Now select an<b> HTML/Javascript </b>widget</li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Paste the <b>following slide code</b> inside it</li>
</ol>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
</div>
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">
<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<br /></div>
</div>
</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
Add the two widgets<b> together. </b>One on top of another as <b>shown in below pic,</b></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Change <b>Colour</b> and Font According to your<b> Blog : ↓</b></span><br /><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
you can edit <b>colour</b> and font matched to your blog or as you wish to show this widget in your<b> blog.</b></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
</div>
<ul style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; list-style-type: circle; margin: 1.5em 0px 1.571em 1.571em; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; list-style: circle; margin: 0px 0px 0px 1.4em; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">To </span><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Change <b>Widget</b> container height edit </span><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b>height:310px;</b></span></li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; list-style: circle; margin: 0px 0px 0px 1.4em; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">To change the small rectangles width edit </span><strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">width:310px</strong></li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; list-style: circle; margin: 0px 0px 0px 1.4em; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">To change width of the text snippet then edit width:290px;. Keep this width 20px smaller than the rectangles width. For <b>example i</b>n this widget I have kept rectangles width=310px; and snippet width=290px;</span></li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; list-style: circle; margin: 0px 0px 0px 1.4em; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">To change link title color and font size edit </span><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">color:<b>#7CA2C4;</b> font:bold 12px verdana;</span></li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; list-style: circle; margin: 0px 0px 0px 1.4em; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">To change thumbnail image’s border colour and size edit </span><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">border:2px solid<b> #7CA2C4</b></span></li>
<li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; list-style: circle; margin: 0px 0px 0px 1.4em; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">To change the snippet text’s<b> font size, family </b>and colour then edit the </span><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">yellow highlighted code</span></li>
</ul>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">You can also replace code below if your blog have black/dark background : ↓</span></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b><br /></b></span></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<b>>>>> background:<span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDEZw3HDM5xCIPQiP62EcuCkY0M3S-doWBRYumY03QcC9FVRV3I-bJuq2119U5NImInTRZrDm2eizGbmixMUBRIifyAYED-ayfnmJnUYjhnIY6oKezyozYvPGRCoF0111fA9mjwqI3R30/s400/popular+posts.jpg) repeat-x;</span> <<<<</b></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
</div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b>with this,</b></span></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<b><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">>>>> </span><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">background:</span><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">#ffffff</span><span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">; </span></span></span></b></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><br /></span></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Replace only pink<b> coloured link.</b></span></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b><br /></b></span></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b><br /></b></span></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b>Enjoy With....................</b></span></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b><br /></b></span></div>
<div style="background-color: white; border: 0px; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b><br /></b></span></div>
<div style="border: 0px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b><span style="background-color: white; color: #333333; font-family: inherit; font-style: inherit;">                                                </span><span style="color: blue; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; font-size: x-large;"><i><u style="background-color: #cccccc;"><a href="http://solutionbux.blogspot.com/" target="_blank">Solution Bux</a></u></i></span><span style="background-color: white; color: #333333; font-family: inherit; font-style: inherit;">       </span></b></span></div>
<div style="border: 0px; line-height: 25px; margin: 0px; padding: 0px; vertical-align: baseline;">
<span style="border: 0px; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><b><span style="background-color: white; color: #333333; font-family: inherit; font-style: inherit;"><br /></span></b></span></div>

Popular Post Slides Widget for Blogger

Popular Post Rotating Slides Widget for Blogger:- This is the Best and impressive widget of popular post sliding automatically. Its easy to install on blogs only you need to do copy and paste HTML/Ja…

Learn More »