Cara Membuat Subscription Box di Blog
Nyampling ~ Cara Membuat Subscription Box di Blog. Sebuah blog idealnya memiliki semua navigasi yang bagus, tidak membingungkan para visitor. Baik itu dari segi tata letak menu blog, sampai pengaturan dari desain blog. Kita dapat mendesain blog seunik mungkin untuk menarik minat visitor, desain unik ini bisa berupa pengelompokan dan pemberian nama menu yang memudahkan visitor dalam mencari artikel blog.
Biasanya blog yang rutin dikunjungi oleh visitor, adalah blog yang memberikan informasi dan dapat memecahkan masalah yang dihadapi oleh visitor salah satu contohnya adalah masalah tentang gadget yang berbeda - beda. Dengan perkembangan jaman seperti sekarang tentu banyak permasalahan yang dihadapi oleh visitor karena kebijakan - kebijakan terbaru dari sebuah gadget.
Bagi visitor yang merasa terbantu oleh artikel yang telah diposting oleh blog kita, mereka terkadang selalu menunggu update artikel terbaru dari blog kita supaya tidak ketinggalan informasi artikel terbaru.
Salah satu cara untuk mereka agar bisa berlangganan artikel terbaru adalah dengan membuat Subcription Box atau disebut juga kotak berlangganan. Fungsi dari subscription box ini adalah memberitahu visitor jika blog memposting artikel baru. Sehingga kita tidak harus standby membuka blog tiap hari untuk menunggu artikel baru.
Jika ada artikel yang baru terbit dari blog maka kita akan diberitahu melewati email kita. Dalam hal ini kita harus mempunyai email untuk mendaftarkan ke Subcription Box sebuah blog. Secara default subcription box pada blog sudah ada. Tapi untuk tampilan sangat sederhana sehingga tidak enak dilihat.
Nah pada tutor kali ini akan membahas bagaimana cara membuat subcription box pada blog. Simak tutorialnya dibawah ini :
Tipe 1. Pada Bagian Footer Blog / Setelah Postingan Artikel
#1. Langkah awal silahkan buka blogger >> Tema >> Edit Html >> Temukan kode ]]></b:skin> atau </style>
#2. Letakkan kode berikut diatasnya
/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px 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%;}#3. Tambah mark up berikut didalam tag <head>.......</head> atau lebih tepatnya dibagian footer-wrapper
<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=nyampling' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=nyampling', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='nyampling'/><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>#4. Simpan template dan lihat hasilnya
Tipe 2. Pada Sidebar Blog
#1. Pada langkah pertama silahkan login ke blogger >> Tata Letak >> Add Widget >> HTML/Javascript
#2. Tempelkan kode berikut
<style>
#dgenera-blog {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
#email-news-subscribe .email-box{
padding: 5px 5px;
font-family: "Arial","Helvetica",sans-serif;
height:38px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-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: -moz-linear-gradient(center top,#666 0,#333 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:white;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
background-image:-moz-linear-gradient(top,#333,#666);
background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:#FFFFFF;
}
#other-social-bar {
padding: 0px;
overflow: hidden;
height:37px;
margin-top:-8px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
float: left;
overflow: hidden;
padding:5px;
width: 270px;}
#other-social-bar .other-follow ul {
list-style: none outside none;
padding-left: 4px;}
#other-social-bar .other-follow li {
display:inline;
border:0;
}
#other-social-bar .other-follow li a {
font-size: 12px;
color:#666;
font-weight: bold; font-family:arial;
display:inline;
}
#other-social-bar .other-follow li.my-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg4rb-3F96Wo5vTqSF6BTcWAOk5C8_m-a9C28Ta6EM438PlFrmGZpZUs5VA409_6SmHRzgJ9bLht-9BKq62fC5fAndn01m-Hval71pNu_H5o-6x_TtfCJDKBN7hIJjLD11FCo7cn3DTzs/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-twitter 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-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-twitter {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijrLY8_xCYBVaVifg8krAoNtlT6AFpejycZ3dRkzUHnO54C_NqQDNq3tILGa_c4cu4f08owE0rqkmYDuoA_bUYI_Ud5K3iwY2qT1kiQI-J3lqXRXRbGH0JZczbTv1-pcVBklt5C6RBaME/s400/twitter%2527.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/AVvXsEh7TWsdS_aHYhnlXJQP0JBogE7ZSxnaNKI9MDcEjK1XHkatpobyW4hWy3MwZmzuuGQeqlG8Uxa1yDuZTtiBfdg1f5quCA85olCQzl_gcLXjX5FoicnZBziR9VilxcLf0ttNCBKHnEJAWFk/s400/gplus-16x16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;}
.emailicon {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiTSAKjkEbFRRklPvoeHwcnzDqX15_fJ1IopjwxDVY3WDJnRSgYoD9Oq7BB7Y5Pda5_tb5mLgJJR8XW7vPRgNkIj4UEMRWYHwS0SOfgZ8Q9snhFbPCMbNkQRK-ZJxQ_IN351yw_mpyJe4E/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent;
padding: 0px 20px 0px 95px;
min-height:100px;
margin: 0px;
width: 183px;
line-height: 20px;
vertical-align: middle;
font-size: 14px;
color: rgb(51, 51, 51);
}
.emailicon p {
color:#FF8604;
font-size: 20px;
font-weight: normal;
font-family: impact;
padding:40 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;
}
</style>
<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{
background: #333;
}
</style>
<![endif]-->
<div id="Blogoooblok-blog" >
<div class="emailicon"><p>Dapatkan Update Artikel Gratis! </p></div>
<div id="email-news-subscribe">
<div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=nyampling', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter Email Anda Disini..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" />
<input type="hidden" value="nyampling" 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">
<ul class="other-follow">
<li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/nyampling" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/nyampling" target="_blank">Twitter</a> </li>
<li class="my-facebook"> <a rel="nofollow" title="Facebook" rel="author" href="https://facebook.com/nyampling" target="_blank">Facebook</a> </li>
</ul>
</div>
</div>#3. Simpan dan lihat hasilnya
Ganti yang diblok warna merah dengan alamat feed blog kalian
Ganti yang diblok warna hijauh dengan alamat sosial media kalian
Referesi Kode Script :
https://www.arlinadzgn.com/2016/04/cara-membuat-subscription-box-di-blog.html
https://www.blogooblok.com/2015/01/cara-membuat-kotak-subscribe-keren-di.html
Penutup
Demikian sedikit postingan tentang "Cara Membuat Subscription Box di Blog" Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Semoga postingan ini dapat bermanfaat.