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

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 .

DEMO

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.

DOWNLOAD

Bagaimana sob???

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

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

DEMO

Bagaimana sob???

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

DOWNLOAD

Terima kasih...

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.

DEMO

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

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

Download Avast

Serial Number

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

DEMO

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

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

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