 |
| [TUTORIAL BLOGGING] Cara Memasang Subscription Box Pada Blog |
AFP - おはよう、皆！😄 Waah, pagi-pagi begini enaknya membuat postingan blog ya. wkwkwk (padahal gara-gara insomnia mimin jadi tidak bisa tidur). Lupakan insomnia mimin, kali ini, di pagi buta yang dingin ini pula, mimin akan memberikan [TUTORIAL BLOGGING] : Cara Memasang Subscription Box Pada Blog.
Apakah kalian tahu apa itu Subscription Box? Yap, Subscription Box adalah tempat dimana pengunjung blog dapat menempatkan emailnya untuk berlangganan tentang blog kita. Dengan kata lain, setiap kita (admin suatu blog) membuat postingan terbaru, pengunjung yang menempatkan emailnya akan selalu mendapatkan kabar ketika blog tersebut membuat postingan terbaru.
Nah, mimin yakin, sobat bloggers yang lain menyediakan baaaanyak sekali pilihan tampilan Subscription Box yang unik dan keren. Namun dalam tutorial kali ini, mimin mendapatkan tampilan Subscription Box dari kakak Arlina Design. Terima kasih banyak untuk kak Arlina. Tampilannya akan seperti gambar di atas, dan yang saat ini mimin gunakan pada ☔ Pluviophile 7.
Berikut langkah-langkah mudah yang harus kalian lakukan :
1. Buka Blogger > Template > Edit HTML
Nah, mimin yakin, sobat bloggers yang lain menyediakan baaaanyak sekali pilihan tampilan Subscription Box yang unik dan keren. Namun dalam tutorial kali ini, mimin mendapatkan tampilan Subscription Box dari kakak Arlina Design. Terima kasih banyak untuk kak Arlina. Tampilannya akan seperti gambar di atas, dan yang saat ini mimin gunakan pada ☔ Pluviophile 7.
Berikut langkah-langkah mudah yang harus kalian lakukan :
1. Buka Blogger > Template > Edit HTML
2. Temukan kode ]]></b:skin> atau </style>, gunakan CTRL+F untuk mempermudah pencarian.
3. Letakkan kode berikut tepat di atas kode ]]></b:skin> atau </style>
/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:0px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}
4. Kemudian tambahkan kode berikut ini tepat di atas kode <body> atau </body>.
Kalian bebas menempatkan kode berikut baik di atas kode <body> atau </body>. Perbedaannya adalah jika kalian menempatkan di atas <body>, maka Subscription Box akan muncul di bagian Header-Wrapper pada blog kalian atau di bagian atas blog kalian. Namun jika kalian menempatkannya di atas kode </body>, maka Subscription Box akan muncul di bagian Footer-Wrapper atau bagian bawah blog kalian. Mimin sendiri menempatkanya di bagian Footer-Wrapper.
<div id='subscribe-css'>Ganti semua kode yang ditandai Pluviophile7 dengan ID FeedBurner blog kalian. Dan kalian juga dapat mengganti tulisan "SUBSCRIBE to GET THE LATEST NEWS FROM ☔ PLUVIOPHILE 7" dengan tulisan sesuai kehendak masing-masing.
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> GET THE LATEST NEWS FROM ☔ PLUVIOPHILE 7</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Pluviophile7' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=Pluviophile7', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='Pluviophile7'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email [メールアドレスを入力]'/><input class='subscribe-css-email-button' title='' type='submit' value='Submit [提出します]'/></form>
</div>
</div>
</div>
