Bullet Image Link Hover

Apabila biasanya setiap list hanya menggunakan style type circle, disc, square, huruf dan angka, melalui javascript dan CSS di bawah, maka style type list akan dengan mudah kita rubah menjadi berbentuk gambar. Satu yang menjadi kelebihan penggunaan fungsi script ini adalah setiap list dapat menggunakan gambar yang berbeda diseuaikan dengan item apa yang akan disampaikan pada setiap listnya. KLIK DEMO untuk melihat bentuk tampilan Bullet Image Link Hover!

D E M O

Cara membuat Auto Hide Box :

Kode CSS :

#bullethover{
        list-style-type:none;
        margin:0;
        background:#CCC;
        padding:10px;
}
#bullethover li{
        font-family:Verdana;
        font-size:12px;
        font-weight:700;
        padding:5px 6px 5px 0px;
        background:url(https://lh5.googleusercontent.com/-Ovok_Nuzsa8/T2tvkAlJEFI/AAAAAAAAAeQ/YKorBgMmCYM/s128/index.png) 0 4px no-repeat;
        border-bottom:1px dotted #999;
}
#bullethover li a{
        padding-left:25px;
        text-decoration:none;
        color:#930;
        transition:1s;
        -o-transition:1s;
        -moz-transition:1s;
        -webkit-transition:1s;
        -ms-transition:1s;  
}
#bullethover li:hover a{
        color:#F00;
        padding-left:70px;
}
.bulletimagestyle{
        position:absolute;  
}

Javascript :

<script type="text/javascript">
//<![CDATA[
var bulletimg1 = ["https://lh3.googleusercontent.com/-hvINPyiaF4M/T3B6XaRNPdI/AAAAAAAAAh4/GTFi679yfbs/h120/bakso.jpg", 6, 2, 5]
var bulletimg2 = ["https://lh6.googleusercontent.com/-LrRKeGtdv08/T12886_ROVI/AAAAAAAAAWc/Ona1U7FPBZ8/s128/GRgolo-anima-50x25.gif", 6, 4, 0]
var bulletimg3 = ["https://lh4.googleusercontent.com/-TRgH9Fj3ZQQ/T3B6OzlQcQI/AAAAAAAAAhY/INjiTmdPeMw/h120/motor.jpg", 16, 4, 0]
var bulletimg4 = ["https://lh6.googleusercontent.com/-b91alCBdYfI/T3B6S6Aay_I/AAAAAAAAAho/OIBcwoLkNGM/h120/1sxx0n.jpg", 16, 4, 5]
var bulletimg5 = ["https://lh6.googleusercontent.com/-0hn-sjZUkyc/T3B6UAwtEZI/AAAAAAAAAhw/ddoSDiLr2NU/h120/mp3.jpg", 16, 4, 0]
var bulletimg6 = ["https://lh3.googleusercontent.com/-X6ITL-lyEOc/T3B6QuwAckI/AAAAAAAAAhg/CvAzRkqPWxI/h120/photoshop.jpg", 16, 4, 0]
var classnameRE = /(^|\s+)GR($|\s+)/i
function caloffset(what, offsettype) {
    var totaloffset = (offsettype == "left") ? what.offsetLeft: what.offsetTop;
    var parentEl = what.offsetParent;
    while (parentEl != null) {
        totaloffset = (offsettype == "left") ? totaloffset + parentEl.offsetLeft: totaloffset + parentEl.offsetTop;
        parentEl = parentEl.offsetParent;
    }
    return totaloffset;
}
function displaybullet(linkobj) {
    var reltovar = window[linkobj.getAttribute("rel")]
    bulletobj.setAttribute("src", reltovar[0])
    bulletobj.style.left = caloffset(linkobj, "left") - reltovar[1] - reltovar[2] + "px"
    bulletobj.style.top = caloffset(linkobj, "top") - reltovar[3] + "px"
    bulletobj.style.visibility = "visible"
}
function modifylinks() {
    bulletobj = document.createElement("img")
    bulletobj.setAttribute("id", "bulletimage")
    bulletobj.className = "bulletimagestyle"
    document.body.appendChild(bulletobj)
    for (i = 0; i < document.links.length; i++) {
        if (typeof document.links[i].className == "string" && document.links[i].className.search(classnameRE) != -1) {
            document.links[i].onmouseover = function () {
                displaybullet(this)
            }
            document.links[i].onmouseout = function () {
                bulletobj.style.visibility = "hidden"
            }
        }
    }
}
if (window.addEventListener) window.addEventListener("load", modifylinks, false)
else if (window.attachEvent) window.attachEvent("onload", modifylinks)
else if (document.getElementById || document.all) window.onload = modifylinks
//]]>
</script>

xHTML :

<ul id="bullethover">
    <li><a href="http://bloggerstuars.blogspot.com/" rel="bulletimg1" class="GR" title="menu title here">Bakso Raksasa Rasa Bakso</a></li>
    <li><a href="http://gubhugreyot.blogdetik.com/" rel="bulletimg2" class="GR" title="menu title here">Tutorial Blogger</a></li>
    <li><a href="URL" rel="bulletimg3" class="GR" title="menu title here">Motor Sport Gratis</a></li>
    <li><a href="URL" rel="bulletimg4" class="GR" title="menu title here">Mobil Murah Mobil Rakyat</a></li>
    <li><a href="URL" rel="bulletimg5" class="GR" title="menu title here">Free Download MP3</a></li>
    <li><a href="URL" rel="bulletimg6" class="GR" title="menu title here">Photoshop Tutorials</a></li>
</ul>

Cara menggunakan :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas kode ]]></b:skin>
7. Copy javascript dan paste-kan di bawah kode ]]></b:skin>
8. Klik "Simpan Template (Save Template)".
9. Gunakan xHTML untuk posting atau simpan melalui
   Dasboard | Design | Add a Gadget | HTML/Javascript (Tambah Gadget).

Catatan :

1. Panduan cara backup template, cara mencari kode dan beberapa cara menyimpan kode css, javascript dan xHTML dapat anda buka melalui Special Tutorials yang ada di daftar menu sebelah kiri halaman blog.
2. URL_bullet_image-1 s/d URL_bullet_image-5 : merupakan bullet image yang digunakan pada seiap list item. Silahkan perbanyak sesuka kamu sesuai jumlah list item yang akan ditampilkan.
3. Gunakan bullet image dengan ukuran seperlunya agar tidak terlalu memenuhi kolom menu serta tidak terlalu membebani blog.
4. Supaya lebih mudah dan praktis, carilah bullet image di free icon yang banyak menyediakan gambar baik berbentuk file png, jpg atau bahkan hingga animasi gif.(Misalnya di http://www.freeiconsweb.com)

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Senen WAGE, Maret, 26, 2012

» Happy Blogging - gubhugreyot «