Random Banner Headera


Menjawab pertanyaan mba Atia beberapa hari yang lalu yang di ajukan melalui shoutbox mengenai cara membuat random banner header atau gambar banner yang ada di header bisa bergantian atau berubah-berubah. Sepertinya memang lebih menarik apabila banner yang
ada di header bisa bergantian sehingga suasana akan lebih fresh karena tidak monoton
seperti blog saya ini , tapi tidak apa-apa, mungkin suatu hari nanti blog inipun headernya bisa bergantian

.



Untuk membuat random banner ada beberapa langkah yang harus sobat lakukan, yaitu :



  • Langkah pertamab>li>



    Langkah pertama yang harus dilakukan tentunya sobat wajib membuat beberapa banner,
    bisa tiga, empat, lima, dan seterusnya tergantung dari keinginan sobat. Untuk membuatnya sobat bisa menggunakan program-program semisal adobe photoshop atau coreldraw serta kawan-kawannya yang lain. Akan tetapi karena saya tidak terlalu mahir masalah program untuk desain gambar, maka tidak akan saya terangkan cara pembuatannya. Jika sobat ingin berkonsultasi mengenai program adobe photoshop, silahkan kunujungi

    • http://jaloee.blogspot.coma> miliknya kang jaloeea>, beliau ini pakarnya kalau masalah photoshop.





  • langkah keduab>li>




    Langkah kedua yang harus dilakukan adalah mengupload banner-banner tersebut pada hosting tempat menyimpan gambar, saya ambil contoh     www.photobucket.coma>
    untuk cara upload pada situs ini sudah saya terangkan pada postingan terdahulu, jika masih bingung silahkan klik     di sinia>.



    Jika proses upload selesai, copy URl address banner-banner tersebut lalu paste pada program notepad guna nanti untuk di masukan kedalam kode/script yang akan saya berikan.






  • Langkah ketigab>li>



    Langkah ketiga yaitu memasukan script kedalam kode template yang sobat miliki. Script dasarnya adalah :








    <script type="text/javascript">

    var banner= new Array()


    banner[0]="bannerURL0"

    banner[1]="bannerURL1"

    banner[2]="bannerURL2"

    banner[3]="bannerURL3"

    banner[4]="bannerURL4"


    banner[5]="bannerURL5"

    banner[6]="bannerURL6"

    banner[7]="bannerURL7"

    banner[8]="bannerURL8"

    banner[9]="bannerURL9"

    var random=Math.floor(10*Math.random());

    document.write("<style>");

    document.write("#header {");


    document.write(' background:url("' + banner[random] + '") no-repeat top left;');

    document.write(" }");

    document.write("</style>");

    </script>

    font>
    span>
    code>




    Terlihat diatas bahwa jumlah banner yang diberikan adalah 10 buah, akan tetapi jumlah ini tidak mutlak yaitu berapa saja yang sobat inginkan yang penting pada kode var random=Mat. jumlahnya harus sesuai dengan jumlah banner.




    Lagi-lagi karena template blogger ada dua yaitu template klasik dan template baru
    maka untuk menempatkan kode/script akan berbeda, Sehingga pembahasannya pun akan saya bagi menjadi dua bagian. Sebelumnya saya akan memberikan contoh kode yang memuat banner yang sudah saya upload dan masing-masing memiliki URL addres sebagai berikut :




    http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif



    http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif



    http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif



    http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif



    http://i162.photobucket.com/albums/t253/rohman24/banner5.gif



    http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif



    http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif



    http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif




    http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif



    http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif




    dan contoh bannernya adalah sebagai berikut (gambar diperkecil) :














































    Contoh script dari banner-banner ini adalah :







    <script type="text/javascript">


    var banner= new Array()


    banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"

    banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"

    banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"

    banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"

    banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"

    banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"

    banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"


    banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"

    banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"

    banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"

    var random=Math.floor(10*Math.random());

    document.write("<style>");

    document.write("#header {");

    document.write(' background:url("' + banner[random] + '") no-repeat top left;');

    document.write(" }");


    document.write("</style>");

    </script>

    font>
    span>
    code>




    Jika script diatas tulisannya terlalu kecil silahkan klik     di sinii>b>a> untuk melihat
    tulisan yang normal.




    Untuk caranya silahkan ikuti langkah-langkah berikut ini.





    Untuk Template klasiki>b>



    1. Sig in di blogger dengan id sobatli>


    2. Klik menu Templateb>li>


    3. Klik menu Edit HTMLb>li>


    4. Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semulali>



    5. Copy kode berikut ini lalu paste di bawah kode <div id='header'>span>code> (biasanya)li>







      <script type="text/javascript">

      var banner= new Array()


      banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"


      banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"

      banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"

      banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"

      banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"

      banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"

      banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"

      banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"

      banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"

      banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"


      var random=Math.floor(10*Math.random());

      document.write("<style>");

      document.write("#header {");

      document.write(' background:url("' + banner[random] + '") no-repeat top left;');

      document.write(" }");

      document.write("</style>");

      </script>


      font>
      span>
      code>
      ol>




    6. Klik tombol Save Template Changesb>li>


    7. Selesai.li>




      Untuk Template barui>b>



      1. Sign in di blogger dengan id sobatli>


      2. Klik menu layoutb>li>


      3. Klik menu Page Elementsb>li>


      4. Klik tulisan Add a Page Elementb>li>


      5. Klik tombol ADD TO BLOGb> di bawah tulisan HTML/JavaScriptb>li>



      6. Copy paste kode berikut kedalamnyali>







        <script type="text/javascript">

        var banner= new Array()


        banner[0]="http://i162.photobucket.com/albums/t253/rohman24/banner_1.gif"

        banner[1]="http://i162.photobucket.com/albums/t253/rohman24/banner_2.gif"


        banner[2]="http://i162.photobucket.com/albums/t253/rohman24/banner_3.gif"

        banner[3]="http://i162.photobucket.com/albums/t253/rohman24/banner_4.gif"

        banner[4]="http://i162.photobucket.com/albums/t253/rohman24/banner_5.gif"

        banner[5]="http://i162.photobucket.com/albums/t253/rohman24/banner_6.gif"

        banner[6]="http://i162.photobucket.com/albums/t253/rohman24/banner_7.gif"

        banner[7]="http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif"

        banner[8]="http://i162.photobucket.com/albums/t253/rohman24/banner_9.gif"

        banner[9]="http://i162.photobucket.com/albums/t253/rohman24/banner_10.gif"

        var random=Math.floor(10*Math.random());


        document.write("<style>");

        document.write("#header {");

        document.write(' background:url("' + banner[random] + '") no-repeat top left;');

        document.write(" }");

        document.write("</style>");

        </script>

        font>

        span>
        code>




      7. Klik tombol SAVE CHANGESb>li>


      8. Selesai.li>
        ol>




        Sekedar tambahan (padahal masih banyak ),
        kode diatas adalah sekedar contoh, silahkan ganti address bannernya dengan yang di miliki sobat.



        Mungkin ada beberapa template yang di pakai sobat saat ini banner headernya tidak sesuai dengan keinginan sobat, sebenarnya ukuran tersebut bisa kita ganti. Contoh untuk template minima sebagai berikut :






        @media all {

        #header {

        width:660px;

        margin:0 auto 10px;

        border:1px solid #ccc;

        }code>





        Pada kode diatas terlihat bahwa untuk lebar banner header sebesar 660p(width:660px;),
        nilai tersebut bisa kita rubah sesuai dengan keinginan. Dan untuk tinggi dari banner header tidak di definisikan, nah agar banner kita sesuai dengan keinginan maka kita harus menyelipkan kode tambahan sebagai definisi, contoh lebar yang di inginkan adalah sebesar 150px, maka kode yang di tambahkan adalah height:150px;span>code> sehingga kode di atas menjadi seperti ini :





        @media all {

        #header {

        width:660px;

        height:150px;span>


        margin:0 auto 10px;

        border:1px solid #ccc;

        }code>




        Untuk masing-masing template tentunya akan sangat berbeda, akan tetapi untuk template
        milik blogger, biasanya untuk bagian header di beri nama #header.




        Untuk melihat contoh nyata dari efek script diatas, saya sudah membuat satu blog
        sebagai percontohan, blog tersebut sudah di pasang 10 banner seperti yang saya terangkan di atas, untuk melihat perubahannya sobat harus mengklik susuatu agar layar browser menjadi berubah baru, saya beri contoh dengan mengklik judul arsip atau yang lainnya. Untu melihat contoh silahkan lihat
        di sinii>b>a>





        Selamat mencoba !!!!
        span>

    • 0 komentar:

    Posting Komentar

    newer post older post Home
    Langganan: Posting Komentar (Atom)