Cara Buat Follow By Email Untuk Blogger Keren !!!

MP4U - Cara Buat Follow By Email Untuk Blogger Keren !!! - berbicara soal blog apa lagi soal perkodean jujur aja admin sendiri tidak pandai bahkan sama sekali tidak tahu apa - apa .. bisa dikatakan terlalu gaptek :D .. memeiliki dan mengelola blog juga cuma sekedar tempat untuk bercerita dan sedikit berbagi di saat kala terasa jenuh ..

sedikit berbagi pengalaman aja dulu ya guys .. biar gak terlalu serius banget :D .. Ok langsung aja keawal cerita .. bermulai dari beberapa tahun lalu .. internet cuma di gunakan hanya untuk sekedar browsing membaca berita .. mendownload lagu dsb .. lambat laun terlintas dalam pikiran ingin memiliki blog sendiri .. berbagi apa yang saya bisa / tahu / punya .. tidak hanya sekedar membaca / melihat / mendownload saja ..

namun yang di dapat tidaklah seperti apa yang saya harap .. mengingat apa yang saya miliki sangatlah terbatas .. bahkan pengetahuan soal blogging pun sama sekali tidak ada dalam otak saya ..

Wajar saja .. sekolah aja cuma sampe lulusan SMA itu pun jurusan IPS .. bukan seorang yang berpendidikan tinggi yang sepenuh nya faham soal blog .. apa lagi seperti mereka dan mungkin termasuk sobat yang kebetulan lagi membaca .. anak kuliahan yang mengambil jurusan web design dsb'y .. tentunya sudah tidak asing lagi dengan kode .. bahkan dengan mudahnya bisa menciptakan sesuatu yang sangat keren dan tentunya lebih bermanfaat bagi orang seprti saya ..

buat saya sendiri internet dan dunia blogging adalah guru terbesar dalam hidup saya .. bagai mana tidak ?? .. dengan internet saya mendapatkan banyak pelajaran dan pengalaman .. banyak hal & sesuatu yang tidak tahu menjadi tahu .. yang di anggap tidak mungkin menjadi mungkin .. bahkan banyak pelajaran yang sebelum nya belum pernah saya pelajari di sekolahan dulu .. saya dapatkan dari sini ( internet ) ..

hingga perlahan saya pun mulai ngerti sedikit - sedikit soal blog .. ya walaupun cuma cukup saya sendiri yang tahu .. karena tujuan awal pun .. ingin memiliki blog cuma sekedar ingin tahu dan bisa dan cuma sekedar untuk berbagi cerita ( contohnya .. ya sekarang ini :D ) .. lagi pula ilmu - ilmu yang dapat saya ambil dan yang nempel di otak cuma sebagian kecil dari blogger - blogger senior .. dengan kata lain ibaratnya sampah yang udah gak berguna dan di buang .. saya pungut dan di manfaatin ..

pelajaran lain .. saya ambil dari ibuku sendiri .. ibu saya cuma seorang ibu rumah tangga .. yang terkadang jadi buruh jahit pakaian .. setiap kali ada orang / tetangga nyuruh membuatkan baju / seragam .. dari sisa - sia potongan kain nya di kumpulin dan di jahit sesuai motif kain tersebut .. hingga menghasilkan sesuatu yang bagus dan enak di pake .. takkala orang lain pun kadang merasa suka dan ingin dibuatkan juga ..

dari situ saya dapat mengambil pelajaran .. bahwa segala sesuatunya juga tidak harus langsung besar .. melainkan dari yang terkecil dulu .. bahkan dari hal yang dianggap tidak layakpun yang mestinya di buang .. akan menjadi lebih berguna .. jika kita pandai memamanfaatkan nya ..

begitupun soal blogging .. mencari .. membaca .. belajar dan praktek .. itu saya lakukan dari hasil memungut dari mereka - mereka yang di anggap mungkin tidak penting lagi .. atau bisa dikatakan cuma hal kecil yang tidak ada apa - apanya .. tetapi dari hal kecil lah saya jadi faham .. karena dari hal kecil juga bisa di manfaatin menjadi sesuatu yang berguna bagi diri sendiri ..

dan tanpa terasa baru juga cerita segitu .. udah habis rokok 3 batang .. matapun udah mulai terasa ngantuk :D .. saya rasa ceritanya di cukupkan aja dulu .. karena tidak penting sama sekali :D ..

Ok Next .. kita langsung aja kepembahasan kali ini .. yaitu Cara Buat Follow By Email Untuk Blogger Keren !!! ya walaupun mungkin hasilnya gak sekeren apa yang sobat bayangkan sebelum nya :D ..

untuk bahan - bahan nya .. yang perlu kita gunakan dalam pembuatan nya .. kita membutuhkan CSS / HTML & jQuery tetapi jika sobat ingin menggunakan plug in dari jquery maka di template sobat harus sudah ada atau terinstal kode jquery jika di template sobat belum terinstal jquery .. maka pertama sobat cukup letakkan kode scipt jquery dibawah ini .. dan paste sebelum atau di atas kode </head> .. Copas code script jquery dibawah ini .. jika di template sobat tidak ada .. kalau sudah terpasang .. abaikan saja ..

1. Code Script Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

selanjutnya copas semua kode HTML & CSS di bawah ini .. dan paste di sidebar blog sobat .. bukan di dalam template nya .. caranya : pada menu Rancangan >> Tambah Gadget >> Pilih HTML/Java Script >> Lalu copy kode berikut ke dalamnya ..

2. Code CSS

<style type="text/css"> /*<![CDATA[*/ #w2bfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;} .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);} .w2bfollowButton {background: #464646;color: #CCC !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;} .w2bfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxEiBupeB7BtqNtYvQZbXYxegPVemJx0UpmZAf7ym_OoBWyBR6_IhbAxVc1re5gVFsafRZ99UXEXdKCyf4rlEBpH49omy8uDIIUXLcrBnI6HFVXdVrMlP6bpTPRGD9tIdw0C5ms3smw8g/s1600/follow-O.W.png") no-repeat scroll 0 3px transparent;padding-left: 15px;} .w2bfollowButton:hover,.followActive {color: #fff !important;} .w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;} .followactive {background-color: #333;} .w2bfollowForm {padding: 15px;} .w2bfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;} .w2bfollowForm p {margin: 0 0 10px;} .w2bfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;} .w2bfollowForm form {text-align: center;} .w2bfollowForm .emailInput:focus {color: #000;border-color: #000;} .w2bfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;} .emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;} .emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;} .w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;} .w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;} .w2bFollowFooter a:hover {color: #fff;background: none;} /*]]>*/ </style>

3. Code JavaScript ( JS )

<script type="text/javascript"> /*<![CDATA[*/ ;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b("#w2bfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery); /*]]>*/ </script>

jika semua kode di atas sudah sobat copas .. dan sudah di pasang .. maka jangan dulu di save .. karena masih ada satu tahap lagi .. yaitu kode HTML nya .. dan perlu di ingat .. sebeluk nya sobat harus daftar dulu di feedburner .. untuk mendapatkan ID Blog sobat .. yang nantinya akan do gunakam untuk subcribes / Follow Via email pada blog sobat .. karena di kode HTML ini .. ada ID FeedBurner Nya yang harus sobat ganti sesuai dengan ID & Nama blog sobat .. dan berikut kode HTML nya ..

4. Code HTML

<div id="w2bfollowSubscribe" style="display:none;">
<div class="w2bfollowForm">
<a class="w2bfollowButton" href="#" title="Follow">
<span>Follow</span></a>
<h3>Follow "MP4U"</h3>
<p>Ikuti Kami Via Email Dan Dapatkan Info Terbaru tiap harinya</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyPosForYou', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/>
<input type="hidden" value="MyPosForYou" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" class="emailSubmit"/>
</form>
</div>
</div>

5. Hasil Pembuatan-nya

• Hasilnya seperti pada gambar diatas .. gimana keren ?? cukup keren ?? biasa saja ??
• Untuk lebih jelasnya ... silahkan Scroll terus .. kepaling bawah bagian footer blog ini .. sperti contohnya pada gambar ..
• Coba klik "follow" maka akan terbuka tempat pengisian email .. seprti gambar di atas ..

Note

• Ingat jika di template sobat sudah terinstal Jquery 1.7.1 maka langkah pertama tidak perlu di lakukan ..
• Teks warna Biru Muda silahkan sobat ganti dengan nama blog sobat ..
• Teks warna Biru silahkan sobat ganti dengan kata-kata sobat sendiri ..
• Teks warna Putih silahkan sobat ganti dengan Id feed bunner sobat ..

Ok Next .. saya rasa cukup sampe disini perjumpaan kita pada malam hari ini .. terimakasih sudah membaca Cara Buat Follow By Email Untuk Blogger Keren !!! Dari awal sampe akhir .. semoga bermanfaat dan sampai jumpa .. Selamat malam N' Happy Blogging ^__^ …

Source :

• Cara Membuat Widget Follow By Email Blogspot Keren !!!

Baca Juga :

• Cara Buat Garis Berwarna Di Sisi Kanan Kiri Text Dengan CSS
• Cara Membuat Efek Tulisan Dengan CSS Text Shadow Keren !!!
• Cara Membagi Postingan Di Blogspot Menjadi Beberapa Halaman ( Beberapa Bagian )

Tag : #CSS, #HTML, #Tag CSS, #Tag HTML, #Jquery, #JavaScript, #JS, #Blog, #Tutor Blog, #Tutorial Blog, #Follow, #Subcribes, #Follow Via Email, #Cara, #Cara Buat, #Cara Membuat, #Cara Ngebuat, #Cara Bikin, #Cara membikin, #Cara Ngebikin, #Cara Bikinin, #Cara Buat Follow By Email Untuk Blogger Keren !!!