Cara Membuat Related Post Resposive Sederhana Dalam Artikel

Related post adalah artikel terkait yang biasa ditampilkan dibawah entri posting dalam sebuah artikel, namun kali ini saya akan coba bahas megenai cara meletakkan artikel didalam atau ditengah-tengah enteri posting atau artikel, mungkin kedenganrannya agak sedikit aneh karena tidak seperti biasanya. Hal ini kita lakukan karena mungkin ada sebagian teman blogger sudah agak sedikit jenuh dengan tampilan related post yang selalu berada dibawah posting.

Mungkin dengan hal yang berbeda ini akan membuat peningkatan visitor pada entri posting kita. Langkah yang perlu kita lakukan untuk meletakkan related post pada entri posting bisa disimak bibawah ini.

Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>.

/* Skin Design Related Post */

.relatedpost1 , .relatedpost1 .postImageUrl , .relatedpost1 .centered-text-area {min-height: 80px;position: relative;}

.relatedpost1 , .relatedpost1:hover , .relatedpost1:visited , .relatedpost1:active {border: 0!important;}

.relatedpost1 .clearfix:after {content: "";display: table;clear: both;}

.relatedpost1 {border-radius: 3px;display: block;transition: background-color 250ms;webkit-transition: background-color 250ms;width: 100%;opacity: 1;transition: opacity 250ms;webkit-transition: opacity 250ms;background-color: #4f4b76;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17);}

.relatedpost1:active , .relatedpost1:hover {opacity: 1;transition: opacity 250ms;webkit-transition: opacity 250ms;background-color: #2980B9;}

.relatedpost1 .centered-text-area {width: 100%;position: relative;}

.relatedpost1 .Textrpt {border-bottom: 0 solid #fff;color: #FFFFFF;font-size: 16px;font-weight: bold;margin: 0;padding: 0;text-decoration: underline;}

.relatedpost1 .postTitle1 {color: #FFFFFF;font-size: 16px;font-weight: 600;margin: 0;padding: 0;width: 100%;}

.relatedpost1 .Buttonrp {background-color: #764b6a!important;color: #ECF0F1;border: none;border-radius: 3px;box-shadow: none;font-size: 14px;font-weight: bold;line-height: 26px;moz-border-radius: 3px;text-align: center;text-decoration: none;text-shadow: none;width: 80px;min-height: 80px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7zCu-7WxW655lrcxEshQ4qLcrCDHDNNBvBFujFoQ2TpjjEYJC7m2dI-XoPKipQ0rcmXh88oUna2hGG5WIZwVspfpUrLuxmUr7S8cXvOETwRii_9aZPTH4S4E6PE0KR_wLr3frU80atDM/s1600/arrow-relatedpost1.png)no-repeat;position: absolute;right: 0;top: 0;}

.relatedpost1:hover .Buttonrp {background-color: #3498DB!important;}

.relatedpost1 .centered-text {display: table;height: 80px;padding-left: 18px;top: 0;}

.relatedpost1 .relatedpost1-content {display: table-cell;margin: 0;padding: 0;padding-right: 108px;position: relative;vertical-align: middle;width: 100%;}

.relatedpost1:after {content: "";display: block;

clear: both;}

Kemudian SAVE dan selanjutnya letakkan kode dibawah ini di dalam posting, bisa pada paragrap pertama, kedua, ketiga dan seterusnya sesuai selera teman bloger semua.

<a href="http://skindezign.blogspot.com/2018/06/cara-meletakkan-kode-iklan-dengan.html" target="_blank" class="relatedpost1"><div class="centered-text-area">

<div class="centered-text" style="float: left;">

<div class="relatedpost1-content">

<span class="Textrpt">Baca Juga</span>  <span class="postTitle1">Cara Meletakkan Kode Iklan Dengan Sempurna Ditengah Posting</span></div>

</div>

</div>

<div class="Buttonrp">

</div>

</a>

Ganti teks yang berwarna merah disesuaikan dengan judul post dan link yang mau ditampilkan pada related post.

Result

Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.