Tạo breaking News ở bên phải đẹp cho blogger

Trước khi bạn bắt đầu, bạn nên chắc chắn rằng blog của bạn đã phông chữ Arimo và PT sant Norrow, nếu không, hãy giữ cho hai phông chữ dưới đây ngay bên dưới, nếu nó đã tồn tại xin vui lòng bỏ qua bước này.

Trước tiên phải thêm 2 đoạn code này. Nếu blog các bạn có rồi thì thôi

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic' rel='stylesheet' type='text/css'/>

Tiếp lưu CSS sau phía trên ]]></b:skin> và </style>

#kislidingbox{background:#fff;border:1px solid #333;transition:all .3s ease-in;width:360px;height:143px;position:fixed;overflow:hidden;border:none;right:-380px;z-index:9999;text-align:left!important;letter-spacing:0;box-shadow: -3px 4px 16px -12px rgba(59,47,59,1);}
.kislidingbox-title{background:#392828;border-bottom:4px solid #2C7698;padding-bottom:10px;color:#fff;display:block;height:30px;width:100%;font:bold 24px PT Sans Narrow;padding-right:25px;text-transform:uppercase;}
.kislidingbox-title span a{float:right;height:40px;width:25px;}
a#kislidingbox-close, a#kislidingbox-close {margin-top:-4px;margin-right:15px;position:relative;}
.kislidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}
.kislidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}
.kislidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}
.kislidingbox-container > div{border:none;height:40px;margin:3px;padding:10px;}
.kislidingbox-container > div > span {font-size:14px;}
.kislidingbox-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc;}
.show{bottom:80px;}
.hide{bottom:-145px;}
#sliding-tab{margin-top:-71px;}
#random-posts img{float:left;margin-right:5px;
width:110px;height:65px;background:#F5F5F5;padding:2px;transition:all 400ms ease-in-out;}
#random-posts img:hover{opacity: 0.7;transition:all 400ms ease-in-out;}
ul#random-posts {list-style-type:none;padding:0px;}
#random-posts a {font:16px Arimo;color:#333;padding:0px auto 5px;}
#random-posts a:hover {color:#0E1669;text-decoration:underline;}
.rp-snippet {font-size:0px;background:none;padding:5px;margin-right:8px;}
#random-posts span {}
.rp-info {font:12px Arimo;color:#999;margin-top:4px}
#random-posts li {margin-bottom:5px;border-bottom:1px solid #EEEEEE;padding:4px;}
#BounceToTop{float:right;margin-top:8px;margin-right:-10px; cursor:pointer;display:none;position:relative;}

Tiếp theo là Javascript ngay trên </head>

<script type='text/javascript'>
$(window).scroll(function(){
 if ($(this).scrollTop() &gt; 500) {
 $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;0px&#39;});
 } else {
 $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;-380px&#39;});
 }
 });
 
$(document).ready(function(){
 var kislidingbox = $(&#39;#kislidingbox&#39;);
 var closed = $(&#39;#kislidingbox-close&#39;);
 var minimize = $(&#39;#kislidingbox-minimize&#39;);
 var maximize = $(&#39;#kislidingbox-maximize&#39;);
 
 maximize.hide();
 
 closed.click(function(){
 kislidingbox.css({&#39;right&#39;:&#39;-380px&#39;});
 kislidingbox.fadeOut(&#39;fold&#39;);
 })
 minimize.click(function(){
 kislidingbox.toggle()(&#39;fold&#39;);
 $(this).fold();
 maximize.show();
 })
 maximize.click(function(){
 kislidingbox.toggle()(&#39;fold&#39;);
 $(this).fold();
 minimize.show();
 })
});
</script>

Lưu mã bên dưới ngày phía trên </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='show' id='kislidingbox'>
 <div class='kislidingbox-title kislidingbox-www'>
<span style='float:left;margin:6px 0 0 15px;'><span style='color:#D0F639;'>Berita</span> Rekomendasi</span>
 <span><a href='javascript:void(0);' id='kislidingbox-close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7-sHpFKKjZzGILkeAn93kAcDKIDBqeuFkt4Ed5js8veBt9c-B941EXBt0jTrFU5zhIGxu_9dBIa0nQ19WAfJvPrv1iR9BdXKXhw96tLY77jQsz56Zyi5R72ywj33BCF47M0TB79fgQG_d/s1600/close-box.gif'/></a></span>
 <span><div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1jLyo6sj-E3YOR426b-ZeECg8aTz9shPBXeJMugmNNESt4GK-vmGh_nCglfXbpHFIF9bu5nvRahev-SrwdK_aDF9v0b-AlkKzLs-esz7EofXZpfwi-utAmwQsfTQj75ZqLjVCZ9r5WQZO/s1600/minim-box.gif'/></div></span></div>
 <div class='kislidingbox-container'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='related-post' id='sliding-tab'/>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=1;
var rdp_snippet_length=60;
var rdp_info=&#39;yes&#39;;
var rdp_comment=&#39;Komentar&#39;;
var rdp_disable=&#39;Comments Disabled&#39;;
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write(&#39;&lt;script type=\&quot;text/javascript\&quot; src=\&quot;/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=totalposts\&quot;&gt;&lt;\/script&gt;&#39;);function getvalue(){for(var i=0;i&lt;rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j&lt;rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'> 
function random_posts(json){for(var i=0;i&lt;rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if(&#39;content&#39;in entry){var rdp_get_snippet=entry.content.$t}else{if(&#39;summary&#39;in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet=&quot;&quot;;}};rdp_get_snippet=rdp_get_snippet.replace(/&lt;[^&gt;]*&gt;/g,&quot;&quot;);if(rdp_get_snippet.length&lt;rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(&quot; &quot;);rdp_snippet=rdp_get_snippet.substring(0,space)+&quot;&amp;#133;&quot;;};for(var j=0;j&lt;entry.link.length;j++){if(&#39;thr$total&#39;in entry){var rdp_commentsNum=entry.thr$total.$t+&#39; &#39;+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel==&#39;alternate&#39;){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if(&#39;media$thumbnail&#39;in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinSoYW9BAiuSUU2AXblhtVYiSAO9EKeGA2pSVH56Mp_EzDmQiovGK0znWA6BIqMpM_6MUbswe1y1YNMa-og2RRpq08d9isGhAR7HuqZEH4ayaOlJtY06b53llIcyHEqqg3AxVnqO-z2f0/s1600/no_thumb.png&quot;}}};document.write(&#39;&lt;li&gt;&#39;);document.write(&#39;&lt;a href=&quot;&#39;+rdp_posturl+&#39;&quot; rel=&quot;nofollow&quot;&gt;&lt;img alt=&quot;&#39;+rdp_posttitle+&#39;&quot; src=&quot;&#39;+rdp_thumb+&#39;&quot;/&gt;&lt;/a&gt;&#39;);document.write(&#39;&lt;div&gt;&lt;a href=&quot;&#39;+rdp_posturl+&#39;&quot; rel=&quot;nofollow&quot; title=&quot;&#39;+rdp_snippet+&#39;&quot;&gt;&#39;+rdp_posttitle+&#39;&lt;/a&gt;&lt;/div&gt;&#39;);if(rdp_info==&#39;yes&#39;){document.write(&#39;&lt;span&gt;&lt;div class=&quot;rp-info&quot;&gt;&#39;+rdp_postdate.substring(8,10)+&#39;/&#39;+rdp_postdate.substring(5,7)+&#39;/&#39;+rdp_postdate.substring(0,4)+&#39; - &#39;+rdp_commentsNum)+&#39;&lt;/div&gt;&lt;/span&gt;&#39;};document.write(&#39;&lt;br/&gt;&lt;div class=&quot;rp-snippet&quot;&gt;&#39;+rdp_snippet+&#39;&lt;/div&gt;&lt;div style=&quot;clear:both&quot;&gt;&lt;/div&gt;&lt;/li&gt;&#39;)}};getvalue();for(var i=0;i&lt;rdp_numposts;i++){document.write(&#39;&lt;script type=\&quot;text/javascript\&quot; src=\&quot;/feeds/posts/default?alt=json-in-script&amp;start-index=&#39;+rdp_current[i]+&#39;&amp;max-results=1&amp;callback=random_posts\&quot;&gt;&lt;\/script&gt;&#39;)};
</script>
</ul>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).fadeIn(); } else { $(&#39;#BounceToTop&#39;).fadeOut(); } });
$(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},2000) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
</b:if> 
</div>
</div>
</b:if>

Chúc các bạn thành công !!!