Langsung ke konten utama

Sticky Footer Bar

Siang All
Kembali dengan tutorial , kali tentang Sticky Footer Bar . Ini kalau diantara sobat sudah sedikit bosan dengan kaki sobat eh maksudnya footer blog sobat yang itu-itu mulu hehe , aku punya pilihan buat sobat  . Untuk lebih jelasnya sobat lihat saja Screenchot nya :




Bila sobat berminat untuk memasangnya di blog sobat ikuti dengan seksama cara memasangnya *

Seperti biasa sobat masuk Edit Template cari kode ]]></b:skin>
Masukan kode dibawah ini tepat diatas kode ]]></b:skin>
/*  MBL Floating Sticky Footer Bar For Blogger (www.mybloggerlab.com) */
#MBL-footer-bar {
    position: fixed;
    bottom: 0;
    z-index: 100;
    width: 100%;
    height: 38px;
    clear: both;
    margin: 0;
    padding-bottom: 4px;
    background-color: #333;
    overflow: hidden;
}
#MBL-footer-bar a {
    float: right;
    margin: 0;
    padding: 0;
    background-color: #333;
}
#MBL-footer-bar a.first {
    float: left;
    margin-top: -1px;
}
.MBL-footer-wrapper {
    max-width: 92%;
    width: 960px;
    margin: 0 auto;
}
 .MBL-footer-wrapper {
        width: 100%;
        padding: 10 10%;
    }
 
@media only screen and (max-width : 649px),
only screen and (min-device-width : 320px) and (max-device-width : 685px) {

 #MBL-footer-bar {
        position: static;
    }
.MBL-footer-wrapper {
        width: 90%;
        padding: 0 5%;
    }}

 #tips, #tips li{margin:0; padding:8px; list-style:none; }
#tips{width: 100%; font-size:22px; line-height:120%; font-family: Arial, Helvetica, sans-serif; vertical-align:middle; margin: -2px 0 0; opacity: 0.95; font-weight: bold; }
#tips li{padding: 0px 0; display:none; float:left;  }
#tips li a{color: #fff;  }
#tips li a:hover{text-decoration: none; }
Lalu cari kode </head>
Masukan kode dibawah ini tepat diatasnya
<script>$('#MBL-footer-bar').hide();$(function(){$(window).scroll(function(){if($(this).scrollTop()>600){$('#MBL-footer-bar').slideDown(200)}else{$('#MBL-footer-bar').slideUp(200)}});$('.go-top').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});</script>
<script>var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-20868082-3']);_gaq.push(['_trackPageview']);(function(){var ga=document.createElement('script');ga.type='text/javascript'ga.async=true;ga.src=('https:'==document.location.protocol?'https:var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s)})();</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2' type='text/javascript'/>
<script src='https://mybloggerlab.googlecode.com/files/main.js' type='text/javascript'/>

Dan terakhir sobat cari kode <body>
Masukan kode dibawah ini tepat sebelum kode <body>
<header class='cf' id='page-header'/>
<div id='MBL-footer-bar'>
<div class='MBL-footer-wrapper'>
<a class='go-top first' href='#page-header'><img alt='Back To Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVQDc01YH23qwxpl-FjG7RtrWFStyc0GmiiQIy0zVn0BZVYNrTv9Ubk6BMw1E7HslSouUNTpMHqsmM6K-zn1yZeGlGZXLCCQ1mogc287jWSwncXBDdrzKIUTwpoB3XD83nbZU7fUJQ7DE/s1600/UP.png'/></a>
<a href='https://plus.google.com/u/0/100445736313951798399' target='_blank' title='Follow On Google+'><img alt='google+ page' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-qz2d4BOIQYfaY_Fhni4qnMD5PfL5qpBIyvmZScFo0LrYLQAaKiMRcXuMdroSammRhL4bSbgqr2giG2do7m4j5_rSzXYJfGk762ed698uTgAdDS4dFt5L5NX9hpOsrb-BQA6_hzMhB38d/s1600/GooglePlus.png'/></a>
<a href='http://www.facebook.com/mybloggerlab' target='_blank' title='Follow On Facebook'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLn4vrG6erI9PpkdoLzNaDnZnUDXEB8WSS6fWH1ZcOyPTxOEH5x16lK8qC4PL3YWzEDPoaNH5qWmQsBJWG1haO961rM5ljabLMXAKRYVPIvdsEbIC4GU0psZ55DSi-qzT2iUqUVCH-dU8/s1600/FB.png'/></a>
<a href='http://twitter.com/RulyNakula212' target='_blank' title='Follow Us'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONv0xAXC7VoEeohkKkcReTOx-0aWB5GSGd1n-GRF1GK5SB_vNxJv5PVIilEJMJlwLaXzrp5B0XLnTPyaclyklROkSZ41wo9arDhe2CSM6tJLDgBYXF6KW1gMTYfagGQvUbzDcqqBIqgB7/s1600/Twitter.pngg'/></a>
<a href='http://feeds.feedburner.com/OriginallyBlogContest' title='Get Updates'><img alt='rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmSK9yspWoMXRQatELp4A7_c9KrzdZcv0iM4bknpMpQT4TCX7JwldViRWmfZwh0d6Pu60aHh-ivdOERLW1ky8r-dDNOwpfvCO96uDS0D1Jl9KqKsDxQSr33gUoZwOsVD7QXTZsPja7w-tV/s1600/RSS.png'/></a>

 <div class='boxfloat'>
<ul id='tips'>
<li><a href='http://www.mybloggerlab.com'>OBC ready to tutorial</a></li>
<li><a href='http://www.blogger.com'>Blogger Sahring And Entertainment</a></li>
<li><a href='http://www.mybloggerlab.com'>This Is Third Item</a></li>
<li><a href='http://www.mybloggerlab.com'>This Is Forth Item</a></li>
</ul>
</div>
</div>
</div>


Ganti text yang diwarnai dengan ID Google+ , Facebook , Twitter , dan feedbuner sobat 
Terakhir simpan template dan lihat hasilnya . 
Label:

Komentar

  1. UnknownSelasa, Mei 28, 2013

    keren ternyata hohoho..

    minta template yang kek gini ada gak?!.

    BalasHapus
    Balasan
    1. Sopala MultapaSelasa, Mei 28, 2013

      lumayan ...
      yang kayak ini bukan ?
      wah kalau yg kayak ini nanti sama dunk hehe

      Hapus
    2. HendrikSelasa, Mei 28, 2013

      Kemarin template ini diposting kayaknya sama Mas Rully :D

      Hapus
    3. UnknownRabu, Mei 29, 2013

      iya tenplate ini :D .. bagi dong , pengen yang diatasnya kek gitu .

      Hapus
  2. AnonimSelasa, Mei 28, 2013

    pas mantabs

    BalasHapus
  3. HendrikSelasa, Mei 28, 2013

    Bagus Nie Mas. Mungkin untuk blog yang berikutnya aja :D

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya