DEMO
Mình xin giới thiệu với các bạn một mẫu related post có sử dụng thumbnail, ngoài ra nó còn được kết hợp thêm cả nút share nữa nên khá là tiện.
#Thêm CSS
1. Đăng nhập Blogger
2. > Mẫu > Chỉnh sửa HTML
3. > Ctrl + f > tìm thẻ ]]></b:skin>
4. > Dán code dưới vào trên thẻ vừa tìm
#btnt-rp { -moz-background-inline-policy:continuous; background: none repeat scroll 0 0 #F2F2F2; border: 1px solid #CCCCCC; float:left; font-family:arial; font-size:12.2px; margin:0 0 40px ; padding:14px 0 12px 25px; width:550px; height: 220px; display: inline; }
#btnt-rp h3 { color:#000000; font-size:13px; margin-bottom:3px; margin-top:4px; font-weight:bold; }
.hidden { display:none;}
.social-bookmarks { float:left; display: inline; margin:0 20px 0 0; padding-left:0; padding-top:0; text-align:left; width:40%; border-right: 1px solid #CCCCCC; }
ul.blogtipsntricks-social { list-style:none; margin:0;display:inline-block; }
ul.blogtipsntricks-social li { display:inline; float:left; padding:5px; background-repeat:no-repeat; }
ul.blogtipsntricks-social li a { display:block; width:48px; height:48px; position:relative; text-decoration:none; }
ul.blogtipsntricks-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.blogtipsntricks-social li.blogtipsntricks-facebook { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-facebook.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-twitter { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-twitter.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-googlebuzz { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-googlebuzz.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-stumbleupon { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-stumbleupon.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-digg { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-digg.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-delicious { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-delicious.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-linkedin { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-linkedin.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-reddit { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-reddit.png"); }
ul.blogtipsntricks-social li.blogtipsntricks-technorati { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-technorati.png"); }
#blogtipsntricks-cssanime:hover li { opacity:0.2; }
#blogtipsntricks-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#blogtipsntricks-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#blogtipsntricks-cssanime li:hover { opacity:1; }
#blogtipsntricks-cssanime li:hover a strong { opacity:1; top:-10px; }
.related-posts { float:left; margin:0; padding-left:0px; padding-top:0; text-align:left; width:48%; }
ul#related-posts{ font-family:Helvetica,Arial,sans-serif !important; font-size:10px !important; list-style: none !important; padding: 0 !important; text-transform: none !important; }
ul#related-posts li{ float: left !important; height: auto !important; margin:5px 5px !important; padding: 2px 1px 4px !important; }
*html ul#related-posts li{ margin:0 13px !important; }
ul#related-posts li a { -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important; border: 2px solid #FFFFFF !important; display: block !important; height: 72px !important; position: relative !important; width: 72px !important; }
ul#related-posts li a { color: #474C51 !important; text-decoration: none !important; text-shadow: 0 1px 0 #FFFFFF !important; }
ul#related-posts li .overlay { height: 66px !important; line-height: 14px !important; padding:6px 0 0 6px !important; position: absolute !important; width: 66px !important; z-index: 10 !important; }
ul#related-posts li a:hover .overlay { background: #fff !important; display: block !important; opacity:0.9 !important; }
ul#related-posts li img { bottom: 0 !important; padding:0px !important; }
ul#related-posts li a:hover { -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important; }
#Thêm HTML
1. > Tìm 1 trong 5 thẻ ở bên dưới, bạn tìm với thẻ nào cũng được. Thông thường, 5 thẻ dưới xuất hiện 2 lần trong template của các bạn và chúng ta quan tâm tới đoạn thứ 2 tìm được.
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
<div class='post-footer-line post-footer-line-4'/>
2. > Dán code dưới vào dưới thẻ vừa tìm
<!--start related posts code Info : http://www.blogtipsntricks.com--> <b:if cond='data:blog.pageType == "item"'> <div id='btnt-rp'> <div class='social-bookmarks'> <h3>What's Next?</h3> <ul class='blogtipsntricks-social' id='blogtipsntricks-cssanime'> <li class='blogtipsntricks-facebook'> <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a> </li> <li class='blogtipsntricks-twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a> </li> <li class='blogtipsntricks-googlebuzz'> <a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a> </li> <li class='blogtipsntricks-stumbleupon'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a> </li> <li class='blogtipsntricks-digg'> <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a> </li> <li class='blogtipsntricks-delicious'> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a> </li> <li class='blogtipsntricks-linkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a> </li> <li class='blogtipsntricks-reddit'> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a> </li> <li class='blogtipsntricks-technorati'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a> </li> </ul> </div> <div class='related-posts'> <h3>Other Recommended Posts</h3> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJiSDdGFWbbsbN88IOptjm1b2qIfAlv8Kb_AQ7gXGPhacWjLuPqLK6nPt-PwUEGh_UVyIpU1Qi3e70zfaNJbBV9jD0uNfMB55bBpvOmIjerVzfx6Vlxfi9lKo21sVroh2k733nYQYF2DmJ/"; var maxresults=6; </script> <script src='http://yourjavascript.com/20110210123/related_post_with_hover.txt.js' type='text/javascript'/> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div> </div> </b:if> <!--end related posts code Info : http://www.blogtipsntricks.com-->
3. > Save
Comments
Post a Comment
» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.