1. As usually please login to blogger use your google account, select blog > Template > Edit HTML. Add this code before ]]></b:skin> or </style>
/* CSS News Ticker */
.ticker-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #3cc091}
.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif}
.ticker-wrap>span>a{color:#222;text-decoration:none}
#ticker{height:45px;overflow:hidden;background:#fefefe;text-align:left}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:45px;white-space:nowrap}
#ticker ul li img{float:left;width:35px;height:35px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}
#ticker ul li h3 a{color:#333;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:400 13px 'roboto',sans-serif;line-height:20px!important;color:#999}
Edit font, color, etc
2. Then add this code before </body> :
3. After that add this markup between tag <body> and tag </body>
4. After all of these steps followed, save template. Refresh your website.
5. End
Thanks for your attention. :)
2. Then add this code before </body> :
3. After that add this markup between tag <body> and tag </body>
<div class="ticker-wrap" data-domain="YOURWEBSITE.blogspot.com">
<div id="ticker">
</div>
</div>
4. After all of these steps followed, save template. Refresh your website.
5. End
Thanks for your attention. :)
0 Comment to "How to Add Breaking News Widget on Blog"
Post a Comment