Cara Membuat Widget Subscribe Blog Melayang - InformasiAjib

Cara Membuat Widget Subscribe Blog Melayang

Hallo semuanya ! pada kesempatan kali ini saya akan membagikan bagaimana cara membuat dan memasang widget subscribe atau berlangganan unik untuk Blog. Tombol subscribe merupakan salah satu langkah untuk menambah jumlah pemirsa bagi sebuah blog dan akan meningkatkan jumlah viewers. Selain itu fungsi dari tombol subscribe yaitu akan memudahkan para pembaca blog untuk mendapatkan informasi maupun postingan terbaru dan terupdate dari blog kita.
Cara Membuat Widget Subscribe Blog Melayang
 Biasanya tampilan widget subscribe gitu-gitu saja dan terlihat membosankan. Akan tetapi saya akan mengajarkan kalian bagaimana cara untuk membuat widget yang sedikit berbeda dari biasanya yaitu widget subscribe dengan style melayang (pop-up). Ketika Blog di buka, maka akan secara otomatis widget subscribe akan melayang, sehingga kemungkinan para pembaca untuk berlangganan  atau mensubscribe akan semakin besar.

Cara Memasang Widget Subscribe Melayang / Pop-up

  • Masuk ke dasbord blogger > Tema > Edit Tema
  • Pastekan kode CSS dibawah ini tepat di atas </style> atau ]]></b:skin> 
#sub-box {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;} #boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);} #boxview {background:#fff;border:8px solid #fff;width:600px;height:250px;position:absolute;top:33%;left:28%;} #closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;} #closebox:before {content:"Close";padding:5px 8px;background:#fff;color:#48cb7a;font-weight:normal;font-size:12px;font-family:Open sans;} #boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;} #subscribe-box {width:600px;height:250px;background-color:#02BA74;} #subscribe-box p {font-family:'Open Sans';font-size:18px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;} #subscribe-box .emailfield {padding:0px 20px 10px;} #subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;font-family:'Open Sans';width:96.3%;border:0;transition:all 0.4s ease-in-out;} #subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;} #subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:normal;font-size: 16px;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;} #subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;} #subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}
  • Simpan Tema
  • Setelah itu masuk ke Tata Letak > Tambahkan Gadget > HTML/JavaScript, dan pastekan kode dibawah ini.
<script type='text/javascript'> //<![CDATA[ jQuery.cookie = function (key, value, options) { // Pengaturan cookie if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options); if (value === null || value === undefined) { options.expires = -1; } if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new Date(); t.setDate(t.getDate() + days); } value = String(value); return (document.cookie = [ encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); } // cookie options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; }; //]]> </script> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_facebook_box') != 'yes'){ $('#sub-box').delay(3000).fadeIn('fast'); $('#closebox, #boxclose').click(function(){ $('#sub-box').stop().fadeOut('fast'); }); } }); </script> <div id='sub-box'>
 <div id='boxclose'>
 </div>
<div id='boxview'>
 <div id='closebox'>
 </div>
<div id='subscribe-box'>
 <center>
<p>Subscribe for Latest Update</p>
</center>
<div class='emailfield'>
 <form action='http://feedburner.google.com/fb/a/mailverify?uri=Informasiajib' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Informasiajib, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
 <input type='text' name='name' onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = "";}' value='Your Name'/> <input type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/> <input name='uri' type='hidden' value='Informasiajib'/> <input name='loc' type='hidden' value='en_US'/> <input class='submitbutton' type='submit' value='Subscribe Now!'/> </form>
</div>
</div>
</div>
</div>

  • Catatan : untuk tulisan "Informasiajib" kalian ganti dengan ID Feedburner kalian.
  • Terakhir simpan dan lihat hasilnya.

2 Responses to "Cara Membuat Widget Subscribe Blog Melayang "

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel