How To Add Floating Google +1, Facebook, Twitter Buttons To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLCkzxqsgue1pJSiScank0Ar3vOl2FwzKOjIxvRqS07TLzamPxM8qU5e5d-N5Cqv0GuRZ4vDmrXCz4Mztz4L065FWdrkac7QY2qxu8adUaApV5upYjuGxLBxkxvVfsXdeIbvtLOWOnha4/s1600/image11.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLCkzxqsgue1pJSiScank0Ar3vOl2FwzKOjIxvRqS07TLzamPxM8qU5e5d-N5Cqv0GuRZ4vDmrXCz4Mztz4L065FWdrkac7QY2qxu8adUaApV5upYjuGxLBxkxvVfsXdeIbvtLOWOnha4/s1600/image11.png" /></a></div> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">Till now we learned and created many </span><a href="http://www.mybloggertricks.com/2011/04/add-floating-facebook-like-and-retweet.html" style="background-color: white; color: #289728; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; outline: none; text-align: justify; text-decoration: none;" target="_blank">floating social share buttons</a><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"> but those button widgets in fact do not slide when the user scrolls the page up or down. The only thing I needed was a well constructed JavaScript code that could make the widget to float up and down synchronously with the webpage movement. Thanks to </span><a href="http://www.jtricks.com/javascript/navigation/floating.html" style="background-color: white; color: #289728; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; outline: none; text-align: justify; text-decoration: none;" target="_blank">Jtricks'</a><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"> Floating Menu code, we finally managed to bloggerize the floating effect and this widget is all ready to be added to your beautiful blogger blogs.  Kindly view the demo first,</span><br /> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span> <div style="text-align: left;">                                                                              <a href="http://bloggertricks-testblog.blogspot.com/2009/10/this-is-how-peacful-land-turned-into.html" style="background-color: white; color: #289728; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; outline: none; text-align: -webkit-center; text-decoration: none;" target="_blank">Live Demo</a></div> <div style="text-align: left;"> <br /></div> <h3 align="justify" style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; line-height: 20.796875px; padding: 3px;"> Adding Floating Social share Counters to Blogger</h3> <ol style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> <li><div align="justify"> Go To Blogger > Design</div> </li> <li><div align="justify"> Choose a HTML/JavaScript widget</div> </li> <li><div align="justify"> Paste the following code inside it,</div> </li> </ol> <blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <style><br />/*-------MBT Floating Counters------------*/<br />#floatdiv {<br />    position:absolute;<br />    width:94px;<br />    height:229px;<br />    top:0;<br />    left:0;<br />        z-index:100<br />}<br /><br />#mbtsidebar {<br />        border:1px solid #ddd;<br />        padding-left:5px;<br />    position:relative;<br />    height:220px;<br />    width:55px;<br />    margin:0 0 0 5px;<br />}<br /></style><br /><br /><br /><div id="floatdiv"><br /><div id="mbtsidebar"><br />    <table cellpadding="1px" cellspacing="0"><br />    <tr><br />    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;"><br /><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like><br />    </td><br />    </tr><br />    <tr><br />    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;"><br /><g:plusone size="Tall" expr:href="data:post.url"><br />    </g:plusone></td><br />    </tr><br />    <tr><br />    <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;"><br /><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="<b><span style="color: #0080ff;">mybloggertricks</span></b>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br />    </td><br />    </tr><br />    <tr><br />    <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;"><br /><p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.MyBloggerTricks.com" target="_blank">Widgets</a></p><br />    </td><br />    </tr><br />    </table><br /></div><br /></div><br /><script type="text/javascript"><br />// JavaScript Document<br /><br />   <!--<br />/* Script by: www.jtricks.com<br />* Version: 20071017<br />* Latest version:<br />* www.jtricks.com/javascript/navigation/floating.html<br />*/<br />var floatingMenuId = 'floatdiv';<br />var floatingMenu =<br />{<br />    targetX: 0,<br />    targetY: 300,<br />    hasInner: typeof(window.innerWidth) == 'number',<br />    hasElement: typeof(document.documentElement) == 'object'<br />        && typeof(document.documentElement.clientWidth) == 'number',<br />    menu:<br />        document.getElementById<br />        ? document.getElementById(floatingMenuId)<br />        : document.all<br />          ? document.all[floatingMenuId]<br />          : document.layers[floatingMenuId]<br />};<br />floatingMenu.move = function ()<br />{<br />    floatingMenu.menu.style.left = floatingMenu.nextX + 'px';<br />    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';<br />}<br />floatingMenu.computeShifts = function ()<br />{<br />    var de = document.documentElement;<br />    floatingMenu.shiftX = <br />        floatingMenu.hasInner <br />        ? pageXOffset <br />        : floatingMenu.hasElement <br />          ? de.scrollLeft <br />          : document.body.scrollLeft; <br />    if (floatingMenu.targetX < 0)<br />    {<br />        floatingMenu.shiftX +=<br />            floatingMenu.hasElement<br />            ? de.clientWidth<br />            : document.body.clientWidth;<br />    }<br />    floatingMenu.shiftY =<br />        floatingMenu.hasInner<br />        ? pageYOffset<br />        : floatingMenu.hasElement<br />          ? de.scrollTop<br />          : document.body.scrollTop;<br />    if (floatingMenu.targetY < 0)<br />    {<br />        if (floatingMenu.hasElement && floatingMenu.hasInner)<br />        {<br />            // Handle Opera 8 problems<br />            floatingMenu.shiftY +=<br />                de.clientHeight > window.innerHeight<br />                ? window.innerHeight<br />                : de.clientHeight<br />        }<br />        else<br />        {<br />            floatingMenu.shiftY +=<br />                floatingMenu.hasElement<br />                ? de.clientHeight<br />                : document.body.clientHeight;<br />        }<br />    }<br />}<br />floatingMenu.calculateCornerX = function()<br />{<br />    if (floatingMenu.targetX != 'center')<br />        return floatingMenu.shiftX + floatingMenu.targetX;<br />    var width = parseInt(floatingMenu.menu.offsetWidth);<br />    var cornerX =<br />        floatingMenu.hasElement<br />        ? (floatingMenu.hasInner<br />           ? pageXOffset<br />           : document.documentElement.scrollLeft) +<br />          (document.documentElement.clientWidth - width)/2<br />        : document.body.scrollLeft +<br />          (document.body.clientWidth - width)/2;<br />    return cornerX;<br />};<br />floatingMenu.calculateCornerY = function()<br />{<br />    if (floatingMenu.targetY != 'center')<br />        return floatingMenu.shiftY + floatingMenu.targetY;<br />    var height = parseInt(floatingMenu.menu.offsetHeight);<br />    // Handle Opera 8 problems<br />    var clientHeight =<br />        floatingMenu.hasElement && floatingMenu.hasInner<br />        && document.documentElement.clientHeight<br />            > window.innerHeight<br />        ? window.innerHeight<br />        : document.documentElement.clientHeight<br />    var cornerY =<br />        floatingMenu.hasElement<br />        ? (floatingMenu.hasInner <br />           ? pageYOffset<br />           : document.documentElement.scrollTop) +<br />          (clientHeight - height)/2<br />        : document.body.scrollTop +<br />          (document.body.clientHeight - height)/2;<br />    return cornerY;<br />};<br />floatingMenu.doFloat = function()<br />{<br />    // Check if reference to menu was lost due<br />    // to ajax manipuations<br />    if (!floatingMenu.menu)<br />    {<br />        menu = document.getElementById<br />            ? document.getElementById(floatingMenuId)<br />            : document.all<br />              ? document.all[floatingMenuId]<br />              : document.layers[floatingMenuId];<br />        initSecondary();<br />    }<br />    var stepX, stepY;<br />    floatingMenu.computeShifts();<br />    var cornerX = floatingMenu.calculateCornerX();<br />    var stepX = (cornerX - floatingMenu.nextX) * .07;<br />    if (Math.abs(stepX) < .5)<br />    {<br />        stepX = cornerX - floatingMenu.nextX;<br />    }<br />    var cornerY = floatingMenu.calculateCornerY();<br />    var stepY = (cornerY - floatingMenu.nextY) * .07;<br />    if (Math.abs(stepY) < .5)<br />    {<br />        stepY = cornerY - floatingMenu.nextY;<br />    }<br />    if (Math.abs(stepX) > 0 ||<br />        Math.abs(stepY) > 0)<br />    {<br />        floatingMenu.nextX += stepX;<br />        floatingMenu.nextY += stepY;<br />        floatingMenu.move();<br />    }<br />    setTimeout('floatingMenu.doFloat()', 20);<br />};<br />// addEvent designed by Aaron Moore<br />floatingMenu.addEvent = function(element, listener, handler)<br />{<br />    if(typeof element[listener] != 'function' ||<br />       typeof element[listener + '_num'] == 'undefined')<br />    {<br />        element[listener + '_num'] = 0;<br />        if (typeof element[listener] == 'function')<br />        {<br />            element[listener + 0] = element[listener];<br />            element[listener + '_num']++;<br />        }<br />        element[listener] = function(e)<br />        {<br />            var r = true;<br />            e = (e) ? e : window.event;<br />            for(var i = element[listener + '_num'] -1; i >= 0; i--)<br />            {<br />                if(element[listener + i](e) == false)<br />                    r = false;<br />            }<br />            return r;<br />        }<br />    }<br />    //if handler is not already stored, assign it<br />    for(var i = 0; i < element[listener + '_num']; i++)<br />        if(element[listener + i] == handler)<br />            return;<br />    element[listener + element[listener + '_num']] = handler;<br />    element[listener + '_num']++;<br />};<br />floatingMenu.init = function()<br />{<br />    floatingMenu.initSecondary();<br />    floatingMenu.doFloat();<br />};<br />// Some browsers init scrollbars only after<br />// full document load.<br />floatingMenu.initSecondary = function()<br />{<br />    floatingMenu.computeShifts();<br />    floatingMenu.nextX = floatingMenu.calculateCornerX();<br />    floatingMenu.nextY = floatingMenu.calculateCornerY();<br />    floatingMenu.move();<br />}<br />if (document.layers)<br />    floatingMenu.addEvent(window, 'onload', floatingMenu.init);<br />else<br />{<br />    floatingMenu.init();<br />    floatingMenu.addEvent(window, 'onload',<br />        floatingMenu.initSecondary);<br />}<br />//--><br /></script></blockquote> <div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> Make these changes:</div> <ul style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; list-style: none;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><div align="justify"> Replace <b><span style="color: #0080ff;">mybloggertricks </span></b>with your Twitter username</div> </li> </ul> <div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">      4.  Save your widget and you are almost done!</div> <div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> <span style="color: red;"><b>PS:</b></span> If you have already added the <a href="http://www.mybloggertricks.com/2011/06/add-google-1-button-to-your-blogger.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Google +1 Button</a> somewhere in your blog then you may skip step5.</div> <div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">     5.  Now Go To <i>Blogger > Design > Edit HTML</i>   and search for this,</div> <blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <div align="justify"> </head></div> </blockquote> <div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> Just above it paste the following code,</div> <blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <div align="justify"> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script></div> </blockquote> <div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">      6.  Save your template and say Bingo!</div> <div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> Visit your blog to find it hanging to the left. I hope you liked it as much as MBT had fun creating it. Peace and blessings! :)</div> <h3 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; line-height: 20.796875px; padding: 3px;"> Credits:</h3> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Web designers, developers and Blog owners are requested to attach attribution to MBT blog if they wish to share this tutorial with their readers. Any copyright violation will be reported straight to DMCA. Kindly respect the efforts.                                                     </span><br /> <div style="text-align: right;"> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">Source:</span><a href="http://www.mybloggertricks.com/" rel="nofollow" style="font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;" target="_blank">MBT</a></div> </div>

How To Add Floating Google +1, Facebook, Twitter Buttons To Blogger

Till now we learned and created many  floating social share buttons  but those button widgets in fact do not slide when the user scrolls ...

Read more »

How To Add Facebook Comments Box To Blogger Blogs

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKT74WCVQqAZwRR9cn_LD7U1f1c99ZfFmob-pU-QGuO3uYsB2oAbVv5EQbexJI5oyfLs-XiGzSi8l_EQFmpKfJ2byzI-INoeLn3UwR0vrZecaFZBvJI6pC6wGVLeQn4ZgvVFII-kduEpo/s1600/facebook-comments-box.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="facebook-comment-box" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKT74WCVQqAZwRR9cn_LD7U1f1c99ZfFmob-pU-QGuO3uYsB2oAbVv5EQbexJI5oyfLs-XiGzSi8l_EQFmpKfJ2byzI-INoeLn3UwR0vrZecaFZBvJI6pC6wGVLeQn4ZgvVFII-kduEpo/s1600/facebook-comments-box.jpg" title="" width="640" /></a></div> <br /> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">In 2009 </span><a href="http://developers.facebook.com/blog/post/198" style="background-color: white; color: #289728; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; outline: none; text-align: justify; text-decoration: none;" target="_blank">Facebook developers</a><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"> introduced their best social plugin called "</span><b style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><span style="color: green;">Facebook Comments Box</span></b><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">". This plugin can be embedded in any website or blog and visitors can use their IDs of Facebook, Yahoo, AOL or Hotmail to leave a comment at your site. This plugin did show a lot of problems when it was embedded in Blogger Blogs in initial days of its development but now thanks to our fellow friend Max from </span><a href="http://allblogtools.com/" style="background-color: white; color: #289728; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; outline: none; text-align: justify; text-decoration: none;" target="_blank">Allblogtools</a><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"> this plugin has been finally bloggerized to work just perfect with any Blogger hosted blogs. I have edited Max's coding in some areas and have mentioned some more interesting options that will help you use the </span><i style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><span style="color: green;"><b>Facebook comments</b></span> <span style="color: green;"><b>box</b></span></i><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"> in parallel to your old </span><a href="http://www.mybloggertricks.com/2009/12/customize-blogger-comment-form-make-it.html" style="background-color: white; color: #289728; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; outline: none; text-align: justify; text-decoration: none;" target="_blank">Blogger Comment form</a><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"> so that you may loose no previous comments and provide users with multiple options of commenting from different platforms.</span><br /> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></span> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">This is how the Facebook Comments box looks like,</span><br /> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><br /></span> <b style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: -webkit-center;">>>LIGHT SCHEME</b><br /> <b style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: -webkit-center;"><br /></b> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDkqAt_U6l9ZtMMPcZYY7v4rVKx6CKW7q_0mHUdn-apo-2B1AgQbcRDP7KJyoglfd0cLR0JaNR7EP08zzsVKhQIWa4LzZHBHSrsdNga4Ot00Wq2uFVNv2vfaJOfw6S7xZv6E7AzAsuLgk/s1600/facebook-comment-box.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="comment box LIGHT SCHEME" border="0" height="347" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDkqAt_U6l9ZtMMPcZYY7v4rVKx6CKW7q_0mHUdn-apo-2B1AgQbcRDP7KJyoglfd0cLR0JaNR7EP08zzsVKhQIWa4LzZHBHSrsdNga4Ot00Wq2uFVNv2vfaJOfw6S7xZv6E7AzAsuLgk/s1600/facebook-comment-box.jpg" title="" width="640" /></a></div> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><br /></span> <b style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: -webkit-center;">>>DARK SCHEME</b><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt7zgNFcT5gISGxacs34fz6ceJJFQJDPMDCCbdXPYOgdd6PjC0sKGqGmK9CdkNx6bpk28J0uxRuogM_kDxJ_i327JfwuQcIJPy0Es7sfTyQCxIgoQV4A_G7N7G0QfUk5rDw68vdMFW2v8/s1600/Facebook-comment-dark-schem.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="comment box DARK SCHEME" border="0" height="334" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt7zgNFcT5gISGxacs34fz6ceJJFQJDPMDCCbdXPYOgdd6PjC0sKGqGmK9CdkNx6bpk28J0uxRuogM_kDxJ_i327JfwuQcIJPy0Es7sfTyQCxIgoQV4A_G7N7G0QfUk5rDw68vdMFW2v8/s1600/Facebook-comment-dark-schem.jpg" title="" width="640" /></a></div> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><br /></span> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Interesting? Lets now learn how to embed this extremely useful comment form in Blogspot blogs. Kindly follow the simple steps below,</span><br /> <h3 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; line-height: 20.796875px; padding: 3px;"> 1- Get a Facebook Application ID</h3> <ol style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> <li>Go To <a href="http://developers.facebook.com/setup/" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Facebook Developers Page</a></li> <li>Submit your blog URL and give it a name. Keep <b>Site name</b> as your "Blog Title" and<b>Site URL</b> as your "blog address"</li> </ol> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7z0pqE233sc6gpLXblzBerLfbwEh3IocEgmJ1XpG7dchHobRbs6k7eFySKPbnnvbBl2SA1ZX17pxnXy-OVCytBUDIfjzgNtVE3yOU8uc1JlV3lCS2-q0ZnTpOPTi4NQeWxVmJQI_Scgo/s1600/site-url.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="site-url" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7z0pqE233sc6gpLXblzBerLfbwEh3IocEgmJ1XpG7dchHobRbs6k7eFySKPbnnvbBl2SA1ZX17pxnXy-OVCytBUDIfjzgNtVE3yOU8uc1JlV3lCS2-q0ZnTpOPTi4NQeWxVmJQI_Scgo/s1600/site-url.gif" title="" width="379" /></a></div> <div> <span style="color: #333333; font-family: Verdana, arial; font-size: x-small;"><span style="line-height: 20.796875px;"><br /></span></span></div> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> 3.   Hit "create app" button and proceed</span><br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">     4.   After submitting the </span><i style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">security check code</i><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> you will see this page,</span><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5AsVjj0gokOUbn8GogqYVqjHmUOc_mH8OHre0qCV9WqM4513hzytJB60tgcHGuJlScYFhzQFwQMTZzRUzUj9t_QmN42STWrJ-gbzvK6fl9DaZTYQ6OVdUsgj_HH8uhtfIHx9uSe-pwYA/s1600/app-id.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="app-id" border="0" height="508" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5AsVjj0gokOUbn8GogqYVqjHmUOc_mH8OHre0qCV9WqM4513hzytJB60tgcHGuJlScYFhzQFwQMTZzRUzUj9t_QmN42STWrJ-gbzvK6fl9DaZTYQ6OVdUsgj_HH8uhtfIHx9uSe-pwYA/s1600/app-id.gif" title="" width="640" /></a></div> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><br /></span> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">5.   Save that App ID in a notepad because we will need that latter. Now Click the link near the top-right corner of the same page that </span><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">says "</span><i style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Developer Dashboard</i><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">" </span><br /> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><br /></span> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_CDSGtEk_v6-YPJbCZr_JqY9whC_NEsrM-B8nBdsDjGOn254mkMR_p3seb7RHHk0y1F4CW2iy1cel9qX7IHbxbpn9W4KhZdvmM2mO2_6ks5wEcomDkq7hxt-kuRHo53IJVaWskr5yYQ/s1600/image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ap id" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_CDSGtEk_v6-YPJbCZr_JqY9whC_NEsrM-B8nBdsDjGOn254mkMR_p3seb7RHHk0y1F4CW2iy1cel9qX7IHbxbpn9W4KhZdvmM2mO2_6ks5wEcomDkq7hxt-kuRHo53IJVaWskr5yYQ/s1600/image.png" title="" width="640" /></a></div> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> 6.  One the new window that appears click the </span><i style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Edit Settings</i><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> link ,</span><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5tdiGiJb9QVVJLKbK00IeeojADk1rKTBKskD2-XP6SontjcAVSNyAvD97wdgJ4DMyJGQp5txqi4_bw0bsdUeeBXXWxFiqtz2Lrl5_N48TNATdj0M2hR5EwEz4Hrtb-xN6Ud8zchrryHw/s1600/edit-settings.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="edit-settings" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5tdiGiJb9QVVJLKbK00IeeojADk1rKTBKskD2-XP6SontjcAVSNyAvD97wdgJ4DMyJGQp5txqi4_bw0bsdUeeBXXWxFiqtz2Lrl5_N48TNATdj0M2hR5EwEz4Hrtb-xN6Ud8zchrryHw/s1600/edit-settings.gif" title="" width="366" /></a></div> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><br /></span> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">7.  Then go to </span><i style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Website </i><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">option and write your </span><i style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Site Domain</i><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> as </span><b style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">blogspot</b><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8JsBtAS4b_p5yiREEzzwieePCpzbk7qwcCiZXivT4UFscuUyIHtDJnnb558B4xFkp843TM1nK6AsGxa-WPADyyr_SvitR1sV8GBxCi-a8D6L28USLnJA5QQeRwQIoLmRAMYxZOqjDvto/s1600/website.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="write site domain" border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8JsBtAS4b_p5yiREEzzwieePCpzbk7qwcCiZXivT4UFscuUyIHtDJnnb558B4xFkp843TM1nK6AsGxa-WPADyyr_SvitR1sV8GBxCi-a8D6L28USLnJA5QQeRwQIoLmRAMYxZOqjDvto/s1600/website.gif" title="" width="640" /></a></div> <b style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><br /></b> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> 8.  Save Changes and jump to the next step of this tutorial</span><br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /><br /> <h3 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; line-height: 20.796875px; padding: 3px;"> 2- Adding the Facebook comments Box to Blogger</h3> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Now its time to do embed the comments box in your blog templates. So follow these easy steps,</span><br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /><b style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">PS:</b><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> </span><i style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Please make sure your blogger comment form is embedded below posts. For doing this first go to Blogger > Settings > comments > and then choose embed comments below posts. After doing this follow the tutorial below.</i><br /> <ol style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> <li>Go To Blogger > Design > Edit HTML</li> <li>Backup your template</li> <li>Check the "<i>Expand Widget Templates</i>" box</li> <li>Search for <b><html </b>and just after it give a space and add this code,</li> </ol> <blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <pre>xmlns:fb='http://www.facebook.com/2008/fbml'</pre> </blockquote> <pre style="background-color: white; color: #333333; font-size: 13px; line-height: 20.796875px;"> 5. Next search for </pre> <blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <pre><body></pre> </blockquote> <pre style="background-color: white; color: #333333; font-size: 13px; line-height: 20.796875px;">Note: In New Blogger Designed templates the same code looks like this,</pre> <blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <pre><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></pre> </blockquote> <pre style="background-color: white; color: #333333; font-size: 13px; line-height: 20.796875px;">Find any one of these codes and just after it paste the code given below,</pre> <blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <div id='fb-root'/><br /><script><br />    window.fbAsyncInit = function() {<br />    FB.init({<br />      appId  : &#39;<span style="color: #9b00d3;"><b>YOUR_APP_ID</b></span>&#39;,<br />      status : true, // check login status<br />        cookie : true, // enable cookies to allow the server to access the   session<br />      xfbml  : true  // parse XFBML<br />    });<br />  };<br />    (function() {<br />    var e = document.createElement(&#39;script&#39;);<br />      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;<br />    e.async = true;<br />      document.getElementById(&#39;fb-root&#39;).appendChild(e);<br />    }());<br /></script></blockquote> <br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /><br /> <ul style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; list-style: none;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace <span style="color: #9b00d3;"><b>YOUR_APP_ID </b></span>with your Facebook application ID that you saved in a notepad.</li> </ul> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">    6.    Next search for  </span><b style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"></head> </b><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">and just above it paste the following code,</span><br /> <blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <meta expr:content='data:blog.pageTitle' property='og:title'/><br /><meta expr:content='data:blog.url' property='og:url'/><br /><meta content='<b><span style="color: green;">MY Blogger Tricks</span></b>' property='og:site_name'/><br /><meta content='<b><span style="color: #804000;">BLOG-LOGO-IMAGE-LINK</span></b>' property='og:image'/><br /><meta content='<span style="color: #9b00d3;"><b>YOUR_APP_ID </b></span>' property='fb:app_id'/><br /><meta content='<span style="color: #0080ff;"><b>http://www.facebook.com/mybloggertricks</b></span>' property='fb:admins'/><br /><meta content='article' property='og:type'/></blockquote> <br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /><br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Make these changes:</span><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <ul style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; list-style: none;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwggPR34j0sBR9OgV5ZK3GFhN_X9IYLbtmRHq0DMXJ9Hb46auYn5CnCzzabMNae87SLKFO5fTQ6WYRcrylYr3glD3zB4qVcr6DNCelRnDj8CXZBxniYXckk-AavEtYFWlXxp_npAcVt0/s400/251.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace <b><span style="color: green;">MY Blogger Tricks </span></b>with your blog title/Name.</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace <b><span style="color: #804000;">BLOG-LOGO-IMAGE-LINK </span></b>with the image link of your logo. Your logo will look good if it is in gif format and having this size ->  <i>40px by 40px . </i>This logo will appear next to your post title on Facebook profiles of your visitors like this,</li> </ul> <div> <span style="color: #333333; font-family: Verdana, arial; font-size: x-small;"><span style="line-height: 18.1875px;"><br /></span></span></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEvF86mrFlUYzpEiFNp_mLEWVenD0y1-cW1HDv1oFYY0DCyo1ohPUB_tXyv5LskouUZGcHLM1r3jDzChNR8q6R97n7TG0IZLXCz64CMVOWE-D8YbXCurOzF7pUpU0qa8s5wFjCOkNfKpU/s1600/logo.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="logo" border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEvF86mrFlUYzpEiFNp_mLEWVenD0y1-cW1HDv1oFYY0DCyo1ohPUB_tXyv5LskouUZGcHLM1r3jDzChNR8q6R97n7TG0IZLXCz64CMVOWE-D8YbXCurOzF7pUpU0qa8s5wFjCOkNfKpU/s1600/logo.gif" title="" width="640" /></a></div> <div> <span style="color: #333333; font-family: Verdana, arial; font-size: x-small;"><span style="line-height: 18.1875px;"><br /></span></span></div> <div> <ul style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; list-style: none;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace <span style="color: #9b00d3;"><b>YOUR_APP_ID  </b></span>with the your Facebook Application ID that you saved in notepad</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace <span style="color: #0080ff;"><b>http://www.facebook.com/mybloggertricks </b></span>with your Facebook user profile link</li> </ul> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">    7.    Now Search for this,</span><br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /><blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <b:includable id='comment-form' var='post'></blockquote> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">    8.    Just after it paste the code given below,</span><br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /><blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><br /><div> <fb:comments  <span style="background-color: yellow;"></span>colorscheme='<span style="color: #008040;"><b>light</b></span>'<span style="background-color: yellow;"></span> expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' <span style="color: #9b00d3;"><b>width='520'</b></span>/></div><br /><div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; <span style="color: #804000;"><b>width:510px</b></span>;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div><br /></b:if></blockquote> <ul style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; list-style: none;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">If you want to use the dark scheme then simply replace <span style="color: #008040;"><b>light </b></span>with <b>dark</b></li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">To change the Comments box size, change this value <span style="color: #9b00d3;"><b>width='520'</b></span></li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">To change the footer credits size, change this value <span style="color: #804000;"><b>width:510px</b></span></li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to <b>width='600'</b> then set footer-size to <b>width:590px</b></li> </ul> <b style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"></b><br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /><b style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">      </b><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">9. Save your template and Bingo you are Done! See your blogs to find a beautiful comment box waiting to be touched. =)</span><br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /><br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /><h3 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; line-height: 20.796875px; padding: 3px;"> Respect Copyright</h3> <div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> This plugin contains credits to allblogtools and MBT blog for the efforts put by us in facilitating blogger users with this great commenting plugin. We therefore request you to please do not remove the footer credits. The credits are attached to the plugin in a design style that it perfectly blends the colour themes of Facebook Comments Box. We only need this favour in return.</div> <h3 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; line-height: 20.796875px; padding: 3px;"> Need More Fun?</h3> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">If you want to further play with codes and wish to give a Facebook style (i.e </span><i style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">font colours, background colors, background image</i><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">) to your old blogger comments form then read the post below,</span><br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /><ul style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; list-style: none;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><a href="http://www.mybloggertricks.com/2009/12/customize-blogger-comment-form-make-it.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Customize Blogger Comment Form!</a></li> </ul> <h3 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; line-height: 20.796875px; padding: 3px;"> Troubleshooting</h3> <span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">If you faced any problem then kindly do not hesitate to let me know.</span><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">I hope this plugin proves useful to most of you and it may bless your blogs with even more organic traffic. Peace! :></span></div> <ul style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; list-style: none;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><br /></li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><br /></li> </ul> </div>

How To Add Facebook Comments Box To Blogger Blogs

In 2009  Facebook developers  introduced their best social plugin called " Facebook Comments Box ". This plugin can be embedde...

Read more »

Add a Customized Three Column Footer Widget In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidcfBg5chuV-i5s2umIe9A7vqjHF6SHx0p_XIOg8QXVdeTFqn2jY31nPbz2UQxonOn40tqtKizU7TuguGPt7cQQv2P_kh5PUOnEreuGGK_FCSdv0sDF4gfiN7R6uSwXA1QLjR9iVYSZ2g/s1600/Three-Column-Footer.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Three-Column-Footer" border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidcfBg5chuV-i5s2umIe9A7vqjHF6SHx0p_XIOg8QXVdeTFqn2jY31nPbz2UQxonOn40tqtKizU7TuguGPt7cQQv2P_kh5PUOnEreuGGK_FCSdv0sDF4gfiN7R6uSwXA1QLjR9iVYSZ2g/s1600/Three-Column-Footer.gif" title="Three-Column-Footer" width="400" /></a></div> <div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> You might have seen a three column widget at the bottom section of many commercial and professional blogs. Where you can add whatever stuff you like. Take my footer widget as an example. I have added widgets that further keeps the reader busy. This Footer widget contains three columns where each column can accommodate as many widgets as you can add! In order to add such a widget to the bottom section of your blogs and also customize the look and feel of it then lets start learning today’s tutorial.</div> <br /> <span class="fullpost" style="background-color: white; color: #333333; display: inline; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"></span><br /> See a screenshot,<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvaHxKCCYj1p173GzsIDUFVv01OzYtcYgg4psQCNU5snqhCOYI8Mxangg2FSgAttkQA9eoct7KBPPkxVSvpxx_JDRU5ITnuYmlhikqsGvK6n3Y1JKusq_R68lvrdlHyzh7PbtM49D2wj4/s1600/Three-Column-Footer-Widget.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvaHxKCCYj1p173GzsIDUFVv01OzYtcYgg4psQCNU5snqhCOYI8Mxangg2FSgAttkQA9eoct7KBPPkxVSvpxx_JDRU5ITnuYmlhikqsGvK6n3Y1JKusq_R68lvrdlHyzh7PbtM49D2wj4/s1600/Three-Column-Footer-Widget.gif" /></a></div> <h4 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; padding: 3px;"> Add This Three Column Widget Inside Your Blogger Templates</h4> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> Follow these steps,</div> <ol style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> <li>Go To <a href="http://blogger.com/" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Blogger</a><strong> > Layout > Edit HTML</strong></li> <li>Back Up your template</li> <li>Search for <strong>]]></strong></li> </ol> </div> <li>Just before <strong>]]></strong></li>  paste this CSS code,<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <div style="padding: 0px 0px 15px;"> /* -----   LOWER SECTION   ----- */<br />#lower {<br />       margin:auto;<br />       padding: 0px 0px 10px 0px;<br />       width: 100%;<br />     <strong>  background:#333434; </strong>} <br />#lower-wrapper {<br />       margin:auto;<br />       padding: 20px 0px 20px 0px;<br />   <span style="color: #0080ff;"><strong>    <span style="color: red;">width: 960px;</span></strong></span></div> <div style="padding: 0px 0px 15px;"> }</div> <div style="padding: 0px 0px 15px;"> <span style="color: black;">#lowerbar-wrapper </span><span style="color: black;">{<br />     border:1px solid #DEDEDE;<br />       </span><span style="color: black;"><strong><span style="color: #0080ff;">background:#fff;</span> </strong>       float: left;<br />       margin: 0px 5px auto;<br />       padding-bottom: 20px; </span><span style="color: #0080ff;">       </span><strong><span style="color: #0080ff;">width: 32%;</span><span style="color: black;"> </span>       text-align: justify;<br />       font-size:100%;<br />       line-height: 1.6em;<br />       word-wrap: break-word; <br />       overflow: hidden;<br />}</strong></div> <div style="padding: 0px 0px 15px;">        .lowerbar {margin: 0; padding: 0;}<br />       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}</div> <div style="padding: 0px 0px 15px;"> <span style="color: black;">.lowerbar h2 {</span><br />      margin: 0px 0px 10px 0px;<br />       padding: 3px 0px 3px 0px;<br />       text-align: left;<br /><span style="color: green;">       </span><strong><span style="color: green;">color:#0084ce;</span> </strong>        text-transform:uppercase;<br />      <strong><span style="color: green;">font: bold 14px Arial, Tahoma, Verdana; </span></strong><span style="color: green;">       </span><span style="color: green;"><strong>border-bottom:3px solid #0084ce; </strong></span><span style="color: black;">}</span></div> <div style="padding: 0px 0px 15px;"> .lowerbar ul {<br />      margin: 0px 0px 0px 0px;<br />      padding: 0px 0px 0px 0px;<br />      list-style-type: none;<br />}</div> <div style="padding: 0px 0px 15px;"> .lowerbar li {<br />      margin: 0px 0px 2px 0px;<br />      padding: 0px 0px 1px 0px;<br />    <strong>  <span style="color: blue;">border-bottom: 1px dotted #ccc;</span></strong><br />}</div> <div style="padding: 0px 0px 15px;"> <br /></div> </blockquote> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> <br /></div> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">     5.   Now Search For <strong></strong></div>  and just above this code paste the code below,<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <div style="padding: 0px 0px 15px;"> <div id="lower"> <br /><div id="lower-wrapper"> <br /><div id="lowerbar-wrapper"> <br /><b:section class="lowerbar" id="lowerbar1" preferred="yes"> </b:section> </div> <br /><div id="lowerbar-wrapper"> <br /><b:section class="lowerbar" id="lowerbar2" preferred="yes"> </b:section> </div> <br /><div id="lowerbar-wrapper"> <br /><b:section class="lowerbar" id="lowerbar3" preferred="yes"> </b:section> </div> <br /><div style="clear: both;">  </div> </div> </div> </div> <div style="padding: 0px 0px 15px;"> <br /></div> </blockquote> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> <br /></div> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> <br /></div> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> 6.  Save your template. done!</div> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> Now visit the page<strong> Layout > Page Elements</strong> and start adding widgets! :>></div> <h4 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; padding: 3px;"> Customization</h4> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> You can easily customize the look and colours of the this footer widget. I have bolded the important parts in the CSS code above. Read the descriptions below carefully to better stylize your three column widget. For changing colours use our <a href="http://www.mybloggertricks.com/2008/01/color-code-generator-and-color-wheel.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">advanced Colour Code Generator</a></div> <ul style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; list-style: none;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><strong>background:#333434;</strong>   Changing the six digit colour code will change the background colour of this widget.</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="color: #0080ff;"><strong><span style="color: red;">width: 960px;</span></strong></span>  This is the width of the widget. If you want you can adjust this width value in accordance with the width of your blog.</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="color: black;"><strong><span style="color: #0080ff;">background:#fff;</span></strong></span>  and <span style="color: #0080ff;">   </span><strong><span style="color: #0080ff;">width: 32%;</span></strong> is the background colour and width of the three columns where the widgets are added.</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><strong><span style="color: green;">color:#0084ce;</span></strong> This is the Colour of Title Headings</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="color: green;"><strong>font: bold 14px Arial, Tahoma, Verdana;</strong>  </span><span style="color: black;">Edit this to change the font size and family.</span></li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="color: green;"><strong>border-bottom:3px solid #0084ce;</strong>   <span style="color: black;">Edit this to change the thickness, style and colour of the border that appears at the bottom of Title Heading</span></span></li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><span style="color: blue;"><strong>border-bottom: 1px dotted #ccc;</strong></span><span style="color: green;"> </span><span style="color: black;">Editing this will change the size, style and colour of the border that appears below links.</span></li> </ul> <div align="center" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> <span style="color: #0080ff;"><strong>That’s All!</strong></span></div> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> A tutorial on Four Column Footer widget will be posted soon. Till then keep playing with this one :> Do let me know if you needed help. Your questions are more than an honor! </div>

Add a Customized Three Column Footer Widget In Blogger

You might have seen a three column widget at the bottom section of many commercial and professional blogs. Where you can add whatever st...

Read more »

Multi Column Footer Widget For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho6ZLe9UKuR5ZwrtD8vuxcKo8MXdlQTL_ni_Z18CdLC8LHm6Fk4TPBa3zBxMdjtMqXoX-qt2FKTZNoE1CqHb_516ToIoNJwFhY6bsogb7JRnD4x8kXKDRWDSSA6nkat4HZ7g_ttG5wVTs/s1600/Multi-Column-Widget.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Multi-Column-Widget" border="0" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho6ZLe9UKuR5ZwrtD8vuxcKo8MXdlQTL_ni_Z18CdLC8LHm6Fk4TPBa3zBxMdjtMqXoX-qt2FKTZNoE1CqHb_516ToIoNJwFhY6bsogb7JRnD4x8kXKDRWDSSA6nkat4HZ7g_ttG5wVTs/s1600/Multi-Column-Widget.gif" title="Multi-Column-Widget" width="640" /></a></div> <div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> We had previously shared a tutorial on <a href="http://www.mybloggertricks.com/2010/01/add-customized-three-column-footer.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Three Column Footer Widget</a> which was well appreciated and today we have yet another more advanced version of the same widget. This new widget can become three column, four column or with as many columns as you wish. Further this new footer widget has some great CSS effects added to it which makes it even better. First see a demo to know what’s so different about it.</div> <span class="fullpost" style="background-color: white; color: #333333; display: inline; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"></span><br /> <br /> <h4 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; padding: 3px;"> How To Add the Multi Column Footer Widget To <a href="http://blogger.com/" style="color: #289728; outline: none; text-decoration: none;" target="_blank">Blogger</a>?</h4> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> First we will add the CSS code to your blogger templates and then the HTML. So without wasting any time lets jump straight to the steps,</div> <ol style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> <li>Go To Blogger > Design > Edit HTML</li> <li>Backup Your Template</li> <li>Search for ]]></li> </ol> </div> <li>Just above ]]></li> paste the code below,<blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <div style="padding: 0px 0px 15px;"> /*----- MBT MULTI COLUMN FOOTER WIDGET -----*/</div> <div style="padding: 0px 0px 15px;"> #lower {<br />margin:auto;<br />padding: 0px 0px 10px 0px;<br />width: 100%;<br />background:#333333;<br />}<br />#lower-wrapper {<br />background:#333333;<br />margin:auto;<br />padding: 20px 0px 20px 0px;<br /><strong><span style="color: green;">width: 960px;</span></strong><br />border:0;<br />}<br />#lowerbar-wrapper {<br />background:#333333;<br />float: left;<br />margin: 0px 5px auto;<br />padding-bottom: 20px;<br /><strong><span style="color: #0080ff;">width: 23%;</span></strong><br />text-align: justify;<br />color:#ddd;<br />font: bold 12px Arial, Tahoma, Verdana;<br />line-height: 1.6em;<br />word-wrap: break-word;<br />overflow: hidden;<br />}<br />.lowerbar {margin: 0; padding: 0;}<br />.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}<br />.lowerbar h2 {<br />margin: 0px 0px 10px 0px;<br />padding: 3px 0px 3px 0px;<br />text-align: left;<br />border:0;<br />color:#ddd;<br />text-transform:uppercase;<br />font: bold 14px Arial, Tahoma, Verdana;<br />}<br />.lowerbar ul {<br />color:#fff;<br />margin: 0 auto;<br />padding: 0;<br />list-style-type: none;<br />}<br />.lowerbar li {<br />display:block;<br />color:#fff;<br />line-height: 1.6em;<br />margin-left: 0 !important;<br />padding: 6px;<br />border-bottom: 1px solid #222;<br />border-top: 1px solid #444;<br />list-style-type: none;<br />}<br />.lowerbar li a {<br />text-decoration:none; color: #DBDBDB;<br />}<br />.lowerbar li a:hover {<br />text-decoration:underline;<br />}<br />.lowerbar li:hover {<br />display:block;<br />background: #222;<br />}</div> </blockquote> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> <br /></div> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">        5.    Now search for </div> and paste the following code just above <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> <br /></div> <blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <div style="padding: 0px 0px 15px;"> <div id="lower"> <br /><div id="lower-wrapper"> </div> </div> </div> <div style="padding: 0px 0px 15px;"> <br /><div id="lowerbar-wrapper"> <br /><b:section class="lowerbar" id="<strong>lowerbar1</strong>" preferred="yes"> </b:section> </div> </div> <div style="padding: 0px 0px 15px;"> <br /><div id="lowerbar-wrapper"> <br /><b:section class="lowerbar" id="<strong>lowerbar2</strong>" preferred="yes"> </b:section> </div> </div> <div style="padding: 0px 0px 15px;"> <br /><div id="lowerbar-wrapper"> <br /><b:section class="lowerbar" id="<strong>lowerbar3</strong>" preferred="yes"> </b:section> </div> </div> <div style="padding: 0px 0px 15px;"> <br /><span style="color: green;"><div id="lowerbar-wrapper"> <br /><b:section class="lowerbar" id="<strong>lowerbar4</strong>" preferred="yes"> </b:section> </div> </span></div> <div style="padding: 0px 0px 15px;"> <br /><span style="color: purple;"><strong><div style="clear: both;"> </div> </strong></span> </div> </blockquote> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">       6.   Save your template and you are done!</div> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> Now go to <strong>Page Elements</strong> and add your widgets to the newly added Footer Widget that will look something like this,</div> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> <img alt="image" border="0" height="71" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5qyvpuPMCmjmycwoUzoOP_mVGqgsyTNfc6-83FXwOTdQi1WxJ6o-87UboHi9T5BYMazr-USZ3lCtj6xsqOBuVGcfAWbbp6J9sEcRPwmsLcRuF7YTu561TdHTVNqhyphenhyphenBOwqLtgVUTLn-_k/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 10px;" title="image" width="572" /></div> <div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> You can observe that there a total of four columns by default and you can add as many widgets as you want to each column. If you wish to increase or decrease the number of vertical columns then follow the steps below.</div> <h4 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; padding: 3px;"> How to Customize the Widget?</h4> <div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> Well I will keep it simple. I think the colors and overall size and padding and margining are just perfect. The only thing that you will need to adjust according to your template is the width of the widget and the number of vertical columns.</div> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> 1.  In order to reduce or increase the overall width of the widget simply change <strong><span style="color: green;">width: 960px;</span></strong></div> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> 2.  If you wish to decrease the number of widgets to three then simply delete this part of the code,</div> <blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <div style="padding: 0px 0px 15px;"> <span style="color: green;"><div id="lowerbar-wrapper"> <br /><b:section class="lowerbar" id="<strong>lowerbar4</strong>" preferred="yes"> </b:section> </div> </span></div> </blockquote> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> 3.  Or if you wish to add an extra column then add the code below just above <span style="color: purple;"><strong><div style="clear: both;"> </div> </strong></span></div> <blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp91Bic-FcLny9JJ4hVZpcXFL098epdEPPtfQolD_DOBwOKIs7IXkEFG3988x74G-wgbG73foMtoBALsqtIeRDLlpFDg8_XB_pKK14TsBqV757-u_dDUjQbdpxJC0eZfg1KCsqBEFFeLBl/s1600/block-qoute1.png); background-position: 50% 100%; background-repeat: no-repeat no-repeat; border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; color: #333333; font-family: Verdana, arial; font-size: 0.9em; line-height: 1.3em; margin: 0px 20px; overflow: hidden; padding: 10px 20px 40px; word-wrap: break-word;"> <div id="lowerbar-wrapper"> <br /><b:section class="lowerbar" id="<strong>lowerbar#</strong>" preferred="yes"> </b:section> </div> </blockquote> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> </div> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> Remember that <strong>lowerbar#</strong> refers to the column number. So if you want to add a fifth column then simply replace  <strong>lowerbar#</strong> with <strong>lowerbar5.</strong></div> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> After you have added the fifth column then remember to change <strong><span style="color: #0080ff;">width: 23%;</span></strong> with <strong><span style="color: #0080ff;">width: 17%;</span></strong> </div> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> You will repeat step 3 for as many columns as you wish to create. But three and four and five columns are a standard. Increasing them will make things look ugly.</div> <div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> <br /></div> <div align="center" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"> <span style="color: #0080ff;"><strong>That’s it! Enjoy :D</strong></span></div>

Multi Column Footer Widget For Blogger

We had previously shared a tutorial on  Three Column Footer Widget  which was well appreciated and today we have yet another more advanc...

Read more »

How to Add Multi-Tabbed Widget For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="MsoNormal">  <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9sMfRZKULgin2fPsxeok2UFx3SujhD6k2mNqpYTiCaeaH10DZaNmnfQADccgU2F_VZQsP6GiGgWxkm1ZTcdoQPqDKwYsJTXOgsKO2WfY3-tbIR43TVfj2v-kXRbDRWr4O9xrCE11J0VU/s1600/sfas.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9sMfRZKULgin2fPsxeok2UFx3SujhD6k2mNqpYTiCaeaH10DZaNmnfQADccgU2F_VZQsP6GiGgWxkm1ZTcdoQPqDKwYsJTXOgsKO2WfY3-tbIR43TVfj2v-kXRbDRWr4O9xrCE11J0VU/s1600/sfas.png" width="228" /></a></div> <h3 style="text-align: left;"> <i style="font-weight: normal;">In this Tutorial you are going to learn how to add Multi-Tabbed Widget For Blogger. This is another important blogger widget for  blogger that it both space saving and efficently user friendly.If you installed multiple tabs widget thenn you don't need to add these three widget 'popular post' 'archieve', and 'recent comments' differently.Now follow the steps below to add this widget.</i></h3> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <h3> <br /></h3> <h3 style="text-align: center;"> <span style="background-color: #38761d;"> Add Multi-Tabbed Widget For Blogger</span></h3> <div class="MsoNormal"> <br /></div> <h3> <span style="background-color: #38761d;"> Step 1</span> <i style="font-weight: normal;">Go to Blogger Dashboard.</i></h3> <h3> <br /></h3> <h3> <br /></h3> <h3> <span style="background-color: #38761d;"> Step 2</span> <i style="font-weight: normal;">Go to Layout and Click on Add A Gadget as shown in below picture.</i></h3> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQuvX4s85P3GsEnp7-ag6vsZVW4MG_EwOivERzxyD2azwCOH8YNRfa9BenIL-UI4ezNVqfd7g1aPvZHtVHFRdOCVL83rAwguCHz0rpRQ01Y_hE_X2eATivyQNIrz-KgOVDHD_X08oEgi0/s1600/add-a-gadget-screen-.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQuvX4s85P3GsEnp7-ag6vsZVW4MG_EwOivERzxyD2azwCOH8YNRfa9BenIL-UI4ezNVqfd7g1aPvZHtVHFRdOCVL83rAwguCHz0rpRQ01Y_hE_X2eATivyQNIrz-KgOVDHD_X08oEgi0/s1600/add-a-gadget-screen-.PNG" width="400" /></a></div> <div class="MsoNormal"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <h3> <br /></h3> <h3> <span style="background-color: #38761d;"> Step 3</span> <i style="font-weight: normal;">Add HTML/JavaScripts as shown in below picture.</i></h3> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eZnj_ydZ8_Ce0NfmTJ_ED5-k7yeFbIHmfnW_D7MQUD6yd09P73XWbRUgMGF0G4jxm0L7i9QmIOTy6NXvl0luZLhwB3fTRjzCYsvcO3uuqe5uMXGAdr4JhID9lAwOBZ_OmUx-gR31NXU/s1600/Add+Feedback+button+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eZnj_ydZ8_Ce0NfmTJ_ED5-k7yeFbIHmfnW_D7MQUD6yd09P73XWbRUgMGF0G4jxm0L7i9QmIOTy6NXvl0luZLhwB3fTRjzCYsvcO3uuqe5uMXGAdr4JhID9lAwOBZ_OmUx-gR31NXU/s1600/Add+Feedback+button+2.png" width="400" /></a></div> <div class="MsoNormal"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <h3> <span style="background-color: #38761d;"> Step 4</span> <i style="font-weight: normal;">Copy and Paste below code in box:</i></h3> <blockquote class="tr_bq"> <script type='text/javascript'><br /> //<![CDATA[<br /> function haakblog_oom(NBTID, id)<br /> {<br />   var haakblog = document.getElementById(NBTID);<br />   var NBTs = haakblog.firstChild;<br />   while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;<br />   var NBT = NBTs.firstChild;<br />   var i   = 0;<br />   do<br />   {<br />     if (NBT.tagName == "A")<br />     {<br />       i++;<br />       NBT.href      = "javascript:haakblog_ubah('"+NBTID+"', "+i+");";<br />       NBT.className = (i == id) ? "Active" : "";<br />       NBT.blur();<br />     }<br />   }<br />   while (NBT = NBT.nextSibling);<br />   var Halamans = haakblog.firstChild;<br />   while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;<br />   var Halaman = Halamans.firstChild;<br />   var i    = 0;<br />   do<br />   {<br />     if (Halaman.className == 'Halaman')<br />     {<br />       i++;<br />       if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";<br />       Halaman.style.overflow = "auto";<br />       Halaman.style.display  = (i == id) ? 'block' : 'none';<br />     }<br />   }<br />   while (Halaman = Halaman.nextSibling);<br /> }<br /> function haakblog_ubah(NBTID, id) { haakblog_oom(NBTID, id);<br /> }<br /> function haakblog_inisial(NBTID) { haakblog_oom(NBTID,  1);<br /> document.write('');}<br /> //]]><br /> </script><br /> <style><br /> div.haakblog div.NBTs {<br /> height: 24px;<br /> overflow: hidden;<br /> }<br /> div.haakblog div.NBTs a:hover, div.haakblog div.NBTs a.Active {<br /> background-color: #eee;<br /> }<br /> div.haakblog div.Halamans {<br /> clear: both;<br /> border: 2px solid #f4f4f4;<br /> overflow: hidden;<br /> background-color: #<span style="color: red;">ffffff</span>;<br /> }<br /> div.haakblog div.Halamans div.Halaman {<br /> height: 100%; padding: 0px;<br /> overflow: hidden;<br /> }<br /> div.haakblog div.Halamans div.Halaman div.Alas {<br /> padding: 3px 5px;<br /> }<br /> div.haakblog div.NBTs a {<br /> border-left:1px solid #eee;<br /> border-right:1px solid #eee;<br /> border-top:1px solid #eee;<br /> border-boNBTom:0px solid #eee;<br /> float: left;<br /> display: block;<br /> width: 95px;<br /> text-align: center;<br /> vertical-align: middle;<br /> height: 24px;<br /> padding-top: 3px;<br /> text-decoration: none;<br /> font-family: "Arial", Serif;<br /> font-size: 11px;<br /> font-weight: 900;<br /> color: #000000<br /> }<br /> </style><br /> <form action="haakblog.html" method="get"><br /> <div id="haakblog" class="haakblog"><br /> <div style="width: 300px;" class="NBTs"> <a><span style="color: red;">Tab 1 Title</span></a> <a><span style="color: red;">Tab 2  Title</span></a> <a><span style="color: red;">Tab 3  Title</span></a></div><br /> <div style="<span style="color: red;">width: 300px</span>; <span style="color: red;">height: 300px</span>;" class="Halamans"><br /> <div class="Halaman"><br /> <div class="Alas"><br /> <br/><br /> <span style="color: red;">Tab 1 content goes here</span><br /> </div><br /> </div><br /> <div class="Halaman"><br /> <div class="Alas"><br /> <br/><br /> <span style="color: red;">Tab 2 content goes here</span><br /> </div><br /> </div><br /> <div class="Halaman"><br /> <div class="Alas"><br /> <br/><br /> <span style="color: red;">Tab 3 content goes here</span><br /> </div><br /> </div><br /> </div><br /> <small><a style='margin-left:10px;align:right;' href='<a href="http://masterbloggingtips.blogspot.com/2013/10/how-to-add-video-to-blogger-sidebar.html"><span style="color: black;">http://masterbloggingtips.blogspot.com/2013/10/how-to-add-video-to-blogger-sidebar.htm</span>l</a>' target='_blank'>Multi Tabbed Widget</a> | <a href='<a href="http://masterbloggingtips.blogspot.com/2013/10/how-to-add-video-to-blogger-sidebar.html"><span style="color: black;">http://masterbloggingtips.blogspot.com</span></a>' target='_blank'>Blogger</a></small><br /> </div><br /> </div></form><br /> <script type="text/javascript">haakblog_inisial('haakblog');</script></blockquote> <b>Tips</b>:<br />  1. Change your background colours with change <span style="color: red;">#FFFFFF</span> with your background colours.<br /> 2. Change Tab 1 title, Tab 2 title, Tab 3 Title as your tabs that you shown.<br /> 3. Change <span style="color: red;">Width</span> and <span style="color: red;">Hight</span> as your requirement<br /> 4. <span style="color: red;">Tab 1 content goes here</span>, <span style="color: red;">Tab 2 content goes here</span>,<span style="color: red;"> </span><span style="color: red;">Tab 3 content goes here </span>with your widget code as you want to show in multiple tabbed.<br /> <br /> <h3> <span style="background-color: #38761d;"> Step 5</span> <i style="font-weight: normal;">Click on Save.</i></h3> <div> <span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px;">Now you'r done.If you have any problem or question feel free to write it on the comment box or email me at larrimoreashley@gmail.com.</span></div> <div> <span style="background-color: white; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px;"><br /></span></div> <div style="text-align: right;"> <span style="background-color: #38761d; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 19.1875px;">By Ashley Larrimore</span></div> </div>

How to Add Multi-Tabbed Widget For Blogger

  In this Tutorial you are going to learn how to add Multi-Tabbed Widget For Blogger. This is another important blogger widget for  blo...

Read more »