Post Game

Cara Membuat Menu Navigasi Tetap Walaupun di Scroll

Cara Membuat Menu Navigasi Statis atau Sticky di Blog,- Template adalah sebuah elemen dasar yang membangun sebuah blog atau web yang berisi dari semua fitur seperti Sidebar, Header, Post, footer dan lain-lain. atau bisa dikatekan bahwa template adalah sebuah wadah untuk eleman lain dari blog serta sebagai tampilan sebuah website.atau blog.

Template blog juga sangat mempengaruhi kesuksesan sebuah blog, karenanya silahkan pilih template yang sudah terbukti Seo friendly atau disukai mesin penelusuran google. namun dari semua elemen yang membangun template seperti sidebar, Header, Footer dan lain-lain. disini saya akan membagikan sedikit tutorial yang mungkin bermanfaat untuk anda yaitu Cara membuat menu navigasi tetap walaupun di scroll kebawah.

Sebenarnya tutorial ini saya peruntukan bagi yang ingin sekali membuat menu navigasi sticky seperti blog lain yang menggunakan, dan cara ini bisa dibilang sedikit rumit, oleh karena itu silahkan di simak baik-baik. berikut tutrialnya:

Cara Membuat Menu Navigasi Tetap walaupun di Scroll

1. Pertama silahkan masuk ke Blogger - Template - Edit Html.

2. Kemudian Silahkan cari kode Menu navigasi, pada setiap blog kodenya berbeda-beda namun yang pasti terdapat kode (nav), sebagai contoh kode blog saya adalah #navitions.


3. Silahkan catat atau hafalkan kode tersebut, kemudian silahkan cari kode </body>, jika sudah ketemu copy kode dibawah ini dan paste diatas kode </body>

<script type=text/javascript>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $(#nav).offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $(#nav).css({ position: fixed, top:0, z-index:9999 });
        } else {
            $(#nav).css({ position: relative });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

4. Selanjutnya ganti kode #nav diatas dengan kode menu navigasi yang sebelumnya ada hafalkan atau catat.

5. Biasanya menu tersebut akan berantakan, untuk mengatasinya silahkan ganti width:100%; yang ada pada kode menu seperti langkah no 2, dengan width:950px; atau jika tidak ada silahkan tambahkan sendiri. dan untuk menyesuaikanya dengan template anda bisa diganti 950px dengan ukuran lain.

Itulah cara membuat menu navigasi tetap walaupun di scroll kebawah, sekian tips blog yang dapat saya bagikan dan Semoga berhasil.

Go to link Download

Cara Membuat Scroll Pada Label Blog

Seorang Admin blogger kebanyakan yang membuat label blognya telalu banyak sehingga jika ditampilkan ke widged akan terlihat memanjang ke bawah, tentunya ini tidak cocok untuk untuk tampilan karena menggunakan banyak tempat sedangkan widget yang lainnya memiliki tempat yang tidak sesuai dengan posisi yang diinginkan.










1. Masuk ke akun blogger anda
2. Pilih Template laluk klik EDIT HTML lalu Klik Lanjutkan
3. Kemudian Cari kode berikut ini ]]></b:skin> 
4. kemudian tambahkan kode berikut ini sebelum kode ]]></b:skin> (kode yang dicari tadi)

#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}
5. Ganti yang berwarna merah sesuai panjang yang di inginkan.
6. Lalu Klik Simpan Template dan lihat hasilnya.

Go to link Download

Cara Membuat Scroll Timer Pada Blog

Cara Membuat Scroll Timer Pada Blog - tadi karena ada yang request tentang Membuat Scroll Timer Pada Blog , kali ini saya akan mencoba untuk menjawabnya , sebetulnya sangat mudah untuk membuat Scroll Timer , hanya di butuhkan css dan javascript , Fungsi dari Scroll Timer  adalah untuk mengukur jarak tinggi pada sebuah halaman blog, di homepage maupun dipostingan/laman. Scroll Timer ini mengukurnya dengan persen, dan tentu saja batas angkanya hanya mencapai 100%, selain untuk mengukur pada halaman blog, Scroll Timer ini punya keunikan, diantaranya adalah membuat blog terlihat keren, dll. Oke


Berikut  Cara Membuat Scroll Timer Pada Blog :

1. Cari kode </body> . Setelah ketemu taruh kode javascript dibawa ini diatas kode </body> tersebut .

<script type=text/javascript>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
 var viewportHeight = $(this).height(),
 scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
 progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
 distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $(#scroll).height() / 2;
 $(#scroll)
 .css(top, distance)
 .text( ( + Math.round(progress * 100) + %))
 .fadeIn(100);
 if (scrollTimer !== null) {
 clearTimeout(scrollTimer);
 }
 scrollTimer = setTimeout(function() {
 $(#scroll).fadeOut();
 }, 1500);
});
//]]>
</script>

2. Langkah terkahir Pasang CSS-nya  ( pasang kode dibawah ini diatas kode ]]></b:skin> )

#scroll {
 display:none;
 position:fixed;
 top:0;
 right:20px;
 z-index:500;
 padding:3px 8px;
 background-color:#2187e7;
 color:#fff;
 border-radius:3px;
}

#scroll:after {
 content:"";
 position:absolute;
 top:50%;
 right:-8px;
 height:0;
 width:0;
 margin-top:-4px;
 border:4px solid transparent;
 border-left-color:#2187e7;
}

Go to link Download