Cara Pasang Related Post with Subscribe Box Keren

Pasang Related Post with Subscribe Box. Bagi blogger newbie seperti saya membuat blog dengan tampilan menarik menjadi harapan sejak dulu. Bongkar pasang template, widget sudah saya lakukan tetapi masih saja ada yang kurang. Sebelumnya kemarin saya juga sudah sharing tips blog cara membuat headline news keren, kali ini saya coba mengganti widget Related Post with Subscribe Box yang saya gabung menjadi satu kolom. Mungkin sobat PoztART juga tertarik pasang widget Related Post with Subscribe Box di blog? Sangat mudah sekali memasang widget tersebut.

OK melalui post ini saya ingin sedikit berbagi tentang tips blog pasang related post with subscribe box keren yang mungkin bisa menambah tampilan blog menjadi lebih keren dan yang pasti dua widget tersebut tidak akan memakan banyak tempat di blog kamu.

Penampakannya widget tersebut terlihat seperti gambar dibawah ini:

OK sekarang kita jalankan langkah-langkah tips blogging berikut.

Sebaiknya sebelum memulai menjalankan langkah cara memasang Related Post with Subscribe Box ini, backup dulu template sobat untuk menyiasati seandainya ada kesalahan script yang akan di instal. Kalau sudah, seperti biasa langkah awal tentu dengan LOGIN Blog kamu dulu, dan selanjutnya menuju tab RANCANGAN >> EDIT HTML (centang Expand Widget Template)

Cari kode ]]></b:skin> dan masukkan kode berikut di atas kode ]]></b:skin>

#related{background:#ffffff; border:1px solid #fff; border-bottom:1px solid #fff; border-right:1px solid #fff;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px}<br />
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}<br />
#related .related-posts{font-weight:400;width:50%;float:right}<br />
#related .related-posts p{margin:0}<br />
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}<br />
*html ul.rp#related-posts li{margin:0 13px}<br />
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}<br />
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}<br />
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}<br />
ul#related-posts li img{bottom:0;padding:0!important}<br />
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}<br />
#related .subscribe{width:43%;float:left;color:#bdbdbd;}<br />
#related .subscribe p.intro{font-weight:400}<br />
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguGFjdomMP-hpYldohLjz1U5pOCAvFPmxvX2SOxIopfY2CC7rAHoy-qfi-F1rxWmVTv-OjXRIDx7tIu0hLRKn8zK25iMYcsAkDYJvrVhyphenhyphen-89NHDgs6z5J-cWcocyhOy6ilE_lDYSj5LTw/) 0 50% no-repeat;vertical-align:middle}<br />
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}<br />
.clearfix{display:inline-block}

SIMPAN

Buka dan cari lagi kode <data:post.body>, dan masukkan kode berikut diatas kode <data:post.body> atau bisa disesuaikan dengan template sobat.

<b:if cond='data:blog.pageType == "item"'><br />
<div class='clearfix' id='related'> <div class='related-posts'> <p>Baca Yang Lebih HOT Disini</p><script type='text/javascript'>  var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRsAKn5moYpoiB3BXI4Sl-EvDT6YDkg05OVBuXaHoOlqGR1e4t5zkV8y0ME7kY2Qa_uQmyfFpbxlk1cQ_iCX_uatw029SW-7s_uHbuMrHRorWrI_MboA3p9vrWtMyMGvLUNqYnXKa7zBo/s1600/no+image.jpg";  var maxresults=6;  </script><br />
<script src='http://johnytemplate.googlecode.com/files/related.js' type='text/javascript'/>  <b:loop values='data:post.labels' var='label'>  <b:if cond='data:label.isLast != "true"'>  </b:if>  <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/>  </b:loop>  <script type='text/javascript'>  removeRelatedDuplicates_thumbs();  printRelatedLabels_thumbs("<data:post.url/>");  </script><br />
</div><div class='subscribe'> <p class='intro'>Tertarik dengan artikel diatas? <a href='http://feeds.feedburner.com/NAMA_FEED_ANDA' target='_blank' title='feedburner'><br />
<b>KLIK DISINI</b></a>, atau Anda bisa berlangganan artikel DI SINI dengan memasukkan email dibawah.</p><p class='feed'><a href='http://URL_BLOG_SOBAT_DISINI/feeds/posts/default'>Berlangganan via RSS Feed</a></p><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=NAMA_FEED_ANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='NAMA_FEED_ANDA'/><br />
<input name='loc' type='hidden' value='en_US'/><br />
<input id='botsub' name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = "";}' type='text' value='Enter your email....'/><br />
<input id='botsubbutton' type='submit' value='Submit'/><br />
<br />
<small>Your information will not be shared. Ever.</small><br />
<br />
<a href='http://feeds.feedburner.com/NAMA_FEED_ANDA'><img alt='NAMA_FEED_ANDA' height='26' src='http://feeds.feedburner.com/~fc/NAMA_FEED_ANDA?bg=0000ff&fg=ffffff&anim=1' style='border:0' width='88'/></a><br />
</form></div></div></b:if>

Sebelum disimpan ganti url http://feeds.feedburner.com/NAMA_FEED_ANDA dengan URL Feed blog sobat contoh http://feeds.feedburner.com/PoztArt. Dan url http://URL_BLOG_SOBAT_DISINI ganti dengan url blog sobat, kalau semua langkah sudah dilakukan baru SIMPAN. Langkah tips blogging membuat Related Post dan Subscribe Box yang ini sangat sederhana tapi bisa menambah penampilan blog menjadi lebih keren. Silahkan ikuti tutorialnya kalau Anda ingin membuat widget tersebut.