» » Cara membuat tooltip terbang

Cara membuat tooltip terbang

Cara membuat tooltip terbang - Hallo Sob Jody Blog, artikel kali ini berjudul Cara membuat tooltip terbang, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Cara membuat tooltip terbang
link : Cara membuat tooltip terbang

lihat juga


Cara membuat tooltip terbang

Hallo shobat blogger jumpa lagi nich semoga masih ada kemauan untuk mencoba dan ngak putus asa .Berawal dari kunjungan ke blog tetangga akhirnya aku temukan yang aku cari cari ..yaitu sebuah tooltip yang bisa zigzag sekaligus terbang tanpa mengurangi isi sekaligus link sumber masih tercantum , dengan sedikit modivikasi ,akan aku co share buat sobat sobat blogger yang berkeinginan memperindah tampilan blog untuk melihat Demonya silahkan menuju ke sini


Nah untuk cara membuat nya :
  1. Login ke blogger
  2. masuk rancangan Edit HTML [jangan lupa download lengkap dulu template takut ada kesalahan]
  3. Cari kode <head> lalu masukkan kode di bawah ini tepat di bawah kode <head>
    4. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://kangmahfid.googlecode.com/files/zigzag-tooltip.js' type='text/javascript'/>
  4. Lalu cari kode]]></b:skin> lalu masukkan kode Css di bawah ini tepat di atas kode ]]></b:skin> 
    5. .tooltip{
          display:none;
          background:#333 url(http://a1star.com/images/
    shimmering-multistars.gif) 
    right bottom repeat;
          background-position:96% 93%;
          width:250px;
          font-family:Arial;
          font-size:13px;
          padding:10px 10px 20px;
          color: #00CCFF; 
          text-shadow:1px 1px 1px #000;
          border: 4px solid #555;
          border-radius:10px; 
          box-shadow:0px 5px 20px rgba(125,124,250,.9);
    } 
    #zigzag img{
          border:0;
          cursor:pointer;
          margin:0 8px;
    }
  5. Nah untuk yang terakhir cari kode</body> dan masukkan kode di bawah ini tepat di atas kode </body> berikut kode nya :
    6. <script type="text/javascript">
    $("#zigzag a[title]").tooltip({effect: 'bouncy'});
    $("#zigzag img[title]").tooltip({effect: 'bouncy'});
    </script>
  6. Lalu Save template
    7. Untuk pemasangan di postingan ataupun di HTML java script gunakan kode seperti di bawah ini :
    <div id="zigzag"> <a href="URL" title="Tuliskan teks tooltip di sini!">Teks Link</a> </div>
 Note : tidak semua template bisa menggunakan  zigzag lap ini [sepengetahuan penulis ]
Oke selamat mencoba dan tooltip nya bisa terbang...


Demikianlah Artikel Cara membuat tooltip terbang

Sekian Cara membuat tooltip terbang, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Cara membuat tooltip terbang dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2012/01/cara-membuat-tooltip-terbang.html Semoga artikel ini bisa bermanfaat.

Related Posts :