Awesome Rounding Related Post widget With Thumbnails for Blogger

Awesome Rounding Related Post widget With Thumbnails for Blogger/blog . this Related Post will 100% work any time of your blog. this widget you will new effects on blogs and websites .this widget shows another post in your blogs . this is the major part on the visitor of your .in this related post you will add 1 to 10 posts .this will be show only in below post . don't show on the homepage .this time this post will be add 5 posts you will be edit below steps I have been post above on this post another rounding and floating widget on blogger

           HOW TO ADD THE RELATED POST IN YOUR BLOG

Below i will be written how to add this .this will be add on blog 10 very simple steps are required .this will be add only on the template it is add not on lay out

• Log on Blogger
• Click drop down menu
• Then click Template
•  Edit HTML please press
• Now you will press ctrl + f
• Find the below code

]]></b:skin>

• Now you will paste below code above it

/* worldajith.blogspot.in related post start----------------------------------------------- */ # tricks n tips related { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #tricks n tips related h2{ background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK_Qz21zsowU8nO3b9sRj0T5VLMQhYYI0WGDFfz4qfzpNl_ghYlyKzaxSpHfiQdA2IdeZ6WfWvGS1Zi-QnJZ-ZEMgbZUymDE7hkbIerc0jVvOujUk_-bOb_2JuEQisre3wrqr-vh1D8vFk/s1600/star.png") no-repeat scroll 5px center transparent; clear: both; color: #662D2D; font-family: 'Oswald',sans-serif; font-size: 26px; font-weight: bold; line-height: 1.2; margin: 25px 5px; padding: 6px 10px 2px 40px; text-shadow: 0 1px 0 #CCCCCC; text-transform: uppercase; } #tricks n tips related a{ color:black; } #tricks n tips related a:hover{ color:black; } #tricks n tips related img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);} #tricks n tips related img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);} .post h5 { background: #1F8399; font-family: Verdana; padding: 10px; color: #fff; font-size: 20px; -webkit-border-radius: 0px 10px 0px 10px; border-radius: 0px 10px 0px 10px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .post h5:hover { background: #454545; font-family: Verdana; color: #fff; text-shadow: 4px 4px 10px #f4fff2; filter: dropshadow(color=#f4fff2, offx=2, offy=2); border: 4px double #FFCFE2; -webkit-border-radius: 10px 0px 10px 0px; border-radius: 10px 0px 10px 0px; -webkit-box-shadow: 3px 3px 10px 1px #C72C6A; box-shadow: 3px 3px 10px 1px #1F8399;

• And now you will find another below tag

</head>

• Now you will paste the above it

<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd1rlsyeLKmAZHecheXd1ftvP3B5Wi8TSOIIGt-EYZDDrDnaGyViuL5DXqKvMAW-LRSBAu8eGUmdxCUG9Uu3Tvbja5ELEEkNvLUvx4z1mm9x1E_N1YfIrRNuna1mCmOKFte89REnsqp04S/s1600/no_image.jpg"; var maxresults=5; var splittercolor="#DDDDDD"; var relatedpoststitle="Related Post "; </script> < /b:if>

• Now you will find the another below tag

<div class='post-footer'>

• Now you will paste the below code above/before it

<b:if cond='data:blog.pageType == "item"'> <div id='tricks n tips related'> <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=5"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </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://worldajith.blogspot.com'/> </b:if></b:if>

                                          Now you will be finish all the steps
                                                                                                happy blogging