Subscribe box merupakan salah satu widget pengikut pada blog, dimana jika seseorang menuliskan e-mail mereka pada subscribe box ini, secara otomatis mereka akan mendapatkan update-tan artikel terbaru blog Anda lewat e-mail tersebut.
Sebenarnya, pada blogspot sendiri telah menyediakan widget subscribe ini. Namun, mungkin dihati Anda tampilannya kurang menarik. Oleh sebab itu, pada kesempatan ini Saya akan membagikan kepada Anda 2 model Subcribe Box yang keren dan pastinya menarik.
Baca : Cara Membuat Menu Navigasi Sitemap, About, Contact, Privacy Policy, Disclaimer pada Blog 100% Mudah
Cara Membuat Subscribe Box yang Keren dan Menarik Terbaru 2017
Subscribe Box Model 1
Copy script dibawah ini, lalu Anda masuk pada Tata letak ==> Tambahkan widget ==> HTML/Javascript, pastekan script tersebut disitu.
<div id="subscribe-css">
<div class="subscribe-wrapper">
<h3>Get more great stuff like this
<span>delivered to your inbox</span></h3>
<div class="subscribe-form">
<form action='http://feedburner.google.com/fb/a/mailverify?uri=xxxxx' class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=xxxxx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="xxxxx" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your e-mail here"/>
<input class="subscribe-css-button" title="" type="submit" value="Sign Up Now" />
</form>
</div>
</div></div>Lalu, copy script dibawah ini dan pastekan di atas kode </style> pada Tema ==> Edit Html
/* Subscribe Box */
#HTML1 {margin:0 0 20px 0;}
#HTML1 .widget-content{padding:0}
#HTML1 .subscribe-wrapper h3{color:#fff;background:transparent;padding:0;font-weight:400;text-transform:uppercase;margin:10px auto;text-align:center;font-size:16px;line-height:1;border:0;}
#HTML1 .subscribe-wrapper h3 span{display:inline-block;font-size:30px;font-weight:700;margin:15px 0 0 0}
#HTML1 .subscribe-wrapper p{margin:0 auto;opacity:.8;text-align:center}
.subscribe-wrapper{background:#000;color:#fff;margin:0;padding:20px;}
.subscribe-form{clear:both;display:block;margin:5px 0 0 0;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#fff;color:#000;margin:0 0 15px;padding:0.662em 1.247em;width:100%;border:1px solid rgba(255,255,255,.4);text-align:center;outline:0;border-radius:3px;}
input.subscribe-css-email-field::-webkit-input-placeholder{color:rgba(0,0,0,0.5);}input.subscribe-css-email-field:-moz-placeholder{color:rgba(0,0,0,0.5);}input.subscribe-css-email-field::-moz-placeholder{color:rgba(0,0,0,0.5);}input.subscribe-css-email-field::-ms-input-placeholder{color:rgba(0,0,0,0.5);}
.subscribe-css-button{background:rgba(0,0,0,0.15);color:#fff;cursor:pointer;margin:0 0 15px;padding:12px;width:100%;border:0;text-align:center;outline:0;border-radius:3px;transition:all .3s}
.subscribe-css-button:hover{background:rgba(0,0,0,0.25);color:#fff!important;}Subscribe Box Model 2
Copy script dibawah ini, lalu Anda masuk pada Tata letak ==> Tambahkan widget ==> Javascript, pastekan script tersebut disitu.
Lalu, copy script dibawah ini dan pastekan di atas kode </style> pada Tema ==> Edit Html
jangan lupa untuk mengganti masing-masing kata URL dibawah menjadi alamat url media sosial Anda.
<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="URL" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="URL" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="URL" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="URL" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="URL" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="URL" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="URL" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>Lalu, copy script dibawah ini dan pastekan di atas kode </style> pada Tema ==> Edit Html
/*Subscribe Box*/
#subscribebox{background:#F8F8F8;padding:20px;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#888;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(0,0,0,0.01);text-align:center;color:rgba(0,0,0,0.4);font-weight:bold}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#888;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#999}
.subscribe-button:focus{outline:0}Faktor yang mempengaruhi terjadinya subscribe ini ialah,
- Pengunjung atau pembaca merasa senang akan artikel yang Anda buat.
- Mereka tertarik pada Blog Anda.
- Masalah mereka selalu terpecahkan jika membaca artikel Blog Anda, sehingga mereka ingin selalu mendapatkan notifikasi artikel terbaru dari Blog Anda.
- Memang mutlak ingin mengikuti Blog Anda.
Akhir Kata .....
Gimana, unik dan keren bukan kedua model Subscribe Box tersebut. Anda juga bisa mengedit warna dan kalimatnya juga. Jika kalian tidak keberatan, kalian juga bisa men-subscribe Blog ini.
Agar kalian selalu mendapatkan notifikasi artikel terbaru dan bermanfaat dari Blog ini. Sekian artikel Cara Membuat Subscribe Box yang Keren dan Menarik Terbaru 2017 ini ditulis.
0 Comments:
Post a Comment