Pada tulisan kali ini saya akan mengulas tentang modifikasi blogger template. Tutorial ini saya tujukan untuk blogger newbie seperti saya. Mungkin beberapa dari teman-teman sudah banyak yang tau, tetapi saya ingin menjelaskan langkah demi langkah untuk blogger yang mungkin belum tau.

Seperti yang kita ketahui, blogger menyediakan beberapa template yang bisa kita pakai. Namun, untuk beberapa orang, template blogger dinilai cukup standard dan kurang menarik. Perlu dilakukan modifikasi dengan penambahan widget untuk membuat blog lebih fresh dan menarik.

Ada 2 cara mudah yang bisa dilakukan tanpa programming HTML / XML atau CSS. Cara yang pertama adalah dengan memanfaatkan fitur baru dari blogger sedangkan cara yang kedua adalah dengan meng-upload file blogger template.

Untuk cara yang pertama berikut langkah-langkahnya:

1. Buka alamat http://draft.blogger.com

2. Login dengan account blogger kamu.
    
3. Pilih menu Design kemudian pilih Template Designer

   

4. Akan muncul suatu jendela designer template.

   
    

5. Pilih bentuk dari template yang diinginkan (ada 3 template yang tersedia) kemudian pilih jenis background dan warna (yang ada di bawah dari masing-masing bentuk template). Kamu juga bisa memilih bentuk layout dengan memilih menu di sebelah kiri.

Untuk cara yang kedua berikut langkah-langkahnya:

1. Buka alamat blogger.com
    
2. Login dengan account kamu.
    
3. Pilih menu Template kemudian pilih Edit HTML.
    
4. Klik tombol Browse untuk meng-upload file template (.xml) yang sudah di download. File ini bisa kamu temukan dengan mencari di google dengan keyword "download blogger template xml" atau kamu bisa mengunjungi Reborn Blogger dan blog-template.ivanjaya.net

   

   
    

5. Klik tombol upload untuk meng-upload file dan template kamu akan berganti.

   

   Jika ada keluar jendela peringatan untuk memilih (Keep Widget | Delete Widget), kamu bisa memilih apakah widget yang kamu punya mau dihapus atau tidak. Jika tidak pilih Keep Widget. Jika iya pilih Delete Widget.

Banyak website-website dan blog terkenal menggunakan blogger. Banyak kemudahan yang diberikan blogger dari memodifikasi bentuk layout menjadi terlihat profesional, penambahan widget serta monetisasi blog.

Bagaimana dengan kamu?

Pada tulisan saya yang sebelumnya, saya menulis mengenai onion emoticons pada blogger post dengan menggunakan browser mozilla firefox dan plugin greasemonkey.

Bagaimana dengan blogger comment, apakah bisa ditambahkan onion emoticons?

Pada blogger comment tidak diizinkan penulisan komentar dengan menggunakan script HTML dan Javascript, sehingga greasemonkey tidak bisa digunakan pada blogger comment. Cara lain adalah dengan memodifikasi blogger layout.

Kamu bisa mengikuti langkah-langkah sebagai berikut:

1. Login ke blogger account.

    

2. Pilih menu Setting > Comments. Pada Comment Form Placement, pilih Embeded below post. Kemudian pilih Save Settings.

    

3. Setelah itu, pilih menu layout > Edit HTML dan ceck Expand Widget Templates.

   

4. Cari tulisan </body>, kemudian tambahkan script di bawah ini sebelum tulisan </body> tersebut:
   

   <script src='http://www.ivanjaya.net/download/onion-comments.js' type='text/javascript'/>

   atau download scriptnya disini.

    

5. Cari script di bawah ini:
   

   <b:if cond='data:post.embedCommentForm'>

   kemudian setelah script di atas, tambahkan script berikut:

   <div style='overflow:no; width:100%px; height:100%px; padding:5px 5px 5px 5px; background:#FFFFFF;'> <b> <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/sombong.gif'/> :)) <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/ngakak.gif'/> :)] <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/hai.gif'/> ;)) <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/adaide.gif'/> ;;) <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/selamat.gif'/> :D <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/selamat2.gif'/> ;) <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/santai.gif'/> :p <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/haru.gif'/> :(( <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/silly.gif'/> :) <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/nangis.gif'/> :( <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/kagumbgt.gif'/> :X <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/cemen.gif'/> =(( <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/bingung.gif'/> :-o <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/mikir.gif'/> :-/ <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/nafascinta.gif'/> :-* <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/cool.gif'/> :| <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/rindu.gif'/> 8-} <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/gakmau.gif'/> ~x( <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/maaf.gif'/> :-t <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/keringatan.gif'/> b-( <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/minta.gif'/> :-L <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/galak.gif'/> x( <img border='0' src='http://ivanjaya.net/wp-content/plugins/vanhook-smiley/ok.gif'/> =)) </b> </div>

   atau download scriptnya disini.

    

6. Pilih Save Template. Refresh blog kamu dan tampilannya seperti di bawah ini:

Untuk memasukkan onion emoticon, kamu cukup memasukkan simbol yang berada di samping gambar onion emoticon. Untuk mencoba emoticon di blogger comment silahkan klik disini.

Happy blogging.

Note:

Kesalahan ( tidak sukses ) dalam memasang emoticon di comment blogger adalah tanda petik 1 pada URL gambar yang berbeda ketika di copy dari halaman blog ini di editor html blogger. Untuk itu saya sertakan script yang bisa di download (.txt file).

Thanks to Alexiel

Pada tulisan saya yang sebelumnya, saya menjelaskan bagaimana memodifikasi blockquote standar yang diberikan oleh wordpress. Bagaimana dengan blog yang menggunakan blogspot, apakah bisa membuat blockquote seperti yang ada di wordpress?

Blockquote bisa dibuat di blogspot, karena blogspot memberikan izin bagi kita untuk memodifikasi script html dan CSS.

Begini cara membuatnya:

1. Login ke account blogspot.
2. Click menu Layout dan pilih Edit HTML
3. Check pada kotak Expand Widget Templates
4. Cari kata ]]></b:skin> pada kotak Edit Template. ( Ctrl+F untuk mencari kata ), kemudian sebelum kata tersebut masukkan script CSS blockquote.
5. Kamu bisa mencoba memasukkan script CSS blockquote yang ada di blog saya ini:
   

   .vanhook {
   margin: 1em 3em;
   padding: .5em 1em;
   font-weight: bold;
   font-style: italic;
   border-left: 5px solid #fce27c;
   background-color: #f6ebc1; }

6. Simpan dengan click Save Template.
7. Untuk mencoba, buat posting baru. Untuk membuat blockquote, masuk ke menu Edit Html (di blogger posting ada dua menu yaitu Edit Html dan Compose). Ketik script berikut:
   

   <p class=”vanhook”>kalimat yang akan kamu jadikan blockquote…</p>

8. Lanjutkan kalimat kamu setelah tag </p>.
9. Publish tulisan kamu, dan lihat hasilnya.
10. Kamu bisa mengganti script CSS di atas dengan script yang lain sesuai dengan bentuk blockquote yang kamu inginkan.

Tulisan kamu akan semakin bermakna dan lebih indah dengan adanya blockquote. Happy blogging.

See you at the next tutorial ,

dan jangan lupa kirim saya komentar yah

Pada tulisan saya sebelumnya saya menjelaskan penggunaan onion emoticons di comment yang bisa juga digunakan di posting tulisan di blog engine wordpress. Pada kesempatan kali ini saya akan memberikan tips  untuk pengguna Blogger.com agar di posting tulisan kamu bisa disisipkan onion emoticons.

Mau tahu caranya?

Tanpa basa-basi, langkah-langkahnya adalah sebagai berikut:

1. Kamu harus menggunakan browser Mozilla Firefox. Kenapa? Karena saat ini Mozilla mempunyai add-ons untuk penggunaan javascript yang memudahkan kita menyisipkan onion emoticons. Jika belum mempunyai Mozilla Firefox kamu bisa download dan install disini.
2. Install add-on greasemonkey. Klik disini untuk pemasangan.  Pilih Restart Firefox. Setelah diinstall, logo muka monyet akan terlihat di kanan bawah browser Mozilla.
3. Klik dan install ketiga link dibawah ini untuk pemasangan onion emoticons:
   - Onion Emoticons 1
   - Onion Emoticons 2
   - Onion Emoticons 3
4. Masuk ke menu Layout > Edit HTML, cari ( tekan Ctrl+F ) tulisan ]]></b:skin>,  dan letakkan tulisan di bawah ini sebelumnya:
   img.emoticon {
   padding: 0;
   margin: 0;
   border: 0;
   }

   Lihat gambar di bawah ini:

   
   Kemudian Save Template.

5. Masuk ke Posting > New Posting, jika kamu berada di editor html ubah ke compose. Kamu akan melihat tampilan seperti di bawah ini:

   

6. Silahkan tulis blog kamu dan jika kamu ingin memasukkan emoticons, click aja gambarnya.

Selesai dan kamu bisa menulis dengan ekspresi onion emoticons. Selamat nge-blog yah.