Cara Membuat Widget Sticky

Sticky dalam bahasa indonesia artinya lengket/lekat/menempel maka artinya widget sticky adalah widget yang selalu menepel walaupun discroll ke bawah. Jika anda ingin memasangnya ikuti langkah-langkahnya.

~Login ke "Blogger" masuk ke "Template" lalu "Edit Template"
~Simpan kode dibawah ini tepat diatas kode </body> :

<script type='text/javascript'>$(document).ready(function() {var stickyWidgetTop = $('#HTML7').offset().top; var stickyWidget = function(){var scrollTop = $(window).scrollTop();     if (scrollTop > stickyWidgetTop) {     $('#HTML7').addClass('sticky');} else {    $('#HTML7').removeClass('sticky'); }};stickyWidget();$(window).scroll(function() {    stickyWidget();});});</script>

Ganti kode #HTML7 dengan ID widget sobat.
Cara mencari ID widget cukup klik edit pada widget yang ingin dibuat sticky lalu catat ID widgetnya, Screenshot:

yang diberi kotak merah itu ID widget

~Simpan kode dibawah ini tepat diatas kode ]]></b:skin> :

.sticky {  position:fixed;  top:10px;/* jarak dari atas*/  z-index: 100;}

~Simpan/Save Template
Selamat mencoba dan semoga Anda berhasil.

Selengkapnya

Template Blog Gratis, Keren, Responsif dan SEO Friendly

Artikel kali ini, kami membagikan sejumlah template blog yang keren, responsif dan SEO Friendly. Ada banyak pilihan template. Tinggal pilih mana yang cocok buat template blog Anda. 

Johny Grid Blogger Template

MORE / INFO DEMO SEDOT

Johny Grid adalah blogger template berbasis grid yang sepenuhnya responsif. Cocok untuk semua jenis majalah, situs-situs berita, blog pribadi, jurnal, cerita dan proyek terkait lainnya, dengan penekanan pada campuran media dan tipografi. Keren dech!

Ever After Blogger Template

MORE / INFO DEMO SEDOT

Ever After Blogger Template adalah sebuah template yang memiliki responsif, SEO friendly, tema minimalis dengan fitur auto read more. Ever After template memiliki navigasi drop-down di atas, posting terkait, 3 kolom footer, Google font, desain minimalis sederhana dan banyak lagi.

NewsPick Blogger Template

MORE / INFO DEMO SEDOT

NewsPick adalah template blogspot yang Responsif dengan 2 Kolom sidebar. NewsPick Blogger Template cocok untuk Blog Berita. NewsPick Blogger Template memiliki jQuery Slider, Dropdown Menu, 468 × 60 header Banner, Profil Sosial, Related Posts, Breadcrumb, 3 Kolom Footer, Tabbed Widget dan Fitur Lebih Lainnya.

Lingonberry Blogger Template

MORE / INFO DEMO SEDOT

Lingonberry adalah template blogger dengan satu Kolom Single, desain Minimalis,dan Responsive. Lingonberry Blogger Template memiliki Top Navigation Menu, Sosial dan Share Buttons, 3 Kolom Footer, Google Font dan Fitur Lebih Lainnya.

Funny Games Responsive Blogger Template

INFO DEMO SEDOT

FunnyGames merupakan sebuag template blogger yang responsive dan memiliki 3 kolom. Ini cocok untuk blog game karena memang pembuatnya memiliki tema awal seperti itu. Template ini memiliki fitur artikel terkait, jQuery slider, Menu dropdown, Banner di bagian header 468x60, breadcrumb. 2 sidebar kanan, 3 kolom footer, tabbed widget.

Top News Responsive Blogger Templates

INFO DEMO SEDOT

TopNews adalah template blogger responsive 2 colom yang cocok buat blog berita. Ada Jquery Slider, menu dropdown, 468x60 banner buat header, tombol sosial, breadcrumb, Tabbed Widget, dan lain-lain

Promagazine Bloger Template

INFO DEMO SEDOT

Promagazine kurang lebih sama saja dengan TopNews, perbedaannya cuma slider yang berada di HOME lebih besar. Namun demikian saya lebih suka Promagazine karena terkesan lebih menyatu blendingnya. Promagazine adalah template blogger responsive 2 colom yang cocok buat blog berita. Ada Jquery Slider, menu dropdown,fitur searching di header, tombol sosial, breadcrumb, Tabbed Widget, dan lain-lain.

SimplexCreative Free Blogger Template

INFO DEMO SEDOT

SimplexCreative merupakan salah satu template yang cukup keren dalam sisi desain. Ini seperti sebuah portofolio, belum lagi ditambah blog section. Recent post pun sudah tersedia di bagian bawah artikel. Overall memang benar sesuai namanya. KREATIF!

Justice Blogger Template

MORE / INFO DEMO SEDOT

Justice adalah template blogger yang Responsif. Memiliki 2 Kolom  Template ini cocok untuk hal-hal berbau Hukum seperti Pengacara, fukaha, mediator atau perusahaan Hukum terkait lainnya. Justice Blogger Template memiliki jQuery Slider, Dropdown Menu, 468 × 60 header Banner, Related Posts, Breadcrumb, 3 Kolom Footer, Tabbed Widget dan Fitur Lebih lainnya.

CarsWP Blogger Template

MORE / INFO DEMO SEDOT

CarsWp adalah sebuah template yang Responsif dengan 3 Kolom Template Blogger ini cocok untuk Blog Otomotif. CarsWp Blogger Template memiliki jQuery Slider, Dropdown Menu, 468 × 60 header Banner, Related Posts, Breadcrumb, 2 Sidebars, 3 Kolom Footer, Profil Sosial, Tabbed Widget, Google Font dan Fitur Lebih Lainnya.

TechBox Blogger Template Yang Responsive

MORE / INFO DEMO SEDOT

TechBox adalah template blogger yang Responsif, memiliki 3 Kolom. Blogger Template ini cocok untuk Blog berisikan informasi teknologi. TechBox Blogger Template memiliki jQuery Slider, Dropdown Menus, 468 × 60 header Banner, Related Posts, Breadcrumb, 2 Sidebars Kanan, 3 Kolom Footer, Ikon Sosial, Tabbed Widget dan Fitur Lebih lainnya.

Techclue Blogger Template

MORE / INFO DEMO SEDOT

Techclue adalah Sebuah Template Blogger responsif yang keren dan SEO Friendly. Anda Dapat Menggunakan Template ini Untuk Situs Pendidikan Serta Untuk Simple Web Magazine. Techclue adalah sebuah Kombinasi Sempurna Dari Design.Web.

LiveNews Blogger Template

MORE / INFO DEMO SEDOT

LiveNews adalah template blogger yang Responsif, memiliki 3 Kolom.  Blogger Template ini cocok untuk Blog Berita. LiveNews Blogger Template memiliki jQuery Slider, Dropdown Menus, 468 × 60 header Banner, Related Posts, Breadcrumb, Kiri dan Kanan Sidebars, 3 Kolom Footer, Tabbed Widget, Tombol Sosial dan Fitur Lebih lainnya.

DigBug Blogger Template Gratis Yang Keren

MORE / INFO DEMO SEDOT

Digbug adalah sebuah template yang digunakan untuk blogger yang memposting video karena Blogger Template ini dari awal sudah dirancang untuk situs video. Digbug mendukung Streaming dari youtube, Vimeo. Digbug datang dengan banyak fitur seperti slider video, desain Responsif, Responsif Menu dan banyak lagi.

Template Blogger Blogghiamo

MORE / INFO DEMO SEDOT

Blogghiamo adalah salah satu template yang Indah, Responsif, 2 Kolom dan bergaya Minimalis. Template ini cocok untuk Penulis Blog Pribadi atau Lainnya. Blogghiamo Blogger Template memiliki Ikon Sosial, Dropdown Menus, Share Buttons, Related Posts, Google Font dan Fitur Lebih lainnya.

Selengkapnya

Cara Membuat Sticky Menu Navigasi di Blog

Sticky menu navigasi pada dasarnya adalah sebuah menu website yang dikunci pada tempatnya sehingga tidak hilang ketika pengguna menggulirkan mousenya ke bawah halaman, dengan kata lain dapat diakses dengan mudah karena selalu terlihat. 

Kebanyakan desainer blog/website akan setuju bahwa menu navigasi merupakan salah satu komponen yang paling penting dari sebuah website. Meskipun demikian, tidak selalu mudah untuk menggunakan atau mengaksesnya. Secara umum, pengguna harus menggulirkan mouse kembali ke atas website untuk mengakses menu navigasi. Pada artikel kami kali ini memperjelas tulisan kami terdahulu, yakni membuat Menu Melayang Setelah Discroll (Sticky Menu).

DEMO

Banyak blog/website populer menambahkan fungsi navigasi menu ini agar tetap terlihat di bagian atas. Ketika pengguna menggulirkan mouse ke bawah halaman dan bagian atas menu navigasi tetap menempel dan tetap terlihat. Ini bermaksud untuk memudahkan kepada pengunjung dan tidak harus kembali menggerakan mousenya ke bagian atas untuk menjelajahi halaman yang lainnya.

Teknik sticky ini sebenarnya dapat diterapkan untuk elemen lainnya, seperti bagian samping (sidebar), tombol atau media social sharing/like, dan bagian footer. Namun tentu saja cara mengaplikasikannya berbeda-beda. Dibawah ini penjelasan yang difokuskan pada menu navigasi utama menggunakan javascript.

Sticky Menu Navigasi

Berikut adalah langkah demi langkah membuat Sticky Menu Navigasi.

1. Kode berikut adalah contoh CSS style pada menu navigasi biasanya dimasukan diatas/sebelum ]]></b:skin> atau </style> di bagian head. Sobat Blogger mungkin tidak perlu memasukan kode dibawah ini, karena mempunyai kode yang berbeda namanya, tapi untuk dipahami dasarnya.

Contoh CSS Menu Navigasi

1234567#sticky_nav_wrapper {width:100%; height:50px; }
#sticky_nav { width:100%; height:50px; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA_HoZofejIJZzxR8Ye7Q9PCBF5z-8_1Nk3gEnTw1POGe9uVpZH7vY21LVy1DPdfAvCB16A89071Pb1kAJy1Gr_5CEBmigQxkmLUAbiyDo_uScG81xlPY6VqQ7NbRsQTh0fMnMfcvQXbA/s72/black.png"); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; }
.menu_content {max-width:1171px; margin-left:auto; margin-right:auto; list-style:none; width:82%; min-width:999px;}
#sticky_nav ul { list-style:none; margin:0; padding:5px; }
#sticky_nav ul li { margin:0; padding:0; display:inline; }
#sticky_nav ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
#sticky_nav ul li a:hover { color:#fff; background:#111; }

Keterangan: Sebuah Contoh CSS Menu Navigasi.
Warna Biru adalah links gambar background menu navigasi. Warna Merah adalah Bagian Elemen yang akan dibuat sticky.

Berikut Contoh HTML

12345678910111213141516<nav>
    <div id="sticky_nav_wrapper">
        <div id="sticky_nav">
            <div class="menu_content">
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">LAYANAN</a></li>
                    <li><a href="#">KATEGORI</a></li>
                    <li><a href="#">INFORMASI</a></li>
                    <li><a href="#">KONTAK</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

2. Masukan kode berikut diatas/sebelum </head>

JQuery

1<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Catatan: Jika sudah menggunakan JQuery versi lain, maka lewati langkah ini.

3. Masukan kode javascript berikut di atas </head>

Javascript Menu Navigasi

1234567891011121314151617<script type="text/javascript">
$(function() {
      var sticky_nav_offset_top = $('#sticky_nav').offset().top;
      var sticky_nav = function(){
              var scroll_top = $(window).scrollTop();
              if (scroll_top > sticky_nav_offset_top) { 
                      $('#sticky_nav').css({ 'position': 'fixed', 'top':0, 'left':0 });
              } else {
                      $('#sticky_nav').css({ 'position': 'relative' }); 
              }   
       };
       sticky_nav();
       $(window).scroll(function() {
              sticky_nav();
       });
});
</script>

Keterangan: Warna merah adalah bagian HTML menu navigasi yang akan dibuat "sticky" alias tetap tampil dan terlihat bagian diatas, seperti ditunjukan di bagian HTML diatas.

Catatan: Jika membutuhkan kode untuk di convert/di parse agar bisa disave di templatenya, Masuk Ke Tool Konversi/Parse Disini, tapi ini mungkin tidak diperlukan untuk kode diatas.

4. Jika sudah Paham, kemudian terapkan dan Save template.

Selesai sudah, mudah-mudahan Cara Membuat Sticky Menu Navigasi ini bermanfaat.

Sumber: http://www.aura-ilmu.com/

Selengkapnya

Membuat Menu Melayang Setelah Discroll (Sticky Menu)

Pada tutorial kami saat ini akan berbagi bagaimana membuat Sticky Menu. Dengan membuat sticky menu, tentunya akan memudahkan pengunjung mengeksplor blog sobat tanpa harus naik turun scroll. Sticky Menu ini awalnya akan terlihat normal, tetapi akan melayang (fixed) ketika mouse discroll ke bawah. Kalau Anda beruntung dan memahami cara membuatnya, tutorial ini akan mengubah blog Anda menjadi tambah keren.

Simpan kode ini di atas </body> dan tentukan selectornya (pada script dibawah saya aplikasikan pada .nav).

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .nav
    var stickyNavTop = $('.nav').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
        if (scrollTop > stickyNavTop) { 
            $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.nav').css({ 'position': 'relative' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

• Demo

Memunculkan Menu Setelah DiSroll

Apabila ingin memunculkan menu hanya setelah discroll, gunakan kode ini:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .nav
    var stickyNavTop = $('.nav').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
        if (scrollTop > stickyNavTop) { 
            $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.nav').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

• Demo

Sumber : http://http://blog.kangismet.net/2013/11/membuat-menu-melayang-setelah-discroll.html

Selengkapnya