Belajar Nge-Blog

Memasang Widget "I Love Indonesia"

noreply@blogger.com (dhonie) — Fri, 10 Jun 2011 01:24:00 +0700

Kali ini saya bahas gmn cara pasang widget I Love Indonesia di pojok kanan atas/seperti yg terlihat di blog ini. Mungkin teman-teman sudah bnyak yang tahu, tapi gak ada salahnya kalo saya bahas lagi.
Langsung saja sob, ikuti langkah-langkah berikut ini.

Gambar

Langkah-langkahnya :

1. Buka Blogger dan Sign In menggunakan account sobat
2. Pilih tata letak
3. Add Widget
4. Text/HTML
5. Masukan Script di bawah ini :

<script language="JavaScript" src="https://sites.google.com/site/kodeblogger/javascript/widget.js.txt" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("http://lh6.googleusercontent.com/_9W8681AXnyo/TWS8zq3XKFI/AAAAAAAAAL8/VNes2sF4baw/iluvindonesia.png")</script>

6. Simpan dan lihat hasilnya

Cara Membuat Navigasi Page Number Di Blogspot

noreply@blogger.com (dhonie) — Thu, 9 Jun 2011 23:37:00 +0700

Kali ini saya akan membahas bagaimana cara membuat membuat Navigasi Page Number Di Blogspot, Pada template Blogspot umumnya menggunakan navigasi Previous dan Next/Posting lebih baru dan Posting Lama yang ada pada bagian bawah postinagn blog, fungsinya yaitu membantu pembaca/pengunjung untuk berganti halaman menuju tulisan sebelum atau setelah dari tulisan yang sedang dibaca tanpa ada keterangan nomor halaman.Contohnya ada jg pada blog saya ini, Biar tidak bingung saya kasih contoh gambar dibawah ini.

Lihat Gambar

Nah, begitulah kiranya yang akan saya buat, Berikut adalah langkah-langkah membuat navigasi nomor halaman (kode script modifikasi ini dibuat oleh Abu Farhan dan Muhammad Rias).
Ikuti langkah-langkah berikut :

1. Seperti biasa, Login ke blogger sobat

2. klik Tata Letak dan pilih Edit HTML

3. Kalau sudah, klik Expand Template Widget

4. Lalu cari kode berikut (Ctrl + F) : ]]></b:skin>

5. Kemudian masukan kode script dibawah ini tepat di atas kode: ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

6. Selanjutnya kita cari lagi kode berikut: </body>

7. Kemudian masukan kode script berikut tepat di atas kode: </body>

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

Keterangan :
Kode pageCount di atas menunjukkan jumlah tulisan/posting/artikel yang akan ditampilkan dalam satu halaman.
Kode displayPageNum menunjukkan jumlah nomor halaman yang ditampilkan (jika diisi dengan angka 7 berarti nomor halaman yang muncul ada 8, ditambah satu untuk halaman satu). Kode upPageWord mengarahkan kita ke halaman yang lebih baru (tulisan Previous bisa diganti sesuai dengan keinginan).
Kode downPageWord mengarahkan ke halaman yang lebih lama (tulisan Next bisa diganti sesuai dengan keinginan).

8. Terakhir kita cari kode script berikut: 'data:label.url'

9. Gantilah kode script diatas dengan kode dibawah ini:

'data:label.url + "?&max-results=5"'

Keterangan :
Fungsi dari script ini adalah untuk mengganti default (standar) Blogspot yang akan menampilkan 20 posting setiap halamannya, karena pada pageCount di atas kita isi 5, maka pada script ini pun juga diisi dengan 5 (menampilkan 5 posting per halaman).

10. Simpan template, dan lihat hasilnya.

Semoga bermanfaat.

Auto Hide Navbar Blogger

noreply@blogger.com (dhonie) — Sat, 4 Jun 2011 00:47:00 +0700

Tadi saya shared cara menghilangkan NavBar Blogger,,,nah sekarang saya juga ingin shared cara auto hide Navbar Blogger ne,,,langsung aja ya,,,

   1. Pastiakan udah log in di blogger

   2. Ke menu Layout Kemudian Edit HTML

   3. Kemudian Cari Code seperti ini ]]></b:skin> (untuk mempermudah pencarian ketik ctrl+F)

   4. Lalu Diatas Code ]]></b:skin> tambahkan Code seperti dibawah

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

5. Selesai Deh tinggal SImpan Template dan lihat hasilnya..

sekian yah semoga bermanfaat bagi anda.. terus berkreasi majukan komunitas blogger indonesia

Cara Menghilangkan Navigator Bar Blogger

noreply@blogger.com (dhonie) — Sat, 4 Jun 2011 00:13:00 +0700

Langsung aja ya,,,,
1. Buka menu Layout kemudian Edit HTML
2. Cari Kode ]]></b:skin> kemudian
3. Taruh Script Di bawah ini diatas Kode diatas

#navbar-iframe { height:0px; visibility:hidden; display:none}

4. Kemudian Save deh...

Cara Membuat Read More Otomaatis

noreply@blogger.com (dhonie) — Fri, 3 Jun 2011 23:07:00 +0700

Pada postingan sebelumnya sudah pernah saya bahas tentang cara membuat read more atau baca selengkapnya. Hampir sama dengan postingan saya kali ini, namun read more otomatis memiliki kelebihan yaitu postingan akan terbagi menjadi 2 bagian secara otomatis.

Untuk read more otomatis ini, dibutuhkan kode javascript yang sebenarnya bisa sobat simpan sendiri di tempat biasa sobat menyimpan file secara online. Namun kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah errror saat hosting yang kita gunakan untuk menyimpan kode script-nya sedang down.

Buat blogger baru, saya sarankan menggunakan read more otomatis saja ketimbang read more yang biasa. Karena tentunya sobat tidak akan repot membagi 2 postingan sobat dengan kode manual.

Berikut langkah – langkah dalam membuat read more otomatis :
1. Silahkan login ke blogger terlebih dahulu.
2. Klik Tata Letak.
3. Kemudian klik Edit HTML.
4. Centang Expand Template Widget.
5 .Letakkan kode berikut ini tepat diatas kode </head> :

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

6.Untuk yang sudah pernah menggunakan read more versi lama (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna biru di bawah ini, sesuaikan dengan template sobat, karena setiap template berbeda - beda :

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/> <style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if> <div style='clear: both;'/>

sehingga sekarang hanya ada satu <data:post.body/>
7. Kemudian hapus kode : <data:post.body/> atau <p><data:post.body/></p>
8. Ganti kode tersebut dengan kode berikut ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read More … <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

9. Kemudian Simpan Template.

Keterangan :

summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.
summary_img = 360 –-> untuk tinggi postingan dengan gambar.
img_thumb_height = 120 –> tinggi gambar.
img_thumb_width = 150 –> lebar gambar.
Read More… –> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.

Silahkan sobat atur sesuai template sobat. Selamat berkreasi.

Cara Menghilangkan Tanda Quickedit (Icon Tang & Obeng)

noreply@blogger.com (dhonie) — Thu, 2 Jun 2011 23:18:00 +0700

Dalam keadaan login ke account gmail/Blog, kita akan melihat tanda tang dan obeng pada widget-widget yang terpasang pada blog kita. Ini sebenarnya tidak akan mengganggu kenyamanan pengunjung, karena icon ini hanya terlihat pada account kita, tidak pada halaman yang dilihat pengunjung. Tapi bila anda merasa terganggu dengan tampilannya, anda bisa menghilangkannya koq.
1. Login ke Account / Dashboard blog anda.
2. Masuk ke pilihan Design / Rancangan.
3. Pilih menu Edit HTML.
4. Cari kode ]]></b:skin>
5. Ganti kode tersebut dengan kode berikut ini :

.quickedit {display:none !important;}
]]></b:skin>

6. Simpan dan lihat hasilnya sob,,

Pentingnya Memperbaiki Error Pada Widget Blog Archive

noreply@blogger.com (dhonie) — Thu, 2 Jun 2011 23:08:00 +0700

Masih berhubungan dengan masalah ketidak-validan template Blogger dimata Validator W3, kali ini ada sedikit info tentang widget Blog Archive atau Arsip Blog, yang mungkin saat ini juga sedang kalian pasang di blog kalian. Widget ini mengandung banyak Error jika ditampilkan dalam bentuk Hirearcy. Dan hal ini tentu saja semakin membuat blog kita tidak valid.
Hal ini disebabkan karena kode pemanggilan database blogger yang memakai huruf besar dalam penulisannya. Dalam struktur template yang valid, kode-kode javascript dan juga database harusnya hanya menggunakan huruf kecil.

Sayangnya, kita ngga akan bisa memperbaiki penulisan kode tersebut, karena kode tersebut ditanamkan pada mesin Blogger, dimana stylesheet tersebut adalah kode default untuk semua pengguna mesin Blogger. Sampai saat ini, satu-satunya cara untuk mengatasi masalah Error pada Widget ini, adalah dengan mengganti jenis tampilannya menjadi Flat.

So, ada baiknya kalian juga memperhatikan mengenai masalah kevalidan widget yang satu ini di blog kalian. Kenapa? karena semakin valid blog kita, akan semakin mudah juga bagi Bot dari Search Engine dalam mengindeks blog kita.

Semakin mudah search engine mengindeks konten blog kita, semakin besar juga peluang blog kita menduduki Top 10 hasil pencarian pada search engine kan?

Happy Blogging..

Cara Mempercepat Loading Form Komentar

noreply@blogger.com (dhonie) — Thu, 2 Jun 2011 23:03:00 +0700

Selain mengandung banyak error dan ngga valid XTML, sebenarnya form komentar default blogger juga mempunyai permasalahan lain. Terdapat kejanggalan dalam cara penulisan kode pemanggilan iframe form tersebut. Kenapa gw bilang janggal ?, karna pemanggilan iframenya dibuat terpisah menjadi dua bagian.
Kode src yang biasanya digunakan untuk memanggil data external, entah kenapa dibuat terpisah dengan tautan link menuju halaman form komentar yang asli di Blogger. Dan ini membuat loading form komentar menjadi lambat.

Efeknya mungkin ngga akan terlihat ketika pengunjung membaca konten post kita sampai habis terlebih dahulu. Why?, karna saat dia selesai membaca artikel, form komentar memang udah berhasil di loading dengan sempurna. Tapi, kalo kita bandingkan lama loading form komentar dengan widget-widget lainnya, dijamin pasti akan terlihat seberapa lemotnya iframe tersebut.

Seringkali, elemen sidebar lebih duluan tampil dibanding form komentar. Hal ini tentu saja membingungkan, karna seharusnya, form komentar adalah elemen yang tampil pertama kali setelah konten post, sesuai dengan letak kodenya yang berada persis dibawah kode main post blog. Baru setelah itu, kode sidebar dan footer.

Dan kalo blog kalian mengalami masalah yang persis seperti pembahasan sebelumnya, berikut ini ada cara untuk memperbaiki "kejanggalan" form komentar tersebut.

1. Masuk ke menu Edit HTML blog kalian, kemudian berikan tanda centang (check mark) pada kolom Expand Widget Template. (jangan lupa untuk membackup blog terlebih dahulu, untuk berjaga-jaga dari kesalahan nantinya)

2. Carilah kode seperti ini di template kalian :

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

3. Perhatikan kode diatas. Kode data:post.commentFormIframeSrc dan src yang seharusnya bisa ditulis bersamaan, malah dibuat terpisah, dengan target src iframe yang dibiarkan kosong.

Dan karna browser biasanya cenderung lambat dalam merespon kode src yang null alias kosong, maka kita harus mengganti struktur penulisannya menjadi lebih benar. Bagaimana caranya?
--> Pindahkan kode data:post.commentFormIframeSrc kedalam target src yang kosong, seperti ini :

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='data:post.commentFormIframeSrc' width='100%'/>

--> Selanjutnya, hapuslah kode <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
Sekarang kode form komentar kita sudah lebih singkat :

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='data:post.commentFormIframeSrc' width='100%'/>

4. Save template, dan cek kinerja form komentar kalian sekarang.

Membuat Banner Sederhana

noreply@blogger.com (dhonie) — Thu, 2 Jun 2011 01:58:00 +0700

Mungkin teman-teman blogger sudah tidak asing lagi dengan istilah Link Exchange, beberapa manfaat melakukan link exchange juga pasti sudah pada tahu. Biasanya yang dilakukan oleh para blogger untuk saling menukar link yaitu mencantumkan link teman yang diajak tukaran link ke blognya masing2, dan penukaran link tersebut bisa berupa teks ataupun banner. Namun untuk pembahasan kita kali ini kita utamakan maslah banner blog, seperti apakah banner blog yang bagus untuk dijadikan bahan link exchange?

Beberapa Blogger menyediakan banner blog dengan tujuan agar bisa menjalin tukar link/link exchange sesama blogger lainnya. Oleh karenanya tidak sedikit dari mereka (para blogger) berlomba-lomba untuk mendesain button/banner blognya seindah dan semenarik mungkin. Namun yang perlu diperhatikan, apakah ukuran banner yang telah didesain sudah ideal untuk digunakan dalam hal link exchange? Kebanyakan dari para Blogger lebih memilih untuk memasang mini banner ketimbang banner yang memilki ukuran yang relatif besar, bisa saja alasannya karena takut memakan size/loading blog sehingga maslah ini dapat membuat blog si pemasang banner bertambah lemot/lambat, lalu alsan lainnya juga karena banner besar juga memakan tempat. Dan dikarenakan banyak alasan tersebut lah banyak dari para blogger lebih memilih untuk memasang mini banner ketimbang banner besar, walaupun proses link exchange terjadi, si pemasang banner akan lebih memilih untuk memasang link berupa teks ketimbang banner. Lalu bagaimana teman2, apakah banner blognya teman2 sudah starategis untuk digunakan sebagai bahan link exchange?

Dan banner blog yang cocok untuk digunakan sebagai bahan link exchange yang saya maksud yaitu seperti banner berikut ini:

Lalu bagaimanakah cara membuat banner tersebut? Cara membuatnya sangat gampang, bagi teman2 yang jago dalam maslah desain dengan menggunakan program desain grafis (seperti corel, photo shop, dll) monggo...silahkan saja. Akan tetapi bagaimana bagi yang belum bisa menggunakan program desain grafis seperti yg telah disebutkan? Atau mungkin bagi yang tidak mau repot2? Yupz...gak usah khawatir, karena teman2 bisa langsung menggunakan jasa/layanan online untuk mendesain mini banner secara gratis. Silahkan untuk mengunjungi langsung web: http://cooltext.com.

Nanti di sana teman2 bisa mendesain mini banner sesuka hati, dan nanti besarnya meneyerupai ukuran contoh banner di atas, teman2 bisa meneyesuaikan kata2 yang ingin dibubuhi di dalamnya, dan usahakan kata2 yg singkat. Selain itu juga teman2 bisa mengatur warna banner yang diinginkan.

Begini caranya:

<center><a target="_blank" href="http://kumpulan-tutorial86.blogspot.com/"><img alt="kumpulan-tutorial86.blogspot.com" src="http://images.cooltext.com/2106886.gif" border="0" /></a><a target="_blank" href="http://kumpulan-tutorial86.blogspot.com/">
</a></center>

<center><textarea rows="4" cols="24" name="code"><a target="_blank" href="http://kumpulan-tutorial86.blogspot.com/"><img alt="kumpulan-tutorial86.blogspot.com" src="http://images.cooltext.com/2106886.gif" border="0" /></a><a target="_blank" href="http://kumpulan-tutorial86.blogspot.com/">
</a></textarea></center>

Hasilnya :

Nah, sekarang silahkan mencoba. Kalau sudah nyoba jangan lupa tukaran link yak....^ (lumayankan saling nambah back link, ayo...buruan)

Cara Membuat Blog Tidak dapat di Copas, CTRL+U , dan BLock

noreply@blogger.com (dhonie) — Wed, 1 Jun 2011 23:11:00 +0700

Baiklah saya tidak akan panjang lebar untuk menjelaskan trik ini mungkin para sobat semua sudah paham apa yang saya bahas kali ini. Jika tertarik dan berminat ikuti langkah-langkah berikut :
1. Masuk ke Dasbor
2. Klik tab Tata Letak
3. Klik tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </head>
Kalau sudah ketemu, anda Copy Pastekan script yang ada dibawah ini "Persis setelah kode </head>".

<SCRIPT type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</SCRIPT>

6. Simpan

Cara men-disable klik kanan dan CTRL+U pada keyboard

1. Masuk ke edit html
2. Cari <body>
3. Gantikan kode tersebut dengan kode dibawah ini

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

4. Simpan

Membuat Tombol Auto Install Code

noreply@blogger.com (dhonie) — Wed, 1 Jun 2011 22:30:00 +0700

Membuat Tombol Auto Install Code bertujuan untuk mempermudah para pengunjung yang ingin menginstall/mengisi suatu kode ke gadget blog mereka. Cukup dengan mengklik tombol auto install gadget yang telah kita sediakan, maka otomatis kode yang dimaksud terinstall ke blog mereka (para pengunjung) tanpa harus melalui langkah manual seperti: Klik Tata Letak >> Tambah Gadget >> JavaScript/HTML, dan tentu untuk melakukan peng-install-an auto ini si pengunjung harus dalam keadaan online di akun Blogger (gak online juga gak apa-apa, kan login-nya bisa nyusul). Selanjutnya si pengunjung bisa mengatur tempat di mana gadget itu berada (mana kala si pengunjung tidak ingin gadgetnya terletak di bagian side bar).

Untuk mempersingkat waktu maka teman-teman bisa memasang tombol auto install ini melaui tahap-tahap berikut:

1. Login ke Blogger.

2. Klik Tata Letak >> Tambah Gadget >> JavaScript/HTML

3. Isikan kode berikut:

<form action="http://beta.blogger.com/add-widget" target="_blank" method="POST"><input value="Belajar Nge-Blog" name="widget.title" type="hidden"/><textarea rows="3" cols="5" style="display: none;" name="widget.content"><div style="text-align: center;"><a target="_blank" href="http://kumpulan-tutorial86.blogspot.com/"><img border="0" alt="t4belajarblogger.blogspot.com" src="http://i951.photobucket.com/albums/ad355/dhonie182/IMG_7062-1-1.jpg"/></a></div></textarea><input value="Dukung Blog kumpulan-tutorial86.blogspot.com" class="button" name="go" type="submit"/></form>

Keterangan:
Orange: Nama Gadget. (Agar lebih jelas, perhatikan di bagian kanan blog ini. Di sana ada tulisan Profil Empunya, Posting Terbaru, dll. Itulah nama Gadget).
Hijau: Kode yang ingin di-install.
Biru: Tulisan yang Tampil di Tombol Auto Install.

Cara Memasang BreadCrumbs

noreply@blogger.com (dhonie) — Wed, 1 Jun 2011 22:00:00 +0700

Menu Navigasi Breadcrumb ini merupakan salah satu penunjang SEO dalam sebuah blog. Dilihat dari pengertinya yaitu adalah sebaris link tautan internal pada bagian atas postingan atau dibawah halaman situs web yang memudahkan pengunjung untuk kembali ke bagian sebelumnya atau ke halaman dasar dengan cepat.

Saya yakin sudah banyak blogger yang sudah tidak asing dengan Navigasi Breadcrumb ini. Tapi siapa tahu masih ada yang belum tahu, dan juga bisa sebagai bookmark buat saya agar tidak repot2 mencari kesana kemari untuk membuatnya. jadi untuk para master blog lewati saja postingan ini. Hehehe
Untuk lebih jelasnya sobat bisa melihatnya dibagian atas setelah judul posting. atau perhatikan screenshot dibawah ini:

Demo

Berikut langkah-langkah membuatnya:

1. Masuk Rancangan/Layout
2. Pilih Edit HTML
3. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
4. Beri tanda centang "Expand Template Widget"
5. Tekan Ctrl+F (untuk mempermudah pencarian) Cari kode berikut:

]]></b:skin>
6. Copy lalu paste-kan kode dibawah ini tepat diatas kode diatas

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:11px;
line-height: 1.4em;
border-bottom:3px double #666;
}

7.Kemudian carilah kode:

<div class='post hentry uncustomized-post-template'>

8. Setelah ketemu, taruhlah kede berikut tepat diatasnya

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><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 != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

9. Bila sudah, jangan lupa untuk Save Template.

Membuat Spoiler di Blogspot

noreply@blogger.com (dhonie) — Tue, 24 May 2011 16:26:00 +0700

Spoiler berfungsi untuk menampilkan / menyembunyikan artikel, gambar, ataupun script yang bisa diletakkan didalamnya.spoiler adalah BB Code (dari googling). ada baiknya jika artikel / gambar yang kita posting sangat panjang, maka kita bisa gunakkan cara ini, mungin sudah tidak asing bagi yang sudah lama terjun di dunia maya,tapi bagaimana dengan yang masih newbie seperti saya?pasti bingung bagaimana mengatasinya / mempersingkatnya.
baik lah,kita mulai saja,berikut contoh spoilernya ;

Untuk membuatnya menggunakkan code berikut :

<div><div style="margin: 5px;"><div class="smallfont" style="margin-bottom: 2px;"><input value="Show" style="margin: 0px; padding: 0px; width: auto; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: 1px dotted #006400; text-align: justify;">isi teks atau kode gambar yang disembunyikan dibalik tombol</div></div></div></div></div>

Ganti yang berwarna merah sesuai keinginan temen2,,,
Selamat Mencoba!!!!

Membuat Author Box Dibawah Posting

noreply@blogger.com (dhonie) — Tue, 24 May 2011 16:21:00 +0700

Informasi Author atau pemilik blog sangatlah penting dalam sebuah blog atau website, agar semua pengunjung dapat mengetahui siapa penulis dalam blog / website tersebut. pada kesempatan kali ini saya akan berbagi tutorial bagi anda yang ingin menambahkan informasi tentang anda di setiap posting yang ada dalam blog anda.tidak hanya di profil blogger saja,namun agar lebih mudah dan banyak yang membaca kita tempatkan di bawah postingan. cara ini juga bisa anda ubah,maksudnya bukan menuliskan tentang anda namun pesan pribadi,ataupun kata bijak lainnya.mari kita simak langkah demi langkah pembuatannya.

1. Login dengan akun blogger anda.
2. Masuk ke menu Rancangan > Tata letak > Edit HTML.
3. Cari Kode berikut ]]></b:skin>.
4. Masukkan kode dibawah diatas kode ]]></b:skin>.

5. Kemudian cari kode <div class='post-footer-line post-footer-line-1'>

6. Letakkan kode berikut di bawah kode diatas tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='avatar' class='avatar avatar-70 photo' height='70' src='http://i951.photobucket.com/albums/ad355/dhonie182/IMG_7062-1-1.jpg' width='70'/><b>About Author</b><br/>
Letakkan Tulisan anda disini<br/></p>
</div>
</b:if>

NB : Anda ganti tulisan berwarna Merah dengan teks yang anda inginkan.

Sekian dari tutorial ini,terimakasih atas kunjungannya,dan saya harap anda bisa meluangkan waktu sejenak untuk berkomentar untuk postingan saya ini.

Backlink Gratis Blogger

noreply@blogger.com (dhonie) — Tue, 24 May 2011 14:40:00 +0700

Backlink adalah sebuah link atau teks yang berada di situs lain atau situs kita sendiri yang jika kita klik maka akan menuju suatu halaman lainnya dan ini disebut backlink untuk halaman yang dituju tersebut. Teks dari link ini biasanya berupa anchor text atau teks singkat yang biasanya adalah kata kunci dari halaman tujuan tersebut.

Fungsi dari backlink sangat penting diperlukan untuk meningkatkan popularitas suatu situs atau yang biasa dikenal dengan pagerank atau yang menjadi sebuah ukuran otoritas dan pentingnya situs tersebut terutama oleh mesin mencari seperti google.

Nah siapa yang tidak mau blognya mendapatkan banyak backlink pasti semua sobat juga kepingin blognya mendapatkan banyak Backlink, kali ini saya mencoba menerapkan cara cepat mendapatkan Backlink pada blog dengan sistim Multi Level Marketing.

Caranya sangat mudah. Anda hanya perlu meletakkan link-link berikut ini di blog atau artikel Anda dengan cara copy-paste.

dimas0883 blogspot

Freeware-Asik

Uang otomatis

Seti@wan Dirgant@Ra

Arumsekartaji

ANTaPhoenixers

Padhang Bulan

Tipspack

DAW-XP

Belajar Nge-Blog

Jika tiap peserta mampu mengajak 5 orang saja, maka jumlah backlink yang akan didapat adalah:

Ketika posisi anda 10, jumlah backlink = 1

Posisi 9, jml backlink = 5

Posisi 8, jml backlink = 25

Posisi 7, jml backlink = 125

Posisi 6, jml backlink = 625

Posisi 5, jml backlink = 3,125

Posisi 4, jml backlink = 15,625

Posisi 3, jml backlink = 78,125

Posisi 2, jml backlink = 390,625

Posisi 1, jml backlink = 1,953,125

Jika posisi Anda di atas 10, maka kemungkinan Anda bisa mendapatkan backlink lagi.

Dan semuanya menggunakan kata kunci yang anda inginkan. Dari sisi SEO anda sudah mendapatkan 1,953,125 backlink dan efek sampingnya jika pengunjung downline lalu mengklik link Anda itu, maka anda juga akan mendapatkan traffict tambahan.

Nah, silahkan copy paste artikel ini, dan hilangkan peserta nomor 1 lalu tambahkan link web anda di posisi 10. Ingat, Anda harus mulai dari posisi 10 agar hasilnya maksimal. Karena jika anda tiba2 di posisi 1, maka link anda akan hilang begitu ada yang masuk ke posisi 10. Nggak ada salahnya khan mencoba? Mari kita lihat bagaimana efeknya. Selamat Mencoba......

Cara Mudah Mengganti Favicon Pada Blog

noreply@blogger.com (dhonie) — Tue, 24 May 2011 04:25:00 +0700

Mungkin cara ini memang sudah lawas dikalangan para blogger , namun ada sedikit kemudahan di cara yg akan aku beri ini . Apakah itu ? yapp kita gak perlu upload gambar ke image hosting atau apalah itu namanya , kita cukup duduk tenang memilih gambarnya dan meletakannya di edit HTML.

Mau tau caranya ? silahkan ikuti cara di bawah ini ya

1 . Buka alamat http://iconj.com/ atau kalian klik disini

2 . Kalo udah kebuka nanti klik animated favicon

3 . Udah deh tinggal pilih favicon yg diinginkan (mungkin kebanyakan favicon berupa huruf)

4 . Kalo udah ketemu yg sesuai dengan selera tinggal klik HTML embed code and details yg ada di bawah favicon

5 . Nanti copy deh kodenya (kalo kamu pingin favicon yg gerak , kamu pilih kode yg atas , kalo yg polos pilih yg bawah)

Siip sekarang kita menuju ke blogger >> rancangan >> edit HTML

1 . Kemudian cari kode

<title><data:blog.pageTitle/></title>

2 . Kemudian kamu copy kode favicon tadi dibawah kode <title><data:blog.pageTitle/>

3 . Klik simpan

Jadi deh , gimana gampang kan ? selamat mencoba

Icon-Icon Menarik Untuk Blog

noreply@blogger.com (dhonie) — Tue, 24 May 2011 04:22:00 +0700

Buat kalian para blogger yg baik hati , tidak sombong dan rajin menabung seperti admin blog ini memang sangat butuh icon-icon menarik buat menghias blog mereka . Namun mungkin kalian kesulitan menemukan icon-icon tersebut , apakah mencari di google image ? pasti gak puas dengan hasilnya.

Sekarang aku akan berbagi tempat dimana kalian bisa menemukan ribuan icon yg pasti menarik dan keren tentunya . Ini websitenya http://findicons.com/ . Atau kalian bisa klik disini

Disana memang banyak banget icon-icon keren , kalian cukup masukin nama icon yg mau dicari dan eng ing eng icon yg dicari langsung nongol.

Sekian dulu , selamat mencari icon

Cara Membuat Read More Otomatis Pada Blog

noreply@blogger.com (dhonie) — Tue, 24 May 2011 04:20:00 +0700

Dari judulnya aja udah pada tau kan postingan ini membahas tentang apa . Keuntungan dari read more otomatis adalah , pada waktu kita ingin memosting sebuah artikel , kita tidak perlu lagi memenggal artikel itu dengan ~~celurit~~ insert jump break lagi (yg ada di menu bar entri baru) . Jadi kita tinggal posting dan artikel langsung terpenggal dengan sendirinya.

Buat kalian yg ingin membuat read more otomatis , silahkan ikuti cara dibawah ya...

1 . Pada dasbor blog >> rancangan >> edit HTML >> centang expand widget template

2 . Cari kode </head>

3 . Kemudian kalian copy kode dibawah ini tepat dibawah kode diatas

4 . Kemudian cari lagi kode <data:post.body/>

5 . Lalu ganti kode diatas dengan kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>»»  Lanjutin Yuk...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Tulisan yg tebal bisa diganti dengan kata-kata kalian sendiri

6 . Klik simpan

Siip jadi deh , silahkan dilihat hasilnya

Cara Membuat Kotak Link Exchange

noreply@blogger.com (dhonie) — Tue, 24 May 2011 04:14:00 +0700

Kamu belum bisa masang banner link exchange? masa' sih? hari gini belum bisa masang banner, capeee'' deeh :p
Kalo kita mau tukeran link biasanya ada kotak seperti ini :

Nha trus gimana cara buat kotak tersebut?
gini lho,
pertama Login ke blogger trus pilih Layout --> Page Elements
trus klik Add a Gadget lalup pilih HTML/Java Script
trus kopi kode berikut ini di tempat yang disediakan.

text yang berwarna hijau menunjukkan labar kotak, text warna biru adalah link, ganti text tersebut dengan alamat blogmu sedangkan text warna merah adalah alamat gambar beserta ukurannya, ganti text tsb dengan alamat gambar km.
terus simpan templatenya.
Hasilnya akan seperti kotak diatas, trus gambarnya mana?, gini didalam kotak tersebut kan ada textnya tuh, nha kalo textnya itu dicopy terus di paste di blog, maka hasilnya akan menjadi gambar dan juga ada linknya. Kisi kotak diatas kalo dicopy dan paste jadinya akan seperti ini:

piye? wes mudeng rung?
Guampang tho?

Cara memasang Translate Bendera

noreply@blogger.com (dhonie) — Tue, 24 May 2011 01:06:00 +0700

Menambahkan Fasilitas translate akan sangat membantu pengunjung blog anda terutama pengunjung yang dari luar. Maksutnya orang luar bukan Alien tapi orang dari negara lain yang mengunjungi blog anda. Selain itu dengan adanya fasilitas translate juga dapat meningkatkan jumlah pengunjung blog anda. kanapa bisa ?, karena orang dari negara lain akan mengerti apa yang anda tulis dengan menerjemahkan bahas tulisan anda. dengan demikian orang luar akan lebih sering mengunjungi blog anda. Fasitas tanlate yang akan kita buat adalah fasilitas tranlate dengan logo bendera seperti ini:

Cara menambahkan fasilitas tranlate kedalam blog anda langkah-langkahnya adalah :

Login ke blog anda
Pilih Rancangan >Tata letak/Elemen halaman >Add gadget

Copas kode berikut kedalam box yang tersedia

Klik simpan dan lihat hasilnya
Selamat mencoba dan Trima kasih

Cara Membuat Index Di Blog

noreply@blogger.com (dhonie) — Sun, 22 May 2011 20:03:00 +0700

Daftar isi yang saya maksud ini adalah Daftar isi yangs ecara otomatis update apabila kita melakukan posting.

Dengan mengandalkan feeds post inilah yang dapat secara otomatis update, jadi tak perlu repot-repot lagi untuk menambahkan URl/Link postingan terbaru ke dalam daftar isi.

Cara membuat daftar isi blog

Sekarang kita akan langsung membahas cara pembuatan daftar isi blog otomatis silakan perhatikan code dibawah ini

<div style="border: 0px solid #000; overflow: auto; height: auto;">
<script style="text/javascript" src="http://tivadblogspot.googlecode.com/files/Contents.js"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
var shownumposts = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
<div align="right" style="padding:16px 5px 5px 5px;font-size:11px">
<a href="http://www.davitblog.com" target="_blank" style="color:#000">Powered By Blogger</a>
</div>

Code di atas tadi bisa langsung di masukan di Gajet HTML Widget atau sidebar, kalau saya pribadi lebih suka di pasang di entry dan tinggal buatkan menu denngan Nama Index atau Daftar isi..

Oke cukup mudah bukan, tak perlu repot repot oprek oprek script begitu rumit.. hehehe

Tutorial Blogger | Pasang Tombol Balas Komentar di Blogspot

noreply@blogger.com (dhonie) — Sun, 22 May 2011 04:19:00 +0700

Langsung saja mulai yuk!

1). Silahkan login dulu ke Blogger dengan akun sobat

2). Kemudian masuk ke halaman Rancangan ==> Edit HTML lalu centang pada kotak Expand Widget Template. Lakukan Back Up terlebih dahulu pada template blog sobat, untuk jaga-jaga dari kegagalan prosesi sehingga sobat bisa langsung merestore template Blog seperti semula.

3). Selanjutnya cari dan dapatkan kode di bawah ini! (Bila susah mencarinya gunakan fasilitas search dengan menekan tombol Control+F3 pada keyboard)

4). Setelah kode yang di atas ketemu, kemudian letakkan kode di berikut ini tepat di bawahnya.

<a expr:href='"https://www.blogger.com/comment.g?blogID=BLOG ID SOBAT&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'><img alt='Reply To This Comment' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIqyJ_QnoRpJLU7-WsobAVkK5aU2Rkzd4RUz4703DYEKsIgHglTTUEJTRMJ9wVWKP7jyzC0HwSW_Q5_0GZLstzS61BjpDhCNj0wZKTXIrvfYCePXqygddeXa_CmpIQ0EQaCus7a5K2x-0/s400/reply05.png'/></a>

5). Jangan lupa ganti Kode Blog ID dengan BLOG ID sobat (Kode Blog ID terlihat Di Browser Internet pada saat sobat melakukan posting/ edit HTML di dasbor).Seperti contoh posisi Blog ID pada gambar di bawah ini!

Tutorial Blogger | Memasang Widget Recent Posts Dengan Fungsi Sliding Di Blog

noreply@blogger.com (dhonie) — Sun, 22 May 2011 04:03:00 +0700

Nah, apabila ada dari sobat Blogger yang belum puas dengan tampilan ketiga Widget di atas, sobat dapat menggunakan Widget Recent Post third party seberti yang sobat lihat di sidebar Blog saya ini. Widget ini selain mampu menampilkan Judul dan summary artikel, juga mempunyai fitur slider yang sangat cantik. Juga user dimungkinkan untuk memodifikasi tampilannya sesuai dengan selera sobat. Widget ini saya temukan dari beberapa sumber di internet dan saya share kembali buat sobat yang membutuhkannya!

Begini cara memasangnya :
1). Login ke akun Blogger sobat

2. Klik Rancangan >> Elemen Laman

2. Klik Tambah Gadget

3. Pilih HTML/Javascript

4. Masukan kode di bawah ini :

<style type="text/css">
#rp_plus_img{height:350px;overflow:hidden;border:solid 1px #585858;padding:6px 10px 14px 5px;background-color:#2f2f2f;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#FFF;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#DEDEDE;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://softwarebali.googlecode.com/files/RECENTPOSTJQUERI.JS"></script>
<script type="text/javascript" src="http://softwarebali.googlecode.com/files/slidepost.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 15;
var numchars = 70;
</script>
<script src="http://kumpulan-tutorial86.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

5). Keterangan Instalasi Widget

>> Untuk merubah warna font judul artikel ubah nilai #FFF pada kode color : #FFF

>> Untuk merubah warna font artikel ubah nilai #DEDEDE pada kode color : #DEDEDE
>> Untuk merubah ukuran gambar mini ubah nilai 55px pada kode width:55px; dan kodeheight : 55px;
>> Ganti nilai 400 pada kode var speed = 400; untuk mengatur kecepatan
>> Ganti nilai 2500 pada kode var pause = 2500; untuk mengatur lamanya artikel tersebut tertahan (pause) sebelum diganti artikel berikutnya
>> Untuk menghilangkan garis tepi ubah nilai 1px menjadi 0 pada kode border:solid 1px #585858;
>> Untuk merubah background ubah nilai #2f2f2f pada kode background-color:#2f2f2f;atau jika tidak ingin menggunakan background hapus kode tersebut
>> Ganti nilai 10 pada kode var numposts = 10; untuk menentukan jumlah artikel yang akan ditampilkan
>> Ganti nilai 125 pada kode var numchars = 125; untuk menentukan jumlah karakter artikel yang akan ditampilkan
>> Feed harus diset "Penuh" melalui "Pengaturan - Feed Situs - Izinkan Feed Blog : Penuh"
>> Ganti alamat Feed yang berwarna merah dengan alamat Blog sobat
>> Agar Widget dapat berjalan sempurna alangkah baiknya jika sobat menghosting sendiri 2 (dua) file java script (js) yang terdapat pada kode ini :

http://softwarebali.googlecode.com/files/slidepost.js
http://softwarebali.googlecode.com/files/RECENTPOSTJQUERI.JS

Selamat mencoba dan semoga berguna!

Blogger Dashboard Redesigned

noreply@blogger.com (dhonie) — Sun, 22 May 2011 03:38:00 +0700

As I posted before about what's new with Blogger in 2011, Blogger will make some make over, including Blogger Dashboard design. Yesterday, Blogger team has launched new Blogger dashboard design.

It's easy, just go to http://draft.blogger.com . But please be patient because at the start, only some of lucky Blogger user can see the new design on Blogger in Draft. Blogger team promise, the next few days and weeks this new design will be ramping up to support all Draft users. There is no sign-up or activation process required from your side; just wait, and you’ll notice your dashboard has changed to the new design when you log in to Blogger in Draft. Here new Blogger dashboard design.

Cara Membuat Feedburner

noreply@blogger.com (dhonie) — Sun, 22 May 2011 03:37:00 +0700

Sebelum saya memberitahukan cara pasang feedburner pada blog ada baiknya saya kasih tau dulu apa itu tante feedburner! feedburner adalah suatu tempat user yang ingin berlangganan artikel di blog anda "jawaban versi coretan rizal, gak tau kalau jawaban orang lain seperti apa". lalu bagaimana cara pasangnya? Gampang!

1. Klik feedburner

2. Klik tulisan Register "untuk yang belum punya"

3. Isi seluruh form yang telah di sediakan seperti Username, password, Question, Secret Answer, Klik tombol Sigin

4. Jika berhasil,"akan ada tulisan (welcome)"

5. Isi kotak di bawah tulisan Burn a feed right this instant dengan alamat blog anda

6. Beri tanda pada radio buuton dan Next

7. Sekarang anda ubah Feed Title dengan Feed Address (tidak wajib), kemudian klik tombol Active Feed

8. Nanti ada tulisan Conrats, klik tombol Next saja.

9. Beri tanda cek list (centang) pada Clickthroughs dan I want more ! have FeedBurner stats PRO also track, lalu klik tombol Next

10. Klik pada tab Optimize

11. setting-an yang bisa anda lakukan, tetapi saya sarankan pada bagian yang terpenting, yaitu klik pada SmartFeed lalu klik tombol Active

12. Klik pada tab Publicize, lalu klik FeedCount

13. Pilih bentuk style feedcount sesuai selera anda, lalu beri tanda pada radio button (titik) di sampingnya, kemudian klik tombol Active

14. Setelah itu anda akan mendapat kode HTML, copy dan paste di blog anda

15. Klik Chicklet Chooser untuk memilih berbagai banner yang disediakan dengan cara beri tanda pada radio button (titik) di samping banner, kemudian copy kode HTML nya di paling bawah kemudian paste di blog anda

16. Klik Pingshot, lalu Klik tombol Active

17. Klik Headline Animator, kemudian klik menu dropdown di bawah tulisan Theme, pilih yang sesuai selera anda, lalu klik tombol Active

18. Klik menu dropdown di samping tulisan Add to, pilih Blogger blog, klik tombol Next

19. Setelah itu muncul window baru, klik tombol Add to Blogger jangan lupa Sigin dulu di blogger

20. blog yang mau di pasang banner animasi nya, lalu klik tombol Menambah Widget maka secara otomatis banner animasi akan di tambahkan di blog anda

21. Selesai Jangan Lupa Follow saya, dan jangan lupa isikan email anda di kolom Feed saya