Tuesday, January 25, 2011

Membuat blogroll sederhana

Biasanya kita saling bertukar link dengan blogger yang lain atau juga dengan web Orang lain. Nah dari pada kita hanya mnampilkan secara amburadul atau model yang terlalu panajang sehingga memenuhi template, uh pastiu dipandang g indah bukan. Nah mungkin tutorial ini dapat membantu, meskipun ini sederhana namun cukup cantik bila dipasanng di blog kita. Manfaatnya juga agar tampilan lebih minimalis. Jadi jika kita memiliki Link yang cukup banyak tak kan jadi masalah.


Yuk kita pelajari :








  • Blogroll Dengan Marquee

    <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="200">
    <a href="http://ardi91ultras.blogspot.com/" target="_blank">berita terbaru</a>
    <br/><br/>
    <a href="http://ardi91ultras.blogspot.com/" target="_blank">top info</a>
    <br/><br/>
    <a href="http://ardi91ultras.blogspot.com/" target="_blank">hot news</a>
    <br/><br/>

    </marquee>



    Hasilnya gini :

    Free tutorial blogger


    top info


    berita terbaru





    scrollamount="2" => angka "2" menunjukkan kecepatan, apabila ingin lebih cepat ganti aja dengan 3 berapapun yang anda suka.

    direction="down" => menunjukkan arah gerakannya kebawah, apabila ingin yang lain ganti aja dengan up, left, ataupun right

    width="50% => "50%" menunjukan lebar dari marquee sebesar "50%" dari tempat dimana perintah ini ditempatkan, anda bisa menggantinya dengan 30%, 100% atau berapapun yang anda inginkan.

    height="200" => "200" menunjukan tinggi dari marquee sebesar 200px, anda juga bisa menggantinya dengan berapapun yang anda inginkan.
  • Blogroll dengan Drop down menu
    <form>

    <select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

    <option> - Blogroll - </option>

    <option value="http://ardi91ultras.blogspot.com">berita terbaru</option>

    <option value="http://ardi91ultras.blogspot.com">top info</option>

    <option value="http://ardi91ultras.blogspot.com">hot news</option>

    </select>

    </form>


    Hasilnya begindang :




  • Blogroll Entah apa namanya :D
    <h3><div align="center"> Blogroll </div></h3>

    <div align="center">

    <select 229,="" 229);="" ;="" background-color:="" normal;="" rgb(229,="" 13px;="" font-family:="" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="" width="135" verdana,tahoma,arial;="" size="5" font-size:="" name="menu">

    <option selected="selected" style="font-weight: normal; font-size: 11px; color: rgb(204, 204, 204); font-family: Verdana,Tahoma,Arial;" value=""/>^=^ Links & Friends ^=^

    <option value="http://ardi91ultras.blogspot.com/"/>Free tutorial blogger

    <option value="http://ardi91ultras.blogspot.com/"/>info wisata

    <option value="http://ardi91ultras.blogspot.com/"/>Catatan Achmad

    <option value="http://ardi91ultras.blogspot.com/"/>berita terbaru

    <option value="http://ardi91ultras.blogspot.com/"/>hds Blog

    <option value="http://ardi91ultras.blogspot.com/"/>SMAN1 Kebomas


    </select>


    Hasilnya begini :

    Blogroll





  • Blogroll dengan Fieldset

    Sebenarnya yang ini sudah pernah saya post tapi apa salahnya diingatkan lagi hehehe :D yups .. oke.. nih langsung saja codenya :
    <div align="center">
    <fieldset style="border:2px solid #A64E4E; width:120px; height:155px; -moz-border-radius:5px 5px 5px 5px">
    <legend align="center"><font color="#A64E4E" size="3">
    <b>Thanks to</b>
    </font></legend>
    <marquee direction="up" onmouseover="this.stop()" width="110" onmouseout="this.start()" scrollamount="3" height="100%">
    <p align="center">


    <br/><b> ALLAH SWT </b><br/><br/>
    Orang Tua<br/>
    Semua Kerabat<br/><br/>
    <a href="http://bloggerkebumen.co.cc" target="_blank"><img border="0" width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimw5L5KFgbsmGm3HweXaFkZVA5NJNi5JWx5JLw-UzzbdxOJ5KKMVeLBDbe5KVsPBH9uGCrn7tBabLEoCx7dOABInuFLKFEAofC2SME_H1S34V_6-beTVAnQeTmrWref4-6IQvVw1ueNF8/s320/bloggerkebumen.gif" height="50"/></a><br/>
    <a href="http://www.ripway.com" target="_blank"><img border="0" width="150" src="http://www.ripway.com/images/header_pt2.gif" height="35"/></a><br/>
    <a href="http://trik-tips.blogspot.com" target="_blank"><img border="0" alt="Trik-Tips Blog" width="90" src="http://www.geocities.com/kendhin_x/banner-trik.gif" height="17"/></a><br/>
    <a href="http://wynwira-tutorial.blogspot.com" target="_blank"><img border="0" src="http://wayanwirata.googlepages.com/MyButton2.gif"/></a><br/><br/>
    <a href="http://tukeranlink.dagdigdug.com" target="_blank"><img border="0" alt="Banner Exchange" src="http://tukeranlink.dagdigdug.com/files/2008/03/button-tukeran-link.png" title="link Exchange"/></a><br/>
    <a href="http://pernakpernikblog.blogspot.com" target="_blank"><img border="0" alt="Blog Tutorial" src="http://faniez.googlepages.com/blogsharing1.gif"/></a><br/>
    <a href="http://thedayat.blogspot.com" target="_blank"><img border="0" alt="thedayat" src="http://de.sleepingchild.googlepages.com/85-21-IJOputihcoklat.gif"/></a><br/>
    <a href="http://www.glitter-graphics.com" target="_blank"><img border="0" width="150" src="http://www.glitter-graphics.com/images/header/logo.gif" height="35"/></a><br/>
    <a href="http://www.ilmuwebsite.com" target="_blank"><img border="0" src="http://unair.info/img/iweb.jpg"/></a><br/><a href="http://www.ilmuwebsite.com" target="_blank">ilmuwebsite.com</a><br/>
    <a href="http://www.taktiku.com" target="_blank"><img border="0" width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvKbvqxUKPjrZqzMEYZnM0P5H3B07YgqpXoKSdr0ImowijFLuadNXffrMLipp4_cWQM9Xm3SIztd8xq-vwJQmTXPyf7hY6AqFF-oHIaQEawPdtq_Mk28M0P3fxOMHOSnYrxXpi8BLp7v0/s400/taktiku_head.gif" height="35"/></a><br/>
    </p>
    </marquee></fieldset>
    </div>



    Nah hasilnya akan seperti ini :








    Thanks to













    ALLAH SWT 




    Orang Tua


    Semua Kerabat










    Trik-Tips Blog







    Banner Exchange


    Blog Tutorial


    thedayat






    ilmuwebsite.com











Yah itu tadi beberapa blogroll sederhana .. siapa tw berminat .. klo ga yah gpp ...

hehehe :P :D

No comments:

Post a Comment