May 30, 2013

Membuat Sidebar Accordion Pada Blog



Selamat siang...

Mungkin sudah biasa melihat sidebar accordion yang kebanyakan dibuat dalam satu widget "HTML/Javascript", seperti dalam postingan saya dulu. Hanya, kekurangannya mungkin dalam menu accordion tersebut kita hanya dapat memasukkan widget-widget tertentu, namun untuk widget bawaan, seperti follower, popular post, dan arsip blog tidak dapat masuk dalam menu accordion nya.

Agar widget-widget tersebut, yang kalian taruh di sidebar misalnya, dapat kita masukkan dalam menu accordion, maka yang perlu dilakukan adalah membuat efek accordion pada sidebar nya.

Lalu, bagaimana caranya ?

1. Login ke blogger.
2. Pilih Template - Edit HTML.
3. Cari kode </head> dan letakkan kode berikut ini diatasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'/>

<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('#sidebar-wrapper1 .widget-content').hide();
    $('#sidebar-wrapper1 h2').css('cursor', 'pointer').click(function() {
        $('#sidebar-wrapper1 h2').removeClass('active').next().slideUp('slow');
        if ($(this).next().is(':hidden')) {
            $(this).addClass('active').next().slideDown('slow');
        } else {
            $(this).removeClass('active').next().slideUp('slow');
        }
    });
});
//]]>
</script>


4. Simpan Template.

 *Keterangan : Apabila didalam template sudah terdapat kode jQuery seperti yang saya beri garis bawah, maka tidak perlu diletakkan lagi.

Tips : Coba lihat kode yang saya beri warna ungu, kode tersebut tidak 100% sama, karena ID tiap template mungkin berbeda-beda. Coba temukan kode yang kurang lebih seperti ini :

<aside id='sidebar-wrapper1'>

        <b:section class='sidebar1' id='sidebar1' preferred='yes'>

..................................................................

..................................................................

        </b:section>

 </aside>


atau mungkin yang seperti ini :

<div id='sidebar-wrapper1'>

        <b:section class='sidebar1' id='sidebar1' preferred='yes'>

..................................................................

..................................................................

        </b:section>

 </div>


Lihat kode berwarna kuning, itulah ID sidebar template yang harus sama dengan kode berwarna ungu dalam script untuk menciptakan efek accordion pada sidebar blog.

Bagaimana sob?
Terima kasih, semoga bermanfaat yah...

Postingan ini sekaligus menjawab pertanyaan Agan Sophie Riswandono, semoga membantu...

May 23, 2013

Design : Aiizahh Simple Blue Template



Selamat siang sob...

Wah, ga kerasa udah beberapa hari sejak post terakhir saya, dan terus terang saya lagi mendesain template beberapa hari ini. Maklum, sedang ada semangat dan ide, jadi langsung saja saya aplikasikan menjadi sebuah bentuk yang nyata...

Bila membaca posting terakhir saya, disitu saya katakan bahwa itu adalah "template pertama jadi mungkin berantakan", maka kali ini yang kedua masih juga dan bahkan tambah berantakan... **p **p **p

Template kali ini saya namakan Aiizahh Simple Blue, karena warna dasar nya memang biru dengan tampilan yang "sama tapi beda" dan "beda tapi sama" dengan template sebelumnya. **p **p **p .


Untuk informasi template ini :

1. SEO friendly.

2. 3 Kolom pada bagian footer.

3. Quick search dengan Json blogger dengan tampilan yang lebih simple.

4. Navigasi halaman AJAX.

5. Floating breadcumbs pada halaman posting.

6. Efek animasi loading pada halaman blog.

7. Emoticon include, baik pada komentar maupun pada postingan.

8. Menu chatbox ala Facebook, dimana bisa diletakkan kode buku tamu didalamnya.


Bagaimana sob???

Terima kasih, apabila tertarik untuk mengunduh dan menggunakannya mohon untuk tidak menghapus credit link didalamnya...

May 20, 2013

Design : Aiizahh Try To Colorful Template



Selamat siang...

Kali ini saya ingin berbagi sebuah template (pertama kalinya, jadi mungkin berantakan... **p ) yang saya desain sendiri, mencoba untuk sedikit berbeda meskipun mengedepankan konsep simple dan colorful. Saya namakan "Aiizahh Try To Colorful" merujuk pada tampilannya yang penuh warna, juga merupakan representasi dari blog ini yang mencoba untuk terus berwarna di dunia blogging.

Template ini sendiri saya desain dengan menggunakan kerangka template nya Mas Taufik, sehingga didalam template saya sertakan juga nama beliau sebagai bentuk terima kasih, karena tanpa kerangka template tersebut saya mungkin akan kesulitan dalam mendesainnya menjadi seperti yang saya ingin buat, disamping banyak juga tutorial dari sana yang saya terapkan.

Bagaimana dengan informasi template ini??

1. Responsif.
2. Mode pencarian cepat.




3. Navigasi halaman AJAX.




4. Emoticon include. :-bd
5. Efek animasi loading. \o/
6. Colorful. 0:)


Bagaimana sob???
Bila tertarik menggunakannya silahkan download pada link dibawah, dan mohon untuk tidak menghapus credit link pada template.


Terima kasih...

May 16, 2013

Mengubah Tampilan Blog Dengan Style Switcher

Selamat pagi sob...

Kali ini saya ingin berbagi sebuah tutorial yang sangat menarik, yakni mengenai cara mengubah tampilan blog dengan menggunakan style switcher. Style switcher sendiri adalah sebuah aksesoris bagi blog yang dapat digunakan oleh, baik pemilik blog maupun pengunjung blog dengan tujuan mengganti tampilan blog tersebut sehingga menjadi semakin menarik.



Selain membuat blog semakin menarik, tentu saja diharapkan pengunjung blog akan lebih betah untuk berkeliling di dalam blog kita.

Mungkin sudah banyak sekali tutorial tentang aksesoris ini, namun saya lebih suka dengan tampilan style switcher ala Mas Taufik ini, sehingga saya mencoba untuk melakukan modifikasi pada beberapa bagian. Jadi, dengan style switcher ini kita tidak hanya bisa mengubah background menjadi warna saja, namun juga dengan tambahan opsi pattern yang menarik.


Disamping itu, ada juga opsi untuk mengganti font, baik style, ukuran, maupun warna, serta ditambah dengan javascript cookie sehingga meskipun pengunjung membuka halaman blog yang berbeda-beda namun perubahan itu akan tetap bertahan, bahkan meskipun pengunjung blog tersebut mengakses blog kita besok, lusa, minggu depannya, sampai bulan depannya karena masa kadaluarsa dari cookie ini sendiri adalah selama satu tahun.

1. Login ke blogger.
2. Masuk ke Template - Edit HTML.

3. Letakkan kode berikut ini tepat diatas </head> atau </body> :

<script type='text/javascript' src='http://aiizahh-reader.googlecode.com/svn/trunk/patterns/cookieforblog.js'></script>
<script type='text/javascript' src='http://aiizahh-reader.googlecode.com/svn/trunk/patterns/styleswitcher.js'></script>

4. Simpan Template.

5. Masuk ke Tata Letak - Tambahkan Gadget - HTML/Javascript dan letakkan kode berikut didalamnya :

<style type="text/css">

#styleSwitcher {

  border:none;

  margin:0 0;

  padding:0 0;

  width:98%;

  text-align:left;

  font:normal 11px Tahoma,Arial,Sans-Serif;

  border-collapse:collapse;

}

#styleSwitcher th,

#styleSwitcher td {

  vertical-align:middle;

  border:none !important;

  padding:2px 10px;

}

#styleSwitcher th.title {

  background-color:#ccc;

  padding:5px 10px;

  margin:0 0 10px;

  text-transform:uppercase;

  font-size:12px;

  font-family:Arial,Sans-Serif;

}

#styleSwitcher select,

#styleSwitcher input[type="text"] {

  width:130px;

  border:2px solid #bbb;

  background-color:#9D8675;

  padding:2px;

  font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;

  color:#000;

  display:block;

  margin:0 0 0;

  height:24px;

}

#styleSwitcher select option {

  color:white;

  padding:5px 10px;

  cursor:pointer;

}

#styleSwitcher button {

  font:normal 11px Tahoma,Arial,Sans-Serif;

  padding:3px 5px;

  cursor:pointer;

}

#styleSwitcher #bgColorer {

  overflow:hidden;

  margin:10px 0 10px;

}

#styleSwitcher #bgColorer span {

  display:block;

  float:left;

  width:20px;

  height:20px;

  border:1px solid black;

  margin:0 5px 0 0;

  cursor:pointer;

}

#styleSwitcher #bgpattern {

  overflow:hidden;

  margin:10px 0 10px;

}

#styleSwitcher #bgpattern span {

  display:block;

  float:left;

  width:20px;

  height:20px;

  border:1px solid black;

  margin:0 5px 0 0;

  cursor:pointer;

}

#styleSwitcher input[type="text"] {

  width:118px !important;

  padding:4px !important;

  height:auto !important;

}

</style>

<table border="0" id="styleSwitcher">

  <tr><th class="title" colspan="2">Ubah Tampilan Blog</th></tr>

  <tr>

    <td colspan="2">

     <div id="bgColorer">

      <span style="background-color:#A735E0;" onclick="bgSwitch(this.style.backgroundColor);"></span>

      <span style="background-color:#EF2D19;" onclick="bgSwitch(this.style.backgroundColor);"></span>

      <span style="background-color:#F1FF00;" onclick="bgSwitch(this.style.backgroundColor);"></span>

      <span style="background-color:#F49AC2;" onclick="bgSwitch(this.style.backgroundColor);"></span>

      <span style="background-color:#FA8D63;" onclick="bgSwitch(this.style.backgroundColor);"></span>

      <span style="background-color:#967878;" onclick="bgSwitch(this.style.backgroundColor);"></span>

      <span style="background-color:#49E84C;" onclick="bgSwitch(this.style.backgroundColor);"></span>

            </div>

     <div id="bgpattern">

      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/amazing%20willows.png) repeat;" onclick="bgSwitch(this.style.background);"></span>

      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/colorful%20circle.png) repeat;" onclick="bgSwitch(this.style.background);"></span>

      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/pattern%20flowers.png) repeat;" onclick="bgSwitch(this.style.background);"></span>

      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/colorful%20square.png) repeat;" onclick="bgSwitch(this.style.background);"></span>

      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/tie.png) repeat;" onclick="bgSwitch(this.style.background);"></span>

      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/kinder%20floral.png) repeat;" onclick="bgSwitch(this.style.background);"></span>

      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/Brightness.png) repeat;" onclick="bgSwitch(this.style.background);"></span>

            </div>

        </td>

    </tr>

    <tr><th>Tipe Font</th>

        <td>

            <select onchange="fontSwitch(this.value);">

                <option selected="true">--</option>

                <option value="'Book Antiqua',Serif">Book Antiqua</option>

                <option value="'Times New Roman',Serif">Times New Roman</option>

                <option value="Georgia,Serif">Georgia</option>

                <option value="Arial,Sans-Serif">Arial</option>

                <option value="Tahoma,Verdana,Arial,Sans-Serif">Tahoma</option>

                <option value="'Trebuchet MS',Arial,Sans-Serif">Trebuchet</option>

                <option value="Verdana,Arial,Sans-Serif">Verdana</option>

                <option value="'Century Gothic',Tahoma,Verdana,Arial,Sans-Serif">Century Gothic</option>

                <option value="'Comic Sans MS',Serif">Comic Sans</option>

            </select>

        </td>

    </tr>

    <tr><th>Warna Font</th>

        <td><input type="text" id="fontColorer" value="#000000" onkeyup="fontColor(this.value);"/></td>

    </tr>

    <tr><th>Ukuran Huruf</th>

        <td><input type="text" id="fontSizer" value="12" maxlength="3" onkeyup="changeFontSize(this.value);"/></td>

    </tr>

    <tr><th>Reset</th>

        <td><button onclick="resetStyle();">Reset Semua Tampilan</button></td>

    </tr>

</table>

<small><a href="http://aiizahh.blogspot.com/2013/05/mengubah-tampilan-blog-dengan-style.html" target="blank">Pasang Widget Ini</a></small> 

6. Simpan.
7. Enjoy.


Terima kasih, semoga bermanfaat...

Cara Mengetahui Kode HTML Warna Part 2



Selamat siang...

Mungkin postingan mengenai kode warna ini sudah begitu banyak dan sangaaaattt baaasiii buat di bikin postingan lagi... :-a

Maka dari itu, tujuan utama membuat postingan ini sendiri sebenarnya hanya untuk membantu saya untuk melihat kode-kode warna, meskipun sebenarnya saya sudah membuat postingan mengenai hal yang sama dulu.

Alasannya satu, karena postingan sebelumnya menggunakan layanan dari pihak ketiga dan merupakan file flash. Nah, disinilah masalahnya... :\

Saat sedang ngeblog menggunakan laptop kantor (waktu jam istirahat loh ngeblognya... **p) ternyata saya mendapati bahwa Adobe Flash di laptop ini sudah outdated version dan pluginnya di nonaktifkan oleh browser. Meskipun ada opsi untuk mengaktifkan sementara pada halaman yang bersangkutan, namun tampilan file flash nya menjadi tidak bagus. Parahnya, saya ga bisa update tuh Adobe Flash karena inet yang lemooottt kayak siput. :'(



Akhirnya, daripada ribet mending saya bikin saja postingan seperti ini. Selain warnanya lebih variatif dan membantu saya sendiri, juga untuk para pengunjung yang mungkin juga terbantu dengan adanya postingan ini.

Akhir kata, terima kasih telah membaca cerita sedih saya di siang bolong ini... :Ozz


WARNA
HEX
RGB
#EC8195 254,202,192
#FECAC0 236,129,149
#D1D698 209,214,152
#967878 150,120,120
#FDEDDB 253,237,219
#F8FBC1 248,251,193
#F8D9B5 248,217,181
#9D8675 157,134,117
#943329 148,51,41
#EF2D19 239,45,25
#49E84C 73,232,76
#A5E7F2 165,231,242
#F37164 243,113,100
#A735E0 167,53,224
#4DDD13 77,221,19
#14E0D6 20,224,214
#F931DF 249,49,223
#0492F7 4,146,247
#F1FFEA 241,255,234
#E2FFEB 226,255,235
#DEFCED 222,252,237
#DBFCEC 219,252,236
#C9FFE7 201,255,231
#CBDB53 203,219,83
#91590F 145,89,15
#F0A93E 240,169,62
#91CBDA 145,203,218
#D38F37 211,143,55
#00C9FF 0,201,255
#FF0000 255,0,0
#00FF10 0,255,16
#F1FF00 241,255,0
#FF00D7 255,0,215
#853800 133,56,0
#FBF0C6 251,240,198
#F5D247 245,210,71
#E1B300 225,179,0
#E22500 226,37,0
#6E7E79 110,126,121
#FECAC0 254,202,192
#ABCFAF 171,207,175
#C7D578 199,213,120
#F1F5AE 241,245,174
#008D9F 0,141,159
#5DC1D0 93,193,208
#F49AC2 244,154,194
#C6E5E9 198,229,233
#A29A9A 162,154,154
#F2E3E5 242,227,229
#F3DEFC 243,222,252
#659343 101,147,67
#637E5C 99,126,92
#009BB9 0,155,185
#9A854E 154,133,78
#CFBC8A 207,188,138
#F9D800 249,216,0
#FA8D63 250,141,99
#320345 50,3,69
#807417 128,116,23

May 14, 2013

Avast Free Antivirus 8 With Serial Number



Selamat pagi sob...

Setelah banyak posting mengenai tutorial blog, maka kali ini saya mau share yang berbeda, ya hitung-hitung membuat isi dari blog ini semakin variatif disamping juga tetap mengusung tema dari blog ini sendiri.



Postingan kali ini mengenai antivirus, dimana yang kali ini saya share, yakni Avast Free Antivirus 8 sudah saya gunakan sejak lama dan pada versi terbarunya ini (meskipun sudah cukup lama keluar  :D) banyak terdapat pembaharuan. Meskipun Avast ini free, namun jangan ragukan kemampuannya dalam melindungi PC kita dari serangan virus-virus berbahaya. :-bd





Avast Free Antivirus 8 ini saya sertakan serial numbernya yang akan valid hingga tahun 2038, atau masih 25 tahun lagi sob \o/.


May 12, 2013

Copy Kode Dengan Popup Javascript

Halo sobat...

Bagaimana kabarnya di akhir pekan ini??? Kali ini saya ingin berbagi sebuah tutorial lama namun mungkin cukup penting atau dibutuhkan oleh beberapa temen-temen blogger. Tutorial ini sendiri dapat digunakan untuk membantu pembaca blog kita yang bertujuan untuk mengaplikasikan tutorial-tutorial blog yang mana harus melakukan copas kode-kode tertentu ke dalam blog mereka.


Coba lihat halaman demo dibawah ini dan klik "Copy Kode". Lebih mudah bukan???


Hal tersebut saya pelajari dari tutorial Mas Taufik dan dapat dilakukan untuk mempermudah bagi temen-temen yang membutuhkan kode-kode tersebut tanpa perlu lagi memblock kode-kode tersebut, terutama kode-kode yang sedemikian rupa panjangnya  .

Nah, untuk cara nya sangat gampang cukup ikuti langkah-langkah berikut ini :

1. Login ke blogger.



2. Pilih Template - Edit HTML.



3. Centang Expand Template Widget.



4. Letakkan kode berikut ini diatas </head> atau </body> :

<script type="text/javascript">
//<![CDATA[
function copy_code(id) {
var ref = document.getElementById(id),
code = ref.getElementsByTagName('code')[0].innerHTML,
w_w = window.innerWidth,
w_h = window.innerHeight,
win = window.open('', '', 'left=' + ((w_w/2)-250) + ',top=' + 
((w_h/2)-150) + ',width=500,height=300,scrollbars=0');
win.document.write('<!DOCTYPE html><html><head><title>Source Code
</title><style type="text/css">*{margin:0;padding:0}body{padding:10px;
text-aign:center}textarea{display:block;width:98%;height:270px;padding:
1px 1px;margin:0 auto;text-align:left;overflow:auto}</style></head><body>
<textarea>' + code.replace(/<(.*?)>/g, "") + '</textarea><scr' + 'ipt 
type="text/javascript">var a=document.getElementsByTagName(\'textarea\')
[0];a.focus();a.select();</scr' + 'ipt></body></html>');
}
function add_copy_button() {
var pre = document.getElementsByTagName('pre');
for (var i = 0; i < pre.length; i++) {
pre[i].id = 'code-' + i;
pre[i].className += ' quick-copy';
pre[i].innerHTML += '<a class="c_b" href="javascript:copy_code
(\'code-' + i + '\');">Copy</a>';
}
} add_copy_button();
//]]>
</script>


5. Lalu letakkan kode berikut diatas ]]></b:skin> atau </style> :

pre {position:relative}
pre .c_b {
  display:block;
  position:absolute;
  top:0;
  right:0;
  padding:2px 5px;
}

6. Simpan.

7. Terakhir, letakkan kode-kode yang dimaksud untuk di copy diantara kode berikut :

<pre><code> letakkan kode disini </code></pre>

8. Enjoy.





Bagaimana sob???

Semoga bermanfaat yah...

May 8, 2013

CSS Smiley Slider

Hello sob...


Postingan kali ini lagi-lagi mengenai CSS... Kali ini yang mau saya share adalah mengenai smiley slider.

Penasaran lihat tampilannya??? Coba lihat demo nya dibawah :



Bagaimana sob??? Menarik bukan, bahwa dengan kode-kode tertentu dapat membuat sebuah tampilan smiley yang tadinya statis dengan raut wajah tertentu dapat menampilkan raut-raut wajah lainnya, berupa raut sedih dan tersenyum...

#face { 

  width: 100px; 

  height: 100px; 

  position: relative;

  border: 2px solid black;

  border-radius: 50px; 

  margin: 20px auto; 

}

#face:before, #face:after {

  position: absolute;

  content: "";

  width: 10px;

  height: 10px;

  top: 30px;

  border-radius: 10px;

  background: black; 

}

#face:before {

  left: 30px; 

}

#face:after {

  left: 60px; 

}

#mouth-box {

  width: 60px; 

  height: 20px; 

  left: 20px; 

  top: 60px; 

  overflow: hidden; 

  background: white; 

  position: relative; 

}

#mouth { 

  width: 60px; 

  height: 60px; 

  border-radius: 30px; 

  border: 2px solid black; 

  position: absolute; 

  top: 0; 

  left: 0; 

}

#mouth.straight {

  height: 0px !important;

  top: 7px !important;

  border-width: 1px;

  bottom: auto !important;

}



 var newWidth,

    mouth = $("#mouth");

$( "#slider" ).slider({

   slide: function(event, ui) {   

     if (ui.value > 51 ) {  

       mouth.css({ bottom: 0, top: "auto" });   

       newWidth = 160 - ui.value;  

       mouth.css({

         width           : newWidth,

         height          : newWidth,

         "border-radius" : newWidth / 2,

         left            : -25 + ((ui.value-50) / 2)

       })

       .removeClass("straight");  

     } else if ((ui.value > 48) && (ui.value < 52)) {   

       mouth.addClass("straight");   

     }  else {   

       mouth.css({ top: 0, bottom: "auto" });  

       newWidth = ui.value + 60;  

       mouth.css({

         width           : newWidth,

         height          : newWidth,

         "border-radius" : newWidth / 2,

         left            : -ui.value / 2

       })

       .removeClass("straight");   

     }   

   },

  value: 50

});



<div id="slider"></div>

<div id="face">

 <div id="mouth-box">

  <div id="mouth" class="straight"></div>

 </div>

</div>




Ok, sekian postingan kali ini yah,,

Terima kasih dan semoga bermanfaat...

May 1, 2013

Membuat CSS3 Simple Tooltip

Mungkin temen-temen sudah banyak yang mengetahui mengenai tooltip, serta kreasi dan modifikasinya. Banyak sekali memang tutorial-tutorial mengenai tooltip.



Namun, kali ini saya ingin share bagaimana membuat tooltip yang simple namun tetap terlihat "cute" tentunya dengan visualisasi warna yang menarik dan tentu saja, bisa dikreasikan kembali sesuka hati.


.tooltip
{
  position: relative;
  background: none;
  cursor: help;
  display: inline-block;
  text-decoration: none;
  color: #222;
  outline: none;
}

.tooltip span
{
  visibility: hidden;
  position: absolute; 
  bottom: 30px;
  left: 50%;
  z-index: 999;
  width: 230px;
  margin-left: -127px;
  padding: 10px;
  border: 2px solid #ccc;
  opacity: .9;
  background-color: #D580FE;                     
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), 
rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), 
rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), 
rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), 
rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), 
rgba(255,255,255,0));  
  -moz-border-radius: 4px;
  border-radius: 4px;  
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba
(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba
(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
  text-shadow: 0 1px 0 rgba(255,255,255,.4); 
}

.tooltip:hover
{
  border: 0; /* IE6 fix */
}

.tooltip:hover span
{
  visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
  content: "";
  position: absolute;
  z-index: 1000;
  bottom: -7px;
  left: 50%;
  margin-left: -8px;  
  border-top: 8px solid #D580FE;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;        
  border-bottom: 0;  
}

.tooltip span:before
{
  border-top-color: #ccc;
  bottom: -8px;
}


<script type="text/javascript">

$(function() {
    if ($.browser.msie && $.browser.version.substr(0,1)<7)
    {            
      $('.tooltip').mouseover(function(){              
            $(this).children('span').show();                
          }).mouseout(function(){
            $(this).children('span').hide();
          })
    }
  });    

</script>


Lalu bagaimana implementasinya ???

Temen-temen bisa membuat sebuah postingan dimana didalamnya terdapat satu atau lebih kata atau kalimat yang ingin diberikan keterangan dengan menampilkan tooltipnya.

<a href="#" class="tooltip">
  Isi teks disini
  <span>Deskripsi Tooltip</span>
    </a>



DEMO :



Bagaimana??? Apakah sudah berhasil menrapkannya???

Jangan lupa untuk meninggalkan komentar dan terima kasih semoga bermanfaat...