Home / Blogging / Adding a post ticker widget to your blog site

Adding a post ticker widget to your blog site

Posted by Unknown Kamis, 29 Agustus 2013 0 komentar

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0SFwrGzoCgMuMnDu54uIpUJAS5t9xwNQOJn84xf6iWTjtSv3o5n3txc5dv0zeYnkkixvum9gYek-sn_0EsOZwIepeQ_Ny2_KrpPsgK2sgLXByupRqXWH6t0del3xz-EDOZlEF606rc39/s1600/Social-Buttons.png) 0 0; } .fb-but:hover { background: #3b5997 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0SFwrGzoCgMuMnDu54uIpUJAS5t9xwNQOJn84xf6iWTjtSv3o5n3txc5dv0zeYnkkixvum9gYek-sn_0EsOZwIepeQ_Ny2_KrpPsgK2sgLXByupRqXWH6t0del3xz-EDOZlEF606rc39/s1600/Social-Buttons.png) 0 -30px; } .twitter-but { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0SFwrGzoCgMuMnDu54uIpUJAS5t9xwNQOJn84xf6iWTjtSv3o5n3txc5dv0zeYnkkixvum9gYek-sn_0EsOZwIepeQ_Ny2_KrpPsgK2sgLXByupRqXWH6t0del3xz-EDOZlEF606rc39/s1600/Social-Buttons.png) -30px 0; } .twitter-but:hover { background: #00aced url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0SFwrGzoCgMuMnDu54uIpUJAS5t9xwNQOJn84xf6iWTjtSv3o5n3txc5dv0zeYnkkixvum9gYek-sn_0EsOZwIepeQ_Ny2_KrpPsgK2sgLXByupRqXWH6t0del3xz-EDOZlEF606rc39/s1600/Social-Buttons.png) -30px -30px; } .pinterest-but { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0SFwrGzoCgMuMnDu54uIpUJAS5t9xwNQOJn84xf6iWTjtSv3o5n3txc5dv0zeYnkkixvum9gYek-sn_0EsOZwIepeQ_Ny2_KrpPsgK2sgLXByupRqXWH6t0del3xz-EDOZlEF606rc39/s1600/Social-Buttons.png) -60px 0; } .pinterest-but:hover { background: #cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0SFwrGzoCgMuMnDu54uIpUJAS5t9xwNQOJn84xf6iWTjtSv3o5n3txc5dv0zeYnkkixvum9gYek-sn_0EsOZwIepeQ_Ny2_KrpPsgK2sgLXByupRqXWH6t0del3xz-EDOZlEF606rc39/s1600/Social-Buttons.png) -60px -30px; } .google-but { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0SFwrGzoCgMuMnDu54uIpUJAS5t9xwNQOJn84xf6iWTjtSv3o5n3txc5dv0zeYnkkixvum9gYek-sn_0EsOZwIepeQ_Ny2_KrpPsgK2sgLXByupRqXWH6t0del3xz-EDOZlEF606rc39/s1600/Social-Buttons.png) -90px 0; } .google-but:hover { background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0SFwrGzoCgMuMnDu54uIpUJAS5t9xwNQOJn84xf6iWTjtSv3o5n3txc5dv0zeYnkkixvum9gYek-sn_0EsOZwIepeQ_Ny2_KrpPsgK2sgLXByupRqXWH6t0del3xz-EDOZlEF606rc39/s1600/Social-Buttons.png) -90px -30px; } .youtube-but { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0SFwrGzoCgMuMnDu54uIpUJAS5t9xwNQOJn84xf6iWTjtSv3o5n3txc5dv0zeYnkkixvum9gYek-sn_0EsOZwIepeQ_Ny2_KrpPsgK2sgLXByupRqXWH6t0del3xz-EDOZlEF606rc39/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0SFwrGzoCgMuMnDu54uIpUJAS5t9xwNQOJn84xf6iWTjtSv3o5n3txc5dv0zeYnkkixvum9gYek-sn_0EsOZwIepeQ_Ny2_KrpPsgK2sgLXByupRqXWH6t0del3xz-EDOZlEF606rc39/s1600/Social-Buttons.png) -120px -30px; } .linkedin-but { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0SFwrGzoCgMuMnDu54uIpUJAS5t9xwNQOJn84xf6iWTjtSv3o5n3txc5dv0zeYnkkixvum9gYek-sn_0EsOZwIepeQ_Ny2_KrpPsgK2sgLXByupRqXWH6t0del3xz-EDOZlEF606rc39/s1600/Social-Buttons.png) -174px 0; } .linkedin-but:hover { background: #069 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0SFwrGzoCgMuMnDu54uIpUJAS5t9xwNQOJn84xf6iWTjtSv3o5n3txc5dv0zeYnkkixvum9gYek-sn_0EsOZwIepeQ_Ny2_KrpPsgK2sgLXByupRqXWH6t0del3xz-EDOZlEF606rc39/s1600/Social-Buttons.png) -174px -30px; } .rss-but { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0SFwrGzoCgMuMnDu54uIpUJAS5t9xwNQOJn84xf6iWTjtSv3o5n3txc5dv0zeYnkkixvum9gYek-sn_0EsOZwIepeQ_Ny2_KrpPsgK2sgLXByupRqXWH6t0del3xz-EDOZlEF606rc39/s1600/Social-Buttons.png) -204px 0; } .rss-but:hover { background: #f60 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0SFwrGzoCgMuMnDu54uIpUJAS5t9xwNQOJn84xf6iWTjtSv3o5n3txc5dv0zeYnkkixvum9gYek-sn_0EsOZwIepeQ_Ny2_KrpPsgK2sgLXByupRqXWH6t0del3xz-EDOZlEF606rc39/s1600/Social-Buttons.png) -204px -30px; } #searchform { float: right; position: relative; } #searchform input { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1i6p_ItU7RzaR7VYwxevWaWZmQDiuK0Gl8HV8Xs0HBIQ3MgFZmc89Lv7CRgg4YOt0o3Jt2fIRn_6M_cyw2-gghSQHgjUMyq7912_nqjUV1IypbVW8JCOdtKzm-QrM2ET8tx-31w7nYupz/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(){ $("ul.ticker-list li:first").animate( {marginTop: '-30px'}, 800, function() { $(this).detach().appendTo("ul.ticker-list").removeAttr("style"); }); 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 'Open Sans Condensed', 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'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> <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 == "") { this.value = "Search site"; }' onfocus='if (this.value == "Search site") { this.value = ""; }' type='text' value='Search site'/> <input id='search-button' type='hidden'/> </form> </div> </div> </li> </ul> </div> </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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Adding a post ticker widget to your blog site
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://samsung-fame.blogspot.com/2013/08/adding-post-ticker-widget-to-your-blog.html. Terima kasih sudah singgah membaca artikel ini.