"Animated jQuery Quote Rotator in Blogger"

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><img alt="Animated jQuery Quote Rotator in Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2Ei5hHSVOzwK387hhYoRC5fDUZ1WymMA9WZkatlH9sCQS0H_30TSVPLHNEhYArJyRjfdTBOVVC2GbUxFkyYM4KFdkQwaS4RKtLqUv2N4ha_g0PRkpW8uv3YpnF1QG1G8DM2pFzrmOlw/s312/How-to-Create-a-Animated-jQuery-Quote-Rotator-in-Blogger.png" title="Animated jQuery Quote Rotator in Blogger" /></div><br /><div style="text-align: justify;"><span style="font-family: inherit;">Sometimes an article cannot be completed without a proper quote or quotation from an authentic source. People want the news to be accurate and precise. </span><br /><a name="more"></a><span style="font-family: inherit;">Therefore, they always count on a reliable source. Stuffing your articles with too many quotations might make your blog posts look lengthy, but you users might feel difficult to scroll too much. How about a jQuery Quote rotator and animator, which would not only make your quotations look remarkable but will also gather all the quotes at one place. In this article, we will show you How to create a jQuery Quote Rotator in Blogger?</span></div><a href="http://www.blogger.com/blogger.g?blogID=2862819875743720971" name="more" style="color: #2f6986; list-style: none; margin: 0px; outline: none; padding: 0px;"></a><br />Here is the preview of the widget:<br /><!-- MyBloggerLab Quote Rotator --> <link href="https://googledrive.com/host/0B0WJjcJEFNziaGlLbi04Uk00b3c" rel="stylesheet"></link> <script src="https://googledrive.com/host/0B0WJjcJEFNzid180dVRuai1WQ1U" type="text/javascript"></script> <script> jQuery(document).ready(function($) { $('#words').quoteRotator(); }); </script> <br /><div id="wordss"><div id="words"><ul class="word-container"><li data-author="--- Syed Faizan Ali" data-easeout="lightSpeedOut">Blogging is not about earning. Its about serving the Humanity.</li><li data-author="--- Syed Faizan Ali">Don't choose Blogging as your profession, unless you really have no choice!!!</li><li data-author="--- Syed Faizan Ali" data-easeout="fadeOutDown">Education is the most powerful weapon which you can use to change the world.</li><li data-author="--- Syed Faizan Ali" data-easein="fadeInDown">The Lift is too short, Live it or be dead. </li><li data-author="--- Susan Rice, Stanford University Commencement, 2010" data-easeout="bounceOut">Progress is the product of human agency. Things get better because we make them better. Things go wrong when we get too comfortable, when we fail to take risks or seize opportunities. </li><li data-author="--- Arlo Guthrie (1947 - )" data-easein="bounceIn">You can't have a light without a dark to stick it in. </li><li data-author="--- Mahatma Gandhi (1869 - 1948)" data-easein="lightSpeedIn">You must not lose faith in humanity. Humanity is an ocean; if a few drops of the ocean are dirty, the ocean does not become dirty. </li><li data-author="--- Abraham Lincoln (1809 - 1865), (attributed)">When I do good, I feel good; when I do bad, I feel bad, and that is my religion. </li><li data-author="--- John Wanamaker (1838 - 1922), (attributed)">Half the money I spend on advertising is wasted; the trouble is I don't know which half. </li></ul><div class="quote"><div class="quote-content"></div><cite class="quote-author"></cite> </div></div></div><div id="wordss" style="border-bottom-color: rgb(210, 210, 210); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(210, 210, 210); border-top-style: solid; border-top-width: 1px; margin-top: 30px !important; padding-bottom: 40px !important; padding-top: 20px;"><div id="words"><div class="quote" style="font-family: 'Lucida Grande', 'Lucida Sans Unicode', helvetica, verdana, arial, sans-serif; font-size: 23px !important; line-height: 35px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; padding-right: 0px; text-align: center; width: 600px;"><div class="quote-content"><br /></div></div></div></div><div style="text-align: justify;">The First thing you need to do is to login into your blogger account. Now from the blogger dashboard go to <i><b>Create a new Posts >> Edit HTML Tab</b></i> and just paste the following JavaScript and CSS Code within the Blogger HTML Editor.</div><br /><blockquote class="tr_bq" style="-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihBL4-ImtAytMO9jgWFvWF3BN6Pv53Z7L2dN3AAIPoa396GB00PMiWTJCHJpsqxuntco49Fs7QL-GJtsis5JUucLXDzVGUVcmVvG8KApf1P9-46eCAdj1YPVvnyfS8RIREsRpzm87SG_A/s1600/1.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-width: 1px; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; line-height: 18px; margin: 0px 20px; overflow: hidden; padding: 10px 20px 10px 45px; quotes: none;"><link href="https://googledrive.com/host/0B0WJjcJEFNziaGlLbi04Uk00b3c" rel="stylesheet"></link><br /><br /><script src="https://googledrive.com/host/0B0WJjcJEFNzid180dVRuai1WQ1U" type="text/javascript"></script><br /><br /> <script><br /> jQuery(document).ready(function($) {<br />  $('#words').quoteRotator();<br /> });<br /> </script></blockquote><br />After adding the above coding, you need to add the following HTML code into the Blogger HTML Editor so that it would help you in creating rotating and animated quotations. You can change the animation transaction depending upon your needs.<br /><div><br style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px;" /><blockquote style="-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px; background-color: white; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihBL4-ImtAytMO9jgWFvWF3BN6Pv53Z7L2dN3AAIPoa396GB00PMiWTJCHJpsqxuntco49Fs7QL-GJtsis5JUucLXDzVGUVcmVvG8KApf1P9-46eCAdj1YPVvnyfS8RIREsRpzm87SG_A/s1600/1.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-width: 1px; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; margin: 0px 20px; overflow: hidden; padding: 10px 20px 10px 45px; quotes: none;"><!-- MyBloggerLab Quote Rotator --><br /><div id="words"><br /><br /><ul class="word-container"><br /><br /><li data-author="---  Syed Faizan Ali" data-easeout="lightSpeedOut">Blogging is not about earning.<br />Its about serving the Humanity.</li><br /><br /><li data-author="---  Syed Faizan Ali">Don't choose Blogging as your profession, unless you really have no choice!!!</li><br /><br /><li data-author="---  Syed Faizan Ali" data-easeout="fadeOutDown">Education is the most powerful weapon which you can use to change the world.</li><br /><br /><li data-author="---  Syed Faizan Ali" data-easein="fadeInDown">The Lift is too shorT, Live it or be dead. </li><br /><br /><li data-author="---  Bill Gates (Microsoft)" data-easeout="bounceOut">It's fine to celebrate success but it is more important to heed the lessons of failure.</li><br /><li data-author="---  Arlo Guthrie (1947 - )" data-easein="bounceIn">You can't have a light without a dark to stick it in. </li><br /><br /><li data-author="---  Bill Gates (Microsoft)" data-easein="lightSpeedIn">If you think your teacher is tough, wait until you get a boss. He doesn't have tenure.</li><br /><br /></ul><br /><br /><div class="quote"><br /><div class="quote-content"><br /></div><br /><cite class="quote-author"></cite><br />  </div><br /></div></blockquote></div><div>mybloggerlab.com</div><a href="http://bloggeringnews.blogspot.gr/" target="_blank"> <span style="display: none; visibility: hidden;">.</span></a></div>

"Animated jQuery Quote Rotator in Blogger"

Sometimes an article cannot be completed without a proper quote or quotation from an authentic source. People want the news to be accurate a...

Read more »

"Floating "Sticky" Sidebar Widget in Blogger"

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX5MF4V5OMti54k0U0fhHOS1O3J9I-_7GEm3loSSd9XJCi3NXSDbKzfnVPylnJh2_5liKWA3hQ-ydifKf-Sjt38FLNxLKOmbXnvhet51SwtJXudPFtbX3fVnag8zpS3oJ7IIV2ZZqWaEs/s400/Widget+Floating+Sticky.jpg" width="400" /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="tr_bq" style="background-color: white; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;">Elements that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” floating widgets that stick to your screen as you scroll and tend to have a higher click through rate. This is the reason why at MyBloggerLab, we are using a Floating subscription widget in the sidebar that has been quite useful for us. Many of our users kept on emailing us about how they can create a “Sticky” floating sidebar widget in Blogger. In the past, we have already shown you <a href="http://www.mybloggerlab.com/2012/09/how-to-create-floating-sticky-footer.html" style="list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">how to make a Sticky Floating Footer bar in Blogger</a>. In this article, we will show you how to create a floating “sticky” Sidebar widget in Blogger?</span></div><div class="separator" style="clear: both; text-align: justify;"><span style="font-family: inherit;"><a href="http://www.blogger.com/blogger.g?blogID=2862819875743720971" name="more" style="background-color: white; line-height: 25.1875px; list-style: none; margin: 0px; outline: none; padding: 0px; text-align: left;"></a><br style="background-color: white; line-height: 25.1875px; text-align: left;" /></span></div><div style="background-color: white; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;"><i>Remember:</i> This works pretty well with all kinds of widgets present in your sidebar. It is not necessary that a person can only use if for email subscription boxes. You can use it for promotion of your items, galleries, <a href="http://www.mybloggerlab.com/2012/10/customize-blogger-popular-post-widget.html" style="list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">popular posts</a>, <a href="http://www.mybloggerlab.com/2013/05/ow-to-easily-embed-instagram-photos-in-blogger.html" style="list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Instagram photos</a>, and basically everything that you wish for. </span></div><div style="background-color: white; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;"><br /></span></div><div style="background-color: white; line-height: 25.1875px; text-align: justify;"><h4 style="font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;"><span style="font-family: inherit;">Step#1: Adding a New Widget: </span></h4><span style="font-family: inherit;">The First thing you need to do is to add a new widget in your sidebar so that later on you can make it sticky. Go to <i>Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript >></i> and name the widget as “<i><b>My Sticky Gadget</b></i>”. Now writing anything in the HTML body and once everything is down press “<i><b>Save</b></i>” button located at the end of the page.</span></div><div style="background-color: white; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;"><br /></span></div><div style="background-color: white; line-height: 25.1875px; text-align: justify;"><h4 style="font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;"><span style="font-family: inherit;">Step#2: Installing a “Sticky” Plugin:</span></h4><span style="font-family: inherit;">Now after properly adding a new widget in your blog, it’s time for some serious work. This time go to <i><b>Template >> Edit HTML >></b></i> and search for the ending<b><i> </body> </i></b>tag and just above it paste the following JavaScript code.</span><br /><blockquote class="tr_bq" style="-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihBL4-ImtAytMO9jgWFvWF3BN6Pv53Z7L2dN3AAIPoa396GB00PMiWTJCHJpsqxuntco49Fs7QL-GJtsis5JUucLXDzVGUVcmVvG8KApf1P9-46eCAdj1YPVvnyfS8RIREsRpzm87SG_A/s1600/1.gif); background-position: 0% 0%; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-width: 1px; color: black; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; margin: 0px 20px; overflow: hidden; padding: 10px 20px 10px 45px;"><script><br />/*<![CDATA[*/<br />// Sticky Plugin<br />// =============<br />// Author: Syed Faizan Ali<br />(function($) {<br />    var defaults = {<br />            topSpacing: 0,<br />            bottomSpacing: 0,<br />            className: 'is-sticky',<br />            center: false<br />        },<br />        $window = $(window),<br />        $document = $(document),<br />        sticked = [],<br />        windowHeight = $window.height(),<br />        scroller = function() {<br />            var scrollTop = $window.scrollTop(),<br />                documentHeight = $document.height(),<br />                dwh = documentHeight - windowHeight,<br />                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;<br />            for (var i = 0; i < sticked.length; i++) {<br />                var s = sticked[i],<br />                    elementTop = s.stickyWrapper.offset().top,<br />                    etse = elementTop - s.topSpacing - extra;<br />                if (scrollTop <= etse) {<br />                    if (s.currentTop !== null) {<br />                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);<br />                        s.currentTop = null;<br />                    }<br />                }<br />                else {<br />                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;<br />                    if (newTop < 0) {<br />                        newTop = newTop + s.topSpacing;<br />                    } else {<br />                        newTop = s.topSpacing;<br />                    }<br />                    if (s.currentTop != newTop) {<br />                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);<br />                        s.currentTop = newTop;<br />                    }<br />                }<br />            }<br />        },<br />        resizer = function() {<br />            windowHeight = $window.height();<br />        };<br />    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):<br />    if (window.addEventListener) {<br />        window.addEventListener('scroll', scroller, false);<br />        window.addEventListener('resize', resizer, false);<br />    } else if (window.attachEvent) {<br />        window.attachEvent('onscroll', scroller);<br />        window.attachEvent('onresize', resizer);<br />    }<br />    $.fn.sticky = function(options) {<br />        var o = $.extend(defaults, options);<br />        return this.each(function() {<br />            var stickyElement = $(this);<br />            if (o.center)<br />                var centerElement = "margin-left:auto;margin-right:auto;";<br />            stickyId = stickyElement.attr('id');<br />            stickyElement<br />                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')<br />                .css('width', stickyElement.width());<br />            var elementHeight = stickyElement.outerHeight(),<br />                stickyWrapper = stickyElement.parent();<br />            stickyWrapper<br />                .css('width', stickyElement.outerWidth())<br />                .css('height', elementHeight)<br />                .css('clear', stickyElement.css('clear'));<br />            sticked.push({<br />                topSpacing: o.topSpacing,<br />                bottomSpacing: o.bottomSpacing,<br />                stickyElement: stickyElement,<br />                currentTop: null,<br />                stickyWrapper: stickyWrapper,<br />                elementHeight: elementHeight,<br />                className: o.className<br />            });<br />        });<br />    };<br />})(jQuery);<br />/*]]>*/<br /></script><br /><script type='text/javascript'><br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span> $(document).ready(function(){<br />    $("#mblfloater").sticky({topSpacing:0});<br /> <span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span> });<br /><span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"> </span></script></blockquote><br /></div><div style="background-color: white; text-align: justify;"><h4 style="font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;"><span style="font-family: inherit;">Step#3: Creating a Widget “Sticky” in Blogger:</span></h4><div style="line-height: 25.1875px;"><span style="font-family: inherit;">After adding the JavaScript code, you have to search for the name of your widget. Since, we have named it as "<b>My Sticky Gadget</b>". Therefore, in the template coding search for "<b>My Sticky Gadget</b>". To be able to search correctly it is essential that you must use the built-in search box provided by the Blogger template editor.</span></div><div style="line-height: 25.1875px;"><span style="font-family: inherit;"><i><b><br /></b></i><i><b>Note: </b>To enable the search box click anywhere in the template editor and press<b>"CTRL+F". </b></i>Now on finding "My Sticky Gadget" you will able to see a code similar to the the following one.</span></div><div style="color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px;"><br /></div><blockquote class="tr_bq" style="-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihBL4-ImtAytMO9jgWFvWF3BN6Pv53Z7L2dN3AAIPoa396GB00PMiWTJCHJpsqxuntco49Fs7QL-GJtsis5JUucLXDzVGUVcmVvG8KApf1P9-46eCAdj1YPVvnyfS8RIREsRpzm87SG_A/s1600/1.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-width: 1px; color: black; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; line-height: 18px; margin: 0px 20px; overflow: hidden; padding: 10px 20px 10px 45px;"><b:widget id='HTML32' locked='false' title='<b>My Sticky Gadget</b>' type='HTML'><br />            <b:includable id='main'><br />  <!-- only display title if it's non-empty --><br />  <b:if cond='data:title != &quot;&quot;'><br />    <h2 class='title'><data:title/></h2><br />  </b:if><br />  <div class='widget-content'><br />    <data:content/><br />  </div><br /></b:includable><br />          </b:widget></blockquote><div style="color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px;"><br /></div><div style="color: #464646; line-height: 25.1875px;"><span style="font-family: inherit;">Now after finding the code as mentioned above, just replace it completely with the following coding.</span></div><div style="color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px;"><br /></div><blockquote class="tr_bq" style="-webkit-box-shadow: rgb(221, 221, 221) 4px 4px 4px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihBL4-ImtAytMO9jgWFvWF3BN6Pv53Z7L2dN3AAIPoa396GB00PMiWTJCHJpsqxuntco49Fs7QL-GJtsis5JUucLXDzVGUVcmVvG8KApf1P9-46eCAdj1YPVvnyfS8RIREsRpzm87SG_A/s1600/1.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-width: 1px; color: black; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; line-height: 18px; margin: 0px 20px; overflow: hidden; padding: 10px 20px 10px 45px;"><b:widget id='HTML32' locked='false' title='<b>My Sticky Gadget</b>' type='HTML'><br />            <b:includable id='main'><br /><div id='<span style="font-size: 14px; line-height: 18px; list-style: none; margin: 0px; outline: none; padding: 0px;">mblfloater</span>'><br />  <!-- only display title if it's non-empty --><br />  <b:if cond='data:title != &quot;&quot;'><br />    <h2 class='title'><data:title/></h2><br />  </b:if><br />  <div class='widget-content'><br />    <data:content/><br />  </div>  </div><br /></b:includable><br />          </b:widget></blockquote><div style="color: #464646; font-family: lora; font-size: 14px; line-height: 25.1875px;"><br /></div><div style="line-height: 25.1875px;"><span style="font-family: inherit;">Remember: The ID of your widget should be unique. For example, if you are using<i>id='HTML32' </i>in any of your widget then you cannot use the same ID for others.</span></div><div style="line-height: 25.1875px;"><span style="font-family: inherit;"><br /></span></div><div style="line-height: 25.1875px;"><span style="font-family: inherit;">All done: Once everything is done, press the "Save Template" button to finish the process.</span></div><div style="line-height: 25.1875px;"><span style="font-family: inherit;"><br /></span></div><div style="line-height: 25.1875px;"><span style="font-family: inherit;">Sticky floating sidebar widgets can bring a lot of growth in your sign ups. They help in increasing user engagement. You can also use multiple floating widgets in sidebar. However, this act might annoy your visitors. Make sure you have a balanced design, so that it don't annoy your users</span></div><div style="line-height: 25.1875px;"><span style="font-family: inherit;"><br /></span></div><div style="line-height: 25.1875px;"><span style="font-family: inherit;">We hope that this article have helped you in creating a Sticky floating sidebar widget in your Blogger website. This plugin is robust enough to be used in any element of your sites. Let us know what you think in the below comments.</span></div><div style="line-height: 25.1875px;"><span style="font-family: inherit;"><br /></span></div><span style="line-height: 25.173612594604492px;">mybloggerlab.com</span></div><br /><a href="http://bloggeringnews.blogspot.gr/" target="_blank"> <span style="display: none; visibility: hidden;">.</span></a></div>

"Floating "Sticky" Sidebar Widget in Blogger"

Elements that float along your screen are pretty cool and attention grabbing. They are more commonly known as the “Sticky” floating widgets ...

Read more »

"Fancy Accordion Widget in Blogger"

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><img alt="Fancy Accordion Widget in Blogger" border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7mNUWwJw8rcRrkpnCCmYjKpRtct-a6QoL_kq15N74pTv4IHlq4eie-7pGJ3Olf_SGihn0cEPHeD67euafy_fah9y3m52rYgZXKreBpSqYJq5I0Wqjy8YA8Io6_XsZ6JuSojnCN9PL9T8/s640/fancy+accordion.jpg" title="Fancy Accordion Widget in Blogger" width="640" /></div><br /><br /><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">It is really important to organize your content and make certain sections of your blog to appear only when the visitor is interested in it. We are using an </span>Accordion Widget<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"> that you can find at the footer of our blog in order to display a list of Popular Series. Its an effective way for us to display long list of links in a neat and clean way. I created this widget using  JQuery and the </span><strong style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">Easing Plugin</strong><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">. </span><br /><a name="more"></a><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">This Accordion widget is a modified version of the </span>Fresh content Accordion<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"> released by Martin Angelov in 2009. We customized its stylesheet and edit some parts of the scripts to make it compatible with blogger blogs. It has a great </span>Expand/Collapse Feature<span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">. This widget collapses and hides all content inside it by default but when user clicks it, the content is displayed by expanding that tab section. I am sure you would love to add this Fancy Accordion widget to your BlogSpot blogs.</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><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;">Design a Fancy Accordion For Blogger!</h3><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Just follow this step by step easy tutorial. You don't need to worry about browser compatibility issues because we have done all that work for you. The widget is compatible with all major browsers including IE8+.</div><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<strong> Blogger</strong> > <strong>Template</strong></li><li>Backup your template</li><li>Click<strong> Edit HTML</strong></li><li>Search for <strong></head></strong></li><li>Just above it paste the following code</li></ol><blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZSpNsKTLo5ZKaxCAzofbTVCexkes8CER21osNl6RuZiq7cbUu5wlKndE7ARPIRRyeqGr4iz4zmqJw2WuvAfB6BdhFeSpIHShxQjzItJw03IPs9M9ejHJQs6vo6s7dn7tAhVyeTgrSpgb8/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;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script><br /><script><br />//<![CDATA[<br />$(document).ready(function(){<br />/* This code is executed after the DOM has been completely loaded */<br />/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */<br />$.easing.def = "easeOutBounce";<br />/* Binding a click event handler to the links: */<br />$('li.button a').click(function(e){</div><div style="padding: 0px 0px 15px;">/* Finding the drop down list that corresponds to the current section: */<br />var dropDown = $(this).parent().next();</div><div style="padding: 0px 0px 15px;">/* Closing all other drop down sections, except the current one */<br />$('.dropdown1').not(dropDown).slideUp('slow');<br />dropDown.stop(false,true).slideToggle('slow');</div><div style="padding: 0px 0px 15px;">/* Preventing the default event (which would be to navigate the browser to the link&#39;s address) */<br />e.preventDefault();<br />})</div><div style="padding: 0px 0px 15px;">});<br /><span style="background-color: yellow;">// t: current time, b: begInnIng value, c: change In value, d: duration<br />jQuery.easing['jswing'] = jQuery.easing['swing'];</span></div><div style="padding: 0px 0px 15px;"><span style="background-color: yellow;">jQuery.extend( jQuery.easing,<br />{<br />def: 'easeOutQuad',<br />swing: function (x, t, b, c, d) {<br />  //alert(jQuery.easing.default);<br />  return jQuery.easing[jQuery.easing.def](x, t, b, c, d);<br />},<br />easeInQuad: function (x, t, b, c, d) {<br />  return c*(t/=d)*t + b;<br />},<br />easeOutQuad: function (x, t, b, c, d) {<br />  return -c *(t/=d)*(t-2) + b;<br />},<br />easeInOutQuad: function (x, t, b, c, d) {<br />  if ((t/=d/2) < 1) return c/2*t*t + b;<br />  return -c/2 * ((--t)*(t-2) - 1) + b;<br />},<br />easeInCubic: function (x, t, b, c, d) {<br />  return c*(t/=d)*t*t + b;<br />},<br />easeOutCubic: function (x, t, b, c, d) {<br />  return c*((t=t/d-1)*t*t + 1) + b;<br />},<br />easeInOutCubic: function (x, t, b, c, d) {<br />  if ((t/=d/2) < 1) return c/2*t*t*t + b;<br />  return c/2*((t-=2)*t*t + 2) + b;<br />},<br />easeInQuart: function (x, t, b, c, d) {<br />  return c*(t/=d)*t*t*t + b;<br />},<br />easeOutQuart: function (x, t, b, c, d) {<br />  return -c * ((t=t/d-1)*t*t*t - 1) + b;<br />},<br />easeInOutQuart: function (x, t, b, c, d) {<br />  if ((t/=d/2) < 1) return c/2*t*t*t*t + b;<br />  return -c/2 * ((t-=2)*t*t*t - 2) + b;<br />},<br />easeInQuint: function (x, t, b, c, d) {<br />  return c*(t/=d)*t*t*t*t + b;<br />},<br />easeOutQuint: function (x, t, b, c, d) {<br />  return c*((t=t/d-1)*t*t*t*t + 1) + b;<br />},<br />easeInOutQuint: function (x, t, b, c, d) {<br />  if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;<br />  return c/2*((t-=2)*t*t*t*t + 2) + b;<br />},<br />easeInSine: function (x, t, b, c, d) {<br />  return -c * Math.cos(t/d * (Math.PI/2)) + c + b;<br />},<br />easeOutSine: function (x, t, b, c, d) {<br />  return c * Math.sin(t/d * (Math.PI/2)) + b;<br />},<br />easeInOutSine: function (x, t, b, c, d) {<br />  return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;<br />},<br />easeInExpo: function (x, t, b, c, d) {<br />  return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;<br />},<br />easeOutExpo: function (x, t, b, c, d) {<br />  return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;<br />},<br />easeInOutExpo: function (x, t, b, c, d) {<br />  if (t==0) return b;<br />  if (t==d) return b+c;<br />  if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;<br />  return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;<br />},<br />easeInCirc: function (x, t, b, c, d) {<br />  return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;<br />},<br />easeOutCirc: function (x, t, b, c, d) {<br />  return c * Math.sqrt(1 - (t=t/d-1)*t) + b;<br />},<br />easeInOutCirc: function (x, t, b, c, d) {<br />  if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;<br />  return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;<br />},<br />easeInElastic: function (x, t, b, c, d) {<br />  var s=1.70158;var p=0;var a=c;<br />  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;<br />  if (a < Math.abs(c)) { a=c; var s=p/4; }<br />  else var s = p/(2*Math.PI) * Math.asin (c/a);<br />  return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;<br />},<br />easeOutElastic: function (x, t, b, c, d) {<br />  var s=1.70158;var p=0;var a=c;<br />  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;<br />  if (a < Math.abs(c)) { a=c; var s=p/4; }<br />  else var s = p/(2*Math.PI) * Math.asin (c/a);<br />  return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;<br />},<br />easeInOutElastic: function (x, t, b, c, d) {<br />  var s=1.70158;var p=0;var a=c;<br />  if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);<br />  if (a < Math.abs(c)) { a=c; var s=p/4; }<br />  else var s = p/(2*Math.PI) * Math.asin (c/a);<br />  if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;<br />  return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;<br />},<br />easeInBack: function (x, t, b, c, d, s) {<br />  if (s == undefined) s = 1.70158;<br />  return c*(t/=d)*t*((s+1)*t - s) + b;<br />},<br />easeOutBack: function (x, t, b, c, d, s) {<br />  if (s == undefined) s = 1.70158;<br />  return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;<br />},<br />easeInOutBack: function (x, t, b, c, d, s) {<br />  if (s == undefined) s = 1.70158;<br />  if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;<br />  return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;<br />},<br />easeInBounce: function (x, t, b, c, d) {<br />  return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;<br />},<br />easeOutBounce: function (x, t, b, c, d) {<br />  if ((t/=d) < (1/2.75)) {<br />   return c*(7.5625*t*t) + b;<br />  } else if (t < (2/2.75)) {<br />   return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;<br />  } else if (t < (2.5/2.75)) {<br />   return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;<br />  } else {<br />   return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;<br />  }<br />},<br />easeInOutBounce: function (x, t, b, c, d) {<br />  if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;<br />  return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;<br />}<br />}); </span>//]]><br /></script></div></blockquote><br /><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><strong>Note:</strong> The yellow highlighted code is for producing the bouncing effect using the Easing Plugin. If you don't want too much animation then you can delete the yellow part of the code.</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. Search for <strong></b:skin>.</strong>  Click the black arrow to expand the code.<strong></strong></div><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><img alt="compressed blogger stylesheet" border="0" height="57" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNqhHGtYjPDJh4RgUfaOUUlsJggggQddRJY1KHqRsLsnzBLq5yC75zrEbb7NnVwgjQsq5P0CfMKSVckA81hY2i74i9LSeM0WpHFEHErjw6RP9XXJD1Bnvb3I3rXNYbX3FLyBF2p-clnuY/?imgmax=800" style="padding: 10px;" title="compressed blogger stylesheet" width="283" /></div><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">   7.  Paste the following CSS Styles just above </b:skin></div><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/AVvXsEiZSpNsKTLo5ZKaxCAzofbTVCexkes8CER21osNl6RuZiq7cbUu5wlKndE7ARPIRRyeqGr4iz4zmqJw2WuvAfB6BdhFeSpIHShxQjzItJw03IPs9M9ejHJQs6vo6s7dn7tAhVyeTgrSpgb8/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;">/*------ Accordion Widget by MBT  -----*/</div><div style="padding: 0px 0px 15px;">ul.container{</div><div style="padding: 0px 0px 15px;">    width:275px;<br />    margin:0 auto;<br />    padding:0px;<br />}</div><div style="padding: 0px 0px 15px;"><br /></div><div style="padding: 0px 0px 15px;">li.menu{</div><div style="padding: 0px 0px 15px;">    padding:5px 0;<br />    width:100%;</div><div style="padding: 0px 0px 15px;">}</div><div style="padding: 0px 0px 15px;">li.button a{</div><div style="padding: 0px 0px 15px;">    display:block;<br />    font-family: Arial, sans-serif,Helvetica;<br />    font-size:12px;<br />    overflow:hidden;<br />    padding:0px 0px 5px 0;<br />    position:relative;<br />    width:100%;<br />        text-transform:capitalize;<br />}</div><div style="padding: 0px 0px 15px;">li.button a:hover{</div><div style="padding: 0px 0px 15px;">    text-decoration:none!important;<br />}</div><div style="padding: 0px 0px 15px;">li.button a span{<br />   <br />    right:0px;<br />        top:0px;<br />    position:absolute;<br />    color:#ccc;<br />    display:block;<br />}</div><div style="padding: 0px 0px 15px;"><br />.dropdown1{</div><div style="padding: 0px 0px 15px;">    display:none;<br />    padding-top:5px;<br />    width:100%;<br />}</div><div style="padding: 0px 0px 15px;">.dropdown1 li{<br />   <br />   <br />   <br />border:1px solid #7E7E7E;<br />    color:#CCCCCC;<br />    margin:5px 0;<br />    padding:4px 10px;<br />       <br />}</div><div style="padding: 0px 0px 15px;">.dropdown1 li:hover {<br />border:1px solid #ccc;<br />text-decoration:none;<br />}</div><div style="padding: 0px 0px 15px;"><br />.dropdown1 li a:hover {<br />text-decoration:none;<br />}</div></blockquote><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><strong><span style="background-color: yellow;"><br /></span></strong></div><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><strong><span style="background-color: yellow;"><br /></span></strong></div><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><strong><span style="background-color: yellow;">Note:</span></strong> The look and colors of the links and fonts can be customized by editing the above the code. But the default colors would work fine with any dark footer except if your footer has white background.</div><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">   8.  Save your template and you are all done!</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;">Add Accordion To Blogger Layout</h3><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Now you need to add your widget in the layout section and start making a list of your own popular series or any content that you wish to display inside it.</div><ol style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><li>Go to blogger > Layout</li><li>Click <strong>Add a Gadget</strong></li><li>Choose HTML/JavaScript widget</li><li>Paste the following HTML code inside it:</li></ol><blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZSpNsKTLo5ZKaxCAzofbTVCexkes8CER21osNl6RuZiq7cbUu5wlKndE7ARPIRRyeqGr4iz4zmqJw2WuvAfB6BdhFeSpIHShxQjzItJw03IPs9M9ejHJQs6vo6s7dn7tAhVyeTgrSpgb8/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;"><ul class="container"><br />     <br />     </div><div style="padding: 0px 0px 15px;"><span style="background-color: #9bbb59;"><!- TAB ONE --></span></div><div style="padding: 0px 0px 15px;"><br />      <li class="menu"><br />     <br />          <ul><br />            <li class="button"><a href="#" ><span style="background-color: #f79646;">ADD TAB TITLE HERE</span><span>▼</span></a></li>             </div><div style="padding: 0px 0px 15px;">            <li class="dropdown1"></div><div style="padding: 0px 0px 15px;"><br />                <ul><br /><li>1. <a  href="ADD LINK HERE" ><span style="background-color: yellow;">ADD LINK TEXT HERE</span></a></li><br /><li>2. <a  href="ADD LINK HERE"><span style="background-color: yellow;">ADD LINK TEXT HERE</span></a></li></div><div style="padding: 0px 0px 15px;"><li>3. <a href="ADD LINK HERE"><span style="background-color: yellow;">ADD LINK TEXT HERE</span></a></li></div><div style="padding: 0px 0px 15px;"><li>5. <a href="ADD LINK HERE"><span style="background-color: yellow;">ADD LINK TEXT HERE</span></a></li></div><div style="padding: 0px 0px 15px;"><li>4. <a href="ADD LINK HERE"><span style="background-color: yellow;">ADD LINK TEXT HERE</span></a></li></div><div style="padding: 0px 0px 15px;">                </ul><br />            </li></div><div style="padding: 0px 0px 15px;">          </ul><br />         <br />      </li></div><div style="padding: 0px 0px 15px;"><br /></div><div style="padding: 0px 0px 15px;"><span style="background-color: #9bbb59;"><!- TAB TWO --></span></div><div style="padding: 0px 0px 15px;"><br /><li class="menu"><br />     <br />          <ul><br />            <li class="button"><a href="#" ><span style="background-color: #f79646;">ADD TAB TITLE HERE</span><span>▼</span></a></li></div><div style="padding: 0px 0px 15px;">            <li class="dropdown1"><br />                <ul> </div><div style="padding: 0px 0px 15px;"><li>1. <a href="ADD LINK HERE" ><span style="background-color: yellow;">ADD LINK TEXT HERE</span></a></li><br /><li>2. <a href="ADD LINK HERE"><span style="background-color: yellow;">ADD LINK TEXT HERE</span></a></li></div><div style="padding: 0px 0px 15px;"><li>3. <a href="ADD LINK HERE"><span style="background-color: yellow;">ADD LINK TEXT HERE</span></a></li></div><div style="padding: 0px 0px 15px;"><li>5. <a href="ADD LINK HERE"><span style="background-color: yellow;">ADD LINK TEXT HERE</span></a></li></div><div style="padding: 0px 0px 15px;"><li>4. <a href="ADD LINK HERE"><span style="background-color: yellow;">ADD LINK TEXT HERE</span></a></li></div><div style="padding: 0px 0px 15px;"><br />               <br />             </ul><br />            </li></div><div style="padding: 0px 0px 15px;">          </ul><br /><br />      </li></div><div style="padding: 0px 0px 15px;"><br /></div><div style="padding: 0px 0px 15px;"> <br /><span style="background-color: #8064a2;">  </ul></span></div></blockquote><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">In the above code I created <strong>two tabs</strong> with<strong> 4 rows</strong> each.</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/AVvXsEi-GBzWvrX90RKXBsQoQhKCb7B2sDM4Wvuf82kMbx5rQrfN4DdjuLESmdoYOa0dcLtPS35NdSs6R95TxfxivIQFq7wCCB-8ToCpUORQdhS3sUV8GrerkqcBurLckY2o7n6BvST4B7eDQjE/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="background-color: #f79646;">ADD TAB TITLE HERE </span>with the name of the list title.</li><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-GBzWvrX90RKXBsQoQhKCb7B2sDM4Wvuf82kMbx5rQrfN4DdjuLESmdoYOa0dcLtPS35NdSs6R95TxfxivIQFq7wCCB-8ToCpUORQdhS3sUV8GrerkqcBurLckY2o7n6BvST4B7eDQjE/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 <strong>ADD LINK HERE</strong> with your Link URL</li><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-GBzWvrX90RKXBsQoQhKCb7B2sDM4Wvuf82kMbx5rQrfN4DdjuLESmdoYOa0dcLtPS35NdSs6R95TxfxivIQFq7wCCB-8ToCpUORQdhS3sUV8GrerkqcBurLckY2o7n6BvST4B7eDQjE/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="background-color: yellow;">ADD LINK TEXT HERE</span> with your anchor text</li></ul><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;">I don't think the above code needs further clarification. Every part is highlighted to make it more simple to be understood. If incase you wanted to add another tab then just add the following code above <span style="background-color: #8064a2;"></ul></span></div><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/AVvXsEiZSpNsKTLo5ZKaxCAzofbTVCexkes8CER21osNl6RuZiq7cbUu5wlKndE7ARPIRRyeqGr4iz4zmqJw2WuvAfB6BdhFeSpIHShxQjzItJw03IPs9M9ejHJQs6vo6s7dn7tAhVyeTgrSpgb8/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;"><li class="menu"><br /><br /><ul><br /><li class="button"><a href="#" ><span style="background-color: #f79646;">ADD TAB TITLE HERE</span><span>▼</span></a></li></div><div style="padding: 0px 0px 15px;"><li class="dropdown1"><br /><ul> </div><div style="padding: 0px 0px 15px;"><li>1. <a href="ADD LINK HERE" ><span style="background-color: yellow;">ADD LINK TEXT HERE</span></a></li><br /><br /></ul><br /></li></div><div style="padding: 0px 0px 15px;"></ul><br /><br /></li></div></blockquote><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">To increase the number of rows simply keeping adding this line of code:</div><blockquote style="background-color: #f2f1f1; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZSpNsKTLo5ZKaxCAzofbTVCexkes8CER21osNl6RuZiq7cbUu5wlKndE7ARPIRRyeqGr4iz4zmqJw2WuvAfB6BdhFeSpIHShxQjzItJw03IPs9M9ejHJQs6vo6s7dn7tAhVyeTgrSpgb8/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;"><li><span style="background-color: #d19049;">1</span>. <a href="ADD LINK HERE" ><span style="background-color: yellow;">ADD LINK TEXT HERE</span></a></li></div></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/AVvXsEi-GBzWvrX90RKXBsQoQhKCb7B2sDM4Wvuf82kMbx5rQrfN4DdjuLESmdoYOa0dcLtPS35NdSs6R95TxfxivIQFq7wCCB-8ToCpUORQdhS3sUV8GrerkqcBurLckY2o7n6BvST4B7eDQjE/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;">Simply change <span style="background-color: #d19049;">1</span> with the row number.</li></ul><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">    5.  Click Save and you are all done!</div><span style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">Visit your blog to see it hanging just nicely on your blog sidebar. Click the tabs and play with your newly created Accordion widget. It's all yours now! :)</span><br /><br />mybloggertricks.com<br /><a href="http://bloggeringnews.blogspot.gr/" target="_blank"> <span style="display: none; visibility: hidden;">.</span></a></div>

"Fancy Accordion Widget in Blogger"

It is really important to organize your content and make certain sections of your blog to appear only when the visitor is interested in it. ...

Read more »

"How to Add Keyboard Navigation in Your Blogger Blog"

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY-T50g5m4-NrXZW8ZwJgUAJP_U6GOdj8ntOfT_mprnAOFSovn5rs6MkhXD6a-aKjDMNFTnc4DwF18zWn7FsI6kFBmnAB1UASfwIDfIRxDxuKkkiRg4jJwIJEKRCpgzBRxl6kfVBBI614/s312/How-to-Add-Keyboard-Navigation-in-Your-Blogger-Blog.png" /></div><br /><br /><div style="background-color: white; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;">One of our user recently asked how we add keyboard navigation in our Blogger blog posts. Default Blogger template displays navigation link through the older and newer post link that usually appears at the very bottom of the Blogger achieve page.  However, we have seen many WordPress as well as HTML based sites that used Keyboard navigation  From our experience and knowledge, keyboard navigation is fast, reliable and convenient. Today in this article, we will show you how to add keyboard navigation in Blogger.</span><br /><a name="more"></a></div><span style="font-family: inherit;"><a href="http://www.blogger.com/blogger.g?blogID=2862819875743720971" name="more" style="background-color: white; line-height: 25.1875px; list-style: none; margin: 0px; outline: none; padding: 0px;"></a><br style="background-color: white; line-height: 25.1875px;" /></span><br /><div style="background-color: white; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;">This method works with JavaScript, so it makes it a lot easier to apply and made it safely. However, it would stop working if someone would turn off JavaScript, so there are some drawbacks which you need to know before applying it to your blog or website. It works pretty well on Homepage, Archive pages and even post pages. All you need to do is to Press the Left and right Arrow buttons to navigate.</span></div><div style="background-color: white; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;"><br /></span></div><div style="background-color: white; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;"><i><b>Note:</b> If you want to navigate to the next page, you will press the “Right Arrow Key” and when you want to navigate to the previous page, you will press the “Left Arrow Key” located on your keyboard. </i><br /><i><br /></i></span><br /><div style="text-align: left;"><span style="font-family: inherit;">Before you learn how it works, Let see the <a href="http://blog.templateism.com/2013/05/giveaway-win-3-pro-accounts-of-ahrefscom.html" style="list-style: none; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">Demo Here</a></span></div></div><div style="background-color: white; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;"><br /></span></div><div style="background-color: white; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;">The First thing you need to do is to Login into your blogger dashboard. Now go to Your Blog >> Template >> Edit HTML and search for the ending </head> tag. After finding the tag, just above it paste the following JavaScript coding. Once everything is done press the “Save template” button located on the bottom to conclude.</span></div><div style="background-color: white; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;"><br /></span></div><div style="background-color: white; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;"><br /></span></div><div style="background-color: white; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;"><br /></span></div><div style="background-color: white; text-align: justify;"><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"><script type='text/javascript'></div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">window.onload = function()</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">{</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">document.onkeyup = function(event)</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">{</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">event = event || window.event;</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">switch(event.keyCode)</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">{</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">case 37:</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">var newerLink = document.getElementById('Blog1_blog-pager-newer-link');</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">if(newerLink !=null) window.location.href = newerLink.href;</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">break;</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">case 39:</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">var olderLink = document.getElementById('Blog1_blog-pager-older-link');</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">if(olderLink!=null) window.location.href = olderLink.href;</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">}</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">};</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;">};</div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"></script></div><div style="font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"><br /></div><div style="text-align: left;"><div style="color: #464646; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;"><b>Congratulations: </b>That’s all, now visit your blog and Press either “Left” or “Right” arrow keys to see how perfectly everything works. It is extremely responsive and works pretty well. </span></div><div style="color: #464646; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;"><br /></span></div><div style="color: #464646; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;">Many users still believe that using JavaScript could cause slowness, but this is not what we should be thinking. If a script is correctly optimized, then there is no way it could affect your site speed. Here at MyBloggerLab, we use more than 20 JavaScript files, but the page speed is still 90+ out of 100.</span></div><div style="color: #464646; line-height: 25.1875px; text-align: justify;"><span style="font-family: inherit;"><br /></span></div><div style="text-align: justify;"><span style="color: #464646; line-height: 25.173612594604492px;">mybloggerlab.com</span></div></div></div><a href="http://bloggeringnews.blogspot.gr/" target="_blank"> <span style="display: none; visibility: hidden;">.</span></a></div>

"How to Add Keyboard Navigation in Your Blogger Blog"

One of our user recently asked how we add keyboard navigation in our Blogger blog posts. Default Blogger template displays navigation link t...

Read more »

"Google Highlights Common Smart Phone SEO Mistakes"

<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/AVvXsEheXVdbESRKgHieDXwb03fAOQK7uTsYVCe77U-PSNtbMK7RCDO9T7vYTGfZiLBU5dBKUtFjCeIrzqqoxCVi3O3zTWwpQTSxeI2Je5YDntomcJ4uRhfV3UsfVsn7ShsZ4AZ37dOSoNczmWs/s320/mobile+web.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheXVdbESRKgHieDXwb03fAOQK7uTsYVCe77U-PSNtbMK7RCDO9T7vYTGfZiLBU5dBKUtFjCeIrzqqoxCVi3O3zTWwpQTSxeI2Je5YDntomcJ4uRhfV3UsfVsn7ShsZ4AZ37dOSoNczmWs/s320/mobile+web.jpg" /></a></div><br /><br /><span style="font-family: inherit;"><span style="background-color: white; color: #333333; line-height: 20.796875px; text-align: justify;">The </span>Mobile web<span style="background-color: white; color: #333333; line-height: 20.796875px; text-align: justify;"> is growing at a pretty rapid pace, and is becoming more and more significant, especially in terms of search traffic, because more and more people are now using their smartphones to Google things up. </span></span><br /><a name="more"></a><span style="font-family: inherit;"><span style="background-color: white; color: #333333; line-height: 20.796875px; text-align: justify;">Since smartphones have become so powerful these days, there's no reason why they shouldn't experience the full richness of the web. Engaging smartphone users by doing mobile SEO is one way to </span>increase your traffic<span style="background-color: white; color: #333333; line-height: 20.796875px; text-align: justify;">. And in the near future, Google intends to penalize sites in search results that are misconfigured for mobile. Here are some of the mistakes people make in mobile SEO, and how to avoid them.</span></span><br /><span style="font-family: inherit;"><span style="background-color: white; color: #333333; line-height: 20.796875px; text-align: justify;"><br /></span></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;">Faulty redirects</h3><br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">Mostly, webmasters have separate smartphone versions of webpages in addition to their desktop counterparts. When a smartphone user lands on a desktop page, he is usually redirected to the corresponding mobile version. But sometimes, these redirections might not go as planned, as described by the following scenarios.</div><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"></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/AVvXsEi-GBzWvrX90RKXBsQoQhKCb7B2sDM4Wvuf82kMbx5rQrfN4DdjuLESmdoYOa0dcLtPS35NdSs6R95TxfxivIQFq7wCCB-8ToCpUORQdhS3sUV8GrerkqcBurLckY2o7n6BvST4B7eDQjE/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;">When no mobile version of a page is available, the user might be getting redirected to the homepage. This means the user has to do a lot of work, and isn't generally happy about it.</li><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-GBzWvrX90RKXBsQoQhKCb7B2sDM4Wvuf82kMbx5rQrfN4DdjuLESmdoYOa0dcLtPS35NdSs6R95TxfxivIQFq7wCCB-8ToCpUORQdhS3sUV8GrerkqcBurLckY2o7n6BvST4B7eDQjE/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;">Suppose you have a website where you can search and/or sort data, as is the case with product listings. Now, the URL parameters (e.g. www.example.com/search.php?product=13) for the desktop version might not be parsed properly, or at all by the mobile version, which means that smartphone users will not be able to search the content.</li><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-GBzWvrX90RKXBsQoQhKCb7B2sDM4Wvuf82kMbx5rQrfN4DdjuLESmdoYOa0dcLtPS35NdSs6R95TxfxivIQFq7wCCB-8ToCpUORQdhS3sUV8GrerkqcBurLckY2o7n6BvST4B7eDQjE/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;">You might have set up redirection checks for some mobile platforms, but not all. For example, you might have checked for Android and iOS, but missed out on BB, WP, Ubuntu etc.</li></ul><br style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;" /><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">Check out your website thoroughly, and see if none of these problems are occurring. If they are, then most probably, there was no equivalent mobile version of the desktop content. The best solution would be to just return the desktop version of your pages to smartphones, instead of redirecting them.</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;">Smartphone-only errors</h3><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">Sometimes, users are able to open a page on a desktop, but they get a 404 error when accessing the same page on a smartphone. Again, there can be various reasons.<br /><ul style="list-style: none;"><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-GBzWvrX90RKXBsQoQhKCb7B2sDM4Wvuf82kMbx5rQrfN4DdjuLESmdoYOa0dcLtPS35NdSs6R95TxfxivIQFq7wCCB-8ToCpUORQdhS3sUV8GrerkqcBurLckY2o7n6BvST4B7eDQjE/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;">The page a user is looking for on mobile might not actually exist as a mobile version.</li><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUdubOkJfdSKmsoQeMQski2Zl-5vmrulKpgDv5FcvgeuF7Ua9oh9TM5waZtXZfmed57NUbuJm7DlIbRLmmOM2RK4nn8CvcAtQa8dh3gyPf3m_grSD3YMdZe-KMcr1u-Wo8oZp7mxhwd98/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;"><span style="text-align: left;"><span style="font-family: inherit;">If you recognize a user is visiting a desktop page from a mobile device and you have an equivalent smartphone-friendly page at a different URL, redirect them to that URL instead of serving a 404.</span></span></li></ul></div><a href="http://bloggeringnews.blogspot.gr/" target="_blank"> <span style="display: none; visibility: hidden;">.</span></a><br /><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;">While these are only some of the mistakes, it is important to put yourself into the shoes of an ordinary smartphone user, and see the flaws in your website from that perspective. Hope you understand the problems associated with mobile SEO. If you have any questions, please feel free to ask. Cheers :)</div><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><br /></div><div style="background-color: white; text-align: justify;"><span style="color: #333333; font-family: Verdana, arial; font-size: x-small;"><span style="line-height: 20.78125px;">mybloggertricks.com</span></span></div></div>

"Google Highlights Common Smart Phone SEO Mistakes"

The  Mobile web  is growing at a pretty rapid pace, and is becoming more and more significant, especially in terms of search traffic, becaus...

Read more »

"Using Google Analytics To Check out Your Important Backlinks"

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><img border="0" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiujH7rMVr4RQ-mgHkXNGgNAAkM9Oi5HJuur_f_w85DJ2EURo6Ql4OjCWpdzwmRiqUTMDy1F1c-UKA1Nw0pwdCu9hPyjDCvJMuyPg5ft9eE-0abx8vW5wzKVlJFRidGEQwGAIzP1F_llh8/s320/important+backlinks.jpg" width="320" /></div><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;"><br /></span><span style="font-family: inherit;"><span style="background-color: white; color: #333333; line-height: 20.796875px; text-align: justify;">The number and nature of the backlinks to a website is one of the most important ranking factors, that is still being used in today's user-oriented organic search results. It helps determining the popularity of a website. </span></span><br /><a name="more"></a><span style="font-family: inherit;">Rank metrics, such as <a href="http://www.mybloggertricks.com/2013/02/google-pagerank-update-february-2013.html" style="background-color: white; color: #289728; line-height: 20.796875px; outline: none; text-align: justify; text-decoration: none;" target="_blank">Google PageRank</a><span style="background-color: white; color: #333333; line-height: 20.796875px; text-align: justify;"> and </span><a href="http://www.mybloggertricks.com/2013/06/page-authority-vs-domain-authority.html" style="background-color: white; color: #289728; line-height: 20.796875px; outline: none; text-align: justify; text-decoration: none;" target="_blank">Moz Domain/Rank Authority</a><span style="background-color: white; color: #333333; line-height: 20.796875px; text-align: justify;"> use it for ranking websites. So the more backlinks you have (quality ones, not cheap and spammy ones that people often purchase), the better your site tends to perform in search results. Knowing what your backlinks are, and where they're coming from can provide you with useful insights, and can help you filter out the cheap links in favour of quality ones. Let's take a look at how you can look at your website's backlinks in Google Analytics.</span></span><br /><span style="font-family: inherit;"><span style="background-color: white; color: #333333; line-height: 20.796875px; text-align: justify;"><br /></span></span><br /><div style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: justify;"><h3 style="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; padding: 3px;">What can you do with backlink analysis?</h3></div><div style="background-color: white; text-align: justify;"><span style="color: #333333; font-family: Verdana, arial; font-size: x-small;"><span style="line-height: 20.796875px;">Backlink analysis can be invaluable for the performance of your website in search engines. The first and most useful information you could gather from your backlink data is the amount and nature of broken links. External links might be pointing to a page on your website that you have moved or deleted. Hence, the backlink is going useless, unless you do something about it.</span></span><br /><br /><span style="color: #333333; font-family: Verdana, arial; font-size: x-small;"><span style="line-height: 20.796875px;">You can also check out the trends, and see what type of pages are being linked by other website. In other words, you can find out what people like about your website, so much so that they are linking to it. You can use this information to glean trends data, and create more such content.</span></span><br /><br /><span style="color: #333333; font-family: Verdana, arial; font-size: x-small;"><span style="line-height: 20.796875px;">Another very important insight can be seen from the type of websites that are linking to you. For example, if a high quality website has given you a backlink, you should investigate, and find out what and why they liked. You can then stay in touch with them and maintain high quality connections that will ultimately help your website's ranking.</span></span><br /><h3 style="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;">Using Google Analytics for backlink analysis</h3><span style="color: #333333; font-family: Verdana, arial; font-size: x-small;"><span style="line-height: 20.796875px;">Google Analytics offers one of the tools you can use to analyze your backlinks. To use this tool, follow these steps.</span></span><br /><br /><ul style="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/AVvXsEi-GBzWvrX90RKXBsQoQhKCb7B2sDM4Wvuf82kMbx5rQrfN4DdjuLESmdoYOa0dcLtPS35NdSs6R95TxfxivIQFq7wCCB-8ToCpUORQdhS3sUV8GrerkqcBurLckY2o7n6BvST4B7eDQjE/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;">Log into your <b>Google Analytics</b> Account, and then click on the website property you want to see backlinks for.</li><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-GBzWvrX90RKXBsQoQhKCb7B2sDM4Wvuf82kMbx5rQrfN4DdjuLESmdoYOa0dcLtPS35NdSs6R95TxfxivIQFq7wCCB-8ToCpUORQdhS3sUV8GrerkqcBurLckY2o7n6BvST4B7eDQjE/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;">Look to left sidebar, and there you'll see a <b>Standard Reports</b> section. Click on the <b>Traffic Sources </b>tab, expand the <b>Social</b> section, and then click on<b>Trackbacks</b>.</li></ul><div class="separator" style="clear: both; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: center;"><img alt="Trackbacks" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9-zES3bJQQuv9FJBX2qyZdymtbrfft1WzEvqyBLqYNRXsh9RzcrratzFwjAHWHz0CIF7IqePHH5GVyWwhD8ud33szyk-Albn-t-XLx-fcEkPmOSJ2IIwWBXZp0P4YQSIwbL_3AgNH92qP/s320/1.PNG" style="padding: 10px;" title="Trackbacks" width="179" /></div><div style="color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><br /></div><div style="color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">A trackback is basically a notification for every time a website links to another. It is a record of what page on one website linked to another page on another website. Each trackback in this case will contain the linking URL, and the linked URL. You can also see how many visits were generated as a result of each backlink, so that you can contact that website and arrange for more backlinks to increase your traffic!</div><ul style="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/AVvXsEi-GBzWvrX90RKXBsQoQhKCb7B2sDM4Wvuf82kMbx5rQrfN4DdjuLESmdoYOa0dcLtPS35NdSs6R95TxfxivIQFq7wCCB-8ToCpUORQdhS3sUV8GrerkqcBurLckY2o7n6BvST4B7eDQjE/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;">Now, you will see a list of all trackbacks to your website within a specific period of time. You can change this period, and show backlinks from a month ago, or a week ago, and so on. This feature is useful when you want to see how many backlinks you 'scored' during a particular campaign.</li></ul><div class="separator" style="clear: both; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px; text-align: center;"><img alt="Time period" border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6HFGP_zkvo1hzl2HKKH4Vk8rXSgbgFqWjalm7a-K7EhyphenhyphenUwl0RuDwrXsnn0tA7eGHtBCS23g8rx8yeGN0OyUXJxsLsQBtRs3_uTeykv7MwQAYWA2dZ1T1oTs3gfoo6GOgjgNsGewR1p0F6/s400/time+period.PNG" style="padding: 10px;" title="Time period" width="400" /></div><div style="color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;"><br /></div><div><span style="color: #333333; font-family: Verdana, arial; font-size: x-small;"><span style="line-height: 20.78125px;">mybloggertricks.com</span></span></div></div><a href="http://bloggeringnews.blogspot.gr/" target="_blank"> <span style="display: none; visibility: hidden;">.</span></a></div>

"Using Google Analytics To Check out Your Important Backlinks"

The number and nature of the backlinks to a website is one of the most important ranking factors, that is still being used in today's us...

Read more »