Solution Bux: Blogging

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 »

9 SEO Plugins Every WordPress Blog

<h1 class="entry-title" style="font-family: Arial, Tahoma, Verdana; line-height: 24px; margin: 0px 0px 10px; padding: 0px;">
<span style="color: blue; font-size: x-large;"><i><u style="background-color: #cccccc;">9 SEO Plugins Every WordPress Blog:-</u></i></span></h1>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
<em><br /></em></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
<em>Do you want to increase the search engine ranking of your <b>WordPress</b> blog? Check out these 9 <strong>SEO WordPress plugins</strong> that Shawn <b>Jooste</b> from</em> <em>Elite Blogger</em> <em>has pulled together for us.</em></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
<img alt="seo-wordpress-plugins.png" class="right" height="200" src="http://www.problogger.net/wp-content/uploads/2008/12/seo-wordpress-plugins.png" style="float: right; margin: 0px 0px 0px 10px;" width="200" />The best place by far to find traffic is from search engines. The art of <b>Search Engine Optimization</b> is often very daunting for new bloggers. Even some <b>experienced</b> bloggers just see <b>SEO</b> as a cloudy puddle of mud they would rather not play in.</div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
WordPress by default is pretty decent at <b>letting search</b> engines see what’s going on. But there are a whole bunch of other things that can be done to make your <b>blog rank better</b>. Fortunately there are <b>plugins available</b> to help you get better rankings for your<b> blog</b>, so you don’t have to go <b>digging</b> into the code of your blog to get some results from <b>search </b>engines.</div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
I’m not going to<b> explain</b> the validity or effects of each of these <b>SEO </b>tactics in detail. There is more than enough of that on the<b> Internet already</b> if you want to do some research. I’ll <b>mention briefly </b>what the <b>benefits </b>of each plugin is, and why you need it.</div>
<div style="background-color: white; color: #333333; line-height: 24px; padding: 0px 0px 15px;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><b><i><u>1. <a href="http://wordpress.org/extend/plugins/all-in-one-seo-pack/" style="color: #4280b4;">All in One SEO Pack</a></u></i></b></span></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
This allows you to set the basic <b>SEO </b>stuff for your <b>blog.</b> You need page titles, meta tags, <b>keywords, </b>and <b>descriptions</b>. This plugin allows you to <b>configure</b> them for either your entire blog or on a <b>post by post </b>basis.</div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; line-height: 24px; padding: 0px 0px 15px;">
<span style="font-size: large;"><b><i><u>2. <a href="http://wordpress.org/extend/plugins/redirection/" style="color: #4280b4;">Redirection</a></u></i></b></span></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
From time to time you make<b> changes </b>on your blog. Sometimes these changes end up <b>breaking your</b> <b>Permalink structure</b>. This often happens when you make a change to an <b>old post</b>, or do an upgrade to WordPress and make some changes to the <b>permalinks</b>. It’s very very common if you move your<b> blog from one host to another.</b></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
<b>Basically </b>what happens is that each post has a<b> unique URL</b>, called a permalink. When this <b>changes, </b>visitors who go to that <b>blog</b> post won’t find it. The <b>redirection </b>plugin helps you fix these problems by redirecting the visitor to the new permalink. This reduces the amount of traffic you get to<b> pages</b> that don’t<b> exist.</b></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; line-height: 24px; padding: 0px 0px 15px;">
<span style="font-size: large;"><b><i><u>3. <a href="http://wordpress.org/extend/plugins/robots-meta/" style="color: #4280b4;">Robots Meta</a></u></i></b></span></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
By default search engines crawl and<b> index</b> ALL the pages on your blog. This isn’t ideal, <b>because</b> it creates <b>duplicate content</b> and you can get yourself punished by<b> search</b> engines without knowing it. What the <b>Robots Meta</b> plugin allows you to do is <b>tell the search </b>engines which<b> sections of your blog </b>to crawl. This means that you’ll get more respect from <b>search engines</b>, and likely more<b> traffic.</b></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; line-height: 24px; padding: 0px 0px 15px;">
<b><i><u><span style="font-size: large;">4. <a href="http://wordpress.org/extend/plugins/seo-automatic-links/" style="color: #4280b4;">SEO Smart Links</a></span></u></i></b></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
One of the key issues with <b>SEO </b>is your internal <b>linking </b>structure. The more you link to a<b> certain </b>page on your blog, the more important it is to your <b>overall </b>content. Search<b> engines</b> treat your internal links as an <b>indication</b> of how well structured your site is. The<b> problem </b>with this is that if you <b>had to manually </b>go and create links to <b>relevant </b>and important posts you’ll spend hours and hours doing it.</div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
SEO Smart links allows you to specify a word, like ‘<b>SEO</b>’ and then link it to a post on your site. Then each time the word <b>SEO </b>appears on your site, it’s <b>automatically</b> turned into a link you <b>specified</b>.</div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; line-height: 24px; padding: 0px 0px 15px;">
<u><i><b><span style="font-size: large;">5. <a href="http://wordpress.org/extend/plugins/seo-image/" style="color: #4280b4;">SEO Friendly Images</a></span></b></i></u></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
Images also play an<b> important</b> role in your SEO strategy. So it’s<b> important </b>that you tag them correctly. SEO Friendly <b>images</b> allows you to do this, and<b> saves</b> you hours and hours of<b> work.</b> If, like most <b>bloggers </b>you use images in your posts, then this plugin is<b> essential.</b></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; line-height: 24px; padding: 0px 0px 15px;">
<span style="font-size: large;"><b><i><u>6. <a href="http://wordpress.org/extend/plugins/wordpress-google-seo-positioner/" style="color: #4280b4;">Google Positioner</a></u></i></b></span></div>
<div style="background-color: white; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
<span style="color: #333333;">It’s<b> important</b> to know your keywords. And this handy plugin allows you to track the <b>keywords </b>you’re getting searches for. It’s pointless selecting a few <b>keywords</b>, then writing some content for those keywords and <b>hoping </b>that the rest goes well. </span><b><span style="color: #0b5394;">SEO</span></b><span style="color: #333333;"> is about </span><b style="color: #333333;">being proactive</b><span style="color: #333333;"> and tracing what works and what doesn’t.</span></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; line-height: 24px; padding: 0px 0px 15px;">
<span style="font-size: large;"><b><i><u>7. <a href="http://wordpress.org/extend/plugins/permalinks-moved-permanently/" style="color: #4280b4;">Permalinks Moved Permanently</a></u></i></b></span></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
A common<b> mistake bloggers</b> make is choosing the wrong <b>permalink</b> structure. When you start your blog you think you know which is <b>best,</b> and as time goes buy you want to change your<b> permalink</b> structure. The problem with <b>changing </b>your permalink structure is that your <b>traffic</b> will come to a standstill until your site is <b>reindexed</b>, and that could take months.</div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
This plugin is <b>similar</b> to redirect but is an easier and better way to <b>manage permanent </b>permalink changes.</div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; line-height: 24px; padding: 0px 0px 15px;">
<span style="font-size: large;"><strong>8.</strong> <a href="http://wordpress.org/extend/plugins/nofollow-case-by-case/" style="color: #4280b4;"><strong>Nofollow Case by Case</strong></a></span></div>
<div style="padding: 0px 0px 15px;">
<span style="color: #333333; font-family: Arial, Tahoma, Verdana;"><span style="background-color: white; font-size: 14px; line-height: 24px;">The u</span></span><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px;">nfollow attribute </b><span style="color: #333333; font-family: Arial, Tahoma, Verdana;"><span style="background-color: white; font-size: 14px; line-height: 24px;">over the last year or two has had a fairly large</span></span><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px;"> impact</b><span style="color: #333333; font-family: Arial, Tahoma, Verdana;"><span style="background-color: white; font-size: 14px; line-height: 24px;"> on the </span></span><b>blogosphere.</b><span style="color: #333333; font-family: Arial, Tahoma, Verdana;"><span style="background-color: white; font-size: 14px; line-height: 24px;"> All comments in </span></span><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px;">WordPress</b><span style="color: #333333; font-family: Arial, Tahoma, Verdana;"><span style="background-color: white; font-size: 14px; line-height: 24px;"> by default are </span></span><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px;">nofollow</b><span style="color: #333333; font-family: Arial, Tahoma, Verdana;"><span style="background-color: white; font-size: 14px; line-height: 24px;"> links. This means that no Page Rank (PR) is being given via the link. This plugin changes that and makes comment links </span></span><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px;">valuable</b><span style="color: #333333; font-family: Arial, Tahoma, Verdana;"><span style="background-color: white; font-size: 14px; line-height: 24px;"> again. There are a number of </span></span><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px;">reasons</b><span style="color: #333333; font-family: Arial, Tahoma, Verdana;"><span style="background-color: white; font-size: 14px; line-height: 24px;"> you would want to give away<b> link juice.</b> It’s often used to attract people and encourage them to</span></span><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px;"> comment</b><span style="color: #333333; font-family: Arial, Tahoma, Verdana;"><span style="background-color: white; font-size: 14px; line-height: 24px;">. It can be very useful for new blogs who need some </span></span><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px;">exposure</b><span style="color: #333333; font-family: Arial, Tahoma, Verdana;"><span style="background-color: white; font-size: 14px; line-height: 24px;">.</span></span></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; line-height: 24px; padding: 0px 0px 15px;">
<span style="font-size: large;"><b><i><u>9. <a href="http://wordpress.org/extend/plugins/seo-slugs/" style="color: #4280b4;">SEO Slugs</a></u></i></b></span></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
Stop <b>words are i</b>gnored by search <b>engines.</b> So most of your post titles have them in, but <b>they are </b>meaningless to search engines. So when you have a post title like this<b>: “What </b>You Can Do Immediately For<b> Higher Rankings” y</b>ou have a permalink like this:<b> ‘/what-you-can-do-immediately-for-higher-</b>rankings’ but what you really want is for your <b>permalink</b> to look like this: <b>/immediately-</b>higher-rankings.</div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
This plugin <b>automatically</b> removes stop words from the <b>permalink,</b> helping you to<b> rank better.</b></div>
<div style="font-family: Arial, Tahoma, Verdana; line-height: 24px; padding: 0px 0px 15px;">
<strong><span style="color: red; font-size: x-large;"><i><u style="background-color: #eeeeee;">Conclusion:</u></i></span></strong></div>
<div style="padding: 0px 0px 15px;">
<b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px;">Getting better traffic</b><span style="color: #333333; font-family: Arial, Tahoma, Verdana;"><span style="background-color: white; font-size: 14px; line-height: 24px;"> from search engines will help you boost your blog. You’ll get</span></span><b> better income</b><span style="color: #333333; font-family: Arial, Tahoma, Verdana;"><span style="background-color: white; font-size: 14px; line-height: 24px;">, rank better, and be able to build a</span></span><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px;"> better brand.</b></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
<br /></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
<b>Enjoy With................</b></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
<b><br /></b></div>
<div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 24px; padding: 0px 0px 15px;">
<b><br /></b></div>
<div style="color: #333333; font-family: Arial, Tahoma, Verdana; line-height: 24px; padding: 0px 0px 15px;">
<b><span style="background-color: white; font-size: 14px;">                                                      </span><u><i><span style="font-size: x-large;"><a href="http://solutionbux.blogspot.com/" style="background-color: #cccccc;" target="_blank">Solution Bux</a></span></i></u><span style="background-color: white; font-size: 14px;">       </span></b></div>
<div style="color: #333333; font-family: Arial, Tahoma, Verdana; line-height: 24px; padding: 0px 0px 15px;">
<b><span style="background-color: white; font-size: 14px;"><br /></span></b></div>

9 SEO Plugins Every WordPress Blog

9 SEO Plugins Every WordPress Blog:- Do you want to increase the search engine ranking of your WordPress blog? Check out these 9 SEO WordPress plugins that Shawn Jooste from Elite Blogger has pulled …

Learn More »

How to Create a Vertical Navigation Bar for Blogger

<span style="color: blue;"><span style="font-size: large;"><strong>How to Create a Vertical Navigation Bar for Blogger</strong></span></span><br />

<br />

In this post i will <b>show</b> you how to <b>create</b> a vertical <b>navigation</b> bar for<br />

blogger. <b>Creating</b> a vertical navigation bar can be most <b>important </b>thing to your<br />

blogger. It is a simple <b>process.</b> It easier for your <b>visitor</b> to search any page<br />

that <b>relates</b> to your blog. It helps to keep <b>organized</b> your site. If 
you want to <b>create </b>a <b>vertical </b>navigation bar for <b>blogger....</b><br />
<br />
<u><b>Just Follow These Steps and Enjoy:-</b></u><br />
<div style="text-align: center;">
</div>
<div style="text-align: center;">
</div>
<div style="text-align: center;">
<a href="http://solutionbux.blogspot.com/" target="_blank"><img alt="navigation bar" class="aligncenter size-full wp-image-370" height="180" src="http://bloguider.com/wp-content/uploads/2014/05/navigation-bar.jpg" title="navigation bar" width="300" /></a></div>
<br />

<span style="font-size: large;"><u><strong>1.</strong></u></span> first sign in to your<b> blogger</b> account.<br />
<br />

<span style="font-size: large;"><u><strong>2.</strong></u></span> Then select <b><span style="background-color: #ffcc99;">design</span></b> and click <b><span style="background-color: #ffcc99;">Edit HTML.</span></b><br />

<br />
<span style="font-size: large;"><u><strong>3.</strong></u></span> By using<strong> Ctrl+f</strong> search this tag<br />

<span style="font-size: large;"><u><strong>4.</strong></u></span> And paste below <b>code </b>before above <b>code</b>.<br />
<br />
<br />

<div style="border: 1px solid black; height: 200px; overflow: scroll; width: 500px;">
#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border:<br />

none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px;<br />

font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt;<br />

font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }<br />

#menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background:<br />

url<br />

(https://lh5.googleusercontent.com/_u4rBCfM4eII/TWfkSju3ygI/AAAAAAAABPo/yNNAeIRU<br />

PAM/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF;<br />

background: url<br />

(https://lh5.googleusercontent.com/_u4rBCfM4eII/TWfkSju3ygI/AAAAAAAABPo/yNNAeIRU<br />

PAM/s288/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }<br />

<br />

</div>
<br />
<span style="font-size: large;"><u><strong>5.</strong></u></span> Select<span style="background-color: #ffcc99;"> <b>Save Template</b>.</span><br />
<span style="background-color: #ffcc99;"><br /></span>

<span style="font-size: large;"><u><strong>6.</strong></u></span> Now again select <span style="background-color: #ffcc99;">design</span> and go to <span style="background-color: #ffcc99;">Page Element. </span><br />
<span style="background-color: #ffcc99;"><br /></span>

<span style="font-size: large;"><u><strong>7.</strong></u></span> Then click <span style="background-color: #ffcc99;">Add a Gedget </span><br />
<span style="background-color: #ffcc99;"><br /></span>

<span style="font-size: large;"><u><strong>8.</strong></u></span> Go to<strong> HTML/JavaScript</strong> and paste below <b>code</b>.<br />

<br />

<div style="border: 1px solid black; height: 200px; overflow: scroll; width: 500px;">
<div id=”menu9″><br />
<ul><br />
<li><a href=”#”>Title 1</a></li><br />
<li><a href=”#”>Title 2</a></li><br />
<li><a href=”#”>Title 3</a></li><br />
<li><a href=”#”>Title 4</a></li><br />
<li><a href=”#”>Title 5</a></li><br />
</ul><br />
</div><br />

</div>
<br />
<span style="font-size: large;"><u><strong>9.</strong></u></span> # must be replaced with your page <a href="http://solutionbux.blogspot.com/" target="_blank"><b>link</b></a> and Title must be <b>replaced </b>with your<br />

page title name.<br />
<br />

<span style="font-size: large;"><u><strong>10.</strong></u></span> click on<span style="background-color: #ffcc99;"> Save button. </span><br />
<span style="background-color: #ffcc99;"><br /></span>

<span style="font-size: large;"><u><strong>11.</strong></u></span> You have <b>Done</b> it.<br />
<br />
<br />
<b>Enjoy With..............</b><br />
<br />
<br />
<br />
<b>                                    <a href="http://solutionbux.blogspot.com/" target="_blank"><u><i><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: x-large;">Solution Bux</span></span></i></u></a>   </b> <br />
<br />
<br />

How to Create a Vertical Navigation Bar for Blogger

How to Create a Vertical Navigation Bar for Blogger In this post i will show you how to create a vertical navigation bar for blogger. Creating a vertical navigation bar can be most important thing to …

Learn More »

How to disable right-click on your Blogger site

</span>

</span>

</span>
</div>
<div style="padding-left: 60px; text-align: center;">
<span style="color: blue;"><span style="font-size: large;"><em><strong>How to disable right-click on your Blogger site</strong></em></span></span></div>
<div style="padding-left: 60px; text-align: center;">
<br /></div>
<div style="text-align: center;">
<a href="http://solutionbux.blogspot.com/" target="_blank"><img alt="disable right-click" class="aligncenter size-full wp-image-381" height="300" src="http://bloguider.com/wp-content/uploads/2014/05/disable-right-click.jpg" title="disable right-click" width="292" /></a></div>
If you want that <b>nobody </b>can copy any matter from your <b>Blogger</b> site then you should do one<b> thing</b><br />
and that is <b>disable</b> right-click on your <b>Blogger</b>. disable right-click make your Blogger secure as you want,<br />
and it will disable copy and paste <b>function.</b> it is a very easy <b>process</b> and done within a <b>minute</b>.<br />
<br />
<br />
<b><span style="font-size: large;"><u>Just Follow These Steps and learn:-</u></span> </b> <br />
<br />

<span style="font-size: large;"><b><u>1. </u></b></span>  First of all  go to <b>blogger</b> account.<br />

<br />

<strong><span style="font-size: large;"><u>2.</u></span> </strong>  Then select<span style="background-color: yellow;"> design</span> and click <span style="background-color: yellow;">Page element.</span> <a href="http://solutionbux.blogspot.com/" target="_blank"><img alt="disable right-click" class="size-full wp-image-382 alignright" height="276" src="http://bloguider.com/wp-content/uploads/2014/05/How-to-disable-right-click-..jpg" title="disable right-click" width="300" /></a><br />

<br />

<strong><span style="font-size: large;"><u>3.</u></span> </strong>  Now select <span style="background-color: yellow;">Add a Gadget</span>.<br />

<br />

<b><span style="font-size: large;"><u>4.</u></span></b>   Select <b><span style="background-color: yellow;">HTML/JavaScript</span></b> and paste below code.<br />

<br />

400px;”><br />

<!–<br />
//Disable right click script III- By Renigade (renigade@mediaone.net)<br />

//For full source code, visit http://www.dynamicdrive.com<br />
var message=”";<br />
///////////////////////////////////<br />

function clickIE() {if (document.all) {(message);return false;}}<br />

function clickNS(e) {if<br />

(document.layers||(document.getElementById&amp;&amp;!document.all)) {<br />

if (e.which==2||e.which==3) {(message);return false;}}}<br />

if (document.layers)<br />

{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}<br />

else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}<br />

document.oncontextmenu=new Function(“return false”)<br />

// –><br />

</script><br />

</td></tr><br />

</tbody></table><br />
</center><br />

<br />

</div>
<br />

<br />

<strong><span style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: large;"><u>5.</u></span></span> </strong> And <b>finally</b> Click<span style="background-color: yellow;"> save</span> <b>Button.</b><br />

<br />

<span style="font-family: Georgia,"Times New Roman",serif;"><b><span style="font-size: large;"><u>6.</u></span></b></span>  you have<b> done</b> it.<br />
<br />
<b>Enjoy With.............</b><br />
<br />
<br />
<br />
<b>                                          <a href="http://solutionbux.blogspot.com/" target="_blank"><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: x-large;"><u><i>Solution Bux</i></u></span></span></a>  </b> <br />
<br />
<br />

How to disable right-click on your Blogger site

How to disable right-click on your Blogger site If you want that nobody can copy any matter from your Blogger site then you should do one thing and that is disable right-click on your Blogger. disabl…

Learn More »

How to Add attractive Blue courser to Blogger

<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-left: 1em; margin-right: 1em; text-align: left;">
<a href="http://bloguider.com/wp-content/uploads/2014/05/thFNPMA3VV.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="blue courser" border="0" class="aligncenter size-full wp-image-387" height="95" src="http://bloguider.com/wp-content/uploads/2014/05/thFNPMA3VV.jpg" title="blue courser" width="95" /></a><b>This is great nad attractive trick of Blogging....... </b></div>
<div style="margin-left: 1em; margin-right: 1em; text-align: left;">
<b> </b><br />
If you can spend few<b> minutes </b>on your<b> blogger </b>site  then you can add attractive blue courser to your <b>blogger,</b></div>
<div style="margin-left: 1em; margin-right: 1em; text-align: left;">
<br />
and make your <b>Blogger </b>more cool. adding blue courser a very <b>easy</b> and less time taking process.</div>
<div style="margin-left: 1em; margin-right: 1em; text-align: left;">
<br />
you just have to<b> paste </b>and save a code only and you get it <b>done</b>.<br />
so just <b>follow </b>these tips-</div>
<br />
<br />
<div style="text-align: center;">
<em><strong><span style="font-size: medium;"><a href="http://bloguider.com/how-to">How to </a>Add attractive Blue courser to Blogger</span></strong></em></div>
<br />

<div style="text-align: center;">
<a href="http://solutionbux.blogspot.com/" target="_blank"><img alt="tips" class="aligncenter size-full wp-image-388" height="296" src="http://bloguider.com/wp-content/uploads/2014/05/thLBEY9HI0.jpg" title="tips" width="300" /></a></div>
<div style="text-align: left;">
<span style="font-size: large;"><u><b>1.</b></u></span>   First go to <b>Blogger</b> account.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
</div>
<span style="font-size: large;"><u><b>2.</b></u></span>   Then select <b><span style="background-color: yellow;">design</span></b> and click <b><span style="background-color: yellow;">Edit HTML</span></b><br />
<b><span style="background-color: yellow;"><br /></span></b>
<b><span style="background-color: yellow;"><br /></span></b>

<div style="text-align: left;">
</div>
<span style="font-size: large;"><u><b>3.</b></u></span>   Now select<span style="background-color: yellow;"> “<b>expand widget Template” . </b></span><br />
<span style="background-color: yellow;"><b><br /></b></span>
<span style="background-color: yellow;"><br /></span>

<div style="text-align: left;">
</div>
<div style="text-align: left;">
<span style="font-size: large;"><u><b>4.</b></u></span>   Now search below tag by <b>scrolling</b> down or by using <b>Ctrl+F</b></div>
<div style="text-align: left;">
<span style="background-color: yellow;"></body></span></div>
<div style="text-align: left;">
<span style="background-color: yellow;"><br /></span></div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<span style="font-size: large;"><u><b>5.</b></u></span>   Then place below code before above tag</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<span style="background-color: #cc99ff;"><style type=”text/css”>body,a,a:hover{cursor:url(<a href="http://cur.cursors/"><span style="background-color: #cc99ff;">http://cur.cursors</span></a>-</span><br />
<span style="background-color: #cc99ff;"> 4u.net/cursors/cur-2/cur116.cur),progress;}</style></span></div>
<div style="text-align: left;">
<span style="background-color: #cc99ff;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: #cc99ff;"><br /></span></div>
<div style="text-align: left;">
<span style="background-color: #cc99ff;"><br /></span></div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<span style="font-size: large;"><u><b>6.</b></u></span>  Check for <b>preview</b> .</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<span style="font-size: large;"><u><b>7.</b></u></span>  And <b>finally</b> Click<b> </b><span style="background-color: yellow;"><b>save Button</b>.</span></div>
<div style="text-align: left;">
<span style="background-color: yellow;"><br /></span></div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<span style="font-size: large;"><u><b>8. </b></u></span> you have<b> done</b> it.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b>Enjoy With.......................</b></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b>                                             <a href="http://solutionbux.blogspot.com/" target="_blank"><span style="color: #073763;"><i><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: x-large;"><u>Solution Bux</u></span></span></i></span></a>           </b> </div>

How to Add attractive Blue courser to Blogger

This is great nad attractive trick of Blogging....... If you can spend few minutes on your blogger site then you can add attractive blue courser to your blogger, and make your Blogger more cool. …

Learn More »

How to Add attractive subscribe box to Blogger

</span>

</span>

</span>
</div>
<span style="color: #003300;"><em><strong><span style="font-size: medium;">                               How to Add attractive subscribe box to Blogger</span></strong></em></span><div style="padding-left: 270px;">
<br /></div>
<div style="padding-left: 270px;">
<br /></div>
<div style="text-align: center;">
 <img alt="subscribe box " class="aligncenter size-full wp-image-395" height="211" src="http://bloguider.com/wp-content/uploads/2014/05/dd.jpg" title="subscribe box " width="300" /> </div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
To make your <b>Blogger</b> beautiful you must know How to <b>Add attractive</b> subscribe box to <b>Blogger.</b><br />
its a very easy<b> process</b> and <b>hardly</b> take two minutes. by adding <b>subscribe </b>box you can make your<br />
Blogger more<b> attractive </b>and <b>interesting.</b><br />

<br />

<span style="font-size: large;"><b><span style="text-decoration: underline;">so just follow these tips:-</span></b></span><br />
<span style="text-decoration: underline;"><br /></span>

<span style="font-size: large;"><u><strong>1. </strong></u></span>  First go to<b> blogger </b>account.<br />

<br />

<span style="font-size: large;"><u>2.</u></span><strong>  </strong> Then select<b><span style="background-color: yellow;"> design</span></b> and click<b><span style="background-color: yellow;"> page element</span></b><br />

<br />

<span style="font-size: large;"><u>3. </u></span>  Now click on <b><span style="background-color: yellow;">Add gadget</span></b> and then select <b><span style="background-color: yellow;">HTML/JavaScript .</span></b><br />

<br />

<span style="font-size: large;"><u>4.</u></span>   And paste the <b>code given</b> below .<br />
<br />
<br />

<div style="border: 1px solid black; height: 200px; overflow: scroll; width: 700px;">
<style><br />
.mbt-email{<br />
background:url(http://icons.iconarchive.com/icons/custom-icon-design/pretty-office/48/message-already-read-icon.png) no-repeat 0px 12px ;<br />
width:300px;<br />
padding:10px 0 0 55px;<br />
float:left;<br />
font-size:1.4em;<br />
font-weight:bold;<br />
margin:0 0 10px 0;<br />
color:#686B6C;<br />
}<br />
.mbt-emailsubmit{<br />
background:#9B9895;<br />
cursor:pointer; color:#fff;<br />
border:none;<br />
padding:3px;<br />
text-shadow:0 -1px 1px rgba(0,0,0,0.25);<br />
-moz-border-radius:6px;<br />
-webkit-border-radius:6px;<br />
border-radius:6px;<br />
font:12px sans-serif;<br />
}<br />
.mbt-emailsubmit:hover{<br />
background:#E98313;<br />
}<br />
.textarea{<br />
padding:2px;<br />
margin:6px 2px 6px 2px;<br />
background:#f9f9f9;<br />
border:1px solid #ccc;<br />
resize:none;<br />
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);<br />
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);<br />
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;<br />
width:170px;<br />
color:#666;}<br />
</style><br />
<div class=”mbt-email”><br />
Subscribe via Email<br />
<form action=”http://feedburner.google.com/fb/a/mailverify”
 id=”feedform” method=”post” target=”popupwindow” 
onsubmit=”window.open(‘Enter here your feedburner url’, ‘popupwindow’, 
‘scrollbars=yes,width=550,height=520′);return true”><br />

<br />

</div>
<br />

<strong>5.</strong>  And finally Click <b><span style="background-color: yellow;">save</span></b> Button.<br />

<br />

<strong>6.</strong>  you have <b>done</b> it.<br />
<br />
<b>Enjoy Wtih...................</b><br />
<br />
<br />
<br />
<b>                                                      <a href="http://solutionbux.blogspot.com/" target="_blank"><i><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: x-large;"><u>Solution Bux</u></span></span></i></a>        </b> <br />

How to Add attractive subscribe box to Blogger

How to Add attractive subscribe box to Blogger To make your Blogger beautiful you must know How to Add attractive subscribe box to Blogger. its a very easy process a…

Learn More »

How to Add Jquery Image Slide Show for Blogger

<div class="format_text entry-content">
<b><span style="color: #333300; font-size: medium;">                         Tips to Add Jquery Image Slide Show for Blogger</span></b><div style="padding-left: 90px; text-align: center;">
<br /></div>
<div style="padding-left: 90px; text-align: center;">
<br /></div>
<div style="text-align: center;">
 <img alt="jquery" class="aligncenter size-full wp-image-375" height="250" src="http://bloguider.com/wp-content/uploads/2014/05/th.jpg" title="jquery" width="250" /> </div>
<div style="text-align: center;">
<br /></div>
Today I want to show you the tips to add jquary image slideshow for blogger users.<br />
This is very simple to add slideshow to your blog. <b>just follow below tips -</b><br />

<br />

<span style="font-size: large;"><u><b>1.</b></u></span>   First go to <b>blogger</b> account.<br />

<br />

<span style="font-size: large;"><u><b>2.</b></u></span>   Then select design and click <b>Page element.</b><br />

<br />

<span style="font-size: large;"><u><b>3.</b></u></span>   Now select <b>Add a Gadget</b>.<br />

<br />

<span style="font-size: large;"><u><b>4.</b></u></span>   Select <b>HTML/JavaScript</b> and paste below code.<br />

<br />

<div style="border: 1px solid black; height: 200px; overflow: scroll; width: 500px;">
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script><br />
<script type=”text/javascript” src=”http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js”></script><br />
<script type=”text/javascript”><br />
$(document).ready(function() {<br />
$(‘#MBT-slider’).s3Slider({<br />
timeOut: 3000<br />
});<br />
});<br />
</script><br />
<style><br />
#MBT-slider {<br />
width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */<br />
height: 335px;<br />
position: relative;<br />
overflow: hidden;<br />
margin-left: 0;<br />
}<br />
#MBT-sliderContent {<br />
width: 590px;<br />
position: absolute;<br />
top: 0;<br />
margin-left: 0;<br />
}<br />
.MBT-sliderImage {<br />
float: left;<br />
position: relative;<br />
display: none;  top: 0;<br />
border:1px solid #ddd;<br />
}<br />
.MBT-sliderImage span {<br />
position: absolute;<br />
font: 10px/15px sans-serif,Arial, Helvetica;<br />
padding: 10px 10px;<br />
background-color: #000;<br />
color: #fff;<br />
filter:’alpha(opacity=70)’;<br />
-moz-opacity: .5;<br />
-khtml-opacity: .5;<br />
opacity: .5;<br />
text-align:justify;<br />
}<br />
.MBT-sliderImage span a {<br />
text-decoration:underline;<br />
color:#FE6602;<br />
}<br />
.clear {<br />
clear: both;<br />
}<br />
.top {<br />
top: 0;<br />
left: 0;<br />
width: 570px !important;<br />
height: 70px;<br />
}<br />
.bottom {<br />
bottom: 0;<br />
left: 0;<br />
width: 570px !important;<br />
height:90px;<br />
}<br />
.left {<br />
left: 0;<br />
top: 0;<br />
width: 110px !important;<br />
height: 335px;<br />
}<br />
.right {<br />
right: 0;<br />
bottom: 0;<br />
width: 80px !important;<br />
height: 319px;<br />
}<br />
</style><br />

<div id=”MBT-slider”><br />
<ul id=”MBT-sliderContent”><br />
<li class=”MBT-sliderImage”><br />
<img src=”Slide-Image-Address” /><br />
<span class=”right”><h3>Title-of-pic</h3>Slide Description [...] </span><br />
</li><br />
<li class=”MBT-slider Image”><br />
<img src=”Slide-Image-Address 2″ /><br />
<span class=”left”><h3>Title-of-pic 2</h3>Slide  Description [...] </span><br />
</li><br />

<li class=’MBT-slider image”><br />
<img src=”Slide-Image-Address 3″ /><br />
<span class=”top”><h3>Title-of-pic-3</h3>Slide Description [...] </span><br />
</li><br />
<li class=”MBT-sliderImage”><br />
<img src=”Slide-Image-Address 4″ /><br />
<span class=”bottom”><h3>Title-of-pic 4</h3>Slide  Description [...]<br />
</span></li><br />

<li class=”MBT-sliderImage”><br />
<img src=”Slide-Image-Address 5″ /><br />
<span class=”bottom”><h3>Title-of-pic-5</h3>Slide  Description [...] </span><br />
</li><br />
<div class=”clear MBT-sliderImage”></div><br />
</ul><br />
</div><br />
<br/><br />

</div>
<br />
<br />
<br />
<br />
<img alt="jquery" class="size-full wp-image-376 alignright" height="271" src="http://bloguider.com/wp-content/uploads/2014/05/thFY8RZIY5.jpg" title="jquery" width="271" /><br />

<br />

<span style="font-size: large;"><u><b>5.</b></u></span>    Now Slide<b>-Image-</b>Address Title-of-pic-3 <b>Slide Description[...]</b> must be replaced with your slide <b>content.</b><br />

<br />

<span style="font-size: large;"><u><b>6.</b></u></span>  And<b> finally</b> Click save<b> Button</b>.<br />

<br />

<br />

<b><span style="color: #003300; font-size: medium;">Enjoy With..............</span></b><br />
<b><span style="color: #003300; font-size: medium;"><br /></span></b>
<b><span style="color: #003300; font-size: medium;"><br /></span></b>
<br />
<b><span style="color: #003300; font-size: medium;"><br /></span></b>
<b><span style="color: #003300; font-size: medium;">                                   <a href="http://solutionbux.blogspot.com/" target="_blank"><u><i><span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><span style="font-size: x-large;">Solution Bux</span></span></i></u></a>    </span></b><br />
<b><span style="color: #003300; font-size: medium;"><br /></span></b>
<b><span style="color: #003300; font-size: medium;"><br /></span></b>

</div>

How to Add Jquery Image Slide Show for Blogger

Tips to Add Jquery Image Slide Show for Blogger Today I want to show you the tips to add jquary image slideshow for blogger users. This is very simple to add slideshow to …

Learn More »

Load more posts