25 Juli 2011

Pin It

Memasang Sticky Tooltips Di Blogspot

Memasang Sticky Tooltips Di Blogspot | Khamardos Blog
Hello Sobat Blogger, Apa kabar kalian semua, semoga dalam keadaan sehat wal'afiat selalu dech sob .... G terasa bulan Ramadhan udah dekat banget ni sob, untuk itu, saya beserta keluarga ingin mengucapkan segala permintaan maaf baik itu yang di sengaja maupun yang tidak disengaja, karena untuk menyambut bulan Ramadhan yang suci ini hendaklah disambut dengan hati yang suci.

Ok dech, langsung saja pada postingan saya kali ini, pada artikel sebelumnya saya juga pernah memberi tutorial tentang membuat Tooltips (baca : Membuat Tooltips Pada Sebuah Objek) dan Tutorial Penggabungan Tooltips (baca : Menggabungkan Tooltips dengan Show Hide Sidebar).

Nah, berbeda dengan tooltips sebelumnya, Sticky Tooltips dibuat semenarik mungkin (Seperti yang tampak pada gambar diatas). Jika masih belum jelas previewnya dapat sobat lihat di Demo Sticky Tooltips (Lihat pada bagian kanan bawah sidebar "sponsor").

Jika Sobat tertarik maka lakukan langkah dibawah ini :
1. Login pada Blogger
2. Masuk ke bagian Rancangan, kemudian ke bagian Edit HTML
    Back up Template dengan cara Mengklik : Download Template Lengkap
    Setelah itu, beri tanda cek pada .
3. Copy Kode dibawah, Lalu Paste di Bawah kode ]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://khamardos.googlecode.com/files/sticky.js' type='text/javascript'/>
<style type='text/css'>
.stickytooltip{
box-shadow: 5px 5px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
display:none;
position:absolute;
display:none;
border:5px solid black; /*Border around tooltip*/
background:white;
z-index:3000;
}


.stickytooltip .stickystatus{ /*Style for footer bar within tooltip*/
background:black;
color:white;
padding-top:5px;
text-align:center;
font:bold 11px Arial;
}
</style>
4. Lalu Save, Setelah disave menuju ke Elemen Laman.
5. Pilih Sidebar yang akan dipasang "Sticky Tooltips", Lalu Tambahkan HTML/JAVASCRIPT.
6. Copy dan Paste kode di bawah ke form HTML/JAVASCRIPT tersebut.
<p><li><a href="URL YANG SOBAT TUJU" data-tooltip="sticky1"target="_blank">NAMA SITUS</a></li></p>
<p><li><a href="URL YANG SOBAT TUJU" data-tooltip="sticky2"target="_blank">NAMA SITUS</a></li></p>

<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1" class="atip" style="width:200px">
<img src="URL IMAGE SOBAT" /><br />
TEKS DISKRIPSI TOOLTIPS <b><a href="URL YANG SOBAT TUJU"target="_blank">NAMA SITUS</a></b>, TEKS DISKRIPSI TOOLTIPS
</div>

<div id="sticky2" class="atip" style="width:200px">
<img src="URL IMAGE SOBAT" /><br />
TEKS DISKRIPSI TOOLTIPS <b><a href="URL YANG SOBAT TUJU"target="_blank">NAMA SITUS</a></b>, TEKS DISKRIPSI TOOLTIPS
</div>

</div>

<div class="stickystatus"></div>
</div>
Note : Silahkan diedit keterangan diatas (Pada Kode)

7. Setelah semua selesai, Lalu Save dan lihat Hasilnya ...

Bagaimana ? berhasilkah ? Jika merasa kesulitan bisa hubungi saya melalui kotak komentar, Dan nitip sesuatu ni sob, Jika artikel ini bermanfaat bagi sobat, dan jika tidak keberatan jangan lupa memberikan +1 nya ya sob... Dan jangan lupa juga berbagi dengan kawan-kawanmu yang ada di Facebook dan Twitter.

.:: HAPPY BLOGGING SOBAT ::.
Share To lintasberita.com | Khamardos Blog

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

20 comments:

Klik Untuk Lihat Komentar

Ferdinand on 27 Juli 2011 09.39 mengatakan...

Met pagi Sob.. :)

Maaf nih telat, sama2 ya Sob.. aku juga minta maaf klo selama ini ada salah2 kata hhe..

Untuk Tolltipsnya, terlalu berat kayanya klo masih harus manfaatin js lagi, kenapa gak pure pake CSS3 aja? sama aja kok hasilnya....

Semangat n Met aktvitas...

Said Arsyad on 27 Juli 2011 14.55 mengatakan...

wah, perlu dicoba nih.
salam kenal ya sob.

wah, perlu dicoba nih.
salam kenal ya sob.

"Dot-XP" on 27 Juli 2011 22.42 mengatakan...

wah,ada juga ya gitu

Prapatan Kertek on 27 Juli 2011 23.12 mengatakan...

Mantab info,tips n triknya sob sangat berguna..!

Sendiri on 28 Juli 2011 02.24 mengatakan...

selagi berkunjung, tak salahnya jika sebuah kata maaf dapat terucap dari saya meski ini u/ pertama kalinya sy bertandang ke blog sobat.
btw, artikelnya menarik, hanya sy masih bingung saja...ijin nyimak saja ya gan...

sukses selalu...

Baby Health on 28 Juli 2011 03.52 mengatakan...

Hi,,,nice blog.Heartfelt thanks for ur visit Friend.Hope u like my site,also nice to me visit ur site,waiting to next visit.Have a nice day.

Rezdown7 on 28 Juli 2011 10.59 mengatakan...

nice tutor gan..
thanks sdh berbagi :)

beyey on 28 Juli 2011 16.38 mengatakan...

wah... buat blogspot ya gan?

Cara Mendaftarkan Blog ke DMOZ on 28 Juli 2011 19.31 mengatakan...

wah keren ya tooltips nya ya. Ada gambarnya gitu, tapi memperberat blog ga ya?

TOP 1 Oli sintetik mobil-motor Indonesia on 28 Juli 2011 20.19 mengatakan...

Mantap bro.. aku juga pernah pke. tp udh ganti template, jadinya udh ga pke lagi,, xixixi

attayaya-air on 28 Juli 2011 22.45 mengatakan...

ada ga sticky tooltips yg nempel pada tepi garis body blog???
pengen punya kek di postingan2 web greenpeace.org

ananda on 29 Juli 2011 19.52 mengatakan...

wuihh keren nih boleh dong saya coba di blog saya hehehe, saya tunggu info berikutnya keep writing sob

Mufi_ed on 29 Juli 2011 21.55 mengatakan...

@attayaya-air
belum mas, ntar saya carikan mas ...

@Cara Mendaftarkan Blog ke DMOZ
penggunaannya tergantung sob, klo bisa tu gambar di perkecil saja ukurannya ...

@beyey
iya sob, di blogspot ...

@Ferdinand
iya sob, baru teringat ... hehehhe ... ntar klo ada insya allah saya post ...

Foto artist korea on 1 November 2011 15.21 mengatakan...

thanks

Jawara Kampung on 14 November 2011 19.57 mengatakan...

Thanks ifonya,..nih,..sngat bermanfaat

Skynet Jogja on 23 November 2011 08.55 mengatakan...

Nice trick.. great share.. thx

http://skynet-jogja.blogspot.com/

Aran Keroro on 18 Desember 2011 06.42 mengatakan...

infonya sangat bermanffat sekali sob...

Ayriy Zone on 15 Januari 2012 06.58 mengatakan...

mantap tutornya sobat,,,

Raissa Pramudya on 19 April 2012 10.08 mengatakan...

Kalo lebih dari 7 kagak bisa ya kak??

Ahmad Budairi on 20 Februari 2013 06.37 mengatakan...

Izin sedot ya pak Admin.:)]

:: Komentar Anda ::

Silahkan isi Komentar anda pada Form Komentar dibawah ini !!!
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!

NO SPAM PLEASE !!!

Senyum :)) tunggu :)] centil ;)) kedip ;;) unjuk gigi :D hai ;) week - Jelek :p menangis :((
smile :) gawat :( Love - cinta :X briken love - patah hati =(( ooo - ounght :-o bingung :-/ kiss - cium :-* nothing :|
Gila - stres 8-} pusing ~x( takut :-t tenju - pukul b-( marah :-L marah kali x( sangat lucu =))

[[ Form Komentar Klasik ]]

Jika Anda Ingin Berlangganan Artikel Dari Situs Ini,
Silahkan Ketik Email Anda Pada Form Di Bawah Ini :

 
Copyright © 2009 Black Nero is Designed by Ipietoon | Tweaking by Mufied