How To Create Stylish Related Post Tutorials

How To Create Stylish Related Post Tutorials | about    How To Create Stylish Related Post Tutorials , In my previous post I have created tips on and this post 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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaQFGYkFrX_wewBtS-vd6sDGNtYnT6V6CUhG_1HydJvD-EjBLcXYf2GJgUcZJkW_NZ0EBvQNGTGgNnpRUkO6shO-r-UHfMZumKDEpuedgx-r-lYeQRDGvBskaYD56uR0e28YDz7Yz3OkM/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

and succes How To Create Stylish Related Post Tutorials

Source : 

- ojelhtc.blogspot.com 

- tipsandtricksblogger.com