Install Emoticon more-smilies Cosa Aranda ke Editor Posting

Beberapa bulan yang lalu, kang rohman sudah pernah menulis bagaimana cara menginstall yahoo emoticon serta onion emoticon ke editor posting blogger, namun ternyata salah satu sahabat kang rohman yaitu Bang Ali menyatakan belum puas dengan emoticon tersebut dan meminta untuk di tambahin lagi.

Duh apalagi ya? bagai mana kalau yang ini atau yang ini sudah pasti kenal kan? hehehe... jika anda pengunjung setia blognya mas cosa aranda so pasti kenal deh dengan emoticon di atas. ini nih emoticon lainnya yang lutu-lutu banget :





Kalau anda ingin emoticon tersebut bisa langsung muncul pada mesin editor posting blogger, maka silahkan ikuti langkah-langkahnya. Namun ini hanya berlaku untuk browser firefox dan tidak berlaku untuk browser internet explorer ataupun browser lainnya, karena script yang di gunakan adalah user script untuk grease monkey yang notabene hanya ada pada browser firefox. bagi anda yang sudah memasang yahoo emoticon atau onion emoticon seperti postingan yang ini, maka caranya sangat mudah yaitu tinggal klik di sini lalu klik install dan selesai sudah, emoticon yang lutu-lutu tadi akan langsung mampang pada editor posting blogger anda. Tapi ingat, pada saat anda membaca tutorial ini anda harus menggunakan browser fire fox bukan yang lain.

Bagi anda yang belum pernah menginstall emoticon yang sebelumnya, silahkan ikuti tutorial lengkapnya di bawah ini :

1. Download firefox.



2. Jika sudah di install tuh fire fox, lalu jalanin.



3. Lalu baca lagi postingan yang ini ( kan sudah di bilang bahwa pas baca tutorial ini harus pake fire fox)



4. Install Greasmonkey di sini.



5. Klik script ini, lalu kemudian klik install.



6. Silahkan login ke account blogger mu.



7. Klik Layout.



8. Klik tab Edit HTML.



9. Lihat ke bagian kode CSS, dan temukan kode seperti ini ]]></b:skin>.



10. Copy lalu paste kode berikut ini dan tempatkan di atas kode ]]></b:skin>.


img.emoticon {
padding: 0;
margin: 0;
border: 0;
}


11. Klik tombol Simpan Template.

Jika anda sudah melakukan langkah-langkah di atas, silahkan coba ke editor untuk posting dan anda akan melihat editor posting mempunyai emoticon yang lucu-lucu, tapi ini hanya berlaku untuk browser firefox dan pada posisi compose saja.





Selamat ngakak sampai keluar air mata dech.

---

Yang sedang asik ngeblog : New torrent Search, Nakinisa sima, Amma's family, Oyos saroso, Eone's Blog. Mau ikut nimbrung?

---

Cara membagi Dua Kolom Header

Beberapa hari yang lalu sempat ada yang bertanya, bagaimana cara menyimpan search engine di bagian header seperti blognya kang rohman? duhh gimana ya...hehehe , kang rohman coba jawabin deh, soalnya sudah lama nih tidak posting soal desain template blogger. Untuk memasukan search engine di header, ataupun iklan, atau photo, atau apa sajalah namanya, anda perlu membelah atau membagi dua kolom header anda. Namun perlu di ketahui sebelumnya bahwa desain template itu sangat komplek dan menggunakan banyak teknik, agar kita (kita... lho aja kali, padahal gua juga iya ) lebih terfokus, maka kang rohman mengambil sampel template buatan kang rohman sendiri yaitu Template magazine 1 yang jika anda ingin mengetahui teknik ini, anda harus terlebih dahulu mendownload nya disini!, dan kang rohman sarankan jangan pada blog kesayangan anda tapi buatlah satu blog percobaan trus upload deh tuh template magazine nya, kan sayang apabila blog yang anda sayangi jadi berantakan gara-gara jadi bahan percobaan.



Sudah siap anak-anak , padahal banyak pembaca blog ini yang sudah bapak-bapak atau ibu-ibu, pak polisi juga suka baca juga lho, ya pak prie? (tapi kemana pak blognya, ko saya cari-cari jadi ga ada sekarang, di delete ya blognya), kalo anak mudanya sih banyak seperti eko priyanto yang kerjanya nge blog mulu ampe lupa pulang kerumah, trus juga oom sang guru blogger yang walaupun ilmunya segudang masih tetep mau silaturahmi ke blog ku ini, kemudian masenchipz yang rajin komentar, dan E..alahh.. ko jadi acara kirim-kirim salam kaya di raddio aza... ya wis lah kita kemmbali ke lapppppp... pokok bahasan atuh.. emangnya mas tukul yang suka kembali ke lappppp..top.



Yup... serius nih, dah download trus diupload templatenya kan? kalo sudah sok atuh di baca sajah trik atau cara membagi dua kolom header. Nih triknya kaya gini :

1. Login ke blogger dengan ID anda dong tentunya, jangan ID saya..ntar blog saya jadi berantakan lagi.
   
   


2. Klik Layout.


3. Klik tab elemen Halaman, maka anda akan melihat tampilan format kolom header anda seperti ini :



4. Jika sudah di lihat, kemudian klik tab Edit HTML, lihat ke bagian kode CSS, lalu cari kode seperti ini :



/* Header =================================== */ #header-wrapper { width:900px; margin:0 auto 0px; background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center; height:190px; } #header-inner { width:900px; background-position: center; margin-$startSide: auto; margin-$endSide: auto; } #header { margin: 0px; text-align: left; color:$pagetitlecolor; }


5. hapus kode di atas, lalu ganti dengan kode berikut ini :



/* Header =================================== */ #header-wrapper { width:900px; margin:0 auto 0px; background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center; height:190px; } #head-inner { width:600px; background-position: left; margin-left: auto; margin-right: auto; float:left; } #header { margin: 0px; text-align: left; color:#ffcc66; } #r_head{ width:300px; float:left; padding-top:10px; }


6. Coba scroll ke bagian bawah, dan temukan kode seperti ini :



<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/> </b:section> </div>


7. Hapus kode di atas, lalu ganti dengan kode di bawah ini :



<div id='header-wrapper'> <div id='head-inner'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/> </b:section> </div> <div id='r_head'> <b:section class='header' id='header2' preferred='yes'/> </div> </div>


8. Klik tombol Simpan Perubahan.


9. Selesai.

Untuk melihat hasilnya, silahkan anda klik lagi tab Elemen Halaman dan anda akan melihat format kolom header anda menjadi seperti ini :









Kolom header anda sudah menjadi dua bagian, yang sebelah kiri dan sebelah kanan. Trus bagaimana kalau sudah begitu? ya terserah anda, kolom sebelah kanan saya buat menjadi elemen layaknya yang ada di sidebar, jadi mau di masukan seach engine, mau iklan, mau gambar, ya terserah yang masukin.



Ya udah, cukup..cukup..dan cukup... soalnya jari saya sudah mulai pegal-pegal gara-gara ngetik mulu dari tadi... sampai ketemu lagi deh pada tutorial berikutnya.

Pasang Iklan Kliksaya.com di Bawah Read More

Apabila pada postingan terdahulu kang rohman mencoba untuk membahas bagaimana cara memasang iklan Google Adsense di bawah postingan, maka pada posting yang ini kang rohman akan membahas pertanyaan bagaimana cara memasang iklan di bawah Read more atau Selengkapnya. Agar tidak tidak terlalu melebar, maka iklan yang akan di jadikan contoh adalah iklan dari situs Kliksaya.com.

Karena topik yang di usung adalah memasang iklan di bawah Read more atau Selengkapnya, maka sudah barang tentu template anda harus memakai sistem ini, masih belum tahu cara membuat read more? silahkan di baca dulu atu di sini. Berbeda dengan kode iklan dari google adsense yang apabila di pasang pada template blogger harus di parse terlebih dahulu, maka kode iklan dari kliksaya.com tidak perlu di parse dahulu atau dengan kata lain langsung di pasang saja. Sudah tidak sabar, yuk kita mulai saja dech.

Sebagai contoh, kode iklan yang akan di pasang adalah seperti ini :


<!-- Begin: KlikSaya.com -->
<script src='http://scr.kliksaya.com/js-ad.php?zid=221' type='text/javascript'>
</script>
<!-- End: KlikSaya.com -->



Langkah-langkahnya adalah sebagai berikut :

1. Silahkan login ke blogger dengan ID anda.



2. Klik Layout.



3. Klik tab Edit HTML.



4. Klik tulisan Download Template Selengkapnya



5. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula



6. Beri tanda centang pada kotak di samping tulisan Expand Template Widget , lihat gambar di bawah :

    

   

    

7. Tunggu beberapa saat ketika proses sedang berlangsung



8. Silahkan anda cari kode berikut pada kode template milik anda (dengan asumsi template anda sudah terpasang sistem readmore) :



<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>




9. Tambahkan kode iklan kliksaya.com milik anda seperti ini :



<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a>

<br /> <br />
<!-- Begin: KlikSaya.com -->
<script src='http://scr.kliksaya.com/js-ad.php?zid=221' type='text/javascript'>
</script>
<!-- End: KlikSaya.com --> </p>

</b:if>




10. Klik tombol Simpan Template.



11. Selesai. Silahkan lihat hasilnya.

Tambahan saja, kode iklannya bisa di ganti apa saja bisa iklan google adsense atau iklan yang lainnya, atau bisa juga di ganti dengan kode banner affialiasi atau kode social bookmarking.

Selamat mencoba!

Pasang Iklan Google Adsense di Bawah Posting

Setelah sekian lama absen dari aktivitas blogging, akhirnya kang rohman mencoba kembali untuk posting tutorial. Entah kenapa akhir-akhir ini kang rohman sedikit kurang semangat untuk membuat tulisan, apalagi jika membuat artikel tutorial yang sudah barang tentu harus memuat kode ataupun script yang dalam menuliskannya perlu waktu banyak sehingga sangat membosankan. Apakah kang rohman sudah kehabisan bahan untuk posting? jika di bilang kehabisan bahan posting jawabannya adalah tidak, karena di antara para pengunjung banyak sekali yang mengajukan pertanyaan, dan dari pertanyaan tersebutlah sebenarnya bahan inspirasi kang rohman, namun memang dasarnya kang rohman sedang kurang semangat untuk ngeblog, jadi ya nunggu mud nya muncul dulu baru nanti satu-satu kang rohman jawabin.

Melihat dari pertanyaan-pertanyaan yang ada, yang paling sering di tanyakan adalah bagaimana cara memasang iklan Google Adsense di bawah posting? Duh fenomenal sekali ya Google Adsense, segala sesuatu yang sekiranya sedikit asing dan menarik dan belum di ketahui pasti banyak yang berburu informasi tentangnya ...ck...ck...ck...

S ebenarnya pemasangan kode di akhir postingan yang nanti akan kang rohman terangkan, tidak khusus untuk iklan Google Adsense saja namun bisa juga di ganti dengan iklan-iklan lainnya semisal iklan dari Kliksaya.com, Adbrite, Bidvertiser, dan juga iklan-iklan lainnya yang ingin di pasang di akhir postingan termasuk juga memasang banner-banner affiliasi ataupun tombol banner social bookmarking, namun itu tadi karena Google Asense yang fenomenal maka judul postingan ini lebih sfesifik untuk memasang iklan google adsense.

Yang pertama perlu di ketahui yaitu kode iklan Google Adsense tidak bisa di pasang langsung ke dalam kode template blogger. Mungkin sudah banyak di antara anda yang pernah mencoba memasukan kode iklan google adsense kedalam kode template di bagian Edit HTML, namun hasilnya selalu muncul pesan error seperti ini :

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The processing instruction target matching "[xX][mM][lL]" is not allowed.

Trus bagaimana bisa kang rohman memasang iklan GA langsung di bawah posting? agar hal itu bisa di lakukan, sebelum kode iklan GA di pasang pada kode template anda, terlebih dahulu harus di Parse. Apa yang di maksud dengan parse? yang di maksud dengan parse di sini adalah anda harus mengubah kode yang akan di tambahkan, misalkan kode iklan Goggle adsense seperti ini :


<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxx";
google_ad_slot = "0976076963";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script
src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>


Tugas anda adalah kode di atas tadi harus di parse dulu yaitu menjadi seperti ini :


<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxx";
google_ad_slot = "0976076963";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script
src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>


Duh bingung banget ya memparse kode iklan GA? tidak usah bingung, karena ada banyak situs yang menyediakan tool yang dapat memparse kode iklan GA anda dengan sekali klik saja, salah satu contoh situs yang menyediakan tool ini adalah http://blogcrowds (sok atuh di klik biar keluar situsnya), anda tinggal masukan kode iklan Ga anda ke dalam kotak parse yang tersedia (di copy paste aja biar cepet) kemudian tinggal klik saja tombol parse dan twewewwwweeewwww... kode iklan GA anda sudah di parse dan siap untuk di pasang pada kode template anda.

Apakah boleh kita memparse kode iklan GA? kan TOS GA menyebutkan bahwa kita tidak di perbolehkan mengubah atau menambah atau mengurangi kode iklan GA yang di berikan? Nah ininih, silahkan tanyakan sendiri ke pihak google adsense, dan musti di ingat bahwa kang rohman tidak bertanggung jawab atas segala sesuatu pada account anda. Jika menurut kang rohman sendiri tidak apa-apa karena tidak mengubah struktur kode adsense, akan tetapi hanya di parse saja, dan untuk kasus ini pernah juga ada yamg mengirim email kepihak GA, silahkan baca di ini, dan jawaban dari pihak GA adalah boleh selama tidak ada penambahan kode apapun, akan tetapi walaupun demikian kang rohman sarankan untuk mengirim email sendiri ke pihak google adsense agar lebih yakin.

Setelah sedikit berbelit-belit, sekarang saatnya masuk ke bahasan utama yaitu memasang kode iklan GA di bawah postingan. Yang pertama yaitu anda di sarankan untuk memasang sistem read more yang telah kang rohman terangkan di sini, jika template anda sudah memakai sistem tersebut, silahkan ikuti langkah-langkah berikut :

1. Silahkan signin ke blogger dengan ID anda.
   
   
2. Klik layout.
   
   
3. Klik tab Adit HTML.
   
   
4. Klik tulisan Download Template Selengkapnya.
   
   
5. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
   
   
6. Beri tanda centang pada kotak di samping tulisan Expand Template Widget , lihat gambar di bawah :

    

   

    

7. Tunggu beberapa saat ketika proses sedang berlangsung
   
   
8. Silahkan anda cari kode berikut pada kode template milik anda (dengan asumsi template anda sudah terpasang sistem readmore) :
   
   
   <b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

   
   
9. Tambahkan kode iklan google adsense milik anda seperti ini (kode Ga nya harus yang sudah di parse) :
   
   
   <b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>

<br /> <br />
&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;pub-xxxxxxxxxxx&quot;;
google_ad_slot = &quot;0976076963&quot;;
google_ad_width = 468;
google_ad_height = 60;
//--&gt;
&lt;/script&gt;
&lt;script
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot; type=&quot;text/javascript&quot;&gt;
&lt;/script&gt;

<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

   
   
10. Klik tombol Simpan Template.
    
    
11. Selesai. Silahkan lihat hasilnya.

Keterangan tambahan, kode iklan di atas tentu saja hanya sebagai contoh saja, silahkan di ganti dengan kode iklan milik anda sendiri. Untuk kode iklan tidak harus iklan google adsense tapi bisa juga kode iklan lainnya seperti iklan bidvertiser, adbrite, kliksaya.com, kumpul blogger, atau banner-banner affiliasi lainnya.

Selamat mencoba!

Tombol RSS Glossy

Apakah anda seringkali melihat blog tetangga yang anda kunjungi memiliki Tombol RSS yang aduhai cantiknya, mungkin yang seperti ini :

Atau mungkin yang seperti ini :

Terlintas ingin memasangnya di blog anda namun terhambat dengan keterbatasan kemampuan dalam hal desain gambar? jangan terlalu risau, banyak sekali orang di luar sana yang mempunyai kemampun membuat tombol RSS yang aduhai cantiknya dan dengan baik hati membuatkan untuk kita-kita. Salah satunya yaitu anda bisa mendapatkan berbagai variasi tombol RSS yang glossy pada blognya oom free-7 ini, anda tinggal pilih tombol mana yang anda sukai lalu save ke komputer anda, upload ke blog lalu tampilin dech tuh tombol di blog anda agar lebih mempercantik tampilan blognya.



Selamat memilih dengan ceria dan jenaka !

Kotak Komentar Tampil Dua Format

Aduh, baru pulang dari bandung nih, pala masih puyeng, badan masih gemeteran, mata kunang-kunang (halahhh.. di dramatisir abis sih) hehehe... ngga dhenk biasa aja. Seperti biasanya kang rohman masih menanggapi pertanyaan yang sempat tersangkut di shoutbox ataupun email, salah satunya (padahal salah duanya juga ngga apa-apa) adalah bagaimana cara membuat kotak komentar blogspot yang formatnya seperti yang ada di blog kang rohman ini, yaitu ada dua format, yang satu di dalam iframe dan yang satu lagi format biasa?

Hehehe... want to know aja dech loe. Memang tidak salah sih pepatah mengatakan " Lain ladang lain belalang, lain orang lain mau nya ". Ini terbukti dengan komentar yang lainnya yang kontradiktif yaitu " Kang, bagaimana jika komentarnya hanya dalam bentuk iframe saja tidak seperti punya kang rohman yang ada dua, kan ribet lihatnya? " hayoh.. bener kan kang rohman bilang, lain orang lain maunya. Nah jika sudah begitu bagaimana jadinya? biar adil mending di jawab dua-duanya.

Dulu, kang rohman pernah menulis artikel tentang bagaimana cara membuat kotak komentar blogspot langsung di bawah postingan yang kang rohman post di sini, nah perlu di ketahui bahwa hasil dari postingan tersebut adalah membuat kotak komentar dalam bentuk iframe saja tidak seperti punya kang rohman yang komentarnya jadi ada dua, trus bagaimana dengan yang komentarnya ada dua? caranya seperti ini :

Pada kode-kode yang kang rohman terangkan dulu, ada sedikit yang harus di hapus, yaitu silahkan cari kode yang seperti ini :

<div class='onepx'>
<dl id='comments-block' style='height: 1px;overflow:hidden;'>

Hapus kode yang kang rohman cetak merah di atas, sehingga menjadi seperti ini :

<div class='onepx'>
<dl id='comments-block'>

Setelah di hapus, jangan lupa di save atau di simpan, selesai.

Jika kode yang berwarna merah tadi di hapus, maka kotak komentarnya akan menjadi ada dua, yaitu kotak komentar yang muncul di luar iframe, dan yang satunya di dalam iframe.

Selamat mencoba !