[Templates] Purez Responsive Magazine Blogger Template Premium Free - Chia sẻ Template Purez bản premium

06:04 |


RinBlog hôm nay xin chia sẻ tới các bạn một template cực đẹp và chuẩn SEO của MKR, template này được bán trên themeforest là 20$ với hơn 20 lần mua. Code template RinBlog chia sẻ hôm nay là code chuẩn được share từ một người bạn đã mua trực tiếp code trên themeforest nên các bạn hoàn toàn yên tâm là sẽ đạt được 100% tất cả những tính năng đặc sắc của bản gốc như demo.

Tất cả hướng dẫn đều nằm trong thư mục Documentations trong bản download, việc thêm widget, thay hình nền...v..v, đều rất dễ thực hiện.

Trong bản tải về có 4 file XML tương đương với 4 phiên bản bố cục khác nhau, các bạn có thể thử từng kiểu để tìm được kiểu ưng ý nhất.


DOWNLOAD

Đừng quên nhấn like và chia sẻ nha! :)
Read more…

[Template] Sahifa Responsive Blogger Templates v5.0 - Giao diện Sahifa v5.0 Phát triển riêng cho blogspot.

15:52 |

Như các bạn đã biết thì Sahifa là một theme cực hot của wordpress, nhưng đáng tiếc là chưa có ai phát triển template này cho blogspot. Vì lý do trên, RinBlog quyết định sẽ phát triển một theme có tính năng và hình thức giống tới 98% so với phiên bản sahifa của bên wordpress.
Template này RinBlog sẽ đặt tên  là Sahifa V5.0 cho khác với bản gốc. Template này được RinBlog phát triển từ một template rất hot của Blogspot, đó là Widgetly. Vì đây là bản phát triển thêm nên Sahifa v5.0 vẫn giữ được những ưu điểm tuyệt vời từ template Widgetly

Sahifa 5.0 có gì hot?

  • Giao diện responsive thân thiện, code tối ưu, trang load nhanh, hiệu ứng đẹp.
  • Giao diện chỉ có 2 cột đẹp, thân thiện hơn, SEO tốt hơn.
  • Bố cục được chia theo dạng tin tức, từng block, widget đẹp, rõ ràng.
  • Footer tùy chỉnh 3 cột cực đẹp và hợp thời trang.
  • Dễ dàng tùy chỉnh màu sắc, font chữ, hình nền...v..v
Để xem cụ thể hơn các bạn xem demo tại đây


Đối với giao diện này, để thêm nội dung cho mỗi widget riêng ở cột bên trái trên trang chủ các bạn chú ý làm như sau:

Không nên xóa những widget có sẵn trong template (cột trái trên trang chủ) mà các bạn tiến hành thêm hoặc thay đổi nội dung của chúng cho hợp lý bằng cách nhấp vào chỉnh sửa widget thay nội dung của widget đó bằng một hoặc nhiều nhãn để hiển thị bài đăng trong nhãn. Làm như sau:

Vào bảng điều khiển blogger >> Bố cục >> Chọn chỉnh sửa 5 tiện ích HTML có sẵn ở cột bên trái.

Clean-5: Là widget hiện hộp bài viết theo dạng trình chiếu, chỉ cần thêm label vào phần nội dung là được.
Các widget bên dưới cũng làm tương tự để hiện thị bài trong 1 nhãn riêng biệt

Còn nếu các bạn muốn hiện bài viết mới nhất thì chỉ việc tạo 1 label là New hoặc Feature rồi thêm label đó vào phần nội dung. Sau đó các bạn viết bài chỉ cần thêm Label New là bài đó sẽ hiện trên widget mà các bạn thêm label trước đó.


 Các bạn tải tại đây:


Template này do RinViệt phát triển nên nếu các bạn có thể thì hãy giữ một liên kết nhỏ tới Rinviet.com nha. Cái đó coi như công sức mình ngồi sửa code ý mà. ^^

Read more…

[Templates] Codify Blogger Template - Giao diện Codify cho blogspot cực đẹp, bản chuẩn.

09:15 |

DEMO

Sau một hồi lâu ngồi giải mã những code hex bản quyền của template codify này thì RinBlog quyết định sẽ chia sẻ cho các bạn template này. Vì đây là bản được RinBlog giải mã cũng như phát triển từ bản free nên RinBlog sẽ hạn chế chia sẻ, không chia sẻ trực tiếp nữa, mà sẽ chia sẻ qua email. Nếu các bạn muốn được RinBlog chia sẻ thì vui lòng để lại email dưới comment, RinBlog sẽ gửi giao diện này cho các bạn trong vòng 24h.

Điểm khác biệt giữa bản Free bình thường và bản được RinBlog giải mã:

  • Giải mã toàn bộ code copyright ở header và footer để các bạn dễ dàng chỉnh sửa
  • Giải mã và đưa toàn bộ code css từ file mã hóa trên host nguồn vào thẳng template
  • Biến tấu một chút để dễ chỉnh sửa hơn so với bản free
Vì có một chút công sức của mình trong bản này nên mình sẽ rất vui nếu các bạn đặt một textlink về rinviet.com. Còn nếu không muốn thì cũng không sao :)

Một chú ý nho nhỏ là với 3 widget ở phía footer thì các bạn phải tiến hành thêm tiện ích vào thì mới đẩy dòng copyright xuống được nhé. Cứ thêm 3 widget bất kỳ vào là chuẩn như demo luôn.

Hi vọng các bạn sẽ thích template này, vì theo mình được biết thì template này chưa hề được giải mã và chia sẻ, các bản chia sẻ hầu hết là bản chia sẻ free nguyên thủy còn nguyên code mã hóa. Bạn nào cần thì để địa chỉ email ở phần comment nha :)

Read more…

[Templates] Team Blog Magazine Responsive Blogger Template - Giao diện tin tức đẹp cho blogspot

08:38 |

Hôm nay RinBlog xin gửi đến các bạn một template cực đẹp được phát triển cho trang tin tức từ Uong Jowo. Với bố cục rõ ràng, thân thiện với hầu hết các thiết bị hỗ trợ duyệt web, Desktop, Laptop, Mobile...
Để sử dụng template này các bạn vui lòng giữ link ở footer của Uong Jowo để tôn trọng bản quyền của người thiết kế.

DEMO

DOWNLOAD

Xem thêm những template đẹp khác cho Blogspot tại đây
Read more…

[Templates] Skill Responsive Template for Blogger - Giao diện blog cá nhân cho blogger.

03:25 |

RinBlog xin chia sẻ với các bạn một template đẹp dành cho blogger của tác giả ProBtemplates.com.

DEMO

DOWNLOAD

Chúc các bạn thành công.
Read more…

[Templates] Adamz - Responsive Blogger Template V1.3 - Share template RinViệt đang sử dụng

07:58 |

Rinviệt thân tặng các bạn templateAdamz - Responsive Blogger Template version 1.3 mà Rin việt đang sử dụng. Đây là một trong những Responsive template cho blogger hàng đầu hiện nay và được rất nhiều blogger sử dụng vì sự tiện lợi, đơn giản và đẹp.

DEMO

DOWNLOAD

Để tùy chỉnh và làm đẹp thêm cho template này các bạn có thể xem thêm những bài hướng dẫn khác ở đây.

Chúc các bạn vui vẻ
Read more…

[Templates] Widgetly Responsive Magazine, Template trang tin tức cực đẹp và chuyên nghiệp cho blogspot

12:14 |


Hôm nay rảnh rỗi nên mình lấy cái templates cực chuẩn này của Uong Jowo chia sẻ miễn phí cho các bạn. Điều kiện duy nhất là vui lòng giữ nguyên link của Uong Jowo dưới footer để tôn trọng công sức sáng tạo của anh ấy.

Rinblog cũng đã từng sử dụng qua template này rồi, kết quả cực kỳ vừa ý. Nhưng tiếc là Rinblog không phải trang tin tức nên template này không hợp cho lắm, nhưng nếu site của bạn là site tin tức thì template này là quá chuẩn luôn rồi.

DEMO 

DOWNLOAD BẢN NGUYÊN THỦY CỦA UONG JOWO

DOWNLOAD BẢN CHỉNH SỬA CỦA RINBLOG

HƯỚNG DẪN SỬ DỤNG:

Để sử dụng template này các bạn lưu ý điều sau:

  • Không nên xóa những widget có sẵn trong template (cột giữa) mà các bạn tiến hành thêm hoặc thay đổi nội dung của chúng cho hợp lý bằng cách nhấp vào chỉnh sửa widget thay nội dung của widget đó bằng một hoặc nhiều nhãn để hiển thị bài đăng trong nhãn. Làm như hình sau:

Để hiển thị toàn bộ widget đẹp và chuẩn các bạn copy đoạn code sau rồi thêm vào trong templates của bạn.

.pix_uj li .uj_thumb{width:70px;height:70px;overflow:hidden;} @media only screen and (max-width:1219px){ #wrapper{width:986px;} .container,#footer-widget-area{width:944px;} .header-content{margin:0;padding:25px 21px} #sidebar-narrow,#top{display:none} #sidebar{float:right;width:300px;} #logo{float:left;width:270px;} } @media only screen and (max-width:985px) and (min-width: 768px) { #wrapper{width:750px;}#logo,#logo img{float:left;width:200px;} .container,#footer-widget-area,#main-content{width:730px;} #content,#uj-slider,.flexslider,.uj-box,.pix_uj .box-content,.UJ-list li,.UJ-list li:first-child,.inde-uj li,.uj-box li:first-child .uj_thumb{width:410px;float:left;} .scroler li .uj_thumb .overlay,.uj-box li:first-child .overlay{width:410px;height:160px} #content .post-body img{max-width:360px;} .uj-box.cols-2,.uj-box.cols-2 li,.uj-box.cols-2 li:first-child{float:left;width:200px;margin-right:0} .uj-box.cols-2 li:first-child .overlay{width:200px;height:160px} .uj-box.cols-2 .uj_thumb .overlay:hover a.zoom{left:15%} .uj-box.cols-2 li:first-child .uj_thumb .overlay:hover a.post-link{right:15%} .cols-2.last-column{float:right;} .header-content{margin:0;padding:25px 15px} .header-content{background:transparent} .top-nav .container{position:relative} #sidebar{padding:0 0 0 4px;float:right;width:300px;} } /* Phone : 480px */ @media only screen and (max-width: 767px) and (min-width: 480px){ #wrapper{max-width:430px;width:100%!important} #topcontrol , .ads-top,#main-nav, .ads-bottom,.home-ads, .ads-post, .today-date, .slider-caption p{display:none !important;} header {width:420px !important;} #mobilenav{display:inline-block;border:1px solid #ccc;padding:2px 5px;} #navi.suball {background:#333;} .container,#main-content , .content , #content{width:420px !important; } .flexslider , .flexslider .slides > li ,.flexslider .slides img{height:250px !important;} .slider-caption h2 a, .slider-caption h2{ font-size:22px;} .single-post-thumb img { max-height:210px; } .slider-caption{width:auto;} .logo{float:none;text-align:center;} #uj-slider,.uj-box,#footer-widget-area,.flexslider,.uj_slider_item{float:none;width:400px;} #uj-slider{margin:0 auto 20px auto}.uj-box,.uj-box.cols-2,.pix_uj{margin-left:10px;} #top{display:none} .uj-box.cols-2,.uj-box.cols-2 .widget-content,.uj-box.cols-2 li,.uj-box.cols-2 li:first-child,.uj-box,.pix_uj .box-content,.UJ-list li,.UJ-list li:first-child,.inde-uj li,.uj-box li:first-child .uj_thumb,#tabbed-widget{float:none;width:400px;} .uj-box.cols-2 .widget>h2{width:400px;} .pix_uj .box-content ul li:first-child{width:400px;float:none;} .pix_uj .box-content ul li:first-child .uj_thumb,.pix_uj .box-content ul li .uj_thumb{width:100%;float:left;} .pix_uj .box-content ul li{width:31%;float:left;} .uj-box.cols-2,.uj-box.cols-2 li,.uj-box.cols-2 li:first-child{float:left;width:400px;margin-right:0} .scroler li .uj_thumb .overlay,.uj-box li:first-child .overlay{width:400px;height:160px} #sidebar {width:400px;float:left;} #PopularPosts2 ul{width:380px;float:left;} #adsentop,#righttop{display:none !important;} } /* Phone : 320px */ @media only screen and (max-width:479px){ #topcontrol,.today-date,#main-nav,.slider-caption p,#cats-tabs-box,a.random-article{display:none;} #wrapper{max-width:297px;width:100%!important} .social-networks{display:none;} #mobilenav{display:inline-block;border:1px solid #ccc;padding:2px 5px;} #navi.suball {background:#333;} .container,#main-content,#content, #uj-slider,.uj-box,.flexslider{margin:0 auto 20px auto;width:277px;} #footer-widget-area{margin:0 auto;width:277px;} .uj-box.cols-2,.uj-box.cols-2 li,.uj-box.cols-2 li:first-child,.uj-box,.pix_uj .box-content,.UJ-list li,.UJ-list li:first-child,.inde-uj li,.uj-box li:first-child .uj_thumb{float:left;width:277px;} .pix_uj .box-content ul li:first-child{width:277px;float:left;} footer{padding:20px 0} #sidebar{padding:0 0 0 0;float:left;width:277px;border-left:0;} .fb-like-box{float:left;} #tabbed-widget,#sidebar .widget{float:left;width:277px;} #tabbed-widget .tabs-wrap li{width:90%;float:left;} #PopularPosts2 ul{width:250px;float:left;} #content .post-body img{max-width:250px;} #logo{max-width:150px;float:left;clear:both;} #logo img{width:150px;} #adsentop,#righttop{display:none !important;} #sidebar-top1 img{max-width:270px;} } @media only screen and (max-width:319px) { #wrapper{width:220px;} .head_brnews .breaking-news{display:none} #content {float:left;width:220px;} #sidebar{padding:0 0 0 0;float:left;width:220px;} }

Trong template các bạn tìm đoạn: <div id='sidebar' style='width:100%;max-width:300px;float:right;'> Và thay bằng đoạn: <div id='sidebar'>

Tìm tới trước đoạn <footer thêm đoạn code sau vào: <div class='clear'/>. Ví dụ:

<div class='clear'/>

<footer itemscope='' itemtype='http://schema.org/WPFooter'>
 
Nếu nút tiến và lùi ở phần hộp bài viết Slider  không hoạt động ở trình duyệt Chrome thì các bạn làm như sau:

Trong template các bạn tìm tới đoạn code:


#uj-slider{.........
          .. cho tới...
.uj_slider .flex-direction-nav .flex-prev{margin-right:41px}
 Các bạn thay bằng đoạn code sau:

#uj-slider{position:relative;max-width:620px;width:100%} #uj-slider .widget h2,.tabs-wrap .widget h2{display:none} .uj_slider{margin-bottom:2px;position:relative;margin-bottom:30px;overflow:hidden;background-color:#fff} .uj_slider_wrap{position:relative;height:350px;overflow:hidden;margin-bottom:3px;padding:0} .uj_slider_item{max-width:620px;height:340px;overflow:hidden;width:100%} .uj_slider .slides img{width:100%;height:auto;} .uj_slider .slider_caption{position:absolute;padding:10px 15px;background:#cd2122;background:rgba(205,33,34,0.8);left:0;bottom:100px;color:#f5f5f5;margin-bottom:12px;z-index:99} .uj_slider .slider_caption:after{content:"";height:3px;width:100%;background:#cd2122;background:rgba(205,33,34,0.8);overflow:hidden;display:block;left:0;position:absolute;bottom:-4px} .uj_slider_wrap .uj_slider_item{display:none;position:relative} .flex-direction-nav {*height: 0;} .flex-direction-nav {margin: 0; padding: 0; list-style: none;} .uj_slider .slider_caption h3{margin-bottom:0;font-size:20px} .uj_slider .slider_caption h3 a{font-family:'Oswald',serif;color:#fff} .uj_slider .slider_caption h3 a:hover{color:#000} .uj_slider p.caption{position:absolute;background:#000;background:rgba(0,0,0,0.7);padding:7px 14px;bottom:39px;width:385px;color:#fff;font-family:tahoma;font-size:13px;line-height:17px;z-index:99} .uj_slider p.caption .post-meta{display:none} .uj_slider .flex-direction-nav a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiffJk1decG3UE7Xb3fCDk5t7foi88trz1SN93U8702lDlMSzEMn4Y-dU3jpo_WXOw_CGu-bRWb0NkzLKNeDDoICTZsn-_0bLJtZ4WrOQlz0QuPiUnJbu0SJrXt6AhgvQlpi2KIjVbHX-Y/s1600/bg_direction_navs.png) no-repeat;font-size:0;width:40px;height:40px;display:block; position:absolute;bottom:5px;cursor: pointer;right:5px;z-index:99} .uj_slider .flex-direction-nav .flex-next {background-position:100% 0;z-index:99} .uj_slider .flex-direction-nav .flex-prev {margin-right:41px;z-index:99} 

Hiện mình có 2 bản, 1 bản là nguyên thủy của Uong Jowo còn một bản mình đã chỉnh sửa thêm thắt rồi nên nếu các bạn ngại sửa thì có thể dùng bản của mình. Bản của mình thì chỉ thêm đoạn code thay màu cho link thôi. Nếu các bạn không thích có thể xóa nó đi. Trong file templates của Rinblog là rin.txt tìm đoạn:

a:link {text-decoration:none;}    /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;}   /* mouse over link */
a:hover {color:#000000;}   /* mouse over link */
a:active {text-decoration:underline;}  /* selected link */
Chỉnh sửa hay xóa đều được.

Chúc các bạn thành công.
Read more…

[Templates] Hot Goss Template Blogspot, Giao diện tin tức Hot goss cho blogspot

01:07 |
Theme Hot Goss là một template siêu đẹp cho blog tin tức trên Blogger. Template được chỉnh sửa và convert cho Blogspot bởi : Uong Jowo.



DOWNLOAD

Read more…

[Templates] Best News Blogger Templates, Giao diện tin tức siêu đẹp cho Blogspot

00:45 |
Best New là một giao diện trang tin tức, báo chí cực đẹp cho Blogspot. Template được thiết kế bởi: Dalih. Chỉnh sửa và Convert cho blogspot bởi Uong Jowo.



DEMO

DOWNLOAD


Read more…

[Templates] Book Store Template Blogspot, Giao diện trang web bán sách online cho blogspot.

00:37 |
Một template đẹp và hoàn hảo cho những webmaster muốn phát triển một trang web bán sách online.
Giao diện được thiết kế bởi: Hermes, Chỉnh sửa và convert cho blogspot bởi Uong Jowo.





Hướng dẫn cài đặt, chỉnh sửa:

  1. Vào Dashboard sau đó chọn "Settings".
  2. Chọn "Formatting". 
  3. Tìm tới hộp: "Post Template".
  4. Copy và dán đoạn code này vào :


<div> upload image
</div>

<div class="product-shop">
<div class="simpleCart_shelfItem">
<span class="item_price">$99.99 </span>          
  <h2 class="item_name">Book Edition</h2>

 
<p><input type="text" class="item_quantity" value="1" />
  <a href="javascript:;" class="item_add" ></a></p>
</div></div>
<br></br>
<p> Description here...           
</p>

  5. Lưu lại và thưởng thức.
Read more…

[Chia sẻ] 2 Template blogger đẹp nhất tháng 11 năm 2013

09:32 |
[Chia sẻ] 2 Template blogger đẹp nhất tháng 11 năm 2013
1. Pure magazine V1 




2.  Press Magajah







Read more…

[Blogger Tips] Hướng dẫn thêm chức năng Floating Social chia sẻ vào Blogspot

02:40 |
Đây là một chức năng rất phổ biến và hữu dụng đối với dân làm Blog cũng như website. Bạn có thể gặp chúng ở bất cứ trang blog nổi tiếng nào trên mạng. Việc thêm chức năng này vào Blog sẽ giúp bạn tăng thêm rất nhiều sự quan tâm từ những mạng chia sẻ và chúng cũng góp phần hết sức quan trọng trong việc đưa Blog của bạn đến với người đọc một cách nhanh nhất. Trong bài này mình sẽ hướng dẫn các bạn một bước hết sức đơn giản để thêm chức năng này vào blog của các bạn. Những mạng chia sẻ có trong chức năng này là Facebook, Twitter, G+, Digg và dĩ nhiên bạn có thể thêm nhiều hơn chức năng và mạng xã hội khác nếu bạn muốn.

Để làm được điều đó thì bạn vui lòng thực hiện theo những bước đơn giản sau:

Bước 1:  Bạn vào mục Bố cục/ layout
Bước 2: Chọn thêm một tiện ích/ widget ở một vị trí bất kỳ
Bước 3: Bạn chọn loại tiện ích là HTML/ Javascript
Bước 4: Bạn copy đoạn code sau vào ô trống trong cửa sổ widget mở ra.

<!-- floating share bar Start helplogger.blogspot.com--> <style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-721px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Get this from Helpblogger.com">
<div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div>
<br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='mrbebibo' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br /><div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone></div><br/><a href='http://feeds.feedburner.com/doanthieuda' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNaqim8xDx0oxk-CnaFNK_T6um7QPSFZXzn9VvGNPeEaR1okxAy5XUPRqb7NVIiE0i3xKc3jZCBLKmiSpL3i9MqWj6kFZNt8FN3ViCg6AvuuP_NGwtd-SA-8epn1rGSwHYNz4YK-SFTlPi/s1600/icon_rss_reader.png'/></a><div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://doanthieuda.blogspot.com/">widget</a></div><!-- Do not remove this link --> </div> <!-- floating share bar End --></div>
Lưu ý:

  • Để chỉnh vị trí trái, phải cho tiện ích phù hợp với blog của bạn, bạn vui lòng chỉnh sửa  đoạn code có màu đỏ sau thẻ margin-left để chỉnh vị trí.
  • Thay thế đoạn code màu tím "mrbebibo" để thay đổi tên toàn khoản twitter của bạn
  • Thay đoạn code màu xanh: http://feeds.feedburner.com/doanthieuda Bằng địa chỉ feed của bạn.
Bước 5: Lưu tiện ích lại và thưởng thức

Bài viết được dịch và đăng lại từ blog: http://helplogger.blogspot.com


Read more…

[Blogger Tips] Hướng dẫn thêm bài viêt liên quan vào blogspot có ảnh Thumbnails

01:59 |
Đây là hướng dẫn rất đơn giản và dễ dàng thực hiện giúp các bạn có thể thêm phần bài viết liên quan vào mỗi bài viết trên blogspot của riêng mình. Bài viết liên quan ở đây được tính là những bài viết có cùng chung nhãn, tag hoặc thư mục. Lợi ích của việc bạn thêm bài viết liên quan sẽ giúp cho độc giả của các bạn có thêm những sự lựa chọn đọc bài viết cùng xu hướng, sở thích của họ trên blog của các bạn. Nhằm tăng thêm sự hứng thú cho người đọc.


Sau đây là 7 bước hết sức đơn giản để bạn có thể làm được điều này. Áp dụng cho tất cả những bạn biết rõ về code hoặc chưa biết gì về code html và css đều có thể làm được.

Bước 1:  Vào trang quản lý blog >> Mẫu >> Chỉnh sửa HTML
Bước 2: Trong trang chỉnh sửa HTML bạn chọn vào chức năng Định Dạng Mẫu
Bước 3:  Bạn bấm (CTRL + F) và tìm đến đoạn code sau:

 </head>
Bước 4: Bạn copy đoạn code ở dưới và chèn vào phía trước đoạn code vừa tìm được, tức là trước thẻ </head>

<!--Related Posts with thumbnails Scripts and Styles Start--><!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 18px;letter-spacing: 2px;font-weight: bold;text-transform: none;color: #5D5D5D;font-family: Arial Narrow;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{border-right: 1px dotted #DDDDDD;color:#5D5D5D;}#related-posts a:hover{color:black;background-color:#EDEDEF;}</style><script type='text/javascript'>var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHH-SIarzNMseLUTJHdBIiXxjZCVzQmjExVt3ye4G5s4_1HqXIKjCFvaHPntMrxALa2zhSbTJrCTgUOOE7xgKY3nbTKSQNEYLzBqrTHak6igOAwCx5l9NMXeAjcpdq55Swvz5kVryxTXUI/s1600/no_image.jpg&quot;;var maxresults=5;var splittercolor=&quot;#DDDDDD&quot;;var relatedpoststitle=&quot;Related Posts&quot;;</script><script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/><!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
 Chú ý:

  • Để đổi hình ảnh mặc định nếu bài viết không có ảnh, bạn đổi URL có màu xanh ở trên

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHH-SIarzNMseLUTJHdBIiXxjZCVzQmjExVt3ye4G5s4_1HqXIKjCFvaHPntMrxALa2zhSbTJrCTgUOOE7xgKY3nbTKSQNEYLzBqrTHak6igOAwCx5l9NMXeAjcpdq55Swvz5kVryxTXUI/s1600/no_image.jpg

  • Để hiển thị số lượng lớn hơn 5 ảnh, bạn thay đổi giá trị 5 thành số bài bạn muốn hiện trong đoạn code sau: "var maxresults=5;
  • Nếu bạn muốn bài liên quan hiện trên trang chủ, bạn hãy xóa tất cả những đoạn code có màu tím ở trên
Bước 5: Bạn tìm tiếp đoạn code sau: 

    <div class='post-footer'>

Bước 6: Bạn chèn đoạn code ở dưới vào trước đoạn thẻ vừa tìm được.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimDHMou89A3kady5vz031geTS5aNU4AvJrsDIEFwMQ5WKYZRBapOwuxAw5K9yrFENrgMFwkU1x2fegunmPpwSzBqFnPMFwkdMaB0zPc906gMBRPzqHRiRDkgB-KQGkLnTI-6CzGmNdHOOe/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
Chú ý:

  • Đổi giá trị 6 thành giá trị khác nếu bạn muốn thay đổi số bài viết hiển thị max-results=6
  •  Nếu bạn muốn bài liên quan hiện trên trang chủ, bạn hãy xóa tất cả những đoạn code có màu tím ở trên

Bước 7:  Lưu mẫu và thưởng thức thành quả.

*Bài viết được dịch từ Blog:http://helplogger.blogspot.com
Read more…

RINVIET NEWS

Copyright © 2011 -2013 . Rin Việt Blog. All Rights Reserved
Thiết Kế Bởi: Rin Việt Team