Make Breakingnews Tricker Responsive By Blogger

Make Breakingnews Tricker Responsive By Blogger

Never visited the site daily news site with niche, certainly never seen it breakingnews anmiasi move alternately shows the title of the latest article on seitus, now it's called the Breaking News Tricker. If you are trying to create a similar niche, about the daily news that he would be crowded if the continue to be updated, there is no harm if put breakingnews tricker that the site looks professional and attractive

Basically, headline breakingnews used as an alternative media to represent the widget recent posts. This widget can also attract visitors to read the latest articles on the blog. Well on this occasion I will share how to create brekingnews tricker-style Minima Premium Colored Fitriyani Arlina work. Want to see the template directly? Please see, if it interests only contact Ms Arlina to buy it.

CHECK DEMO

Make Breakingnews Tricker Responsive By Blogger

1. Login Blogger Dashboard> Template> Edit HTML

2. Put the following code just above the </ head> , but if it already exists on templates simply bypassed.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

3. Then put the following code above ]]> </ b:skin>

/* CSS Breaking News */#breakingnews {margin:15px 0 0 0;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #e6e6e6;}#breakingnews .breakhead {position:absolute;background:none repeat scroll 0 0 #363b40;color:#fff;display:block;float:left;font-family:'Roboto Condensed';font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px;}#adbreakingnews li a {font-family:'Open Sans';font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}#adbreakingnews li a:hover {color:#359bed;}#adbreakingnews {float:left;margin-left:75px;margin-top:6px;}#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}/* CSS Homepage Responsive */@media only screen and (max-width:768px){.img-thumbnail {margin:0 10px 0 0;}}@media only screen and (max-width:640px){#content-wrapper {padding:0;}h2.post-title, h1.post-title, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {font-size:18px;margin:20px 0;clear:both;padding:20px 0 0 0;}.post {padding:15px;}.post-body {margin-bottom:10px;}.post-vinfo {margin-left:0;}.img-thumbnail {width:100%;height:auto;margin:0;}.img-thumbnail img {width:100%;height:auto;}#breakingnews {margin:20px 0 0 0;margin-right:0;}#breakingnews .breakhead {padding:6.5px 14px;}#adbreakingnews {margin-left:50px;}.post .label-info {left:15px;top:15px;}}@media only screen and (max-width:480px){h2.post-title, h1.post-title, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {font-size:16px;}.post-body, .comment-info {display:none!important;visibility:hidden;width:0;height:0;}#breakingnews {display:none;}}

4. Find the code </body> , put the following code right above.

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="URL BLOG ANDA",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

5. Now the final step is to put Breakingnews itself, going where? Above header, above posts, above the footer, below the footer, below the navigation menu, or other. Now I will give an example to put it above the header.
6. Find the code like below, use Ctrl + F > Type Header to look for it.

* Once you find, put the following code right above.

<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'></i></span>
<div id='adbreakingnews'>Loading...</div></div>

So how to make breakingnews ala minimacolored Premium belongs Ma'am Arlina Fitriyani, using this feature I hope your blog is getting bertamah pageview. May be useful
http://www.teoridesain.com/2016/02/membuat-breakingnews-tricker-responsive-pada-blogger.html