TOP 1000 SITES IN THE WORLD 2010

DOUBLECLICK ADPLANER DISINI

Baru-baru ini saya googling dan menemukan satu artikel yang sangat menarik untuk saya karena beberapa hari ini saya mengalami kejenuhan...dan kadang merasa stack di depan laptop saya sebabnya adalah tak lain karena saya kebingungan mencari situs-situs bagus dengan informasi terbaik. semoga informasi ini dapat bermkanfaat bagi rekan blogger sekalian.

 CLICK HERE


      

Share |

 

Solusi Submit Sitemap di Webmaster Tools

Kok, feeds blogku ngga valid? Aduh, sitemap blogku ngga ter-indeks semua? Huh, gagal lagi submit sitemapnya? Dan masih banyak pertanyaan senada lainnya yang mungkin menghinggapi blogger mania ketika submit sitemap di Google Webmaster Tools. Terus bagaimana solusi agar sitemap blog kamu dapat maksimal diterima dan ter-indeks oleh Webmaster Tools? Caranya mudah bertanyalah kepada ahlinya, wkakakakka. Kalau itu sih bukan solusi namanya, tapi salah satu upaya agar tidak "sesat di jalan".

Nah, daripada cuap-cuap melulu langsung kita menuju TKP. salah satu cara untuk mengatasi masalah error dan indeks URLs tersebut adalah dengan menggunakan Blogger Sitemap Generator. Berikut adalah langkah-langkah membuat sitemap di Blogger Sitemap Generator :

Cara Menambahkan Favicon Di Blog / Website

Favicon adalah kependekan dari favorit icon juga bisa sebagai ikon website, icon bookmark atau icon URL biasanya menggunakan ukuran 16 × 16, 32 × 32 atau 64 × 64 piksel persegi ikon. Favicon adalah icon kecil yang muncul di bagian atas browser Anda ketika membuka sebuah website.

Untuk menambahkan favicon untuk website atau blog, ada beberapa cara, jika menggunakan platform blog seperti Wordpress Anda dapat menggunakan plug-in, metode lain Anda dapat menambahkan favicon secara manual untuk blog anda dengan meng-upload ikon sendiri dan tempat hosting diantara tag .

Apa tujuan memasang favicon pada website? Tujuan utama favicon adalah menciptakan "merek " dari situs web dan membantu pengguna untuk mengenali situs web.

Bagaimana menambahkan favicon pada website atau Blog?

MEMBUAT POSTING BERKOLOM

Kamu pasti tahu bentuk atau format surat kabar yang berkolom-kolom. Dalam blogger kita juga dapat membuat format postingan seperti itu (beda-beda tipis lah).

Mari kita review trik blogger membuat postingan berkolom :

• Login dulu ke account blogger kamu.
• Pilih tab Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode ]]>.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Copas kode CSS berikut di atas kode tersebut.

.post-column-top {
-moz-column-count: 2;
-moz-column-gap: 15px;
-moz-column-rule: 0px dotted #E1D4C0;
-webkit-column-count: 2;
-webkit-column-gap: 15px;
-webkit-column-rule: 0px dotted #E1D4C0;
-khtml-column-count: 2;
-khtml-column-gap: 15px;
-khtml-column-rule: 0px dotted #E1D4C0;
padding-bottom: 10px;
border-bottom:1px dashed #E1D4C0;
}

.post-column-bottom {

-moz-column-count: 2;

-moz-column-gap: 15px;

-moz-column-rule: 0px dotted #E1D4C0;

-webkit-column-count: 2;

-webkit-column-gap: 15px;

-webkit-column-rule: 0px dotted #E1D4C0;

-khtml-column-count: 2;

-khtml-column-gap: 15px;

-khtml-column-rule: 0px dotted #E1D4C0;

}

.post-column-top2 {
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-rule: 0px dotted #E1D4C0;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-rule: 0px dotted #E1D4C0;
-khtml-column-count: 3;
-khtml-column-gap: 10px;
-khtml-column-rule: 0px dotted #E1D4C0;
font-size: 85%;
line-height:14px;
padding-bottom: 10px;
border-bottom:1px dotted #E1D4C0;
}

.post-column-bottom2 {

-moz-column-count: 3;

-moz-column-gap: 10px;

-moz-column-rule: 0px dotted #E1D4C0;

-webkit-column-count: 3;

-webkit-column-gap: 10px;

-webkit-column-rule: 0px dotted #E1D4C0;

-khtml-column-count: 3;

-khtml-column-gap: 10px;

-khtml-column-rule: 0px dotted #E1D4C0;

font-size: 85%;

line-height:14px;

}

• Jangan lupa disimpan.

Keterangan :

...-column-count menunjukkan jumlah kolom.

...-column-gap menjempolkan jarak antar kolom.

...-column-rule mengelingkingkan border antar kolom (kalau tidak digunakan juga tidak apa-apa).

font-size menengahkan ukuran huruf.

line-height memaniskan jarak antar baris teks/kalimat.

(Jari-jari.....)

padding-bottom menunjukkan jarak kolom atas dengan kolom bawah (berguna kalau kamu membuat dua baris kolom).

border-bottom menunjukkan garis bawah kolom (berguna kalau kamu membuat dua baris kolom).

Catatan :

1. Kode CSS di atas digunakan untuk membuat postingan berkolom 2 (dua) dan 3 (tiga).
2. Kode CSS tersebut bisa kamu pilih atau dipakai seluruhnya.
3. Untuk penggunaan kode -moz, -webkit, -khtml dapat kamu baca pada postingan "Membuat Rounded Corner".
4. Kode CSS tersebut dapat kamu permak sesuai dengan keinginan dan template blog kamu.

• Contoh Terapan I :  Postingan 2 (dua) kolom

I>/span>ni merupakan contoh terapan I, yakni membuat postingan menjadi 2 (dua) kolom. Pertama ketiklah seluruh isi postingan, kemudian edit setelah selesai. Jangan lupa untuk meletakkan kode huruf awal bergaya koran dan kode untuk membuat posting menjadi dua kolom. Kamu juga bisa meletakkan kode pemformatan lainnya, kalau ada dan tersedia serta menarik minat mata pengunjung untuk membaca postingan tersebut.

Aturlah penambahkan kode kolom agar lebih menarik. Paragrap pembuka biarkan sesuai dengan format posting yang ada. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode untuk membuat posting berkolom. Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 2 (dua) kolom.

Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawahnya kamu tidak akan melihat ada garis putus-putus lagi.

• Jadinya akan seperti berikut :

Ini merupakan contoh terapan I, yakni membuat postingan menjadi 2 (dua) kolom. Pertama ketiklah seluruh isi postingan, kemudian edit setelah selesai. Jangan lupa untuk meletakkan kode huruf awal bergaya koran dan kode untuk membuat posting menjadi dua kolom. Kamu juga bisa meletakkan kode pemformatan lainnya, kalau ada dan tersedia serta menarik minat mata pengunjung untuk membaca postingan tersebut.

Aturlah penambahkan kode kolom agar lebih menarik. Paragrap pembuka biarkan sesuai dengan format posting yang ada. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode untuk membuat posting berkolom. Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 2 (dua) kolom.

Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini  kamu tidak akan melihat ada garis putus-putus lagi.

• Contoh Terapan II:  Postingan 2 (dua) dan 3 (tiga) kolom

Aturlah penambahkan kode kolom agar lebih menarik. Paragrap 1 (satu) dan 2 (dua) diatur dengan 2 (dua) kolom. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode untuk membuat posting berkolom 3 (tiga). Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 2 (dua) kolom.

Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.

Aturlah penambahkan kode kolom agar lebih menarik. Paragrap 3 (tiga) dan 4 (empat)  diatur dengan format 3 (tiga) kolom. Paragrap selanjutnya dapat kamu optimasi dengan  menggunakan kode-kode lainnya.  Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 3 (tiga) kolom.

Kemudian kita akan membuat kolom ke-4, sehingga kolomnya akan berjumlah 4 (empat) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.

• Jadinya akan seperti berikut :

Aturlah penambahkan kode kolom agar lebih menarik. Paragrap 1 (satu) dan 2 (dua) diatur dengan 2 (dua) kolom. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode untuk membuat posting berkolom 3 (tiga). Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 2 (dua) kolom.

Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.

Aturlah penambahkan kode kolom agar lebih menarik. Paragrap  3 (tiga) dan 4 (empat)  diatur dengan format 3 (tiga) kolom. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode-kode lainnya. Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 3 (tiga) kolom.

Kemudian kita akan membuat kolom ke-4, sehingga kolomnya akan berjumlah 4 (empat) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.

Panjang dan lama (itulah coki-coki!!???) juga postingan trik membuat postingan berkolom ini. Akhirnya selamat berkolom ria dalam postingan blog kamu... 


      

Share |

  

Membuat "Back to Top"

Ketika kita menulis suatu blog yang lumayan panjang, scroll halaman pun akan semakin lama. Kadang yang membaca ingin pula buru-buru untuk menyelesaikan bacaannya, namun ada kalimat yang harus dipahami sebelumnya. Kebetulan kalimat tersebut berada di paragrap pertama (atas). Repot juga muter scroll mouse atau sekedar menggeser bar yang letaknya dikanan halaman browser. Seandainya ada satu shortcut yang tersedia dalam blog, kemungkinan hal di atas bisa diminimalisasi. Nah, itu yang namanya fasilitas "Back to Top" atau kembali ke atas.

Bagaimana trik blogger untuk menambah fasilitas itu, OB? EGP (emang gue pikirin), mungkin itu jawaban ketus OB ketika ditanya pas sakit gigi atau sariawan 5 biji. Alhamdulillah, sekarang OB tidak sakit gigi & sariawan. Sebenarnya trik blogger membuat "Back to Top" ini merupakan rekomendasi dari mas Rudi (Blog Rudi Azhar) yang merupakan salah satu admin optimasi blog.

Cara I :

• Tambahkan kode CSS berikut di atas kode ]]>.

p.to-top {
font-family:Trebuchet MS, Verdana, Verdana Ref, sans serif;
font-size:90%;
float:right;
padding-right:10px; }

Keterangan :

1. font-family = keluarga bentuk teks yang akan kita tampilkan.
2. font-size = ukuran teks.
3. float = peletakkan teks (kanan atau kiri)
4. padding-right = jarak antara teks dengan bidang sebelah kanan.

• Sekarang, kita tinggal menentukan posisi teks link back to top, misalnya diletakkan di atas footer.
• Cari kode yang menunjukkan awal footer, seperti :
  
  
  ,
  

  ,
  

  ,
  

  , & sejenisnya.
• Kemudian copas kode berikut di atasnya :

back to top

• Jangan lupa melakukan edit pada kode menjadi
• Kemudian simpan template kamu.

Catatan :

1. Untuk peletakkan back to top tidak harus di atas footer.
2. Silakan edit/modifikasi kode CSS tersebut sehingga sesuai dengan yang kamu harapkan.
3. Blog demonya ada di utuharies.blogspot.com.

Cara II :

• Metode ini menggunakan jquery, sehingga scrolling halaman (ketika mengklik back to top) lebih lembut & akan mengikuti scroll halaman.  Demo versionnya silakan perhatikan back to top di sebelah kanan bawah blog ini.

Catatan :
Jquery di atas sudah dikompres (compress) menggunakan online YUI Compressor.

• Letakkan jquery back to top tersebut di atas kode
• Tambahkan kode CSS berikut di atas ]]>.

#back-to-top {right:20px;bottom:40px;position:fixed;}

• Ganti kode dengan
• Selanjutnya tambahkan kode berikut di atas kode .

height='37' src='http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png' width='48'/>

Catatan :

1. height = tinggi image
2. width = lebar image
3. Silakan ganti image (http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png) dengan image kamu sendiri. Atau menggunakan image yang ada dengan terlebih dulu mendownloadnya dan upload ke hosting image kamu (Kenapa image tidak muncul?).

• Simpan template.

Selamat membuat back to top...

      

Share |