Kotak Berlangganan Artikel Bloger 2019

Bagi kalian yang ingin menggunakan Widget Subscribe Artikel pada Blogger maka kali ini saya akan membagikan sedikit Widget atau Script yang bisa kalian gunakan pada blog yang belum memiliki Widget Subscribe halaman Blog kalian.

Cara paling sistematis untuk memperkuat hasil viewer dan meningkatkan pengunjung pada blog kalian adalah dengan menggunakan Widget atau Kotak Berlangganan artikel yang telah kalian buat dan kemudian disebarkan melalui email masing-masing yang sudah memasukan email agar hasil artikel yang uptodate dibuat akan dikirim pada email para Subscriber blog kalian, untuk selanjutnya para viewer akan membuka email masing-masing untuk melihat artikel terbaru yang kalian buat. 

Untuk membuat Widget Subscriber atau Kotak Berlangganan artikel ini cukup mudah dan kalian bisa menggunakan beberapa cara yang saya bagikan ini, namun untuk diperhatikan adalah Script yang ada pada kotak tersebut untuk di edit sesuai kebutuham seperti nama email dan nama feedburner kalian, seperti apa Widget atau Kotak Berlangganan yang saya bagikan maka simak baik-baik cara dibawah ini. 

Kotak Berlangganan Artikel

Style Ala Santossalam

<style> #sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0} .sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigM-pp0ZiKM-Qp9ikqS-68jsiITqhED4c82ogmTxcNONNuiWT5zi-a3j2ksVV86rhZKt8HETdOmqnC2i7-hRn_uZRKaN0ZYI6Vj5XAQsRg7znDSc-KEgXVMiCiR_i5foPbV1eJ4zp7hPDB/s1600/background+Last+Young+Boy.png) repeat scroll 0 0 #000000;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase} .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto} .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPHJmgW5tLi9p0I74gno7ydtOQQZ4oOUzOSDOFPtiMRMUSS6rskHIBZzcfwJkDFn-K1CEazd-ZastkVqYLbWz9qw3XzBDYlK86dK2ND8nY7PICqO7qLYiAGYih29NauLwRygXg0bd7Ezjw/s1600/Icon+Last+Young+Boy.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%} .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%} .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff} .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px} #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%} </style><br /> <div id="sidebar-subscribe-box"> <div class="sidebar-subscribe-box-wrapper"> <p> <span style="color: #ffffaf;">Berlangganan Artikel Via Email</span></p> <div class="sidebar-subscribe-box-form"> <form action="http://feedburner.google.com/fb/a/mailverify?uri=LastYoungBoy" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=LastYoungBoy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="uri" type="hidden" value="LastYoungBoy" /><br /> <input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Masukkan email anda disini..."/><br /> <input class="sidebar-subscribe-box-email-button" title="" type="submit" value="MULAI BERLANGGANAN" /></form> </div> </div> </div>

- Cari Kalimat atau nama LastYoungBoy dan ganti dengan nama FeedBurner kalian sendiri.

- Untuk menampilkan kotak berlangganan pada versi mobile kalian bisa berikan tambahan script mobile='yes' ( Edit HTML yang kalian masukan pada Widget ).

- Pada keterangan kotak seperti "BERLANGANAN ARTIKEL VIA EMAIL" bisa kalian ganti sesuka kalian sendiri, pada tombol "MULAI BERLANGGANAN" juga bisa kalian ganti sesuka kalian. 

Style Ala Blogooblok

Script HTML <br /> display:inline;<br /> border:0;<br /> }<br /> <br /> #other-social-bar .other-follow li a {<br /> font-size: 12px;<br /> color:#666;<br /> font-weight: bold; font-family:arial;<br /> display:inline;<br /> }<br /> #other-social-bar .other-follow li.my-rss {<br /> background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRxm0I2ghvGhuQbAyQP8KxdJLsalmFJSUaIpdaYDOJUpS9ES0EY6SqT9QR_vTnmMraj8exbEvXSIe2Ez_iqO4pAWSpeXuElCBw3Js32y9mFZNjDyAiDDi87g6aLlOOX7DSqaYc8vvX2rxn/s1600/Icon+RSS+Last+Young+Boy.png') no-repeat transparent;<br /> line-height: 1;<br /> padding: 0px 3px 1px 20px;<br /> width: 60px;<br /> margin-bottom:0px;<br /> margin-left:5px;}<br /> <br /> #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{<br /> text-decoration:none;<br /> }<br /> #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{<br /> text-decoration:underline;<br /> }<br /> #other-social-bar .other-follow li.my-twitter {<br /> background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVl7M8nPgliBhyAA5pqVrF5lAenAZ-XHLX1ISYvNj28WVaevlh0HsBg1Pta1IynBPvjaT64vJizHEs3Lcz_wUtfKzgyHNkd3FzS0A25FLHS1JmaqnylBCNLfWJSquJ63SeoP-ENnuVITXl/s1600/Icon+Twitter+Last+Young+Boy.png') no-repeat transparent;<br /> line-height: 1;<br /> padding: 0px 3px 1px 20px;<br /> width: 60px;<br /> margin-bottom:0px;}<br /> #other-social-bar .other-follow li.my-gplus {<br /> background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ5XnX94yjL3EPXj1itxd2Q41OhHAXP5TiJTWYnB2viOgT_i3ZFS2g3Se8ZlW-n6jYEzAZqza0Vf4k0W6WifdN5UWlO6DDBk0icoUNsNGxcRPyz8scOy15FtjuX65Sf5ffgRk7FHgX74C-/s1600/Icon+Gplus+Last+Young+Boy.png') no-repeat transparent;<br /> line-height: 1;<br /> width: 60px;<br /> padding: 0px 3px 1px 20px;<br /> margin-bottom:0px;}<br /> <br /> .emailicon {<br /> background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7NzY3crZGLF3O8mn7kjgz4JaLDG_PZpPO4068BLifLz-ChNaugkdsRZhB8SOtz10USQESbV1f55VQuA_8f8XM0TkPnkn1Uh8aXKm2_5P9SJSLf04v__LabGOm0m7r1GuqCAggXTV7TfBL/s1600/Icon-RSS-FEED-Last+Young+Boy.gif") no-repeat scroll 0px 2px transparent;<br /> padding: 0px 20px 0px 95px;<br /> min-height:100px;<br /> margin: 0px;<br /> width: 183px;<br /> line-height: 20px;<br /> vertical-align: middle;<br /> font-size: 14px;<br /> color: rgb(51, 51, 51);<br /> }<br /> <br /> .emailicon p {<br /> color:#FF8604;<br /> font-size: 20px;<br /> font-weight: normal;<br /> font-family: impact;<br /> padding:40 0px 10px 0px;<br /> margin:0;<br /> padding-top: 20px;<br /> line-height: 25px;<br /> text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;<br /> }<br /> </style><br /> <!--[if IE]><br /> <style> #email-news-subscribe .email-box input.subscribe{ background: #333; } </style><br /> <![endif]--><br /> <br /> <div id="LastYoungBoy" > <br /> <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=LastYoungBoy', '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" /><br /> <br /> <input type="hidden" value="LastYoungBoy" 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/LastYoungBoy" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/LastYoungBoy" target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/u/0/+LastYoungBoy/posts target="_blank">Google Plus</a> </li> </ul> </div> </div>

- Cari Kalimat atau Nama LastYoungBoy dan ganti dengan nama FeedBurner kalian sendiri.

- Cari Kalimat atau Nama LastYoungBoy dan ganti dengan nama Akun Twitter.

- Cari Kalimat atau Nama LastYoungBoy dan ganti dengan nama Akun Gplus.

- Pada keterangan kotak seperti "Enter Email Anda Sendiri..." bisa kalian ganti sesuka kalian sendiri, pada tombol "Subscribe" juga bisa kalian ganti sesuka kalian. 

Style Ala HanyaPedia

Script HTML dibawah ini

<center> <div align="center" id="truebloggertricks-Subscribe-wrapper"> <div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 240px;"> <h3 id="truebloggertricks-title-text" style="color: white; font-size: 20px;"> GET FREE EMAIL UPDATES</h3> <div id="truebloggertricks-sub-title-txt" style="color: white; font-size: 14px;"> Join us for free and get valuable content delivered right through your inbox.</div> <br /> <br /> <form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=LastYoungBoy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="name" id="truebloggertricks_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter First Name" /><br /> <br /> <input class="email" id="truebloggertricks_Subscriber_email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br /> <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> </div> <input name="uri" type="hidden" value="LastYoungBoy" /><input name="loc" type="hidden" value="en_US" /> <input id="truebloggertricks_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form> </div> </div> </center> </div>

Script CSS 

#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;<br /> background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;<br /> text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;<br /> margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;<br /> padding: 5px;border: none;}#ig-subscription-optin input.name {<br /> background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYcfMYNJceTxHn1ecfhc2REXdBUzoWLjxPqbz4EYy29JiT8yGgT7HCnl6waSRNk_pR5Vnahk9422iuFJhstyAyDUqWIdZJ2vfFQtdbEwo0dbFhHEoUY4Yk2jzYY268XOPQbsPz_9d4Ft6H/s1600/Icon+USer+Last+Young+Boy.png) no-repeat center right;}<br /> #ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;<br /> font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}<br /> #ig-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRn3vCYbonZDKHwdgx4sjTHDyI5Hl612ahD7aNXQO3ijdDovgRs3_dpg71AGl8ebM0aHT6jsIYEVgi0OmAWY0zcFx6pUrQpkz9U2PcId-EfwOUC2DV5hc1WtUql5B67TfXkymNX9vjr82F/s1600/Icon+Surat+Last+Young+Boy.png) no-repeat center right;}#ig-subscription-optin input {<br /> font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;<br /> font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;<br /> text-transform: none;text-decoration: none;<br /> text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;<br /> border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {<br /> background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;<br /> color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {<br /> color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisr1tl6ZfMkkbMiU-VnOEray3D56_3SkdEjrwXJzHIP2Kqck07J_xq0pzrSyDpA08C21cbUbhUgcebqPH-Ad91CxdFhbA4KzQtgagL8pUWg3Wjm1uK92WHT9ft-vejU30oAN7VGwXWCOqe/s1600/Icon+Garis+Merah+Last+Young+Boy.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;<br /> padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}<br /> #ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;}

- Untuk Script Html digunakan pada Template atau Tata Letak kemudian pilih Tambahkan Gadget Lalu pilih HTML/Java Script lalu masukan Script HTML.

- Untuk Script CSS kalian bisa masukan pada Setingan Dashboard lalu pilih Tata Letak atau Template dalam bahasa Inggris kemudian pilih Edit HTML dan cari kode dengan CTR+F 

]]></b:skin> lalu masukan Script CSS tersebut DIATAS Script ]]></b:skin>.

- Kemudian Save atau Simpan, lihat hasilnya pada Home blog kalian.

Style Ala HanyaPedia

HTML Script

<center> <div id="subscribebox"> <div class="follow-subscribe-social"> <ul> <li><a href="https://lastyoungboy.blogspot.com/" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a href="https://lastyoungboy.blogspot.com/" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="https://lastyoungboy.blogspot.com/" target="_blank"><i class="fa fa-linkedin"></i></a></li> <li><a href="https://lastyoungboy.blogspot.com/" target="_blank"><i class="fa fa-google"></i></a></li> <li><a href="https://lastyoungboy.blogspot.com/" target="_blank"><i class="fa fa-pinterest-p"></i></a></li> <li><a href="https://lastyoungboy.blogspot.com/" target="_blank"><i class="fa fa-dribbble"></i></a></li> <li><a href="https://lastyoungboy.blogspot.com/" target="_blank"><i class="fa fa-instagram"></i></a></li> </ul> </div> <div class='post-subscribe'> Subscribe to my Newsletter</div> <form class="subscribe" action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=LastYoungBoy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name='uri' type='hidden' value='LastYoungBoy'/><br /> <input name='loc' type='hidden' value='en_US'/><br /> <br /> <input class="subscribe-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email Address" /><br /> <input class="subscribe-button" type="submit" value="Subscribe" /><br /> </form> <br /> </div> </center>

CSS Script

body {<br /> background: #e6ed3;<br /> margin: 0 auto 0;<br /> color: #444;<br /> font-family: 'PT Sans', arial, sans-serif;<br /> font-size: 13px;<br /> font-weight: 400;<br /> text-align: center;<br /> }<br /> #subscribebox {<br /> background:#576269; <br /> padding:20px;<br /> font-family: 'PT Sans', sans-serif;<br /> width:450px;}<br /> <br /> .widget_follow_subscribe .widget-detail {<br /> padding: 36px 30px 40px 30px;}<br /> <br /> #subscribebox p {<br /> color: white;<br /> font-size: 15px;<br /> text-align: center;<br /> font-weight: 700;<br /> }<br /> <br /> .follow-subscribe-social {<br /> margin: 0 0 15px;<br /> padding: 0 0 14px;<br /> border-bottom: #858585 solid 1px;<br /> }<br /> <br /> .follow-subscribe-social ul {<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> text-align: center;<br /> }<br /> <br /> .follow-subscribe-social ul li {<br /> display: inline;<br /> margin: 0 25px 0 0; border-bottom: none;<br /> }<br /> <br /> .follow-subscribe-social ul li:last-child {<br /> margin: 0;<br /> }<br /> <br /> .follow-subscribe-social ul li a {<br /> font-size: 17px;<br /> color: #cacaca;<br /> <br /> -webkit-transition: color 0.2s ease-in-out;<br /> -moz-transition: color 0.2s ease-in-out;<br /> -ms-transition: color 0.2s ease-in-out;<br /> -o-transition: color 0.2s ease-in-out;<br /> transition: color 0.2s ease-in-out;<br /> }<br /> <br /> .follow-subscribe-social ul li a:hover {<br /> color: #fff;<br /> }<br /> <br /> form.subscribe {<br /> margin-top: -7px;<br /> }<br /> <br /> form.subscribe input {<br /> display: block;<br /> width: 100%;<br /> }<br /> <br /> .subscribe-email {<br /> height: 45px;<br /> border: none;<br /> margin: 0 0 10px;<br /> font-family:Poppins;<br /> font-size: 0.928571em;<br /> background-color: rgba(255,255,255,0.8);<br /> text-align: center;<br /> color:#666666;<br /> }<br /> <br /> .subscribe-email:focus {<br /> outline: 0;<br /> }<br /> <br /> /* ===== Placeholder color ===== */<br /> form.subscribe .placeholder { /* Internet Explorer 9 */<br /> color: #cacaca;<br /> }<br /> <br /> form.subscribe input:-ms-input-placeholder { /* Internet Explorer 10+ */<br /> color: #cacaca;<br /> }<br /> <br /> form.subscribe input::-webkit-input-placeholder { /* WebKit browsers */<br /> color: #cacaca;<br /> }<br /> <br /> form.subscribe input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */<br /> color: #fafafa;<br /> }<br /> <br /> form.subscribe input::-moz-placeholder { /* Mozilla Firefox 19+ */<br /> color: #fafafa;<br /> }<br /> <br /> .subscribe-button {<br /> height: 45px;<br /> font-weight: 700;<br /> font-family:'Poppins;<br /> font-size:16px;<br /> color: #fff;<br /> text-transform: uppercase;<br /> border: none;<br /> background-color:#0CC388;<br /> <br /> -webkit-transition: background-color 0.2s ease-in-out;<br /> -moz-transition: background-color 0.2s ease-in-out;<br /> -ms-transition: background-color 0.2s ease-in-out;<br /> -o-transition: background-color 0.2s ease-in-out;<br /> transition: background-color 0.2s ease-in-out;<br /> }<br /> <br /> .subscribe-button:hover {<br /> background-color: #f1d640;<br /> }<br /> <br /> .subscribe-button:focus {<br /> outline: 0;<br /> }<br /> <br /> .post-subscribe{text-align:center;font-family:Dancing Script;font-size:33px;color:#fff;margin: 5px;}

- Masukan link Sosial Media yang kalian punya satu persatu

- Untuk Script Html digunakan pada Template atau Tata Letak kemudian pilih Tambahkan Gadget Lalu pilih HTML/Java Script lalu masukan Script HTML.

- Untuk Script CSS kalian bisa masukan pada Setingan Dashboard lalu pilih Tata Letak atau Template dalam bahasa Inggris kemudian pilih Edit HTML dan cari kode dengan CTR+F 

]]></b:skin> lalu masukan Script CSS tersebut DIATAS Script ]]></b:skin>.

- Kemudian Save atau Simpan, lihat hasilnya pada Home blog kalian.

Style Ala Iqniel

Script HTML

/* Subscribe Box */<br /> #ignielSubscribe {width:300px; height:auto; background-color:#eee; border:1px solid #ddd; border-radius:7.5px; display:block; margin:auto; line-height:40px; padding:0px}<br /> #ignielSubscribe .email__ {padding:15px 15px 5px;}<br /> #ignielSubscribe .email {margin:auto; color:#555; text-align:center;}<br /> #ignielSubscribe .email:before {content:''; width:50px; height:50px; display:block; text-align:center; margin:auto; border-radius:100px; transition:all .3s ease; -webkit-animation:ignielRing 5s 0s ease-in-out infinite; -webkit-transform-origin:50% 4px; -moz-animation:ignielRing 5s 0s ease-in-out infinite; -moz-transform-origin:50% 4px; animation:ignielRing 5s 0s ease-in-out infinite; transform-origin:50% 4px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='%23008c5f'/%3E%3C/svg%3E") center center / 50px no-repeat;}<br /> #ignielSubscribe .medsos__ {padding:15px 0px; line-height:0px; border-top:1px solid #ccc;}<br /> #ignielSubscribe form {display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; margin:0px 0px 15px; padding:0px; position:relative;}<br /> #ignielSubscribe form:before {left:15px; position:absolute; display:block; width:20px; height:20px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23717171'/%3E%3C/svg%3E") no-repeat; content:'';}<br /> #ignielSubscribe input {width: calc(100% - 35px); background-color:#ccc; line-height:1.5em; border:1px solid #ccc; border-right:0px; padding:8px 10px 8px 40px; font-size:12px; text-align:left !important; border-radius:50px 0px 0px 50px; outline:none; outline-width:0px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;}<br /> #ignielSubscribe button {background-color:#008c5f; width:40px; min-width:40px; height:36px; margin:0px; padding:0px; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;}<br /> #ignielSubscribe button:hover, #ignielSubscribe button:focus {background-color:#1d2129;}<br /> #ignielSubscribe button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat; content:''; vertical-align:-3px;}<br /> #ignielSubscribe .medsos {width:100%; text-align:center;}<br /> #ignielSubscribe .medsos svg {width:20px;height:20px;margin-top:7px}<br /> #ignielSubscribe .medsos svg path {fill:#fff}<br /> #ignielSubscribe .medsos a {display:inline-block; margin-right:7px; width:35px; height:35px; box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4); transition: all ease-in-out 300ms; border-radius:100px;}<br /> #ignielSubscribe .medsos a:last-child {margin-right:0px;}<br /> #ignielSubscribe .medsos a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05);}<br /> #ignielSubscribe .medsos .facebook{background:#3a579a}<br /> #ignielSubscribe .medsos .twitter {background:#00abf0}<br /> #ignielSubscribe .medsos .googleplus {background:#df4a32}<br /> #ignielSubscribe .medsos .youtube {background:#cc181e}<br /> #ignielSubscribe .medsos .instagram {background:#992ebc}<br /> #ignielSubscribe .medsos .pinterest {background:#e60023}<br /> @-webkit-keyframes ignielRing{<br /> 0% { -webkit-transform: rotateZ(0); }<br /> 1% { -webkit-transform: rotateZ(30deg); }<br /> 3% { -webkit-transform: rotateZ(-28deg); }<br /> 5% { -webkit-transform: rotateZ(34deg); }<br /> 7% { -webkit-transform: rotateZ(-32deg); }<br /> 9% { -webkit-transform: rotateZ(30deg); }<br /> 11% { -webkit-transform: rotateZ(-28deg); }<br /> 13% { -webkit-transform: rotateZ(26deg); }<br /> 15% { -webkit-transform: rotateZ(-24deg); }<br /> 17% { -webkit-transform: rotateZ(22deg); }<br /> 19% { -webkit-transform: rotateZ(-20deg); }<br /> 21% { -webkit-transform: rotateZ(18deg); }<br /> 23% { -webkit-transform: rotateZ(-16deg); }<br /> 25% { -webkit-transform: rotateZ(14deg); }<br /> 27% { -webkit-transform: rotateZ(-12deg); }<br /> 29% { -webkit-transform: rotateZ(10deg); }<br /> 31% { -webkit-transform: rotateZ(-8deg); }<br /> 33% { -webkit-transform: rotateZ(6deg); }<br /> 35% { -webkit-transform: rotateZ(-4deg); }<br /> 37% { -webkit-transform: rotateZ(2deg); }<br /> 39% { -webkit-transform: rotateZ(-1deg); }<br /> 41% { -webkit-transform: rotateZ(1deg); }<br /> 43% { -webkit-transform: rotateZ(0); }<br /> 100% { -webkit-transform: rotateZ(0); }<br /> }<br /> @-moz-keyframes ignielRing{<br /> 0% { -moz-transform: rotate(0); }<br /> 1% { -moz-transform: rotate(30deg); }<br /> 3% { -moz-transform: rotate(-28deg); }<br /> 5% { -moz-transform: rotate(34deg); }<br /> 7% { -moz-transform: rotate(-32deg); }<br /> 9% { -moz-transform: rotate(30deg); }<br /> 11% { -moz-transform: rotate(-28deg); }<br /> 13% { -moz-transform: rotate(26deg); }<br /> 15% { -moz-transform: rotate(-24deg); }<br /> 17% { -moz-transform: rotate(22deg); }<br /> 19% { -moz-transform: rotate(-20deg); }<br /> 21% { -moz-transform: rotate(18deg); }<br /> 23% { -moz-transform: rotate(-16deg); }<br /> 25% { -moz-transform: rotate(14deg); }<br /> 27% { -moz-transform: rotate(-12deg); }<br /> 29% { -moz-transform: rotate(10deg); }<br /> 31% { -moz-transform: rotate(-8deg); }<br /> 33% { -moz-transform: rotate(6deg); }<br /> 35% { -moz-transform: rotate(-4deg); }<br /> 37% { -moz-transform: rotate(2deg); }<br /> 39% { -moz-transform: rotate(-1deg); }<br /> 41% { -moz-transform: rotate(1deg); }<br /> 43% { -moz-transform: rotate(0); }<br /> 100% { -moz-transform: rotate(0); }<br /> }<br /> @keyframes ignielRing{<br /> 0% { transform: rotate(0); }<br /> 1% { transform: rotate(30deg); }<br /> 3% { transform: rotate(-28deg); }<br /> 5% { transform: rotate(34deg); }<br /> 7% { transform: rotate(-32deg); }<br /> 9% { transform: rotate(30deg); }<br /> 11% { transform: rotate(-28deg); }<br /> 13% { transform: rotate(26deg); }<br /> 15% { transform: rotate(-24deg); }<br /> 17% { transform: rotate(22deg); }<br /> 19% { transform: rotate(-20deg); }<br /> 21% { transform: rotate(18deg); }<br /> 23% { transform: rotate(-16deg); }<br /> 25% { transform: rotate(14deg); }<br /> 27% { transform: rotate(-12deg); }<br /> 29% { transform: rotate(10deg); }<br /> 31% { transform: rotate(-8deg); }<br /> 33% { transform: rotate(6deg); }<br /> 35% { transform: rotate(-4deg); }<br /> 37% { transform: rotate(2deg); }<br /> 39% { transform: rotate(-1deg); }<br /> 41% { transform: rotate(1deg); }<br /> 43% { transform: rotate(0); }<br /> 100% { transform: rotate(0); }<br /> }

Script CSS

<!-- Subscribe Box --><br /> <div id="ignielSubscribe"> <div class="email__"> <div class="email"> Dapatkan artikel terbaru setiap hari<br /> <form action="https://feedburner.google.com/fb/a/mailverify?uri=igniel" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=igniel', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="email" class="email" placeholder="Contoh: nama@mail.com"/><br /> <input name="uri" type="hidden" value="igniel" /> <input name="loc" type="hidden" value="en_US" /><br /> <button type="submit"></button><br /> </form> </div> </div> <div class="medsos__"> <div class="medsos"> <a class="facebook" title="Facebook" href="https://www.facebook.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg></a><br /> <a class="twitter" title="Twitter" href="https://twitter.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path></svg></a><br /> <a class="youtube" title="Youtube" href="https://www.youtube.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z"> </path></svg></a><br /> <a class="instagram" title="Instagram" href="https://www.instagram.com/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg></a><br /> <a class="pinterest" title="Pinterest" href="https://pinterest/xxxx" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z"></path></svg></a><br /> </div> </div> </div>

- Masukan link Sosial Media yang kalian punya satu persatu

- Untuk Script Html digunakan pada Template atau Tata Letak kemudian pilih Tambahkan Gadget Lalu pilih HTML/Java Script lalu masukan Script HTML.

- Untuk Script CSS kalian bisa masukan pada Setingan Dashboard lalu pilih Tata Letak atau Template dalam bahasa Inggris kemudian pilih Edit HTML dan cari kode dengan CTR+F 

]]></b:skin> lalu masukan Script CSS tersebut DIATAS Script ]]></b:skin>.

- Kemudian Save atau Simpan, lihat hasilnya pada Home blog kalian.

Kesimpulan

Pada script diatas kalian bisa gunakan pada letak dimana saja kalian inginkan, dan jangan lupa untuk kunjungi situ yang saya berinama pada setiap kotak Subscribe atau Berlangganan Artikel diatas.

Penutup

Sekian artikel tentang Kotak Berlangganan Artikel Blogger yang bisa saya bagikan kepada kalian semua para blogger dan jangan lupa untuk berikan tanggapan kalian semua pada kolom komentar dibawah artikel ini dan bagikan artikel ini dimana saya kalian berada, terimakasih dan nantikan artikel menarik lainnya.