Bài viết mới trượt ngang từ JQuery cho blogspot style 3

Namkna sẽ giới thiệu thêm cho các bạn một tiện ích bài viết mới (Recent post) với hiệu ứng chạy ngang. Tiện ích bao gồm hình ảnh thumbnail và tiêu đề blog.

Dạng này khác với các dạng trước là các bài đăng dàn xếp theo hàng ngang. Tuy nhiên các bạn nên cân nhắc trước khi thực hiện vì sử dụng scrip nên ít hiều ảnh hưởng đến tốc độ load blog của bạn.

Các bạn hãy xem Demo để thất rõ hơn.

Demo for Post

☼ Cách tiến hành:

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

   2- Vào thiết kế

   3- Chọn Chỉnh sửa HTML

   4- Dán đoạn code sau vào trước thẻ đóng ]]></b:skin>..

.bgcontent{background:#efefef; 
height:140px;
width:500px;
}
#rc-content {
padding:4px;
width:500px; 
}
#rc-main {
width:110px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTpQN_KbEIEcAHM_FVoyDENC5tMYnKuVjebiXvHYdJoFxQpoCfLYjwpsULKDU4M-ziAbpXixbO-x-SPnPSPUvSEFq8Lx0HY2y3z5EpGM6EzQFWCXOhsjAZF8505gpJBvXudumplWgv8ntb/h120/main-bg-namkna-blogspot-com.png) repeat-y;
}
#rc-top {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4E81xfXqjEUE6PjQ0I29I5MiI2Z05-uTFGy9vMZnj8TovVMZlXE1x3ogWTXat01SwlQrD63QugpQCnnd0IM4PFgFjNjTAhszgrFyzel-1hUYWsThsXa8vqqW5u5q6AYbJRtYwyq1D_JI/s1600/top-bg-namkna-blogspot-com.png) no-repeat top;
height:3px;
}
#rc-bottom {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5eI-leCw5zgdcf33WEJWjkJKNCkE5hmZwI4wABkEV9Kj4sEiy0mrpaHkr97pylPHkCG3WF8euL1DAGddYde34Fh1CJEvTc69-1qVFXecsAwQxuGmjR02kj0M9sKMByxASaHz6am9Q0c6_/h120/bottom-bg-namkna-blogspot-com.png) no-repeat bottom;
height:3px;
}
.rc-thumbs {
padding:2px 5px 5px 5px;
height:70px;
}
.rc-thumbs IMG {
width:100px; /*độ rộng của ảnh thumbnail*/
height:70px; /*chiều cao của ảnh thumbnail*/
}
.rc-title {
height:48px;
padding:0px 3px 2px 3px;
line-height:1.3em;
font-size:11px;
font-weight:bold;
}
.rc-title a {color:#0000ff;}
.rc-title a:hover {color:#ff0033;}

Trong đó:

• background:#efefef;   là màu nền của tiện ích
• height:140px; là chiều cao cỉa tiện ích
• width:500px; là chiều rộng của tiện ích:

   5-  Bấm Lưu Mẫu  (save template) lại.

   6- Vào Phần Tử trang - Chọn Thêm Tiện ích - Thêm một HTML/Javarscip và dán đoạn code bên dưới vào:

<div style="font-weight:bold; border: 2px #30a1db solid; padding:5px; text-align:center; background:#FFF380;">Thủ thuật Blofspor</div>
<div class="bgcontent">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSroO3RPROtcJXZMNg7V6KiM0scOvO25ECoUKUgeM0z_u87Ws0E_qt-0KnQ2HKDfd5QnJ_KomNdt7pNTjakCVxJkjkegDKGAnqYpYfb651m9QvoYhuUnWQI56YVfgga-wc3cpuB_tbdFBh/s320/nothumbnail-namkna-blogspot-com.gif";
showRandomImg = true;
zaBold = false;
numposts = 20; 
label = "Blogspot-tips"; 
summaryTitle = 40; 
home_page = "http://namkna.blogspot.com/"; 
</script>

<marquee align="center" direction="left" height="150" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="500">
<script src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/rc_label.js" type="text/javascript">
</script>
</marquee></div>

<p style="float:right;margin:0;padding:3px">Xem tất cả<a href="http://namkna.blogspot.com/search/label/Blogspot-tips?&max-results=5"> Thủ thuật Blogspot &#187;</a></p>

Trong đó

• numposts = 20;    số bài trình diễn trong tiện ích
  label = "Blogspot-tips";   thay thành tên nhãn của blog bạn
  summaryTitle = 40;   số ký tự của tiêu đề bài viết
  home_page = "http://namkna.blogspot.com/";  Thay thành URL địa chỉ blog của bạn.

   7-  Bấm Lưu Mẫu  (save template) lại.

Chúc thành công!

Namkna