Artisteer 3.0 + Crack Design Your Web

Artisteer merupakan software web design untuk mendesain web tanpa coding, sehingga secara instan pengerjaannya,  hanya butuh kreatifitas untuk mendesainnya. Software ini mendukung Joomla, Wordpress, Blogger. dll

Minimum Spec:

Fileminimizer Pictures Balesio

Buat orang yang suka upload foto ke FB atau Twitter sampai blog dll, software yang satu ini cocok banget digunakan. Software ini bisa compress image sampai 98% tanpa ngurangin kualitas dan ukuran gambarnya, selain itu penggunaannya yang sangat simple dan mudah, bisa langsung upload lewat ini juga.

Description (english):

Membuat Read More dengan Cepat dan Mudah

Halo sobat blogger,  udah lama saya ga update Postingan.

  Dikarenakan saya jarang buka blog, ketinggalan deh fitur baru dari blogspot, yaitu fitur baru READ MORE dengan sangat amat mudah dan praktis, syaratnya cuman pindahin tampilan blog yang lama ke tampilan yang baru (Itu yang saya lakukan)

Menaikkan Trafik Blog dan Dapat Dolar

EasyHits4U adalah salah satu situs pertukaran trafik terbaik saat ini. Sistem EasyHits4U didisain untuk membantu mempromosikan situsmu dengan meningkatkan jumlah pengunjung yang benar-benar melihat situsmu. Selain itu, EasyHits4U menawarkan banyak keuntungan dan fitur ekstra. Kamu tidak hanya mendapat trafik ke situsmu, tapi kamu juga mendapat bayaran dari EasyHits4U.
Cara Kerja EasyHits4U
EasyHits4U membantumu mendapatkan trafik secara gratis dan mudah sehingga banyak pengunjung datang ke blog atau situsmu hanya dalam beberapa menit sehari.
EasyHits4U menyediakan pertukaran yang adil dengan perbandingan surfing 1:1, artinya untuk setiap situs yang kamu kunjungi (disebut juga "surfing"), kamu akan menerima satu pengunjung balik yang melihat situsmu. Setelah kamu melakukan surfing sebanyak jumlah tertentu, kamu akan mendapat bonus berupa kreditpoin. Kredit ini dapat ditukar dengan tayangan banner atau situsmu. Tidak ada batasan jumlah klik gratis yang kamu dapat terima per harinya - bisa 10, 100, 1000 atau bahkan 2000!
Fitur Bonus EasyHits4U
Sebagai pemilik situs dan anggota EasyHits4U, kamu dapat mengiklankan situs atau referral linkmu dalam jumlah tak terbatas, termasuk linking banner atau sejenisnya. Tersedia juga panel statistik untuk melihat berapa banyak hit yang kamu terima dari EasyHits4U. EasyHits4U memberikan penghargaan untuk keaktifanmu di pertukaran trafik EasyHits4U dengan memberikan uang dan trafik tambahan. Semakin kamu aktif, semakin banyak trafik dan uang yang bisa kamu dapatkan. Ingin tahu berapa penghasilan yang bisa kamu dapatkan?
Sebagai anggota EasyHits4U, kamu akan menerima $0.3 untuk setiap 1000 situs yang kamu lihat. Kalo kamu mengarahkan orang ke EasyHits4U.com melalui iklan kupas (peel-away ads), halaman splash, banner dan teks link EasyHits4U maka kamu akan mendapatkan 10% dari trafik yang mereka hasilkan. Selain itu,
EasyHits4U juga memberikan $0.1 untuk setiap orang yang kamu arahkan menjadi anggota EasyHits4U dan melakukan surfing sedikitnya 100 situs. Pembayaran dilakukan setelah saldo di akunmu berjumlah $3 melalui Paypal, Alertpay dan sistem E-gold. Biasanya proses ini berlangsung sekitar 5-7 hari kerja setelah permintaan pembayaran.
Selain menerima pembayaran, kamu juga akan menerima trafik dari referral yang diarahkan oleh referralmu. Sistem referral EasyHits4U tumbuh hingga 6 kedalaman.
Program Fitur EasyHits4U

• Pertukaran trafik dan kunjungan dengan rasio 1:1
• Manual Surfing
• 20 detik atau lebih waktu kunjungan
• 24 jam unik hits bergaransi
• Program referral hingga 5 kedalaman (10% -5% -3% -2% -1%)
• Menerima uang dari melakukan surfing secara aktif ($ 0.30 untuk 1000 situs yang dilihat)
• Geo-target iklan Anda (berdasarkan letak geografis)
• "Top Surfer" bonus setiap harinya
• Surfing dan kontes referral
• 50 kredit gratis pada pendaftaran (setelah anda surfing 50 situs)
• Promosikan situs Anda dengan banner yang tak terbatas
• Situs listing di direktori EasyHits4U... dan masih banyak lagi

Keanggotaan Premium EasyHits4U

• Semua anggota biasa (free member) EasyHits4U mendapatkan manfaat plus:
• Program referral hingga 6 kedalaman (15% -10% -5% -3% -2% -1%)
• 500 bonus kredit setiap bulan
• 1000 kali tayang banner setiap bulan
• Hingga 2500 bonus kredit tambahan setelah upgrade
• Pertukaran trafik dan kunjungan dengan rasio 1:1 selama 15 detik
• Anggota Premium EasyHits4U menerima lebih banyak trafik ke situs mereka dari anggota biasa
• Peningkatan jaminan hadiah pada halaman bonus saat surfing
• Hanya kurang lebih $ 6.95 per bulan

Dan fitur-fitur EasyHits4U lainnya ...!

• Kamu bisa mempromosikan situs dengan jumlah tak terbatas
• Peningkatan rasio untuk konversi kredit ke tayangan banner (1:20, bukan 1:15)
• Tim pendukung EasyHits4U memeriksa situs, banner, link teks dan email dari para anggota Premium terlebih dahulu
• Menyembunyikan banner di bingkai surfing
• Transfer kredit ke anggota lain
• Referral ditambahkan ke akun kamu langsung secara acak dari pendaftaran

Daftarkan di Link ini dan jadi reffral saya ok :) EASY HITS4U terpercaya dari tahun 2003

Cara Membuat Browser menjadi Dual Screen

Halo Sobat blogger, kali ini saya akan memberi tips atau pengetahuan bagaimana cara membuat browser dual screen seperti

Untuk menjadikan browser anda seperti gambar di atas, anda cukup menggunakan script dari javascript.
Berikut Langkah-langkahnya :
1. Buka Browser anda (Untuk test saya menggunakan browser mozilla firefox).

2. Masukkan javascript dibawah ini ke address browser anda :

javascript:finderonly=location.href;int3rnet=prompt('Masukkan%20URL%201',finderonly);brows3r=prompt('Masukkan%20URL%202',int3rnet);if(int3rnet&&brows3r){F1nd='<frameset%20cols=\'*,*\'>\n<frame%20src=\''+int3rnet+'\'/>';F1nd+='<frame%20src=\''+brows3r+'\'/>\n';F1nd+='</frameset>';with(document){write(F1nd);void(close())}}else{void(null)}

3. Jika muncul pesan “Masukkan URL 1″, isi dengan URL yang anda inginkan.
Isi dengan (Contoh) : http://www.yahoo.com

4. Jika muncul pesan “Masukkan URL 2″, isi dengan URL yang anda inginkan.
Isi dengan (Contoh) : http://www.Google.com

Sekarang browser anda menjadi dual screen.

untuk pertanyaan silahkan ketik komentar dibawah

Cara Membuat Kotak Scroll atau Scroll Box

Kendala dengan ruang blog, nah ini dia salah satu solusi menghemat ruang blog kita, denga Scroll box kita dapat menghemat ruang blog kita.

Sebelumnya apa itu Scroll box, Scroll box adalah Widget yang dapat dijadikan tempat Widget lain atau Text, dapat dipasang seminim mungkin. contohnya di TAB FRIENDS LINK saya disana saya memakai Sroll box

langsung aja caranya
1.masuk ke id blog anda

2. masuk ke RANCANGAN atau elemen halaman

3. klik ADD GADGET

4, masukkkan kode dibawah ini

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid transparant;">


<li><a href="http://blog kalian.blogspot.com/" target="_blank"> Blog keren </a></li>



</div>

5. lalu SAVE

warna merah untuk Keyword atau nama yang ditampilkan
UNGU untuk alamat blog
Hijau untuk Ukuran Scroll box
Biru untuk background, silahkan cari kode warna di web lain atau lewat google


Semoga bermanfaat n_n

Untuk pertanyaan atau gagal dalam mempraktekkannya silahkan Komentar dibawah

Tips terjitu Menaikkan Alexa Rank

Halo sobat blogger,kali ini saya akan memberikan tips tentang Alexa rank, mungkin sudah banyak di web atau blog lain yang sudah membahas tips tips melangsingkan atau menaikkan Alexa rank, sebelumnya kita bahas dulu Alexa Rank.
Alexa Rank atau Peringkat Alexa adalah sebuah peringkat yang di buat oleh Alexa.com untuk website atau blog berdasarkan banyaknya trafik atau kunjungan terhadap website atau blog tersebut, dan data trafik atau kunjungan tersebut adalah berdasarkan informasi dari jutaan pengguna internet yang memasang Toolbar alexa pada browser internet mereka.
berbeda dengan Google Pagerank, Nilai terbaik atau posisi terbaik alexa adalah 1, jadi semakin kecil alexa rank semakin bagus traffic blog kita.
Tips menaikkan Alexa rank adalah:
- memasang widget traffic alexa di blog kita
- Pasang toolbar di browser kita
- Artikel Original buatan kita sendiri, meskipun terkadang terinspirasi dari orang lain
- dan yang paling ampuh dan jitu adalah BLOGWALKING

dari tips diatas saya hanya menggunakan 3 tips saja, dan saya paling sering Blogwalking, apa itu blogwalking, blogwalking adalah kegiatan kita menjelajahi blog lain dan meninggalkan jejak situs kita dengan memasang link blog kita, dari blogwlaking kita dapat melihat artikel yang menarik ataupun mendapat teman blogger baru. bukti kalo BW memang ampuh adalah, blog saya baru sebulan sudah masuk rank 18 juta, setelah 3 hari menjadi 7 juta, 2 hari kemudian 6 juta, dan sekitar 3 bulan Google page rank saya jadi 2 dan Alexa menjadi sekitar 500 rbu, dan kali ini rank saya turun dikarenakan saya tidka aktif selama 3 bulanan, yang membuat alexa rank saya turun, jadi kita harus aktif ngeblog agar RANK terus membaik.

Sekian, silahkan komen jika ada yang kurang jelas

Cara Menambahkan Emoticon Baru di Cbox

Cbox adalah kolom dimana kita menuliskan pesan atau sesuatu di blog, terkadang C box ini sangat penting karena setiap org yang masuk ke blog sering meninggalkan pesan, seperti blogwalking dll. C box tidak jauh berbeda dengan shoutmix, tapi menurut saya Cbox lebih unggul dari segi aplikasinya ataupun fasulitasnya.
Kali ini kita akan belajar bagaimana cara menambahkan Smile atau emoticon baru.

1. Pertama, login ke www.cbox.ws dengan account kalian

2. Lalu klik Options

3. Pilih Smilies

4. Pada kolom URL, isi dengan URL gambarmu. Kolom kode, isi kode emoticon. contohnya kode :P

5. Untuk menambah kolom baru untuk menambahkan emoticon, klik New Row

6. Kalau selesai, klik Save

7. Jangan Lupa untuk cek C box di blog

Untuk pertanyaan silahkan Komen dibawah ini

Membuat Navbar Transparan

Apakah Navbar terlihat menggangu keindahan pada blog anda, jika ya, terdapat solusi yang tepat untuk menghilangkan navbar tapi bukan menghilangkan melainkan membuat Transparan, seakan tidak terlihat.
Ketika Pointer tidak mengarahkan ke Navbar, Navbar seakan tidak terlihat, lalu ketika kita arahkan pointer ke bagian navbar, navbar akan muncul kembali.

Caranya gampang dan simple
1. Login Ke Blogger lalu Layout
2. Masuk ke menu Edit HTML
3. Cari kode ]]></b:skin>
4. Simpan kode dibawah ini diatas kode ]]></b:skin>

#navbar-iframe{opacity:0.2;filter:alpha(Opacity=0)}

#navbar-iframe:hover{opacity:0.5;filter:alpha(Opacity=100, FinishedOpacity=50)}

5. Save template (Simpan Template)

Mempercepat Loading Blog dengan Compress HTML

Blog adalah salah satu sarana tempat untuk menuliskan sesuatu yang ada dipikiran kita, lewat blog kita bisa mendapatkan teman, pekerjaan, atau sekedar hobby.

Nah didalam Itilah blogging ada yang di sebut Blogwalking, itu adalah suatu kegiatan kita untuk memasuki blog atau web yang lain, sambil meninggalkan jejak, seperti komen yang di sertau link....Nah kendala pada BW (blogWalking) biasanya terdapat ketika membuka Blog, Halaman Blog yang lama tampilnya mengakibatkan visitor atau pengunjung Blog, malah Ngacirr dan menutup blog tersebut, hal itu dikarenakan biasanya karena ada Widget atau sesuatu yang memberatkan (bukan tabung gas) hehe melainkan komponen komponen dari blog tersebut, untuk mengatasinya kita dapat Mengcompress kode HTML kita..

Step by Stepnya :

1. Kunjungi situs www.textfixer.com/,
2. Lihat bagian bawah halaman web,
3. disana terdapat kotak kosong untuk memasukan semua kode HTML kita.
4. Copy dan paste kode HTML yang terdapat pada EDIT HTML
5. setelah kode HTML di paste di kotak. kalian klik box "don't compress HTML Head" lalu Klik " COMPRESS HTML"
6. Hasil Compress akan mucul di kotak baru bagian bawah. Copy dan paste kembali ke blog kalian.
7. selamat mencoba dan semoga berhasil.

Sebelum mencoba, Download dulu template anda atau memback up template anda...silahkan follow jika kurang jelas

Cara membuat Teks Berjalan yang Bervariasi

Teks berjalan atau disebut MARQUEE, Marquee ini membuat teks dapat bergerak atau berjalan. Marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya karena menarik untuk di lihat ,dan dapat menghemat tempat pada halaman blog, seperti pemasangan Link di sidebar.

langsung aja sob.
Kita buat dari Kiri ke Kanan dulu

<MARQUEE align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate">

Sekedar Contoh

</MARQUEE>


Nah untuk Direction bisa kalin ganti, contoh di atas adalah contoh untuk kiri ke kanan, kalo mau di rubah jadi kanan ke kiri, tinggal ubah LEFT jadi RIGHT, SCROLL AMOUNT= cepatnya teks berjalan




Sekedar Contoh



Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.

Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">

silahkan arahkan ke arah sisi

</marquee>

Hasil = contoh



silahkan arahkan ke arah sisi




nah itu yang saya dapat sampaikan, kalian bisa membuat variasi kalian sendiri, seperti menambahkan background pada text, atau menambahkan link

Cara menambah Kolom Chat seperti FB (live Chat)

Halo Sobat Blogger (salamnya kaya gini terus) hehehe
Biasanya di Web atau blog sering ada Kolom chat atau kolom search dan lain lain.. Sepeti Gambar Di samping....kerenkan? tapi blog saya gak dipasang soalnya, saya ngerasa blog saya Agak lelet bukanya, takutnya kalo tambah Widget itu makin lelet......

Kalo ingin dapet Gadgetnya gampang ko tinggal daftar Di WIBYIA aja, cara daftarnya gampang ko simpel, udah daftar secara bertahap kita akan dibawa ke halaman Desainnya, pilih warna dan Apa saja yang akan kita tampilkan Contohnya: FB Chat, Twitter, Searh, and user online... gampangkan, daftar aja langsung ke situsnya....WIBIYA

Kalo gak paham komen aja ya......

Cara Membuat Read More yang Sangat Mudah

Halo sobat blogger, kali ini saya berikan tips blogging aja deh, tau Readmorekan? biasanya sering ada di postingan web, atau profil. tapi untuk Pro Blogger pasti udah ga aneh sama yang satu ini, iyalah Readmorekan udah ada daridulu, tapi kali ini saya hanya ingin memberikan tips untuk teman teman blogger yang masih Pemula ....

Fungsi Readmore sendiri adalah, untuk mempersingkat Postingan, untuk melihat keseluruhan diperlukan membuka link Postingan tersebut.....lumayankan nambah page view, heheh....nah langusng ajadeh.
Readmore sekarang simple banget, karena udah di support langsung di blog, beda dengan dulu yang harus utak atik CSSnya....

Untuk menambahkan readmore : tulis dulu postingan yang ingin ditampilkan, nah di potingan tersebut sisipkan <!-- more --> pada postingan kita, Contoh Bla bla bla <!-- more --> blo blo blo.....
biasanya menjadi Bla bla bla......baca selengkapnya (link). oh iya untuk menuliskan kode tersebut Harus ada pada keadaan EDIT HTML bukan TULIS ataupun WRITE

Jikalau masih ada pertanyaan atau kurang di mengerti silahkan beri komentar

Cara Merubah Pavicon

Nah sekarang saya akan tentang menjelaskan tentang Pavicon (itu udah ada dijudul postnya) hehe....sebelumnya sedikit penjelasan tentang Pavicon, Pavicon adalah Icon (biasanya gambar) yang terdapat pada address bar, contohnya blog saya ini menggunakan Pavicon naruto lari lari, lalu Facebook dengan Huruf Fnya....
Nah jika ingin mengubah Pavicon mudah ko, caranya sebagai berikut :

1. Carilah gambar yang berukuran 16 x 16 dan pastinya berbetuk file ICO tapi JPG juga bisa..(bisa dibuat di web desain ICO (cari di google aja)
2. Kalo udah dapat, upload ke situs penyimpanan foto seperti GOOGLE PAGES, PHOTO BUCKET, danTINYPIC
3. Setelah Upload, COPY kode Gambar ke dalam blog.......Log in, tata letak lalu Edit HTML
Contoh kode :<link href='http://Sidiq.googlepages.com/lieur sangat.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
4 COPAS kode yang didapat dan simpan di bawah <head>
5, lalu simpan....


http://Sidiq.googlepages.com/lieur sangat.ico,
Kode diatas adalah alamat gambar / Icon anda
Nah sekian Tipsnya, mohon maaf jika ada kesalahan, jika terjadi kegagalan Tolong beritahu saya, karena saya sendiri sedikit lupa dengan cara merubah pavicon ini

Uang dari Ask2link paid review

Nah saya cuma mau share aja, saya dapat alternatif lain untuk mendapatkan uang di internet, dan sayapun baru daftar di situs Ask2link. cara bermainnya cukup mudah ko.
1. Punya Paypal
2. Mendaftar Ask2link
3. Masukan blog kita ketika daftar
4. lalu Masukan Kode di Ask2link ke blog kita
5. lalu ajak teman atau blog lain jadi refferal kita, dan memasang blog mereka lewat blog kita..

Untuk pendapatan bisa mencapai $10 sebulan, lumayankan buat jajan....

Untuk daftar tolong lewat banner atau link dibawah ini, ataupun lewat Link yg ada di sidebar kiri (paling atas) ataupun atas, sekalian beramal :)
Untuk info lebih lanjut bisa cari di google, ataupun bisa ikut Komentar di blog saya ini

Cara Membuat Shoutmix Menjadi Tersembunyi

Berbagai cari dilakukan untuk menghias blog kita agar semenarik mungkin, contohnya dengan menambahkan SHOUTMIX (Buku tamu), akan tetapi bagaimana cara membuat shoutmix tersebut menjadi lebih menarik?....kita dapat membuatnya menjadi tersembunyi.
Langsung aja ke caranya:

1. Masuk ke account Blogger kamu, pilih Layout; kemudian Page Elements;
2. Klik "Add a Gadget" (yang mana aja oke), kemudian pilih "HTML/JavaScript",
3. Copy-paste COPAS kode di bawah ini:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLx79rfEuoAQYw3Aj5qiKyspoxfxFG6mOXpJSOm41C-Np1pps0Ja3EBgIK_Ijnvyxy-bTO4fsRAexJ0rY1gXIdracAhNW5Xb7OjQ40ffEZU-Ux1RrxKpnYfrrMfyL09m1ejOgyRAmpAXV3/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<!-- Ganti ini dengan kode buku tamu kamu -->
<br/>
Mau seperti ini?<br />
Click disini--->
<a href="http://sidiq-good-boy.blogspot.com/2010/08/cara-membuat-shoutmix-menjadi.html">
Blog Tutorials


</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Pada kode di atas, cari kode <!-- Ganti ini dengan kode buku tamu kamu --> dan ganti kode tersebut dengan kode buku tamu yang kamu punya, buku tamu dapat dicari lewat google dengan keyword CBOX, untuk ukuran dan posisi kalian dapat kembangkan sendiri.

Silahkan komen apabila mendapat kesulitan ataupun kesalahan

Cara Posting Kode HTML

Ketika kita ingin membuat potingan tips atau cara ngeblog seperti menambah widget, ngedit Navbar dll, diperlukan mencamtumkan kode html, akan tetapi kode HTML tidak dapat langsung dapat diposting, harus ada cara tertentu untuk memposting kode tersebut.

Berikut adalah cara untuk mengubah kode HTML menjadi kode yang dapat dibaca pada artikel:

1. Buka http://centricle.com/tools/html-entities/

2. Masukkan kode HTML yang mau ditampilkan pada artikel dalam kotak
contohnya <div id='outer-wrapper'>

lalu disana akan ada tulisan ENCODE klik aja langsung, setelah itu kode tersebut akan berubah contoh: <div id='outer-wrapper'>

3. Gunakan kode yang baru tersebut, untuk ditampilkan ke postingan.

Membuat Daftar isi blog otomatis

Membuat membuat daftar isi blog secara otomatis disini yang maksud adalah, jika kita melakukan postingan baru maka secara otomatis judul blog yang baru akan langsung masuk ke dalam daftar isi tanpa harus melakukan edit pada layout blog kita.
Dengan trik ini, kita hanya membutuhkan sedikit tempat di halaman blog kita, karena jika pengunjung ingin melihat daftar isi tersebut, maka akan terbuka jendela baru. Sehingga di halaman blog kita cukup dicantumkan dua kata yaitu : Daftar isi, dan bisa kita letakkan di tempat yang kita inginkan.

Caranya seperti langkah-langah berikut ini :

LANGKAH LANGKAHNYA:
1. Log in ke blogger
2. Klik Layout di dashboard menu
3. Klik Edit HTML
4. Beri Centang pada Expand Widget Templates
5. Cari kode dibawah ini.

• <b:include data='post' name='post'/&gt

6. Ganti Kode diatas dengan kode dibawah ini

<b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType != "item"'><a expr:href='data:post.url'><div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;"><data:post.title/></div></a><b:else/><b:include data='post' name='post'/></b:if><b:else/><b:include data='post' name='post'/></b:if>

Kemudian ikuti langkah langkah berikut ini :

1. Masuk ke akun blogger anda
2. Pilih menu tata letak / Layout

3. Pilih tambah gatget

4. Pilih html/javascript

5. COPAS kode di bawah ini :

<a href="http://sidiq-good-boy.blogspot.com/search?max-results=200" target="_blank"><span style="font-weight:bold;">DAFTAR ISI</span>&raquo;</a>

sidiq-good-boy.blogspot.com Ganti dengan alamat blog anda

results=200 ganti dengan jumlah yang anda inginkan, angka 200 menunjukkan jumlah judul yang akan di tampilkan.

DAFTAR ISI, Nama Link yang akan ditampilkan bisa diubah.

Cara Membuat Footer Multi kolom

Kali ini membahas tentang design template, multi kolom, pasti sudah banyak yang tau apa itu multi kolom, tapi saya yakin masih sedikit yang mengetahui cara membuatnya. Kali ini kita akan membuat muliti kolom tepat dibawah halaman blog kita atau biasanya letaknya dibawah kolom postingan, ambil contohnya saja yang ada di blog ini dimana saya membuat 3 kolom pada bagian bawah template. Banyak variasi yang bisa sobat buat untuk mempercantik kolom – kolom ini.

Dan disini saya akan mencoba tambahkan kode UL LI pada kolom, sehingga jika sobat menggunakan kode ini, maka akan secara otomatis membentuk tulisan yang disertai garis putus – putus dibawah tulisan dan icon cantik yang mengawali tulisan.

Kali ini saya akan gunakan template yang lebarnya 1000px sehingga saya menggunakan lebar kolom 990px. Baiklah, langsung praktek aja ya biar tau.

1. Seperti biasa login dulu ke blogger.

2. Klik Tata Letak.

3. Pilih Edit HTML dan centang Expand Template Widget.

4. Tambahkan kode berikut tepat diatas kode ]]> :

   #bottom {
   width: 990px;
   position: relative;
   clear:both;
   margin: 0 auto;
   color:#000;
   float: center;
   background:transparent;
   padding: 15px 0 15px 0; }

   #bottom h2 {
   padding-left: 5px;
   margin: 0 0 10px 0;
   background:#0B3B0B;
   color:#fff;
   font-size: 18px;
   letter-spacing: 1px;
   border-bottom: 1px solid #000; }

   #bottom ul{padding:0; margin:0; color:#333}

   #bottom ul li{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKh-LPiudQ4lcdSOtcNaecKbB7wZG1dXnUhoRbG1EoE-jyZ0kCfcah3rfn1DUQ7F1YDbX5sqZwFyDFW2AzB3w40KNf0OaretzMpf5w98E9ngxVdSv6aR555iwG2xKoIWHOqNmaa6eZNY3E/s320/d3.gif') no-repeat; list-style-type:none; margin:0 0 10px; padding:0 0 10px 20px; border-bottom:1px dashed #CCCCCC; }

   #bottom li{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKh-LPiudQ4lcdSOtcNaecKbB7wZG1dXnUhoRbG1EoE-jyZ0kCfcah3rfn1DUQ7F1YDbX5sqZwFyDFW2AzB3w40KNf0OaretzMpf5w98E9ngxVdSv6aR555iwG2xKoIWHOqNmaa6eZNY3E/s320/d3.gif') no-repeat; list-style-type: none; margin: 0 0 10px; padding-left: 20px; }

   
   #bottom ul li a:hover {
   background: #B1ACB1;}

   #left-bottom { /* kolom kiri */
   background:#ffffff; width: 300px;
   float: left;
   margin-left:10px;
   padding:5px; /* Jarak antara text dengan garis pinggir */
   Border-top: 2px solid #1B2A0A; /* warna garis pinggir atas */
   Border-bottom: 2px solid #1B2A0A; /* warna garis pinggir bawah */
   Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
   Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
   Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
   -moz-border-radius-bottomleft:5px;
   -moz-border-radius-bottomright:5px;
   -moz-border-radius-topleft:5px;
   -moz-border-radius-topright:5px; }

   #center-bottom { /* kolom tengah */
   background:#ffffff; width: 300px;
   float: left;
   margin-left:10px;
   padding:5px; /* Jarak antara text dengan garis pinggir */
   Border-top: 2px solid #1B2A0A; /* warna garis pinggir atas */
   Border-bottom: 2px solid #1B2A0A; /* warna garis pinggir bawah */
   Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
   Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
   Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
   -moz-border-radius-bottomleft:5px;
   -moz-border-radius-bottomright:5px;
   -moz-border-radius-topleft:5px;
   -moz-border-radius-topright:5px; }

   #right-bottom { /* kolom kanan */
   background:#ffffff; width: 300px;
   float: left;
   margin: 0 5px 0 10px;
   padding:5px; /* Jarak antara text dengan garis pinggir */
   Border-top: 2px solid #1B2A0A; /* warna garis pinggir atas */
   Border-bottom: 2px solid #1B2A0A; /* warna garis pinggir bawah */
   Border-left: 2px solid #1B2A0A; /* warna garis pinggir kiri */
   Border-right: 2px solid #1B2A0A; /* warna garis pinggir kanan */
   Margin-bottom: 30px; /* jarak antara kolom dengan garis bawah template */
   -moz-border-radius-bottomleft:5px;
   -moz-border-radius-bottomright:5px;
   -moz-border-radius-topleft:5px;
   -moz-border-radius-topright:5px}

5. Sekarang tuju bagian body atau bagian bawah template, lalu cari kode yang mirip dengan kode berikut :
   
   
   

6. Copas kode berikut ini tepat sebelum kode diatas :

7. Kemudian Simpan Template sobat.

Sekarang sobat bisa lihat hasilnya, jika tidak sesuai, silahkan sobat ganti sesuai keinginan sobat.

Keterangan :

• #bottom { width: 990px
  --> lebar kolom keseluruhan, sesuaikan dengan lebar template sobat.

• background:#0B3B0B
  --> latar belakang (background kolom).

• color:#fff
  --> warna tulisan judul

• #left-bottom { /* kolom kiri */ width: 300px
  --> lebar kolom kiri.

• -moz-border-radius-bottomleft:5px;
  -moz-border-radius-bottomright:5px;
  -moz-border-radius-topleft:5px;
  -moz-border-radius-topright:5px;
  --> garis melengkung pada setiap ujung kolom, semakin besar angkanya maka akan semakin lebar garis lengkungnya. Jika sobat enggan membuat kolom melengkung, ganti saja angka 5px dan ganti dengan 0px. Atau hapus semua kode –moz-border-radius tersebut.

• Border-top: 2px solid #1B2A0A
  Border-bottom: 2px solid #1B2A0A
  Border-left: 2px solid #1B2A0A
  Border-right: 2px solid #1B2A0A
  --> untuk ketebalan garis pinggir masing – masing kolom, semakin besar angkanya maka akan semakin tebal garisnya. Jika sobat tidak mau memakai garis pinggir, sobat ganti saja angka 2px dengan 0px. Dan kode #1B2A0A adalah warna border / garis pinggir kolom. Untuk kode warna bisa di lihat disini.

• Sedangkan kode yang berwarna merah adalah icon untuk kode ul li, saya punya beberapa gambar berserta url nya dibawah ini, sesuaikan dengan keinginan sobat. Pilih salah satu, dan copas pada kode yang berwarna merah.