Warung Internet
MENU

Tutorial Blogger

Tips - Trik Blogger

Buat perjaka yang masih Jomblo

Berita Terbaru Sehangat Tahi Ayam

Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan. Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan. Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan. Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.

0 Cara Buat Menu Tersembunyi dg CSS3: Animated Slide Menu - Box Using CSS3

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!
Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

0 Adding Tooltip on Read More: Menambah Tooltip di Read More

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!
Sebuah tootip cantik "si ZigZagTooltip" telah terposting dan semoga bisa memberi nilai lebih pada blog sampeyan semua para sobat ngeblogh. Kini sebuah pengembangan penggunaan "si ZigZagTooltip" dapat sampeyan manfaatkan. He ... he ... Tentu saja "sebuah gaya yang baru lagi". He ... he ... Lihat saja judul di atas!. Ini namanya memaksimalkan apa yang sudah kita miliki. Tooltip tidak sekedar bisa dipakai untuk posting atau di widget blog semata. Dia bisa dimaksimalkan untuk berbagai kebutuhan yang lain. 

Membuat tooltip di read more cukup dilakukan dengan menambah sebuah DIV (berlaku di ZigZagTooltip) di antara tag pembuka <body>serta tag penutup </body> . Jika sampeyan ingin membuat tampilan baru di blog seperti yang dimaksud dalam judul di atas, maka silahkan sampeyan buat dulu ZigZagLap Tooltip dengan membuka link di bawah ini:

ZigZagLap Tooltip

Sampeyan juga bisa mencarinya di blog ini di tutorial sebelumnya yang hanya berselisih satu posting. Yah ..., sekaligus sambil lihat-lihat tutorial yang lain barangkali ada yang cocok di hati.
Cara Membuat atau Menambah Tooltip di Read More
  • Login to Blogger.
  • Dasboard : KLIK "Design/Rancangan".
  • Design/Rancangan : KLIK "Edit HTML".
  • Edit HTML : KLIK "Download Full Template/Download Template Lengkap" (proses back-up templates).
  • SAVE/Simpan file (di Folder PC).
  • KLIK "Expand Widget Templates".
  • Find code/Cari kode :


    • <div class='jump-link'>

    di bawah kode tersebut terdapat kode seperti di bawah ini:
    <div class='jump-link'>
    <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>


    Change the code to be like this:

    <div id='jqtips' class='jump-link'>
    <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>

  • KLIK SAVE Templates/Simpan Template.
  • open your blog to see results!


D E M O


Keterangan:

Arahkan cursor pada read more yang telah berpindah/bergerak, maka tooltip akan terlihat. Tooltip akan terlihat di posisi agak ke kanan karena read telah mengalami modifikasi. Jika sampeyan menggunakan read more tanpa animasi seperti di DEMO, maka tooltip akan terlihat persis di sebelah kanan read more seperti halnya apabila kita menggunakan ZigZagTooltip di posting atau di widget blog.

Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!
Tooltip? banyak udah yang bahas tooltip tapi sekarang Ada yang baru nih, Tooltip yang dulu terbang-terbang kesana kemari menggunakan Jquery ( javascript ) sekarang bisa dibuat dengan css3 dengan memanfaatkan css3 trasition kita bisa membuat animasi dimana Tooltipnya terbang dari atas. seperti apa sih tuh Tolltipnya, coba aja langsung Sorot Link Dibawah ini.

ZTO CSS3 Tooltip

Dengan mengandalkan Pseudo element tooltip css3 ini bisa tercipta dengan baik. css biasa disimpan diatas ]]></b:skin>

/* 
Creation Of : ZTO
URL         : http://zhinto.blogspot.com/
*/
a.zto {
position: relative;
text-decoration: none;
}
a.zto::before {
position: absolute;
content: attr(data-title);
background: #4C8FCC;
width: 200px;
padding: 5px 10px;
color: #000;
top: -1000px;
text-align: justify;
z-index: 99;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
border: 5px solid #335BA2;
visibility: hidden;
font: normal 12px/20px Arial,sans-serif
}
a.zto:hover::before {
top: 100%;
visibility: visible;
}

Dan dibawah ini kerangka HTML_nya.

<a href="/" class="zto" data-title="Saya adalah Tooltip yang menuju ke HOMEPAGE blog ini">ZTO CSS3 Tooltip</a>

Pada Attribut data-title silahkan ganti keterangannya dengan keterangan dari link anda.
Langganan: Postingan (Atom)