Sofware Penting di Linux Anda

Linux merupakan Operating system yang mulai tumbuh dan berkembang saat ini, walaupun pada awalnya Linux ini dibuat untuk kepentingan server, tetapi linux terus berkembang menjadi OS yang tangguh dengan peengembanga fasilitas GUI

Tombol Share Facebook

Salah satu cara untuk mendongkrak visitor dan backlink adalah dengan share postingan blog kita. Namun, apakah hanya kita saja sebagai pemilik blog yang mau share?

Black Death

Wabah Terburuk Sepanjang Sejarah

Membasmi Racun dengan Detok

Detoks atau detoksifikasi adalah proses pembuangan racun dari dalam tubuh. Racun dari dalam tubuh bisa diperoleh dari makanan yang dikonsumsi, proses metabolisme dan paparan lingkungan. Sebenarnya racun apa saja yang perlu dibuang ?

Gejala Kanker

Gejala kanker sulit diidentifikasi secara mandiri karena biasanya tanda-tanda ini juga dapat dikaitkan dengan masalah kesehatan lainnya. Lebih sulit lagi jika gejala kanker ini dimiliki pria. Pasalnya dibandingkan wanita, pria diketahui lebih malas ke dokter untuk berkonsultasi, apalagi melakukan screening kanker.

18 Juni 2014

Cara Mengatasi Duplikat Konten

Cara Mengatasi Duplikat Konten – Kita yang menggunakan blog dengan platform blogger.com pasti pernah di pusingkan dengan yang namanya duplikat konten. Coba saja anda cek di google webmaster, apakah blog anda terjadi duplikat konten atau tidak. Sebenarnya duplikat konten ini memang tidak terlalu berdampak buruk untuk blog kita, namun ada baiknya kalau kita atasi masalah ini. karena dengan semakin sedikitnya duplikat konten blog kita, maka akan semakin baik pula reputasi blog kita dimata search engine, khususnya google.
Banyak blogger yang dibuat pusing oleh duplikat konten ini karena tidak bisa mengatasinya. duplikat konten ini disebabkan oleh berbagai factor. Diantaranya adalah karena halaman arsip, label, pancarian, dan yang paling sering menjadi penyebab utama sekarang ini adalah karena masalah halaman versi seluler atau mobile. Lantas bagaimana cara mengatasinya, angsung saja simak yang berikut ini.
1. Mengatasi duplikat konten karena halaman label
Masuk ke menu “Template” di dashboard blogger anda dan pilih “Edit HTML”. Lalu cari kode <head> gunakan Crtl + F atau tekan F3 untuk mempermudah pencarian. Jika sudah ketemu letakkan kode berikut ini tepat di bawah kode <head>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>


2. Mengatasi duplikat konten karena halaman arsip dan pencarian
Untuk duplikat konten yang satu ini sangatlah mudah. Anda masuk ke dashboard blogger anda, lalu masuk ke Setelan >> Preferensi penelusuran >> Aktifkan tag header robot khusus, dan sesuaikan dengan gambar berikut ini.

3. Mengatasi duplikat konten karena halaman versi mobile atau seluler
Ada dua cara yang dapat kita lakukan untuk mengatasi duplikat konten karena halaman versi mobile ini, berikut caranya
Menggunakan meta tag
Letakkan kode berikut ini tepat di bawah kode <head> dai dalam template anda
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>

Menggunakan settingan Robots.txt
Masuk ke dashboard blogger anda, selanjutnya masuk ke setelan >> Preferensi penelusuran >> aktifkan robots.txt khusus. Lalu letakkan kode berikut pada kolom yang tersedia
User-agent: Mediapartners-Google
Disallow: 
 
User-agent: Googlebot
Disallow: /search
Disallow: /?m=1
Disallow: /?m=0
Disallow: /*?m=1
Disallow: /*?m=0
 
User-agent: *
Disallow: /search
 
 
Sitemap: http://www.mas-sugeng.com/feeds/posts/default?orderby=UPDATED


Nah, itulah cara untuk mengatasi duplikat konten pada blog anda. Silahkan gunakan sesuai dengan permasalahan duplikat yang terjadi di blog anda. Gunakan ketiganya juga tidak apa – apa untuk berjaga – jaga. Sekian info kali ini, semoga bermanfaat bagi anda.

17 Juni 2014

Tombol Back To Top Versi Mobile

Sudah kita ketahui bahwa fungsi dari tombol back to top ini adalah untuk memudahkan kita kembali ke halaman paling atas tanpa harus melakukan scroll terlebih dahulu. Tombol back to top ini akan optimal jika kita buka versi desktop, namun kurang optimal pada saat kita buka dengan tampilan versi mobile. Biasanya yang terjadi jika di buka pada versi mobile malah kita akan di arahkan pada reload blog tersebut, baru kita diarahkan ke halaman paling atas, tidak langsung menuju halaman paling atas layaknya dibuka menggunakan desktop.
Kita pasti berharap agar tombol back to top tersebut juga bekerja secara optimal walaupun dibuka dengan menggunakan versi seluler atau mobile. Lantas bagaimana cara membuat cara tombol back to top versi seluler? Langsung saja simak tutorial berikut ini, namun sebelumnya silahkan baca terlebih dahulu cara membuat tombol back to top versi desktop dengan efek bounce (ganti dengan link postingan agan tombol back to top sebelumnya) jika agan belum mencobanya.
1. Terlebih dahulu masuk ke dashboard blogger anda masing – masing.
2. Masuk ke menu “Template”.
3. Back up terlebih dahulu untuk berjaga – jaga jika nanti terjadi kesalahan pada saat edit template.
4. Lalu masuk ke “Edit HTML”
5. Jika sudah cari kode </head> gunakan Crtl + F atau tekan F3 untuk mempermudah pencarian. Jika sudah ketemu, letakkan kode berikut tepat diatasnya.
<a id='atas'/>
6. Lanjut, sekarang cari kode <b:include name=’mobile-nextprev’/> dan letakkan kode berikut tepat diatasnya.
<div style='-moz-border-radius: 7px 7px 7px 7px; background: #eeeeee; background: -moz-linear-gradient( center top, white 40%, #cccccc 100% ); background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #cccccc) ); border: 1px solid #000000; height: auto; margin: 0px; overflow: auto; padding: 2px; text-align: center; width: auto;'> <b><a href='#atas'>Kembali ke Atas</a></b> </div>
7. Sekarang simpan template anda.
Coba buka blog anda menggunakan mobile, apakah sudah ada tombol back to top-nya atau belum, jika sudah coba tekan, apakah bekerja dengan optimal atau tidak. Nah, itulah tutorial cara membuat tombol back to top versi mobile. Sekian tutorial kali ini, semoga bermanfaat bagi anda.

Tombol Back To Top Smooth

Pada postingan yang sebelumnya saya sudah menjelaskan tentang bagaimana cara mengetahui visitor kita yang online di blog kita (ganti dengan link posting agan). Kali ini saya akan membagikan sebuah tutorial yang berguna untuk menyamankan visitor di blog kita. Tutorial kali ini adalah cara membuat tombol back to tap dengan efek pantulan di blog kita.
Back to top sangat membantu sekali bagi visitor kita, karena mereka bisa kembali lagi ke bagian atas blog kita tanpa harus menscrollnya, melainkan hanya dengan menakan tombol back to top. Hamper semua blogger sekarang ini menggunakan tombol back to top di blognya. Namun, bagi anda yang belum mengerti bagaimana cara membuatnya tidak usah khawatir. Karena cara membuat sangatlah mudah, anda tinggal mengikuti tutorial berikut ini.
Cara membuat tombol back to top smooth :
1. Silahkan log in terlebih dahulu ke dashboard blogger anda masing – masing.
2. Jika sudah, masuk ke menu “Template”
3. Untuk berjaga – jaga jika nanti terjadi kesalahan pada saat edit, back up terlebih dahulu template anda.
4. Sekarang menuju “Edit HTML” pada template anda.
5. Cari kode </head> di template anda, gunakan Ctrl +F atau tekan F3 untuk mempermudah pencarian. Jika sudah ketemu, silahkan letakkan kode berikut tepat diatas kode </head> tadi.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}});
$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});
</script>
6. Simpan template anda.
7. Sekarang, masuk ke menu “Layout” atau “Tata letak” di template anda.
8. Tambahkan widget “Javascript/HTML”
9. Letakkan kode berikut ini pada kolom Javascript/HTML
<style type='text/css' scoped='scoped'>
#ScrollToTop{text-align:center; position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3V1ZJMuYY7JixaOgHhqAZr4l3vBLUBXNda5_mNHOk8_9zPrxmhrNv8CNwPs6l535pCWELMKjSXfFKk2nliTL_6w2W3dkJztctIq_CtIG6NHVaPeuLMT-p19k8YybAw1TU8Yiq3YizULtU/s1600/arrow-up_basic_blue.png'/></div>
10. Terakhir simpan widgetnya.

Sekarang coba lihat blog anda dan scroll sedikit kebawah, lihat apakah sudah ada tombol back to topnya atau belum. Nah, itulah tutorial cara membuat tombol back to top ti blog. Sekian tutorial kali ini, semoga bermanfaat bagi anda.

16 Juni 2014

Mengetahui Jumlah Visitor yang Online Di Blog

Kita sebagai author atau pemilik blog tentunya kita ingin mengetahui seberapa banyak visitor di blog kita yang sedang online. Memang, sekarang ini banyak sekali tools yang dapat kita manfaatkan untuk memantu berapa banyak visitor yang online di blog kita, sebut saja histats dan google analytic. Namun, pada kesempatan kali ini saya tidak akan menggunakan kedua tools tadi, karena harus mendaftar terlebih dahulu jadi kelamaan.
Dengan adanya widget seperti ini memang membuat blog kita lebih kelihatan professional. Cara membuatnyapun cukup mudah sekali, anda hanya perlu mengikuti beberapa tutorial berikut ini.
Cara memasang widget visitor online di blog :
1. Pertama masuk terlebih dahulu ke dashboard blogger anda.
2. Jika sudah, masuk ke menu “Layout” atau “Tata Letak”
3. Tambahkan widget “Javascript/HTML”.
4. Sekarang letakkan kode berikut ini pada kolom “Javascript/HTML”
<script id="_waudum">var _wau = _wau || []; _wau.push(["classic", "wd83k2p88onm", "dum"]);(function() {var s=document.createElement("script"); s.async=true;s.src="http://widgets.amung.us/classic.js";document.getElementsByTagName("head")[0].appendChild(s);})();</script>
.
5. Tekan save atau simpan.
Selesai sudah cara memasang widget untuk mengetahui visitor yang online di blog kita. Sekarang berapa visitor yang online di blog anda saat ini? itulah tutorial cara memasang widget untuk mengetahui jumlah visitor yang online di blog kita. Sekian tutorial kali ini, semoga bermanfaat bagi anda.

Membuat Navigasi Halaman Blog

Blog layakanya sebuah buku, karena memang blog ini terdiri dari halaman – halaman posting. Untuk itu kiat perlu memberikan sebuah nomor halaman pada homepage kita untuk memberikan informasi kepada visitor blog kita tentang seberapa banyak halaman di blog kit selanjutnya.
Sebenarnya, jika anda menggunakan template yang bukan default dari blogger, sudah ada beberapa designernya yang sudah memberikan nomor halaman ini secara otomatis tanpa kita harus membuatnya. Namun, jika anda masih ingin tetap menggunakan template default dari blogger dan ingin memasang navigasi halaman blog, langsung saja simak tutorial yang berikut ini.
Cara membuat navigasi halaman blog keren
1. Yang pertama, silahkan masuk terlebih dahulu ke dashboard blogger anda masing – masing.
2. Jika sudah masuk ke menu “Template”.
3. Jangan lupa untuk mem-back up terlebih dahulu template anda, untuk berjaga – jaga jika nanti terjadi kesalahan pada saat proses edit template.
4. Masuk ke “Edit HTML” pada menu template.
5. Cari kode </body> gunakan Ctrl + F atau dengan menekan tombol F3 untuk mempermudah proses pencarian. Jika sudah ketemu letakkan kode berikut ini tepat diatasnya.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var postperpage=6;
    var numshowpage=4;
    var upPageWord ='« Previous Page';
    var downPageWord ='Next Page »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
<script type='text/javascript'>
  /*<![CDATA[*/
    var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
  /*]]>*/
</script>
</b:if>
</b:if>

6. Lanjut, untuk memperindah nomor halamannya silahkan cari kode ]]></b:skin> dan letakkan salah satu kode dibawah ini sesuai dengan warna kesukaan anda tepat di atasnya.
Navigasi halaman blog merah
/* Warna Merah  */
#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#e74c3c;border:none;border-bottom:3px solid #862B20;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#c0392b;color:#FFF}
.showpageOf{display:none!important}

Navigasi halaman blog biru
/* Warna Biru  */
#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#3498db;border:none;border-bottom:3px solid #246EA0;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2980b9;color:#FFF}
.showpageOf{display:none!important}

Navigasi halaman blog hijau
/* Warna Hijau  */
#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#2ecc71;border:none;border-bottom:3px solid #208C4D;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#27ae60;color:#FFF}
.showpageOf{display:none!important}

Navigasi halaman blog hitam
/* Warna Hitam  */
#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}
.showpageNum a,.showpage a,.showpagePoint{background:#34495e;border:none;border-bottom:3px solid #202D3A;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2c3e50;color:#FFF}
.showpageOf{display:none!important}

7. Langkah teakhir, tekan “Save” atau “Simpan” untuk menyimpan template anda.
Bagaimana, berhasil tidak membuat navigasi halaman blognya? Pasti berhasi jika dilakukan sesuai dengan langkah – langkah diatas. Sekian tutorial cara membuat navigasi halaman blog keren kali ini, semoga tutorial kali ini bermanfaat bagi anda.

Membuat Tombol Subscribe(Berlangganan) via Email

Banyak sekali hal yang bisa kita lakukan untuk membuat visitor blog kita menjadi nyaman. Mulai dari menyediakan tombol share, koment, join dan subscribe atau berlangganan artikel kita. Dengan memasang tombol subscribe via email di blog kita, maka kita sudah memberikan pelayanan kirim artikel gratis kepada visitor kita melalui email. Jadi setiap kali kita memposting artikel, maka secara otomatis kita akan mengirimkan artikel ke visitor kita yang sudah berlangganan.
Tentu ini sangat bermanfaat sekali bagi kita sebagai pemiliki blog dan visitor kita. Karena kita tak perlu lagi memusingkan untuk mengirimnya saru persatu ke email. Bagi visitor sendiri, keuntungannya adalah semakin mudahnya mendapat update blog kita.
Supaya lebih menarik, tombol subscribe ini akan kita modifikasi sedikit sehingga terdapat tombol join social media juga nantinya. Bagaimana cara membuatnya, langsung saja simak tutorialnya berikut ini.
1. Pertama, silahkan log in terlebih dahulu ke dashboard blogger anda.
2. Lalu masuk ke menu “Layout” atau “Tata Letak”.
3. Sekarang anda tambahkan widget “Javascript/HTML” dimana anda akan menaruh tombol subscribe ini nantinya.
4. Letakkan kode berikut ini pada kolom Javascript/HTML.
<style>
/* Social Widget */
#B-mashable-bar {
    border: 0;
    margin-bottom: 10px;
    margin: 0 auto;
        width:300px;
}
.fb-likebox {
    background: #fff;
    padding: 10px 10px 0 10px;
    border: 1px solid #D8E6EB;
    margin-top: -2px;
border-bottom:0;
}
.googleplus {
    background: #fff;
    border-right: 1px solid #D8E6EB;
    border-left: 1px solid #D8E6EB;
    border-image: initial;
    font-size: .90em;
    font-family: "Arial","Helvetica",sans-serif;
    color: #000;
    padding: 9px 11px;
    line-height: 1px;}
.googleplus span {
    color: #000;
    font-size: 11px;
    position: absolute;
    display:inline-block;
    margin: 9px 80px;}
.g-plusone {    float: left;}
.twitter {
    background: #fff;
    padding: 5px;
    border: 1px solid #C7DBE2;
    border-top: 0;}
#mashable {
    background: #EBEBEB;
    border: 1px solid #CCC;
    border-top: 1px solid white;
    padding: 2px 8px 2px 3px;
    text-align: right;
    border-image: initial;}
#mashable .author-credit {}
#mashable .author-credit a {
    font-size: 10px;
    font-weight: bold;
    text-shadow: 1px 1px white;
    color: #1E598E;
    text-decoration:none;}
#email-news-subscribe .email-box{
    padding: 5px 10px;
    font-family: "Arial","Helvetica",sans-serif;
    border-top: 0;
    border-right: 1px solid #C7DBE2;
    border-left: 1px solid #C7DBE2;
    border-image: initial;
   height:35px;}
#email-news-subscribe .email-box input.email{
    background:#FFFFFF;
    border: 1px solid #dedede;
    color: #999;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    border-image: initial;
    font-family: "Arial","Helvetica",sans-serif;}  
#email-news-subscribe .email-box input.email:focus{color:#333}  
#email-news-subscribe .email-box input.subscribe{
    background: #ff9b00;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #cc7c00;
    color:white;
    text-shadow:#d08d00 1px 1px 0;
    padding:5px 14px;
    margin-left:3px;
    font-weight:bold;
    font-size:12px;
    cursor:pointer;
    border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
    backfround: #ff9b00;
   -moz-box-shadow:0 0 3px #999;
    -webkit-box-shadow:0 0 3px #999;
    box-shadow:0 0 3px #999;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #cc7c00;
    color:#FFFFFF;
    text-shadow:#d08d00 1px 1px 0}  
#other-social-bar {
    background-color: #D8E6EB;
    box-shadow: 0 1px 1px #FFFFFF inset;
    padding: 0px;
    font-family: "Arial","Helvetica",sans-serif;
    font-weight:bold;
    overflow: hidden;
    border: 1px solid #B6D0DA;
       height:30px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
    float: left;
    color:#1E598E;
    overflow: hidden;
    height:20px;
    padding:5px;
    width: 260px;}
#other-social-bar .other-follow ul {
    list-style: none outside none;
    padding-left: 4px;}
#other-social-bar .other-follow ul li {
    font-size: 12px;
    font-weight: bold;
    display:inline;
    border:0;
    text-shadow: 1px 1px white;}  
#other-social-bar .other-follow ul li a {
    font-size: 12px;
    color:#1E598E;
    font-weight: bold;
    display:inline;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow li {
    font-size: 12px;
   font-weight: bold;
    display:inline;
    border:0;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow li a {
    font-size: 12px;
    color:#1E598E;
    font-weight: bold;
    display:inline;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1NsbDAgs6884phyVA6NdR9Y5Aik-av9DMG9_N-tiniA4Ync7qtrVGWP4JrhA_mwSTfFVSuIjX_MA88Dk9l-z5yWwlRkaXMK3SR08rN_EO1YllCP2c3k2uVxYT8BJeiHkt10Fruv2ARik/s400/rss-16x16.png') no-repeat transparent;
    line-height: 1;
    padding: 0px 3px 1px 20px;
    width: 60px;
    margin-bottom:0px;
        margin-left:5px;}
#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-linkedin a, #other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-fb { background: url ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiepNeUzGX0KrQKlV-NARulFWBMB-bhnR_1zmfkqVYwNfDhtdj6r0nL9E9JqeHOsJehCmXRuTrNRD1qlxdsYfXlc_nDoZbLfQX6Jv1J9f3VEsIhjMgW7h3nijIc4srLRJ4ISeVnp2SS-TA/s400/facebook.png') no-repeat transparent;
    line-height: 1;
    padding: 0px 3px 1px 20px;
    width: 60px;
    margin-bottom:0px;}
#other-social-bar .other-follow li.my-gplus {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK2Sr5DU-5lh-68cpmYdddwan9FBE1U-yXFVWri66Gfwvw8wVTpNWjTOnlCNvfz_wjojMIEUH-GQvDzC0XpCjdAEgdvUuNLw1D2FxQf9s3Y4OOIlLl2YBU1XyeS7BnNAsjyPB2fBjthuI/s400/gplus-16x16.png) no-repeat transparent;
    line-height: 1;
    width: 60px;
    padding: 0px 3px 1px 20px;
    margin-bottom:0px;}
</style>
<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{
    background: #FFCA00;
    }
</style>
<![endif]-->

<div style="margin-bottom:1px;"> <div id="B-mashable-bar" > <!-- Begin Widget -->
<div class="fb-likebox"> <!-- Facebook --> <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
    <script type="text/javascript">FB.init("");</script>
    <fb:fan profile_id="PROFILE ID FACEBOOK" stream="0" connections="18" width="300px" height="170px" header="0" logobar="0"   css="http://script-bamz-us.googlecode.com/files/facebook.js"></fb:fan> </div> <div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;
align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;
lang=en&amp;link_color=&amp;screen_name=USERNAME TWITTER ANDA&amp;show_count=&amp;
show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div> <div id="email-news-subscribe">
<!-- Email Subscribe --> <div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">  
<input class="email" type="text" style="width: 160px; font-size: 12px+" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if (this.value==&#39;&#29;)this.value=this.defaultValue;" />      
        <input type="hidden" value="ID FEEDBURNER" name="uri" />
        <input type="hidden" name="loc" value="en_US" />
        <input class="subscribe" name="commit" type="submit" value="Subscribe" />  
    </form>
</div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/ID FEEDBURNER ANDA" target="_blank">RSS Feed</a> </li> <li class="my-fb"> <a rel="nofollow" title="FB" rel="author" href="ALAMAT FB ANDA" target="_blank">Facebook</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Goofle Plus" rel="publisher" href="http://plus.google.com/107316055823938290681" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://infoiki.blogspot.com/2012/08/cara-membuat-widget-email-subscribe.html" target="_blank" >get this</a></span></div></div>
<!-- End Widget --> </div>
Keterangan :
Ganti kode yang bewarna merah dengan ID feedburner anda.
Ganti kode yang bewarna kuning dengan ID fans page facebook anda. Contoh untuk mendapatkan ID fans page, alamat fans page: www.facebook.com/page/name/IDfanspage ID fans page ini berupa angka.
Ganti kode yang di beri blok merah dengan username twitter anda.
Ganti kode yang bewarna unggu dengan ID google plus anda.
5. Sekarang save.
Nah, mudah sekali bukan langkah – langkahnya. Itulah tutorial cara memasang subscribe via email di blog anda. Sekian tutorial kali ini, semoga bermanfaat bagi anda.