Membuat Community Link Feed pada Blogger

Bila anda memperhatikan sidebar di blog ini, maka akan terlihat Community Link Feed. Tentu anda akan bertanya, bagaimana cara membuatnya. Nah, disini saya membuat Community Link Feed dengan memadukan layanan bookmarks Google feedburner (GF), Delicious (D) dan membuat form dengan Google Doc (GD).
Sebelum saya menjabarkan cara membuatnya, terlebih dahulu saya mengucapkan terima kasih kepada kang JALOE yang tidak marah karena kode CSS telah aku intip dan aku kembangkan dengan CS3 ( Cara Sluman Slumun Slamet ) dan mengamati "Piye kok iso, yo?", akhirnya aku beranikan mencoba koordinasi dengan GF, D, GD dan tentunya mengamati sumber kode milik kang Jalooe lewat tool VIEW FIREFOX.

Berikut ini langkah demi langkah cara membuatnya :

Langkah untuk menyiapkan Form "Community Link Feed"

Anda harus login di docs.google.com, setelah login di docs.google.com, anda akan masuk pada halaman dokumen. Kemudian pada toolbar silahkan klik "New" kemudian klik "Form". Anda akan dihadapkan pada lembar kerja untuk mengedit form.



- Ganti Untitled Form dengan judul forum anda, misal : Community Link Feed
- Pada "You can include any text or info that will help people fill this out" isikan keterangan tentang forum anda, yang didalamnya mengandung aturan dan tujuan dibuatnya forum ini.
- Pada "Quetion Title", masukkan pertanyaan misal : NAMA
- Pada "Help Text" apabila tidak penting, kosongkan
- Pada "Question Type" pilih "Text"
- Centang pada kotak "Make This a required question" untuk menandai bahwa kotak dengan judul "Nama" wajib diisi.
- Klik "Done"
- Klik "Save"

Langkah diatas adalah langkah membuat kotak input "nama"

Untuk membuat kotak input berikutnya, klik "Add Item" kemudian pilih "text", silahkan buat kotak input untuk "Judul Artikel" dengan langkah yang sama seperti diatas.

Buatlah kotak input berikutnya, yaitu : "URL Artikel" dengan langkah yang sama.
Buatlah kotak input berikutnya, yaitu : "Email" dengan langkah yang sama.
Buatlah kotak input berikutnya, yaitu : "Deskripsi Artikel" dengan langkah klik "Add Item" kemudian pilih "Paragraph Text", langkah selanjutnya sama.
Pada button "Theme:Plan" anda bisa memilih bentuk form yang sesuai selera anda.

Untuk button "See Responses" saya memilih "spreadsheet" kemudian setelah muncul jendela spreadsheet silahkan atur lebar dari kolomnya.

Pada button "More Actions" saya memilih "embed", maka akan muncul kode iframe yang nantinya akan anda pasang pada blog anda. Kodenya seperti ini :

<iframe src="http://spreadsheets.google.com/embeddedform?key=tfmdx4-LJdB9elutRhlAg7Q" width="500" height="578" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

Kode diatas ditambahkan saat anda membuat posting Community Link Feed di Blogger.

Langkah kedua.

Dalam tutorial ini, saya menggunakan Delicious sebagai media bookmarks.
Silahkan login apabila anda sudah bergabung dengan Delicious, bila anda belum terdaftar pada Delicious silahkan klik "Join Nows".

Pada "Enter Details" silahkan isi data sesuai yang ada pada langkah ini, kemudian klik "Register".

Anda akan masuk ke halaman kedua dan ketiga, dalam tutorial ini saya sengaja skip sehingga anda akan dibawa ke halaman, dimana tugas anda adalah meng-copy URL halaman tersebut. contoh urlnya :

http://delicious.com/coretanasal

Pada halaman yang sama coba perhatikan kalimat dibawah Ini :

To save a bookmark, click the button you installed during the registration process. This is labeled "Tag" if you installed the Add-on or "Bookmark this on Delicious" if you added the button to your bookmarks toolbar. If you need to install the bookmarking buttons again, visit Tools.

Silahkan klik .... visit "Tools", kemudian anda akan dibawa ke halaman berikutnya lalu pilihlah "Bookmark this on Delicious" dan silahkan copy kode yang ada diatas tulisan "Blog templates" bagi pengguna blogger.

<img src="http://static.delicious.com/img/delicious.small.gif" height="10" width="10" alt="Delicious" />
<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url='+encode URIComponent(location.href)+'&amp;title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"> Bookmark this on Delicious</a>

Tools ini nantinya dipasang pada sidebar blog anda untuk memudahkan kita memasukkan artikel dari pengunjung anda yang mendaftar dalam Community Link Feed yang telah anda buat.

Langkah ketiga, yaitu memadukan URL delicious yang sudah copy tadi pada Google feedburner.

Silahkan anda login, kemudian masukkan URL delicious anda.



Setelah itu anda akan masuk pada jendela : Welcome! Let us burn a feed for you.
Silahkan anda ubah "feed Title" dan "feed address". Namun pada tutorial ini saya langsung klik NEXT.

Anda akan masuk pada jendela : "Congrats! Your FeedBurner feed is now live. Want to dress it up a little?" saya langsung klik next dan akan dibawa ke jendela "Get More Gusto From Your Feed Traffic Statistics." klik "Next" dan masuk ke halaman "You have successfully updated the feed "Delicious/coretanasal"" kemudian klik "Publicize" dan klik "BuzzBoost"
Pada BuzzBoost silahkan atur : beberapa pilihan yang ada, namun saya menentukan pada :
- Number of items to display = 5
- Open links in: New Window
- Display Item Content, pilih Plain Text dan 20 words kemudian klik "Activate"

Setelah itu silahkan copy script yang ada, seperti dibawah ini.

<script src="http://feeds.feedburner.com/Delicious/coretanasal?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/Delicious/coretanasal"></a><br/>Powered by FeedBurner</p> </noscript>

Script diatas nantinya akan dipadukan pada kode CSS yang akan kita pasang pada edit HTML template kita.

Sekarang kita akan membuat kode CSS pada template kita. Silahkan login di blogger, kemudian pada "Tata Letak" klik edit HTML, kemudian tambahkan kode berikut ini diatas kode ]]></b:skin> :

/* community link feed
----------------------------------------------- */
div.feedburnerFeedBlock p.date {
color: #666;
}
div.feedburnerFeedBlock ul li div {
display: block;
}
div.feedburnerFeedBlock span.headline a {
font-weight: normal;
font-size: 12px;font-family:Georgia,"Times New Roman",Times,serif;
color: #5689AB;padding-bottom:1em;
}
div.feedburnerFeedBlock ul li {
margin-bottom: .5em;background:none;
padding-left: 0;padding-bottom:1em;
text-indent: 0;border-bottom:1px solid #ccc;
}
div.feedburnerFeedBlock ul {
list-style: none;
margin: 0;
padding: 0;
}
.feedTitle { display:none; }
#creditfooter {display:none}
.submitNews a:link, .submitNews a:visited {
background:#083199;
border:1px solid #ccc;
color:white;
display:block;
float:left;
font-size:10px;
font-weight:bold;
margin-right:4px;
margin-left:2px;
padding:4px 5px;
text-align:center;
}
.submitNews a:hover {
background:#444444;
color:#FFFFFF;
}
.subcribNews a:link, .subcribNews a:visited {
background:#083199;
border:1px solid #ccc;
color:white;
display:block;
float:left;
font-size:10px;
font-weight:bold;
margin-left:5px;
padding:4px 10px;
text-align:center;
}
.subcribNews a:hover {
background:#444444;
color:#FFFFFF;
}

Simpan template anda, kemudian masuk elemen halaman : klik "Tambah Gadget" pada Sidebar, pilih "HTML/Javascript" lalu tambahkan kode dibawah ini :

<div class="widget-content">
<script src="http://feeds.feedburner.com/Delicious/coretanasal?format=sigpro" type="text/javascript"></script>
<span class="submitNews"><a href="http://www.casal71.co.cc/2009/08/community-feed-link.html">Submit Artikel</a></span><span class="subcribNews"><a href="http://feeds.feedburner.com/Delicious/coretanasal" target="_blank">View subcribe</a></span><br/>
</div>

Lalu bagaimana mengetahui seseorang telah mendaftar ?
Anda harus mewajibkan para pendaftar untuk memberitahukan bahwa mereka telah mendaftarkan URL artikelnya pada kotak komentar. Kemudian anda cek pada docs.google.com dibagian spreadsheets, kemudian masukkan data yang masuk ke delicious dengan jalan mengklik widget delicious yang sudah anda pasang pada bagian sidebar.

Keterangan : Untuk kode bercetak merah merupakan kombinasi link yang kita dapatkan dari Google Feedburner, sedangkan kode bercetak biru adalah url posting Community Link Feed itu sendiri.

Semoga bermanfaat dan sekali lagi terima kasih kepada kang Jaloe yang telah memberi PR buat saya untuk memecahkan sendiri bagaimana cara membuat Community Link Feed ini. Juga saya sangat menghargai arahan singkatnya.

Bila kurang jelas silahkan tanyakan pada kotak komentar yang ada.