Cara memberi emoticon di kotak komentar

Diposting oleh Unknown | | Posted On Senin, 27 Agustus 2012 at 01.07

 Cara Memberi Emoticon Smiley Pada Blogger

Posted By Trendster
Semenjak Blogger membuat sistem kotak komentarnya "Embedded Comments form" Atau kotak komentar langsung dibawah komentar populasi para komentator semakin meningkat, tidak seperti dulu jika ingin menulis komentar harus mengklik link post comments yang akan membuka jendela baru atau jendela pop-up. Dulu jika ingin membuat kotak komentar dibawah postingan harus pakai jasa pihak ke-3 misalnya haloscan, tetapi yang menggunakan jasa haloscan berbondong-bondong memindah kotak komentarnya menjadi default blogger lagi karena blogger sudah membuka sistem "embedded comments form".

Nah semakin meningkatknya para komentator di blogger maka semakin meningkat pula keinginan para blogger untuk mengubah tampilan area komentar dan menambah pernak-pernik lainya, maka dari itu saya juga ingin membuat pernak-pernik komentar blogger dengan smiley yang memungkinkan sang komentator bisa mengexpresikan ucapanya dengan sebuah gambar emoticon atau smiley.

"Ilmu tak akan bermanfaat jika tidak dibagi-bagikan", Nah ucap-ucapan itulah yang membuat saya selalu ingin berbagi, sebelum saya membuat tutorialnya terlebih dahulu saya akan memberikan informasinya, ehh sampai lupa menawarkan tutorial yang satu lagi yaitu tampilan komentar pemilik blog berbeda (baca disini). Gambar emticonya cukup sederhana bisa dilihat dibawah ini

:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))
Gambarnya seperti diatas, teks atau tulisan yang disamping kanan gambar adalah symbol yang jika ditulis di kotak komentar akan berubah menjadi gambar yang ada disamping kirinya.

Nah jika Anda berminat membuatnya ikuti langkah-langkah dibawah ini

Pertama-tama masuk blogger dan masuk menu Layout kemudian masuk menu Edit HTML

Jangan lupa centang "Expand Widget Templates"

Taruh Script dibawah ini diatas code </body>

<script src='http://sites.google.com/site/anasceria/smiley.js' type='text/javascript'/>

Kalau sudah cari code HTML seperti dibawah ini

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

Kemudian sisipkan code HTML dibawah ini diantara code yang berwarna biru dan hijau diatas tadi atau lebih tepatnya dibawah code <p class='comment-footer'>



<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>

Nah kalau sudah SAVE pengaturanya.


 ....Semoga bermanfaat....

Cara Sembunyikan FB di Pojokan

Diposting oleh Unknown | | Posted On Sabtu, 25 Agustus 2012 at 20.07




Bagi blogger yang mempunyai facebook fanpage sendiri, adalah biasa untuk meletakkan fanpage tersebut di blog. Biasa untuk letakkan di sidebar blog, untuk kali ini admin akan tunjukkan pula cara untuk sembunyikan facebook fan page ditepi blog anda.




Anda juga boleh tengok contoh page yang diletakkan di tepi dalam blog di blog demo ini.

Tutorial sembunyikan Fb fan page adalah seperti di bawah.

Langkah 1:

i. Dari dashboard > design > edit HTML

ii. Menggunakan fungsi find, (ctrl + F), cari kod </head>

iii. Copy dan paste kod di bawah SEBELUM kod </head>


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>


cth:


Nota: Jika anda dapati kod di atas sudah ada sebelum anda copy paste, abaikan langkah 1, pergi terus ke langkah 2.

iv. Selepas selesai klik Save Template





Langkah 2:

i. Dari dashboard > design > page element > add a gadget > HTML/javascript

ii. Copy dan paste kod di bawah dalam ruangan HTML/javascript yang anda telah buka


<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=URL PAGE ANDA&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://tutorialuntukblog.blogspot.com/2011/10/tutorial-sembunyikan-fb-fan-page-di.html">Tutorial Here</a></span></div></div>


Nota: Gantikan "URL PAGE ANDA"

contoh url page:


iii. Save dan lihat hasilnya.:)

Cara Meemberi Kalender Pada Blog

Diposting oleh Unknown | | Posted On Kamis, 23 Agustus 2012 at 05.57

Kalender Lucu Untuk Blogger - Blog Kalender Widget

&lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
Ingin mempercantik blog dengan kalender (Kalender Lucu Untuk Blogger)?

Hari ini saya akan menuliskan tutorial / cara pasang kalender untuk blogger dengan menggunakan blog kalender widget.

Sebelum saya tuliskan cara pasang kalender di blogger, mungkin teman-teman ingin melihat bagaimana penampilan kalender lucu untuk blogger ini, berikut gambar kalender tersebut
Kalender Untuk Blogger
Ada berbagai macam pilihan blog kalender widget yang bisa kamu pilih, silakan pilih kalender lucu untuk blogger yang kamu suka.
Kalender Lucu Untuk Blogger

Widget Blog Kalender

Berikut cara mendapatakan script kalender widget untuk di pasang pada blog blogger kamu
  1. Kunjungi www.cuteki.com/widgets/calendars/
  2. Pilih dan klik widget kalender yang kamu suka
  3. Sesuaikan lebar widget kalender ini dengan template blogger yang kamu gunakan saat ini
  4. Kopi dan paste script kalender widget di blog blogger kamu

Panduan Cara Pasang Kalender Di Blogger

Berikut tutorial pasang kalender widget di blogger
  1. Login ke blogger
  2. Pilih menu Rancangan / Tata Letak
  3. Klik Tambah Gadget / Add Gadget
  4. Pilih Gadget HTML/JavaScript
  5. Paste script kalender widget di sana
  6. Simpan
Demo Kalender Lucu Untuk Blogger


Mungkin kalendernya tidak langsung bisa dilihat (tergantung koneksi internet yang kita gunakan)

Nah itulah tutorial/panduan cara pasang kalender di blogger menggunakan script kalender lucu untuk blogger.
Selamat mencoba dan semoga bermanfaat.

Cara Membuat Tex Efek Pada Header Blog

Diposting oleh Unknown | | Posted On at 05.38

Membuat Text Efek Pada Header

6.14.2010 Label:
Sebenarnya cara membuat tulisan efek pada header sering digunakan untuk membuat banner blog, akan tetapi dengan cara yang lebih kreatif dan mudah, membuat efek pada header blog sobat bukanlah hal yang sulit.

Dengan memanfaatkan jasa situs image cool text, Sobat blog bisa saja membuat bermacam-macam gaya tulisan. Karna style dan text-nya sangat bervariatif, sangat cocok untuk blog Sobat agar lebih terlihat atraktif.

Rifweb Experiences

Image by Cool Text: Logo and Button Generator - Create Your Own

Adapun caranya adalah sebagai berikut :
  • Masuk ke alamat http://cooltext.com.
  • Login menggunakan usser acount Sobat, jika belum punya silahkan registrasi terlebih dahulu.
  • Pilih gaya tulisan/logo style yang Sobat sukai (rifweb memilih animated glow/tulisan yang berkedip
Setelah Sobat masuk halaman Logo-Desig, jangan lupa untuk mengisi nama blog Sobat pada kolom Logo text. Sesuaikan gaya text (Font)  dan besar text (Text Size).

Apabila langkah diatas telah selesai sesuikanlah warna logo text dengan warna header sobat ya,,,


lalu klik Render Logo untuk memproses-nya dan klik Get HTML Code mendapatkan kode HTML yang akan dipasang di header blog Sobat.
Dan klik I Agree untuk menytakan bahwa Sobat setuju dengan peraturan yang diberikan.

ini contoh kode HTML-nya :

<a href="http://cooltext.com"><img src="http://images.cooltext.com/1592328.gif" width="697" height="111" alt="Rifweb Experiences" /></a>
<br />Image by <a href="http://cooltext.com">Cool Text: Logo and Button Generator</a> - <a href="http://cooltext.com/Logo-Design?LogoID=527978126">Create Your Own</a>

Hapus kode yang berwarna merah dan copy kode yang berwarna hijau untuk dimasukan pada header blog sobat.

Cara pasang di Blog :
  • Masuk ke halaman Dashboar > Rancangan > Elemen Laman > Edit Header
  • Masukan gambar Url dari cooltext yang berwarna hijau tadi.

Klik Simpan dan lihatlah hasilnya.

Selamat mencoba.

Cara Memberi Google Traslate

Diposting oleh Unknown | | Posted On Selasa, 21 Agustus 2012 at 02.00

 

 Bagaimana cara memasang/membuat Google translator/translate yang bentuk bendera negara di blog Blogger?...

Beberapa hari yang lalu saya memasang Google Translate untuk blog ini yang tujuannya adalah untuk mempercantik blog, selain mempercanti blog saya pikir blog ini juga sangat bermanfaat dan memang perlu di pasang di blog berbahsa indonesia. Siapa tau saja ada bule yang mampir ke blog ini

Ok lalu bagaimana cara pasang google translate yang ada gambarnya di blogger?...
Santai dulu bos... sebelum saya tuliskan cara membuat/pasang Google translator di blogger saya akan jelsakan dulu bahwa gambar latar belakang bendera negaranya nanti transparan.

Mari Kita Mulai.......

Panduan Cara Pasang Google Translate di Blogger

Untuk memasang translator/translate Google di blog blogger anda maka langkah pertama yang harus anda lakukan adalah login ke akun blogger anda dulu.

Kemudian Pergi Ke Design => Page Elements, di sana anda akan menemukan tempat untuk meletakkan Gadget Google Translate ini.

Untuk melihat bagaimana sih bentuk dari Page Elements ini salahkan baca : Panduan Cara Menghias Blog Blogger

Klik Add a Gatget, kemudian pilih Gadget HTML/JavaScript.

Setelah itu masukkan script Google Translate di dalam gadget HTML/JavaScript tersebut, berikut script Google Translate yang harus anda masukkan di sana:
<style>
.google_translate img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;border:0;}
.google_translate:hover img {filter:alpha(opacity=30);-moz-opacity: 0.30;opacity: 0.30;border:0;}
.google_translatextra:hover img {filter:alpha(opacity=0.30)-moz-opacity: 0.30opacity: 0.30;border:0;}
</style>
<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj1AdOWZI/AAAAAAAAA1w/lWUkGNrOFYo/French_thumb%5B5%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9XzcT6jnBI5oEJVap-tVJvkmnUW9Gp4h_VpDnwg6WVJQKfRvbUwflZ3kQPKUTGGRzjFe0Q-oloh5JnscqmSXJwOsiWGWNFF5-lTmsfEZ5C1S2iK5LkYv3QXQ5R16AV4zNP9uwWxW33Y-F/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8VjE1ALfYAC60pr50JlopSNIxG0NtTgYsEYo9bz3bEVhlgRr7EC7E8EX-4Yl6b2gg6hJrV7IgfCXmUfl3s824s2T46tvJwnbppfiCG885wyg9FJ5FHZkPVzji009avjtgydGt0OoNOrV/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj-14HeyI/AAAAAAAAA2I/TN52dIqkO9Q/Italian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkBmKewNI/AAAAAAAAA2Q/43NEAnyNo1I/Dutch_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a>
<br />
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkESa-0pI/AAAAAAAAA2Y/i0X4cKgxq3g/Russian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkG0osjzI/AAAAAAAAA2g/_kM2A16R_Ho/Portuguese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzrLleuZp_bUh1d9uOXqJhQVCLhsNLz73j-NOA7lsqGiC0Dd8ze8TqZYbJMg0n_GBeOnfBFVvOWPysLs2F-foPRD2jk0gA-5qsqIbhSxKs0z9a-P3CUknw3Yf76S9xElqDZazhbHGwiAHb/?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkMouNMKI/AAAAAAAAA2w/L5l6J-Hh8XA/Korean_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkPdkvXBI/AAAAAAAAA24/A1LSG1lcuac/Arabic_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwkSgrv4ZI/AAAAAAAAA3A/jQqZ1l6avts/Chinese-Simplified_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:13px" width="24" /></a>
</center>
Setelah itu klik Save (Simpan).

Nah itulah cara memasang google translator/translate di blogger, cara tersebut menurut saya adalah cara termudah untuk memasang google translator yang ada gambar bendera negaranya di blogger.

Sebenarnya masih ada cara lainnya, namun hasilnya sama saja, jadi saya rasa 1 cara saja sudah cukup dan lagi untuk apa juga pakai cara yang susah kalau cara yang mudah ada.
Selamat mencoba dan semoga berhasil
Blogger Templates by Blog Forum