Cara Membuat Related Post Responsive di Dalam Artikel

Banyak yang penasaran bagaimana cara mudah untuk membuat sebuah related post responsive di dalam artikel. Umumnya berbagai script yang diberikan hanya memberikan script related post setelah atau dibawah artikel. Kali ini saya akan membagikan cara untuk dapat membuat related post yang dapat diletakan bebas di dalam struktur artikel kita. Walaupun dengan cara manual dalam peletakannya, tetapi tampilan profesionalnya mampu membuat pengunjung akan terus membaca artikel kita lainnya.

/* CSS Related Post 1 */
.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: #2980B9;
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: #27AE60;
}

.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: #3498DB!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/AVvXsEgHVERcK_H2VAu-UNkOegvjs1LI0Orj1EFZ89EjkTinOeoRvzMVrkTz8rc8oelK2sw4OtXZpgSxyJyxhRo0rnpTyk3KC4w5J5JJxXlArr3cXBafH8eQOFubMdQ2J_wZRYFInWUBYBt1Xdk/s1600/arrow-relatedpost1.png)no-repeat;
position: absolute;
right: 0;
top: 0;
}

.relatedpost1:hover .Buttonrp {
background-color: #2ECC71!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;
}

Script CSS diatas dapat diletakkan di atas kode ]]></b:skin> didalam edit HTML Blogspot anda. Kemudian simpan dan lanjutkan untuk meletakan script Related Post dibawah ini di dalam artikel blog anda.

<a href="http://www.seogereggi.com/2015/11/cara-meningkatkan-pengunjung-website-dengan-mudah-versi-2.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 Meningkatkan Pengunjung Website Dengan Mudah Versi 2</span></div>
</div>
</div>
<div class="Buttonrp">
</div>
</a>

Script Related Post diatas dapat diletakan setelah paragraf pertama atau kedua dan seterusnya. Jangan lupa untuk mengganti mode HTML terlebih dahulu saat memasukan script diatas di dalam artikel anda. Sebenarnya ada banyak manfaat diperoleh jika kita memberikan related post pada paragraf suatu artikel, yaitu pengunjung akan senang membuka related post yang anda sarankan, dan dapat membuat bounce rate blog anda menjadi kecil. Berikut adalah contoh tampilannya setelah dipasang di dalam artikel anda.

Baca Juga  Cara Membuat Related Post Responsive di Dalam Artikel

Anda pun dapat merubah warna tombol related post sesuai dengan keinginan anda pada kode CSS yang telah tersedia. Anda pun dapat mengganti kata "Baca Juga" dengan kata-kata lain seperti "Top Article", "Best Article", "New Article" dan berbagai kata menarik lainnya. Sekian tips singkat mengenai cara membuat Related Post Responsive di dalam Artikel blog anda.

Related Posts:

Tweet