Tạo Bài viết gần đây hoạt hình cho các blogger với hình thu nhỏ cực đơn giản

Đăng bởi Admin | 12/10/13 | 0 nhận xét

Hãy xem hình bên cạnh...
Để làm được điều này, bạn hãy làm theo các bưới đơn giản sau:

1- Đăng nhập vào Blog

2- Vào mẫu (Template)

3- Chọn Thêm Tiện ích (Add Widget)

4- Chọn  HTML / JavaScript . 


Dán mã sau vào nó:

<a href='http://bit.ly/work24'><img alt='Blogger Widgets' src='https://sites.google.com/site/bdlab12/24work/Blogspot%2BTutorial.png'/></a><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>



<style type="text/css" media="screen">



<!--







#spylist {



overflow:hidden;



margin-top:5px;



padding:0px 0px;



height:350px;



}



#spylist ul{



width:220px;



overflow:hidden;



list-style-type: none;



padding: 0px 0px;



margin:0px 0px;



}



#spylist li {



width:208px;



padding: 5px 5px;



margin:0px 0px 5px 0px;



list-style-type:none;



float:none;



height:70px;



overflow: hidden;



background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwxKfZ5HFzsiICFAoJWK1ymDwLQWFuKg6L-prw6jVdA7qq0ovS-a9xx2-FDSmxFGogieaUg3ZGB_HV8BftrcOXEQk5vBGDTUEP5EZjCbiKTRRphHUodFXp9_hcdRQdtdPRFjsWLotn2mxz/s1600/bdlab-blogspot-com.jpg) repeat-x;



border:1px solid #ddd;



}







#spylist li a {



text-decoration:none;



color:#4B545B;



font-size:11px;



height:18px;



overflow:hidden;



margin:0px 0px;



padding:0px 0px 2px 0px;



}



#spylist li img {



float:left;



margin-right:5px;



background:#EFEFEF;



border:0;



}



.spydate{



overflow:hidden;



font-size:10px;



color:#0284C2;



padding:2px 0px;



margin:1px 0px 0px 0px;



height:15px;



font-family:Tahoma,Arial,verdana, sans-serif;



}







.spycomment{



overflow:hidden;



font-family:Tahoma,Arial,verdana, sans-serif;



font-size:10px;



color:#262B2F;



padding:0px 0px;



margin:0px 0px;



}







-->



</style>







<script language='JavaScript'>







imgr = new Array();







imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjouhODeuDKAd9fPnym_la5nKrvtGyiWQh2vqEeZj2bxmJO2Piwe7hWJ3ydMDmqAa2CWqEp4VW6OpQ-peTv_8kofqYaCESju32dkiYMFrGsh-UMmK8EAvqmqIASoB_u6q3uHb0Vy2JHtD0/s400/noimage.png";







imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjouhODeuDKAd9fPnym_la5nKrvtGyiWQh2vqEeZj2bxmJO2Piwe7hWJ3ydMDmqAa2CWqEp4VW6OpQ-peTv_8kofqYaCESju32dkiYMFrGsh-UMmK8EAvqmqIASoB_u6q3uHb0Vy2JHtD0/s400/noimage.png";







imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjouhODeuDKAd9fPnym_la5nKrvtGyiWQh2vqEeZj2bxmJO2Piwe7hWJ3ydMDmqAa2CWqEp4VW6OpQ-peTv_8kofqYaCESju32dkiYMFrGsh-UMmK8EAvqmqIASoB_u6q3uHb0Vy2JHtD0/s400/noimage.png";







imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjouhODeuDKAd9fPnym_la5nKrvtGyiWQh2vqEeZj2bxmJO2Piwe7hWJ3ydMDmqAa2CWqEp4VW6OpQ-peTv_8kofqYaCESju32dkiYMFrGsh-UMmK8EAvqmqIASoB_u6q3uHb0Vy2JHtD0/s400/noimage.png";







imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjouhODeuDKAd9fPnym_la5nKrvtGyiWQh2vqEeZj2bxmJO2Piwe7hWJ3ydMDmqAa2CWqEp4VW6OpQ-peTv_8kofqYaCESju32dkiYMFrGsh-UMmK8EAvqmqIASoB_u6q3uHb0Vy2JHtD0/s400/noimage.png";



showRandomImg = true;







boxwidth = 255;







cellspacing = 6;







borderColor = "#232c35";







bgTD = "#000000";







thumbwidth = 70;







thumbheight = 70;







fntsize = 12;







acolor = "#666";







aBold = true;







icon = " ";







text = "comments";







showPostDate = true;







summaryPost = 40;







summaryFontsize = 10;







summaryColor = "#666";







icon2 = " ";







numposts = 10;







home_page = "http://24work.blogspot.com/";







limitspy=4



intervalspy=4000







</script>







<div id="spylist">



<script src='http://safir85.ucoz.com/bdlab-blogspot/24work/recent-posts/animated_recent_posts.js' type='text/javascript'></script>



</div>

<span style="font-size:5px;position:absolute;"><a title='Blogger Widget' href="http://24work.blogspot.com" target='_blank'>Blogspot Tutorial</a></span>

Và bây giờ nhấn Save 


Lưu ý: Nếu mẫu của bạn đã có một jquery ( đoạn màu đỏ) thì bạn không cần đặt một lần nữa, chỉ cần sao chép đoạn sau đó.

Đoạn code trên có thể được thay thế theo gơi ý sau:

1. Thay địa chỉ trang chủ: home_page = " http://24work.blogspot.com / "; bằng trang của bạn

2. Phong cách:

 Bạn có thể thay đổi:

chiều rộng:

width : 220px;

width:208px:

tùy chỉnh dựa trên mẫu của bạn, và:

background: # fff url (http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;

hoặc background: # fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwxKfZ5HFzsiICFAoJWK1ymDwLQWFuKg6L-prw6jVdA7qq0ovS-a9xx2-FDSmxFGogieaUg3ZGB_HV8BftrcOXEQk5vBGDTUEP5EZjCbiKTRRphHUodFXp9_hcdRQdtdPRFjsWLotn2mxz/s1600/bdlab-blogspot-com.jpg) repeat-x;

Tùy chỉnh màu sắc của backuground

3. Kích thước hình ảnh

thumbwidth = 70;
thumbheight = 70;

Phù hợp với nhu cầu của bạn

4. Số lượng bài bạn muốn hiển thị là bao nhiêu :

numposts = 10;

Căn cứ vào những gì bạn cần để hiển thị.

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

Xen các mẫu khác TẠI ĐÂY

                                                                                            Nguồn: bdlab.blogspot.com