.png)
Widget Kotak Berlangganan Artikel Gratis Untuk Blog
Penulis:
Moch Adnan
dipublikasikan:
8 September 2014
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 Follow It sebagai pengganti Feedburner, namun mungkin hasilnya kurang cukup memuaskan ya!, tidak apa-apa, anggap saja itu sebagai langkah awal untuk membakar alamat feed situs anda.
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiExzmwopKPDYzpa-Yah8Nw8jQTa9pVyPGNd-LPSTU-wHousFWEx0cIj81bwIC9wb-affKNRiemTbAUXn3nIdtSbFkz2c24RFcG9XuNZeTwH2TjMAC3Nxz-Yhpd-d1iuxcnlDkM9lqzTeI/s1600/highlight.png") 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="text"], .fixed-widget input[type="email"] {
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBa4cSLpXikUpeB5-6v5LfeBEk61f2JvjUxERb2nGUf5g_c3FF4P-OAeDyuR6DLqtTkJKyXU-EZ3I0GtM02v-wQrUNWUO3bjWOqdf9KPGuocllpyA3R7bPFWRCJ8G95lmdr9MlcSH_yxc/s1600/gradient-blue.png") 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBa4cSLpXikUpeB5-6v5LfeBEk61f2JvjUxERb2nGUf5g_c3FF4P-OAeDyuR6DLqtTkJKyXU-EZ3I0GtM02v-wQrUNWUO3bjWOqdf9KPGuocllpyA3R7bPFWRCJ8G95lmdr9MlcSH_yxc/s1600/gradient-blue.png") repeat-x scroll center bottom #FF6B29;
}
.fixed-widget .orange-btn:active {
position: relative;
top: 1px;
}
.fixed-widget {
width: 550px;
}
.widget-container {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3N1c3hS6NEapVl8LnWsWfsPa7Pzr0k954yZ6tMAJcwitA70PSg8EtlW1VJIuCKPmD-0zdUaU-LsTrFm3lViXDJDpzn5hU5m8D0GJnSpz7Xoa-IfvIh9lP3TS0wpoW5BLHA6iVs2yWbgg/s1600/gradient-big-grey2.jpeg") no-repeat scroll center top #F0F1EC;
}
.fixed-widget h1 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikZJpdq_ggpyB5ezudqXqgPcZULfZPTtbRmZeB7fVxjomRhUKhzAGu-q1oEeHgpgrakCqljnLfRtjJs5yNE6Ler0go3o6ggkv1Uq33qVtrnVkOPvp2CsIBGcaxNKMcH6lpNCcrzXFAtKY/s1600/fixed-sidebar-header.png") 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>
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.
Update terakhir : 26 Juli 2023
Oleh : Moch Adnan
Semoga Bermanfaat buat sobat semua
Oleh : Moch Adnan
Semoga Bermanfaat buat sobat semua
Moch Adnan
Seorang Blogger biasa yang hanya sekedar ingin menulis dan berbagi. Tidak soal berapa lama kita hidup, tetapi bagaimana kita hidup
Tidak ada komentar:
Posting Komentar
Beri komentar