Membuat Scroll Pada Blog Archive (Arsip Blog)

Bulan lalu berapa tulisan yang sudah kamu posting? Coba deh, yang pasang widget Arsip Blog dilihat! Bulan lalu saya berhasil memposting 8 tulisan di blog ini. Dan kali ini kita akan belajar ngeblog lagi, yaitu membuat scroll untuk arsip blog. Jika tampilan drop down sih tidak terlalu bermasalah. Tapi jika memilih tampilan herarki yang mempunyai kelebihan bisa menampilkan jumlah tulisan perbulan dan judul akan sedikit membuat blog terlihat kurang rapi. Iya kalau kita rutin mengupdate blog, kan sebagian blogger dan saya tidak pasti rajinnya mengurus blog.

Dengan membuat scroll pada arsip blog, akan membuat panjang sidebar ke bawah tetap. Walau pada bulan tertentu banyak postingan atau sedikit arsip blog yang tampilannya herarki akan terlihat rapi dengan adanya scroll. Jika kita sudah menambahkan widget arsip blog dengan model herarki, langsung saja lakukan langkah selanjutnya.

Cara Membuat Scroll Pada Blog Archive (Arsip Blog)
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

6. Kode lengkapnya adalah seperti ini

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy toggle-open'>&#9660; </span>
</a>
<b:else/>
<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;
<b:else/>
&#9658;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

7. Kode warna merah dan hijau adalah kode yang ditambahkan kedalam script tersebut, 200 adalah tingginya, dan kita bisa ubah seseuai selera.
 8. Simpan jika sudah selesai.

selengkapnya>>

Memproteksi Gambar di Blog dari Save As

Sepertinya setiap postingan tanpa disertai gambar, baik itu ilustrasi atau memang bagian dari tulisan itu jadi terasa kurang menarik. Oleh sebab itu sebagian besar blogger yang posting akan menyertakan gambar. Baik gambar itu hasil jepretan sendiri atau mencari di search engine dan melampirkannya.

Kali ini kita akan belajar memproteksi gambar yang ada di blog kita dari 'save as' atau disimpan oleh seorang. Mungkin bagi yang sudah menerapkan disable klik kanan di blognya bisa langsung juga memproteksi gambar. Sekarang yang akan kita bahas kali ini adalah trik sederhana untuk memproteksi gambar dari 'save as'. Jika orang mengklik kanan gambar pastinya akan bisa dan ada pilihan 'save as' dan ketika diklik akan muncul jendela tempat menyimpan. Saat gambar disimpan yang ada adalah berupa gambar kosong.

Cara Memproteksi Gambar di Blog dari Save As
Berikut ini adalah kode HTML normal untuk menampilkan sebuah gambar;

<img width="320" height="213" src="http://2.bp.blogspot.com/_ceSFA9Wq2do/TOqlUs53xUI/AAAAAAAAAII/n3lEgIEw8w4/s320/computer-vision-syndrome.jpg"/>

Dengan hanya mengubah artibut src dan penggunaan css style langsung pada gambar maka cara Trik di bawah ini akan membuat gambar kosong pada hasil download. Selalu pastikan ukuran size dari gambar harus sama dengan aslinya. Berikut adalah kodenya;

<img style="background-image:url('http://2.bp.blogspot.com/_ceSFA9Wq2do/TOqlUs53xUI/AAAAAAAAAII/n3lEgIEw8w4/s320/computer-vision-syndrome.jpg');" src="data:image/gif;base64,R0lGODlhAQABAIAAAP ///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="320" height="213"/>

Dan berikut adalah contoh gambar yang memakai kode diatas, coba saja cek dengan klik kanan lalu 'save as'.

selengkapnya>>

Menampilkan Recent Post Disertai Thumbnail

Ingin rasanya terus membuat tampilan blog lebih menarik lagi, biar orang tidak bosan dengan tampilan yang kita suguhkan. Kali ini kita akan belajar untuk membuat recent post yang menarik yang berbeda dengan sebelumnya. Widget recent post ini tidak hanya menampilkan judul saja, tapi banyak kelebihannya. Kelebihan recent post yang akan kita pelajari adalah bisa menampilkan tulisan terbaru yang disertai dengan thumbnail, ringkasan, tanggal posting dan jumlah komentar.

Recent Post adalah salah satu widget yang wajib dipasang di blog kita. Biar orang tahu, apa saja yang baru saja kita tulis. Recent post yang satu ini bisa menggantikan recent post yang lama. Langsung saja, kita praktekkan :)

Cara Menampilkan Recent Post Disertai Thumbnail
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<div id='bp_recent'></div><div class='bp_footer'></div>
<script style='text/javascript' src='http://blogergadgets.googlecode.com/svn/trunk/recentposts.js'></script>
<script style='text/javascript'>
var numberOfPosts = 5;
var showPostDate = true;
var showSummary = true;
var summaryLength = 200;
var titleLength = 100;
var showCommentCount = true;
var showThumbs = true;
var showNoImage = false;
var imgDim = 100;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = true;
var readMore = 'More';
</script>
<script src='http://kurniasepta.blogspot.com/feeds/posts/summary?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

5. Dari kode diatas ada yang bisa kita sesuaikan, tapi yang harus diubah adalah kurniasepta dengan nama subdomain blogmu sendiri. Simpan jika sudah.

selengkapnya>>

Menampilkan Sumber Link Saat Tulisan Dicopy Paste

Pernah tulisanmu di blog dicopy paste blogger lain? Apalagi dengan tanpa menyebutkan sumbernya. Mungkin bagi sebagian orang merasa cuek saja, tapi saya yakin sebagian besar akan marah, atau bersedih. Memang copy paste adalah penyakit masyarakatnya dunia blogging. Orang tidak mau susah-susah berpikir dan menulis melakukan copy paste dari blog lain untuk diterbitkan di blognya sendiri.

Dulu di Belajar Ngeblog di BLOG sudah pernah ditulis salah satu cara menghindari copy paste, yaitu dengan membuat klik kanan tidak berfungsi. Sekarang kita akan belajar yang berkaitan dengan cpoy paste yang meresah bagi kita, yaitu Menampilkan Otomatis Sumber Artikel Saat Dicopy Paste. Maksudnya adalah ketika orang/blogger memblock tulisan di blog kita lalu mengcopynya di halaman lain maka setelah di paste pasti akan muncul link sumber tulisan itu. Contoh read more: http://kurniasepta.blogspot.com/2011/02/membuat-klik-kanan-tidak-berfungsi-di.html

Cara ini hanya sebagian saja untuk memberikan penghargaan bagi penulis aslinya yang memang kalau benar-benar mengutip langsung tanpa mengubahnya. Orang bisa menghilangkan tulisan itu setelah dipaste, karena memang formatnya teks biasa. Paling tidak cara ini bisa lebih mengingatkan si pelaku copy paste untuk mencantumkan sumbernya.

Cara Menampilkan Otomatis Sumber Artikel Saat Dicopy Paste
1. Berkunjung dan daftar ke www.tynt.com
2. Klik button Get Started FREE
3. Mengisi form yang telah disediakan: email, domain password, dll. Jika sudah klik Next

4. Setelah itu kita bisa melakukan kostumisasi, jika tidak mau repot langsung saja klik Next

5. Kita akan mendapatkan kode script yang harus ditaruh di template blog.

6. Cara menambahkan kode script tersebut di blog;

• Login ke Blogger.
• Di halaman Dasbor, kita pilih Rancangan.
• Kemudian pilih Edit HTML 
• Beri tanda centang pada Expand Template Widget 
• Cari kode </head> 
• Jika sudah ketemu taruh kode script tadi di atasnya 
• Simpan Template jika sudah selesai.

Setelah menambahkan script ini maka akan secara otomatis setiap orang yang melakukan copy paste terhadap postingan (artikel) di blog kita akan mencantumkan sumber linknya. Selain itu kita juga akan tahu siapa saja yang telah melakukan copy paste tulisan di blog kita dari laporan Tynt.

selengkapnya>>

8 Widget yang Sebaiknya Ada di Blog

Ada banyak widget, dan kelihatannya semua menarik. Tapi ada beberapa widget yang sebaiknya ada di blog. Apa saja itu? Baik itu widget yang dipasang di sidebar atau post area. Tentunya dalam memasang widget tidak hanya memperhitungkan tampilan tapi yang lebih penting adalah harus mempertimbangkan fungsinya.

1. Recent post, yaitu widget yang menampilkan tulisan-tulisan terbaru kita. Walau di halaman utama menampilkan beberapa postingan terbaru, tapi saat seorang itu datang tidak langsung lewat halaman utama recent post menjadi sangat penting.
2. Recent comment, yaitu widget yang menampilkan komentar-komentar terbaru dari blog kita. Karena biasanya sebuah blog identik dengan person sehingga tulisannya itu beruda pemikirannya dan bisa dikomentari orang lain. Selain itu akan menambah semangat untuk berkomentar dan menghargai komentarnya.
3. Button share, ini adalah satu widget yang akan bisa menyebarkan tulisan kita ke jejaring sosial atau bookmarking. Tulisan kita mudah menyebar dengan dibagikan ke twitter atau facebook. Sehingga akan bisa menjadi ajang promosi blog dan bisa mendatangkan pengunjung.
4. Related Post, yaitu widget yang menampilkan tulisan-tulisan yang terkait dengan tulisan yang kita baca. Karena dengan demikian akan mempermudah pembaca untuk mendapatkan ilmu atau bacaan yang terkait. Selain itu akan bisa mendatangkan banyak page view.
5. Komunitas blog, widget-widget yang sebagai media untuk membentuk komunitas blog, misalanya google friend connect, facebook fan page dan lain-lain. Fungsinya untuk membentuk komunitas yang ramai, mempermudah pengunjung untuk berlangganan feed blog kita.
6. Situs jejaring sosial, yaitu salah satu widget jejaring sosial yang kita ikuti. Dengan memasang, misalnya twitter update. Blog kita akan selalu terlihat update dan ada pemiliknya yang bisa dihubungi.
7. Arsip, yaitu yaitu widget yang menampilkan bulan kita ngeblog, dan juga bisa menampilkan jumlah tulisan dalam setiap bulan berapa kali kita posting. Selain itu juga akan mempermudah dalam penulusuran.
8. Search engine, ini dia widget yang dianggap sangat penting. Karena bisa dibayangkan betapa sulitnya mencari suatu kata kunci yang ada di blog kita tanpa search engine.

selengkapnya>>