29 Cara Membuat Widget Social Subscription Box

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Widget Formulir Berlangganan Posting

Akhirnya dapat membuat widget Social Subscription Box atau widget berlangganan posting yang berbeda dari biasanya. Saya katakan berbeda karena widget berlangganan artikel ini lengkap dengan berbagai fitur yang dapat menghubungkan anda dengan beberapa jejaring sosial yang terkenal, dengan tombol share diharapkan artikel anda akan tersebar ibarat virus ke berbagai jejaring sosial yang ada, dan diharapkan juga dapat meningkatkan pelanggan RSS feed anda juga kotak fans page untuk meningkatkan penggemar blog anda.

View Demo

Fitur:

1. Formulir feedburner untuk meningkatkan pelanggan artikel anda

2. Tombol follow sehingga pembaca dapat bergabung dengan Anda pada jaringan sosial Anda

3. Tombol sosial media yaitu,, Facebook, Twitter, g+1, StumbleUpon dan tombol share Addthis untuk jaringan sosial lainnya.

4. Kotak Fans Page Facebook untuk meningkatkan penggemar blog Anda

Keempat fitur utama dari widget berlangganan artikel ini cukup rapi dan bersih yang tidak akan membingungkan pembaca. Semua tombol media sosial  yang resmi terdapat pada tombol ShareThis. Untuk memberikan nuansa halus digunakan box-shadow bertenaga CSS3 transisi . Jenis Font yang digunakan adalah font Google bernama Oswald.

Sangat antusias untuk menggunakan widget baru yang mengagumkan ini? Anda tidak perlu menunggu lagi. Silahkan ikuti langkah-langkah berikut:

1. Seperti biasa login ke akun Blogger anda -> Template -> Edit HTML -> Proceed

2. Cek list  Expand Widget Templates

3. cari kode berikut: <data:post.body/>

Anda mungkin akan menemukan dua atau tiga kode diatas, letakkan kode berikut pada kode pertama diatas

<!--Social Subscription Box Tipstrikblogging.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.tbibox {
background: #fff;
border: 1px solid #ddd;
height: 360px;
margin: 10px auto;
padding: 10px;
width: 572px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.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;
}
.tbisharebox {
border: 1px solid #D3D3D3;
margin: -157px 0 0 330px;
padding: 8px;
width: 225px;
-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;
}
.tbisharebox:hover {
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
-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;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbibox'>
<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=TipsTrikBlogging-Amatullah&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='TipsTrikBlogging-Amatullah' />
<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=‘http://www.facebook.com/amatullah.syukur’target='_blank' title='Join us on Facebook'><img src='https://lh5.googleusercontent.com/-hbgtzN6sfys/UC_Rt4HCCUI/AAAAAAAAGI4/sNVfSO9oubo/s32/facebook500.png' alt='facebook'/></a>
<a href='http://twitter.com/amatullahsyukur' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://lh5.googleusercontent.com/-cBjXpo4xiHA/UC_RvG1JfwI/AAAAAAAAGJI/cQF9OReQCog/s32/twitter.png' alt='twitter'/></a>
<a href='https://plus.google.com/116382152511220195182#116382152511220195182/' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://lh4.googleusercontent.com/-dzFCD4A8UqU/UC_Rtz0xGDI/AAAAAAAAGI8/iz4dYkboPZ0/s32/googleplus-revised.png' alt='gplus'/></a>
<a href='http://pinterest.com/amatullahsyukur/' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://lh3.googleusercontent.com/-VHXyLvPpEBg/UC_Rt63AIdI/AAAAAAAAGJA/xMdGrSFINE4/s32/pinterest.png' alt='pinterest'/></a>
<a href='http://feeds.feedburner.com/TipsTrikBlogging-Amatullah' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://lh6.googleusercontent.com/-14vjEhUXrMk/UC_RuxvrOgI/AAAAAAAAGJQ/OQT6x8yxTXY/s32/rss.png' alt='rss'/></a>
</div>
</div>
<div class='tbisharebox'>
<script type='text/javascript'>
var switchTo5x = true;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'
/>
<script type='text/javascript'>
stLight.options({
onhover: false
});
</script>
<div style='margin: 5px 5px;'>
<span class='st_fblike_hcount' displaytext=''></span>
</div>
<div style='margin: -30px -20px 0 0; float: right;'>
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button'
expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title'
data-related='topbloggingidea:Get latest Blogger Widgets, Blogging Tips, Blogging Ideas, Blogger Gadgets, Free Blogger Templates, Plugins and SEO tips to Optimize Your Blogs.'
data-count='horizontal' data-via='topbloggingidea' data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type='text/javascript' src='http://platform.twitter.com/widgets.js'>
</script>
</b:if>
</div>
<div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'>
<a class='addthis_counter'></a>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script>
</div>
<div style='margin: 5px 5px;'>
<su:badge layout='1'></su:badge>
<script type='text/javascript'>
(function () {
var li = document.createElement('script');
li.type = 'text/javascript';
li.async = true;
li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li, s);
})();
</script>
</div>
</div>
<div style='float: right; margin: -40px -5px 0 0;'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'></div>
<script type='text/javascript'>
(function () {
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>
</div>
<div style='margin-top: 20px;'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FTopBloggingIdeas&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180'
style='border:none; overflow:hidden; width:570px; height:180px;' />
</div>
</div>
</b:if>
<!--Social Subscription Box Tipstrikblogging.com—>

<small><div style='font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;'><a href='http://www.tipstrikblogging.com/2012/12/cara-membuat-widget-social-subscription.html' target='_blank' title='Widget Social Subscription'>+ Get This Widget Here</a></div></small>

 

Sesuatu yang penting untuk anda ganti pada kode diatas

  1. Ganti feedburner uri TipsTrikBlogging-Amatullah  dan values dengan akun Feedburner anda
  2. Ganti link Facebook, Twitter, Google+, Pinterest and RSS feed dengan URL media sosial anda
  3. Ganti www.facebook.com%2FTipsTrikBlogging.Amatullah fans page facebook anda. Jangan menggunakan http:// dan ganti (/) dengan %2F

Demikian tutorial cara membuat widget Social Subscription Box. Semoga bermanfaat. Silahkan tinggalkan komentar baik pertanyaan, saran atau kritik membangun. Terima kasih atas apresiasi anda!

Original Resource


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

29 komentar :

  1. saya pernah memasangnya,tapi loading blog malah tambah berat :)

    BalasHapus
    Balasan
    1. Loading blog yg tambah berat atau koneksi yg lemot :P

      Hapus
  2. Widget berlangganan posting yang keren tapi daku blogger baru gan, takut salah masukin kode ke template ntr bisa hancur tampilanx.
    Izin bookmark saja dl. Terimaksh sharingx.

    BalasHapus
    Balasan
    1. Kita tak akan pernah tahu jika sll khawatir salah dalam mencoba. Sbg tips sebelum otak atik template back up dulu templatex jd jika ada kesalahan bisa di unggah kembali template sebelumnya.

      Terimaksh tuk apresiasinya.

      Hapus
    2. Gitu ya, benar jg sih. Oke thanks tuk masukan brhargax!

      Hapus
    3. Sama-sama, terimksh krn mau mnerima mskn km. Happy blogging.

      Hapus
  3. Balasan
    1. Sama-sama, terimaksh jg tuk apresiasinya tp sebelum mnyapa admin dengan bang baiknya lihat dl profilnya. Agar tdk keliru mnyapa.

      Hapus
  4. bagus nich lengkap widget socialnya
    bolehlah di coba :D

    BalasHapus
    Balasan
    1. Benar widget ini dilengkapi fitur social bookmarking resmi dan trkenal. Silahkan dicoba dan thanks tuk apresiasinya.

      Hapus
  5. blognya cakep banget, jadi iri.

    GA saya sudah daftar kurang lebih 4 kali dan approved semua tapi paling lama hanya bertahan 3 bulan lalu banned lagi, bisa minta solusinya gak bu?

    BalasHapus
    Balasan
    1. Untuk tips GA mgkn bs anda search digoogle pasti dah bnyk yg mmbhsx, krn anaa msh minim ilmu ttg itu krn ni jg br daftar kok. Trmksh tuk kunjungan dan apresiasix.

      Hapus
  6. mbak saya tertarik saya kotak search sama subscribe yang dibawah judul blog anda.. caranya gimana ya?? .

    makasih sebelumnya, jika bersedia merespon :) :D
    .

    BalasHapus
    Balasan
    1. Itu bawaan template miz, Bs jg buat sndiri nntlh pd ksmpatan lain anaa share tutorialnya.

      Trimaksh jg tuk kunjungan dan apresiasinya miz.

      Hapus


    2. miztia mau tanya lagi boleh ya :D
      kalo aku mau ambil yang subcrisbe sama yg follow us onnya doang gimana?? .. maksutnya dari screenshot diatas saya mau ambil di kotak yg pertama.

      done follow mbakk .. follback ya *ngarep hoho. maaph :D ^__^
      salam kenal mbak. oya mbak makasih kembali.

      Hapus
    3. Bolehlah. Kalau paham yang mana bagian CSS dan HTML subscribe sebenarnya miztia bisa ambil yang bagian subscribex saja.

      Salam kenal jg, anaa prnah brkunjung keblog miztia tp koneksi anaa tdk mampu untuk menuggu load blog miztia, maaf ya jdx anaa tutup sblm loading slsai krn kuoto pmakaian trbts. Nnt ana BW via hp ya!

      Hapus
    4. okey , terima kasih :)
      .

      Hapus
  7. nice info
    di tnggu kunjungan bliknya
    http://cybernatar.blogspot.com/

    BalasHapus
  8. Bagus tutorialnya , semoga bermamfaat bagi kami.
    Berkaryalah terus bagi bangsa.
    Amen

    BalasHapus
  9. Supaya bisa muter mutergimana caranya mbak?, maturnuwun-

    BalasHapus
  10. Kalau supaya bisa muter muter gimana caranya Mbak? maturnuwun.

    BalasHapus
  11. Boleh tahu itu kode scrip ditempatkan dimana antara untuk diatasnya atau dibawahnya, demikian?

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!