Navbar Auto-Hidden disisi kanan


Screen shot
Sebelumnya saya membahas tentang Cara Membuat Navbar Menu Bertingkat, sekarang kembali saya akan membahas Menu Navigasi yang pada umumnya Navbar berada diatas atau dibawah Header Blog, tapi    yang ini letaknya di sisi kanan Blog dengan variasi Auto Hidden :y; [akan keluar kalau mouse komputer kawan dekatkan, dan akan kembali sembunyi bila mouse kawan pindahkan] yang saya beri Nama Menu Navigasi Auto Hiden :z;


Setelah kawan melihat dan mencoba Demonya, mari kita lanjutkan ke Cara membuatnya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML/JavaScript atau bisa digabung dengan Gadget yang ada :w;
  • Copas Script berikut kedalamnya
<style> ul#navigation1 { position: fixed; margin: 0px; padding: 0px; top: 150px; right: 0px; list-style: none; z-index:9999; } ul#navigation1 li { width: 42px; border:0px; display: block; padding:1px; } ul#navigation1 li a { display: block; width: 150px; height: 42px; padding: 20px 5px 0 20px; margin-top: -20px; color: #FFF; text-align: center; font-family:"Tahoma", Verdana; font-size:16px; font-weight:bold; background-color:transparent; background-repeat:no-repeat; background-position:left center; border:0px solid #F00;-moz-border-radius:100px;-khtml-border-radius: 100px;-webkit-border-radius: 100px; opacity: 0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); } ul#navigation1 .Home a { background-image: url(http://2.bp.blogspot.com/-jEnaOCXD030/UC89WVqJCkI/AAAAAAAAEDU/LG5Jr5NHRq8/s1600/Home.png); } ul#navigation1 .Kreasi a { background-image: url(http://4.bp.blogspot.com/-21Gsi16JYYY/UC89adFmEWI/AAAAAAAAEDc/9GcIajitFOI/s1600/Kreasi.png); } ul#navigation1 .TipsTrik a { background-image: url(http://2.bp.blogspot.com/-SSMAfdEh0g0/UC89fIm6dBI/AAAAAAAAEDs/PVphrlnZ4xQ/s1600/Tips+Trik.png); } ul#navigation1 .Tutorial a { background-image: url(http://3.bp.blogspot.com/-StarlN8Io4M/UC89iL3IYeI/AAAAAAAAED0/q2L7SYOUsVQ/s1600/Tutorial.png); } ul#navigation1 .Widget a { background-image: url(http://3.bp.blogspot.com/-0Hdv3f0Ands/UC8-qmWL6CI/AAAAAAAAEEE/kR9ODBMAkQg/s1600/Widget.png); } ul#navigation1 .Animasi a { background-image: url(http://3.bp.blogspot.com/-Fe1Bttf5Ze0/UC89c6D-7DI/AAAAAAAAEDk/ed4gwWdD2Hs/s1600/Navbar.png); } </style> <script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function() { $('#navigation1 a').stop().animate({'marginLeft':'5px'},1000); $('#navigation1 > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-112px'},200); }, function () { $('a',$(this)).stop().animate({'marginLeft':'5px'},200); } ); }); </script> <ul id="navigation1"> <li class="Home"><a href="http://blogbego-creation.blogspot.com/" target="_blank" title="Kembali ke Halaman Depan">BERANDA</a></li> <li class="Kreasi"><a href="http://blogbego-creation.blogspot.com/search/label/kreasi" target="_blank" title="Artikel dengan Katagori Kreasi">KREASI</a></li> <li class="TipsTrik"><a href="http://blogbego-creation.blogspot.com/search/label/tips%20trik" target="_blank" title="Artikel dengan Katagori Tips Trik ">TIPS TRIK</a></li> <li class="Tutorial"><a href="http://blogbego-creation.blogspot.com/search/label/tutorial" target="_blank" title="Artikel dengan Katagori Tutorial">TUTORIAL</a></li> <li class="Widget"><a href="http://blogbego-creation.blogspot.com/search/label/widget" target="_blank" title="Artikel dengan Katagori Widget">WIDGET</a></li> <li class="Animasi"><a href="http://blogbego-creation.blogspot.com/search/label/widget" target="_blank" title="Artikel dengan Katagori Animasi">ANIMASI</a></li> </ul>
  • Teks yang berwarna merah adalah Image Navbar, silahkan ganti yang sesuai dengan tampilan, 
  • Teks yang berwarna Violet adalah URL saya silahkan ganti dengan URL Blog kawan begitu juga dengan Judulnya 
  • sedangkan untuk Target="_blank" title=".................." silahkan diganti juga dan bisa dihilangkan
Contoh Image Navbar
    • Selamat Mencoba, sukses selalu :
    Selengkapnya.....

    Cara membuat Tulisan Berjalan di Blog


    Salam Blogger Indonesia, sekarang saya akan berbagi dengan kawan cara membuat Tulisan Berjalan yang mirip merquee yang penempatannya di Tab / tempat Judul Blog kita dan yang bisa ditaruh di sidebar Blog.

    Baiklah mari kita bahas satu persatu :

    Caranya :
    1. Cara membuat Tulisan Berjalan di Tab.
    2. Cara membuat Tulisan Berjalan di Sidebar
    • Masuk ke Account Blogger dengan ID kawan 
    • Pada Dasbor / Rancangan pilih tambah gadget
    • Klik tanda (+) pada HTML / JavaScript
    • Copas (copy paste) script berikut kedalamnya
    Script No. 1



    <script type="text/javascript">
    //Created by Title bar Maker (http://www.bosiljak.hr/titlemaker)
    function tb8_makeArray(n){
    this.length = n;
    return this.length;
    }


    tb8_messages = new tb8_makeArray(6);
    tb8_messages[0] = "SELAMAT DATANG !!!";
    tb8_messages[1] = "DI TIPS-BLOGBEGO";
    tb8_messages[2] = "TERIMA KASIH";
    tb8_messages[3] = "KUNJUNGAN DAN";
    tb8_messages[4] = "KOMENTAR ANDA";
    tb8_messages[5] = "DITUNGGU....!!!";
    tb8_rptType = 'infinite';
    tb8_rptNbr = 5;
    tb8_speed = 100;
    tb8_delay = 2000;
    var tb8_counter=1;
    var tb8_currMsg=0;
    var tb8_tekst ="";
    var tb8_i=0;
    var tb8_TID = null;
    function tb8_pisi(){
    tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);
    document.title = tb8_tekst;
    tb8_sp=tb8_speed;
    tb8_i++;
    if (tb8_i==tb8_messages[tb8_currMsg].length){
    tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;
    }
    if (tb8_currMsg == tb8_messages.length){
    if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){
    clearTimeout(tb8_TID);
    return;
    }
    tb8_counter++;
    tb8_currMsg = 0;
    }
    tb8_TID = setTimeout("tb8_pisi()", tb8_sp);
    }
    tb8_pisi()
    </script></div>
    • Usahakan kalimatnya jangan panjang-panjang
    • Angka 6 menyesuaikan dengan banyaknya baris kalimat
    • Ganti Tulisan yang berwarna merah sesuai dengan selera kawan
    • Banyaknya / panjangnya tulisan tanpa batas
    • Demonya bisa kawan lihat disini 
    • Penempatan scriptnya bisa digabung dengan script yang lainnya. 
    • Kalimat / tulisan tsb akan berjalan dari kiri ke kanan.
    Sedangkan yang lainnya :



    • Copas script berikut pada gadget / elemen atau bisa juga digabung, 
    Script No. 2



    <script language="JavaScript">

    var txt="SELAMAT DATANG DI BLOG ILUSTRASI.BLOGSPOT.COM - SEMOGA ANDA NYAMAN DAN PUAS - TERIMA KASIH";

    var tipsblogbegotutorial=170;

    var fress=null;function judulbloggerak() { document.title=txt;

    txt=txt.substring(1,txt.length)+txt.charAt(0);

    fress=setTimeout("judulbloggerak()",tipsblogbegotutorial);}judulbloggerak();

    </script>
    • Ganti Tulisan yang berwarna merah sesuai dengan selera kawan.
    • Kalimat / Tulisan akan berjalan dari kanan ke kiri
    • Script ini bisa juga ditaruh pada Edit HTML template kawan, yaitu tepat diatas kode </body> letaknya paling bawah.
    • Demonya ; lihat pada Tab Blog ini

    sedangkan tulisan yang bisa tampil di sidebar :
    • Copas (copy-paste) script berikut kedalam gadget / elemen atau bisa digabung dengan script yang lainnya


    Script No. 3



    <script language="JavaScript">
    var max=0;
    function textlist()
    {
    max=textlist.arguments.length; for (i=0; i<max; i++) this[i]=textlist.arguments[i];
    }
    tl=new textlist
    (
    " SUATU KEBANGGAAN APABILA DENGAN BERBAGI KAMI DAPAT MEMBANTU KAWAN....!!! " // Geben Sie hier den zu scrollenden Text ein
    );
    var x=0; pos=0;
    var l=tl[0].length;
    function textticker()
    {
    document.tickform.tickfield.value=tl[x].substring(0,pos)+"_";
    if(pos++==l)
    {
    pos=0;
    setTimeout("textticker()",1000);
    x++;
    if(x==max)
    x=0;
    l=tl[x].length;
    } else
    setTimeout("textticker()",100);
    }
    // end -->
    </script>
    <script language="JavaScript">
    <!--
    document.write("<FORM NAME=\"tickform\">");
    document.write("<INPUT TYPE=\"TEXT\" NAME=\"tickfield\" SIZE=\"90\">"); // Bei SIZE können Sie die Größe des Feldes ändern
    document.write("</FORM>");
    textticker();
    //--></script></div></div>
    • Ganti tulisan warna merah sesuai dengan selera kawan
    • Angka 90 warna biru disesuaikan dengan panjangnya kalimat / tulisan yang kawan buat
    • Tulisan akan tampil dari kiri ke kanan seperti kita sedang menulis
    • Penempatannya bebas asal panjang tulisan disesuaikan dengan lebar tempat menaruhnya
    • Demonya : silahkan lihat di atas tempat postingan
    Dari ketiga Script tersebut diatas (script No.1 dan Script No. 2) tidak bisa digabung, karena tampilannya sama-sama di Tab Blog (pilih salah satu).
    Oh ya simpan Blog kawan dan lihat hasilnya.







    Selengkapnya.....

    Cara Membuat Pojok Blog Menggulung


    Sudah banyak para Blogger membahas cara membuat Pojok Halaman Blog seperti Menggulung yang dalam bahasanya mbah Google dikatakan Pagepeel, disini saya akan berbagi dengan kawan yang saya beri judul Cara Buat Pojok Blog Menggulung :z

    Cara Membuatnya :

    • Masuk ke Account Blogger dengan ID kawan
    • Pada Dasbor pilih Template
    • Cari Tag ]]></b:skin>
    • Copas Script berikut dibawah ]]></b:skin>

    <script type='text/javascript'>var untuk =&#39;http://Nama Blog kawan.blogspot.com/&#39;</script>
    <script src='https://sites.google.com/site/blogbegocreation/javascript/PagePeel.js' type='text/javascript'/>

    • Ganti text yang berwarna merah [Nama Blog kawan] dengan URL blog kawan
    • Simpan Template kawan

    screenshot


    • Sekarang buka Blog kawan untuk melihat hasilnya :y 
    • Kalau tak ada masalah hasilnya seperti pada Blog Demo saya itu
    Karena sekarang saya sedikit ada kesibukan untuk peng-Editan lebih lanjut tunggu postingan saya berikutnya, tapi jangan lupa berikan Pendapat / Komentar / Saran kawan :r

    Selengkapnya.....

    Daftar Isi

    Loading....

    Kawan FB

     

    KREASI BB.2 - © Copyright 2012
    All rights reserved - Powered by Blogger