Cara Memasang Artikel Terkait Responsive Dibawah Postingan Blog

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

Para pembuat template blog hingga dikala ini terus berlomba melaksanakan penemuan terhadap tampilan widget ini. Dan salah satu misalnya nanti akan saya bagikan dibawah ini. Related article yakni 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 mensugesti yakni 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 arahan </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; Setelah ketemu, pastekan arahan 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 arahan berikut ini di template Anda <div class='post-footer'> kemudian cari arahan ini dibawah arahan tadi <div class='post-footer-line post-footer-line-1'>. Biasanya penampakan arahan HTMLnya menyerupai 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 arahan diatas, Silahkan pasang arahan 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 arahan <div class='post-footer'> kurang lebih menyerupai 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 arahan share button maka letakkan arahan HTML tadi sempurna dibawah arahan share button pada template blog Anda.

3. Java Script

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

Berbagi :