Skip to content Skip to sidebar Skip to footer
Home / Blogging / Cara Memasang Artikel Terkait Responsive Dibawah Postingan Blog
Cara Memasang Artikel Terkait Responsive Dibawah Postingan Blog

Cara Memasang Artikel Terkait Responsive Dibawah Postingan Blog

By Dewa Plokis
Membuat lalu memasang Artikel terkait atau Related posts adalah judul artikel untuk blogging tips kali ini. Pemasangan ini sering sekali kita temukan pada setiap blog. Widget yang satu ini mungkin saja adalah widget yan paling wajib dimiliki oleh blog.

Para pembuat template blog sampai saat ini terus berlomba melakukan inovasi terhadap tampilan widget ini. Dan salah satu contohnya nanti akan saya bagikan dibawah ini. Related posts article adalah judul postingan yang terpasang pada blog yang mengarahkan kita pada artikel yang lain yang sama dengan kategori artikel yang sedang terbuka. Ini berlaku untuk penggunaan Tag atau kategori pada judul postingan.

artikel terkait responsive

Pada dasarnya, penambahan widget ini sangat membantu para pembaca atau pengunjung blog. Jika tampilan blog menarik maka pengunjung blog pasti akan betah berlama-lama diblog Anda. Namun tentu saja yang paling mempengaruhi adalah judul artikel yang ada pada artikel terpaut tersebut.


1. Kode CSS

silakan ikuti langkah-langkah berikut ini
  • Login Ke akun Blogger Anda
  • Masuk ke dashboard >Template>Edit HTML
  • Gunakan CTRL + F untuk mempermudah pencarian
  • Temukan kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; Setelah ketemu, pastekan kode CSS dibawah ini diatasnya
    <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'>
/* DewaPlokis Related Post */

#related-post {
    margin: 0;
    padding: 0;
}

#related-post h4 {
    background: #fafafa;
    color: #111;
    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
    border-top: 1px solid rgba(0, 0, 0, 0.14);
    padding: 10px 0;
    font-size: 20px;
    margin: 0 0 20px 0;
    padding-left: 8px;
    line-height: 1em
}

#related-post h4 span {
    padding: 6px;
    display: inline-block;
    vertical-align: middle
}

.dewhead {
    background: #fff;
    font-size: 100%;
    font-weight: normal;
    line-height: 150%;
    overflow: hidden;
    padding: 0;
}

ul#related-summary {
    margin: 0;
    padding: 0 15px;
}

ul#related-summary li {
    position: relative;
    float: left;
    list-style: none outside none;
    margin: 0 5px 15px 5px;
    padding: 0;
    overflow: hidden;
    height: 180px;
    width: 31.6%
}

ul#related-summary li img {
    background-color: #f1f1f1;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    vertical-align: middle;
}

ul#related-summary li a.relinkjdulx {
    color: #666;
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    overflow: hidden;
    text-align: left;
    padding: 10px 10px 10px 0
}

ul#related-summary li a.relinkjdulx:hover {
    color: #000;
}

.overlayb {
    position: relative;
    max-height: 140px;
    overflow: hidden;
}

.overlayb:before {
    content: &#39;
    &#39;
    ;
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s linear
}

.overlayb:after {
    content: &#39;
    \f002&#39;
    ;
    font-family: fontawesome;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, .8);
    position: absolute;
    top: 45%;
    left: 45%;
    text-align: center;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: all 0.20s linear
}

.overlayb:hover:before,
.overlayb:hover:after {
    opacity: 1;
    visibility: visible;
}

@media only screen and (max-width:640px) {
    #related-post h4 {
        margin: 0 0 5px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12)
    }
    ul#related-summary li {
        float: left;
        list-style: none;
        overflow: hidden;
        width: 50%;
        padding: 10px 0;
        height: 160px;
        margin: 0
    }
    ul#related-summary li a.relinkjdulx {
        font-size: 12px;
        font-weight: 400;
        padding: 5px 5px 5px 4px
    }
    ul#related-summary li .overlaytext {
        float: left;
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        line-height: normal;
        overflow: hidden;
        padding: 0
    }
    ul#related-summary li .overlayb {
        display: inline-block;
        float: left;
        height: auto;
        margin: 0 4px
    }
    ul#related-summary li img {
        height: auto;
    }
    </style> </b:if>
Atur width, height color, font-size,margin dan padding sesuai dengan kebutuhan Blog Anda. Untuk mengganti color, bisa Anda pilih sendiri di halaman color picker blog ini

2. Kode HTML Related Posts

Selanjutnya temukan kode berikut ini di template Anda <div class='post-footer'> lalu cari kode ini dibawah kode tadi <div class='post-footer-line post-footer-line-1'>. Biasanya penampakan kode HTMLnya mirip sepert ini
<div class='post-footer'>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='post-footer-line post-footer-line-1'>
<!-- Kode Share Button Disini -->
<!--kode related post bisa dipasang disini-->
</div>
</b:if> 
</div>
<div class='post-footer-line post-footer-line-2' style='display:none;'/>
<div class='post-footer-line post-footer-line-3' style='display:none;'/>

Jika Sudah ketemu dengan kode diatas, silakan pasang kode berikut ini 
<div id='related-post'>
<div class='dewhead'>
<h4><span>Artikel Terkait</span></h4>
<div class='clear'/>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='related-summary'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</div>

Penerapannya pada kode <div class='post-footer'> kurang lebih seperti ini
<div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-footer-line post-footer-line-1'>
....<!-- Kode Share Disini -->...........
<div id='related-post'>
<div class='dewhead'>
<h4><span>Artikel Terkait</span></h4>
<div class='clear'/>
<b:loop values='data:post.labels' var='label'>
<script
 expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name
 + 
&quot;?alt=json-in-script&amp;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;'
 type='text/javascript'/>
</b:loop>
<ul id='related-summary'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</div>
</div>
</b:if> 
</div>
<div class='post-footer-line post-footer-line-2' style='display:none;'/>
<div class='post-footer-line post-footer-line-3' style='display:none;'/>

populer post dibawah postingan blog

Jika Anda sudah memiliki kode share button maka letakkan kode HTML tadi tepat dibawah kode share button pada template blog Anda.

3. Java Script

Untuk tahap selanjutnya Adalah penambahan Script untuk pengatur Imagenya dari related posts yang akan kita buat. silakan copy dan pastekan kode dibawah ini diatas kode </body> atau kode &lt;!--</body>--&gt;&lt;/body&gt;
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
$(&quot;ul#related-summary li img&quot;).each(function(){$(this).attr(&quot;src&quot;,$(this).attr(&quot;src&quot;).replace(/\/s[0-9]+(\-c)?\//,&quot;/w200-h140-c/&quot;))});
</b:if></script>
Untuk w200 adalah nilai width imagenya dan h140adalah nilai untuk tinggi image, Anda bisa mengaturnya sesuai selera Anda sendiri
Selanjutnya save template lalu lihat hasilnya.

Cara Terbaru memasang Artikel Terkait di Bawah Postingan Blog

Untuk cara berikut ini sebenarnya untuk pengguna tempalate terbaru, karena cara diatas banyak template yang tidak cocok

1. Pertama pasang CSS berikut ini sebelum </head>
<!-- Related Post Widget Start -->
<b:if cond='data:view.isPost'>
<style>
.related-post {
  margin: 2em auto 0;
  font: normal normal 11px/1.4 Helmet, FreeSans, Sans-Serif;
}
.related-post h4 {
  font-size: 150%;
  margin: 0 0 .5em;
}

/* Style 4 */
.related-post-style-4,
.related-post-style-4 li {
  margin: 0;
  padding: 0;
  list-style: none;
  word-wrap: break-word;
  overflow: visible;
  position: relative;
  outline: none;
}
.related-post-style-4 .related-post-item {
  display: block;
  float: left;
  width: 80px;
  height: auto;
  padding: 10px;
}
.related-post-style-4 .related-post-item-thumbnail {
  display: block;
  margin: 0 0 10px;
  width: 80px;
  height: 80px;
  max-width: none;
  max-height: none;
  background-color: transparent;
  border: none;
  padding: 0;
}
.related-post-style-4 .related-post-item-title {
  font-weight: bold;
}
.related-post-style-4 .related-post-item-tooltip {
  border: 1px solid #bbb;
  background-color: white;
  width: 150%;
  text-align: center;
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 999;
  margin-bottom: -30px;
  padding: 10px 10px 12px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  display: none;
}
.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip {
  left: auto;
  right: 0;
}
.related-post-style-4 .related-post-item-tooltip:before,
.related-post-style-4 .related-post-item-tooltip:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: inherit;
  position: absolute;
  top: 100%;
  left: 37px;
}
.related-post-style-4 .related-post-item-tooltip:after {
  border-top-color: white;
  border-width: 9px;
  margin-left: 1px;
}
.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:before,
.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:after {
  right: 37px;
  left: auto;
}
.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:after {
  margin-left: auto;
  margin-right: 1px;
}
.related-post-style-4 .related-post-item:focus {
  outline: none;
}
.related-post-style-4 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-4 .related-post-item:hover .related-post-item-tooltip {
  display: block;
}
</style>
</b:if>
<!-- Related Post Widget End -->

2. Pasang kode HTML dan Script Popular posts berikut diatas <div class='post-footer'> atau bisa juga dimasukkan dalam <b:includable id='post' var='post'/> dan <b:includable id='mobile-post' var='post'/>. Silakan disesuaikan pada tempalte yang digunakan, karena setiap tempalate pasti akan berbeda. Coba satu persatu sampai artikel terkait dibawah postingan blogger.
<b:if cond=data:view.isPost'>
<div expr:id='&quot;dewa-related-post-&quot; + data:post.id' class='related-post'/>
<script>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></b:if>];
var relatedPostConfig = {
    homePage: &quot;<data:blog.homepageUrl/>&quot;,
    widgetTitle: &quot;&lt;h4&gt;Related Post:&lt;/h4&gt;&quot;,
    numPosts: 8,
    summaryLength: 370,
    titleLength: &quot;auto&quot;,
    thumbnailSize: 80,
    noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
    containerId: &quot;dewa-related-post-<data:post.id/>&quot;,
    newTabLink: true,
    moreText: &quot;Read More&quot;,
    widgetStyle: 4,
    callBack: function() {}
};
</script>

3. Terakhir, pasang script berikut sebelum </body>
<b:if cond='data:view.isPost'>
<script>//<![CDATA[    
/*! Related Post Widget for Blogger */
!function(a,b,c){var d=(new Date).getTime(),e={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://dte-feed.blogspot.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:!1,moreText:"Baca Selengkapnya",callBack:function(){}};if("object"==typeof relatedPostConfig)for(var f in relatedPostConfig)e[f]=relatedPostConfig[f];e.homePage=e.homePage.replace(/\/?\?m=\d+(\&|$)|\/+$/,"");var g=function(a){var d=b.createElement("script");d.src=a,c.appendChild(d)},h=function(a,b){return Math.floor(Math.random()*(b-a+1))+a},i=function(a){var c,d,b=a.length;if(0===b)return!1;for(;--b;)c=Math.floor(Math.random()*(b+1)),d=a[b],a[b]=a[c],a[c]=d;return a},j="object"==typeof labelArray&&labelArray.length?"/-/"+i(labelArray)[0]:"",k=function(a){var b=a.feed.openSearch$totalResults.$t-e.numPosts,c=h(1,b>0?b:1);g(e.homePage+"/feeds/posts/summary"+j+"?alt=json-in-script&orderby=updated&start-index="+c+"&max-results="+e.numPosts+"&callback=do_related_post_"+d)},l=function(a){var k,l,m,n,o,c=b.getElementById(e.containerId),d=i(a.feed.entry),f=e.widgetStyle,g=e.widgetTitle+'<ul class="related-post-style-'+f+'">',h=e.newTabLink?' target="_blank"':"",j='<span style="display:block;clear:both;"></span>';if(c){for(var p=d.length,q="related-post-item",r=0;r<e.numPosts&&r!==p;r++){l=d[r].title.$t,m="auto"!==e.titleLength&&e.titleLength<l.length?l.substring(0,e.titleLength)+"&hellip;":l,n="media$thumbnail"in d[r]&&e.thumbnailSize!==!1?d[r].media$thumbnail.url.replace(/\/s\d+(\-c)?\//,"/s"+e.thumbnailSize+"-c/"):e.noImage,o="summary"in d[r]&&e.summaryLength>0?d[r].summary.$t.replace(/<br *\/?>/gi," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,e.summaryLength)+"&hellip;":"";for(var s=0,t=d[r].link.length;t>s;s++)if("alternate"==d[r].link[s].rel){k=d[r].link[s].href;break}g+=2==f?'<li><img alt="" class="'+q+'-thumbnail" src="'+n+'" width="'+e.thumbnailSize+'" height="'+e.thumbnailSize+'"><a class="'+q+'-title" title="'+l+'" href="'+k+'"'+h+">"+m+'</a><span class="'+q+'-summary"><span class="'+q+'-summary-text">'+o+'</span> <a href="'+k+'" class="'+q+'-more"'+h+">"+e.moreText+"</a></span>"+j+"</li>":3==f||4==f?'<li class="'+q+'" tabindex="0"><a class="'+q+'-title" href="'+k+'"'+h+'><img alt="" class="'+q+'-thumbnail" src="'+n+'" width="'+e.thumbnailSize+'" height="'+e.thumbnailSize+'"></a><div class="'+q+'-tooltip"><a class="'+q+'-title" title="'+l+'" href="'+k+'"'+h+">"+m+"</a></div>"+j+"</li>":5==f?'<li class="'+q+'" tabindex="0"><a class="'+q+'-wrapper" href="'+k+'" title="'+l+'"'+h+'><img alt="" class="'+q+'-thumbnail" src="'+n+'" width="'+e.thumbnailSize+'" height="'+e.thumbnailSize+'"><span class="'+q+'-tooltip">'+m+"</span></a>"+j+"</li>":6==f?'<li><a class="'+q+'-title" title="'+l+'" href="'+k+'"'+h+">"+m+'</a><div class="'+q+'-tooltip"><img alt="" class="'+q+'-thumbnail" src="'+n+'" width="'+e.thumbnailSize+'" height="'+e.thumbnailSize+'"><span class="'+q+'-summary"><span class="'+q+'-summary-text">'+o+"</span></span>"+j+"</div></li>":'<li><a title="'+l+'" href="'+k+'"'+h+">"+m+"</a></li>"}c.innerHTML=g+="</ul>"+j,e.callBack(a)}};a["do_related_post_"+d]=l,a["do_related_post_start_"+d]=k,g(e.homePage+"/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=0&callback=do_related_post_start_"+d)}(window,document,document.getElementsByTagName("head")[0]);
//]]>          
</script>
</b:if>


Demikian tips blogging tentang cara mudah membuat related article post responsive dengan gambar dibawah potingan blog. Jika ada pertanyaan atau ada yang masih kurang jelas, silakan masukkan di kolom komentar. Terima kasih.
Load Comments
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parse Box

strong em u strike
pre code pre code spoiler
embed