Cara Buat Kotak Berlangganan, Artikel Terkait dan Facebook Fanpage Hanya di Postingan Blog ~ smb jagasatru

Monday, October 22, 2012

Cara Buat Kotak Berlangganan, Artikel Terkait dan Facebook Fanpage Hanya di Postingan Blog

kali ini saya akan memberikan paket istimewa untuk Anda, yaitu kotak berlanganan, artikel terkait dan facebook fanpage hanya di postingan blog saja. Banyak sekali teman-teman blogger yang menanyakan kepada saya bagaimana cara membuat paket istimewa ini. Namun, sangat jarang blog/website yang memberikan paket seperti ini atau mungkin tidak ada. Saya hanya menggabung-gabungkan widget ini saja dan satu yang paling penting diantara itu semua adalah penalaran kecil saja sob, seperti dibawah ini penampakannya sob :

Seperti yang sudah Anda lihat pada gambar diatas dan saya terapkan pada blog saya, memang lumayan keren juga menurut saya. Itu juga sebabnya teman-teman blogger menanyakan bagimana cara melakukan trick diatas. Widget-widget diatas memang hanya muncul dipostingan saja. Saya terinspirasi dari dari template saya sebelumnya dan sempat mikir-mikir juga untuk mengganti template. Jadi juga saya mengganti template dan seperti yang saya gunakan saat ini (kata-kata saya terlalu baku yahhh bagi kamu? Haha :D biar lebih mudah juga entar di translatekan bule. kwwkwk).

Langkah :

Buka akun Blogger Anda
Masuk ke Menu Edit HTML, jangan lupa centang Expand Template Widget
Cari kode dibawah ini :

</head>

4. Pastekan kode dibawah ini, dan letakkan diatas pada kode diatas :

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>

5. Cari kode dibawah ini :

]]></b:skin>

6. Diatas pada kode diatas, pastekan kode dibawah ini :

*--- Artikel Terkait http://d-copy.blogspot.com ---*
#related-posts{float:left; width:340px; padding: 0px 3px;}
#related-posts {font-size:16px; text-align:left; color: #1476cc; font-weight: bold;}
#related-posts a{font-size:12px;}
#related-posts li{list-style:decimal; border-bottom: 1px dashed #ccc;}
#box-kanan{float: right; width:294px; height:250px; padding: 0px 0px 5px;}
.authorinfo { font-size: 12px; border-bottom:double 3px #e6e4e3; margin: 10px 0 10px 0;}
*--- Kotak Berlangganan http://d-copy.blogspot.com ---*
.kotakRSS1 {background-color: rgb(255, 255, 255); -moz-border-radius: 5px;-webkit-border-radius:5px; border: 1px solid #cccccc; padding:5px 10px; margin: 0 0 10px 0; } .Rssardi33 { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAmwAsKhL2O3i23Qq8c-3oJiVktj8s2_H7Q4NhwEDCyemy86jU6RTi2G3BxMwbiijIaSTlOGtmxpWYJSK8Jl8C4drWnv5rFiGiVgjAQpR4uHM-HFlnCWKJgBJj6L4v9VonnMssqzjiIF0/s1600/maskolis.co.cc.jpg') no-repeat bottom right; } .Rssardi33 a { background: none;} .inpRssardi33 { border: 1px solid #B9C1C6; width: 170px;height: 16px; font-size: 12px; padding:3px 4px 4px 10px;-moz-border-radius:5px;-webkit-border-radius: 5px;} .sbmtRssardi33 {background:#9b9b9b;border: 1px #9b9b9b solid;color:#FFF;font-size:12px;font-family:Arial,Tahoma,Verdana;margin-left:5px;padding:3px 5px 3px 5px;font-weight:bold;-moz-border-radius:7px;-webkit-border-radius: 7px;} .ardi33subs table {border-collapse: inherit; border: none;} .ardi33subs tr { border:0;} .ardi33subs td { border:0;} .ardi33subs th { border:0;} .clear { clear: both; }

6. Cari kode dibawah ini :

<data:post.body/>

Keterangan :

Pada beberapa template kode diatas bisa jadi 3-4, pada template saya ada 4 dan saya mempastekan kode dibawah ini pada kode ketiga, disini Anda dituntut harus mengerti sendiri bagian-bagian HTML Anda, jadi Anda sendiri yang harus mencari pada kode keberapa paket widget-widget yang hanya hanya muncul di postingan saja.

7. Pastekan kode dibawah ini, dibawah pada kode diatas (langkah 6) :

<b:if cond='data:blog.pageType == "item"'>



<div class='kotakRSS1'>

<div class='Rssardi33'>

Anda sedang membaca Artikel tentang <strong><u><data:blog.pageName/></u></strong>, jika Anda menyukai Artikel di blog ini, silahkan masukkan email Anda dibawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel baru.

<div class='ardi33subs'>

<table border='0' cellpadding='0' cellspacing='0' width='100%'>

<tr>

<td align='left' style='padding:5px 0 0 0;' valign='top' width='65%'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=diesilver', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'><div align='left'>

<input class='inpRssardi33' name='email' onblur='if (this.value == "") {this.value = "Ketikkan email anda disini";}' onfocus='if (this.value == "Ketikkan email anda disini") {this.value = "";}' type='text' value='Ketikkan email anda disini'/>

<input name='uri' type='hidden' value='blogspot/frUpz'/>

<input name='title' type='hidden' value='blogspot/frUpz'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='sbmtRssardi33' type='submit' value='Subscribe'/></div>

</form></td>

<td align='left' style='padding:6px 0 0 0;' valign='top' width='35%'><a href='http://feeds.feedburner.com/blogspot/frUpz'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/blogspot/frUpz?bg=9b9b9b&fg=fffffff&anim=0' style='border:0' width='88'/></a>

</td>

</tr>

</table>

</div>

</div>

</div>

<div class='clear'/>



<div id='related-posts'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=11"' type='text/javascript'/>

</b:if>

</b:loop>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

Artikel Terkait

<script type='text/javascript'>

removeRelatedDuplicates();

printRelatedLabels();

</script>

</b:if>

</div>

<div id='box-kanan'>

<div class='fb-like-box' data-header='true' data-height='292' data-href='http://www.facebook.com/dcopy.blog' data-show-faces='true' data-stream='false' data-width='292'/>

</div>

</b:if>