Selasa, 19 November 2013
Cara membuat related post part 3
Jika sobat lihat dari judul artikel kali ini mungkin sobat dah bosan dengan bahasan yang itu melulu, dari kemarin yang saya bahas selalu tentang cara membuat related post atau artikel terkait. Eitsss… Jangan salah sangka dulu sob soalnya pada postingan kali ini saya akan mencoba membuat related post yang kalo saya boleh bilang sih jauh berbeda dengan related post yang sebelumnya, karena related post kali di sertai dengan kotak berlangganan via email by feedburner dan related postnya pun menggunakan thumbail sehingga terlihat lebih menarik dan jelas akan terlihat makin trendy tentunya. Tampilannya akan nampak seperti gambar yang di atas.
Untuk membuat related post dengan thumbail dan kotak berlangganan via email by feedburner ikuti tutorial berikt ini.
1. Login ke blogger atau klik disini
2. Pilih template.
3. Pilih edit html.
4. Centang Expand widget template
5. Copy script di bawah ini dan letakkan di atas code ]]></b:skin>
#related{background:#222; border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px}
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
#related .related-posts{font-weight:400;width:50%;float:right}
#related .related-posts p{margin:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
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}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
#related .subscribe{width:43%;float:left;color:#bdbdbd;}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5VDJz5kI6CxMoSuv48xMA894ewatZxjFPWpU7qtcbtzNOe9gwFSqFCV4vq2MmzgGV-15x2SaPaFVKI78EVkkTM8jzrNYpLq42HSJgOV9NzFti5ah63b7AIf1m6F9NsiucW1DSPnOzPoU/) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
6. Copy script di bawah ini dan letakkan di bawah code <data:post.body/>
<b:if cond=data:blog.pageType == "item"><div class=clearfix id=related><div class=related-posts><p>Related Articles</p><script type=text/javascript>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSTr8PmLt7zp5MLoieMh7ihFWRbCjxFIvWyboIU1Eh1nglTH0L9vo5TNjUDG8GsiT4GCbKMwxMbS0e-qmEBGfsDUt9bjHVT74YqdkVhGYnWWvesbEaPYWzQkkMd9szaLugeCUXbAP2uwA/s1600/no+image.jpg";var maxresults=6;</script><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></div><div class=subscribe><p class=intro>If you enjoyed this article just <a href=http://feeds.feedburner.com/Junedalbughisy target=_blank title=feedburner><b>click here</b></a>, or subscribe to receive more great content just like it.</p><p class=feed><a href=http://Junedalbughisy.blogspot.com/feeds/posts/default>Subscribe 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=Junedalbughisy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true target=popupwindow><input name=uri type=hidden value=Junedalbughisy/><input name=loc type=hidden value=en_US/><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..../><input id=botsubbutton type=submit value=Submit/><br/><small>Your information will not be shared. Ever.</small><br/><a href=http://feeds.feedburner.com/Junedalbughisy><img alt= height=26 src=http://feeds.feedburner.com/~fc/Junedalbughisy?bg=ceaa6c&fg=444444&anim=1 style=border:0 width=88/></a></form></div></div></b:if>
Catatan:
- Tulisan yang berwarna biru ganti dengan ID feed sobat.
- Tulisan yang berwarna merah silahkan sobat ganti dengan URL blog sobat.
7. Dan yang terakhir simpan template.
Semoga bermanfaat dan jangan lupa like dan komentarnya demi kemajuan blog ini.
Tidak ada komentar:
Posting Komentar