Butang Digg Dalam Blog Anda |Tutorial Blogger Blogspot

Panduan dan cara bagaimana meletak 'real-time Digg count' dan 'vote button' dalam setiap pos blog yang kita buat. Digg adalah sebuah laman sosial bagi 'content' (isi) blog atau laman content di mana kita atau pembaca blog kita boleh menghantar sebarang artikel yang ditulis. Sekiranya kita menulis artikel yang baik, ahli-ahli lain akan 'digg' post tersebut serta menulis komen-komen. Sebagai tuan punya blog kita ingin memudahkan dan menggalakan pembaca blog kita untuk menhantar dan 'digg' tulisan kita.

'Automatic Count' dan 'Vote Button'

Sebelum melakukan ini sila ambil perhatian tentang beberapa perkara:-

Blog post kita hendaklah set sebagai blog post yang telah disave. Blog Post adalah post yang disimpan dalam arkib yang dipaparkan dan mempunyai alamat web tersendiri. Syarat oleh Digg adalah setiap blog post mempunyai URL tersendiri sebelum dihantar kepada Digg. Untuk melaksanakan ini sila daftar masuk kedalam Blogger Dashboard anda. Pilih "Setting" dan pilih "Archiving" di bawah pilihan ini, setkan "Enable Post Pages?" mejadi "yes".

"Template Hack" ini akan meletakkan button Digg dalam setiap post yang dibuat, tidak ada pilihan untuk mengeluarkannya dalam satu post dan memasukkan dalam post yang lain. Sekiranya anda ingin meletak button Digg dalam sebahagian post sahaja, sila baca bahagian akhir tulisan ini mengenai "Button Untuk Post Pilihan".

Kod ini akan membaca URL bagi satu-satu paparan muka blog anda dan URL ini akan digunakan untuk menghantar cerita atau artikel berkenaan kepada Digg.

Pilih dan klik "Layout" dalam dashboard blog anda kemudian pilih tab "Edit HTML", setelah kotak kod HTML dibuka. 'highlight' dan copy kesemua kod tersebut, namakan dan simpan sebagai 'text file' untuk tujuan 'backup'. Anda boleh juga menggunakan pilihan "Download Template" link untuk melakukan 'backup' ini. Tujuannya adalah sebagai langkah keselamatan sekiranya kita melakukan sebarang kesilapan semasa melakukan apa-apa perubahan terhadap kod HTML yang dimaksudkan. Gunakan pilihan "Upload" untuk memasukkan semula kod HTML dari 'Backup' yang telah disimpan. 'Backup' ini dengan mudah boleh menggantikan semula kod yang tersalah pinda.

Klik dan tanda kotak di sebelah "Expand Widget Templates". Kemudian skroll kebawah kod HTML ini dan cari kod seperti tertulis di bawah:-


 <p><data:post.body/></p>

Sekiranya anda inginkan button dipaparkan di sudut kanan atas post anda, gantikan kod di atas dengan kod yang di bawah ini:-


<div style="float:right; margin-left:10px;">
<script type="text/javascript">
digg_url=" <data:post.url/>";
</script>
<script src="http://digg.com/tools/
diggthis.js" type="text/javascript"/>
</div>
<p><data:post.body/></p>

Ini yang akan anda perolehi:-

Sekiranya anda inginkan button itu dipapar di bahagian akhir pos blog anda, ganti serta gunakan kod seperti di bawah ini:-


<p><data:post.body/></p>
<div style="float:right; margin-left:10px;" >
<script type="text/javascript">
digg_url=" <data:post.url/>"</script>
<script src="http://digg.com/tools/diggthis.js"
type="text/javascript"/>
</div>

Hasilnya seperti ini:-

Sekiranya anda ingin button ini dipapar di sudut kiri bahagian atas pos blog anda, gantikan 'alignment' seperti kod di bawah:-


<div style="float:left; margin-right:10px;" >
<script type="text/javascript">
digg_url=" <data:post.url/>";
</script>
<script src="http://digg.com/tools/digg this.js" 
type="text/javascript"/>
</div>
<p> <data:post.body/></p>

Hasilnya adalah seperti ini:-

Untuk button Digg jenis compact masukkan kod berikut:-


<div style="float:$endSide; margin-left:10px;" >
<script type="text/javascript" >
digg_url="<data:post.url/>";
digg_skin="compact";
</script>
<script src="http://digg.com/tools/diggthis.js"
type="text/javascript"/ >
</div>
<p><data:post.body/></p>

Anda akan lihat button Digg yang compact seperti berikut:-

Anda boleh juga menukar warna latarbelakang button ini supaya sesuai dengan blog anda. Contoh kod yang perlu digunakan adalah seperti berikut:-


<div style="float:$endSide; margin-left:
10px;">
<script type="text/javascript" >
digg_url="<data:post.url/>";
digg_bgcolor="#BDEDFF";
digg_skin="compact";
</script>
<script src="http://digg.com/tools/
diggthis.js" type="text/javascript"/ 
></div>
<p><data:post.body/></p>

Hasilnya adalah seperti ini:-

Anda boleh masukkan kod warna pilihan anda menggantikan bahagian yang berwarna merah. Sila dapatkan panduannya dalam artikel "Senarai Kod Hexadecimal Warna HTML"

Masuk 'Count Button' Otomatik Dalam 'Blog Footer'

Gunakan kod di bawah ini untuk meletak butang Digg kedalam 'Blog Footer'.


<p class="post-footer-line post-footer-line-2">
<span class="post-labels">
<b:if cond="data:post.labels">
<data:postLabelsLabel/>
<b:loop values="data:post.labels"var="label">
<a expr:href="data:label.url"rel="tag">
<data:label.name/></a>
<b:if cond="data:label.isLast != "true">, 
</b:if>
</b:loop>
</b:if>
</span>
</p>

Sekiranya anda ingin meletak butang Digg di bawah bahagian label, anda kena dapatkan kod butang Digg berkenaan serta masukkan kod tersebut selepas kod di atas ini. Katalah anda ingin meletakkan butang Digg yang jenis compact anda perlu kena masukkan kod di bawah ini sebagai tambahan, tempat masuknya adalah selepas daripada kod-kod labels:-


<div style="float:right; margin-left:10px;">
<script type="text/javascript">
digg_url=" <data:post.url/>";
digg_skin="compact";
</script>
<script src="http://digg.com/tools/
diggthis.js" type="text/javascript"/>
</div>

Hasilnya adalah seperti ini:-

Kod butang Digg boleh pindahkan di atas daripada bhg lebels jika anda suka. Review dulu sebelum kod-kod ini disave kecuali anda memang telah berpuas hati.

Butang Digg Dalam Blog Footer

Sekiranya anda ingin melihat butang Count otomatik, anda boleh masukkan butang link kedalam template. Butang ini akan sentiasa berada di bahagian kanan bawah setiap post anda dan pembaca boleh menggunakan butang ini untuk menghantar artikel ke Digg.

Skrol kebawah dalam kod HTML template blog ands dan cari kod berikut sampai jumpa. Masukkan di bawahnya kod yang berwarna merah di bawah:-


<div class="post-body">
<p><data:post.body/></p>
<div style="clear: both;"/> 
<!-- clear for photos floats -->
</div>

<div style="float:right; margin-left:10px;"> 
<a expr:href='"http://digg.com/submit?phase=
2&url=" +
data:post.url + "&title=" + data:post.title'
target="_blank"><img border="0" alt="Digg this"
src="http://digg.com/img/badges/91x17-digg-
button.gif"/></a></div>

Dengan kod ini anda akan lihat ini di bawah setiap pos anda:-

Anda boleh mengubah posisi butang ini. Sila ulang baca dari awal tentang bagaimana meletak kod sekiranya butang Digg hendak diletak di bahagian atas setiap artikel.

Butang 91x17-digg-button.gif hanyalah sebagai contoh. Tulisan seterusnya akan menerangkan bahawa ada banyak pilihan button Digg yang boleh diguna. Untuk menukar butang tersebut dalam bentuk lain gantikan Image URL dengan Image URL butang yang baru.

Butang Untuk Pos Pilihan

Cara untuk meletak butang Digg dalam mana-mana pos pilihan agak rumit kerana Blogger tidak membenarkan kita memasukkan "JavaScript" kedalam pos blog.

Mula-mula masuk ke laman Digg tools untuk memilih butang Digg yang disukai, anda akan lihat di dalam itu ada banyak pilihan butang Digg:-

Sila beri perhatian terhadap image URL, image URL untuk butang ini ialah:-


http://digg.com/img/badges/91x17-digg-button.gif

Tulis pos anda dan kemudian publish, lepas itu tekan refresh atau reload dan klik pada tajuk pos anda. Ini akan membawa anada kepada muka paparan pos. Ambil perhatian terhadap URL baru cerita anda, masukkan kedalam bahagian yang berwarna oren dalam kod HTML. Sekiranya anda memerlukan image yang lain, masukkan URL image tersebut kedalam bahagian yang berwaran biru dalam kod HTML.


<a href="http://digg.com/submit?
phase=2&url=URLceritaAnda" target="_blank"> 
<img border="0" alt="Digg my article" 
src="http://digg.com/img/badges/91x17
-digg-button.gif"/> </a>

Sekarang, pergi semula ke artikel anda dan buat sebarang pembetulan. Pilaih "Edit HTML" mode dan bukan "Compose" mode. Copy kod di atas dan masukkan kedalam mana mana bahgaian artikel anda dalam blog. Kemudian lihat preview dulu, jika anda puas hati bolehlah dipublish.

Sekiranya anda fikir panduan ini berguna dan boleh membantu sila klik butang Digg berikut, atau anda ingin mengetahui bagaiman ianya berfungsi. Terima kasih.