Cara Memasang Artikel Terkait Responsive Dibawah Postingan Blog

Membuat kemudian memasang Artikel terkait atau related post ialah judul artikel untuk blogging tips kali ini. Pemasangan ini sering sekali kita temukan pada setiap blog. Widget yang satu ini mungkin saja ialah widget yan paling wajib dimiliki oleh blog.

Para pembuat template blog hingga ketika ini terus berlomba melaksanakan penemuan terhadap tampilan widget ini. Dan salah satu misalnya nanti akan saya bagikan dibawah ini. Related article ialah 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 tau kategori pada judul postingan.

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

1. Kode CSS

Silahkan ikuti langkah-langkah berikut ini

• Login Ke akun Blogger Anda
• Masuk ke dashboard >Template>Edit HTML
• Gunakan CTRL + F untuk mempermudah pencarian
• Temukan instruksi </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; Setelah ketemu, pastekan instruksi 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, dapat Anda pilih sendiri di halaman color picker blog ini

2. Kode HTML

Selanjutnya temukan instruksi berikut ini di template Anda <div class='post-footer'> kemudian cari instruksi ini dibawah instruksi tadi <div class='post-footer-line post-footer-line-1'>. Biasanya penampakan instruksi HTMLnya ibarat 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 dapat 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 instruksi diatas, Silahkan pasang instruksi 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 instruksi <div class='post-footer'> kurang lebih ibarat 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;'/> 

Jika Anda sudah mempunyai instruksi share button maka letakkan instruksi HTML tadi sempurna dibawah instruksi share button pada template blog Anda.

3. Java Script

Untuk tahap selanjutnya Adalah penambahan Script untuk pengatur Imagenya. Silahkan copy dan pastekan instruksi dibawah ini diatas instruksi </body> atau instruksi &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>

Untuk w200 ialah nilai width imagenya dan h140adalah nilai untuk tinggi image, Anda dapat mengaturnya sesuai selera Anda sendiri

Selanjutnya save template kemudian lihat hasilnya.

Demikian tips blogging ihwal cara gampang menciptakan related article post responsive dengan gambar dibawah potingan blog. Jika ada pertanyaan atau ada yang masih kurang jelas, silahkan masukkan di kolom komentar. Terima kasih.
Sumber https://dewaplokis.blogspot.com/

Bagikan Artikel ini