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

 Ngày : Thứ Hai, 13 tháng 10, 2014  

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 <head>, nếu nó đã tồn tại xin vui lòng bỏ qua bước này.
<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></ 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='http://3.bp.blogspot.com/-BblN9ukdGEA/UktQsar57OI/AAAAAAAAM3U/u15wgq4NDOY/s1600/close-box.gif'/></a></span>
 <span><div id='BounceToTop'><img alt='Back to top' src='http://4.bp.blogspot.com/-AJMCZjkwv-g/UktQs9KFgMI/AAAAAAAAM3c/2ORanXC0rVc/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;http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/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 !!!
Tạo breaking News ở bên phải đẹp cho blogger 4.5 5 Hùng Coder Thứ Hai, 13 tháng 10, 2014 Tạo breaking News ở bên phải đẹp cho blogger,bài đăng cùng chủ đề,thủ thuật blog,code html,css,javascript,tùy biến blogger,thủ thuật đơn giản 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...





1 nhận xét:

- Không bình luận thô tục.
- Không chia sẽ link có nội dung khiêu khích, bạo lực, chống đối nhà nước.
- Không chửi bây, khiêu khích lẫn nhau trên HÙNG CODER
+ Tôi mong các bạn có thể thực hiện tốt 3 điều trên. Nếu bạn phát hiện ai có hành vi vi phạm, xin hãy báo với chúng tôi qua địa chỉ FACEBOOK ở ĐÂY. Thân!