Adding a post ticker widget to your blog site

Adding a post ticker widget to your blog site

This is one of the latest widget for blogger that displays frequent posts on your blog page..in adding to that it has social media icon that can be linked to your social pages, groups or forum and a feed burner icon.
In few minutes from now, you would have it installed on your blog..
Lets go straight to the procedures and code manipulations ... First of all, i would need you to backup your blog template ,,,,


How to install this widget?



      • log in to your blogger dashboard
      • Select the blog you would want to install this widget
      • Go to your HTML editor
      • look for this code in your HTML  ]]></b:skin>
       find it easily by press  Ctrl + F key and type it in search space.........paste the code below before it  .. i mean before this (]]></b:skin>)

      Paste this code before it  



      #content-top { background: #fff; border: 1px solid #ccc; float: left; margin-bottom: 20px; width: 958px; } #ticker { float: left; width: 498px; } ul.ticker-list { display: block; float: left; overflow: hidden; width: 423px; height: 30px; } ul.ticker-list li { display: block; font: 500 12px/12px Open Sans Condensed, sans-serif; height: 12px; overflow: hidden; padding: 9px; width: 370px; } .ticker-heading { background: #fff; border-right: 1px solid #ccc; color: #ca0002; float: left; font: 700 12px/12px Open Sans Condensed, sans-serif; padding: 9px; text-transform: uppercase; } #ticker a { color: #555; font: 700 12px/12px Open Sans, sans-serif; } .ticker-date { color: #999; font: 10px/10px helvetica, arial, sans-serif; margin-left: 10px; } #content-social { float: right; width: 452px; } #content-social ul { display: inline; float: right; } #content-social ul li { border-left: 1px solid #ccc; display: inline; float: left; overflow: hidden; } .fb-but, .twitter-but, .pinterest-but, .google-but, .linkedin-but, .rss-but { float: left; transition: all .1s; -moz-transition: all .1s; -ms-transition: all .1s; -o-transition: all .1s; -webkit-transition: all .1s; width: 30px; height: 30px; } .fb-but { background: #fff url(http://3.bp.blogspot.com/-z-hQaMaYi7E/UQ5CyqzrTFI/AAAAAAAANF0/TKUeCUpA81U/s1600/Social-Buttons.png) 0 0; } .fb-but:hover { background: #3b5997 url(http://3.bp.blogspot.com/-z-hQaMaYi7E/UQ5CyqzrTFI/AAAAAAAANF0/TKUeCUpA81U/s1600/Social-Buttons.png) 0 -30px; } .twitter-but { background: #fff url(http://3.bp.blogspot.com/-z-hQaMaYi7E/UQ5CyqzrTFI/AAAAAAAANF0/TKUeCUpA81U/s1600/Social-Buttons.png) -30px 0; } .twitter-but:hover { background: #00aced url(http://3.bp.blogspot.com/-z-hQaMaYi7E/UQ5CyqzrTFI/AAAAAAAANF0/TKUeCUpA81U/s1600/Social-Buttons.png) -30px -30px; } .pinterest-but { background: #fff url(http://3.bp.blogspot.com/-z-hQaMaYi7E/UQ5CyqzrTFI/AAAAAAAANF0/TKUeCUpA81U/s1600/Social-Buttons.png) -60px 0; } .pinterest-but:hover { background: #cb2027 url(http://3.bp.blogspot.com/-z-hQaMaYi7E/UQ5CyqzrTFI/AAAAAAAANF0/TKUeCUpA81U/s1600/Social-Buttons.png) -60px -30px; } .google-but { background: #fff url(http://3.bp.blogspot.com/-z-hQaMaYi7E/UQ5CyqzrTFI/AAAAAAAANF0/TKUeCUpA81U/s1600/Social-Buttons.png) -90px 0; } .google-but:hover { background: #000 url(http://3.bp.blogspot.com/-z-hQaMaYi7E/UQ5CyqzrTFI/AAAAAAAANF0/TKUeCUpA81U/s1600/Social-Buttons.png) -90px -30px; } .youtube-but { background: #fff url(http://3.bp.blogspot.com/-z-hQaMaYi7E/UQ5CyqzrTFI/AAAAAAAANF0/TKUeCUpA81U/s1600/Social-Buttons.png) -120px 0; float: left; transition: all 0.1s; -moz-transition: all 0.1s; -ms-transition: all 0.1s; -o-transition: all 0.1s; -webkit-transition: all 0.1s; width: 54px; height: 30px; } .youtube-but:hover { background: #f00 url(http://3.bp.blogspot.com/-z-hQaMaYi7E/UQ5CyqzrTFI/AAAAAAAANF0/TKUeCUpA81U/s1600/Social-Buttons.png) -120px -30px; } .linkedin-but { background: #fff url(http://3.bp.blogspot.com/-z-hQaMaYi7E/UQ5CyqzrTFI/AAAAAAAANF0/TKUeCUpA81U/s1600/Social-Buttons.png) -174px 0; } .linkedin-but:hover { background: #069 url(http://3.bp.blogspot.com/-z-hQaMaYi7E/UQ5CyqzrTFI/AAAAAAAANF0/TKUeCUpA81U/s1600/Social-Buttons.png) -174px -30px; } .rss-but { background: #fff url(http://3.bp.blogspot.com/-z-hQaMaYi7E/UQ5CyqzrTFI/AAAAAAAANF0/TKUeCUpA81U/s1600/Social-Buttons.png) -204px 0; } .rss-but:hover { background: #f60 url(http://3.bp.blogspot.com/-z-hQaMaYi7E/UQ5CyqzrTFI/AAAAAAAANF0/TKUeCUpA81U/s1600/Social-Buttons.png) -204px -30px; } #searchform { float: right; position: relative; } #searchform input { background: #fff url(http://4.bp.blogspot.com/-0zEJlWA93js/UQ5DVKYXQ9I/AAAAAAAANF8/yip-9EAF6CM/s1600/searchd.png) no-repeat right 50%; border: none; color: #777; float: left; font: 400 12px/30px Open Sans, sans-serif; margin: 0; padding: 0 0 0 10px; width: 200px; height: 30px; } #searchform #search-button { border: none; float: left; } #searchform #s:focus { outline: none; }




            • After that , look for the head code  </head> 


            Paste this code before it  


            <script> jQuery(document).ready(function($) { var ticker = function() { setTimeout(function(){ $(&quot;ul.ticker-list li:first&quot;).animate( {marginTop: &#39;-30px&#39;}, 800, function() { $(this).detach().appendTo(&quot;ul.ticker-list&quot;).removeAttr(&quot;style&quot;); }); ticker(); }, 5000); }; ticker(); }); </script>


            • Now you can save your template !!!!!
            • After saving, go to your layout and add a gadget to your blog
            • Select the  HTML/JavaScript

                                           
              Paste this code  inside it and save ....don't  forget to put the gadget where you want it to be


              <style> @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,700); position:absolute;  @media screen and (max-width: 980px) and (min-width: 600px) { #leader-wrapper { padding: 5px 0; } #leaderboard { padding: 0 10px; width: 748px; } #leader-right, #wallpaper, .ticker-heading, .ticker-date, .middle-160, #bottom-widget, .related-image, #social-box-vert, .breadcrumb, .home-right-category { display: none; } #main-nav, #inner-wrapper { width: 768px; } #main-nav ul { padding: 0 10px; width: 748px; } #main-nav ul li { padding: 11px 14px; } #main-nav ul li a { color: #fff; font: 700 16px/16px &#39;Open Sans Condensed&#39;, sans-serif; text-decoration: none; text-transform: uppercase; } #content { padding: 20px 10px; width: 748px; } #header, #footer-top, #footer-bottom { width: 748px; } #content-top { margin-bottom: 20px; width: 746px; } #ticker { width: 344px; } ul.ticker-list { width: 344px; } #content-social { width: 402px; } #searchform input { width: 150px; } #main { width: 433px; } #main-home { width: 434px; } .full { width: 748px !important; } #post-area { width: 420px; } #author-info { width: 400px; } #author-desc { width: 324px; } #related-posts { margin: 40px 0 0; width: 420px; } #related-posts ul, #related-posts ul li { display: block; } #related-posts ul li { margin: 5px 0; width: 100%; height: auto; } .related-small { display: block; } #home-left { margin-right: 0; padding-right: 13px; } #home-right { border-right: none; margin-left: 14px; padding-right: 0; width: 300px; } .middle-side { display: block; } #social-box { width: 420px; display: inline; } .post-image { width: 206px; height: 230px; } .post-image img { width: 200px !important; height: 224px !important; } .archive-text { width: 298px; } #sidebar-home-wrapper { width: 314px; } .side-home { margin-left: 14px; } #footer-top-wrapper { padding: 20px 0; } #footer-top, #footer-bottom { padding: 10px; } #footer-nav1 ul li:last-child { border: 0; } #footer-nav2 ul li:first-child { padding-left: 0; } } </style> <div id='content-top'>   <div id='ticker'>  <span class='ticker-heading'>Don&#39;t miss</span>  <ul class='ticker-list'> <li><a href='http://100computertricks.blogspot.com/2013/08/best-weather-apps-for-smartphones.html'>Best Weather Apps For Smartphones</a><span class='ticker-date'>Check out now!</span></li> <li><a href='http://100computertricks.blogspot.com/2013/08/adding-disqus-comment-widget-to-your.html'>Adding a comment widget to your site </a><span class='ticker-date'>Check out now!</span></li>  <li><a href='http://100computertricks.blogspot.com/2013/08/install-whatsapp-messenger-for-pc-or.html'>Download Whatsapp on your Computer</a><span class='ticker-date'>Check out now!</span></li> </ul>  </div><!--ticker--> <div id='content-social'> <ul>             <li><a alt='Facebook' class='fb-but' href='http://www.facebook.com/100computertech' target='_blank'/></a></li> <li><a alt='Twitter' class='twitter-but' href='http://www.twitter.com/100comtech' target='_blank'/></a></li>                                  <li><a alt='Pinterest' class='pinterest-but' href='http://pinterest.com/100comtech/' target='_blank'/></a></li>           <li><a alt='Google Plus' class='google-but' href='https://plus.google.com/109180225763419238192?prsrc=2' target='_blank'/></a></li>         <li><a alt='YouTube' class='youtube-but' href='/?feature=mhee' target='_blank'/></a></li>              <li><a alt='RSS Feed' class='rss-but' href='http://feeds.feedburner.com/100ComputerTech'/></a></li>  <li>  <div class='search-wrapper'>  <div class='search-box'>   <form action='/search' id='searchform' method='get'>  <input id='q' name='q' onblur='if (this.value == &quot;&quot;) { this.value = &quot;Search site&quot;; }' onfocus='if (this.value == &quot;Search site&quot;) { this.value = &quot;&quot;; }' type='text' value='Search site'/>  <input id='search-button' type='hidden'/> </form>         </div><!--search-box-->         </div><!--search wrapper-->        </li>       </ul>      </div><!--content-social-->                                </div>



              Make your changes in the widget section and save your widget,,,,,, Have fun blogging..!!!!             please share this post to other  fellow bloggers who are interested

                    0 default, disqus:

                    Post a Comment