Kamis

Menghiasi Blog Dengan Mini Icon

Bagi sahabat blogger yang ingin menghiasi templatenya dengan tampilan icon-icon mini seperti yang kalian lihat pada blog ini, saya akan mencoba membantu kalian caranya. Untuk menambahkan beberapa icon pada blog, kalian butuh kode css yang sudah saya kategorikan masing-masing di bawah ini. Silahkan copas kode css tersebut tepat di atas kode ]]></b:skin> pada bagian "Edit HTML" template blog kalian dan kemudian simpan.
/* Mini icon Untuk label pada kolom sidebar
-----------------------------------------------
*/
#Label1 ul li {
 background: url(http://img297.imageshack.us/img297/6615/labelal6.png) left no-repeat;
 padding: 0 5px 0 20px;
 line-height:1.6em;
 }
/* Mini icon Untuk label pada kolom Footer
--------------------------------------------------
*/
.post-labels {
 background: url(http://img297.imageshack.us/img297/6615/labelal6.png) left no-repeat; 
 padding-left: 20px;
 font-family: "Times New Roman", Serif; 
 line-height:1.6em; font-size:12px;
 }
/* Mini icon Untuk arsip pada kolom sidebar
--------------------------------------------------
*/
.BlogArchive #ArchiveList ul li.archivedate  {
 border-bottom: 1px solid #EFF0F1;background: url('http://img213.imageshack.us/img213/289/v5bullets.gif') no-repeat 5px 5px;
 margin: 0 2px; 
 padding:0 5px 0 35px; 
 line-height:1.8em;
 }
span.zippy  {display:none;}

/* Mini icon Untuk tanggal terbit postingan
---------------------------------------------------
*/
.date-header {
 background: url(http://img4.imageshack.us/img4/4774/calendarmonthqz7.png) left no-repeat;
 padding:0 0 0 20px;
 }
/* Mini icon Untuk recent posts dan recent comments
---------------------------------------------------
*/
#Feed1 ul li, #Feed2 ul li  {
 border-bottom: 1px solid #EFF0F1;
 background: url('http://img213.imageshack.us/img213/289/v5bullets.gif') no-repeat 5px 5px;
 margin: 0 2px; 
 padding-bottom:2px 5px 2px 25px;
 }
/* Mini icon Untuk comments pada kolom footer
---------------------------------------------------
*/
.comment-link {
  background: url(http://img220.imageshack.us/img220/158/icocommentwfi3.png) left no-repeat; 
  padding-left: 17px;
  font-family: "Times New Roman", Serif; 
  line-height:1.6em; 
  font-size:12px;
  }

/* Mini icon bonus dari duayu
---------------------------------------------------
*/
.fn {
  background: url(http://img504.imageshack.us/img504/1718/userty2.png) left no-repeat; 
  padding-left: 20px;
  font-family: "Times New Roman", Serif; 
  line-height:1.6em; font-size:12px;
  }
.timestamp-link {
  background: url(http://img4.imageshack.us/img4/3465/datelx9.png) left no-repeat; 
  padding-left: 20px;
  font-family: "Times New Roman", Serif; 
  line-height:1.6em; 
  font-size:12px;
  }
Jika kalian ingin mengganti icon-icon tersebut dengan milik kalian sendiri silahkan kalian ganti tulisan yang sudah saya beri warna biru dengan URL icon tempat dimana kalian mengupload icon kalian. Nah selebihnya silahkan kalian otak atik sendiri kode css-nya sesuai dengan selera kalian. Semoga ini sedikit membantu.

Google Mengupdate Pagerank Lagi - Plus Cara Cepat Update Pagerank Google dengan Backlink Relevan

Google Mengupdate Pagerank Lagi. Kelihatannya saya ketinggalan info, tapi masih jauh lebih baik daripada nggak dapat info sama sekali. Belakangan ini Google lagi giat2nya mengupdate pagerank, dan alhamdulillah nggak nyangka blog ini kesenggol juga. Setelah sebelumnya blog ini nggak dapat update-an entah karena apa alasannya, padahal saya cek di Backlinkwatch, backlink yg saya dapatkan lumayan banyak...eh pada gilirannya backlink saya banyak yang hilang, malah kena update-an, alhasil blog ini mendapat PR tambahan. Lalu apa alasannya, kok backlink banyak nggak naik PR-nya tapi backlink dikit malah naik?

Ini nih jawabannya nih, ane pernah dengar para master blog bilang kalau mau cepat update PR tuh, backlink yang didapatkan harus berkualtas/relevan dengan blog kita...ya berkualitas dan relevan. Berkualitas artinya, backlink yang diberikan oleh halaman web atau web dengan PR tinggi, lalu untuk masalah ini saya yakin teman-teman semua sudah pada tahu...untuk mendapatkannya bisa menggunakan cara tukar link/link exchange, jika linkexchange terasa lebih sulit karena keberatan sebagian pihak, maka ada cara alternatif lainnya yaitu MLL (Multi Level Link), kalau yang ini cara paling mudah untuk update pagerank menurut saya, tertarik dengan program MLL, silahkan baca di sini untuk tutorialnya.

Sejauh ini kita lupa akan satu hal yang berhubungan dengan masalah pagerank, saking semangatnya kita nggak keberatan untuk mencari ribuan backlink dalam waktu singkat, namun sayang apa yang kita lakukan sia2 karena Google hanya melirik backlink yang berkualitas/relevan dengan blog kita. Lalu bagaimana cara untuk mendapatkannya? Caaranya gampang, Silahkan kunjungi situs: Webconfs, yaitu situs yang menyediakan tool seo untuk anda. Selain situs ini menyediakan tool seo secara gratis, ternyata hasilnya super ampuh, memang sih modal dengkul tapi hasilnya sudah saya rasakan...teman-teman bisa dengan mudahnya meninggalkan komentar pada situs hasil pencarian dengan tool SEO yang telah disediakan oleh Webconfs.

Itulah yang saya maksud sebelumnya saya dapat backlink banyak, namun sayang ternyata ngggak berkualitas/relevan, tapi setelah menggunakan tool seo tersebut ternyata hasilnya memuaskan, walau jumlah bakclink belum sebanyak dulu. Dengan cara ini anda tak perlu khawatir link anda dicopot, karena link anda akan tampil pada komentar (toh yang punya blog juga senang artikelnya dikomentarin), so stay cool

Cara Memperpendek URL Agar URL Lebih Singkat

Berlangganan Postingan Terbaru Via Email
Hai, sobat. Setelah berlangganan dengan cara mengisi email anda ke dalam kolom berikut, jangan lupa login ke email anda untuk mengaktifkan link konfirmasi. Hal ini dilakukan agar sobat bisa langsung mendapatkan artikel terbaru via email jika ada postingan baru di blog ini. Terima kasih telah berkunjung_

Cara: Membuat Ini



Goo.gl Google URL shortener - Cara Memperpendek URL Agar URL Lebih Singkat. Mungkin sebagian dari kita sudah tidak asing lagi dengan istilah URL Shortener, yaitu layanan untuk mempersingkat URL. Tujuannya? Youpz, jelas tujuannya untuk mempersingkat/memperpendek URL/alamat web maupun blog yang dirasa harus dipersingkat, mungkin dikarekan terlalu panjang atau sukar diingat. Di internet kita bisa mendapatkan layanan tersebut secara cuma-cuma, selain gratis - layanan seperti ini memang benar-benar sudah banyak bermunculan di internet, namun sesuai dengan judul postingan kali ini kita akan membahas tentang layanan Google URL Shortener, Goo.gl


Goo.gl adalah layanan gratis yang telah disediakan oleh mbah google buat mempersingkat URL atau alamat web/blognya agan-agan. Jadi bagi yang suka dengan yang pendek2 alias singkat-singkat, maka tak ada salahnya untuk mencoba layanan yang satu ini.

Cara menggunakan layanan ini cukup mudah, gampang, dan tidak sulit. Silahkan sobat-sobat berkunjung ke situs Google URL shortener, goo.gl
1. Nah, setelah ngeklik link di atas nantikan yang tampil seperti berikut ini
Sekarang silahkan untuk mengisi pada kolom yang ada tulisan merah dengan URL panjang atau URL yang memang dirasa perlu tuk disingkat, lalu kliklah tombol "Shorten".

2. Sekarang, URL goo.gl-nya pasti sudah jadi. Cobalah untuk menengok ke sebelah kanan tombol "shortner", nah...itulah hasilnya. Ini contohnya => goo.gl/uw9z (diklik ya, biar tahu hasilnya) => maka akan mengarah ke alamat blog ini (t4belajarblogger.blogspot)

BERHASIL!!!

Sekarang bagi teman-teman yang ingin mengetahui jumlah klik dari setiap link/URL yang telah dipersingkat. Sejujurnya, ini bagus juga bagi sobat-sobat yang memang ingin tahu jumlah klik link-nya, mungkin untuk keperluan data peningkatan trafik maupun bisnis online agan2 (singkatnya bisa mengetahui statistik jumlah klik link). Caranya gampang sekali:

1. Loginlah ke akun blogger maupun akun Google lainnya (termasuk Gmail), lalu kunjungi situs Google URL shortener, goo.gl

2. Silahkan untuk mempersingkat URL mana saja yang anda inginkan (caranya sama seperti tadi), maka otomatis data-data untuk URL tadi telah tersimpan dalam akun anda. Untuk mengecek statistik jumlah klik link, maka bisa login ke akun Goo.gl anda seperti biasa, gampang kan? Hahai...
Inilah contohnya: nanti teman2 bisa melihat statistik URL yang telah disingkat


Dah, itu aja dulu buat pembahasan Goo.gl-nya. Tapi nih buat sekedar tambahan aja ya, Kumpulan situs-situs yang menyediakan layanan mempersingkat URL agar URL panjang jadi pendek:

1. Pendek.in "Nih kelihatannya asli karya anak bangsa euy!!!", jadi bangga^
2. Tinyurl.com, kalau ini sudah nggak asing lagi...banyak digunakan oleh para iklaners di situs iklan baries graties
3. Lalu Bit.ly, hehe pandek sekali ya
4. Lalu yang ini lebih pendek lagi Is.gd, keliatannya singkatan dari IS GOOD yak? Benarkah ini yang paling pendek? Tunggu dulu...!!!
5. Ini nih yang lebih pendek lagi J.mp, waduh-waduh bisa-bisa aja ya...pendek skali!!!
6. Adf.ly, kalau yang ini cocok buat teman-teman yang punya hobi mengumpulkan receh dollar dari internet, hehe...(seperti saya)

Selasa

Cara Memasang Google Talk

apa itu google talk ? google talk adalah salah satu fasilitas chat milik google . yang fungsinya adalah untuk berkomunikasi/chatting untuk para pengguna akun google. Sama seperti yahoo messenger, google talk juga bisa dipasang diblog yang tujuanya adalah untuk berkomunikasi antara pengunjung blog dan pemilik blog yang menggunakan google talk sebagai sarana komunikasi.

Untuk memasang Google talk bi blog cukup mudah , yang sobat perlukan hanyalah memiliki akun google. Nahh… akun google pasti sobat blogger sudah punya kan ? untuk memasang google talk langsung aja sobat ikuti langkah-langkah cara pasang google talk di bawah ini.

1.Login ke blogger dengan ID Sobat.

2.Klik Tata Letak.

3.Klik Tambah Gadget.

4.Kemudian pilih HTML/javascript.

5.Selanjutnya copy dan paste kode berikut di dalamnya.

<iframe width="234" frameborder="0" src="http://talkgadget.google.com/talkgadget/client?fid=gtalk0&relay=http%3A%2F%2Fwww.google.com%2Fig%2Fifpc_relay" height="350">
</iframe><p style="margin:-8px 0"><br /><center>
<a style="text-decoration:none;font-size:60%;" href="http://kolom-tutorial.blogspot.com/2008/01/pasang-google-talk-di-blog.html">Add to your blog</a></center></p>

6.Klik SIMPAN

7.Selesai...selanjutnya silakan sobat tinggal lihat hasilnya..

Cara Mengganti Template Blogger

Desain Template dari blogspot terkadang ga bikin kamu puas dengan tampilanya .ya mungkin cara satu-satunya supaya tampilan blog kamu jadi menarik kamu harus ganti template dari situs-situs yang menyediakan template gratis.kalo kamu mau diblog saya juga ada beberapa template yang bisa didownload,pengen tau CARA GANTI TEMPLATE BLOGbdari pihak ketiga ? tenang aja karena saya akan menjelaskan bagaimana CARA GANTI TEMPLATE BLOG

Sekarang ini pengguna blog udah banyak banget ,jadi ga sedikit yang tampilan blognya sama.dan tampilan blog juga akan menpengaruhi daya tarik tersendiri kepada pengunjung blog kita.Tetapi buat kamu yang menjalankan teknik-teknik SEO tidak dianjurkan untuk sering bergabti template, Silakan ikuti tutorial Cara Ganti Template Blog berikut ini :

CARA GANTI TEMPLATE BLOG
1.Cari template dengan menggunakan mesin pencari dengan kata kunci "free blogspot template" atau bisa juga download template diblog saya ini.

CARA GANTI TEMPLATE BLOG
2.Setelah kamu download template yang kamu inginkan ekstrak file template tersebut,caranya klik kanan file template tersebut kemudian klik "ekstrak file".

CARA GANTI TEMPLATE BLOG
3.Setelah template berhasil di ekstrak file akan berubah menjadi sebuah folder,Buka folder file template tersebut nanti didalamnya ada file XML,copy File tersebut lalu paste di "my document" supaya ga ribet nanti mengunggah template nya.

CARA GANTI TEMPLATE BLOG
4.Selanjutnya LOGIN ke blogger

CARA GANTI TEMPLATE BLOG
5.Klik "Tata Letak" kemudian Klik "Edit HTML"

CARA GANTI TEMPLATE BLOG
6.kLIK "Browse" disamping kata "Upload sebuah template dari sebuah file pada hard drive Anda" lalu pilih file XML template yang tadi dipaste di my document.setelah itu klik "Unggah"

CARA GANTI TEMPLATE BLOG
7.jika ada pernyataan Klik "simpan dan lanjutkan"

CARA GANTI TEMPLATE BLOG
8.Selesai... Tinggal kamu lihat hasilnya.

Cara Menjual Blog

Blog Dijual ? Mungkin sekarang ini jual beli blog bukan hal yang asing lagi dalam dunia perbloggeran. Jarena jual beli blog juga sebagai ajang bisnis untuk para blogger. Blog gratisan bisa jadi berharga karena beberapa hal yaitu pagerank,trafik,dan Tekhnik SEO dari sebuah blog.Buat kamu yang mau bisnis jual beli blog mungkin ada banyak cara untuk melakukan bisnis ini. Buat yang mau Jual Blog dan Cara Jual Blognya silakan baca sfesifikasi blog yang bisa dijual dan bernilai tinggi berikut ini:
Pagerank
Blog gratisan akan bernilai jika blog tersebut memiliki pagerank yang lumaya tinggi ,Bisa dikatakan pageranknya di atas 2, karena calon pembeli sangat mempertimbangkan blog yang ingin dibelinya dengan pagerank.karena calon pembeli blog juga biasanya membeli blog untuk tujuan bisnis .
Trafik
Jumlah banyaknya pengunjung perhari dalam sebuah blog juga berpengaruh terhadap harga dan nilai jual sebuah blog. dan biasanya calon pembeli ingin membeli ingin membeli blog yang bertrafik lumayan dan cukup lumayan,dan biasanya blog yang dicari para calon pembeli berpengunjung di atas 100 orang per hari.
Tekhnik SEO
Sentuhan SEO dalam sebuah blog juga hampir sangat berpengaruh terhadap nilai jual sebuah blog,Misalnya saja kamu mempunyai blog yang ingin dijual.dan blog kamu tersebut ada dalam urutan depan mesin pencari dengan kata kunci yang banyak dicari orang, tentu saja blog kamu akan bernilai lebih tinggi dengan sentuhan SEO seperti ini.
Nama Domain
Nama domain juga sedikit berpengaruh terhadap harga jual sebuah blog, biasanya calon pembeli jarang sekali membeli sebuah blog dengan nama domain pemiliknya. Misalnya saja blog dengan domain www.azisgagap.blogspot.com ,nama domain seperti inilah yang jarang dicari oleh calon pembeli.
Popularitas
Popularitas sebuah blog juga berpengaruh terhadap sebuah blog yang ingin dijual,jadi semakin populer blog kamu semakin tinggi pula harga blog kamu.

Cara Cek Pagerank

Bagi anda yang belum tau apa itu pagerank .Pagerank adalah semacam alat pengukur bagi google dan pengunjung website/blog anda akan seberapa ‘populernya’ blog anda ini.

Semakin tinggi pagerank web/blog anda, maka akan semakin senang robot dari search engine datang ‘menyambangi’ blog anda.

Tinggi Rendahnya Pagerank ADalah dari seberapa banyak situs yang memasang link di blog anda . Semakin banyak situs yang mengarahkan link kesitus anda semakin tinggi pula pagerank blog anda .

Cara Mengukur seberapa tingginya pagerank Blog anda Bisa Di Cek di sini
Selamat Mencoba ..hehehehe.

Cara Menghilangakan Link Postingan Lama

Udah 2 Hari nich ga posting artikel .hehehe setelah lama ga posting artikel saya mau memberi sedikit tips tentang Cara Menghilangkan Link Posting Lama  pada template blogspot "versi baru".Buat sebagian orang fasilitas yang telah disediakan oleh blogger ini yang tujuanya untuk mempermudah pengunjung untuk menemukan artikel yang sudah tidak tampil di halaman depan blog ini,ingin dihilangkan  .biasanya fasilitas link tersebut adalah "Newer Posts” atau “Posting baru”, “Halaman Muka” atau “Home”, serta “Older Posts” atau “Posting Lama”. cara menghilangkanya pun cukup mudah,silakan ikuti tutorial Cara Menghilangkan Link Posting Lama berikut ini untuk menghilangkan link tersebut.

1.Login ke Blogger

2.Klik Tab menu Tata Letak kemudian klik Edit HTML

3.Download template kamu dulu sebagai Backup atau cadangan jika terjadi kesalahan dengan meng-klik Download Template Lengkap

4.Selanjutnya cari kode yang mirip dengan kode berikut ini>

#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float:right;
padding-right:5px;
}
#blog-pager {
text-align: center;
}

5.Kalo udah ketemu kodenya,Hapus kode tersebut lalu ganti dengan kode berikut ini .

#blog-pager-newer-link {
display:none;
}
#blog-pager-older-link {
display:none;
}
#blog-pager {
display:none;
}

6.Kalu udah jangan lupa klik SIMPAN TEMPLATE.

7.Selesai...

Minggu

cara pasang favicon versi scroll text

halo sobat blogger di manapun anda berada. Percantik/perganteng blog anda dengan trik blogger dari saya ini. Trik ini ialah favicon, tapi favicon ini lain daripada yg lain, favicon ini namanya favicon versi scroll text.
 
1. Buka http://www.freefavicons.info
2. Klik browse untuk mengambil gambar dari komputer Anda
3. Kolom di bawahnya isi dengan text yang akan muncul



4. Kalau sudah klik Create Favicon
5. Kemudian klik Get It Now untuk menyimpan hasilnya di komputer Anda
6. File tersimpan di komputer Anda

kemudian daripada itu ..

Extract File
Akan ada beberapa file yang terdownload, extract hasil download.
- Buka File Rar Anda, akan ada banyak file
- Biasanya file yang kita butuhkan akan bernama Animated_favicon.gif, klik file tersebut
- Klik Extract To pada toolbar WinRAR
- Pilih tempatnya lalu klik OK

ImageShack
- Buka http://imageshack.us
- Klik Browse, cari file (animated_favicon.gif) yang tadi telah Anda extract
- Klik Start Upload (kolom lain abaikan saja, tak perlu diisi
- Nah, muncul URL file Anda yang bisa Anda gunakan untuk favicon Anda

Penting!!! Ada Direct link to image dan short link to image
Pilih saja yang direct link to image, yang kita gunakan adalah URL di kolom sebelah kiri tulisan Direct link to image.

Pasang Favicon
Untuk memasangnya sudah pernah saya bahas, baca saja cara ganti icon blog(favicon)
Di artikel tersebut ada script untuk memasang favicon, ganti yang berwarna merah dengan URL yang baru saja Anda dapat.

Semoga bermanfaat........

Cara Pasang Image pada judul Artikel

Image. Kalau berbicara masalah image/gambar, memang sangat seru dan menyenangkan. Dengan adanya image maka blog kita akan tampil lebih menarik untuk di lihat,walaupun tentusaja apabila berlebihan akan berakibat buruk yaitu blog kita akan susah untuk di aksesoleh para pengunjung karena beban kapasitas data yang berlebihan dan bila itu terjadi maka para pengunjung akan menjadi malas untuk berkunjung. Memang segala sesuatu kalau berlebihan akan berakibat tidak baik, jalan keluarnya ya wajar-wajar saja Re....

Ok sobat, biar ga terlalu banyak berimpropisasi, langsung saja pada topik bahasan. topik yang akan kita bicarakan saat ini yaitu memasang image/gambar pada judul artikel. Artikel ini saya buat bagi yang senang akan pernak-pernik gambar,bagi yang tidak senang, ya sebagai pengetahuan saja lah.

Untuk memasang sebuah image pada judul artikel, ada beberapa tahapan yang harus dilakukan, antara lain :


  • Langkah pertama



  • Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di inginkan. jika sobat mahir dalam program grafik & design semisal adobe photoshop ataupun coreldraw, ya tinggal buat saja yang nyentrik. Tapi kalau tidak bisa atau males bisa gunakan layanan di internet, ini sudah saya bahas pada artikel terdahulu, silahkan klik disini untuk membacanya kembali.


  • Langkah kedua



  • langkah kedua yaitu sobat harus upload image atau logo tersebut, bisa ke blogger ataupun ke hosting lain. Misalkan biasanya saya menyimpan setiap image yang saya punya di www.Photobucket.com untuk masalah upload gambarpun sudah saya bahas pada postingan yang lalu, kalau mau baca-baca lagi silahkan klik di sini.


  • Langkah ketiga



  • langkah ketiga adalah mengatur ukuran dari image tersebut agar sesuai dengan yang di inginkan, karena jika terlalu besar atau terlalu kecil maka tentu saja akan tidak enak dipandang mata. Misalkan saya mempunyai URL image seperti ini :

    http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif

    Sebagaimana kita ketahui untuk membuat sebuah image bisa online maka kita tambahkan kode :

    <img src="URL image">

    Sehingga kodenya akan jadi seperti ini :

    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif">

    dan yang akan tampil adalah image dengan ukuran yang sebenarnya. contoh image tersebut adalah seperti ini :







    tentu saja bila kita memajang image sesuai ukuran image yang aslinya, ini menjadi kurang enak di lihat jika di padukan dengan tulisan judul posting. Untuk mengakalinya kita bisa menambahkan beberapa atribut kedalam kode image tersebut, antara lain atribut width="..." untuk lebar, height="..." untuk tinggi, dan border="..." untuk bingkai, dan dalam hal ini yang dipakai adalah border dengan nilai 0 (nol) agar terhindar dari setting template yang memakai nilai border. Saya ambil contoh kode image tadi jadi seperti ini :

    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">

    sehingga image yang tadi akan berubah jadi seperti ini :







    Bagaimana sudah jelaskan cara merubah ukuran gambar? jika sudah, kita beranjak ke langkah selanjutnya.


  • Langkah keempat



  • langkah keempat yaitu memasukan kode gambar yang sudah kita modifikasi tadi ke dalam kode template blog milik kita. Silahkan ikuti langkah-langkah berikut ini :

    Untuk yang memakai template klasik :

    1. Sign in ke blogger dengan id sobat
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy 'n paste seluruh kode HTML ke dalam notepad, ini dimaksudkan untuk mengurangi resiko apabila terjadi kesalahan pada saat kita melakukan editting kode template
    5. Cari kode berikut pada kode HTML sobat :
    6. <$BlogItemTitle$> cara yang mudah untuk menemukan kode tersebut adalah : klik menu Edit yang berada bar menu browser lalu klik Find kemudian tuliskan kode diatas tadi lalu klik tombol Find, maka secara otomatis kita akan langsung di bawa ke tulisan kode tadi. Nah kode <$BlogItemTitle$> adalah merupakan kode untuk menampilkan judul postingan, maka kita harus menyimpan kode image yang kita miliki di dekatnya, bisa sebelum atau sesudahnya tergantung dari keinginan kita. Tentunya bila di simpan sebelum kode judul posting maka image pun akan muncul sebelum judul posting, jika di simpan sesudah kode judul posting sudah barang tentu image pun akan muncul sesudah tulisan judul. Saya ambil contoh kode image di simpan sebelum tulisan judul : <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">&nbsp;&nbsp;<$BlogItemTitle$> pemasangn kode &nbsp;&nbsp; adalah untuk memberi jarak spasi antara image dengan tulisan judul, sebab jika tidak menambahkan kode &nbsp; maka image dengan tulisan akan bersatu walaupun kode image dengan kode judul di tulis ada jarak spasinya.
    7. Klik tombol Preview untuk melihat perubahan yang dilakukan
    8. Jika sudah OK, klik tombol Save Settings
    9. Selesai


    Maka setiap sobat posting artikel, secara otomatis image yang kita pasang tadi akan muncul tanpa harus di tuliskan kembali. Untuk contoh nyata silahkan lihat judul postingan ini.



    Untuk yang memakai templat baru :

    Catatan awal bagi yang memakai template baru yaitu setiap tag yang kita pakai harus selalu di tutup tidak seperti template klasik, contoh kode gambar yang tadi kita pakai adalah :

    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0">

    kode image tersebut tag nya harus ditutup dengan tag penutup :

    </img>

    Sehingga kode image jadi bertambah menjadi :

    <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img>


    Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan ikuti langkah berikut :

    1. Sign in ke blogger dengan id sobat
    2. Klik menu Layout
    3. Klik menu Edit HTML
    4. Klik tulisan Download Full Template
    5. Silahkan save dulu template sobat, ini untuk back up data apabila terjadi kesalahan editting
    6. Beri tanda centang pada kotak disamping tulisan Expand Widget Templates. Sekali lagi jangan lupa beri tanda centang, sebab kalau tidak, nanti tidak akan sesuai dengan langkah selanjutnya
    7. Tunggu beberapa saat sampai proses selesai
    8. Cari kode berikut pada template sobat :
    9. <a expr:href='data:post.url'><data:post.title/></a> <b:else/>
    10. Sisipkan kode gambar yang kita miliki diantara kode :
    11. <a expr:href='data:post.url'> dan kode <data:post.title/></a> <b:else/> Sehingga bila di satukan kodenya menjadi : <a expr:href='data:post.url'> <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img> &nbsp;&nbsp;<data:post.title/></a> <b:else/>
    12. Klik tombol PREVIEW untuk melihat perubahan
    13. bila sudah OK, klik tombol SAVE TEMPLATE
    14. Selesai


    http://kolom-tutorial.blogspot.com/2007/05/pasang-image-pada-judul-artikel.html

    Cara Membuat Banner Animasi

    Agar blog kita tampil dinamis dan lebih atraktif, salah satu caranya adalah dengan memajang banner animasi.karena dengan banner animasi, mata dari pengunjung akan langsung tertuju kepada banner tersebut, terutama apabila anda seorang pebisnis, banner animasi akan lebih efektif untuk iklan yang kita pasang di banding dengan banner biasa. Cara membuat banner animasi sangatlah mudah, mau yang gratisan ada, mau yang bayar juga ada.Tapi tentunya ada kelebihan dan kekurangannya.

    bagi anda yang berminat dengan banner animasi gratis, anda bisa kunjungi http://www.addesigner.com Silahkan daftar (gratis), Jika sudah di terima anda tinggal memilih banner yang di sediakan, trus ya tinggal di masukin ke blog, mau di sidebar atau di dalam postingan tentu bisa. Untuk cara pemasangan silahkan anda baca postingan terdahulu bagaimana cara memasukan kode HTML kedalam blog.

    Contoh banner animasi :




    selamat mencoba. 




    http://kolom-tutorial.blogspot.com/

    Sabtu

    Free Template Blog

    Blog adalah salah satu media yang paling di minati di internet dan blogger adalah salah satu blog terbesar dan paling banyak dipakai. Tetapi sayang karena sangat banyaknya pemakai dan sedikitnya template yang di sediakan memaksa kita untuk berusaha sedikit untuk memodifikasinya supaya terlihat berbeda dari pada blog lainnya. Dan untuk alasan profesionalitas kita membutuhkan tampilan yang elegan dan tidak sembarangan. Berikut adalah tempat yang bisa anda kunjungi untuk merubah tampilan blog anda:

    1. btemplates.com
    Terdapat sangat banyak template untuk blog anda siap pakai untuk memperindah tampilan website anda. klik disini untuk mendapatkan

    2. blogspottemplates.blogspot.com

    di blog ini anda akan menjumpai sejumlah template dengan layout yang sama hanya backgroundnya saja yang dirubah. Namun jumlah template yang diberikan lumayan jumlahnya cukup untuk menambah koleksi template anda.
    klik disini untuk mendapatkan

    3. http://www.blogcrowds.com/resources/blogger_template.php

    Template yang diberikan cukup menarik dengan beragam layout yang pasti anda akan suka, jumlahnyapun cukup banyak. Jadi silahkan ambil dan percantik blog anda dengan template yang telah mereka sediakan.
    klik disini untuk mendapatkan

    4. http://www.geckoandfly.com/blogger-templates-beta/

    Walau jumlahnya sedikit, namun template yang mereka berikan cukup menarik dan layak anda coba. Tampilan yang simple membuat kita dapat dengan mudah memodifikasi tampilanya.
    klik disini untuk mendapatkan

    5. http://www.bloggertemplates.org/

    sesuai dengan namanya mereka memang membuat website ini untuk blogger template karena isi website mereka hanya Cuma ada template. Templatenya juga bagus dan kelihatan profesional.
    klik disini untuk mendapatkan

    Mengetahui Harga Blog

    Seberapa besar hasil kerja keras Anda selama ini dalam membuat blog dihargai. Sekarang, Anda dapat mencoba layanan internet yang dapat memperkirakan harga blog Anda. Walaupun belum dapat dijadikan tolak ukur, namun minimal dengan mengetahuinya, hal ini dapat memotivasi Anda untuk lebih meningkatkan lagi. Jika masih nol, jangan berkecil hati, tetaplah untuk membuat blog dan tingkatkan lagi performance blog Anda.
    Untuk mencobanya, silakan Anda kunjungi http://www.business-opportunities.biz/projects/how-much-is-your-blog-worth/, hingga Anda masuk pada halaman di mana Anda bisa mensubmitt URL blog kamu maupun milik orang lain, tampilannya seperti di bawah ini.
    Setelah disubmitt, tunggu sebentar dan hasilnya akan segera Anda lihat. Jika ingin “memamerkan” pada blog, Anda dapat mencopy kode html-nya kemudian pastekan pada sidebar blog Anda.

    Jumat

    Menambah Social Bookmark

    Sering kali kita berkunjung ke setiap blog, tidak jarang kita menemukan "Aksesoris blog" seperti ini gambar diatas. kegunaan hampir sama dengan "aksesoris blog" lainnya yaitu untuk mempermudah pengunjung melakukan share sesuai dengan fasilitas bookmark yang kita berikan.

    Apakah susah dalam Menambah Sosial Bookmark tersebut kedalam blog kita ?? menurut saya tidak terlalu sulit.

    Mari kita mulai
    langkah pertama harus login atau registrasi ke addthis salah satu penyedia layanan bookmark yang menurut saya sudah komplit sosial bookmark nya.

    Setelah login di addthis.com,
    • Pilih service untuk Blogger
    • Pilih Button Style kesukaan
    • Klik Get Your Button
    • Copy Kode scriptnya
    • Login ke Blogger/masuk ke Layout/EditHTML/jgn lupa ExpandWidget
    • Cari kode dibawah ini <data:post.body/>
    • Kemudian paste dibawah kode <data:post.body/>
    • save
    Anda juga dapat meletakkannya script ini di setiap ahir postingan anda.

    <!-- AddThis Button BEGIN -->
    <div><a expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' class='addthis_button'><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=lindon"></script></div>
    <!-- AddThis Button END -->


    Maka hasilnya seperti ini :


    Bookmark and Share

    Kamis

    Membuat Efek Warna Pada Link

    Efek warna pada link memberikan efek menarik bagi pengunjung sehingga pengunjung penasaran dan mngklik linknya.. dan ini juga bermanfaat sebagai pembeda antara Link dan Tulisan yang bukan link. Mau tau cara membuatnya gini nih..

    Caranya mudah hanya dengan mengcopy dan pastekan saja:
    sebelum diubah anda silahkan lihat dan cari kode ini pada edit html anda :



    a:link {
    color:$linkcolor;
    text-decoration:none;
    }
    a:visited {color:$visitedlinkcolor;
    text-decoration:none;
    }
    a:hover {
    color:$titlecolor;
    text-decoration:underline;
    }


    Klo sudah coba bentuk yang pertama yaitu dengan mengganti kode diatas menjadi:



    a:link {
    color: #0066CC;
    }
    a:visited {
    color: #cc0000;
    }
    a:hover {
    color: #2D8930;
    }
    -->Bentuk yang Kedua


    a:link {
    color: #0066CC;
    }
    a:visited {
    color: #cc0000;
    }
    a:hover {
    color: #2D8930;
    font-size: 120%;
    }


    -->Bentuk yang ketiga:


    a:link {
    color: #0066CC;
    }
    a:visited {
    color: #cc0000;
    }
    a:hover {
    color: #2D8930;
    font-family: monospace;
    }


    -->Bentuk yang keempat


    a:link {
    color: #0066CC;
    text-decoration: none;
    }
    a:visited {
    color: #cc0000;
    text-decoration: underline;
    }
    a:hover {
    color: #2D8930;
    text-decoration: blink;
    }


    -->Dan yang terakhir Bentuk yang lima :


    a:link {
    color: #0066CC;
    }
    a:visited {
    color: #cc0000;
    }
    a:hover {
    color: #2D8930;
    font-family: monospace;
    font-weight: bold;
    font-size: 120%;
    background: #ffff66;
    text-decoration: blink;
    }


    Silahkan coba dan jangan lupa untuk Membackup dahulu template anda sebagai langkah jaga-jaga jka terjadi kesalahan yang dapat merusak blog anda nantinya..





    http://tipsblogspot.blogspot.com/2008/08/efek-warna-pada-link.html

    Membuat CSS Dock Menu

    Dock Menu Merupakan menu Horizontal yang disertai gambar-gambar dan apabila menunya disentuh maka akan menampilakan efek berubah size/ukurannya. Nah dibawah ini contoh gambar dari CSS Dock Menu ini. N-design-studio.com situs ini merupakan situs yang menyediakan Trick Dock Menu menggunakan script CSS. o-om.com saya jadikan sebagai rujukan untuk menuliskan artikel ini.. mungkin berguna untuk anda.

    CSS dock menu

    Untuk mengetahui bagaimana cara kerja CSS Dock Menu ini, silahkan klik disini! sebagai sample, dan mungkin saja anda tertarik untuk mencoba.

    Langkah yang perlu dilakukan untuk membuat CSS Dock Menu ada pada blog anda ialah:

    1. Download Script code CSS nya Disini!.

    2. Lihat Disana anda Folder JS (terdapat 2 file Script) yaitu Interface.js dan jquery.js Buka Juga folder Images untuk mendapatkan icon menunya. Upload semua File tersebut dan simpan pada Host Directorynya masing-masing.. Boleh juga anda menyimpannya pada Google Page Creator

    3. Kalau sudah menyelesaikan Semua pengUploadtan filenya.. Silahkan masukke langkah selanjutnya

    Cara Pemasangannya Pada Blogger

    1. Masukke Edit Html dan cari kode <head> Kalau sudah ketemu Letakkan script ini dibawahnya:
    <head>
    <script src='http://google.pages.com/jquery.js' type='text/javascript'/>
    <script src='http://google.pages.com/interface.js' type='text/javascript'/>
    <link href='http://google.pages.com/style.css' rel='stylesheet' type='text/css'/>
    Warna ungu merupakan alamat directory, ubahlah alamat tersebut sesuai dengan path directory masing-masing

    2. Selanjutnya cari kode </body> Letakkan script yang ada dibawah ini, diatas kode </body>. Seperti ini:

    <script type="text/javascript">
    $(document).ready(
    function()
    {
    $('#dock').Fisheye(
    {
    maxWidth: 50,
    items: 'a',
    itemsText: 'span',
    container: '.dock-container',
    itemWidth: 40,
    proximity: 90,
    halign : 'center'
    }
    )
    }
    );
    </script>

    </body>
    </html>


    3. Proses pemasangan menu terserah pada anda mau diletakkan pada Page Element atau edit html. Pasang kode ini disana :
    <div class="dock" id="dock">
    <div class="dock-container">
    <a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/home.png" alt="home" /><span>Home</span></a>
    <a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/email.png" alt="contact" /><span>Contact</span></a>
    <a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
    <a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/music.png" alt="music" /><span>Music</span></a>
    <a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/video.png" alt="video" /><span>Video</span></a>
    <a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/history.png" alt="history" /><span>History</span></a>
    <a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/calendar.png" alt="calendar" /><span>Calendar</span></a>
    <a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/rss.png" alt="rss" /><span>RSS</span></a>
    </div>
    Warna Hijau Menunjukan alamat URL yang dituju ganti sesuai alamat URL yang anda tuju dan warna Merah Menujukkan path directory untuk warna merah ganti sesuai path directory anda.
    Mengerti Programming dapat mempermudah anda mengerti pemasangan dan peletakkan script-script code.

    Cara Membuat Sidebar terpisah dan Berkotak-kotak

    wah udah lama nih.. ga' mengisi dan mengotak-atik siblog.. soalnya saya beberapa hari ini lagi sibuk.. jadi baru bisa nge-Blog lagi seperti biasayanya.. beberapa waktu lalu saya mengunjungi blognya kang-rohman disana kang- rohman menulis artikel tentang cara membuat sidebar agar terlihat terpisah-pisah, persis kayak blog milik kang rohman, Nah dari situ saya menulis artikel ini ya itung-itung penyebar ilmu yang baek biar yang baca dapat berguna dan bisa dipaktekin.Nah nih gambar blog kang rohman... Sidebarnya terlihat terpisah-pisah kan..

    sidebar-kotak
    Dari gambar diatas.. bisa di lihat sidebarnya terpisah dan seperti kotak-kotak lagi, jadi terkesan rapi blognya mo tau cara buatnya biar bisa jadi kayak gitu?? ha.. baca terus ya biar ngerti...

    Nah cari kode Sidebar Widgetnya seperti:

    .sidebar .widget, .main .widget {
    border-bottom:1px dotted $bordercolor;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    }

    Pisah ketiga kode ini.. biar ga' bingung jadinya.. (kode ini terdapat pada template minima) tapi bila sidebar widget dengan main widgetnya udah terpisah.. dibiarrin aja, nah setelah dipisah maka jadinya seperti ini:

    .sidebar .widget{
    border-bottom:1px dotted $bordercolor;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    }

    .main .widget {
    border-bottom:1px dotted $bordercolor;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    }


    Jadi untuk terlihat terpisah maka ada yang harus dimodifikasi yaitu:
    kode pada Sidebar . Widger dimodifikasi jadi
    .sidebar .widget{
    background:#fff;
    border:1px dotted #6c6b6b;
    margin:0 0 1.5em;
    padding:0.5em;
    }


    1. Background merupakan latar belakang blog bisa diganti dengan warna yang sesuai
    2. Border 1 px dotted #6c6b6b; merupakan garis yang mengelilingi wiget sebesar 1pixel
    3. Margin merupakan jarak kebawah antara widget yang 1 dengan yang lainnya sebesar 1,5em
    4. Padding memberikan sela 0,5em

    Nah, keempat hal inilah yang dapat membuat sidebar seakan-akan terpisah dan berkotak-kotak..

    Nah silahkan mecoba ya...

    Beri Komentar bisa Dapar BACKLINK dan SEO


    Banyak cara kita untuk menaikkan Rank kita diantaranya banyak banyak Berkomentar sehingga kita mendapatkan BACKLINK dari pemilik blog yang kita beri komentar, Tahukah anda apa itu BACKLINK?
    Backlink merupakan link yang menuju ke-BLOG milik kita yang terdapat pada blog dimana tempat kita memberikan komentar, jadi dengan memberikan komentar maka dengan cara

    tidak langsung kita telah memberikan link balik menuju ke BLOG milik kita sendiri, nah ini merupakan keuntungan yang kita dapatkan selain dapat menaikkan jumlah pengunjung kita juga akan dapat menaikkan RANK kita. Karena apa?? setalah beberapa jam setelah kita berkomentar maka GOOGLE akan Meng-Indeks komentar anda di blog mereka, asalkan komentar yang anda berika bukan sebuah SPAM, apabila terdeteksi sebagai SPAM maka tidak akan di indeks oleh google maka dari itu jika memberikan komentar sebaiknya jangan memberikan komentar SPAM karena dapat merugikan kita,"eh sudah cape'-cape' koment tapi ga' dapet BACKLINK". Pastinya anda akan kecewa.

    Jadi Sebaiknya kita saling memberikan komentar karena apa.. anda tidak rugi bila memberikan komentar kepada blogger lainya (kita akan mendapatkan BACKLINK dan menaikkan page kita di google jadi termasuk kedalam SEO "Search Engine Optimization") serta dapat menaikkan jumlah GOOGLE ADSENSE kita juga lho.

    Cara Membuat Vertical Menu

    Vertikal Menu merupakan pilihan menu yang biasa dipakai pada website-website yang mempunyai banyak pilihan menu di dalamnya, vertikal menu berbentuk pilihan menu yang turun kebawah jika kita sentuh dengan menggunakan mouse kita.. dengan kita menggunakan vertikal menu ini maka kita akan dapatkan pilihan menu yang banyak untuk blog kita

    Nah saya akan memberikan cara pembuatannya pada blog.. ikuti caranya dan langkah-langkah nya dengan seksama, dengan anda mengikuti pastinya anda tidak akan mendapatkan kesulitan dalam pengeditan kode CSS nya
    Masuk ke Akun Blogger Anda dan pilih layout terus cari Edit HTML

    Masukkan kode CSS ini di atas kode ]]></b:skin>



    /*Vertikal Menu
    ---------------------------------*/
    .vertikalmenu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 180px; /* lebar dari menu vertikal*/
    }
    .vertikalmenu li{
    border-bottom: 1px solid white;
    }
    .vertikalmenu li a{
    background: #000000 ; /*warna dari menu vertikal*/
    font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
    display: block;
    color: white;
    width: auto;
    padding: 5px 0;
    text-indent: 8px;
    text-decoration: none;
    border-bottom: 1px solid black;
    }
    .vertikalmenu li a:visited, .vertikalmenu li a:active{
    color: white;
    }
    .vertikalmenu li a:hover{
    background-color: #737373; /*warna setelah pointer diarahkan (hover)*/
    color: white;
    border-bottom: 1px solid black;
    }


    Kemudian SAVE

    Anda bisa mengganti warna yang ada dengan warna yang anda sukai

    Selanjutnya pilih Page Element dan kli add Page elemnet pilih lagi HTML/java Script

    Masukkan kode ini didalmnya


    <ul class="vertikalmenu">
    <li><a href="/">» HOME</a></li>
    <li><a href="http://your blog name.blogspot.com">» Tutorial Blog</a></li>
    <li><a href="http://your blog name.blogspot.com">» Bisnis Online</a></li>
    <li><a href="http://your blog name.blogspot.com">» Free Template</a></li>
    <li><a href="http://your blog name.blogspot.com">» Handphone</a></li>
    <li><a href="http://your blog name.blogspot.com">» Komputer</a></li>
    </ul>

    Ganti your blog name dengan nama blog milik anda
    Klo sudah klik save

    selesai, selamat mencoba

    Ide untuk Menulis di Blog

    Posting lagi Posting lagi... jadi bosen nih, tapi ya mo gimana lagi ini ni resikonya buat para blogger peng-Update-tan posting terbaru itu harus, ya kalau mo blognya selalu dikunjungi oleh orang kita harus bisa meng-Update posting terbaru minimal 1 posting sehari biar mereka tidak bosen dan selalu kembali mebaca-baca dan baca posting dalam blog milik kita. karena apa seseorang yang mengunjungi internet/ mencari berita di internet itu selain cuma games Online, mereka juga mencari sesuatu yang baru apapun topiknya, maka dari itu kita harus bisa mengupdate sesuatu yang baru juga.

    Nah, saya akan berika sedikit TIPS bagaimana cara memunculkan ide untuk menulis artikel/Postingan untuk blog kamu:

    1. Hal-hal yang baru anda ketahui, misalnya ada yang baru dari GOOGLE yaitu google crome, nah anda bisa menjadikan hal tersebut sebagai bahan postingan kamu.


    2. Hal yang kamu sukai. Misalnya kamu lagi suka ngumpulin mainan, nah kamu bisa menuliskan mainan apa saja yang kamu kumpulin dan mungkin pengunjung juga akan tertarik dengan hobi anda. Dengan begitu kalian bisa saling SHARING mengenai mainan kaian.

    3. Hal yang tidak kamu sukai. " Uh aku bosen ma makanan yang yang ada dirumah, itu-itu mulu.... pengen cari sesuatu yang baru nih" nah dengan kamu menulis postingan tentang makanan apa saja / sesuatu apa saja yang kamu benci kamu bisa menyalurinya ke-BLOG kamu biar orang laen ga' jadi sasaran kebencian kamu!!! (hehe).

    4. Kejadian yang baruuu saja kamu alami. Misalnya kamu baru ketabrak oleh sepeda dan langsung masuk rumah sakit dan sekarat lagi, bisa nih jadi bahan postingan yang seru sekaligus dapat menyimapan suatu kenangan/kejadian yang indah dan tidak terlupakan.

    5. Hal yang ingin kamu ketahui. Mungkin selama ini kamu tidak mengetahui apa sebenarnya Blog, atau bisa juga tentang bagaimana keadaan dunia kita sekarang, dengan begitu kamu akan mendapatkan bahan postingan yang harus kamu tulis.

    6. Bercerita tentang kegiatan kamu sehari-hari/tentang apa saja yang kamu alamin hari ini, dengan kata lain blog bisa kamu jadikan diari pribadi milikmu yang bisa kamu tuliskan apa saja yang ada dalam pikiranmu.

    7. Sesuatu yang kamu karang. Karena kamu tidak ada bahan untuk menulis posting lagi, kamu bisa mengarangnya. Tentang apa saja.

    Nah sedikit dari saya, mungkin dapat berguna nih bagi blogger-blogger sejati yang BINGUNG mo nulis apa di blognya.

    Cara Membagi 1 List style menjadi 2 Kolom

    Tadi abis jalan-jalan eh ternyata saya baca postingan miliknya si Jaloe
    dan saya tertarik jadi saya terusin aja biar makin banyak yang baca dan banyak yang tau. Cara buat 1 list menjadi 2 kolom itu sangat berguna lo apalagi bagi yang punya template 2 kolom dan lebih beruntung lagi kalo punya template 3 kolom jadi bisa hemat tempat, dapat meletakkan 2 widget atau tambahan lainya ke dalam 1 list saja. Jadi penen liat bagaimana bentuknya.. nah begini nih bentuknya

    gam2
    gam1







    Untuk mendapatkan yang seperti diatas cara mudah ko' tinggal cari kode

    ]]></b:skin>

    Dan letakkan kode ini di atasnya
    /* Kode Css List Two Kolom
    ------------------------------------------------------------------------------------------*/
    #catl {
    padding :5px 10px;
    width : 91%;
    background-color : #ffffdd;
    border : 1px solid #ccc;
    margin : auto;
    }

    #catl h3 {
    display : block; color : #669900; padding-bottom : 5px;
    margin-bottom : 5px; border-bottom : 1px solid #666;font-size:14px; }

    /* style all the list items here */
    #catl ul li {
    height : 1em;
    list-style-type : none;
    color : #333;
    padding : 0.3em 0 0.4em 0.25em;
    font-size : 0.9em;
    border-bottom : 1px solid #ccc;
    text-indent:0px;
    }

    /* every second list item is positioned outward and moved up equal to LI height to even them */
    #catl ul li.catl_l2 {
    margin-left : 50%;
    margin-top : -1.8em;
    padding : 0.3em 0 0.4em 0.5em;
    border : 0;
    }

    /* Every other two list items are styled with a background for usability and style */
    .catl_alt {
    background-color : #fffffc;
    }

    /* ini merupakan code hacking css untuk Ie 6*/
    * html #catl ul li.catl_l2 {
    margin-top : -2.3em;
    }


    Kalau sudah Klik Simpan dan Pilih Page Element Dan pilih Add Page Element/Tambahkan sebuah widget baru dengan pilihan Html/java script.

    Kemudian masukkan kode ini di dalamnya:


    <div id="catl">
    <h3>Satu List Dua Kolom</h3>
    <ul>
    <li><a href="#">List Item Satu</a></li>
    <li class="catl_l2"><a href="#">List Item Dua</a></li>
    <li class="catl_alt">List Item Tiga</li>
    <li class="catl_l2">List Item Empat</li>
    <li>List Item Lima</li>
    <li class="catl_l2">List Item Enam</li>
    <li class="catl_alt">List Item Tujuh</li>
    <li class="catl_l2">List Item Delapan</li>
    </ul>
    </div>


    Catatan penting :

    1. Yang perlu di ganti adalah tulisan antara tag <li> dan </li>.
    Jika ingin membuat linklist menjadi seperti ini.
    <li><a href=�http://alamat url/�> Nama List </a></li>
    jika ingin membuat list berupa link gambar seperti ini.
    <li><a href="http://alamat url/"><img src="alamat gambar></a></li>
    2. Atur tulisan list-nya jangan terlalu panjang. Dan Jika ingin menggunakan gambar atur nilai tinggi dan lebarnya, kira-kira 75px X 10px.

    View Source : green-beast

    Cara Membuat Huruf Kapital di Awal Paragraf

    Membuat huruf besar di awal paragraf bukan suatu hal yang sulit, kenapa saya bilang begitu seperti halnya kita membuat tulisan pada microsoft word yang dimana kita buatkan huruf awalannya dengan huruf besar layaknya koran atau majalah silahkan melihat contohnya disini! pada blog disana terlihat selain tulisan terkesan rapi juga dapat menjadi suatu daya tarik tersendiri. Bagai mana cara membuatnya nah silahkan ikuti langkah berikut :

    1. masuk ke layout --> Edit html

    2. Cari kode berikut
    .post-body {
    .....
    }

    3. Kalau ketemu silahkan letakkan kode ini dibawahnya ( dibawah tanda } ).
    .post bt {

    float:left; color:

    $headerBgColor;

    font-size:100px;

    line-height:80px;

    padding-top:1px;

    padding-right:5px; }
    4. Saat penulisan postingan terbaru jangan lupa untuk menuliskan kode ini : <bt></bt>. Misalnya huruf awalnya P maka letakkan huruf P di tengah kode tersebut seperti : <bt>P</bt>

    Cara Mengganti Nama Author

    Merubah Nama Author itu dapat di lakukan dengan mudah lho.. ya tinggal dari kode script dibawah ini :
    <p class=�post-footer-line post-footer-line-1�>
    <span class=�post-author�>
    <b:if cond=�data:top.showAuthor�>
    <data:top.authorLabel/> <data:post.author/>
    </b:if>
    </span>

    cara mencari nya mudah ko':
    1. Masuk ke akun blogger anda.
    2. Klik Layout --> edit Html
    3. Centang Box pada tuisan Expand Widget.
    4. Ganti Kode berwarna merah dengan nama yang anda inginkan.
    5. Save template.

    Mudah kan sekarang nama author milik anda sudah terganti..

    Cara agar Blog kita tidak Berat

    Wah berat bener nih blog.. saya jadi bosen nungguinnya mana billingnya jalan terus lagi kan saya bisa "tekor" nih!! ga' mw kn jadi salah satu orang ini.. nungguin blognya buka dengan sempurna lamanya minta ampun ya cape'deh.. kata orang klo blog kita berat itu bisa bikin pengunjung jadi bosen dan ga' mau datang lagi ke blog kita makanya jaga deh supaya blog kamu tidak berat, klo itu terjadi maka suatu hal yang buruk akan menimpamu... saya akan berikan tips suapaya blog kita tidak berat alias lamban.. 6 langkah yang harus dilakukan ialah :

    Cek dulu seberapa berat Blog kmu dengan Website speed Test. Disana kmu masukkan Alamat blog/URL kamu ke kotak yang sudah ada disana.. klo sudah klik Check! dan lihat seberapa berat blog kmu. Klo hal yang buruk itu terjadi pada blog kmu maka 6 langkah harus dilakukan dengan seksama :
    1. Kalau blogmu diisi dengan video, atau musik maka anda harus menggunakan file yang berukuran kecil seperti (MIDI atau WAV). Kenapa Video, serta musik biasanya menggunakan size yang besar sehingga dapat memberatkan blog mu.
    2. Foto dan Gambar yang berukuran besar akan dapat meyebabkan blog kita berat juga lo, maka pakai lah format yang berukuran kecil GIF atau JPG atau editlah foto atau gambar mu dengan PICASA.
    3. Perkecil penggunaan Java Script pada blog kamu.
    4. Bersihkanlah HTML kodemu dengan hal yang tidak berguna yang memungkinkan dapat memberatkan blog.
    5. Pergunakanlah Design Template yang simple, penggunaan design yang simple ini dapat mempercepat loading pada blogmu.
    6. Cek kembali link-link yang kmugunakan sebagai BlogRoll.. mungkin saja Link yang lama sudah tidak berfungsi lagi dengan kata lain saat diklik.. maka akan muncul pesan "Maaf Blog Anda Tuju Sudah Tidak Aktif Lagi". Bisa saja kan seperti itu, karena segala kemungkinan itu bisa terjadi.
    Itu lah sedikit ilmu dari saya mungkin berguna.. karena kecepatan loading pada blog atau website itu sangat berguna karena dapat menghemat pulsa dan uang anda...

    Pilihan Menu dengan Icon

    Wuih.. blognya keren mana dihiasi dengan menu bergambar lagi.. wah pengen nih.. tapi gimana cara buatnya.. ya??
    Sering kita lihat kalo pemilihan menu yang ada pada header yang terdapat pada blog biasanya hanya tulisan dan warna-warna bila disetuh.. tapi kadang kala kita pengen dengan suasana laen misalnya, dengan gambar-gambar yang uniks.. seperti yang terlihat pada gambar dibwah ini :


    Nah langkah membuatnya mudah kok' ga' susah amat dan ga' ribet..
    Gini caranya:

    Langkah Pertama :
    1. Masuk ke akun google kmu.
    2. Pilih menu Layout --> Edit html.
    3. Masukkan kode ini :




    #newnavbar ul li{
    list-style-type: none;
    display:inline;
    margin:0px;
    padding:30px;
    border:0px solid;
    }

    4. Masukkan kode tersebut Dibawah /* Header */ letaknya dibagian tengah Template.
    5. Save.

    Langkah Kedua :
    1. Pilih Page Element dan kli Add Pege Element.
    2. Pilih Html/Javascript.

    3. Masukkan kode dibwah ini kedalam konten box..



    <div id='newnavbar'>
    <ul>
    <li><a href="URL "><img src="URL Image"></a></li>
    <li><a href="URL "><img src="URL Image"></a></li>
    <li><a href="URL "><img src="URL Image"></a></li>
    <li><a href="URL "><img src="URL Image"></a></li>
    <li><a href="URL "><img src="URL Image"></a></li>
    </ul></div>

    4. Save Dan lihat hasilnya.

    Untuk Peletakkan terserah anda mau meletakkan dimana saja... Klo mo Meletakkannya pada header tapi ga' ada add page elementnya nah lihat Add Page element pada Header
    Dan URL diisi dengan alamat blog anda/Home Page anda
    URL image diisi dengan lokasi ICON /image anda..
    Gambar/icon dapat diambil pada ICONARCHIVE
    Cara Pengambilan Lokasi Icon:

    1. Masuk ke icon archive
    2. Pilih Icon yang kmu suka.. dan klik kanan pada download as ico.file. Pilih Copy Image Location
    3. Pastekan URL tersebut ke URL image yang ada pada kode tadi..
    4. Selesai..

    Cara Menambah Icon di Samping Judul Artikel


    Bingungkan.. bingungkan apa sih maksudnya menambah icon di samping judul artikel, nah setidaknya anda akan sedikit bahkan banyak
    mengerti apa masksudnya setelah anda baca smpai habis artikel ini ya mungkin berguna bagi anda. Menambahkan Icon atau gambar kecil sebelum judl artikel atau lebih jelasnya disamping judul artikel itu dapat menarik perhatian pembaca untuk melihat artikel tersebut itu sepenuhnya kenapa? yah dengan dihiasi dan maka judul posting pun lebih mencolok dan dapat menark mata pembaca yang melihatnya.Maka dari itu saya akan beri tahu bagaimana caranya menambahkan icon/gambarnya.

    Caranya Ialah :
    1. Masuk Akun Blogger Anda dan klik Layout pilih Edit Html.

    2. Cari Kode Css Berikut :
    .post h3 {
    margin:.5em 0;
    padding:30px 0px 0px 45px;
    font-size:120%;
    <font-weight:bold;
    font-style:italic;
    line-height:1.3em;
    color:#333;

    3. Cari Icon Yang ada suka misalnya icon buku dan pena yang punya gambarnya (http://tbn1.google.com/images?q=tbn:nlmFs_SO55kJ_M:http://remas-alakbar.com/images/
    buku.pngh
    ) atau anda bisa mencarinya di Iconarchive.com, disana anda akan mendapatkan banyak contoh icon.

    4. Ganti kode padding:30px 0px 0px 45px; Jadi padding:48px 0px 0px 45px; dan tambahkan height:48px; dan background:url nya dibawah color:#333;yang jadinya seperti ini:
    .post h3 {
    margin:.5em 0;
    padding:
    48px 0px 0px 45px;
    font-size:120%;
    font-weight:bold;
    font-style:italic;
    line-height:1.3em;
    color:#333;
    background:url(http://tbn1.google.com/images?q=tbn:nlmFs_SO55kJ_M:
    http://remas-alakbar.com/images/buku.png) no-repeat left center;

    5. Save templatenya.
    Nah silahkan mencoba apakah anda bisa.. saya yakin anda pasti bisa

    Mematikan Klik Kanan Mouse pada Blog

    Mungkin anda sering membuka suatu situs yang melarang blognya untuk diklik kanan oleh pengunjungnya atau dengan kata lain mendisablekan klik kanan khusus pada blog/situsnya saja. Guna dari disable ini ialah untuk melindungi konten atau foto yang anda miliki untuk dicopy oleh orang lain dengan kepentingan yang kita tidak tahu. Nah berkut ini ada javascript untuk mendisablekannya yaitu :

    <script language=JavaScript>
    <!--

    //Matikan Klik Kanan

    var message="";
    ///////////////////////////////////
    function clickIE() {if (document.all) {(message);return false;}}
    function clickNS(e) {if
    (document.layers||(document.getElementById&&!document.all)) {
    if (e.which==2||e.which==3) {(message);return false;}}}
    if (document.layers)
    {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
    else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

    document.oncontextmenu=new Function("return false")
    // -->
    </script>

    Script ini dicopykan ke blog anda dengan cara :
    1. Klik Layout dan pilih edit html
    2. Cari kode <head> Copykan kode tersebut dibawahnya.
    3. Save.
    4. Silahkan dicoba!!!


    Rabu

    Cara Membuat Snapshot

    Apa itu Snapshot ?Snapshot adalah adalah sedikit jendela yang muncul saat kita mengarahkan kursor pada sebuah link.Contohnya silakan Klik disini dan coba kamu arahkan kursur Ke link yang ada dan lihat efeknya. Nah itulah yang disebut Snapshot .Dalam postingan kali ini saya akan membahas bagaimana Cara Bikin Snapshot Di Blog . Mungkin Snapshot ini berguna untuk mempercantik tampilan blog, Atau sekedar hanya pengen memasangnya aja kali ya .hehehe pengen Bikin Snapshot di blog?Silakan ikuti tutorial Cara Bikin Snapshot Di Blog

    1.Silakan Klik http://www.snap.com./

    2.Klik "Get Started"

    3."Choose a Color Theme" adalah tema dari Snapshot yang akan mau kamu buat.silakan pilih tema sesuai selera.

    4."Add Your Logo" Adalah logo yang nanti pengen kamu gunakan . silakan klik "Browse" Untuk meng upload logo yang kamu inginkan.

    5."Select Your Shots Language" Isikan dengan bahasa yang dipake blog.

    6.Kasih tanda titik pada "My site displays sexually-explicit content".

    7.Kemudian Klik "Continue".

    8.Selanjutnya isikan email,URL blog dan password pada "Enter Your Account Details".

    9.Sebelum Klik continue lagi jangan lupa kasih tanda titik pada "I agree to Terms & Conditions above"

    10.Selanjutnya Copy kode HTML pada "Get Your Code " Lalu paste di blog kamu .caranya:

    11.Login Ke blogger .Lalu klik "Tata Letak" Kemudian Klik "Edit HTML".

    12.Cari Kode </body> Lalu Paste Kode HTML dari Snapshot Tadi diatasnya. Jangan Lupa Klik "Save Template"

    Kalo udah selesai silakan arahkan kursor Pada link yang ada diblog kamu. Dan lihat hasilnya..

    Cara membuat label atau menghapus label yang sudah terpasang dipostingan

    Pertama sobat login ke blogger sobat di http://www.blogger.com

    Setelah sobat masuk ke dasbord blogger sobat klik menu postingan dan pilih edit entri

    Setelah itu sobat pilih postingan mana yang mau dihapus labelnya dengan cara member centang pada kotak disebelah postingan tersebut

    Selanjutnya sobat klik kotak aksi label dan scroll ke bagian bawah sampai melihat opsoi yang hapus label
    Setelah itu sobat klik nama label yang mau dihapus pada postingan tersebut

    Jika sobat ingin membuat label baru untuk postingan tersebut langkahnya sama seperti diatas. Bedanya hanya pada bagian aksi label.

    Setelah postingan yang akan diberi label baru terpilih sobat klik aksi label dan klik label baru

    Selanjutnya sobat ketikan nama label baru pada kotak yang disediakan, setelah selesai klik ok

    Cara Pasang Info Cuaca

    Info Cuaca adalah salah satu aksesoris yang cukup menarik untuk dipasang diblog. Tujuanya adalah ya untuk mengetahui ramalan cuaca,walaupun Info Cuaca ini hanya mewakili kota tempat tinggal sang pemilik blog .namun Info Cuaca ini cukup menarik untuk dipasang di blog kamu .Tertarik ? Silakan ikuti Tutorial Cara Pasang Info Cuaca Di Blog Berikut ini :

    1.Klik http://www.wanderground.com.

    2.Masukan nama kota tempat kamu tinggal,lalu klik tanda Search disampingnya.

    3.Setelah muncul Info Cuaca kota kamu silakan klik Get Your Wheater Sticker yang ada dibawah.

    4.Silakan pilih banner Info Cuaca yang kamu inginkan.

    5.Setelah kamu memilih banner yang kamu inginkan,nanti akan tampil kode HTML dari banner tersebut.

    6.Copy Kode HTML banner yang kamu pilih.

    7.Selanjutnya LOGIN ke blogger kemudian klik Tata Letak Lalu klik Tambah Gadget dan Pilih HTML/javascript lalu paste kode tadi kedalamnya. jangan lupa klik save.

    8.Selesai.. Tinggal kamu lihat hasilnya.

    Cara Membuat Label atau Tag Clouds

    Membuat Label atau Tag Clouds.Apa itu Tag Clouds ? Tag Clouds adalah sebuah Label yang hurufnya tidak rata dan jika Tag yang hurufnya rata itu biasanya adalah tag yang populer di blog kamu dan jika jika kecil berarti tag tersebut kurang populer.Dan buat kamu yang tertarik untuk membuatnya.Silakan ikuti tutorial Membuat Label atau Tag Clouds berikut ini.

    1.LOGIN ke Blogger.

    2.Klik Tata Letak kemudian klik lagi Edit HTML.

    3.Selanjutnya cari kode ]]></b:skin>.Lalu copy dan paste kode berikut di bawahnya.

    /* Label Cloud Styles
    ----------------------------------------------- */
    #labelCloud {text-align:center;font-family:arial,sans-serif;}
    #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
    #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
    #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
    #labelCloud a{text-decoration:none}
    #labelCloud a:hover{text-decoration:underline}
    #labelCloud li a{}
    #labelCloud .label-cloud {}
    #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
    #labelCloud .label-cloud li:before{content:"" !important}

    4.Cari lagi kode <head> . kemudian copy paste berikut tepat di bawahnya.

    <script type='text/javascript'>
    // Label Cloud User Variables
    var cloudMin = 1;
    var maxFontSize = 20;
    var maxColor = [0,0,255];
    var minFontSize = 10;
    var minColor = [0,0,0];
    var lcShowCount = false;
    </script>

    5.Cari lagi kode berikut ini.

    <b:widget id='Label1' locked='false' title='Labels' type='Label'/>

    6.Hapus kode tersebut.lalu ganti dengan kode berikut ini.

    <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>

    <div class='widget-content'>
    <div id='labelCloud'/>
    <script type='text/javascript'>

    // Don't change anything past this point -----------------
    // Cloud function s() ripped from del.icio.us
    function s(a,b,i,x){
    if(a&gt;b){
    var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
    }
    else{
    var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
    }
    return v
    }


    var c=[];
    var labelCount = new Array();
    var ts = new Object;
    <b:loop values='data:labels' var='label'>
    var theName = &quot;<data:label.name/>&quot;;
    ts[theName] = <data:label.count/>;
    </b:loop>

    for (t in ts){
    if (!labelCount[ts[t]]){
    labelCount[ts[t]] = new Array(ts[t])
    }
    }
    var ta=cloudMin-1;
    tz = labelCount.length - cloudMin;
    lc2 = document.getElementById('labelCloud');
    ul = document.createElement('ul');
    ul.className = 'label-cloud';
    for(var t in ts){
    if(ts[t] &lt; cloudMin){
    continue;
    }
    for (var i=0;3 &gt; i;i++) {
    c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
    }
    var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
    li = document.createElement('li');
    li.style.fontSize = fs+'px';
    li.style.lineHeight = '1';
    a = document.createElement('a');
    a.title = ts[t]+' Posts in '+t;
    a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
    a.href = '/search/label/'+encodeURIComponent(t);
    if (lcShowCount){
    span = document.createElement('span');
    span.innerHTML = '('+ts[t]+') ';
    span.className = 'label-count';
    a.appendChild(document.createTextNode(t));
    li.appendChild(a);
    li.appendChild(span);
    }
    else {
    a.appendChild(document.createTextNode(t));
    li.appendChild(a);
    }
    ul.appendChild(li);
    abnk = document.createTextNode(' ');
    ul.appendChild(abnk);
    }
    lc2.appendChild(ul);
    </script>

    <noscript>
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <data:label.name/>
    <b:else/>
    <a expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    (<data:label.count/>)
    </li>
    </b:loop>
    </ul>
    </noscript>
    <b:include name='quickedit'/>
    </div>

    </b:includable>
    </b:widget>

    7.Selanjutnya klik SIMPAN TEMPLATE

    8.Selesai dech.. trus tinggal kamu lihat hasilnya.

    Back To Top