What's New Here?

Title Blog Search Engine Friendly Tips


Title Blog atau judul blog yang selalu muncul ketika link sebuah blog di klik atau artikel blog diklik adalah sebuah halaman index blog. Pada halaman index blog biasanya yang muncul pada title bar di browser adalah nama dari blog itu sendiri.



Tidak ada masalah memang bila yang muncul pada browser adalah nama blog, jadi artikel yang manapun yang dibuka tetap yang terlihat pada title bar

Title Blog Search Engine Friendly Tips

Posted by rike No comments


Title Blog atau judul blog yang selalu muncul ketika link sebuah blog di klik atau artikel blog diklik adalah sebuah halaman index blog. Pada halaman index blog biasanya yang muncul pada title bar di browser adalah nama dari blog itu sendiri.



Tidak ada masalah memang bila yang muncul pada browser adalah nama blog, jadi artikel yang manapun yang dibuka tetap yang terlihat pada title bar

Trik Blogger | Widget Kontak Kami dengan EmailMeForm

Kontak Kami
Tidak jarang pengunjung blog ingin mengajukan saran, masukan, atau pertanyaan diluar konteks posting yang kita buat. Bisa pula ada yang ingin memasang iklan, siapa tau... Tentu mereka ingin mengontak sang pemilik blog. Betul tidak? Tapi bagaimana caranya kalau mereka tidak menemukan fasilitas untuk menghubungi pemilik blog. Buka profil, kemudian lihat alamat email, login ke email dia, masukkan alamat email pemilik blog, dan akhirnya "send". Wah, terlalu rumit, bro. Jarang-jarang ada yang seperti itu... Jadi tidak ada salahnya apabila kita sebagai owner blog menyediakan fasilitas "kontak kami" tersebut dalam blog. Manfaatnya agar pengunjung blog dapat dengan mudah mengontak kita, apalagi jika ditambah dengan embel-embel "secret" atau "important". Nah, trik blogger kali ini kita akan mengulas cara memasang kontak kami dengan menggunakan widget EmailMeForm. Ayo, kita kuliti triknya (kaya pisang atau kacang atau hewan sembelihan aja he.. he..)


Berikut step by stepnya untuk membuat kontak kami :

  • Kamu bisa mengindahkan langkah ini, jika kamu merasa tidak perlu yakni membuat posting "Terima Kasih". Hmm... yang seperti apa yah? Contohnya seperti posting "Terima Kasih" ini.

Catatan :

  1. Agar postingan "Terima Kasih" tidak muncul di halaman Beranda/Home (pada saat klik Terbitkan Entri/Publish Post), ubahlah tanggal posting dengan meng-klik "Opsi Entri", lihat sebelah kanan "Tanggal dan jam entri" (dimundurkan tanggal/bulan/tahunnya).

  2. Dan posting ini juga tidak perlu ada komentar (pilih opsi "Komentar Pembaca" dengan "jangan izinkan").



  • Arahkan alamat browser kamu ke EmailMeForm.

  • Apabila kamu belum ada akun di EmailMeForm, klik Signup Now for Free.

  • Setelah selesai ngisi form pendaftaran, tunggu verifikasi email.

  • Kalau udah nongol di email kamu, klik link untuk verifikasi dan kamu akan dibawa kembali ke halaman EmailMeForm.

  • Login dengan akun kamu.

  • Klik Control Panel --> "Create a New Form".

  • Step 1

Web form Name :  Nama yang kamu inginkan, atau biarkan saja (contoh :  Kontak Kami, Contact Us, etc).

Recipients Emails :  Alamat email yang akan menerima pesan.

Thank you page : Alamat halaman web/blog yang berisi ucapan terima kasih. Kalau kamu membuat seperti pada point pertama, maka kamu bisa memasukkan alamat postingannya disini.
  • Next  --> Step 2

Berisi form yang akan diisi oleh pengunjung blog untuk mengontak kita via email, terdiri dari : Your Name, Your Email Address, Subject, dan Message. Bisa kamu rubah atau biarkan sesuai dengan yang ada.
  • Next  --> Step 3

  • Next  --> Step 4

  • Next  --> Step 5

  • Next  --> Step 6



  • Finish

  • Klik "get the HTML Code" --> Copy kode dalam text area di bawah tulisan "Copy and paste this HTML code into your page:" dan paste dalam notepad atau text editor lainnya.

  • Selanjutnya, buat sebuah postingan seperti biasa dan copas kode HTML di notepad ke dalam postingan kamu, contohnya seperti postingan "Kontak Kami" ini.

Catatan :

  1. Agar postingan "Kontak Kami" tidak muncul di halaman Beranda/Home (pada saat klik Terbitkan Entri/Publish Post), ubahlah tanggal posting dengan meng-klik "Opsi Entri", lihat sebelah kanan "Tanggal dan jam entri" (dimundurkan tanggal/bulan/tahunnya).

  2. Dan posting ini juga tidak perlu ada komentar (pilih opsi "Komentar Pembaca" dengan "jangan izinkan").



  • Terbitkan.

  • Terakhir buatlah link ke "Kontak Kami" yang berfungsi untuk memudahkan pengunjung menggunakan fasilitas ini, contoh ; menu navigasi, link di sidebar, dan sebagainya.

Selamat memasang "Kontak Kami" dengan widget EmailMeForm...

Trik Blogger | Widget Kontak Kami dengan EmailMeForm

Posted by rike No comments

Kontak Kami
Tidak jarang pengunjung blog ingin mengajukan saran, masukan, atau pertanyaan diluar konteks posting yang kita buat. Bisa pula ada yang ingin memasang iklan, siapa tau... Tentu mereka ingin mengontak sang pemilik blog. Betul tidak? Tapi bagaimana caranya kalau mereka tidak menemukan fasilitas untuk menghubungi pemilik blog. Buka profil, kemudian lihat alamat email, login ke email dia, masukkan alamat email pemilik blog, dan akhirnya "send". Wah, terlalu rumit, bro. Jarang-jarang ada yang seperti itu... Jadi tidak ada salahnya apabila kita sebagai owner blog menyediakan fasilitas "kontak kami" tersebut dalam blog. Manfaatnya agar pengunjung blog dapat dengan mudah mengontak kita, apalagi jika ditambah dengan embel-embel "secret" atau "important". Nah, trik blogger kali ini kita akan mengulas cara memasang kontak kami dengan menggunakan widget EmailMeForm. Ayo, kita kuliti triknya (kaya pisang atau kacang atau hewan sembelihan aja he.. he..)


Berikut step by stepnya untuk membuat kontak kami :

  • Kamu bisa mengindahkan langkah ini, jika kamu merasa tidak perlu yakni membuat posting "Terima Kasih". Hmm... yang seperti apa yah? Contohnya seperti posting "Terima Kasih" ini.

Catatan :

  1. Agar postingan "Terima Kasih" tidak muncul di halaman Beranda/Home (pada saat klik Terbitkan Entri/Publish Post), ubahlah tanggal posting dengan meng-klik "Opsi Entri", lihat sebelah kanan "Tanggal dan jam entri" (dimundurkan tanggal/bulan/tahunnya).

  2. Dan posting ini juga tidak perlu ada komentar (pilih opsi "Komentar Pembaca" dengan "jangan izinkan").



  • Arahkan alamat browser kamu ke EmailMeForm.

  • Apabila kamu belum ada akun di EmailMeForm, klik Signup Now for Free.

  • Setelah selesai ngisi form pendaftaran, tunggu verifikasi email.

  • Kalau udah nongol di email kamu, klik link untuk verifikasi dan kamu akan dibawa kembali ke halaman EmailMeForm.

  • Login dengan akun kamu.

  • Klik Control Panel --> "Create a New Form".

  • Step 1

Web form Name :  Nama yang kamu inginkan, atau biarkan saja (contoh :  Kontak Kami, Contact Us, etc).

Recipients Emails :  Alamat email yang akan menerima pesan.

Thank you page : Alamat halaman web/blog yang berisi ucapan terima kasih. Kalau kamu membuat seperti pada point pertama, maka kamu bisa memasukkan alamat postingannya disini.
  • Next  --> Step 2

Berisi form yang akan diisi oleh pengunjung blog untuk mengontak kita via email, terdiri dari : Your Name, Your Email Address, Subject, dan Message. Bisa kamu rubah atau biarkan sesuai dengan yang ada.
  • Next  --> Step 3

  • Next  --> Step 4

  • Next  --> Step 5

  • Next  --> Step 6



  • Finish

  • Klik "get the HTML Code" --> Copy kode dalam text area di bawah tulisan "Copy and paste this HTML code into your page:" dan paste dalam notepad atau text editor lainnya.

  • Selanjutnya, buat sebuah postingan seperti biasa dan copas kode HTML di notepad ke dalam postingan kamu, contohnya seperti postingan "Kontak Kami" ini.

Catatan :

  1. Agar postingan "Kontak Kami" tidak muncul di halaman Beranda/Home (pada saat klik Terbitkan Entri/Publish Post), ubahlah tanggal posting dengan meng-klik "Opsi Entri", lihat sebelah kanan "Tanggal dan jam entri" (dimundurkan tanggal/bulan/tahunnya).

  2. Dan posting ini juga tidak perlu ada komentar (pilih opsi "Komentar Pembaca" dengan "jangan izinkan").



  • Terbitkan.

  • Terakhir buatlah link ke "Kontak Kami" yang berfungsi untuk memudahkan pengunjung menggunakan fasilitas ini, contoh ; menu navigasi, link di sidebar, dan sebagainya.

Selamat memasang "Kontak Kami" dengan widget EmailMeForm...

Memasang Button Show/Hide (Spoiler)

Spoiler apaan OB? "Oh, asessoris yang biasa digunakan di belakang mobil, sehingga kaya mobil balap". Kalau OB membahas mobil, apa ada hubungannya dengan optimasi blog??? (wkakakakakak). Maksud spoiler di sini adalah menyembunyikan teks, image, dan/atau widget sehingga menghemat ruang suatu blog. Kemudian teks, image, dan/atau widget tersebut dapat ditampilkan kembali dengan menggunakan perintah (baca: bahasa pemprograman) tertentu. Ujung-ujungnya kita menggunakan "button" lagi, "button" memang ngga ada matinya (he..he.. no promotion). Khusus pengguna Wordpress, pluginnya dapat langsung diunduh di felixtriller.de. Sedangkan untuk blogger, mari kita ulas triknya tentang memasang spoiler.


Widget ini dapat kamu manfaatkan baik dalam postingan, sidebar, dan/atau elemen lainnya yang memiliki kesesuaian dengan widget spoiler.




Adapun kode HTML-nya adalah sebagai berikut :

<div style="text-align: center;"><div class="button-spoiler"><input value="Contoh Penggunaan Spoiler" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka Lagi'; }" type="button"/></div><div class="spoiler"><div style="display: none;">

<div style="text-align: left; padding: 10px; border: 3px inset #333; font-size: small;">

Silakan disimak dan dicermati :

<ul
><li>Di sini kamu bisa memasukkan teks, kode, atau script</li>

<li>Kamu juga bisa memasukkan image</li>

<center><img border="0" alt="U Comments I Follow" src="http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/follow2.jpg"/></center>

<li>Klik button "Tutup" untuk menghilangkan area ini</li></ul>

</div></div></div></div>


Keterangan :

  • Ganti kode berwarna biru dengan kata atau kalimat yang kamu inginkan.

  • Kode berwarna hijau merupakan gambaran area teks, image, dan/atau widget yang akan kamu masukan.

  • Ganti kode yang berwarna merah dengan teks, image, dan/atau widget yang akan kamu inginkan.

  • Tidak menutup kemungkinan kamu dapat menambah dan mengurangi kode yang telah ada selama format dasar kode pembuatan spoiler tidak berubah, seperti dalam kode style="....." (yang berkelap-kelip) dapat ditambah atau dikurangi.




Hasilnya :

Silakan disimak dan dicermati :
  • Di sini kamu bisa memasukkan teks, kode, atau script

  • Kamu juga bisa memasukkan image


  • U Comments I Follow

  • Klik button "Tutup" untuk menghilangkan area ini



Akhirnya selamat menyembunyikan teks, image, dan/atau widget dengan spoiler...


Memasang Button Show/Hide (Spoiler)

Posted by rike No comments

Spoiler apaan OB? "Oh, asessoris yang biasa digunakan di belakang mobil, sehingga kaya mobil balap". Kalau OB membahas mobil, apa ada hubungannya dengan optimasi blog??? (wkakakakakak). Maksud spoiler di sini adalah menyembunyikan teks, image, dan/atau widget sehingga menghemat ruang suatu blog. Kemudian teks, image, dan/atau widget tersebut dapat ditampilkan kembali dengan menggunakan perintah (baca: bahasa pemprograman) tertentu. Ujung-ujungnya kita menggunakan "button" lagi, "button" memang ngga ada matinya (he..he.. no promotion). Khusus pengguna Wordpress, pluginnya dapat langsung diunduh di felixtriller.de. Sedangkan untuk blogger, mari kita ulas triknya tentang memasang spoiler.


Widget ini dapat kamu manfaatkan baik dalam postingan, sidebar, dan/atau elemen lainnya yang memiliki kesesuaian dengan widget spoiler.




Adapun kode HTML-nya adalah sebagai berikut :

<div style="text-align: center;"><div class="button-spoiler"><input value="Contoh Penggunaan Spoiler" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka Lagi'; }" type="button"/></div><div class="spoiler"><div style="display: none;">

<div style="text-align: left; padding: 10px; border: 3px inset #333; font-size: small;">

Silakan disimak dan dicermati :

<ul
><li>Di sini kamu bisa memasukkan teks, kode, atau script</li>

<li>Kamu juga bisa memasukkan image</li>

<center><img border="0" alt="U Comments I Follow" src="http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/follow2.jpg"/></center>

<li>Klik button "Tutup" untuk menghilangkan area ini</li></ul>

</div></div></div></div>


Keterangan :

  • Ganti kode berwarna biru dengan kata atau kalimat yang kamu inginkan.

  • Kode berwarna hijau merupakan gambaran area teks, image, dan/atau widget yang akan kamu masukan.

  • Ganti kode yang berwarna merah dengan teks, image, dan/atau widget yang akan kamu inginkan.

  • Tidak menutup kemungkinan kamu dapat menambah dan mengurangi kode yang telah ada selama format dasar kode pembuatan spoiler tidak berubah, seperti dalam kode style="....." (yang berkelap-kelip) dapat ditambah atau dikurangi.




Hasilnya :

Silakan disimak dan dicermati :
  • Di sini kamu bisa memasukkan teks, kode, atau script

  • Kamu juga bisa memasukkan image


  • U Comments I Follow

  • Klik button "Tutup" untuk menghilangkan area ini



Akhirnya selamat menyembunyikan teks, image, dan/atau widget dengan spoiler...


Membuat "Buttton" Sederhana dalam Blog

Kamu tahu dong yang namanya "button", yap,... button yang kita optimasi kali ini merupakan visualisasi tombol yang ada pada layar monitor kamu. Pada saat kamu meng-klik tombol tersebut (dengan menggunakan mouse) maka akan terjadi sesuatu (Kamus Komputer dan Teknologi Informasi). Sok ilmiah, padahal nyontek tuh (ha..ha.. bruaaakkk). Kok, ada bunyi "bruaaakkk"-nya? Sorry, saking terpingkalnya, OB jatuh dari kursi. Kembali ke button! Untuk peng-kode-annya dalam HTML dijabarkan sebagai berikut :

<button type="button">Tulis teks kamu di sini</button>


Hasilnya :







Mudah bukan? Kalau begitu selesai deh postingnya... Lho kok simpel kali OB? It's just kidding, friend. Yuk, kita ikuti lanjutan trik blogger optimasi button dalam blog.


Sebelum beranjak lebih jauh, mari sama-sama kita kupas peng-kode-an sederhana lainnya untuk menghiasi sebuah "button". Contohnya seperti di bawah ini :



Adapun kode HTML "button di atas adalah :

<button type="button" style="background:#000000; color:#FFFFFF; font:bold 20px Verdana, Geneva, sans-serif; margin:5px 0 5px 0; padding: 0 10px 0 10px;">Click Me!</button>


Keterangan :

  • background : warna latar button.

  • color: warna teks/tulisan.

  • padding : Jarak tepi button dengan teks di dalamnya (ke dalam), 0 10px 0 10px artinya padding atas=0; kanan=10px; bawah=0; kiri=10px.

  • margin: jarak button dengan tepi bidang gambar (ke luar), 5px 0 5px 0 artinya margin atas=5px; kanan=0; bawah=5px; kiri=0.

  • font : huruf teks.

Catatan :
Masih banyak asessoris kode lainnya yang dapat kamu tambahkan dalam "button" tersebut.



Namun tidak jarang, kita ingin membuat lebih dari satu button dalam menghiasi blog. Apabila karakteristik "button" yang akan kamu tambahkan sama dengan "button" yang telah ada, tentu kamu akan senantiasa berulangkali menulis kode yang sama pula. Betul tidak? Alangkah kurang efesiennya penulisan kode HTML yang berulang-ulang tersebut. Sehingga adalah merupakan hal yang arif, jika kita mengatur kode tersebut agar lebih multiguna gitu loh. Nah, disinilah muncul peran CSS (jangan tanya kepanjangannya, ya?) yang bermanfaat untuk menampilkan elemen HTML. Mari kita ambil kode HTML "button" diatas dan akan kita jadikan ke dalam bentuk CSS :

#buttonku {

background:#000000;

color:#FFFFFF;

font:bold 20px Verdana, Geneva, sans-serif;

margin:5px 0 5px 0;

padding: 0 10px 0 10px; }


Catatan :

Dalam blog kode CSS biasanya berada diantara kode <b:skin><![CDATA[ ... ]]></b:skin>.



Selanjutnya tinggal mengatur HTML-nya seperti ini :

<button id="buttonku" type="button">Click Me!</button>

<button id="buttonku" type="button">Click Me too!</button>

<button id="buttonku" type="button">Click Me too..too!</button>

... dst


Hasilnya :









..dst



Catatan :

Apabila kamu ingin lebih memperdalam ilmu pemprograman ini yang di antaranya termasuk HTML dan CSS, coba kunjungi W3schools.



Hmm... rasanya ada yang kelupaan nih? Oh, iya...! Sekarang bagaimana kalau "button" tersebut ingin kita letakkan sebuah link. Caranya cukup mudah, yakni dengan menyisipkan kode HTML "button" ke dalam kode link yang lebih kurangnya digambarkan sebagai berikut :

<a href="...alamat yang dituju..." target="blank"><button type="button">Tulis teks kamu di sini</button></a>


Keterangan :

target="blank" diartikan link akan diarahkan ke tab baru.



Tips :

Jika link berada dalam blog kita sendiri, sebaiknya jangan diarahkan ke tab baru (boros he..he..). Sebaliknya jika link berada di luar area blog, silakan tambahkan kode target="blank" tersebut.



Contoh "button" dengan menggunakan link :

<a href="http://optimasi-blog.blogspot.com/"><button type="button">Optimasi Blog</button></a>

<a href="http://www.w3schools.com/" target="blank"><button type="button">W3Schools</button></a>


Hasilnya :









Kamu pun bisa mencoba untuk mengobrak-abrik kode lainnya, sehingga tampilan "button" tersebut berkesesuaian dengan apa yang kamu inginkan. Akhirnya, Selamat ber-"button" ria...

Membuat "Buttton" Sederhana dalam Blog

Posted by rike No comments

Kamu tahu dong yang namanya "button", yap,... button yang kita optimasi kali ini merupakan visualisasi tombol yang ada pada layar monitor kamu. Pada saat kamu meng-klik tombol tersebut (dengan menggunakan mouse) maka akan terjadi sesuatu (Kamus Komputer dan Teknologi Informasi). Sok ilmiah, padahal nyontek tuh (ha..ha.. bruaaakkk). Kok, ada bunyi "bruaaakkk"-nya? Sorry, saking terpingkalnya, OB jatuh dari kursi. Kembali ke button! Untuk peng-kode-annya dalam HTML dijabarkan sebagai berikut :

<button type="button">Tulis teks kamu di sini</button>


Hasilnya :







Mudah bukan? Kalau begitu selesai deh postingnya... Lho kok simpel kali OB? It's just kidding, friend. Yuk, kita ikuti lanjutan trik blogger optimasi button dalam blog.


Sebelum beranjak lebih jauh, mari sama-sama kita kupas peng-kode-an sederhana lainnya untuk menghiasi sebuah "button". Contohnya seperti di bawah ini :



Adapun kode HTML "button di atas adalah :

<button type="button" style="background:#000000; color:#FFFFFF; font:bold 20px Verdana, Geneva, sans-serif; margin:5px 0 5px 0; padding: 0 10px 0 10px;">Click Me!</button>


Keterangan :

  • background : warna latar button.

  • color: warna teks/tulisan.

  • padding : Jarak tepi button dengan teks di dalamnya (ke dalam), 0 10px 0 10px artinya padding atas=0; kanan=10px; bawah=0; kiri=10px.

  • margin: jarak button dengan tepi bidang gambar (ke luar), 5px 0 5px 0 artinya margin atas=5px; kanan=0; bawah=5px; kiri=0.

  • font : huruf teks.

Catatan :
Masih banyak asessoris kode lainnya yang dapat kamu tambahkan dalam "button" tersebut.



Namun tidak jarang, kita ingin membuat lebih dari satu button dalam menghiasi blog. Apabila karakteristik "button" yang akan kamu tambahkan sama dengan "button" yang telah ada, tentu kamu akan senantiasa berulangkali menulis kode yang sama pula. Betul tidak? Alangkah kurang efesiennya penulisan kode HTML yang berulang-ulang tersebut. Sehingga adalah merupakan hal yang arif, jika kita mengatur kode tersebut agar lebih multiguna gitu loh. Nah, disinilah muncul peran CSS (jangan tanya kepanjangannya, ya?) yang bermanfaat untuk menampilkan elemen HTML. Mari kita ambil kode HTML "button" diatas dan akan kita jadikan ke dalam bentuk CSS :

#buttonku {

background:#000000;

color:#FFFFFF;

font:bold 20px Verdana, Geneva, sans-serif;

margin:5px 0 5px 0;

padding: 0 10px 0 10px; }


Catatan :

Dalam blog kode CSS biasanya berada diantara kode <b:skin><![CDATA[ ... ]]></b:skin>.



Selanjutnya tinggal mengatur HTML-nya seperti ini :

<button id="buttonku" type="button">Click Me!</button>

<button id="buttonku" type="button">Click Me too!</button>

<button id="buttonku" type="button">Click Me too..too!</button>

... dst


Hasilnya :









..dst



Catatan :

Apabila kamu ingin lebih memperdalam ilmu pemprograman ini yang di antaranya termasuk HTML dan CSS, coba kunjungi W3schools.



Hmm... rasanya ada yang kelupaan nih? Oh, iya...! Sekarang bagaimana kalau "button" tersebut ingin kita letakkan sebuah link. Caranya cukup mudah, yakni dengan menyisipkan kode HTML "button" ke dalam kode link yang lebih kurangnya digambarkan sebagai berikut :

<a href="...alamat yang dituju..." target="blank"><button type="button">Tulis teks kamu di sini</button></a>


Keterangan :

target="blank" diartikan link akan diarahkan ke tab baru.



Tips :

Jika link berada dalam blog kita sendiri, sebaiknya jangan diarahkan ke tab baru (boros he..he..). Sebaliknya jika link berada di luar area blog, silakan tambahkan kode target="blank" tersebut.



Contoh "button" dengan menggunakan link :

<a href="http://optimasi-blog.blogspot.com/"><button type="button">Optimasi Blog</button></a>

<a href="http://www.w3schools.com/" target="blank"><button type="button">W3Schools</button></a>


Hasilnya :









Kamu pun bisa mencoba untuk mengobrak-abrik kode lainnya, sehingga tampilan "button" tersebut berkesesuaian dengan apa yang kamu inginkan. Akhirnya, Selamat ber-"button" ria...

Mengubah Navigasi Older Newer Posts Menjadi NEXT PREV


Dilihat dari judul artikel kali ini navigasi blog yang dimaksud adalah navigasi yang terlihat saat pengguna internet melihat-lihat isi blog kita, dimana di bagian akhir dari sebuah artikel biasanya bertuliskan Older Posts untuk melihat postingan lama dan Newer Posts untuk melihat postingan artikel terbaru.



Navigasi Older Posts dan Newer Posts ini bisa diganti dengan navigasi yang lain seperti

Mengubah Navigasi Older Newer Posts Menjadi NEXT PREV

Posted by rike No comments


Dilihat dari judul artikel kali ini navigasi blog yang dimaksud adalah navigasi yang terlihat saat pengguna internet melihat-lihat isi blog kita, dimana di bagian akhir dari sebuah artikel biasanya bertuliskan Older Posts untuk melihat postingan lama dan Newer Posts untuk melihat postingan artikel terbaru.



Navigasi Older Posts dan Newer Posts ini bisa diganti dengan navigasi yang lain seperti

Daftar Isi Blog Tidak Bertanggal




Artikel tentang Daftar Isi Blog sudah banyak diposting oleh para blogger baik yang berbahasa indonesia maupun berbahasa asing sudah seabrek artikel namun namanya juga manusia tidak ingin susah-susah mencari, maunya langsung saja dipasang di blog kesayangan supaya tidak repot. Begitu kira-kira harapan salah seorang pengikut group Belajar Ilmu Komputer di facebook yang mengirim pesan ke saya

Daftar Isi Blog Tidak Bertanggal

Posted by rike No comments




Artikel tentang Daftar Isi Blog sudah banyak diposting oleh para blogger baik yang berbahasa indonesia maupun berbahasa asing sudah seabrek artikel namun namanya juga manusia tidak ingin susah-susah mencari, maunya langsung saja dipasang di blog kesayangan supaya tidak repot. Begitu kira-kira harapan salah seorang pengikut group Belajar Ilmu Komputer di facebook yang mengirim pesan ke saya

Menghapus secara permanen navbar blogger Anda

navbarBagi kamu yang perduli dengan validasi terhadap blog kamu, saya rasa cara ini pantas diterapkan di blog blogspot kamu, karena engine blogspot terlalu banyak kode-kode validasi yang error.



Sekarang Anda dapat secara permanen menghapus navbar blogger tersebut.



Biasanya sangat mudah untuk menyembunyikan. Yang harus Anda lakukan hanyalah menambahkan sedikit kode dalam template.



Sebelumnya kami juga menggunakan kode CSS untuk hanya menyembunyikan navbar tersebut.



Cukup ikuti langkah-langkah di bawah ini



1. Login ke Blogger>> Tata Letak >> Edit HTML



2. Cari kode <body> dan tambahkan Kode berikut tepat di atas itu.



<script type='text/javascript'>

<![CDATA[

<!--

/*<body>*/

-->

]]>

</script>




Setelah itu simpan template dan Anda akan melihat gambar konformasi seperti di bawah ini.



navbar blogger





Klik widget menghapus dan navbar akan dihapus.









Kerugian utama menghapus adalah bahwa Anda juga akan menghapus Link Quick Edit gambar pensil quick editatau Link Quick Edit gambar kunci pas link wrench link di blog Anda, walaupun Anda sedang dalam keadaan login.



Cara Ini sangat banyak mengurangi valiadasi error pada blog kita.



Bagi kamu-kamu yang ingin blognya ingin mengurangi error pada validasi bisa membaca postingan tentang Step By Step Validasi Blogger disini...


Menghapus secara permanen navbar blogger Anda

Posted by rike No comments

navbarBagi kamu yang perduli dengan validasi terhadap blog kamu, saya rasa cara ini pantas diterapkan di blog blogspot kamu, karena engine blogspot terlalu banyak kode-kode validasi yang error.



Sekarang Anda dapat secara permanen menghapus navbar blogger tersebut.



Biasanya sangat mudah untuk menyembunyikan. Yang harus Anda lakukan hanyalah menambahkan sedikit kode dalam template.



Sebelumnya kami juga menggunakan kode CSS untuk hanya menyembunyikan navbar tersebut.



Cukup ikuti langkah-langkah di bawah ini



1. Login ke Blogger>> Tata Letak >> Edit HTML



2. Cari kode <body> dan tambahkan Kode berikut tepat di atas itu.



<script type='text/javascript'>

<![CDATA[

<!--

/*<body>*/

-->

]]>

</script>




Setelah itu simpan template dan Anda akan melihat gambar konformasi seperti di bawah ini.



navbar blogger





Klik widget menghapus dan navbar akan dihapus.









Kerugian utama menghapus adalah bahwa Anda juga akan menghapus Link Quick Edit gambar pensil quick editatau Link Quick Edit gambar kunci pas link wrench link di blog Anda, walaupun Anda sedang dalam keadaan login.



Cara Ini sangat banyak mengurangi valiadasi error pada blog kita.



Bagi kamu-kamu yang ingin blognya ingin mengurangi error pada validasi bisa membaca postingan tentang Step By Step Validasi Blogger disini...


Memilih Modem Terbaik


Internet saat ini sudah tersedia dimana-mana, di sekolah, kampus, warnet, kantin, bar, hotel, kantor pemerintahan baik yang bebas penggunaannya (gratis) maupun yang berbayar.



Untuk yang bebas tentu tidak sebebas yang dipikirkan banyak orang termasuk saya...hehehe...tidak mungkinkan diberikan akses internet gratis begitu saja tentu ada syaratnya. Biasanya di sebuah kantin misalnya terdapat

Memilih Modem Terbaik

Posted by rike No comments


Internet saat ini sudah tersedia dimana-mana, di sekolah, kampus, warnet, kantin, bar, hotel, kantor pemerintahan baik yang bebas penggunaannya (gratis) maupun yang berbayar.



Untuk yang bebas tentu tidak sebebas yang dipikirkan banyak orang termasuk saya...hehehe...tidak mungkinkan diberikan akses internet gratis begitu saja tentu ada syaratnya. Biasanya di sebuah kantin misalnya terdapat

Menambah Sexy Sliding Sidebar di Blogspot

Sexy sliding Sidebar ini adalah alternatif lain pengganti Navigation Menu biasa, nah bila blog anda belum mempunyai Navigation Menu ataupun tidak ingin memakai Navigation Menu karena satu dan lain hal, Sexy sliding sidebar ini bisa menjadi alternatifnya.



sexy sidebar





Live Demo





Sekarang Mari Lihat Bagaimana Cara Memasangnya ....



  • Pertama login ke blogger

  • Pergi ke ---> Tata Letak

  • Klik Di Tambah Gadget

  • Pilih Html / Javascript

  • Dan Copy Paste Kode yang dibawah ini :



<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/prototype.js" type="text/javascript"></script>

<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/effects.js" type="text/javascript"></script>

<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/side-bar.js" type="text/javascript"></script>

<style>

body{

font-size:75%;

}

a{

outline: none;

}

a:active{

outline: none;

}

#sideBar{

text-align:left;

}

#sideBar h2{

color:#FFFFFF;

font-size:110%;

font-family:arial;

margin:10px 10px 10px 10px;

font-weight:bold !important;

}

#sideBar h2 span{

font-size:125%;

font-weight:normal !important;

}

#sideBar ul{

margin:0px 0px 0px 0px;

padding:0px 0px 0px 0px;

}

#sideBar li{

margin:0px 10px 3px 10px;

padding:2px;

list-style-type:none;

display:block;

background-color:#DA1074;

width:177px;

color:#FFFFFF;

}

#sideBar li a{

width:100%;

}

#sideBar li a:link,

#sideBar li a:visited{

color:#FFFFFF;

font-family:verdana;

font-size:100%;

text-decoration:none;

display:block;

margin:0px 0px 0px 0px;

padding:0px;

width:100%;

}

#sideBar li a:hover{

color:#FFFFFF;

text-decoration:underline;

}

#sideBar{

position: fixed;

width: auto;

height: auto;

top: 140px;

left:0px;

background-image:url(http://i49.tinypic.com/121abrq.jpg);

background-position:top right;

background-repeat:repeat-y;

}

#sideBarTab{

float:left;

height:137px;

width:28px;

}

#sideBarTab img{

border:0px solid #FFFFFF;

}

#sideBarContents{

float:left;

overflow:hidden !important;

width:200px;

height:320px;

}

#sideBarContentsInner{

width:200px;

}</style>

<div id="sideBar">

<div id="sideBarContents" style="display:none;">

<div id="sideBarContentsInner">

<h2>side<span>bar</span></h2>

<ul>

<li><a href="#">Link One</a></li>

<li><a href="#">Link Two</a></li>

<li><a href="#">Link Three</a></li>

<li><a href="#">Link Four</a></li>

</ul>

</div> </div>

<a id="sideBarTab" href="#"><img alt="sideBar" src="http://i46.tinypic.com/ao8h9u.jpg" title="sideBar"/></a>

</div>




Sekarang Klik Simpan ...



Rubah Kode warna Merah Dengan Link Dan Teks Dari Pilihan Anda



Sekarang lihat hasilnya Blog Anda....


Menambah Sexy Sliding Sidebar di Blogspot

Posted by rike No comments

Sexy sliding Sidebar ini adalah alternatif lain pengganti Navigation Menu biasa, nah bila blog anda belum mempunyai Navigation Menu ataupun tidak ingin memakai Navigation Menu karena satu dan lain hal, Sexy sliding sidebar ini bisa menjadi alternatifnya.



sexy sidebar





Live Demo





Sekarang Mari Lihat Bagaimana Cara Memasangnya ....



  • Pertama login ke blogger

  • Pergi ke ---> Tata Letak

  • Klik Di Tambah Gadget

  • Pilih Html / Javascript

  • Dan Copy Paste Kode yang dibawah ini :



<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/prototype.js" type="text/javascript"></script>

<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/effects.js" type="text/javascript"></script>

<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/side-bar.js" type="text/javascript"></script>

<style>

body{

font-size:75%;

}

a{

outline: none;

}

a:active{

outline: none;

}

#sideBar{

text-align:left;

}

#sideBar h2{

color:#FFFFFF;

font-size:110%;

font-family:arial;

margin:10px 10px 10px 10px;

font-weight:bold !important;

}

#sideBar h2 span{

font-size:125%;

font-weight:normal !important;

}

#sideBar ul{

margin:0px 0px 0px 0px;

padding:0px 0px 0px 0px;

}

#sideBar li{

margin:0px 10px 3px 10px;

padding:2px;

list-style-type:none;

display:block;

background-color:#DA1074;

width:177px;

color:#FFFFFF;

}

#sideBar li a{

width:100%;

}

#sideBar li a:link,

#sideBar li a:visited{

color:#FFFFFF;

font-family:verdana;

font-size:100%;

text-decoration:none;

display:block;

margin:0px 0px 0px 0px;

padding:0px;

width:100%;

}

#sideBar li a:hover{

color:#FFFFFF;

text-decoration:underline;

}

#sideBar{

position: fixed;

width: auto;

height: auto;

top: 140px;

left:0px;

background-image:url(http://i49.tinypic.com/121abrq.jpg);

background-position:top right;

background-repeat:repeat-y;

}

#sideBarTab{

float:left;

height:137px;

width:28px;

}

#sideBarTab img{

border:0px solid #FFFFFF;

}

#sideBarContents{

float:left;

overflow:hidden !important;

width:200px;

height:320px;

}

#sideBarContentsInner{

width:200px;

}</style>

<div id="sideBar">

<div id="sideBarContents" style="display:none;">

<div id="sideBarContentsInner">

<h2>side<span>bar</span></h2>

<ul>

<li><a href="#">Link One</a></li>

<li><a href="#">Link Two</a></li>

<li><a href="#">Link Three</a></li>

<li><a href="#">Link Four</a></li>

</ul>

</div> </div>

<a id="sideBarTab" href="#"><img alt="sideBar" src="http://i46.tinypic.com/ao8h9u.jpg" title="sideBar"/></a>

</div>




Sekarang Klik Simpan ...



Rubah Kode warna Merah Dengan Link Dan Teks Dari Pilihan Anda



Sekarang lihat hasilnya Blog Anda....


Gratis: Social Bookmark Widget di bawah setiap Posting Blog

Social Bookmark Widget ini adalah sebuah revolusi baru untuk blogger. Hal ini memungkinkan pengunjung blog Anda dengan cepat berbagi postingan blog Anda ke Situs Social Bookmar populer. Yang paling penting dalam widget ini adalah tampilannya. Widget ini cocok untuk semua jenis blogger template dan 100% kompatibel dengan semua blogspot template dan layout termasuk xml blogger template premium.



Caranya cukup sederhana untuk memasukkan di blog blogspot, jadi mari kita lihat bagaimana melakukannya.





Pertama login ke Blogger. Pergi ke Layout --> Edit / Html

cek pada Expand Widget Konten



Kemudian cari kode :



<data:post.body/>



Ganti kode diatas dengan kode-kode pilihan kamu dibawah ini :



small social bookmark





<data:post.body/><br /><script type="text/javascript" src="http://www.letsgetsocialnow.com/source-codes/small.js" language="JavaScript"></script>






medium db





<data:post.body/><br /><script type="text/javascript" src="http://www.letsgetsocialnow.com/source-codes/medium.js" language="JavaScript"></script>






larger sb





<data:post.body/><br /><script type="text/javascript" src="http://www.letsgetsocialnow.com/source-codes/large.js" language="JavaScript"></script>






Sekarang simpan template kamu dan lihat hasilnya......


Gratis: Social Bookmark Widget di bawah setiap Posting Blog

Posted by rike No comments

Social Bookmark Widget ini adalah sebuah revolusi baru untuk blogger. Hal ini memungkinkan pengunjung blog Anda dengan cepat berbagi postingan blog Anda ke Situs Social Bookmar populer. Yang paling penting dalam widget ini adalah tampilannya. Widget ini cocok untuk semua jenis blogger template dan 100% kompatibel dengan semua blogspot template dan layout termasuk xml blogger template premium.



Caranya cukup sederhana untuk memasukkan di blog blogspot, jadi mari kita lihat bagaimana melakukannya.





Pertama login ke Blogger. Pergi ke Layout --> Edit / Html

cek pada Expand Widget Konten



Kemudian cari kode :



<data:post.body/>



Ganti kode diatas dengan kode-kode pilihan kamu dibawah ini :



small social bookmark





<data:post.body/><br /><script type="text/javascript" src="http://www.letsgetsocialnow.com/source-codes/small.js" language="JavaScript"></script>






medium db





<data:post.body/><br /><script type="text/javascript" src="http://www.letsgetsocialnow.com/source-codes/medium.js" language="JavaScript"></script>






larger sb





<data:post.body/><br /><script type="text/javascript" src="http://www.letsgetsocialnow.com/source-codes/large.js" language="JavaScript"></script>






Sekarang simpan template kamu dan lihat hasilnya......


Blogger templates. Proudly Powered by Blogger.
back to top