Hiển thị các bài đăng có nhãn widget. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn widget. Hiển thị tất cả bài đăng

Thứ Năm, 22 tháng 11, 2012

Tạo tab nội dung đơn giản với Jquery

Tab menu giúp tiết kiệm không gian trên trang web, làm cho blog của bạn trông gọn gàng và chuyên nghiệp hơn. Có nhiều phương pháp để làm một tab nội dung ở sidebar, ở đây mình giới thiệu một cách đơn giản nhất, đó là sử dụng Jquery.


Tìm trong template đoạn mã sau: <div id='sidebar-wrapper'>
Chèn ngay bên dưới nó:

<style type='text/css'>
ul.tabs-widget{padding:0}
.tabs-widget li{margin:0 10px 10px 0;background:#fff;float:left;list-style-type:none;display:block;height:30px;line-height:30px;width:60px;border:4px solid #3c5670;text-align:center}
.tabs-widget li a{display:block;color:#3c5670;font-size:14px;text-decoration:none}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#ff8053;color:#fff}
#sidebartab1 h2, #sidebartab2 h2, #sidebartab3 h2{display:none}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function(){$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);$(this).addClass(&quot;tabs-widget-current&quot;);$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();var activeTab=$(this).attr(&quot;href&quot;);$(activeTab).fadeIn();return false;});});
</script>

<h2><ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Tab 1</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tab 2</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Tab 3</a></li>
</ul></h2>
<div class='clear'/>

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes'/> 
</div> 

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes'/> 
</div> 

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes'/> 
</div>

Các dòng màu xanh đỏ ở trên bạn có thể sửa lại cho phù hợp với blog của mình. Vậy là xong, tiếp theo bạn chỉ việc vào phần thiết kế rồi add tiện ích cho từng tab:


Hy vọng thủ thuật đơn giản này có ích cho blog của bạn.
Người đăng: vào lúc Không có nhận xét nào:
Nhãn: , ,

Form đăng nhập cho Blogspot

Bài viết này sẽ hướng dẫn bạn làm một form đăng nhập (Login Form) trên blog với phong cách của Wordpress. Như vậy sẽ tiết kiệm thời gian cho độc giả khi họ muốn để lại nhận xét kèm avatar trên blog của bạn mà quên chưa đăng nhập, thay vì phải gõ địa chỉ trang chủ của Blogger.






Chèn đoạn CSS sau phía trên thẻ </b:skin> trong template:
#slide-panel{background-color:#000;border-bottom:2px solid #838383;display:none;height:80px;margin:auto;padding-top:20px}
.slide{width:950px;margin:auto}
.btn-slide:link,.btn-slide:visited{color:#fff;float:right;display:block;font-size:14px;text-transform:uppercase;font-weight:bold;height:28px;padding:3px 0 3px 0;line-height:28px;text-align:center;text-decoration:none;width:80px;font-family:Arial;background:#000;margin-top:-2px}
.loginform{width:950px;margin:0 auto;color:#999;font-family:Arial,Helvetica,sans-serif}
.formdetails{color:#FFF;font-size:12px;padding:5px}
.formdetails input{border:none;padding:2px 5px;background-color:#EFEFEF}
.loginregister{color:#999;padding:5px}
.loginregister a:link,.loginregister a:visited{color:#90fff6;font-size:12px}
.loginregister a:hover{color:#fff}
.loginform h2{padding:10px 10px 10px 0;font-size:18px;font-weight:normal;text-transform:uppercase}
.loginform ul li{display:inline}
.loginform ul li a:link,.loginform ul li a:visited{color:#FFF;font-size:12px;text-decoration:underline}
input#signIn{color:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_irVFcwjDvaC7-j69aQCcZadFAUHcUsGAY9nouFGlGUpleroPH3kXP2X9U1GX0tWDTZ-p9hPOXMjgc0UrFYCidtyxY8Oip3IMPm6xzEh-BPxnBXvnFuau54xBuekv7bvOJHjMUpeUBKQ/) no-repeat;width:94px;height:25px;cursor:pointer;padding-bottom:5px}
input#Email,input#Passwd{background:#414141;color:#fff}
input:focus#Email,input:focus#Passwd{background:#545454}

Tiếp theo, chèn đoạn code sau ngay bên dưới </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&quot;.btn-slide&quot;).click(function(){$(&quot;#slide-panel&quot;).slideToggle(&quot;slow&quot;);});});
</script>

<div id='slide-panel'><div class='loginform'><div class='formdetails'>
<form action='https://www.google.com/accounts/ServiceLogin?service=blogger&amp;continue=https%3A%2F%2Fwww.blogger.com%2Floginz%3Fd%3Dhttp%253A%252F%252Fwww.blogger.com%252Fhome%26a%3DADD_SERVICE_FLAG&amp;passive=true&amp;alinsu=0&amp;aplinsu=0&amp;alwf=true&amp;ltmpl=start&amp;skipvpage=true&amp;rm=false&amp;showra=1&amp;fpui=2&amp;naui=8#s01' method='post'>

<label for='log'>Username : </label><input id='Email' name='Email' size='20' type='text'/>

<label for='pwd'>Password : </label><input id='Passwd' name='Passwd' size='20' type='password'/>

<input id='signIn' name='signIn' type='submit' value='Đăng nhập'/>

<label for='rememberme'><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Ghi nhớ</label>
</form></div>

<div class='loginregister'>
<a href='https://www.blogger.com/signup.g' target='_blank'>Đăng kí­</a> | <a href='http://www.blogger.com/forgot.g' target='_blank'>Quên mật khẩu ?</a>
</div></div></div>

<div class='slide'><a class='btn-slide' href='#'>Login </a></div>

Save template và xem thành quả.
Người đăng: vào lúc Không có nhận xét nào:
Nhãn: , ,

Thứ Bảy, 10 tháng 11, 2012

Xóa (ẩn) biểu tượng chỉnh sửa nhanh widget


Xóa (ẩn) biểu tượng chỉnh sửa nhanh widget


Biểu tưởng chỉnh sửa nhanh cho widget là một tiện ích mà blogger cung cấp, giúp cho chúng ta có thể chỉnh sửa widget trực tiếp trên blog mà không phải vào bố cục để chỉnh sửa, biểu tượng này chỉ hiển thị với admin của blog. Và bài viết này mình sẽ hướng dẫn các bạn ẩn nó đi.

Hình của icon chỉnh sửa nhanh

Và đây là kết quả sau khi ẩn nó đi.

Việc xóa biểu tưởng chỉnh sửa nhanh thực ra rất đơn giản, nếu bạn muốn xóa biểu tượng chỉnh sửa nhanh nào cho widget thì bạn chỉ việc tìm đến code củawidget đó và xóa dòng code <b:include name="quickedit"> là xong.
Ví dụ như mình có đoạn code bên dưới, và hãy xóa đoạn có đánh dấu highlight:
<b:widget id='HTML4' locked='false' title='FEEDJIT Live Page Popularity' type='HTML'>

<b:includable id='main'>


<!-- only display title if it's non-empty -->


<b:if cond='data:title != &quot;&quot;'>


<h2 class='title'><data:title/></h2>


</b:if>


<div class='widget-content'>


<data:content/>


</div>



<b:include name='quickedit'/>


</b:includable>

</b:widget> 

- Tuy nhiên cách trên không phải thực hiển được hoàn toàn cho các widget, có một số widget mà blogger cung cấp không cho phép ta xóa dòng code này đi, nếu bạn xóa nó thì nó sẽ vẫn hiển thị lại. Ví dụ widget phổ biến nhất là widget"Người theo dõi blog" .
- Để khắc phục điều này, ta sẽ dùng một cách khác, đó là sử dụng lệnh display trong CSS. Khi thực hiện cách này thì tất cả các widget đều được làm ẩn biểu tưởng chỉnh sửa nhanh widget.

- Các bạn thực hiện các bước đơn giản sau:

+ vào bố cục
+ vào chỉnh sửa code HTML (không cần nhấp chọn mở rộng mẫu tiện ích)
+ chèn đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>
.quickedit{display:none;} 

+ Save template. Như thế là đã hoàn thành, bạn hãy thử xem.


Chúc các bạn thành công.
Người đăng: vào lúc Không có nhận xét nào:
Nhãn: , , ,

Code "back to top" góc phải


Code "back to top" góc phải


<a style="display:scroll;position:fixed;bottom:20px;right:5px;" href="#" title="Lên trên"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuCr15wbS777SZSv0GQ_ITbJowrKTJDgMxb2hsfCthMYlO71srlBtV3Iv568XeZ6HiYcablUI8j3m7kchTkSZntB9GjxjFWLGG2o7RsoYqLHT_vxWGCrhuUXeD8pVUakWiFDBWccEcDgPY/s0/"/></a>
Người đăng: vào lúc Không có nhận xét nào:
Nhãn: , , ,

Thanh điều khiển cho Blogspot



Thanh điều khiển cho Blogspot


Tiện ích này bao gồm các nút bấm điều khiển trên blog của bạn, các nút như lên đầu trang hay xuống cuối trang thì bạn đã quen thuộc, ở đây mình sẽ có thêm 3 nút với tính năng như trở về trang trước, nút tự động cuộn blog và ngưng cuộn blog. Nút tự động cuộn tức là khi bạn bấm vào nút này thì blog bạn sẽ tự động cuộn xuống dưới từ từ, đây sẽ giúp người đọc có thể đọc bài viết mà không cần dùng chuột kéo thanh trượt nữa. Bạn có thể xem demo trực tiếp trên site mình, bạn nhìn san bên phải sẽ thấy các nút bạn bấm vào lần lượt các nút để xem tính năng của nó.
Dưới đây là hình minh họa:
- Cách tiến hành:
   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Phầnt ử trang.
   4- Chọn Thêm tiện ích => Chọn HTML/Javarscip và dán đoạn code bên dưới vào

<style type='text/css'>
#backscroll {
width:30px;
line-height:50px;
position:fixed;
right:5px;
top:100px;
}
</style>
<script language='javascript'>
/* <![CDATA[ */ suspendcode="<div id='backscroll'><a onclick='javascript:amutop();return false;' href='#' title='TOP'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijFyu1AZgTCiMkgwiwoB4eeSM9qvbhh_UBamd9DxHQ2LpN8cRkLe_P_RawYRbiyy3KJH9B_G5Oikt0xyBPBSELXzNjQ3afgChyAc_aKg7N9Ab-wy1DKOPzT2p3pNYDuIWAI0y5Zb16j0E/s1600/top-namkna-blogspot-com.gif\" width=\"30\"></a><br><a onclick='javascript:history.back();return false;' href='#' title='BACK'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiWggJS5v4VO1Zf2UXuzl2cgRUoiC49wuWu5qpdNEzImX2V5WkccyHavrbBaaHLni43UwtkeaIWwx_R-np-cWcgfT3lgGew4UrtiB8uiX6t7gjFdG-xjxmzJMQBpUgTeMUBm__ZZjjAas/s1600/back-namkna-blogspot.gif\" width=\"30\"></a><br><a onclick='javascript:sc();return false;' href='#' title='STOP'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgqHwmCECLukG1OqPBahF2oP7nvx0kWk30_-BeE0XWQHeOvLJm8KhKjefUWdxh9-ByYL5Vdrzwyo2IY-_Y38LjeAEoV3ahxavayYGp5az29Q_blHx2DdJn-cZHO_Pq_uTtL4V6Co_SsLY/s1600/play-pause-namkna-blogspot-com.gif\" width=\"30\"></a><br><a onclick='javascript:clearInterval(timer);initialize();return false;' href='#' title='DOWN'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRolFpQRAhmlxcjtqr6kbAAKtsSPP2nArKn0zww0HyqLHY_03LGWQz_QUr1EL0KPJ3edLwXhjr3PUpBUlSs56FVSnuPaq7SaC0kL8-6SHU3HTXIvZ2EaWC_4HY6efd5DRi2I__GtFHk58/s1600/gun-namkna-blogspot-com.gif\" width=\"30\"></a><br><a onclick='javascript:amubutton();return false;' href='#' title='BOTTOM'><img border=0 src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr1e8MIO1UG4tZNnF6Sym-qfsD4YBz80Z28ssCSaYl6Tg0_GwUKy88qgo7rMkMKeahPBsP-3wd290PY8fS8_lkwsxRDXKvRzOPIMFP01Os6Ca7j84Xs0Sio9X6qXHH91iSmGz8q28IlHU/s1600/bottom-namkna-blogspot-com.gif\" width=\"30\"></a></div>"
document.write(suspendcode);var currentpos,timer;function initialize(){timer=setInterval("scrollwindow ()",30)}function sc(){clearInterval(timer)}function scrollwindow(){currentpos=document.documentElement.scrollTop||document.body.scrollTop;window.scrollTo(0,++currentpos)}function amutop(){window.scrollTo(0,0);clearInterval(timer)}function amubutton(){window.scrollTo(0,8E4);clearInterval(timer)};/* ]]> */</script>
- Sau đó bấm Lưu Mẫu lại. 
một số hình ảnh đẹp để thay


Chúc thành công!
Người đăng: vào lúc Không có nhận xét nào:
Nhãn: , ,

Recent Comments Widget For Blogger


Recent Comments Widget For Blogger



The Recent Comments Widget for Blogger displays recent blog comments on your sidebar, showing a snippet of comment along with the title of the post to which the comment was made. If you want to encourage your readers in leaving comments on your blog, this is a widget you shouldn't miss. 

How To Install The Recent Comments Widget For Blogger

Step 1. Go to your Blogger Dashboard >> Design >> Page Elements >> Add a Gadget >> HTML/JavaScript.

Step 2. Copy and paste in the HTML/JavaScript box the following code:

<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html>Recent Comments Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>


Step 3. Replace your-blog-name with your blog url.

Step 4. Click Save and you're done.

Enjoy!
Người đăng: vào lúc Không có nhận xét nào:
Nhãn: , ,

Add Recent Comments Widget With Avatars


Add Recent Comments Widget With Avatars To Blogger


If in the past tutorial i've talked about a simple Recent Comments widget, now i'll be sharing to you a stylish Recent comments widget with round avatars, which comes along with comment excerpts.
You have the option to change default Anonymous Avatar Image as well. 

How to add recent comments widget with avatars

Step 1. Go to Blogger Dashboard, then go to Design >> Page Elements and Add a Gadget.
In the popup window scroll down + choose HTML/Javascript and paste in the following code:

<style type="text/css">
ul.w2b_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.w2b_recent_comments li {
    background: none !important;
    margin: 0 0 6px !important;
    padding: 0 0 6px 0 !important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}

.w2b_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}

.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

.w2b_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}

.w2b_recent_comments li span {
    margin-top: 4px;
    color: #666;
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script>
<script type="text/javascript" src="http://your-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>



Settings:

- Replace your-blog with the name of your blog.
- Replace the "5" values in red, with the number of comments you want to appear, from:
  • numComments  = 5 
  • &max-results=5 

- To change the anonymous avatar, replace the following address with your own:
  • http://www.gravatar.com/avatar/?d=mm 

- To change the size of the avatar, replace 60 value in green with your own

After you've made the changes, click Save... and you're done!

The credit goes to Hrish @ way2blogging.org
Người đăng: vào lúc Không có nhận xét nào:
Nhãn: , ,

Add Random Posts Widget To Bloggera



Add Random Posts Widget To Blogger



If you want to increase the number of page impression, this widget might help you.The Random Posts Widget will show random posts you have added to your blog. The main advantages of this widget is that it is loading pretty fast and shows thumbnails of your posts too, along with the comments link.

How to add Random Posts Widget to Blogger

Step 1. Log in to Blogger Dashboard, go to >> Design >> Edit HTML

Step 2. Check "Expand Widget Templates"

Step 3. Find the following piece of code:

]]></b:skin>
Step 4. Just above it, paste the code below :
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

Save Template.

Step 5. Go to Design >> Page Elements and Add a new HTML/JavaScript Gadget

Step 6. In the HTML box, paste this code:

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
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('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<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<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<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(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJUZ_v2-OeVdCLWZwsFyDEhgQ5aEbvsycwlZU8N3HJRRjbQufv7Nxx3I1Zmkr7Al9B2cu_4V_WztxuVHb6f_12Sh4-FhMljs4ZM4T45Pe4ozDy3gckP75XR6Rdgg398USvnWDG2sz_iLc/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Note: Replace no. 5 with the number of posts you want to be show.

Step 7. Press Save and Enjoy :)
Người đăng: vào lúc Không có nhận xét nào:
Nhãn: , ,

A Simple Related Posts Widget For Blogger



A Simple Related Posts Widget For Blogger


In the last tutorial, i've been talking about the Related Posts widget that shows related posts along with thumbnails just at the end of your blog articles. Some of the users, however, would prefer a simpler and cleaner displaying of their related posts so that it would show just the posts titles. So let's begin adding it!

related post, related post blogger, blogger tricks

How to add Related Posts Widget to Blogger

Step 1. Go to Template >> Edit HTML and tick the "Expand Widget Templates" checkbox

Step 2. Find the below tag

 </head>


Step 3. And just above it, paste the following code:
<!--Related Posts 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;


margin-top: 20px;


}


#related-posts .widget{


padding-left:6px;


margin-bottom:10px;


}


#related-posts .widget h2, #related-posts h2{


font-size: 17px;


font-weight: normal;


color: black;


font-family: Arial Narrow;


margin-bottom: 0.75em;


padding-top: 0em;


}


#related-posts a{


font-size:16px;


color: #555555;


font-variant:small-caps;


}


#related-posts a:hover{


text-decoration: none;


color: #ffffff;


font-weight: bold;


}


#related-posts ul{


list-style-type:none;


margin:0 0 0px 0;


padding:0px;


text-decoration:none;


text-color:#000000


}


#related-posts ul li{


list-style-type: none;


border-left: 2px solid #1399CF;


border-bottom: 1px dotted #1399CF;


margin-bottom: 3px;


padding-left: 30px;


padding-top:0px;


}




#related-posts ul li:hover{


background-color: #1399CF;


border-left: 2px solid #B3CA3D;


border-bottom: 1px dotted #B3CA3D;


}


</style>


<script type='text/javascript'>


var relatedpoststitle=&quot;Related Posts&quot;;


</script>


<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>


<!--Remove--></b:if>

<!--Related Posts Scripts and Styles End--> 

Note:
- if you want to change the size and color of 'Related Posts' title, change the bolded values (17for the font size and black for the color)
-to change the related post title color, replace the value in red;
-to change the background color on mouseover, replace the color value in blue;

Step 4. Now find (CTRL + F) the below line:
<div class='post-footer'>

Step 5. Just above it, paste the code below:
<!-- Related Posts 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> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>

<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End-->

Note: In order to change the number of maximum related posts being displayed for each label, search for the code max-results=5 and change the number "5" to any desired number.

Step 6. Save Template

Enjoy!!!
Người đăng: vào lúc Không có nhận xét nào:
Nhãn: , ,
Đăng ký: Bài đăng (Atom)

Bài đăng phổ biến