Cara Membuat Emoticon Di Komentar Blogger

Melanjutkan postingan saya sebelumnya tentang memasang emoticon di komentar blogger, pada postingan kali ini saya mencoba untuk menyederhanakan cara pemasangan trik ini sehingga lebih mudah untuk diaplikasikan dan juga bisa berhasil untuk pemasangan emoticon di komentar blogger. Postingan kali ini juga untuk menggantikan postingan yang lama dikarenakan banyak kegagalan dalam menerapkan pemasangan emoticon di komentar blogger, tapi postingan lama tetap saya pasang karena cara yang lama masih cocok digunakan untuk template blog yang masih menggunakan versi lama.

Memasang Emoticon Yahoo pada kotak komentar blog Blogger bermaksud untuk membuat tampilan komentar para komentator/pengunjung menjadi lebih menarik, selain itu dengan adanya fasilitas penambahan emoticon pada kotak komentar ini menjadikan para pengunjung blog kita bisa mengekpresikan emosi mereka dalam mengomentari postingan kita.

Memang banyak sekali cara untuk trik pemasangan emoticon di komentar blog apabila kita cari melalui search engine google, kebanyakan dari para blogger yang membuat postingan trik pemasangan emoticon di komentar blogger ini masih menggunakan cara lama yang kebanyakan gagal untuk diaplikasikan, kalo ga percaya coba tes dikotak komentar blogger yang membuat postingan pemasangan emoticon di komentar pasti kebanyakan tidak keluar emoticonnya alias gagal. Biasanya yang gagal cuma copy-paste (copas) doank... alias tidak di coba dahulu sebelum membuat postingan artikel pemasangan emoticon di komentar... Semoga sobat blogger yang membaca postingan artikel ini bukan termasuk orang suka copas postingan artikel orang lain tanpa seizin yang punya... hehehe :):) oke sob... langsung aja kita ke TKP...

Cara Pemasangan :

• Login ke  blog sobat...


• Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.
  
  
  


• Cari kode <p class='comment-footer'> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudiancopy kode di bawah ini dan paste di bawah kode <p class='comment-footer'>tersebut. Jika kode <p class='comment-footer'> ada dua maka pilih yang kedua atau yang ada di bawah.
  
  
  <hr/>
  <div align='center'><span>&lt;a href=&quot;javascript:animatedcollapse.toggle(&#39;cemo&#39;)&quot;&gt;<span style='color: #ffffff;'><b>Yahoo Emoticon</b></span>&lt;/a&gt;</span><b style='color: #ffffff;'> | </b>&lt;a href=&quot;javascript:animatedcollapse.toggle(&#39;uiemo&#39;)&quot;&gt;<span style='color: #ffffff;'><b>Upin&amp;Ipin Emoticon</b></span>&lt;/a&gt;<b style='color: #ffffff;'> | </b>&lt;a href=&quot;javascript:animatedcollapse.toggle(&#39;kkemo&#39;)&quot;&gt;<span style='color: #ffffff;'><b>KasKus Emoticon</b></span>&lt;/a&gt;</div>
  
  <br/>
  
  <center>
  <div id='cemo' style='border: 1px solid #666666; -moz-border-radius:8px; -webkit-border-radius:8px; padding: 5px; background: #ebe9da; none repeat scroll 0% 0%; width: 510px; text-align: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 50px;'><center>
  <b>
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
  :))
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
  :)]
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
  ;))
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
  ;;)
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
  :D
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
  ;)
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
  :p
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
  :((
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
  :)
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
  :(
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
  :X
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
  =((
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
  :-o
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
  :-/
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
  :-*
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
  :|
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
  8-}
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
  ~x(
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
  :-t
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
  b-(
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
  :-L
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
  x(
  <img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
  =))
  
  </b></center></div></center>
  
  <center>
  <div id='uiemo' style='display:none; border: 1px solid #666666; -moz-border-radius:8px; -webkit-border-radius:8px; padding: 5px; background: #ffffff; none repeat scroll 0% 0%; width: 510px; text-align: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 110px;'><center>
  <b><img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM5PygqFG4IqbktYeIFsFbsajffPK5rXzqd1EBuoU7k_sOdaEB6Q1FpGsKM6CrcsP2LjGhX1dssM1-EL7VSv2Vxxc4gxdWuvDAWzCBc5ITlZfNCELl3-g6lYBbueEFP0Uy8kLo-K0OwSp6/s800/ehsan01.gif' width='50'/>
  :a:
  <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB2XkXK9XLPFd7jBizAprYUuwzMHiaCSmcuxx15wZW98CoopbCnpIX-n9VprlWXSgbR_EH-hZKCpQzkdkc13fTgYZJ6aC95efhaL2ZfA1X87d3CuzC2wdP5L2uCRbHaomuN6Lewv1ed1PT/s800/ehsan02.gif' width='50'/>
  :b:
  <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGATBx1b5hokpWkueuF66A6i6joY3eGyg0Jttm1QthQzWOOY11Sj5WPEjBvG3JXdlsA_oBnXrSx4izctiXyJIH0gEvcF9lMd5rBF0Uj32YeT-c7darPn_z1S1cWrxwjpU4qHwhFFa1KkTP/s800/fizi01.gif' width='50'/>
  :c:
  <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgg06j9bNO2L6TU5eNMo24rSnFzaywc5o8ZRG4CKfSmd-KgCSkHXOgRBlptwhQpeHBLcsqzUv64yrm8dk1SswPTrvI-3pcUhPHy4Nun-M_PNuCJUxaDdQNt8s8xtTbRlxOdKJ5DB924ZHc/s800/ipin01.gif' width='50'/>
  :d:
  <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGSmJjya6MOP7Wm3qrTdZJIGIP1HuLbFkz0F-pXjHM30MTjlFa7Iw_OZLau9jYVxwefSD3T9eJNdD9uQKwzvpNvN3cTF-Js5squnAIr7hOiKlHjbhL29E9xM4OgdLuwhTHE3y5uCD-h7LO/s800/ipin02.gif' width='50'/>
  :e:
  <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNxNUYPHDJ8eSCMluI45HD1n4of_LoY4WxoeFWhTySaK1VEqJkVaCfT3ovs8rO4yoKaDLD62VfjLygWfpSDBx-OW_s2tF4onmZAI5PMbHZb3uGpgBTDnlrXd33GQ9r2YKMZMXg93tY7wl9/s800/kakros01.gif' width='50'/>
  :f:
  <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB2hVuKJ3EuIaief_K0F1s5spFPL6J825Qo1E7uy_YoNAlU9ijp7FHhzj95tph5YSwOJY3t5XZfRI5QOWHbqUalnwjzYPhgeS3sHaCVpY0yBemZ-NFD5U_UIlS5c-3fi2wc5ZXJrN9odD6/s800/kakros02.gif' width='50'/>
  :g:
  <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7aXJW_j9vWi6nQ3H4yAMcZolOJlX3kf1eK5W8T9bFiyQBiCjGV-cQdi5YlVVzVymIMvk_lMtK1jyROzCKNOlqfyhdBZDaI3QErTdPK-G6KdwQO6EXrN_INPzlIB0tKk3wVa8CFBSHzae/s800/mail01.gif' width='50'/>
  :h:
  <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuUUMmf9eP7AfRhxbu4oxiCARy9Ow-osUAFxX7TKHRRzm6TmFzbNmoE-oHSsR8yi-zx6am373iakqZgrZUUR83nGd12E5fv1Z6nX8zSqRoauw7XLB6T3Yxpew14usQVAqIjpe9_uTm460r/s800/upin01.gif' width='50'/>
  :i:
  <img height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjumTMhKJbGKGTV1xSQU4DtRplhvURQ4UfPO28zi9Sr4rrfZ8y8Usft0_lkZmLkKoupdMbZQ5uJWdZo_1ufgsZkCve0hSxjrfQZz05-gorlUUH4CCHH1N-XOyQkoFEFPnLZdfdFz8tv2AzE/s800/upin02.gif' width='50'/>
  :j:
  </b></center></div></center>
  
  <center>
  <div id='kkemo' style='display:none; border: 1px solid #666666; -moz-border-radius:8px; -webkit-border-radius:8px; padding: 5px; background: #ffffff; none repeat scroll 0% 0%; width: 510px; text-align: left; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 150px;'><center>
  <b><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsdp0oJSlCsVyn3QapjGZK0nILx9-jWLYo13SUHXltlFY4OHJnIAZGZ5bjLgM80yxxX_2NP6O0fO4Z0zzszn0MMKMThxtX62fRiyRnEDzQpFIdVgz4VFMfptoqttZrzC_o0wPz8QdCGc0E/s800/sundul.gif' width='40'/>
  :ka:
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrmUMb_0JMfyOe3xDhptNk3nok4ZDYtQkQAgizMqDFnYPLqGHytsLRsAdmAnF-fqGkEcdDFqz7Fb9uj-QvIB2_F3k7Sci7K0rC3DU4BXz5i2AjPyYf-7e8FDowsFN2LXJPZHyoX04je9sP/s800/s_big_cendol.gif' width='40'/>
  :kb:
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGoDkGfLRl8JlnvwuE7j-NIsu47WF1hqjpHH7tYIpbnMg3yjfU655S0_WxLU1nd_T8u3gxspXRhhCULE7wypgTNCVpA57_yNgJXI7hzYwM8Gi_zKQmv8OBz7gUG6ekXMGKgrCYx5JKq_pp/s800/shakehand2.gif' width='40'/>
  :kc:
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlyjPwZqeGOMQeX1tyt6ItKuqcIjX4aOwnJCbTCcoXLp_ncSwgq2M_bNiLeBK58KmuU8P5BXVFzva3mX5yhacJsTa_czW4v2SsjJ9qUrKQ_4ADMV-Y2LAsBZyEY-8ABxn-obVXQO01W6nC/s800/ngakak.gif' width='40'/>
  :kd:
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnyYuWFmfL1LpX7xW2UFWSp9B3XyjsVmKEDa1Sq2ElYyOI_0WGwiBmNyCw5lEpH7C7AIOSsKxXZG4hNNe9FnX5KNV_-xRlZTh0gROSzM9MxVLWgVmCHEInd1Y5WyxnDpzfpnaO1IY9rMKh/s800/pertamax.gif' width='40'/>
  :ke:
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4pJAlCe7RvL8bbN3pXSNjylIOrTFXzzkfi9Nfngoah6pl1yLy86QlVVcMo3IirVtcNH8cxx9-AIvb1O7WzbzmiXl0ym6R3tNdlHKRfcuT853kql_E85u-3p_r9oLt9ziAkYRyoKMEOFNs/s800/mewek.gif' width='40'/>
  :kf:
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSoKOA0mE7Hte2cBtuOUMvv8VRz6cfk3n_bnaPia1ax2JglAfDQvhhEfIANqhWbubudlLp6-aNx0h-kVjASkWjUxM-11eEQ7pEq3io5q-bqHSuT9N_GS13s5nXykZCpu954h0G4F9Izd8V/s800/siul.gif' width='40'/>
  :kg:
  <br/><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9hSlu-OlIcynnsSN7KgIiQSjrcyQ0UsN1fn_eW6uYZWkQF1GQa0zUvOX0igdyBNYyr3sLOW9BWxKdwaA4awWKi4dWhfEQTgyu4vUgsWnmBPOeCAn3TWsB9uwHBkp1GyiyPLOC1qX2Ke5E/s800/nosara.gif' width='40'/>
  :kh:
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLOs2x-aMe_9rhHnt1TpcX_fjTpOdKGO2D7g0EtKDWMFJMh-VO01WKtUjYgmTHrJ9M_jSjcenugokI5UnoQUT20tONP0exXxhsXV297Mup3Km9lEOM3WOHrZt46IeD7K3XYZpb58bQRLkl/s800/takut.gif' width='40'/>
  :ki:
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv4NvZFJEnrdFeuPfoFMCTCZQY296Sr4grsJvZDIm8-luND4uHLrpgdg_UB2MxjesNaW8ztltbbF9kKh_j0SQ_OQletfNdn48mSq6jvK-D81uujDT-G1wiV3nGePx3BcyzpyYRToPgCosZ/s800/tkp.gif' width='40'/>
  :kj:
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg08EwUDMVvpCJuztdJuzEbcnzycPYZFp7zo3QuXUoWs4vbAVH3EyRr6wZZ5CjfJFhMUN3nFXwP8KKh9-Tu2RBjo-gtAj-E_vKV1Vgn7agPPnlR9fqS7xAwU8VX0QTTEY-cCj1RieJFfJTn/s800/marah.gif' width='40'/>
  :kk:
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiV1czpA0V76yu2oaD0Ta-QtWXNN3OauT3PwoHOGAtedPe281JVi0n7dS6koOubL5mgWp27NfzX6vAEKx9jrx9O3zDnWCDPYfvkbQu67hO34xhQ3o5mimtLrjF_NHhFXNDR0TVgELfllS0/s800/I-Luv-Indonesia.gif' width='40'/>
  :kl:
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUlxsf0_fEPIcQmMVvPvE9yIfbFFKZTWbLi0stVJgNHRmJ5O4weSu_480U6R5mRJVYa7Lw1Ax0TBfOS4FuiNQWKUIhOybWPYS-pqztN77BcFcxt0KGfcLsFtSqTWJE-mJQOyg1h8koJ4hi/s800/hoax.gif' width='40'/>
  :km:
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnQChuneekJiR3EXhn6Z1lI4At5XQyjRojRGStt-JX08K74HyN5x_zn8n6T_jQxh_HMJzEoNgaWo_nlmio25PgdfROFUyes99JlsL2LDpmtrgvCb6os4_kwKHBkkSdJzshAyL9yEfvc0nV/s800/berduka.gif' width='40'/>
  :kn:
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK9xb4PcO_RxgyrrSxjNNG9Q7jJvMR-TLPTUjNjvVipLFo7Dv_fGMzsuICRQkuRsjRTNDuUD5co9NkE0x9N976AEmaIcxcf07K9XBrbaEoj-BTkBKhWE2XVyK3vd3tCUJW5-Xh6-aPKMJn/s800/ngacir2.gif' width='40'/>
  :km:
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtpAcYc7QjrNeq-mpdOBCRoz7C-jPQ_GRHChCPn9_IsmDOjCVgV24MYCBvSKFc4x8UYi5bejCZ3KofUxIZLD2eYcxLwNVPugJaRF0JMLhBoMzaCOhfMZDE07Thu22rMGagGl2q46T8pdV6/s800/bis.gif' width='40'/>
  :ko:
  </b></center></div></center>
  
  &lt;div style=&quot;text-align: center;&quot;&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  &lt;!--
  google_ad_client = &quot;ca-pub-6109930972696170&quot;;
  google_ad_host = &quot;pub-1556223355139109&quot;;
  /* MonoCore 468x15 Link */
  google_ad_slot = &quot;2912254634&quot;;
  google_ad_width = 468;
  google_ad_height = 15;
  //--&gt;
  &lt;/script&gt;&lt;a href=&quot;http://www.blogger.com/page-edit.do?blogID=7105494544424735270&amp;amp;pageID=1647161614117998862&quot;&gt;
  &lt;script src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot; type=&quot;text/javascript&quot;&gt;
  &lt;/script&gt;&lt;/a&gt;&lt;/div&gt;
  
  - Keterangan :
  • Fungsi dari pemasangan kode ini adalah untuk menyediakan preview dari emoticon yang disediakan pada komentar blogger yaitu emoticon yahoo, upin & ipin dan kaskus.


• Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode</Head> tersebut.
  <script src='http://7startmenu.googlecode.com/files/jquery_vstart.js' type='text/javascript'/>

  <script src='http://7startmenu.googlecode.com/files/animatedcollapse.js' type='text/javascript'/>
  <script type='text/javascript'>
  animatedcollapse.addDiv(&#39;cemo&#39;, &#39;fade=1&#39;)
  animatedcollapse.addDiv(&#39;uiemo&#39;, &#39;fade=1&#39;)
  animatedcollapse.addDiv(&#39;kkemo&#39;, &#39;fade=1&#39;)
  animatedcollapse.ontoggle=function($, divobj, state){}
  animatedcollapse.init()
  </script>
  
  - Keterangan :
  • Kode script diatas merupakan kode untuk mengatur preview emoticon dan animasi saat memilih preview emoticon yang ingin digunakan.
  • Kode yang berwana biru merupakan kode script jquery jika sudah memasang jquery di blognya silakan sobat hapus kode di atas yang berwarna biru.


• Cari kode </Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Body> tersebut.
  <script>
  tag="p";
  clas="comment";
  </script>
  <script src="http://monozcore-project.googlecode.com/files/MonozCore%20Emoticon%20Script.js" language=javascript></script>
  
  - Keterangan : 
  
  • Kode yang berwana biru merupakan kode variabel tag dan class yang akan digunakan untuk merubah teks menjadi emoticon dimana teks tersebut merupakan lokasi yang ada di dalam tag dan class. Harap jangan dirubah kecuali emoticon tidak berhasil terlihat maka silakan ikuti langkah berikutnya.


• Klik "Save" untuk menyimpan template blog, dan lihat hasilnya...

Langkah Berikutnya Jika Emoticon Tidak Terlihat :

Oke...sob silakan ikuti langkah-langkah di bawah ini jika dan hanya jika prosedur diatas tidak berhasil, hehehe :):) sedikit dramatisir biar tambah seru....

• Silakan sobat test di kotak komentar dengan menuliskan karakter yang akan dirubah menjadi emoticon, contoh: tuliskan teks ==> :)) :a: :ka:


• Lihat apakah teks tersebut berubah menjadi emoticon ???. Jika tidak maka kita edit teks tersebut dengan cara men-select (memilih) teks tersebut mulai dari atas avatar sampai teks karakter tersebut, kemudian klik kanan ==> klik "View Selection Source" ==> cari teks karakter emoticon (:a: :ka: atau yang karakter emoticon yang diketik pada saat mau men-test dalam contoh ini karekter yang digunakan adalah :ka: ) pada kode HTML yang ditampilkan saat page editor ditampilkan.
  
  
  
  
  
  
  
  
  


• Pada gambar ke-3 perhatikan pada kode yang terpilih, karakter emoticon diapit oleh tag "p" di dalam class "comment-content" (<p class="comment-content" id="bc_0_0MC">:ka:</p>). Kode tersebut bisa berbeda-beda tergantung template yang digunakan.


• Sekarang kita kembali pada kode script diatas :
  
  <script>
  tag="p";
  clas="comment";
  </script>
  
  Silakan dirubah variabelnya pada kode script di atas menjadi
  
  <script>
  
  tag="p";
  clas="comment-content";
  </script>


• Klik "Save" dan coba lihat hasilnya...

Wuiihhh cape juga bikin postingan ini, oke.. bro jangan lupa cendolnya dan saya mohon jika ingin menggunakan artikel ini atau meng-copas seluruh postingan artikel ini harap sumber dari artikel dicantumkan. Selamat mencoba...jika ada pertanyaan silakan tulis di kolom komentar...

.: Semoga Bermanfaat :.

Cara Membuat Auto Refresh/Reload Otomatis Untuk Blogspot

Cara Membuat Auto Refresh Untuk Blogspot -  Kali ini saya akan posting tentang cara membuat auto refresh untuk blogspot. sobat pasti sudah tahu tentunya apa yang dimaksud dengan auto-refresh, ya betul...

yaitu me-load halaman blog berulang-ulang sesuai dengan waktu yang di tentukan oleh pemilik blog. Tidak usah basa-basi lagi, langsung aja dipraktekan cara membuat auto refresh untuk blogspot.

Cara Membuat Auto Refresh Untuk Blogspot :

1. Login ke Blogger
2. Pilih  Design > Edit HTML
3. Cari kode </head>
4. Letakan kode dibawah ini setelah kode </head>
5. <meta content='200' http-equiv='refresh'/>

Keterangan : Yang berwarna merah berarti blog sobat akan me-refresh setiap 200 detik. Bisa diganti sesuai dengan keinginan sobat. Sekian posting saya kali ini, semoga bermanfaat buat sobat blogger semua.

Cara Membuka Disable Klik Kanan Pada Blog yang Diproteksi

Cara Membuka Disable Klik Kanan Pada Blog yang Diproteksi - Pastinya sobat kesal dengan blog yang ingin sobat copas tidak bisa mengklik kanan, Nah sebenarnya ada cara mudah untuk membuka disable klik kanan di blog. 

Mendisable klik kanan menggunakan javascript pada browser. Kalau browsernya di disable javascriptnya?

Otomatis fitur disable klik kanan tidak akan bisa digunakan lagi. Nah cara membuka disable klik kanan pada blog yaitu dengan mendisable javascript pada browser sobat. Nah berikut disable javascript untuk membuka disable klik kanan pada blog pada browser - browser tertentu :

Membuka Disable Klik Kanan di Chrome

1. Klik Options > Under the Hood > Content Settings
2. Pilih opsi Do not allow any site to run JavaScript

Membuka Disable Klik Kanan di Mozilla Firefox

1. Klik Alat > Pengaturan > Isi
2. Hapus centang Aktifkan JavaScript

Membuka Disable Klik Kanan di Opera

1. Klik Menu > Settings > Preferences
2. Klik Tab Advanced
3. Di Content hapus centang Enable JavaScript

Hanya 3 browser yang saya tahu, kalau di Internet Explorer atau Safari coba saja cari sendiri untuk disable javascript. Begitulah Cara Membuka Disable Klik Kanan Pada Blog yang Diproteksi, yang intinya hanya disable javascript. Sekian saja postingan saya kali ini semoga bisa bermanfaat, Salam Olahraga !

Cara Memasang Meta Tag Di Postingan Secara Otomatis

Pada postingan kali ini saya akan membahas tentang Cara Memasang Meta Tag Di Postingan Secara Otomatis, karena meta tag sangat berguna sekali untuk optimasi page.

karena setiap postingan akan memiliki meta deskripsi yang berbeda, antara satu postingan dengan postingan lainnya tanpa perlu repot-repot menambahkan satu-satu pada setiap postingan secara manual. 

Dengan kata lain, meta deskripsi dan keyword pada setiap posting akan ter-generate secara otomatis. Hal ini tentu menjadi solusi bagi sobat yang mengalami duplikasi meta deskripsi.

Nah dibawah ini adalah cara memasang meta tag secara otomatis disetiap postingan.

1. Langkah pertama login ke blogger.com terus ke tata letak >> edit html.
2. Setelah itu sobat cari kode dibawah ini (Gunakan CTRL + F untuk memudahkan pencarian)

<title><data:blog.pageTitle/></title>

     3.  kalau kode diatas sudah ketemu, hapus lalu ganti dengan kode berikut :

<b:if cond='data:blog.url == &quot;http://ALAMATBLOGSOBAT.blogspot.com/&quot;'>
<title><data:blog.pageTitle/></title>
<meta name='DESCRIPTION' content='ISI DENGAN DESKRIPSI UNTUK HOMEPAGE BLOG SOBAT'/>
<meta name='KEYWORDS' content='ISI DENGAN KATA KUNCI UNTUK HOMEPAGE'/> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>
</b:if>

     4. Jika sudah, Save Template.

Nah, demikianlah cara bikin meta tag di setiap postingan secara otomatis. Semoga setelah ikutin cara diatas sobat-sobat semuanya gak direpotkan lagi dengan harus memasang meta tag deskripsi di setiap postingan secara manual.

Membuat Artikel Terkait Dengan Gambar Berjalan

Untuk membuat Thumbnail Related Posts Berjalan, silahkan ikuti beberapa cara dibawah ini :

1. Sekarang tuju Edit HTML.
2. Jangan lupa backup template anda dulu dengan mengklik Download Template Lengkap.
3. Klik Expand Template Widget.
4. Kemudian letakkan kode berikut ini,

tepat diatas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Kemudian, setelah itu. Sekarang silakan cari code ini :

<div class='post-footer-line post-footer-line-1'> 

atau <p class='post-footer-line post-footer-line-1'>

6. Jika sudah ketemu salah satu dari kode diatas, letakkan kode dibawah ini setelah salah satu kode diatas :

<!-- Marquee Serbablog Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

7. Untuk menampilkan jumlah postingan atau artikel terkait berjalan yang muncul nantinya, anda bisa merubah kode yang berwarna biru sesuai kebutuhan anda. Atau juga bisa merubahnya melalui var maxresults=10;

Cara ini berhasil saya gunakan di blog ini, selamat mencoba mas broo. Semoga berhasil.

Sumber: frans-net.blogspot.com

Cara Membuat Read More Otomatis di Blog

Postingan kali ini akan memberikan tutorial Cara Membuat Readmore atau Baca Selengkapnya pada postingan blog secara otomatis. Dengan adanya readmore otomatis, kita bisa menentukan berapa ketinggian dan lebar penggalan postingan dan imageyang akan muncul pada halaman pertama blog kita sehingga terlihat rapi dan menarik. Trik ini mungkin telah banyak yang mengetahui dan ada juga yang belum mengetahuinya. Bagi anda yang belum mengetahui bagaimana cara membuat readmore otomatis, bisa mengikuti tutorial berikut ini.

PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :

cari kode </head> kemudian masukkanscript di bawah ini persis dibawah kode tersebut.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340;img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>  

KEDUA, cari kode html berikut ini : <data:post.body/> atau <p><data:post.body/></p> ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>  

Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti. 
==> Summary noimg 430 = tinggi artikel terpenggal tanpa image

==> Summar img 430 = tinggi artikel terpenggal dengan image

==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...

KETIGA, klik save templateSelanjutnya anda bisa melakukan postingan dan lihat hasilnya, Readmore atau baca selengkapnya akan secara otomatis terpasang setelah anda publish postingannya.

Sumber: frans-net.blogspot.com

Jika Google Adsense Tampil Di Blog Indonesiaku

Pasti itulah para impian para plogger indonesia sekarang. Meskipun tidak ada postingan bahasa inggris di blog kita tetap bisa kok pasang google adsense di blog. Tapi resikonya tanggung sendiri ya mas broo. Meskipun punya resiko dan mas broo tetap ngotot bin ngontop mau masang google adsense di blog ini dia caranya:

1.  Buka :http://www.google.com/friendconnect
  
2.  Klik " Tambahkan Situs Baru ". 

3.  Maka akan muncul halaman baru, kemudian isikan nama situs/blog Sobat, alamat URL blog serta bahasa blog Sobat ( pilih Bahasa Indonesia ) lalu klik " Lanjutkan ". Untuk lebih jelasnya perhatikan gambar dibawah ini :

4.  Klik  " Adsense " (ada di samping kiri halaman), lihat gambar :

5.  Klik " Asosiasikan Akun : nama email anda@gmail.com ", tunggu sampai loading berhenti. Lihat gambar :

6.  Pada " Konfigurasi unit Adsense ", pilih ukuran iklan yang disediakan oleh google friendconnet atau Sobat juga dapat memilih unit iklan yang telah tersimpan di akun adsense Sobat. Lihat gambar :

7.  Klik " Buat kode ", maka akan muncul kode script seperti gambar dibawah ini :

 

8.   Selanjutnya copy kode yang muncul dan paste ke blog bahasa indonesia Sobat.

 

Semoga bermanfaat... :)

Membuat Tulisan Bergerak di Blog (Efek Marquee)

Untuk tulisan bergerak ada beberapa model diantaranya :

1. Membuat tulisan bergerak ke kiri

Kode :   <marquee> Bergerak ki kiri </ marquee> 

Bergerak Ke Kiri  
2. Membuat tulisan bergerak ke kanan dan ke kiri

Kode : <font face='Arial' color='#FF0000'><marquee behavior="alternate">Bergerak Ke kiri Terus Ke Kanan</font></marquee>

Bergerak Ke Kiri Terus Ke Kanan3. Membuat tulisan bergerak ke atas

Kode : <center><font face='Arial' color='#000000'><marquee direction="up">KE ATAS</font></marquee></center>




KE ATAS Kalu ingin tulisan bergerak ke bawah tinggal ganti " up " dengan " down"

4. Membuat tulisan bergerk zigzag

Kode : <font face='Arial' color='#000000'><marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">ZIGZAG</font></marquee></marquee>

ZIG - ZAG


5. Membuat tulisan zig zag kiri kanan

Kode : <font face='Arial' color='#000000'><marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">TEXT</font></marquee></marquee>





ZIG ZAG LAGI



6. Membuat tulisan bergerak tapi ada backgroundnya

Kode : <font color="#FFFF00"><marquee direction="left" style="background:#CD3333">TEXT.</marquee></font>

Terimakasih telah berkunjung di  " FraNGky Blog "

Catatan

Silahkan ganti kode warna, font dan lain2 sesuai keinginan, kecanduan, keperluan, kebutuhan anda mas broo
jika mau bikin iklan melayang alias gentayangan di blog, klik DISINI

Semoga bermanfaat...