8.9.14

Widget Kotak Berlangganan Artikel Gratis Untuk Blog

Mau punya tampilan kotak berlangganan artikel yang keren, dari sebelumnya? Coba deh tutorial berikut ini, saya akan coba membagikan cara pembuatannya kepada sodara semua. Diawal- awal pembuatan kotak berlangganan artikel terdahulu, saya juga pernah menulis tentang pembuatan kotak berlangganan artikel via feedburner, namun mungkin hasilnya kurang cukup memuaskan ya!, tidak apa-apa, anggap saja itu sebagai langkah awal untuk membakar alamat feed situs anda.

Widget Kotak Berlangganan Artikel Gratis Untuk Blog
Ok, cukup basa - basinya, sekarang saya langsungkan saja pada tata cara pembuatan kotak berlangganan artikel Gratis, yang tampilannya bisa anda simpan dibawah postingan atau dibilah widget yang tersedia, dengan cara menambahkan 'gadget html' ke sidebar blog anda. Kurang lebih tampilannya seperti 'gambar' yang terdapat dalam artikel ini.

'Masuk' kedalam dasbor blog Anda, kemudian pilih 'Template' setelah itu pilih kembali 'Edit html' karena anda akan saya minta untuk menyisipkan sebuah kode kedalam template blog anda.

Cari dan temukan kode yang mirip sekali dengan kode berikut ini : </body> ,Anda bisa menekan ctrl+F untuk melakukan pencaharian cepat. Ok, jika sudah menemukannya sekarang Copy dan pastekanlah kode dibawah ini tepat diatas kode </body>


.fixed-widget p {
background: url(&quot;http://1.bp.blogspot.com/-DoJ3WLQmrAY/UCnApalgexI/AAAAAAAAFpo/odnv6uFqyU8/s1600/highlight.png&quot;) no-repeat scroll center top transparent;
color: #FFFFFF;
font-size: 14px;
font-weight: 700;
height: 50px;
letter-spacing: 0.08em;
margin: 0 0 10px;
padding-top: 4px;
text-align: center;
text-shadow: 1px 1px 1px #111111;
}
.fixed-widget input[type=&quot;text&quot;], .fixed-widget input[type=&quot;email&quot;] {
border: 1px solid #D8D9D4;
color: #555555;
display: block;
font-size: 14px;
font-weight: 500;
height: 36px;
margin: 0 0 10px;
padding-left: 6px;
width: 650px;
}

.fixed-widget a:hover {
color: #000000;
text-decoration: none;
}
.fixed-widget fieldset, .fixed-widget form {
margin: 0 auto;
width: 210px;
}
.fixed-widget form {
border-top: 1px solid #E5E5E1;
}
.fixed-widget fieldset.inputs {
border: 0px;
border-top: 1px solid #FFFFFF;
padding-top: 10px;
}
.fixed-widget fieldset.inputs label {
display: block;
padding: 0 0 5px;
}
.fixed-widget fieldset.submit {
border: 0px;
padding: 1 50 10px;
}
.fixed-widget .orange-btn {
background: url(&quot;http://2.bp.blogspot.com/-y9WO9KB3yjg/VAxy_AHR0kI/AAAAAAAABOE/40Ph2R4nenk/s1600/gradient-blue.png&quot;) repeat-x scroll center top #FF6B29;
border: 1px solid #CC5721;
box-shadow: 1px 1px 1px #FFA04D inset;
color: #FFFFFF;
cursor: pointer;
display: block;
align:center;
font-size: 14px;
font-style: normal;
font-weight: 700;
height: 30px;
letter-spacing: 1px;
line-height: 28px;
padding: 0 25 px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 1px #D35E24;
text-transform: uppercase;
width: auto;

}
.fixed-widget .orange-btn:hover {
background: url(&quot;http://2.bp.blogspot.com/-y9WO9KB3yjg/VAxy_AHR0kI/AAAAAAAABOE/40Ph2R4nenk/s1600/gradient-blue.png&quot;) repeat-x scroll center bottom #FF6B29;
}
.fixed-widget .orange-btn:active {
position: relative;
top: 1px;
}
.fixed-widget {

width: 550px;
}
.widget-container {
background: url(&quot;http://4.bp.blogspot.com/-Qnn9-Y1co4o/UCn5-itZlOI/AAAAAAAAFrw/yZ2Jk2uKjtU/s1600/gradient-big-grey2.jpeg&quot;) no-repeat scroll center top #F0F1EC;

}
.fixed-widget h1 {
background: url(&quot;http://4.bp.blogspot.com/-Y6tIMW85YFo/VAxy_LKucII/AAAAAAAABOA/bBr_vojnI7Q/s1600/fixed-sidebar-header.png&quot;) no-repeat scroll center top #F0F1EC;
color: #FFFFFF;
font-size: 14px;
font-weight: 900;
height: 60px;
letter-spacing: 0.08em;
line-height: 39px;
margin: 0;
padding-bottom: 10px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px #D35E24;
}
</style>


Klik 'Save' agar hasil editan template tadi tersimpan.
Nah, setelah selesai menyimpan kode diatas kedalam template blog, selanjutnya anda tinggal menembahkan sebuah gadget baru. Dengan cara memilih 'Tata letak' lalu pilih 'Add a gadget' atau 'Menambahkan gadget baru' lalu pilih 'JavaScript/HTML'

Copy dan pastekan kode berikut ini kedalam gadget html tersebut, lalu harap diganti masing-masing tulisan "NamaBlogAnda" yang berwarna merah tersebut, dengan nama/ ID feedburner web/Blog anda
<div class="fixed-widget"><div class="widget-container">


<h1> Get Daily Updates</h1>

<p>Subscribe to Moch Adnan Blog Updates (Free)</p>

<fieldset class="inputs">
<form target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NamaBlogAnda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input id="email" class="email" type="text" value="Your Email..." style="width: 192px; font-size: 15px;" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" name="email">
<input type="hidden" value="NamaBlogAnda" name="uri">
<input type="hidden" value="en_US" name="loc">
<fieldset class="submit">
<input class="sean orange-btn" type="submit" value="Sign up" name="commit">


</fieldset>

</form>
</fieldset>
<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:270px;
">
</span>
</div>
</div>
Gimana, lumayan banyak yeh kode-kodenya :D
Demikian saja cara membuat kotak berlangganan Artikel gratis untuk pengunjung blog anda, Terima kasih sudah meluangkan waktunya untuk mampir dan membaca artikel ini. Salam Blogger.

→ About the author

Moch Adnan adalah Admin Blog yang mempunyai ketertarikan dengan Dunia Blogging,kamu bisa Menemukan saya dan memfollow saya di Google + Twitter Facebook


Terima Kasih Telah Membaca Artikel Widget Kotak Berlangganan Artikel Gratis Untuk Blog . Jika Anda tertarik dengan artikel seperti ini, silahkan untuk berlangganan artikel Gratis dengan cara mengetikkan alamat e-mail anda pada kotak berlangganan berikut:
Subscribe via Email

Silahkan tinggalkan komentarnya
Mohon untuk tidak memasukkan link hidup dalam berkomentar