Widget Langganan email via RSS Feed & Sosial Media Sharing Valid HTML5

Posted by Kembar Pro



Memiliki sebuah blog atau web dengan tampilan yang dinamis, SEO Friendl serta memiliki waktu loading yang cepat di semua halaman postingan maupun halaman utama tentunya pasti sangat diinginkan oleh para blogger, Pihak Petinggi Google sangat menyenangi typikal blog atau web seperti itu tanpa mengesampingkan kualitas atau bobot dari konten yang berkualitas.


Namun seperti yang telah kita ketahui bersama bahwa biasanya setting template blog terdiri dari beberapa kolom dimana kolom utama adalah untuk menulis artikel sedangkan kolom di kedua sisi kiri maupun kanan biasanya diletakkan beberapa widget yang terutama fungsinya untuk komersial, promosi blog melalui tombol sharing ke situs sosial media atau Headline dari artikel pilihan maupun artikel yang paling popular.


Sebagai Blogger pemula tentunya fungsi-fungsi widget ini sangat berperan besar dalam mempromosikan blog mereka yang baru seumur jagung termasuk saya sendiri karena sama Google belum kenalan Wakaka…, salam kenal ya.. kalau ada yang sempat baca artikel nyasar ini hahahha…, saya baru mulai kenal dan belajar Blog pertengahan Mei 2014.


Sebagai tambahan menurut informasi dari para profesional atau sesepuh (hahaha…), yang sudah lama berkecimpung di usaha yang menurut hemat saya buat penyaluran hobbi yang tiada ujungnya….. bahwa sumber traffik utama situs mereka selain dari mesin pencari Tuan Besar Datuk Google selebihnya banyak yang bersumber dari pembaca setia mereka yang berlangganan artikel. 

Oke teman-teman kita langsung saja ke TKP… disini saya akan menjelaskan pengalaman saya serta langkah-langkah yang ditempuh untuk memasang widget langganan email dan tobol sharing ke situs sosial media yang valid html5.


Contoh Widget:


contoh Widget Langganan email via RSSFeed & Sosial Media Sharing Valid HTML5

1. Daftar akun di feedburner.com

RSS Feed digunakan hampir sebagian besar oleh situs berita atau weblog yaitu berupa file berformat XML tujuannya adalah agar pengguna situs web dapat berlangganan artikel melalui email dari situs yang sebelumnya mereka telah mendaftarkan alamat email mereka di feed RSS situs bersangkutan.

Untuk bisa mendaftar di feedburner anda harus memiliki akun email di google, langkahnya adalah sebagai berikut:
setting rss feed 1
  • Pada halaman Indentify Feed Source pilih share your idea – Atom:
setting rss feed 2

  •   Setelah itu akan muncul halaman selamat Datang, klik Next
setting rss feed 3

  • Setelah itu anda diminta untuk melakukan konfigurasi podcast, diupayakan agar settingan feed anda dilakukan secara default pilih next dua kali,
setting rss feed 4

  • Sampai muncul halaman seperti dibawah ini berarti pendaftaran akun anda di feed burner sudah selesai,

setting rss feed 5


  • Langkah selanjutnya anda mebuat settingan email subscription, pilh tab Publicize, lalu pilih email subscriptions, Klik Activate atau aktifasi email subscriptions anda,
setting rss feed 6
  • Setelah aktivasi tersebut berhasil coba anda sorot ke bawah anda akan menemukan kotak kode HTML email subscriptions anda, kode tersebut bisa langsung anda copy keseluruhannya di akhir postingan anda atau di widgdet anda, yang terpenting adalah kode setelah uri= yaitu BLOGSPOT/MVXIG itu adalah kode custom email subscriptions feed rss anda jika anda ingin membuat widget sesuai keinginan anda.
kode HTML rss subcriptions

Contoh RSS Feed diletakkan di artikel:

contoh rss default dibawah halaman posting


Contoh RSS Feed diletakkan di widget:

contoh rss default di widget


2. Cara pasang  widget email berlangganan artikel via RSS Feed dan tombol sharing ke Sosial Media valid HTML5


setting widget custom HTML5 di template

  • Masuk ke blogger.com, di dasboard pilih tata letak (Lay Out), tambahkan gadget (add gadgets), sorot ke bawah dan pilih HTML/Javascript, seperti terlihat di gambar diatas:
     Masukkan kode HTML berikut:

<!-- Widget Email & Social Media -->
<div class='social-box'>  <div class='social-item-outer'>
                  <a class='social-item-box rss-box' title="Subscribe Rss Feed" href='http://feeds.feedburner.com/blogspot/DFQJC/'>
                   <div class='counter'> </div>  </a> </div>
   <div class='social-item-outer'>
                  <a class='social-item-box twitter-box' title=" Twitter Follower"  href='http://twitter.com/ferry_rinaldi'>
                    <div class='counter'> </div>  </a> </div>              
<div class='social-item-outer'>
                  <a class='social-item-box facebook-box' title="Facebook Fan Page"  href='http://www.facebook.com/pages/Kembarpro/506827889417134'>        
                    <div class='counter'> </div>  </a> </div>
                  <div class='social-item-outer'>
                  <a class='social-item-box googleplus-box' title=" Google+ Follower" href='http://plus.google.com/u/0/+FerryRinaldiOK/posts'>
                    <div class='counter'> </div>  </a> </div> </div>
<style>
.mp-email{background:url(https://googledrive.com/host/0B8AmZWW2lk4lM3lvVFBLdnpOVkU ) 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:11px 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:150px;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=blogspot/DFQJC', '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" type="text" />
<input type="hidden" value="blogspot/DFQJC" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mp-emailsubmit" value="Submit" type="submit" />
</form></div><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://goo.gl/XC9jvh" rel="nofollow" >Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css"></style>

       Catatan : ganti tulisan warna orange sesuai dengan alamat social media anda
  • Kembali ke dasboard pilih template> pilih edit HTML, Masukkan kode HTML berikut ini sebelum kode </style> bisa anda cari dengan mengetik keyboard CTRL + F lalu masukkan kata yang dicari tersebut: 


.social-box{width:280px;padding:10px 9px;margin:0;overflow:hidden;background-color:#f9f9f9;border:1px solid #e8e8e8;text-align:center;}a.social-item-box{display:block;color:#4b4b4b;float:left;width:64px;overflow:hidden;margin:0;padding:4px 0;background-image:url("https://googledrive.com/host/0B8AmZWW2lk4leUJwdjlNVUhyRFE");background-repeat:no-repeat;}.social-item-outer{margin:0 0 0 8px;overflow:hidden;float:left;display:inline-block;}.social-item-outer:hover{background:#f0f0f0;background:-webkit-linear-gradient(top, #f9f9f9, #f0f0f0);background:-moz-linear-gradient(top, #f9f9f9, #f0f0f0);background:-ms-linear-gradient(top, #f9f9f9, #f0f0f0);background:-o-linear-gradient(top, #f9f9f9, #f0f0f0);background:linear-gradient(top, #f9f9f9, #f0f0f0);}.social-item-outer:nth-child(1):hover{box-shadow:0px -2px 0px #E50700 inset;}.social-item-outer:nth-child(2):hover{box-shadow:0px -2px 0px #0084C5 inset}.social-item-outer:nth-child(3):hover{box-shadow:0px -2px 0px #6CAC00 inset;}.social-item-outer:nth-child(4):hover{box-shadow:0px -2px 0px #00C3B7 inset;}.social-item-outer:hover{box-shadow:0px -2px 0px #FF8168 inset;}.social-item-outer:first-child{margin-left:0px;}.rss-box{background-position:7px 4px;}.twitter-box{background-position:-73px 4px;}.facebook-box{background-position:-153px 4px;}.googleplus-box{background-position:-233px 4px;}.counter{margin:60px 0 0 0;font-family:'Oswald',Verdana,Sans-serif;line-height:1.2em;font-size:16px;font-weight:500;}.social-title{color:#888;font-size:11px;}