ID - CSS Indonesian CSS Style

Membuat Tooltip Link Dengan CSS

Membuat Tooltip Link Dengan CSS, kali ini id css akan share lagi tentang pembuatan deskripsi atau title pada link dengan css, mungkin bisa di bilang juga tooltip, tapi lebih suka memberi nama deskripsi, tapi gak jauh dari tooltip deskripsi ini juga akan muncul saat link di hover a/ saat link di sentuh, nah disini id css menggabungkan tag alt dengan link, jadi penjelasan yang ada di dalam tag alt itu nantinya yang akan muncul, seperti apa model dan bentukX, sebentar dulu Membuat Tooltip Link Dengan CSS ini juga bisa di bilang Membuat Tooltip Link Dengan CSS karena ada sedikit tambahan2 css3 untuk mempercantik tampilan deskripsi nya.

Langsung saja cara penerapannya :
1. Simpan kode di bawah ini di atas kode ]]></b:skin>

.linkSysteM {
}
.linkSysteM a{
text-decoration:none;
text-transform:uppercase;
font-family:'Anton',sans-serif;
color:#00f;
}
.linkSysteM a::after{
content:attr(alt);
display:none;
margin-left:10px;
color:#ccc;
background: rgb(169,3,41);
padding:3px;
-webkit-box-shadow:0 0 5px 1px #000;
-moz-box-shadow:0 0 5px 1px #000;
box-shadow:0 0 5px 1px #000;
width:300px;
position:absolute;
font-family:'Arial',sans-serif;
line-height:1.5;
letter-spacing:1px;
text-transform: lowercase;
font-size:13px;
}
.linkSysteM a:hover::after{
display:inline;
}
.linkSysteM li{
list-style-type:circle;
}

2. Setelah itu klik SIMPAN / SAVE TEMPLATE.
3. Kode penggunaannya.

<div class='linkSysteM'>
<li><a href='Link Anda' alt='Disini Title / Tooltip'>Nama Link<a></li>
</div>

Anda bisa tambahkan kode linknya lebih dari satu contoh seperti ini.

<div class='linkSysteM'>
<li><a href='Link Anda' alt='Disini Title / Tooltip'>Nama Link<a></li>
<li><a href='Link Anda' alt='Disini Title / Tooltip'>Nama Link<a></li>
<li><a href='Link Anda' alt='Disini Title / Tooltip'>Nama Link<a></li>
<li><a href='Link Anda' alt='Disini Title / Tooltip'>Nama Link<a></li>
</div>

Semoga Bermanfaat...

Pengertian HTML Dengan Fungsi Penanaman Dokumen

Pengertian HTML Dengan Fungsi Penanaman Dokumen merupakan postingan pertama pada blog ini. Sebagai seorang blogger pasti sudah tahu apa itu dokumen HTML bukan? Bagi yang sudah tahu tentang perngertian HTML, silahkan abaikan saja postingan ini dan bagi yang belum tahu, silahkan disimak.

Pengertian HTML

HTML merupakan kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarangan. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam browser web surfer. Dokumen ini umumnya berisi informasi atau interface aplikasi di dalam Internet.
Contoh Penerapan HTML :

<html>
<head>
<title>judul halaman<title/>
</head>
<body>
tubuh halaman HTML
</body>
</html>

Ada dua cara untuk membuat sebuah web page: dengan HTML editor atau dengan editor teks biasa (misalnya notepad). Untuk latihan atau mencoba materi pada tulisan ini sebaiknya menggunakan notepad, setelah itu pada bagian mendekati akhir dapat menggunakan editor HTML, hal ini dimaksudkan agar Anda memahami dan terbiasa secara primitif membuat dokumen web.

Penamaan Dokumen

Pilih suatu nama, sembarang nama, kemudian tambahkan sebuah ekstensi”.html” atau “.html” (Tanda petik ganda tidak perlu dituliskan karena digunakan sebagai penjelas saja).

Catatan:

Ekstensi dokumen HTML yang menggunakan 3 karakter, awalnya adalah untuk mengakomodasi sistem penamaan yang ada dalam sistem operasi DOS. Nama dokumen pada beberapa sistem operasi bersifat case sensitif. Nama dokumen yang sama tetapi dituliskan dengan case yang berbeda akan dianggap sebagai dokumen yang berbeda, misalnya dokumen. html akan berbeda dengan DOKUMEN.htm. Kasus case sensitive akan dijumpai pada dokumen web yang dihosting didalam server yang berbasis *nix (Keluarga sistem operasi Unix).

Demikian sedikit pengetahuan tentang Pengertian HTML sebagai postingan pembuka dalam blog, jika ada kata-kata yang salah, mohon dibenarkan.

Cara Merubah Widget Arsip Blogger menjadi Kalender

Tampilan Arsip dari blogger yang hanya berbentuk list. Kali ini akan membagikan Kode JS untuk merubah tampilan Arsip blogger menjadi kalender serta cara penggunaannya. Kode JS ini dibuat oleh phydeaux3 beberapa tahun lalu. dan tutorial ini di kutip dari Mkr Site
Dari kode ini saya buat beberapa tema yang mungkin anda sukai. Untuk pemasangannya tidaklah terlalu sulit. Nah langsung saja.

Cara Pemasangan Di Blog :

Baca Selengkapnya ....

Memasang Slider Dan Responsive Camera Slider

Memasang Slider Dan Responsive Camera Slider....di bayangan kita adalah sulit memasang, berat di buka dan tidak responsive. What the... ?! Camera Slider adalah sekian dari banyak slider yang responsive dan berpenampilan simple elegant. Apalagi dengan pemasangan mudah dan fast load, jarang sekali terkena overload...

Caranya :
Letakkan kode di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/51251543521/camera-slider.js' type='text/javascript'/>

Jika di dalam template anda sudah tercantum salah satu kode javasript di atas jangan di tambahkan lagi.

Lalu cari main-wrapper lalu tekkan kode ini di bawahnya, atau bisa juga di <b:section class='main' id='main' preferred='yes'>

<div id='camslider'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
/* Slider */
.camera_wrap a,.camera_wrap img,.camera_wrap ol,.camera_wrap ul,.camera_wrap li,.camera_wrap table,.camera_wrap tbody,.camera_wrap tfoot,.camera_wrap thead,.camera_wrap tr,.camera_wrap th,.camera_wrap td
.camera_thumbs_wrap a,.camera_thumbs_wrap img,.camera_thumbs_wrap ol,.camera_thumbs_wrap ul,.camera_thumbs_wrap li,.camera_thumbs_wrap table,.camera_thumbs_wrap tbody,.camera_thumbs_wrap tfoot,.camera_thumbs_wrap thead,.camera_thumbs_wrap tr,.camera_thumbs_wrap th,.camera_thumbs_wrap td{background:none;border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;list-style:none}
.camera_wrap{display:none;float:left;position:relative;z-index:0;width:97.6%;padding:6px 7px 6px 6px;}
.camera_wrap img{max-width:none!important}
.camera_fakehover{height:100%;min-height:100px;position:relative;width:100%;z-index:1}
.camera_src{display:none}
.cameraCont,.cameraContents{height:100%;position:relative;width:100%;z-index:1}
.cameraSlide{bottom:0;left:0;position:absolute;right:0;top:0;width:100%}
.cameraContent{bottom:0;display:none;left:0;position:absolute;right:0;top:0;width:100%}
.camera_target{bottom:0;height:100%;left:0;overflow:hidden;position:absolute;right:0;text-align:left;top:0;width:100%;z-index:0}
.camera_overlayer{bottom:0;height:100%;left:0;overflow:hidden;position:absolute;right:0;top:0;width:100%;z-index:0}
.camera_target_content{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:2}
.camera_target_content .camera_link{background:url(http://1.bp.blogspot.com/-HVkOhvZvPWE/UQlkh-TuJsI/AAAAAAAAIEI/3OoSgPgTtvk/s1600/blank.gif);display:block;height:100%;text-decoration:none}
.camera_loader{background:url(http://2.bp.blogspot.com/-9u_hEl1AYQw/UZoFMXLUjnI/AAAAAAAAAco/c8wJh46pAJY/s1600/skitterloading.gif) no-repeat center;background:rgba(255,255,255,0.9) url(http://2.bp.blogspot.com/-9u_hEl1AYQw/UZoFMXLUjnI/AAAAAAAAAco/c8wJh46pAJY/s1600/skitterloading.gif) no-repeat center;-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px;height:36px;left:50%;overflow:hidden;position:absolute;margin:-18px 0 0 -18px;top:50%;width:36px;z-index:3}
.camera_bar{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:3}
.camera_thumbs_wrap.camera_left .camera_bar,.camera_thumbs_wrap.camera_right .camera_bar{height:100%;position:absolute;width:auto}
.camera_thumbs_wrap.camera_bottom .camera_bar,.camera_thumbs_wrap.camera_top .camera_bar{height:auto;position:absolute;width:100%}
.camera_nav_cont{height:65px;overflow:hidden;position:absolute;right:9px;top:15px;width:120px;z-index:4}
.camera_caption{bottom:0;display:block;position:absolute;width:100%}
.camera_caption &gt; div{padding:10px 10px}
.camerarelative{overflow:hidden;position:relative}
.imgFake{cursor:pointer}
.camera_prevThumbs{bottom:4px;cursor:pointer;left:0;position:absolute;top:4px;visibility:hidden;width:30px;z-index:10}
.camera_prevThumbs div{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -160px 0;display:block;height:40px;margin-top:-20px;position:absolute;top:50%;width:30px}
.camera_nextThumbs{bottom:4px;cursor:pointer;position:absolute;right:0;top:4px;visibility:hidden;width:30px;z-index:10}
.camera_nextThumbs div{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -190px 0;display:block;height:40px;margin-top:-20px;position:absolute;top:50%;width:30px}
.camera_command_wrap .hideNav{display:none}
.camera_command_wrap{left:0;position:relative;right:0;z-index:4}
.camera_wrap .camera_pag .camera_pag_ul{list-style:none;margin:0;padding:0;text-align:center}
.camera_wrap .camera_pag .camera_pag_ul li{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;cursor:pointer;display:inline-block;height:16px;margin:20px 5px;position:relative;text-align:left;text-indent:-9999px;width:16px}
.camera_commands_emboss .camera_pag .camera_pag_ul li{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}
.camera_wrap .camera_pag .camera_pag_ul li &gt; span{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;height:8px;left:4px;overflow:hidden;position:absolute;top:4px;width:8px}
.camera_commands_emboss .camera_pag .camera_pag_ul li:hover &gt; span{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent &gt; span{-moz-box-shadow:0;-webkit-box-shadow:0;box-shadow:0}
.camera_pag_ul li img{display:none;position:absolute}
.camera_pag_ul .thumb_arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid;top:0;left:50%;margin-left:-4px;position:absolute}
.camera_prev,.camera_next,.camera_commands{cursor:pointer;height:40px;margin-top:-20px;position:absolute;top:50%;width:40px;z-index:2}
.camera_prev{left:0}
.camera_prev &gt; span{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat 0 0;display:block;height:40px;width:40px}
.camera_next{right:0}
.camera_next &gt; span{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -40px 0;display:block;height:40px;width:40px}
.camera_commands{right:41px}
.camera_commands &gt; .camera_play{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -80px 0;height:40px;width:40px}
.camera_commands &gt; .camera_stop{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -120px 0;display:block;height:40px;width:40px}
.camera_wrap .camera_pag .camera_pag_ul li{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;cursor:pointer;display:inline-block;height:16px;margin:20px 5px;position:relative;text-indent:-9999px;width:16px}
.camera_thumbs_cont{-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;overflow:hidden;position:relative;width:100%}
.camera_commands_emboss .camera_thumbs_cont{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}
.camera_thumbs_cont &gt; div{float:left;width:100%}
.camera_thumbs_cont ul{overflow:hidden;padding:3px 4px 8px;position:relative;text-align:center}
.camera_thumbs_cont ul li{display:inline;padding:0 4px}
.camera_thumbs_cont ul li &gt; img{border:1px solid;cursor:pointer;margin-top:5px;vertical-align:bottom}
.camera_clear{display:block;clear:both}
.showIt{display:none}
.camera_caption a{color:#b8fa5e;font:16px Coda;margin:0 10px 10px 0}
.camera_caption a:hover{color:#fff}
.camera_caption .comt{font:11px Tahoma;margin:5px 0 0;color:#fc0; display:none}
.camera_caption p{font:12px Arial;margin:5px 0 0}
.camera_clear{clear:both;display:block;height:1px;margin:-1px 0 25px;position:relative}
.pattern_1 .camera_overlayer{background:url(http://4.bp.blogspot.com/-mK_USJALT1w/USSK5zcb0VI/AAAAAAAAAPM/BXmbKtwCdPI/s1600/laya.png) repeat}
.pattern_2 .camera_overlayer{background:url(http://2.bp.blogspot.com/-VVgg8zHpY1Q/USSLGoqh93I/AAAAAAAAAPU/1L3y6jLQv3I/s1600/layb.png) repeat}
.pattern_3 .camera_overlayer{background:url(http://2.bp.blogspot.com/-vt97g0-7sy0/USSLQhI53RI/AAAAAAAAAPc/LUep3GmWmnI/s1600/layc.png) repeat}
.pattern_4 .camera_overlayer{background:url(http://1.bp.blogspot.com/-siY1U2dtkdk/USSLcJ6_iWI/AAAAAAAAAPk/P8wAOzA3Myo/s1600/layd.png) repeat}
.pattern_5 .camera_overlayer{background:url(http://4.bp.blogspot.com/-svWnNDcbzkQ/USSLndwFBeI/AAAAAAAAAPs/IpAgpa_YNXs/s320/laye.png) repeat}
.pattern_6 .camera_overlayer{background:url(http://4.bp.blogspot.com/-beOrTn_xAb0/USSL5TpKKKI/AAAAAAAAAP0/Be6TaEBGNbM/s320/layf.png) repeat}
.pattern_7 .camera_overlayer{background:url(http://1.bp.blogspot.com/-ZIu8sF_tT74/USSMFPPT_aI/AAAAAAAAAP8/ihrFsYG3Y4E/s320/layg.png) repeat}
.pattern_8 .camera_overlayer{background:url(http://1.bp.blogspot.com/-KSaEP4OQ_qw/USSMPrJ3PzI/AAAAAAAAAQE/K-3k29KDUwM/s320/layh.png) repeat}
.pattern_9 .camera_overlayer{background:url(http://3.bp.blogspot.com/-FilWZbFD07E/USSMiDKIURI/AAAAAAAAAQM/K7a6fvbnvGc/s1600/layi.png) repeat}
.pattern_10 .camera_overlayer{background:url(http://4.bp.blogspot.com/-M96ItiZRE7w/USSMiAM3xEI/AAAAAAAAAQQ/_NGNkQuKAnM/s320/layj.png) repeat}
.camera_caption{color:#fff}
.camera_caption &gt; div{background: rgba(0, 0, 0, 0.7)}
.camera_wrap .camera_pag .camera_pag_ul li{background:#8cd700}
.camera_wrap .camera_pag .camera_pag_ul li:hover &gt; span{background:#8cd700}
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent &gt; span{background:#7b418e;box-shadow: 0 0 8px #e6aef8}
.camera_pag_ul li img{border:3px solid #f3fbfd;-moz-box-shadow:0 3px 6px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);box-shadow:0 3px 6px rgba(0,0,0,.5)}
.camera_pag_ul .thumb_arrow{border-top-color:#f3fbfd}
.camera_wrap .camera_pag .camera_pag_ul li{background:#f3fbfd;box-shadow:0 1px 3px #6ab3cc; -moz-box-shadow:0 1px 3px #6ab3cc; -webkit-box-shadow:0 1px 3px #6ab3cc}
.camera_thumbs_cont ul li &gt; img{border-color:1px solid #000}
/*Responsive*/
@media screen and (max-width: 960px) {
.main-wrapper{width:65.5%}
.sidebarleft-wrapper,.sidebar2-wrapper{display:none}
}
@media screen and (max-width: 760px) {
.main-wrapper{margin-right:0;width:auto;padding:10px 10px 0}
.sidebar-wrapper,.sidebar1-wrapper{border:none;width:auto;margin:0 auto 10px;padding:0 10px}
}
@media screen and (max-width: 340px){
.camera_wrap{width:95%}
.camera_caption p{display:none}
.cutter{width:100px;height:70px;}
}
</style>
<div id='randompost'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
CameraSlider({
blogURL:'http://id-css.blogspot.com',
MaxPost:5,
RandompostActive:true,
idcontaint:"#randompost",
ImageSize:500,
NumCharacter: 250,
textcom:"comments",
Notextcom:"No Comment",
noImage:"http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg",
timestart:2000,
slidebylabel:false
});
});
//]]>
</script>
</div>
</b:if> 
<div style='clear: both;'/>
</div>

Ganti Dengan URL Anda Kode Di atas
Semoga Bermanfaat....

Menambah Emotion Kaskus Untuk Blogger

Menambah Emotion Kaskus Untuk Blogger , Emotion Kaskus tidak hanya bisa di pasang pada platform wordpress saja. Tapi sekarang emotion Kaskus telah support di blogger. Dan saya pikir emotion kaskus ini Bermanfaat buat anda sahabat ID CSS ...

Tambahkan Javascript ini di bawah </head>

<script type='text/javascript'>
// Emotikon kaskus add by Wammy San
//www.bocahit.com
//original from MKR
//<![CDATA[
  window.emoticonx=(function(){var a=function(c){var f=c||{},d=f.emoRange||"#comments p, div.emoWrap",e=f.putEmoAbove||"iframe#comment-editor",b=f.emoMessage||"To insert emoticon you must added at least one space before the code.";$(e).before('<div style="text-align:center" class="emoWrap"> :nosara :sundul :hoax :salaman :lagi :ri :hug :igo m :ealah :aha :bingung :cendol :capede :kaskus :malu :marah :mod :ngacir :ngakak ukul :tos  :siul keren :alay tkp :sempurna :hope :jalan :repost :sial makasih :maho <br/><b>Click to see the code!</b><br/>'+b+"</div>");var g=function(j,i,h){$(d).each(function(){$(this).html($(this).html().replace(/<br>:/g,"<br> :").replace(/<br>;/g,"<br> ;").replace(/<br>=/g,"<br> =").replace(/<br>\^/g,"<br> ^").replace(j," <img style='max-height:24px' src='"+i+"' class='emo delayLoad' alt='"+h+"' />"))})};g(/\s:sundul+/ig,"https://lh5.googleusercontent.com/-MEwJO-_59mo/Uk1eMCYPIvI/AAAAAAAAF2E/8Hyw5zu92qk/s128/sundul.gif",":sundul")
;g(/\s:hoax+/ig,"https://lh4.googleusercontent.com/-d57Ceyy5AoA/Uk1jwzT7VKI/AAAAAAAAF3E/G7tEfkRChow/s128/hoax.gif",":hoax")
;g(/\s:nosara+/ig,"https://lh3.googleusercontent.com/-iTanO53VGjE/Uk1j0IQ1LfI/AAAAAAAAF4I/7myzX-pBMiU/s128/nosara.gif",":nosara")
;g(/\s:salaman+/ig,"https://lh4.googleusercontent.com/--iL8s-ng8mw/Uk1j06xnZtI/AAAAAAAAF4g/I7Ck7Wpv6ps/s128/shakehand2.gif",":salaman")
;g(/\s:lagi+/ig,"https://lh6.googleusercontent.com/-WrVKSVPMX0k/Uk1j1GgICLI/AAAAAAAAF4s/PpspTJLGUCM/s128/sundul%20ah.gif",":lagi")
;g(/\s:ri+/ig,"https://lh4.googleusercontent.com/-NjOR_q_xz4U/Uk1jx8MftaI/AAAAAAAAF3Y/Ih7EdiizlzE/s128/indonesia.gif",":ri")
;g(/\s:hug+/ig,"https://lh6.googleusercontent.com/-1P5qp8_-MVc/Uk1j0CJwJvI/AAAAAAAAF4U/Zbpj0T45O6c/s128/peluk.gif",":hug")
;g(/\s:igo/ig,"https://lh4.googleusercontent.com/-hm2J2_hJGcA/Uk1jxKdK_AI/AAAAAAAAF3I/mkschUF3W0Y/s93/igo.gif",":igo")
;g(/\s:pm/ig,"https://lh4.googleusercontent.com/-FQM51aJVEpA/Uk1jwWVp6OI/AAAAAAAAF20/xMSd3fA7IMg/s92/cekpm.gif",":pm")
;g(/\s:ealah+/ig,"https://lh6.googleusercontent.com/-MxKY2zU8C4E/Uk2EoTcb-KI/AAAAAAAAF5Y/KOqAC9whjJ0/s128/fd_2.gif",":ealah")
;g(/\s:aha/ig,"https://lh4.googleusercontent.com/-8M7KRhzvrVc/Uk1jvbm5bMI/AAAAAAAAF2k/dSdgDXa_DR4/s128/aha.gif",":aha")
;g(/\s:bingung/ig,"https://lh3.googleusercontent.com/-syDjvggtKmY/Uk1jvaE8gNI/AAAAAAAAF2c/G07dtxpsBzo/s128/bingung.gif",":bingung")
;g(/\s:cendol+/ig,"https://lh4.googleusercontent.com/-gIqfvxgrPq8/Uk1jvVH5PlI/AAAAAAAAF2o/6evzbG8WFw4/s128/big%20cendol.gif",":cendol")
;g(/\s:capede+/ig,"https://lh5.googleusercontent.com/-58bufbjy2P4/Uk1jwEon_4I/AAAAAAAAF24/OFPYaQQ1-sU/s128/capede.gif",":capede")
;g(/\s:kaskus/ig,"https://lh6.googleusercontent.com/-Elf1CgHTRcY/Uk1jxerfSlI/AAAAAAAAF3U/StzhevpulRs/s128/ilovekaskus.gif",":kaskus")
;g(/\s:malu/ig,"https://lh5.googleusercontent.com/-PUxONf5X8Y0/Uk1jyM5TZ0I/AAAAAAAAF3k/ScZiYIuPHyw/s128/malu.gif",":malu")
;g(/\s:marah+/ig,"https://lh5.googleusercontent.com/-fmHUDU3kPJI/Uk1jyn1tYzI/AAAAAAAAF4E/svUe3I4OQ6U/s128/marah.gif",":marah")
;g(/\s:mod/ig,"https://lh4.googleusercontent.com/-OdUm82Q0YTs/Uk1jyoEYRQI/AAAAAAAAF3o/OVvUNxBUAgs/s128/mood.gif",":mod")
;g(/\s:ngacir+/ig,"https://lh5.googleusercontent.com/-YHnB5_y0fPM/Uk1jzV4ublI/AAAAAAAAF30/f8vW3n9U-Lw/s128/ngacir2.gif",":ngacir")
;g(/\s:ngakak+/ig,"https://lh4.googleusercontent.com/-kulaWhVAU7E/Uk1jzTrJmfI/AAAAAAAAF34/JWN0l440xio/s128/ngakak.gif",":ngakak")
;g(/\s:pukul+/ig,"https://lh5.googleusercontent.com/-9N82s5ZNaVQ/Uk1j0oUp-7I/AAAAAAAAF4Y/uK97EMl-Trk/s128/pukul.gif",":pukul")
;g(/\s:tos+/ig,"https://lh3.googleusercontent.com/-0i0RyyQ9Law/Uk1j1V1AaYI/AAAAAAAAF4w/VUkHuCJd1bA/s128/toastcendol.gif",":tos")
;g(/\s:siul+/ig,"https://lh4.googleusercontent.com/-s61kM9F3tK4/Uk2FDrpQq8I/AAAAAAAAF6o/TuKjwJpl_dE/s128/siul.gif",":siul")
;g(/\skeren/ig,"https://lh5.googleusercontent.com/-ll03M5FkeLA/Uk2EmXuyMII/AAAAAAAAF5E/hhxVOwUuP-8/s128/cool2.gif","keren")
;g(/\s:alay/ig,"https://lh4.googleusercontent.com/-Mh91bkO_sc8/Uk2Eme41eOI/AAAAAAAAF5Q/nW6mCCmqVVk/s128/alay.gif",":alay")
;g(/\stkp+/ig,"https://lh3.googleusercontent.com/-PimfzdZp14U/Uk2FW03y-rI/AAAAAAAAF7Q/_I4CI94low4/s128/tkp.gif","tkp")
;g(/\s:sempurna+/ig,"https://lh3.googleusercontent.com/-O99NI52fkqU/Uk2E5Vf0xeI/AAAAAAAAF6Q/kp6ERAJIeSA/s128/rate.gif",":sempurna")
;g(/\s:hope+/ig,"https://lh5.googleusercontent.com/-jxKCczha7aU/Uk2Ete6qtuI/AAAAAAAAF5w/a4CBM8udang/s128/hope.gif",":hope")
;g(/\s:jalan+/ig,"https://lh4.googleusercontent.com/-XcK2Mi-kQw0/Uk2FZFkGKyI/AAAAAAAAF7Y/qgjrBgcfdKU/s128/traveller.gif",":jalan")
;g(/\s:repost+/ig,"https://lh4.googleusercontent.com/-sc7gwJpabgE/Uk2Eqe7VlwI/AAAAAAAAF5g/3fpny1lKXok/s128/fd_7.gif",":repost")
;g(/\s:sial+/ig,"https://lh6.googleusercontent.com/-MxKY2zU8C4E/Uk2EoTcb-KI/AAAAAAAAF5Y/KOqAC9whjJ0/s128/fd_2.gif",":sial")
;g(/\makasih+/ig,"https://lh5.googleusercontent.com/-t9c_zCml3Ig/Uk2FUMgnYyI/AAAAAAAAF7I/Tqr8MF4PzRg/s128/thanks2.gif","makasih")
;g(/\s:maho/ig,"https://lh5.googleusercontent.com/-WBc4jXiyu4s/Uk2FNIAnl1I/AAAAAAAAF64/nTtgl7QhQjI/s128/supermaho.gif",":maho")
;$("div.emoWrap").one("click",function(){if(b){alert(b)}});$(".emo").css("cursor","pointer").live("click",function(h){$(".emoKey").remove();$(this).after('<input class="emoKey" type="text" size="'+this.alt.length+'" value=" '+this.alt+'" />');$(".emoKey").trigger("select");h.stopPropagation()});$(".emoKey").live("click",function(){$(this).focus().select()})};return function(b){a(b)}})();
//]]>
</script>

Lalu letakkan kode di bawah ini, diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat code!",
emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
})
});
//]]>
</script>

Untuk anda yang suka mempersingkat javascript di atas silahkan unggah javascript di atas di hosting anda ataupun di google drive anda.

Semoga Bermanfaat....

Indonesian CSS Style

…

…

…

Membuat Tooltip Link Dengan CSS

Pengertian HTML Dengan Fungsi Penanaman Dokumen

Cara Merubah Widget Arsip Blogger menjadi Kalender

Memasang Slider Dan Responsive Camera Slider

Menambah Emotion Kaskus Untuk Blogger

Official Partner