Modifikasi Widget AddThis

AddThis
Menambahkan tooltip pada widget AddThis

Tip sederhana untuk menambahkan tooltip pada widget berbagi AddThis. Saya iseng membuatnya beberapa menit yang lalu :p

Jika Anda adalah pengguna widget AddThis seperti Saya, pasti Anda memiliki markup yang mirip seperti ini:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style'>
    <a class='addthis_button_preferred_1'></a>
    <a class='addthis_button_preferred_2'></a>
    <a class='addthis_button_preferred_3'></a>
    <a class='addthis_button_preferred_4'></a>
    <a class='addthis_button_compact'></a>
    <a class='addthis_counter addthis_bubble_style'></a>
</div>
<!-- AddThis Button END -->

Tepat di dalam elemen .addthis_toolbox tambahkan elemen <span class="addthis-tooltip">Teks Anda</span> seperti ini:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style'><span class="addthis-tooltip">Bagikan kepada teman!</span>    <a class='addthis_button_preferred_1'></a>
    <a class='addthis_button_preferred_2'></a>
    <a class='addthis_button_preferred_3'></a>
    <a class='addthis_button_preferred_4'></a>
    <a class='addthis_button_compact'></a>
    <a class='addthis_counter addthis_bubble_style'></a>
</div>
<!-- AddThis Button END -->

Sekarang masuklah ke halaman editor HTML blogmu kemudian tambahkan kode CSS ini tepat di atas kode ]]></b:skin> atau </style>:

/* Modifikasi widget AddThis */

.addthis_toolbox {
  width:150px;
  position:relative;
  background-color:darkgreen;
  padding:10px 15px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;    
}

.addthis_toolbox .addthis-tooltip {
  display:block;
  width:140px;
  padding:10px 15px;
  position:absolute;
  bottom:100%;
  left:30px;
  z-index:77;
  margin-bottom:40px;
  background-color:black;
  font:bold 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:white;
  text-align:center;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  opacity:0;
  visibility:hidden;
  -webkit-transition:all 0.26s ease-out;
  -moz-transition:all 0.26s ease-out;
  -ms-transition:all 0.26s ease-out;
  -o-transition:all 0.26s ease-out;
  transition:all 0.26s ease-out;
}

.addthis_toolbox .addthis-tooltip:before {
  content:"";
  width:0px;
  height:0px;
  border:7px solid transparent;
  border-top-color:black;
  position:absolute;
  top:100%;
  left:15px;
}

.addthis_toolbox:hover .addthis-tooltip {
  visibility:visible;
  opacity:1;
  margin-bottom:20px;
}

/* Akhir modifikasi widget AddThis */

Klik Simpan tema.

Lihat Demo

24 Komentar

  • Putra

    kalo pengen dibuat horizotal gmn mas?? \o/ \o/ \o/

  • MUX SPARROW

    Lapor! Ane pengguna addthis juga! \o/ pengen pake tutorial di sini.. tapi.. ane naksir ama penempatan addthis yang muncul di halaman demo ini: http://sekaratmutlak.blogspot.com/2012/03/css3-diary-book-theme-widget-daftar-isi.html

    mau dong Gan.. tipsnya :D

  • Putra

    @MUXLIMOambil aja page source nya wakakak :D :D :D kayak punyakuu ^_^ ^_^ ^_^

  • MUX SPARROW

    @MUXLIMO

    Lapor lagi, Gan.. udah ane coba di blog ini http://lets-learn-about-islam.blogspot.com/2012/03/3-keuntungan-merokok.html?showComment=1333426986087#c4066591287778724406

    tapi kok jadinya gak memanjang kayak di laman DEMO ya?! :p

  • Taufik Nurrohman

    @MUXLIMO Mampir ke sini, dan buat akun pribadi dulu AddThis - http://www.addthis.com/ setelah itu pilih layout/tampilan horizontal.

  • Taufik Nurrohman

    @Alam Perwira Betul, tinggal ambil kode sumbernya. Saya cuma memakai CSS Position fixed:

    .addthis_toolbox {
    width:160px;
    position:fixed !important;
    position:absolute; /* IE6 Fallback */
    bottom:0px;
    left:50%;
    margin-left:-100px;
    z-index:2000;
    background-color:white;
    padding:5px 20px;
    -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
    box-shadow:0px 0px 2px rgba(0,0,0,0.4);
    text-align:center;
    -webkit-border-radius:7px 7px 0px 0px;
    -moz-border-radius:7px 7px 0px 0px;
    border-radius:7px 7px 0px 0px;
    }

    Tapi untuk script dan lainnya lebih baik ambil yang asli saja, dengan membuat akun sendiri di AddThis supaya statistiknya jelas.

    [note]Lebih jauh tentang CSS Position http://hompimpaalaihumgambreng.blogspot.com/2011/10/css-position.html[/note]

  • MUX SPARROW

    @Taufik Nurrohman

    itu yang ane bingung Gan.. padahal ane udah punya akun addthis juga.. pastinya ada kode ID publisher yang ane lupa masukin tuh ke blog LLAI itu ya.. :p maap ya, Gan ane tunya-tanya mulu.. moga2 Agan gak :-a ngelayanin keawaman ane.. *maloo :D

  • MUX SPARROW

    @Alam Perwira

    wat e gud aidia, Mas Bro..! wkwkwkwkwk! Siap.. Gan.. ane ngekorr ahh.. \o/ \o/ \o/

  • MUX SPARROW

    @Taufik Nurrohman

    Alhamdulillah, dipermudah. Makasih banget Gan.. moga ilmu dan rezekinya ditambah karena Agan gak pelit ilmu. Aamiin 0:) *buat Alam Perwira juga 0:)

  • Taufik Nurrohman

    @MUXLIMO HOOEEEEEKKKKK!!!!! :-a :-a :-a
    Hahaha... Mungkin Saya adalah orang gila pertama yang menulis tutorial di dalam baris komentar. Lumayan, buat eksperimen :D

    Cara Memilih Widget AddThis
    Pertama-tama buat akun di AddThis. Jika sudah, masuk ke menu Get AddThis. Pilih platform Blogger:

    setelah itu pilih tampilan horizontal. Salin kodenya kemudian gunakan itu untuk mengobati sakit kepala Anda:

  • MUX SPARROW

    @Taufik Nurrohman

    @Taufik Nurrohman
    Jiakakakakak!! Malah diperbuas si Agan :-a -nya! Jangan keseringan, Gan.. entar cepet kurus loh.. :D

    Mantap, Gan.. udah ane coba dan berhasil.. salut ane Agan sampe bela-belain bikin tutorial di postingan. Jarang-jarang loh code master sampe rela ber- :-a :-a :-a nerangin biar para bego macam ane bisa paham.. ini bukan rayuan gombel, Gan.. <3 asli dulu ane pernah 3X nanya di kotak komentar code master lain, 3X juga ane dicuekin.. x@ *fck* (*padahal yang laen pada ditanggapin **lagian ane juga bukan nanyain ukuran kolor dia kok..) ~x( *** jiah malah curhad :D :D :D

    Pokoke you're the best, Gan! :-bd :-bd :-bd

  • Drs. Muh. Zakaria Se.i

    Ini Blog Template Nya kereeen Abis....
    Saya Heran Juga...
    Canggih baru kali ini saya Temui...
    Tapi Sayang artikel nya susah difahami...
    Mohon Diperbarui... Saya mau Kunjungi Terus ini Blog ah...

  • Taufik Nurrohman

    @Muhammad Zakaria Bagaimana mungkin bisa paham kalau si mas/pak menulis komentar sebelum membaca haha =D

  • MUX SPARROW

    Lapor, Gan.. kemaren2 widgetnya berfungsi sempurna.. sekarang kok si addthis buttonnya gamau nongol ya?? :'( ampe kepaksa sementara tambah widget share di bawah postingan... :'(

  • MUX SPARROW

    @MUXLIMO

    munculnya cuman di sekitar footer-wrapper aja, Gan.. kalo discroll ke area postingan gamau muncul :'(

  • Taufik Nurrohman

    @MUXLIMO Kurang paham sama masalahnya. Maksudnya kelihatan saat halaman sampai ke bawah, tapi saat ke posting hilang, atau terselip ke belakang? Mungkin masalahnya di z-index
    Begitu?? :\

  • MUX SPARROW

    @Taufik Nurrohman Bener, Gan.. ternyata masalah z-indexnya. sekarang alhamdulillah udah bisa lagi. makasih, Gan.. btw, makin keren aja nih tampilan komennya.. :-bd

  • Taufik Nurrohman

    @MUXLIMO Iya, gara-gara rilis VinaLuv di Bloggeritem Saya jadi iri saja sama fiturnya hehe... Cuma kalau sampai sistem thread-commenting di blog Saya diganti sama itu, semua urutannya jadi berantakan lagi. Soalnya cara kerjanya memang sedikit berbeda. Jadi Saya coba saja rombak-rombak sendiri pakai versi yang lama supaya nggak perlu makeover seover-overnya! T_T

  • MUX SPARROW

    @Taufik Nurrohman Bener juga, Mas.. gara2 vinaluv wahahahha.. **p malah di saya gak pernah bisa jalan tuh vinaluv, Mas.. pernah saya coba bisa, tapi tampilan CSS-nya gak keren seperti yang saya pake sekarang dari andre pandet.. wahahhaha... akhirnya saya pake yang sistem komentar dari bawaan template Nexis Duy Pham aja.. di situ otomatis bisa pasang link seperti di vinaluv **p

  • Unknown

    @Taufik Nurrohman Sepanjang saya kenal blog baru kali Ini saya liat tutorial di kotak komentar. Seharus-nya kata-kata ini di Buat blod bang : Mungkin Saya adalah orang gila pertama yang menulis tutorial di dalam baris komentar. Lumayan, buat eksperimen:D heheeeeee

  • Tha u N' Vic

    gan saya ingin menghapus widget ini akan tetapi kode HTML nya gmn ya tolong yang tau kasih tau saya

  • Taufik Nurrohman

    @Serz Corner Kalau widget-nya bawaan dari Blogger biasanya bentuknya lain di dalam template. Tidak seperti di atas.

  • Ən Yeni Mahnı Sözləri 2

    mas, kalau mau bikin widget punya mas yang disamping itu gimana ya?? "kategori, arsip, entri populer, komunitas"...

    makasih ya mas

Komentar telah ditutup.