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

Tweet

D-Copy Blog | Selamat malam teman-teman semua ( Sabtu, 13 Oktober 2012 - 21:30 WIB), 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 :

1. Buka akun Blogger Anda
2. Masuk ke Menu Edit HTML, jangan lupa centang Expand Template Widget
3. 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 :

#related-posts{float:left; width: 60%;  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: 38%; height:250px; padding: 0px 0px 5px;}
.authorinfo { font-size: 12px; border-bottom:double 3px #e6e4e3; margin: 10px 0 10px 0;}

.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/AVvXsEgmXAOW3_TSxDV8OOxF34vVB6ju7jHtuqdz9unuZYSm2hBAPNbcFq_dGHi1ha7DLpnPKKV_GQZcliDqAEr51VuF6HjOpg4DdNm1DyHriY0Z9Y9c8OqjN_j4F6RVTelE9_u5sZjT2OMXpEY/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 :

<div class='post-footer-line post-footer-line-3'>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- Script Artikel Berlangganan D-Copy Blog -->

<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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=diesilver&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'><div align='left'>

<input class='inpRssardi33' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketikkan email anda disini&quot;;}' onfocus='if (this.value == &quot;Ketikkan email anda disini&quot;) {this.value = &quot;&quot;;}' 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&amp;fg=fffffff&amp;anim=0' style='border:0' width='88'/></a>

</td>

</tr>

</table>

</div>

</div>

</div>

<div class='clear'/>

<!-- End Artikel Berlangganan D-Copy Blog-->

<div id='related-posts'>

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

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>

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

</b:if>

</b:loop>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

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>

Keterangan :

• Ganti kode-kode yang diwarnai diatas sesuai dengan kebutuhan blog Anda.

     9.  Save template Anda,

Jangan lupa untuk join D-Copy Blog melalui blog ataupun join melaui Facebook.