Cara Membuat Related Post dengan Icon Gambar Responsive

Sahilluqman    01.14    Template , Tips Blog    Comment   

In terms of user friendly, it is often forgotten is the blog template users pay less attention to the features related post embedded in a default template that they get from the download or purely from blogger. The discussion this time, more on how to modify the link related post that beginning in the form of text is replaced with images responsive.

If still confused this topic, please go to one of my friend in this blog article. At the bottom will be visible parts related his post. Suppose that when colleagues opened the title of the article advantages and disadvantages blogspot and wordpress.

Still not understand well? Hmm. Please refer to the steps below!

STEPS TO MAKE RELATED POST WITH IMAGES
1. Open an account blogger
2. Select a template > Edit Html
3. Copy and paste the code below and place it just above the code </ head>

<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' /> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

4. Copy and paste the code below and place it just above the code <div class = 'post-footer ">.
If the code <div class =' post-footer"> there are two, save the above code that is both yes.

<!-- Related Posts with Thumbnails Code Start--> <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_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://contohblognih.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLAxNTIohhYpGgtMG84WXoKHMhoirI_1FQsUlZjk1C62N600uJYAa5EdlyncsfwoBvQbsNL_HdcrHPLJ2O1FbKvb358CZQPsNCuaS3o_2wqLm0Ps3tsk-Sk3VtDuUIBkvzEiTNhLg6okpm/s1600/best+blogger+tips.png'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->

5. Save Template

Good luck and happy blogging.