Bismillahirahmanirrahim. Setelah sebelumnya saya telah memberikan tutorial tentang Cara Membuat Kotak Berlangganan Artikel melalui Feedburner di Blogger kali ini kita akan mengedit Tampilan Berlangganan Artikel Feedburner agar kelihatan lebih menarik. Ada baiknya sebelum kalian mengikuti tutorial kali ini baca dulu Cara Membuat Kotak Berlangganan Artikel melalui Feedburner di Blogger.
Langkah-langkah untuk mengedit Tampilan Berlangganan Artikel Feedburner sebagai berikut :
1. Login di Blogger lalu Pilih Rancangan --> Tambah Gadget dan isikan dengan kode berikut:
Catatan:
Langkah-langkah untuk mengedit Tampilan Berlangganan Artikel Feedburner sebagai berikut :
1. Login di Blogger lalu Pilih Rancangan --> Tambah Gadget dan isikan dengan kode berikut:
<style>
.form {
border:1px solid #ccc; /* warna garis pinggir form */
background: #ffffff /* warna background form */
padding:3px; /* spasi form */
width:260px; /* panjang form */
height:108px /* tinggi form */
}
.rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLicCwzlfL3H66KaqrvGTvLwGleNG5lMTWK234mL_D-n-SXNMiIdLJ0-SdLhV3sS5rNEsL8sfZl9XFGZHBHAjnkMttRMLQrYt3PidinLvRvd_V48SnApF1dteCCb5D5yIkJzQPAfEbGYk/") no-repeat top right;}
.button {
background: #006699; /* warna tombol subscribe */
color: #FFFFFF; /* warna font subscribe */
font-size: 12px; /* ukuran font subscribe */
font-family: Arial, Tahoma, Verdana; /* font subscribe */
margin-left: 5px; /* margin kiri tombol subscribe */
border: 1px solid #234B69; /* warna garis pinggir tombol subscribe */
padding:3px 5px 3px 5px; /* jarak antara font dengan garis pinggir tombol subscribe */
font-weight: bold;
}
</style>
<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:12px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/gesek-gosok"></a> <a href="http://feeds.feedburner.com/gesek-gosok">Dapatkan Update Terbaru Melalui RSS </a></div>
<div style="padding-left:10px; font-weight:bold; font-size:12px;">atau Dapatkan artikel terbaru <br/>langsung ke email anda!</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Gesek-Gosok', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:22px" name="email" onblur="if (this.value == "") {this.value = "Ketik email anda disini...";}" onfocus="if (this.value == "Ketik email anda disini...") {this.value = ""}" type="text" value="Ketik email anda disini..." /> <input type="hidden" value="Gesek-Gosok" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="DAFTAR" /></div></form></div></div>
2. Simpan.form {
border:1px solid #ccc; /* warna garis pinggir form */
background: #ffffff /* warna background form */
padding:3px; /* spasi form */
width:260px; /* panjang form */
height:108px /* tinggi form */
}
.rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLicCwzlfL3H66KaqrvGTvLwGleNG5lMTWK234mL_D-n-SXNMiIdLJ0-SdLhV3sS5rNEsL8sfZl9XFGZHBHAjnkMttRMLQrYt3PidinLvRvd_V48SnApF1dteCCb5D5yIkJzQPAfEbGYk/") no-repeat top right;}
.button {
background: #006699; /* warna tombol subscribe */
color: #FFFFFF; /* warna font subscribe */
font-size: 12px; /* ukuran font subscribe */
font-family: Arial, Tahoma, Verdana; /* font subscribe */
margin-left: 5px; /* margin kiri tombol subscribe */
border: 1px solid #234B69; /* warna garis pinggir tombol subscribe */
padding:3px 5px 3px 5px; /* jarak antara font dengan garis pinggir tombol subscribe */
font-weight: bold;
}
</style>
<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:12px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/gesek-gosok"></a> <a href="http://feeds.feedburner.com/gesek-gosok">Dapatkan Update Terbaru Melalui RSS </a></div>
<div style="padding-left:10px; font-weight:bold; font-size:12px;">atau Dapatkan artikel terbaru <br/>langsung ke email anda!</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Gesek-Gosok', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:22px" name="email" onblur="if (this.value == "") {this.value = "Ketik email anda disini...";}" onfocus="if (this.value == "Ketik email anda disini...") {this.value = ""}" type="text" value="Ketik email anda disini..." /> <input type="hidden" value="Gesek-Gosok" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="DAFTAR" /></div></form></div></div>
Catatan:
- Ganti Gesek-Gosok dengan alamat feedburner kalian
- Kalian bisa ganti alamat url gambar dengan url gambar kalian sendiri
Artikel Terkait:
Tutorial Blogger
- Pasang Iko/Icon Twitter Burung Terbang
- Menghilangkan Tampilan Entri Lawas
- My Community
- Mengembalikan Blog yang Terhapus
- Cara Membuat Chating Box Via Chatroll
- Membuat Folder Rahasia Dengan Password di Windows 7
- Customized tampilan "Blogger Followers"
- Membuat "Bubble Tool Tips" 100% menggunakan CSS
- Navbar Blogger Support dengan Warna Transparant
- Gratis Download koleksi Icon Rss Feed
- Link Sahabat
- Cara Membuat Daftar Isi di Blog
- Cara Membuat Tombol Widget Install Otomatis
- Bagaimana Cara Membuat artikel terkait atau related posts
- Modifikasi Formulir Berlangganan FeedBurner
- Menambah Fasilitas Reply di Kotak Komentar Blogspot
- Pasang Emot Unik di Kotak Komentar
- Cara Membuat Share This Post
- Cara Pasang Widget Share The Love
- Feed Burner Headline Animator dengan Background Keren
- Tampilan Artikel Berlangganan Feedburner
- Tampilan Baru Follower (Google Friend Connect)
- Modifikasi Auto Read More untuk Blogger
- Cara Membuat Buku Tamu Tersembunyi
Categories:
Tutorial Blogger
0 komentar:
Posting Komentar