Sunday, 7 April 2013

Tombol Follow dan Subscribe Via Email dalam Satu Widget Catikpengembarabiru

,


MULTI PASTE - Menggunakan widget social follow serta widget subscribe via email pada sidebar blog adalah merupakan hal penting dan sangat dibutuhkan untuk meningkatkan trafik blog.  Rata-rata blog yang pernah saya kunjungi menggunakan kedua widget ini, dan banyak saran dari para 'Master SEO' agar menggunakan widget ini di blog, jika ingin pertumbuhan trafik blog Anda menjadi lebih baik.

Saat ini  Google Analytics telah memasukkan social network sebagai salah satu parameter standart dalam menganalisa trafik sebuah situs atau blog.  Saya tidak akan membahas terlalu jauh pengaruh widget social network ini terhadap pertumbuhan trafik sebuah blog, karena yang akan menjadi pembahasan utama pada artikel ini adalah bagaimana menggunakan widget social follow dan widget email subscribe yang di gabung dalam satu bundel pada sidebar blog.  Anda dapat melihat demonya, klik tombol Live Demo di bawah ini
Widget Social Follow ini didesign oleh Paul Crowe, kemudian saya gabungkan dengan Widget Subscribe Via Email yang di design oleh Mohammad Mustafa Ahmedzai menjadi satu bundel widget social network yang cantik, jika Anda menyukai widget ini ikuti langkah implementasi yang cukup mudah seperti di bawah ini.

Memasang Widget Social Network dan Widget Email Subscribe Pada Sidebar Blog

Untuk memasang widget ini pada sidebar blog tidak terlalu sulit, Anda cukup menambahkan gadget type HTML/Javascript pada Layout blog dan masukkan script di bawah ini ke dalamnya.  Agar lebih terinci ikuti langkah Menambahkan Widget Social Network dan Email Subscribe berikut ini.
  • Login ke Blogger dengan ID Anda
  • Pada halaman dashboard blogger klik link Title Blog Anda
  • Pilih Menu Layout / Tata Letak >> Add a gadget >> Pilih gadget type HTML/Javascript
add a gadget
  • Copy script di bawah ini dan paste ke dalam kotak content gadget HTML/Javascript, selanjutnya klik tombol Save untuk menyimpan gadget
    <style>
    .socialfollow {border-bottom:1px dotted #444444;padding-bottom:5px}
    a:hover {background-color: transparent;opacity:0.7;}
    </style>
    <center>
    <div class="socialfollow">
    <a title="Rss Feed" href="http://feeds.feedburner.com/pengembarabiru" rel="nofollow" target="_blank"><img border="0" src="https://lh4.googleusercontent.com/-eHaZgz-Wcow/UDLwTV4gYNI/AAAAAAAACh4/XysaUHrsI7c/s512/rss_48x48.png" /></a>
    &nbsp;&nbsp;
    <a title="Subscribe Via Email Rss" href="http://feedburner.google.com/fb/a/mailverify?uri=pengembarabiru&loc=en_US" rel="nofollow" target="_blank"><img border="0" src="https://lh3.googleusercontent.com/-Yvbk9KzFKkg/UDLwSnvCOJI/AAAAAAAAChw/9eNjOuDW9Ks/s512/mailrss_48x48.png" /></a>
    &nbsp;&nbsp;
    <a title="Follow On Twitter" href="http://twitter.com/twitter" rel="nofollow" target="_blank"><img border="0" src="https://lh6.googleusercontent.com/-05AKSlQvAaA/UDLwUfiSDnI/AAAAAAAACiI/pyAhtQh7KvI/s512/twitter_48x48.png" /></a>
    &nbsp;&nbsp;
    <a title="Find Us On Facebook" href="http://facebook.com/facebook" rel="nofollow" target="_blank"><img border="0" src="https://lh5.googleusercontent.com/-V9ywu9u77rE/UDLwSC2CdkI/AAAAAAAACho/z978D5IPi28/s512/facebook_48x48.png" /></a>
    &nbsp;&nbsp;
    <a title="Add To Circles" href="https://plus.google.com/b/112217312307388887751/112217312307388887751/posts" rel="nofollow" target="_blank"><img border="0" src="https://lh6.googleusercontent.com/-DN33CwUhYO8/UDLwSLMvg1I/AAAAAAAAChs/iGf42gEyqYA/s512/googleplus_48x48.png" /></a></div></center>

    <style>
    .mp-email{background:url(https://lh3.googleusercontent.com/-9tRrvLnuK08/T5Jv1zOxsGI/AAAAAAAABmc/xb8RV5jWr3Y/s128/email.png) no-repeat 0px 12px;width:300px;padding:10px 0 0 55px;float:left;font-size:1.4em;font-weight:bold;margin:0 0 10px 0;color:#686B6C;}
    .mp-emailsubmit{background:#9B9895;cursor:pointer;color:#fff;border:none;padding:3px;text-shadow:0 -1px 1px rgba(0,0,0,0.25);-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;font:12px sans-serif;}
    .mp-emailsubmit:hover{background:#E98313;}
    .textarea{padding:2px;margin:6px 2px 6px 2px;background:#f9f9f9;border:1px solid #ccc;resize:none;box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;width:170px;color:#666;}
    </style>

    <div class="mp-email">
    Subscribe via Email
    <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=pengembarabiru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
    <input type="hidden" value="pengembarabiru" name="uri"/><input type="hidden" name="loc" value="en_US"/>
    <input class="mp-emailsubmit" value="Submit" type="submit" /></form></div>
  • Silahkan ganti kode yang diarsir kuning dengan id-social network Anda dan kode yang diarsir hijau dengan title rss feedburner blog anda yang terdapat pada script di atas
  • Langkah terakhir periksa tampilan blog Anda

0 komentar to “Tombol Follow dan Subscribe Via Email dalam Satu Widget Catikpengembarabiru”

Post a Comment

 
Web Analytics