Wednesday, October 17, 2012

Cara Buat Kotak Berlangganan FeedBurner RSS-Email-Twitter Follow Blogspot


Cara Buat Kotak Berlangganan FeedBurner RSS-Email-Twitter Follow untuk Blogger / Blogspot mempunyai kegunaan atau fungsi dari Kotak Berlanggan Email ini adalah agar dapat memudahkan pengunjung untuk mendapat update terbaru dari blog yang kita miliki yang dikirimkan langsung lewat email sobat, tentunya dengan kita berlangganan terlebih dahulu pada feedburner blog atau situs juag Twitter Follow. Untuk contoh dari kotak berlangganan Email ini silahkan lihat pada gambar dibawah ini :

Cara Buat Kotak Berlangganan Email-FeedBurner RSS-Twitter Follow

Selain itu dengan semakin banyaknya orang yang telah berlangganan email feed burner kita tentunya akan semakin banyak pengunjung tetap pada blog yang kita miliki. Adapun Membuat Kotak Berlangganan Email Feed Burner Untuk Blogger adalah sebagai berikut:

1.Seperti biasa log in dulu ke account blog sobat
2.Pada dasbor klik Rancangan kemudian pilih Edit HTML.
3. Cari kode berikut ini </head>
4. Letakkan kode di bawah ini sebelum kode tersebut :

<style type='text/css'>
#hsection{border:1px solid #D3D3D3;background-color:#FFFFFF;}
#hsection:hover{border:1px solid #BABABA;background-color:#F8E0E0;}
#sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;
font-weight:bold; }
#sectionmy .sectionmy2 h2.rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf0p3r3GTaPkxT-msdj5g58tQKYCwv6mLabogIfUTg4D7ohXluOVLnFuHBWn-ok90TLQ_tW84VbrLrAx3E1EC0d8-bX2LowhWVAesu8suAX2RwTVk9AODvFFuwDDY_R2MbJI9wEsKAZbM/s1600/RSS+Feed.png) no-repeat top left; }
#sectionmy .sectionmy2 h2.email { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7wBBsPtbK7tDH0MXUlv-ElgYqOwTGU7qfsNU1rbZS3w75-W9cv2uzoUxGAbUK1j7Yx-cntYbdgPtOCyYKN7vtUPnY7TMz-pCwRxlexGehJt0dcrtg6UuKzBS4-bnEeUNZeE3NhGLuhUM/s1600/Mail_Read.png) no-repeat top left; }
#sectionmy .sectionmy2 h2.twitter { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHjaBT7ysO6znTNXwwPiZFTY3BCG22fDPgVXIV679UYpVsDdo7BHn3IrpbNhiV_GyKBN2CAlz3IWeUT-YiZ1tM5qQN4x3NAi9hUi1WLJuk2yDav_sl4KZTxoc_fd03VIBvF-M6Cai48QY/s1600/Twitter+Logo.png) no-repeat top left; }
#sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }
</style>

*Keterangan : kode yang berwarna merah untuk menentukan Logo / Gambar dari 3 item (RSS Feed, Email, dan Twitter) dapat Sobat ganti /modifikasi sesuai selara atau yang lebih keren dengan editing melalui Photoshop atau menggunakan Aplikasi Ilustrator dari GIMP dengan men-download disini. Berikut contoh Logo dari FeedBurner RSS-Email-Twitter Follow :

Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf0p3r3GTaPkxT-msdj5g58tQKYCwv6mLabogIfUTg4D7ohXluOVLnFuHBWn-ok90TLQ_tW84VbrLrAx3E1EC0d8-bX2LowhWVAesu8suAX2RwTVk9AODvFFuwDDY_R2MbJI9wEsKAZbM/s1600/RSS+Feed.png
Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7wBBsPtbK7tDH0MXUlv-ElgYqOwTGU7qfsNU1rbZS3w75-W9cv2uzoUxGAbUK1j7Yx-cntYbdgPtOCyYKN7vtUPnY7TMz-pCwRxlexGehJt0dcrtg6UuKzBS4-bnEeUNZeE3NhGLuhUM/s1600/Mail_Read.png
Url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHjaBT7ysO6znTNXwwPiZFTY3BCG22fDPgVXIV679UYpVsDdo7BHn3IrpbNhiV_GyKBN2CAlz3IWeUT-YiZ1tM5qQN4x3NAi9hUi1WLJuk2yDav_sl4KZTxoc_fd03VIBvF-M6Cai48QY/s1600/Twitter+Logo.png


5.Simpan Template.
6.Selanjutnya pada Rancangan pilih Elemen Laman Kemudian pilih Add gadget pilih HTML / Javascript.
7.Copy kode dibawah ini kemudian masukkan paste kedalamnya.

<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">

<h2 class="subscription rss"><a href="YOUR-RSS-FEED-URL">SUBSCRIBE VIA RSS</a></h2>

<h2 class="subscription email"><a href="YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL">SUBSCRIBE VIA EMAIL</a></h2>

<h2 class="subscription twitter"><a href="YOUR-TWITTER-URL">FOLLOW ON TWITTER</a></h2>

</div></div>

</div>

8.Langkah terakhir Simpan Template

Keterangan : Ganti tulisan yang berwarna Orange dengan Url Feed Anda,yang warna Merah ganti dengan Url Feedburner Email Subscription anda,lalu yang berwarna Ungu dengan URL Twitter anda.

Selamat mencoba, semoga  bermanfaat (",)

Kembali ke Menu Tutorial Blogspot

No comments:

Post a Comment