Cara Membuat: Related posts Responsive

Membuat related posts responsive dengan gambar thumbnail di bawah postingan artikel

Related posts adalah sebuah widget yang pada umumnya berada di bawah postingan artikel, yang memiliki fungsi sebagai referensi setelah pengunjung selesai membaca postingan artikel.

Related posts dapat juga dikatakan sebagai menu navigasi, karena widget tersebut juga mengandung internal link didalamnya, ini merupakan "cara" terbaik agar web blog atau website kita memiliki peningkatan jumlah pageview dan mengurangi bounce rate.

Related posts yang sering digunakan web blog atau website populer memiliki kurang lebih 2 jenis widget yang sering kami temui diantaranya, widget related posts tanpa thumbnail gambar,widget related posts yang menggunakan thumbnail gambar.

Pada postingan artikel kali ini kami akan membagikan 2 jenis widget related posts "blogger" yang responsive yang dapat anda terapkan di bawah postingan artikel atau konten yang anda buat,dan pastinya memiliki nilai "SEO friendly" yang baik memenuhi kriteria "200+google rangking faktor" yang sangat mudah untuk di terapkan.

Untuk blog biasa, di sarankan menggunakan widget related posts tanpa thumbnail gambar agar tidak memperlambat loading blog, namun! menggunakan widget related posts dengan thumbnail gambar lebih menarik,dan bisa lebih SEO friendly lagi jika didukung dengan gambar thumbnail yang berkata kunci.

2 jenis widget related posts "blogger" responsive yang dapat digunakan di bawah postingan artikel atau konten

2 jenis widget related posts blogger yang kami bagikan di bawah ini memiliki fungsi yang sama, anda dapat memilih salah satu widget related posts yang anda sukai untuk di pajang pada web blog atau website anda.

Widget yang pertama kami tuliskan adalah widget related posts di bawah postingan artikel menggunakan "gambar thumbnail responsive" yang cocok untuk berbagai jenis topik atau Niche web blog.

Apakah penting widget related posts di bawah postingan artikel menggunakan gambar thumbnail responsive?

Widget related posts dengan gambar thumbnail responsive sangat penting dipasang di bawah postingan artikel,karena akan menjadi sebuah sinyal bagi pembaca untuk melakukan pencarian beruntun pada web blog atau website yang kita miliki, apalagi widget related posts yang kita gunakan  menggunakan gambar thumbnail responsive yang keren seperti halnya blog toko online, blog foto,dan blog Vidio+Musik.

Bagaimana "cara pasang related posts dengan gambar responsive"?

Cara membuat related posts thumbnail gambar responsive di bawah postingan

Berikut ini tahap memasang atau membuat postingan terkait dengan gambar thumbnail di bawah postingan:

1. Masuk ke akun blogger.
2. Dari dasboard blogger,cari atau sentuh fitur theme >> edit HTML
3. Copy kode CSS di bawah ini dan paste kode tersebut tepatnya di atas kode ]]></b:skin> atau </style>
   
   

   /* Related Post */
   #related-post {margin:0;padding:20px 0 0 0;}
   #related-post h4{display:none;color:#30373c;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05);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}
   .relhead {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:#30373c;display:block;font-size:14px;font-weight:400;line-height:normal;overflow:hidden;text-align:center;padding:10px 10px 10px 0}
   ul#related-summary li a.relinkjdulx:hover{color:#30373c;}
   .overlayb {position:relative;max-height:140px;overflow:hidden;}
   .overlayb:before{content:'';background-color:rgba(0,0,0,0.2);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:'\f002';font-family:fontawesome;font-size:1.3rem;color:rgba(255,255,255,1);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;}
   

   
   
4. Selanjutnya, copy kode JavaScript di bawah ini  dan paste kode tersebut tepatnya di atas kode </head>
   
   

   <script type='text/javascript'>/*<![CDATA[*/function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")    (e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgcuplik(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnojudul]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e    (postcontent=e.summary.$t),relcuplikan[relnojudul]=saringtags(postcontent,numchars),"media$thumbnail"in e?postimg=e.media$thumbnail.url:postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF",relgambar[relnojudul]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnojudul]=e.link[n].href;break}relnojudul++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function artikelterkait(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],i=relurls[t],o=relcuplikan[t],s=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=i,relcuplikan[a]=o,relgambar[a]=s}for(var g,m=0,d=Math.floor((reljudul.length-1)*Math.random()),c=d,h=document.URL;relmaxtampil>m    (relurls[d]==h||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[d]+"' rel='nofollow' target='_top' title='"+reljudul[d]+"'><div class='overlayb'><img src='"+relgambar[d]+"' /></div></a>",g+="<div class='overlaytext'><a class='relinkjdulx' href='"+relurls[d]+"' target='_top'>"+reljudul[d]+"</a></div>",g+="<span class='news-text'>"+relcuplikan[d]+"</span>",g+="</li>",document.write(g),m++,m!=relmaxtampil))    (d<reljudul.length-1?d++:d=0,d!=c););}var relnojudul=0,relmaxtampil=6,numchars=90,reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>
   

   
   
5. Kemudian Copy kode HTML di bawah ini dan paste kode tersebut tepatnya di atas kode <div class="post-footer"> jika kode tersebut lebih dari satu, simpan di atas kode yang kedua.
   
   

   <div id='related-post'>
   <div class='relhead'>
     <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>
   

   
   
6. Yang terakhir, sentuh tombol orange save.
7. Selesai!

Untuk memastikan apakah widget related posts dengan thumbnail responsive sudah terpasang dengan baik,anda dapat melihatnya melalui pratinjau blog (lihat blog).

Setelah "membuat related posts responsive dengan gambar thumbnail",kini saatnya kita akan membuat widget related posts tanpa gambar thumbnail yang SEO friendly dan keren.

Cara membuat related posts tanpa gambar thumbnail di bawah postingan artikel

Langkah langkah membuat widget related post blogger tanpa gambar thumbnail sebagai berikut:

1. Copy kode CSS dibawah ini lalu ikuti tutorial lanjutan dibawahnya.
   
   

   /*Related Post*/
   .related-post{margin:0;padding:0}
   .related-post h4{margin:0 0 .5em;font-size:160%;}
   .rel-style-2{margin:0 0 0 0!important;padding:0 0 0 0!important;list-style:none}
   .rel-style-2 li{margin:0 0 0 0;padding:0 0 0 0}
   .rel-style-2 li{padding:5px 0!important;border-bottom:1px solid #e5e5e5;overflow:hidden}
   .rel-style-2 li:last-child{border-bottom:none}
   .rel-style-2 .rel-thumb{width:70px;height:70px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 12px 0 0}
   .rel-style-2 .related-post-item-title{font-family: Arial;font-size:14px;font-weight:700;line-height:17px}
   .rel-style-2 .related-post-item-summary {display: block;overflow: hidden;font-size: 100%;line-height: 17px;font-family: Arial;}
   #nav-related{border:1px solid #e5e5e5;margin:15px 0;padding:15px}
   @media screen and (max-width:568px){
   .rel-style-2 .rel-thumb{display:none}
   .rel-style-2 .related-post-item-summary{display:none}
   }
   @media screen and (max-width:384px) {
   #related-post{margin:10px 0 0;padding:10px}}
   

   
   
2. Masuk ke akun blogger.
3. Dari dasboard blogger, sentuh atau menemukannya fitur theme >> edit HTML.
4. Di dalam tab baru yang terbuka,cari atau menemukanya kode ]]></b:skin> atau </style> lalu paste kode CSS di atasnya.
5. Selanjutnya, copy kode JavaScript dibawah ini kemudian paste/tempel di atas kode </body>.
   
   

   <script type='text/javascript'>
   //<![CDATA[//
   /*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
   var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"    labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="rel-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"    d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in x[q]    d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary"in x[q]    d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><a title="'+t+'" href="'+v+'"><img alt="'+t+'" class="rel-thumb" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"/></a><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+"></a></span>"+y+"</li>"}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
   //]]>
   </script>
   

   
   
6. Yang terakhir cari kode  <div class="post-footer"> lalu paste kode HTML di bawah ini tepat di atas kode tersebut.
   
   

   <div id='nav-related'>
   <div class='related-post' id='related-post'/>
   </div>
   <script type='text/javascript'>
   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 POSTS&lt;/h4&gt;&quot;,
   numPosts: 5,
   summaryLength: 130,
   titleLength: &quot;auto&quot;,
   thumbnailSize: 70,
   noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3YJpw_zZ8fNxvAqX-UCW92LrDWm5yS9fwuMBuuYOGyrv-z2wkJbZ1irNKYZgwQqZf40eQbRAasNhzL6UtB03DVtwZgpRqZSoBbV2L6nQ89rkeZbX6xRxOCgR4xg1KOTZNSHCfoLMCnAo/s70/picture_not_available.png&quot;,
   containerId: &quot;related-post&quot;,
   newTabLink: false,
   moreText: &quot;Read More...&quot;,
   widgetStyle: 2,
   callBack: function() {}
   };
   </script>
   

   
   
7. Sentuh tombol orange save.
8. Selesai!

Dengan mengikuti langkah langkah seperti yang kami tuliskan di atas dengan baik dan benar, maka web blog atau website anda akan memiliki tampilan yang menarik dan dapat dinilai profesional oleh pengunjung ataupun mesin pencari Google (SERPs).

Mungkin itu saja yang dapat kami bagikan untuk anda, jika dilain waktu kami memiliki kesempatan, kami akan melakukan update artikel untuk dipublikasikan di sini.

Baca juga:

• Cara memasang widget populer post pada web blog atau website
• Cara membuat menu navigasi Evo mag di blog
• Cara membuat Subscribe Box ala Stello-Gazello

Demikian postingan artikel yang dapat kami tuliskan untuk anda.

Semoga bermanfaat!