Sunday, January 22, 2012

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

No comments:

Post a Comment