Tampilan Social Subscription Button Sliding Effect Dengan CSS3

Semakin maraknya tampilan blog dengan menggunakan fitur fitur CSS,maka untuk itu pada kesempatan ini saya akan coba berikan tutorial tentang Membuat tampilan button sliding Effect Dengan CSS,bagi sobat yang penasaran silahkan lihat demonya.

Bagi sobat yang mau mencobanya silahkan ikuti tutorialnya.

1.  Kode Snippet 

q:before,q:after{content:''}
ol,ul{list-style-position:outside;padding-left:.95em}
li{list-style-type:disc}ol li{list-style-type:decimal}
.pbt_share-links{font-size:.8em;width:215px;z-index:1;}.pbt_share-links>
.heading{display:inline-block;min-width:105px;text-align:center;color:#000}.pbt_share-links>
ul{margin-bottom:29px}.pbt_share-links>
ul>
li{display:inline-block;overflow:hidden;margin-left:5px; padding:0px;}.pbt_share-links .share-link{display:inline-block;width:20px;height:20px;line-height:20px;text-align:left;background:#606060 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCCSdg8WA8BMsOeIdYYxGzzbetndJ8alSPZLJkyLyCJIKAbUumbbethRerc8xYQfnDdNrX_v70VDf-9osd_kU_su0pE4HsQQl02o7NJJx0Y2Za1fvbRqoY8qC0UNO_j3IvAwKSBZOZ4TBJ/s1600/social-sprite.png") scroll 0 0 no-repeat;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-transition:none .3s ease-out;-moz-transition:none .3s ease-out;-ms-transition:none .3s ease-out;-o-transition:none .3s ease-out;transition:none .3s ease-out;-webkit-transition-property:min-width,background-color;-moz-transition-property:min-width,background-color;-ms-transition-property:min-width,background-color;-o-transition-property:min-width,background-color;transition-property:min-width,background-color;min-width:0;color:#fff}.pbt_share-links .gplus{background-position:0 0}.pbt_share-links .gplus:hover{min-width:111px;background-color:#dd4b39}.pbt_share-links a.twitter{background-position:0 -20px}.pbt_share-links a.twitter:hover{min-width:83px;background-color:#419ad9}.pbt_share-links a.facebook{background-position:0 -40px}.pbt_share-links a.facebook:hover{min-width:94px;background-color:#3b5998}.pbt_share-links a.email{background-position:0 -60px}.pbt_share-links a.email:hover{min-width:77px;background-color:#5fc355}.pbt_share-links .share-link>
span{display:inline-block;width:300px;padding-left:23px;color:#fff}.pbt_share-links .gplus>
span>
div{position:relative;top:2px;right:-2px}.page_title{margin:5px 0 0 0}

 

2. Pilih menu Template > Edit HTML

3. Cari kode ]]></b:skin> dan letakan kode snippetnya yang tadi  di atas kode ]]></b:skin>

Setelah penempatan kode di atas selesai kemudian

* Kembali ke menu dan pilih Tata Letak 

* Add Gadget > HTML/Javascript

* Letakan kode di bawah pada bagian kolom konten

<div class="pbt_share-links">
  <ul>
    <li>
      <span class="share-link gplus" title="LABSTRIKE on Google Plus">
        <span>
          GOOGLE + 
          <g:plusone size="small" annotation="none"
          href="Web URL">
          </g:plusone>
        </span>
      </span>
    </li>
    <li>
      <a class="share-link twitter"
      href="http://twitter.com/Username"
      title="LABSTRIKE on Twitter">
        <span>
          TWITTER
        </span>
      </a>
    </li>
    <li>
      <a class="share-link facebook"
      href="http://www.facebook.com/Username"
      title="LABSTRIKE on Facebook">
        <span>
          FACEBOOK
        </span>
      </a>
    </li>
    <li>
      <a class="share-link email"
      href="mailto:Your Email ID" title="Receive LABSTRIKE Updates via Email">
        <span>
          EMAIL
        </span>
      </a>
    </li>
  </ul>
</div>
<!-- .pbt_share-links -->
<script type="text/javascript">
   
  var po = document.createElement('script');
   
  po.type = 'text/javascript';
  po.async = true;
  po.src = 'https://apis.google.com/js/plusone.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);
</script>

Keterangan :
Untuk tulisan yang berwarna merah silahkan ganti dengan URL blog sobat.
Untuk yang berwarna hijau ganti dengan nama account sobat.
Untuk yang berwarna pink ganti dengan alamat email sobat.

4. Setelah semuanya beres tinggal save dan lihat hasilnya.


Selamat Mencoba.............

Cara Membuat Box Email Hover Style Subscription with css

 

 

 

 

 

 

 

 

Salam sobat,gimana kabarnya....? kita jumpa lagi,sebelumnya saya sudah banyak membahas tentang tentang tampilan button dengan CSS,kini saya coba buat artikel tentang cara membuat tampilan box email dengan hover style,terdapat lima social box yang bisa sobat gunakan sebagi petunjuk halaman buku.Buat sobat yang ingin mencobanya silahkan ikuti tutorialnya karena ini sangat mudah.

1. Login dulu ke blog sobat.

2. Pilih Tata letak > Add Gadget.

3. Pilih HTML/Javascript.

4. Pastekan kode di bawah pada kolom konten.

<style>
.tbisubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 300px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbisubscribe'>
<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=pengembarabiru&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='pengembarabiru' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}'
onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}'
type='text' value='Enter your email...' />
<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='FACEBOOK URL' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh56AjFmla1tDmdJR4QA6o6xbne0LE9cOrkCYnCQnQkZjTikbianlBsM_xJqedVurUSpshO_icpz_yj9zt1RrRPtWp_YC0LLOLYXYormYRG9hYp_kVOpaJqfgeQRNTt-xYVbzmDQQhk1Xg/s1600/facebook500.png' alt='facebook'/></a>
<a href='TWITTER URL Sobat' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIKJoO95RUZZg-5VcJpq6UkI89vdJA3wLydfjQhEbesIG5DxgW-V6kb6pchO3gDlY7ksRlQOapIJ2jlWjEp4gGbU4TnytLHitDJ5736SGXRltutKq2-CbFEwxqz7l8sjK0StYcOGjasUM/s1600/twitter.png' alt='twitter'/></a>
<a href='GOOGLE+ URL Sobat' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkaYuTWsrifl2CxNMVpmd5W2qHRP2slYx_d_FevRU6bEvVDivZPPIlBhIO7EqhNG3Iix-m2pYZYfU6ls26jlowFFqdYIiyBOBraQ2GaQvNmf7qZScSiAHJn8ZPftiImxwhqYgRnARMnM/s1600/googleplus-revised.png' alt='gplus'/></a>
<a href='PINTEREST URL Sobat' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTOTzahv4LYrVTqqmMkrUOgFyQIoCKKnKZ1R9u-26O1qej-aC-so9s_up1inO3oZZUO5kO4ffaQkHUNbM2oeDyJju1Qo4rXDUP57W8pH6WCqLqC4KGrwsLHjLpqXpVm7smvLnn5ikE_HY/s1600/pinterest.png' alt='pinterest'/></a>
<a href='RSS URL Sobat' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiubYzq4KkbyWCau3Si_7WW4HAbkoao5jbqOhLeNQEtHbKe3H4c6jeCbi0QU0lk1E3drFGxsqFSOHKd9SbPhcLuLjknsxHVDGYZcJWuO8qEIXBP5edBMyyv9AX8ovzCpOXk6zq_3U54zl8/s1600/rss.png' alt='rss'/></a>
</div>
</div>

Keterangan:
Untuk tulisan yang berwarna Hijau bisa sobat ganti dengan nama sobat.
Untuk tulisan yang berwarna Merah Silahkan ganti dengan URL yang di tuju.

Setelah semuanya beres kemudian save,dan silahkanlihat hasilnya.

Membuat widget Subscription dengan Social Media dibawah postingan

Menambah widget subsciber dibawah posting tentu akan menambah pembaca blog anda. Karena menurut penelitian saya :D , orang-orang / visitor itu hanya akan terfocus pada artikel sampai ke bagian komentar. Anda dapat melihat bentuk widget dari screenshot diatas, terdiri dari subscription box, RSS link, twitter link, facebook link, and google + link. Ok langsung saja, jika anda tertarik menggunakan widget ini, ikuti step by stepnya:

Menambah Subscription Box With Social Media Buttons dibawah Postingan 

• Masuk ke Blogger.com
• Masuk ke Template > Edit Html
• Temukan kode  <data:post.body/>
• Simpan kode dibawah ini tepat dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.RBstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLEHpVCAMIbv_KJgkAZT_tqi0YggAGHAH_T14LdwmpRJEx-ezZkq1Ci3TVgOOrNllKrW_aYmlcNH-gJFz5g9Zb22Rqg8aLIGXMsJT5C5bikvsP8zh87bUuXay45Ty70feVM4c3kdE2jIVU/s400/email_icon.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.RBsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#emailwidget-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>

<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>

<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=
lagudjawaasli&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>

<input name='uri' type='hidden' value='Realcombiz'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='RBstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>

<input alt='' class='RBsubmit' title='' type='submit' value='Submit'/>
</form>
</td>

<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=lagudjawaasli' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRn3UT8zXSEUgryRWfNn9a7Fsjh58JRznfM-6lNjwtm2wn5yLB4PNdBqcIJtTReBwcfi7evhXW1Iq6D64iumMlquFigYLLxewbAfPYcLsyY3QsbHF1IxE39eXgRmLedNNcxjdw6xtpLQg/s1600/rss-30×43.png'/></a>

<a href='http://twitter.com/lindamarlina40' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtfpl7PzCUu939JnFN3YldgZkeDD7EMEHLSUTJn_66NKcd-JlQroo4E9rYr0FNWr2tnIHsnyKF1LjP0MVS7QaF8lIrNmpYEXQvVqcPKNAnOtpEghT7Q2MiLwr01WvqGFwqQH-wrgbgraw/s1600/twitter-30×43.png'/></a>

<a href='http://www.facebook.com/arieadie30' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3PV_2S3ReWgSIIbS_r9Z-WueuLz9alHUOxHrOXHkBxvn2N8ovgedxrT4EzZL3soqDiDwVVw3R9EhoUh9kC1G1a55R9xh6sfWIwbrodSUTq6zQPIwbBHdglIYkma3ZnbcUJea3KY5MUls/s1600/facebook-30×43.png'/></a>

<a href='https://plus.google.com/112756918350798570373' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4dqEmiG1hAxrTghpW1vj8KhpUj0wMA-eRu0KvUclaN4NtcwKjrMvINi5w4Km2h0kXg5tNJ3TTTX77VcPjtzt8YbZDQQPxkyd2TqlLWbzf_aYHSAQPC11OIq8dtTpJ-np1THaY_yEqho8/s1600/googleplus-30×43.png'/></a>

</td>
</tr>
</tbody></table>
</div></div>
</center>
</b:if>

Keterangan:

• Ganti lagudjawaasli dengan username feed burner anda.
• Ganti lindamarlina40 dengan username twitter anda.
• Ganti arieadie30 dengan username facebook anda.
• Ganti https://plus.google.com/112756918350798570373
•  dengan google+ url anda.

Click Save Template

Sekian post tentang Membuat widget Subscription dengan Social Media dibawah postingan. Semoga dapat bermanfaat :)

Memasang Related Post dengan Kotak Berlangganan

Bocah Poris Blogs | Cara Membuat Artikel Terkait with Thumbnail di Blogger Dengan Kotak Berlangganan ini Sangat Mudah Jika Kalian ikuti Tutorial ini Dengan Seksama. Sebelumnya saya sudah Membuat Artikel Tentang Cara Membuat Recent Post Menurut Label . Sebelum Kita Ke Tutorial Memasang Related Post dengan Kotak Berlangganan ( Kotak Feedburner ) Kalian Harus Mengetahui Apa sih Fungsi Kita Memasang Artikel Terkait Dengan Kotak Berlangganan dari Feedburner ini ? yang Kalian Tahu Sebelumnya Artikel Terkait Berfungsi Untuk Pengunjung Menjelajahi Blog kita dan Menghindari namanya Bounce Rate. dan satu lagi Fungsi Kotak Berlangganan Dengan Kotak Berlangganan ini Memungkinkan Para Pengunjung Untuk Berlangganan Artikel Kita Via Email. dan Dengan Fungsi Berdampingan Juga untuk Tidak Memakan Banyak Tempat.
Artikel Terkait Dengan Thumbnail atau Gambar dan Kotak Berlangganan Banyak Sekali dicari .. :v Mungkin ...

nah Kita Langsung Ke Tutorial Cara Memasang Artikel Dengan Kotak Berlangganan Keren  dengan Mudah 

1. Login Seperti Biasa Ke Akun Blogger Anda


2. Setelah Login Masuk Ke Menu Template Anda


3. Lalu Klik Edit HTML > Centang Expand Template Widget

4. Lalu Cari Kode dibawah ini

]]></s:kin>

5. Setelah Ketemu Copy kode dibawah dan Taruh Tepat diatas ]]></s:kin>

#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/AVvXsEhA0JYKk5Ro7jGLaFjF3CQ4NLi5NAf22o3luKQ6SHCIBI09RBp_jXqHMD4iCMsLct20IoBZUhb0zWcjpEYYyY79YVJPXgs0Lq92VnhRqeaByYuLBGCODx2dQFk7sgQW85MbAjqzEMxeje4/) 0 50% no-repeat;vertical-align:middle}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

6. Setelah Itu Cari Lagi kode dibawah

 <data:post.body/>

Keterangan : Biasanya Kode <data:post.body/> ada 3-4 Bagi Kalian yang sudah Memasang Auto Readmore .
Taruh Saja diantara Kode 2 atau Kode ke 3

7. Setelah Ketemu Lalu Copy lagi Kode dibawah <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Related Articles</p>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBLxYiqEIkrKHZ6A_OuvOmxcR-hxM4a9kHfw524ue2E1X46xdYAcCjaEoQHhM3xXkbsfloMahMH31VPAwpVjMiUsuwY5lwSko3DgwMEPCDGPG-uVjiI4-xAF1D1VQ4-L7cp2dd3DzvDtA/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://bocahporis.googlecode.com/files/related-withsubcribs.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
<div class='subscribe'>
<p class='intro'>Jika Kalian Ingin Berlangganan Klik Disini <a href='http://feeds.feedburner.com/bocahporis/update' 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://bocahporis.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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID feedburner Anda&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='ID Feedburner Anda'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Informasi Anda Tidak akan Kami Bagikan Selamanya.</small><br/>
<a href='http://feeds.feedburner.com/bocahporis/update'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/ID Feedburner Anda?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>

Keterangan :

1.  Kode yang Berwarna Merah adalah Id Feedburner Anda
2. Kode yang Berwarna Orange Ganti Dengan Alamat Blog Anda
3. Kode yang Berwarna Biru Muda adalah Maksimal Artikel Terkait yang Muncul , Ganti Sesuai Kemauan Anda
4. Kode yang Berwarna Hijau Ganti Sesuai Kemauan/ Kata- Kata  Anda Sendiri

8. Klik Simpan dan Lihat Hasilnya di Blog Anda

Nah Cukup Sampai disini Artikel Cara Memasang Artikel Terkait Dengan Kotak Berlangganan 

Semoga Dengan Widget ini Pengunjung blog Anda Semakin Ramai

Cara Membuat Email Subscription Dengan Gambar, Keren!!

                                                

Email Subscription dengan Gambar Adalah Salah Satu Cara untuk Memcantik Kotak Email Subcription agar  pengunjung lebih tertatik. Email Subscription ini Dilengkapi oleh Beberapa Tombol Social Media. Seperti Facebook Dan Twitter. Dengan Gambar yang diberi Efek Sketsa. Memasang Widget Email Subscription ini tidak memerlukan tempat yang cukup besar. dan Cara untuk memasangnya juga tidak perlu mengedit HTML Template anda. Untuk itu saya akan memberitahu cara untuk membuat Email Subscription Dengan Gambar. Untuk cara memasangnya, Anda harus ikut cara berikut ini:

• Silahkan Loggin Ke Blogger Anda.
• Setelah itu, Klik Menu Tata Letak dan Add Gadget HTML.
• Masukan kode Berikut ini:

<style class="text/css">table { border-bottom: 1px solid #E6E6E6; float: center; width: 280px; margin:10px 0 0 20px; } .subicons { border-right: 1px solid #E6E6E6; } .Fadeout { filter:alpha(opacity=100); opacity: 1.0; border:0; } .Fadeout:hover{ filter:alpha(opacity=80); opacity: 0.8; border:0; } </style><div class="table"><table><tr><td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/pages/Your-Belajar-Blog/395122827241045?ref=hl" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilqoxWEwMtNtsw5fGgQoDygtgSuib1ln00R8Br6cLkYe56QmszRaLdLtX2JH-mS8HV8P5ZFFiDCGhFklniQ2SVZVod5CNf_IoE1DYMA-otVVj1ajjboKzEnxE5PpZzgYDmVot_XP681KPt/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/YourBelajarBlog" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkFqCclXPlZNZZfmLEKPf7JFRXSIz0K0oXDswzeiq7GzA1flRbGq7KFOIpNCFpy3askTBvaTF1R0vHEik9O8WzXHUBUJ00SCR-ogctw-rpB6b1Wmub8rbrSyUHdpVdONJOWPWc7HlgbaR5/s1600/twitter-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/your-belajarblog" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie-tvbfgZN9TQtgkLyZX_YQD1HKP7nSCUsQiikYQJkKFuHYpot51c0CF3ehEKCzS47pPVPNJ4jV3VtlW9OVr2EdzpklvDmx_IInUmGzWnQAu6FqBaXa0gsYBjILdrRBm7TzeB4V92yLRLz/s1600/rss-48.png" /></a></div></td><td><a class="Fadeout" href="https://plus.google.com/114812141180411759844" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjThYTyCXJOV91yeiVe25fnTVu-jHDEe40K4vPUH66sllxH4QHwxbwqR1WcvMHu00q2-qIO7Tsoyp-umkH8ZUCINckZxxtl3TnPs6eGCMfF5KDxtQXsJwvJMkunEOcMML8GkWDJeBQGtUcq/s1600/google-48.png" /></a></td></tr></table></div><style>.rssbuttontable { border: 1px solid #E6E6E6; background: #FFDCB1; float: center; width: 270px; margin-left:10px; padding: 5px 5px 5px 5px; border-radius: 5px; -moz-border-radius: 5px; height: 35px; float: left; display: inline; margin-top:5px; margin-bottom:5px; } input.Subscriberssbutton { background:-moz-linear-gradient(top,#F88017 0%,#FF6600 100%); background:-webkit-gradient(linear,left top,left bottom,from(#F88017),to(#FF6600)); border: 1px solid #FF6600; text-transform: none; font:bold 13px arial; color: #fff; height: 30px; padding: 4px 2px 5px 2px; margin: 0px 0 0x 0px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer; display: inline; } </style><table class="rssbuttontable"><tr><td><a rel="nofollow" href="http://feeds.feedburner.com/~fc/your-belajarblog?bg=FF9900&fg=000000&anim=0&label=listeners" height="26" width="88" style="border:0" alt="" /></a></a></td><td><input value="Subscribe to Get Updates" class="Subscriberssbutton" type="button" onclick="window.open('http://feedburner.google.com/fb/a/mailverify?uri=your-belajarblog', 'popupwindow', 'scrollbars=yes,width=650,height=570');return true" /></td></tr></table><style class="text/css">.grablink { link-color:#0084CE; font-size:12px; text-align:right; text-weight:italic; } </style><div class="grablink"><a href="http://your-belajarblog.blogspot.com">Blogger Trick</a></div>

Keterangan:

1. Ganti Tulisan http://www.facebook.com/pages/Your-Belajar-Blog/395122827241045?ref=hl dengan Alamat Facebook Anda.
2. Ganti Tulisan http://twitter.com/YourBelajarBlog dengan Alamat Twitter Anda.
3. Ganti Tulisan http://feeds.feedburner.com/your-belajarblog dengan Alamat Feed Burner Anda.
4. Ganti Tulisan https://plus.google.com/114812141180411759844 dengan Alamat Plus Google Anda.
5. Ganti Tulisan http://feeds.feedburner.com/~fc/your-belajarblog?bg=FF9900&amp;fg=000000&amp;anim=0&amp;label=listeners" height="26" width="88" style="border:0" alt="" /></a> dengan FeedCount Anda.

• Setelah Itu, Klik Tombol Simpan.

Selamat Mencoba,

Salam Sukses,

Cara Membuat Kotak Berlangganan via Email di FEEDBURNER - Modifikasi

                                                  





Hmm,, pada hari ini Mazinu akan posting kepada Kalian tentang bagaimana Cara Membuat Kotak Berlangganan via Email di FEEDBURNER yang telah saya modifikasi sendiri.
yang nanti hasilnya seperti ini :

Ingin tahu caranya?
Berikut mazinu akan menuliskan caranya step by step.

• Login ke Blogger
• Klik Menu Design/Rancangan
• Selanjutnya Klik Add a Gadget , Pilih HTML/JavaScript

Selanjutnya:

Copas Code HTML di bawah ini pada Form  HTML/JavaScript   yang kalian inginkan.

<style>
.form {
border:0px solid #ccc; /* warna garis pinggir form */
background: #ffffff /* warna background form */
padding:3px; /* spasi form */
width:ancho; /* panjang form */
height:180px /* tinggi form */
}

.rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjomNcAF2ZYNnj4DYCJZSLh9XEHy2QsMQd1OnisZSoOmY5JRU4leD1C8i4mRjkg6-SZSK9nVKKFCgQ4VluIlnEz6SBPTN8ML6agkhRjdgmObK6KfkTKnEvY5hZYj3nTAMIsxarrQsd1nuag/s128/rss_feed_logo.png") no-repeat top right;
}

.button {
background: #006699; /* warna tombol subscribe */
color: #FFFFFF; /* warna font subscribe */
font-size: 11px; /* ukuran font subscribe */
font-family: Arial, Tahoma, Verdana; /* font subscribe */
margin-left: 5px; /* margin kiri tombol subscribe */
border: 1px solid #234B69; /* warna garis pinggir tombol subscribe */
padding:3px 5px 3px 5px; /* jarak antara font dengan garis pinggir tombol subscribe */
font-weight: bold;
}
</style>

<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/lagudjawaasli"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS4OaO09XRsFmbFUVGIgt1SvmEQ7JxmHIQboLdQikIdyk9w-f6hIO7Rn7VClfiPwH0hBRo7f_lNByN9VkblC6plkWVNH_TqbymO-TIDjYP5TPd8xIIXU3y2EsopNAmzuDfbCRvXp4juoSB/s800/005.png" /></a> <a href="http://feeds.feedburner.com/lagudjawaasli">Catatan "Untuk Sahabat"</a></div>

<div style="font-weight:bold; padding:10px 10px;">Berlangganan Lewat Email !</div>

<div style="padding-left:10px">Dapatkan kiriman artikel terbaru langsung ke email anda!</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=lagudjawaasli', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Ketik email anda disini..." /> <input type="hidden" value=lagudjawaasli" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="SUBCRIBE" /></div></form>

<div style="padding-left:10px"><a href="http://feeds.feedburner.com/lagudjawaasli"><img src="http://feeds.feedburner.com/~fc/lagudjawaasli?bg=ff7c00&amp;fg=444444&amp;anim=0" width="88" height="26" style="border:0" alt="" /></a></div>
</div></div>

 Keterangan:

• Ganti Tulisan yang berwarna Merah dengan alamat Feedburner Kalian.
• Simpan, dan Lihat hasilnya ! free download music SINI