"Ubah Cara Kerja Anda,,,,,,,DuDuk Diam,,,,,Uang Datang.....! Dapatkan Keuntungan Yang Berlipat Ganda DEngan Memakai Metode Dan Trik Dari saya......" PESAN SEKARANG JUGA....! Jangan Tunda-Ambil Tindakan Sekarang Juga....!Do It Now...!

 Lupa Password
 Daftar

Rabu, 05 September 2012

Membuat Subscribe Via Email Melayang Pada Blog Media Online

Share on :

ok. sobat blogger yg slalu bahagia.....
Dalam posting Kali ini saya akan membahas bagaimana cara membuat widget subscribe via email melayang dengan jQuery, belum lagi ditambah tombol close,wow......pasti menarik...!
       ok. kita lanjut ke TKP...
namun sebelum nya sedikit Admin jelaskan begini ceritanya nanti setelah sobat memasang widget ini maka akan muncul icon di bawah samping pojok kiri blog sobat seperti yg ada pada blog Admin, klik icon itu untuk membuka widganya
udah jelas bukan......
mari kita lanjut cara pemasangan nya....
yang pertama sobat musti login ke blogger menggunakan akun blogger sobat,ingat akun blogger bukan akun twitter atau facebook,sampaikapan pun sobat ga'bakalan bs masuk ke halaman ntarmuka blogger
   untuk yang ke dua setelah sobat masuk ke halaman antarmuka blogger klik rancangan pilih edit HTML
  sebelum nya centang dulu kolom mungil disebelah tulisan Expan template,untuk anti sipasi terjadinya erorr saat pengeditan sobat download dulu salina dari template sobat dengan klik tulisan Download template lengkap,beres deh......
nah setelah sobat menjalankan langkah demi langkah yg ada di atas untuk selanjut nya sobat cari deh kode </head> tekan Ctrl+F untuk lebih mudah nya....
  nah setelah ketemu letak kan kode dibawah ini tepat persis diatas kode </head> awas jangan salah bisa berabe ntar 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 etelah itu langsung aja klik save tempale jangan ragu ragu kan sobat masih punya salinan dari template sobat yg barusan sobat download, bahasa keren nya sinpan sajalah begitu kira kira
   dan untuk yg ketiga atau yg ke tilu'bahasa sunda nya nak ora seng ke telu boso jawane hehehe ga'mudeng ya masak ga' mudeng udah jangan hiraukan kalimat itu,yuk kita lanjut sampaimana tadi o..ya sampai yg ketiga ya...
      nah untuk yg ketiga setelah sobat edit template sobat tadi sobat musti kembali kemenu rancangan,lalu Add tmbah gadget pilih gadget HTML java script jangan sobat pilih yg lain tar ga' jadi deh apa yg mau sobat bikin ok..
  setelah sobat memilih gadget HTML javascript nah langkah selanjut nya sobat copast deh kode di bawah ini:
silahkan buka untuk melihat

<style type="text/css">
#subscribe-button { float: left; position: fixed; bottom: 5%; left: 0; z-index: 999; }
#subscribe-widget { display:none; }
/* Overlay */
#btnt-overlay { background-color:#000; }
/* Container */
#btnt-container { min-height:350px; min-width:500px; color:#222; background-color:#fff; border:4px solid #ddd; }
#btnt-container .btnt-data { padding:8px; }
#btnt-container a.btntCloseImg { background:url(http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/s1600/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; }
#description { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; }
#description img { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; }
#btntfollowForm { padding: 15px; }
#btntfollowForm p { margin: 0 0 10px; }
#btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 4px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
#btntfollowForm input:not([type="checkbox"]):active,
#btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }
#btntfollowForm .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif; font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }
#btntfollowForm .button input:hover{ background: #4ab3c6; text-decoration: none; }
#btntfollowForm .button input:active,
#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
.btntFollowFooter { text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; }
.btntFollowFooter a { color: #222; text-decoration: none; }
.btntFollowFooter a:hover { color: #fff; }
<!--[if lt IE 7]>
#btnt-container a.btntCloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/s1600/x.png',sizingMethod='scale'); }
#btntfollowForm input{ padding: 10px 5px 10px 32px; width: 93%; }
#btntfollowForm input[type=checkbox]{ width: 10px; padding: 0; }
<![endif]-->
</style>
<div id="subscribe-button">
<a class="subscribe" href="#"><img src="http://2.bp.blogspot.com/-NASh-8VP8qs/T32ePzbJtSI/AAAAAAAAAr8/wjiJnIb7GD4/s1600/subscribe_to_email.png" alt="subscribe" /></a></div>
<div id="subscribe-widget">
<div id="btntfollowForm">
<img alt="Subscribe" border="0" float="center" src="http://1.bp.blogspot.com/-WcR7_thytsA/T3xAvSp4RBI/AAAAAAAAArc/zIO8zUiOOT0/s1600/subscribeviaemail.PNG" />
<div id='description'>
<img alt="email" border="0" src="http://4.bp.blogspot.com/-RKkfCfOLNx8/T3wPtkmqYuI/AAAAAAAAArU/gGpb8_Hep70/s1600/email-icon.PNG" />Dapatkan Artikel Terbaru dari kami via Email, akan langsung di kirim ke Email anda</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Media Online', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri" type="hidden" value="Media Online" /><input name="loc" type="hidden" value="en_US" />
<div class="button">
<input type="submit" value="Subscribe" /></div>
</form>
</div>
<div class="btntFollowFooter">
Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://www.blazerracing.blogspot.com" rel="dofollow" target="_blank">Blazer Blog</a></div>
</div>
<script src="https://blogtipsntricks.googlecode.com/files/jquery.btnt.popup.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(function ($) {
// Load dialog on page load
//$('#subscribe-widget').modal();
// Load dialog on click
$('#subscribe-button .subscribe').click(function (e) {
$('#subscribe-widget').modal();
return false;
});
});
</script>
catatan:
          ganti teks berwarna biru dengan teks sobat
          ganti yg berwarna merah dengan Id feed sobat
[contoh: http://feeds.feedburner.com/Media Online
jika sobat menginginkan posisi ikon berada di atas seperti yg ada pada blog ini sobat tgl ganti kode yg berwarna hijau 
   gimana mudah bukan pembuatan nya tak ada yg sulit didunia ini bila kita mau berusaha dan optimis...
         silahkan copast halal tdk ada sarat dan ketentuan pada blog Media Onlen untuk copast karna Media online hadir untuk saling berbagi informasi bagi semua hanya Admin harapkan jika sobat blogger sudi tinggalkan komentar sobat demi menjalin satu persatuan antar blogger,
   trimakasih telah berkunjung mantap jaya blogger
 by Media Online   

0 komentar:

Poskan Komentar

Tinggalkan jejak sobat dengan berkomentar dikolom komentar,saling menjalin persahabatan saling berbagi ilmu dan pengetahuan blogger sukses
[para blogger yg bersedia berkomentar di Media Online URL sobat akan Admin masukan ke daftar Blogger Link]


Dengan Quick 3D Cover, anda bisa membuat berbagai macam E-book cover, software box, Chasing CD Cover dalam format tampilan 3 Dimensi yang eklusif dan elegan.

Dengan Internet TV, kita dapat menonton secara langsung lebih dari 5000 siaran di seluruh dunia pada komputer kita. Dengan software ini kita bisa mendapatkan channel siaran televisi dari 112 negara di seluruh dunia. Dan yang terpenting, softwares ini tidak boleh dimiliki oleh anak-anak yang masih dibawah umur, karena terdapat lebih dari 30 buah siaran khusus orang dewasa. Siaran yang dapat kita tonton dari softwares ini bisa dibilang complete; TV Berita, TV Olahraga, TV Pendidikan, Siaran Dewasa, Music TV, Cartoons TV, Movies TV, Games TV, Funny TV, Entertainment TV, TV Selebriti, Lifestyle TV, Fashion TV, Travel TV, Poker TV, Adult TV, Free TV. Karena sangat banyak siaran yang bisa kita tonton, dengan program ini kita dapat menyaring berdasarkan rating saluran, genre, negara, kecepatan bit atau konten. Membuat daftar favorit untuk akses cepat ke saluran TV favorit Anda. Menampilkan dalam mode default biasa atau dalam mode layar penuh. Tidak ada tambahan peralatan yang diperlukan. Update database siaran dapat dilakukan secara otomatis di software ini.
 
MEDIA ONLINE DAN BISNIS
free counters