Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Tooltip Otomatis di Semua Judul Posting

auto tooltip link title post blogger Membuat Tooltip Otomatis di Semua Judul Posting – sebelum membahas lebih jauh terlebih dahulu saya akan menjelaskan mengenai tooltip. Tooltip atau infotip adalah elemen tambahan yang digunakan pada sebuah web/blog dalam hubungannya dengan kursor atau pointer. Pengguna akan melihat sebuah kotak kecil melayang yang didalamnya berisi mengenai sedikit informasi atau attribut title maupun gambar saat pointer mengarah ke link/item tooltip tanpa terlebih dahulu melakukan klik pada mouse, karena efek tooltip tersebut mucul pada saat hover. Pada tutorial yang akan saya bahas kali ini adalah bagaimana cara untuk membuat tooltip secara otomatis (auto tooltip) muncul di setiap attribut title pada judul posting dan juga cara untuk membuat tooltip secara manual di beberapa link maupun gambar yang terdapat di blog dengan metode jQuery dan sedikit style CSS untuk mempercantik tampilan tooltip. Demonya bisa terlebih dahulu di lihat pada judul artikel di atas. Jika anda sudah pernah membuat link otomatis pada judul posting pasti tidak akan kesulitan untuk penerapan kode dalam memasang efek tooltip ini. Untuk penjelasan lebih lanjut dan agar lebih mudah dipahami, berikut secara detailnya cara untuk Membuat Tooltip Otomatis di Semua Judul Posting.

1. Login ke akun blogger.
2. Masuk ke menu Template lalu pilih Edit HTML.
3. Copy kode CSS berikut ini lalu taruh di atas kode ]]></b:skin>
#tooltip{ position:absolute; border:2px solid #333; background:#222; padding:2px 5px; color:#fff; display:none; text-transform:uppercase; font-weight:bold; box-shadow:0 0 5px #00ff00; }
4. Selanjutnya copy kode berikut ini lalu taruh di atas kode </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
this.tooltip = function(){
        xOffset = 10;
        yOffset = 20;
    $("a.tooltip").hover(function(e){                                              
        this.t = this.title;
        this.title = "";                                      
        $("body").append("<a id='tooltip'>"+ this.t +"</a>");
        $("#tooltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");        
    },
    function(){
        this.title = this.t;        
        $("#tooltip").remove();
    });    
    $("a.tooltip").mousemove(function(e){
        $("#tooltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });            
};
$(document).ready(function(){
    tooltip();
});
</script>
Keterangan:
Perhatikan kode yang berwarna oranye, apabila pada template blog anda sudah terdapat kode tersebut maka tidak perlu menambahkannya lagi.

5. Kemudian cari kode
<data:post.title/>
Atau
<a expr:href='data:post.link'><data:post.title/></a>
Atau
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
Untuk lebih jelasnya struktur keseluruhan kode tersebut seperti di bawah ini (pada template default blogger).
<h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3> 
Sesuaikan dengan template masing-masing (setiap template berbeda) cari yang semirip mungkin dengan kode di atas. Perhatikan kode yang berwarna biru, jika sudah pernah melakukan optimasi kemungkinan kode h3 sudah di rubah menjadi h1 atau h2. Apabila menggunakan template dari situs penyedia template blogger, biasanya kode tersebut sudah di perpendek. Sebagai pedoman untuk mencari, biasanya kode tersebut sudah berubah menjadi seperti berikut ini.
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.link'><data:post.title/></a>
</b:if>
</h1>
Apabila kode tersebut sudah di temukan, ubah kode yang berwarna merah dengan menambahkan kode class='tooltip' secara lengkapnya kode tersebut menjadi seperti dibawah ini.
<a class='tooltip' expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
Langkah terakhir tinggal lakukan klik Simpan template, maka kini secara otomatis setiap judul posting yang terdapat pada halaman blog anda sudah terdapat efek tooltip.

Efek tooltip tersebut bisa juga kita terapkan ke dalam setiap link teks maupun link gambar secara manual dengan menambahkan class="tooltip" di setiap link yang di kehendaki.

Sebagai contoh, misal akan menambahkan efek tooltip pada link yang terdapat di postingan maka penulisan link tersebut menjadi seperti di bawah ini.
<a class="tooltip" href="http://mas-andes.blogspot.com" title="Faceblog Evolutions">Faceblog Evolutions</a>
Atau jika ingin menerapkan kedalam gambar maka penulisannya menjadi seperti di bawah ini.
<a class="tooltip" href="http://mas-andes.blogspot.com" title="Faceblog Evolutions"><img src="URL-GAMBAR.jpg" width="560" height="100" alt="Faceblog Evolutions"/></a>
Maka dari kedua kode tersebut jika di tampilkan maka hasilnya akan seperti dibawah ini:

Faceblog Evolutions

dan

Faceblog Evolutions

Demikian akhir dari tutorial cara Membuat Tooltip Otomatis di Semua Judul Posting, baik itu untuk menambahkan efek tooltip secara manual pada setiap link teks maupun gambar.

Berlangganan artikel via email

118 Response to "Membuat Tooltip Otomatis di Semua Judul Posting"

pertamax.
Saya menyimak saja sob. ^^

Balas

kalau judul postingannya tidak bisa di klik bagaimana mas, seperti yang terdapat pada blog saya

Balas

keren tutornya gan, mantap harus dicoba nih

Balas

Keren sob.. sudah auto gak usah repot-repot lagi.
Ini valid HTML5 belum sob?

Balas

mantaab sob, ternyata punya saya sudah auto

Balas

saya baru tau mas tentang tooltip, perlu saya coba nih mas.
comeback.

Balas

Wah jadi keren nantinya yah Mas Semua Link di blog kita
Bisa ada tooltip, menarik deh Mas Andes Artikelnya ijin
Simpen script nya tar ada waktu saya praktekan terima kasih

Balas

Para master di atas aja bilang keren mas, apa lagi saya bocah kemaren sore yang baru mengenal dunia blogging...musti dicoba praktekin nie :)

Balas

Dengan tooltip efek judul akan tampak lebih menarik saat disentuh cursor.

Balas

Wah keren mas link teks nya jadi ada judul nya. Jadi bisa memudahkan pengunjung untuk mengetahui judul posting dan bisa memberikan kesan yang menarik bagi pengunjung. Dan pada akhirnya bisa menimbulkan aktivitas klik pada link internal posting blog, sehingga bisa meningkatkan jumlah pageview blog. Tapi lumayan banyak juga ya script nya hehe :D

Balas

Ikut meng-amini para master aja mas. Soalnya saya juga masih pemula ^^

Balas

Asyik e mas jadinya pakai tooltip...setiap mouse digerakin akan muncul efeknya, lanjutkan....hehehehe

Balas

ikuti link paragraf awal kang :)

Balas

tidak terlalu mbak, itu yang lain sekedar kode penjelasan saja :)

Balas

haha.. tampak lebih keren ya mas Andes , wow banget deh :)

Balas

Kalau yang beginian nih emang Mas Andes jagonya....ikut nyimak aja dech, Sob, nice shared!

Balas

hmm.. kira2 begitu mas :)

Balas

saya coba, tapi script banyaaaakkkkkkkk

http://nawayhac.blogspot.com

Balas

xixixi saya melas mas otak atik template :D

Balas

saya lebih pemula dari master-master di atas hehe...

Balas

Bagus juga nih tooltip otomatis di semua judul postingnya, keren banget mas :)

Balas

jadi scriptnya sedikit yah mas yang lain cuma kode penjelasannya saja, boleh juga nih dicoba hehe...

Balas

Betul sekali Mas Anthonie, Perlu di praktekan nih
Langsung buka celana,,eeeh.. buka lengkis Lengan langsungsung Praktek

Balas

Wah...jadi keliat nambah menarik ya mas...
Tiap judul posting di beri tambahan tooltip semacam ini...keren mas :)

Balas

Apalagi saya hehe

Balas

Kudu ya mas...hehe

Balas

wah keren nih mas.. jadi blog kita lebih kelihatan menarik ya mas... oya saya belum bisa praktek nih mas.. masih ngeblog via hp.. saya nyimak dulu saja ya mas.... terimakasih....

Balas

Saya coba Mas... terimakasih udah share.

Balas

sangat bermanfaat, nanti ane coba :)

Saling Follow = BACK 100%
Kalo mau Komen ya di blog saya :)

Balas

Sepertinya perlu aku coba deh, terima kasih sudah berbagi tutor yg berkualitas.

Balas

artikel tentang membuat tooltip otomatis disemua judul posting keren dan tentu bergua banget untuk naikin visitor kali ya, bahkan bisa ng'jediin blog kita unik dan keren dong yah....cuman rada butuh waktu rada lowong untuk nerapinnya nih euy

Balas

Haha... mantap mas Karysta :)

Balas

iya mas Budi sangat menarik sekali, boleh dipraktekkan biar blognya tambah keren :)

Balas

saya benar2 banyak menimba ilmu di sini...luarbiasa karya2 mas andes ...terimakasih mas sudah berkenan berbagi ilmu :-)

Balas

ilmunya sangat berguna mas, menambah menarik tampilan blog kita.

Balas

Owh ternyata sedikit tow script nya yang merupakan script utama. Boleh dicoba kayaknya mas bud :)

Balas

Buka panci juga boleh mas :)

Balas

Kalau blog nya keren, pasti admin nya juga ikut keren ya mas :)

Balas

Kalau mas budi dan mas anthonie bukan master, tapi mister hehe :D

Balas

Nyimak sambil minum teh anget, mantep mas hehe :)

Balas

oh sorry mas, langsung lompat ke script soalnya.

maaf mas, mau oot, kalau memperbaiki readmore gimana caranya mas, supaya postingan di homepage tidak tampil seluruhnya.
saya tunggu di postingan berikutnya. thnxs

Balas

wah pemasangannya tidak terlalu rumit mas andes jadi mudah untuk dicoba..

Balas

saya coba dulu,thanks buat tipsnya :)

Balas

Selamat sore mas Bro...ini koneksi ada sedikit kendala..jd bru bisa mampir hohoho

Balas

Dengan memasang fitur tooltip di judul postingan blog, menjadikan blog tersebut lebih elegance dan ada seninya ya mas. Jadi kalau ada pengunjung yang melihatnya menjadikan mereka kepincut dengan blog kita, yang pada gilirannya akan menjadi pemirsa setia blog kita ^^

Balas

Mister gawang ya mbak..hehe :)

Balas

Siaapa takut...hehe :)

Balas

Tapi udah lunas kan..cicilan nya..hehe :)

Balas

Tambah punya temen2 sama yg komennya jg keren2.... Ya mbak ..ya mas ...hehe

Balas

Sy hanya bisa bantu doa ya mas..
Mudah2an..koneksinya cepet pulih seperti sedia kala.... :)

Balas

Memang itu harapannya ya mbak :)
Amin..

Balas

ikut nyiimak dulu mas...masih rada ga ngerti ni :(

Balas

Apalagi sambil makan semangka pasti lebih mantap deh :)

Balas

kalau mister rambutnya harus pirang mbak hehe...

Balas

wah mas Budi bener-bener jantan mas hehe...

Balas

asal jangan telat bayarnya entar kena denda loh mas hehe...

Balas

yang komen terakhir pasti lebih keren yah mas hehe...

Balas

semoga harapannya bisa terkabul, Amiin...

Balas

menarik juga, ane baru tahu yang nama tooltip, taunya tol-jabotabek
hehehe, tapi kalo menurut ane yang lebih bermanpaat sih yang manual
buat link, karena dapat meningkatkan jumlah klikview, karena kalau
pada Judul ya hanya untuk terlihat keren aja

Balas

Nyimak artikel Tooltip sambil di kerok akh
Trik nya Mas Andes gak ada Mati nya, nyala terus kaya Philip

Balas

Iya kan mas andes rajin bayar tagihan listrik mas, jadi selalu terang dech hehehe :D

Balas

Iya kan ini mister lokal mas wkwkwk :D

Balas

Kalau mas anthonie gimana? jantan apa nggak nich? hehe :)

Balas

Buka soda sepertinya seger lho mas hehe :)

Balas

saya yang komen terkahir mas hehe :)

Balas

Kalau sudah amin amin, tinggal nunggu berkat nya mas hehehe :D

Balas

Mantap mas keren sumpeh hehe ...
lama tak liat makin kuren nih

Balas

cara yang cukup panjang juga ya sob. :)

Balas

Yang lokal pasti lebih manis..hehe

Balas

Perlu bukti mbak...pasti gitu deh jawabannya mas Anthonie...wkwk :D

Balas

Udah sy tutup kolom komen nyang ini...hehe :)

Balas

Kalau terlalu manis, entar dikeroyok semut lho mas hehe :)

Balas

Wkwkwk nggak usah repot-repot mas :D

Balas

pasti mas budi nginep ya di rumahnya mas andes hehe :D

Balas

Mungkin perlu pakai antena panci mas biar koneksi internetnya bisa ngebut :)

Balas

jangan kira2 dong mas...ntar klu timbangannya ga pas pembeli yg rugi lho :)

Balas

padahal saya udah pake antena PF lho..UHF lagi masih aja lelet

Balas

kalau bayar listriknya lancar pasti terangnya juga lama hehe...

Balas

semutnya di budidaya aja kalau gitu hehe...

Balas

kaya ayam jago donk hheehe

Balas

wah curang kalau pake nginep segala hehe...

Balas

Telur semut sepertinya mahal mas kalau dijual. Bisa buat pakan burung :)

Balas

Iya mas, Sepertinya ada konspirasi antara mas budi dan mas andes wkwkwk :D

Balas

Selamat malam mas andes. Wah makin tambah rame aja nich blog nya. Banyak banget ilmu yang disampaikan dalam postingan ini. Jadi bisa menambah wawasan untuk kita semua tentang toolip. :)

Balas

Setelah liat demonya di bagian bawah baru masuk ke otak inti dari artikel ini, hahahaha.. pa kabar Mas? Maaf saya jarang mondar mandir..

Balas

trik mantep, blog lebih atraktif dan informatif

Balas

tetep aja mas .. bayar gak telat , listrik kadang gak stabil hehe

Balas

Lumayan banyak juga yah kodenya untuk membuat sebuah tooltip, tapi tak apalah demi sebuah penampilan.... thanks

Balas

lama ga jalan-jalan diblog hijau ini,..

itu namanya tooltip ternyata.. pengen bikin kaya gitu, kebanyakan kode takut berat, nanti dicoba di blog lain deh :) .

Balas

Bisa disembelih nggak mas ayam jago nya hhehe ^^

Balas

Mas virlyz bisa pinjam koneksi internet nya mas andes, soalnya ngebut banget koneksinya mas andes hehe ^^

Balas

Selamat sore mas andes :)
Sudah lama blog nya nggak update nich. Biasanya 2 hari sekali update nya. Ada apa gerangan? hehe :)

Balas

Kunjungan Tengah Malam, menyimak kembali Artikel Mas Andes
Kaya nya, ada Tooltip yang ketinggalan, jadi saya datang lagi
Sambil duduk Manis, sruput Coffe, lihat blog Mas Andes.

Balas

Wah ada Pejantan Tangguh yang mana dulu
Yang, di sembelih nya, hhh

Balas

Tau nih bulan November ini Mas Andes bayar Listrik gak ya?
Kaya tenang-tenang aja, lagi istirahat apa lagi Meditasi yah?

Balas

Kembali hadir lagi disini turut meramaikan suasana...
Jujur aja kemaren-kemaren mah saya gak tau apa itu tooltip, tapi setelah baca artikelnya mas andes jadi tau deh...

Balas

lumayan buat nambah pendapatan biar dapurnya tetep ngebul hehe...

Balas

sayang kalau sampai disembelih hehe...

Balas

buka semangka kayaknya lebih seger mbak :D

Balas

konspirasi kemakmuran namanya ini hehe...

Balas

rame kayak di pasar nih mas, betul apa kata mbak Ririn sangat menambah wawasan :)

Balas

yuhuuu santai aja miz mudah kok caranya simple :)

Balas

selamat sore kembali mbak ririn :) iya mbak itu barusan udah tak kasih yang baru lagi.. hehe

Balas

oke sipp kang karrista..

Balas

Kedengeranya Mas Budi jadi Budi daya semut?
Yang bener aja,? kan kemarin masih milih2 buah Mangga? :)

Balas

Wah teman-teman saya pada nimbrung disin nih wkwk :D

Balas

Mas kalau automatis title gimana yah? setelah saya menerapkan semuanya tapi harus pake cara manual contoh

[ Game-begog.blogspot.com/2013/10/blablablabla.html ]

supaya automatis begini gimana

[ Title='blablabla'> game-begog blablalblalalala.html ]

Mungkin mas andes tau maksud saya :'(

Balas

maksudnya title supaya otomatis menggunakan URL post ya mas?

Balas

saya cari2 trik bikin alt tag disetiap gambar postingan malah nemu tooltip ini, ya akhirnya saya bookmark utk dipraktekkan besok mas andes, hehehe :)
makasih tips kerennya ^^

Balas

buat semua yg ada disini, sya masih baru bgt bkin blog, pnampakannya kya bgini dkrea.blogspot.com
kiranya agan" semua sudi untuk sejenak mampir dan ngasih review buat blog ane..
trus klo pgn tahu klo blog/template kita error ato engga nya itu gmna yaa ??
mkasih sebelumnya.

Balas

Kunjungan pertama gan,,,,

Balas

it's working gan.! thanks!

Balas

Mas, bikin efek tooltip untuk readmore blog yg pake Javascript dong :)

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Tooltip Otomatis di Semua Judul Posting" ini bermanfaat, share ke jejaring sosial.
Konversi Kode