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 :
Oke selamat mencoba dan tooltip nya bisa terbang...
Nah untuk cara membuat nya :
- Login ke blogger
- masuk rancangan Edit HTML [jangan lupa download lengkap dulu template takut ada kesalahan]
- Cari kode <head> lalu masukkan kode di bawah ini tepat di bawah kode <head>
- Lalu cari kode]]></b:skin> lalu masukkan kode Css di bawah ini tepat di atas kode ]]></b:skin>
- Nah untuk yang terakhir cari kode</body> dan masukkan kode di bawah ini tepat di atas kode </body> berikut kode nya :
- Lalu Save template Untuk pemasangan di postingan ataupun di HTML java script gunakan kode seperti di bawah ini :
<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'/>
.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;
}
<script type="text/javascript">
$("#zigzag a[title]").tooltip({effect: 'bouncy'});
$("#zigzag img[title]").tooltip({effect: 'bouncy'});
</script>
Oke selamat mencoba dan tooltip nya bisa terbang...
0 comments:
Post a Comment