Thursday, December 15, 2011

How To Create Stylish Related Post Tutorials

How To Create Stylish Related Post
Related PostBlog Tuorials, In my previous post I have created how to Make Breadcrumb on Blogger. Read this post � How To Make Breadcrumb on Blogger. and Today I want to give tips on How To Create Stylish Related Post for blogger blog. This stylish related post is customize with css where you can customize the color and the font yourself.And here are the steps by step on How To Create Stylish Related Post for Blog (Look Correctly , okay ? )
  1. Go to Dashboard
  2. Click Design 
  3. Edit HTML 
  4. Find this code bellow ]]></b:skin> 
  5. Copy the code bellow and paste it above the above code on step 4 #related-posts {float:left;width:500px;margin-top:20px;margin-left:50px;font:12px Arial;margin-bottom:20px;}#related-posts .widget {list-style-type:none;margin:5px 0;padding:0;}#related-posts .widget h2,#related-posts h2 {color:#940f04;font-size:20px;font-weight:400;margin:5px 7px 0;padding:0 0 5px;}#related-posts a {color:#917F3D;font-size:13px;text-decoration:none;}#related-posts a:hover {color:#D1C387;text-decoration:none;}#related-posts ul {border:medium none;margin:10px;padding:10px;}#related-posts ul li {display:block;background:url(https://lh6.googleusercontent.com/-iKQWfigzGTQ/TnGEZD64gGI/AAAAAAAAAbU/-w3tu49-1B0/s128/bullet.gif) no-repeat -1px 0;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #D1C387;padding:0 0 1px 30px;}ul,ol,div {margin:0;padding:0;}
  6. Save your template 
  7. On Edit Template, tick Expand Widget Templates 
  8. Copy this code bellow<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'><font color='#3F3A0E' face='Arial' size='4'><b>Related Posts: </b></font><font color='#FFFFFF'><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if><!--RELATED-POSTS-STOPS--> 
  9. Look for the code bellow and Paste the above code on step 8 above the code bellow :
    <b:if cond='data:blog.pageType == &quot;item&quot;'/></b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div><div class='post-footer'> <p class='post-footer-line post-footer-line-1'> <!-- backlinks -->
  10. Save your template and you are done view your blog to see the your stylish related post widget.

*Note: if you want to change the bullet picture just replace the image link that color in red with your own bullet pict. if you want to change the font color and border color just replace the color colored with blue 

Source : tipsandtricksblogger
Search terms :  How To Make Stylish Related Post for Blogger | Tutorial membuat Related Post Bergaya | Stylish Related Post ( Tutorial )