Draft Blogger: Cara Membuat Fixed Position Scrolling Sticky Bar

Sekarang bar bergulir atau bar sticky telah menjadi sangat populer, dengan cepat menangkap perhatian orang-orang itu sebabnya saya juga menggunakan bar sticky (hellobar) pada blog.Hari ini saya berbagi scrolling bar keren sticky yang mengandung banyak pilihan seperti tombol twitter, google +1 button, facebook seperti tombol, formulir email berlangganan juga ada tombol random post yang akan mengarahkan Anda (setiap Post). Mari kita mulai dan lihat bagaimana cara menambahkan bar ini untuk blogger blog.

Langkah 1: Menambahkan HTML

Go to Blogger Dashboard > Template
Download a copy of your template
Click on Edit HTML
Hit Proceed
Find for below code,

<body>

Catatan - Jika Anda menggunakan template bawaan blogger kemudian cari tag <body>

Lihat video di bawah ini untuk informasi yang tepat.

tambahkan kode di bawah ini tepat di bawah kode di atas,

<div id='HB-Bar-Container'>

<div id='HB-Bar-Content'>

<ul id='HB-Bar-Left'>

<li class='Home'> <a href='http://draftbloger.blogspot.com/'>Home</a> </li>

<li class='Share'> <div id='share-top'>

<ul>

<li> <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a> </li>

<li> <g:plusone size='medium'></g:plusone> </li>

<li> <div class='fb-like' data-font='verdana' data-layout='button_count' data-send='false' data-show-faces='false'>

</div></li></ul>

<div style='clear:both;'></div></div></li>

</ul>

<ul id='HB-Bar-Right'>

<li class='Subscribe'> <div class='HB-email'>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=HBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='padding:3px;text-align:center;' target='popupwindow'>

<input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = "";}' placeholder=' Enter Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='HBlogger'/><input name='loc' type='hidden' value='en_US'/> <input class='HB-emailsubmit' type='submit' value='Subscribe'/> </form>

<a href="http://draftbloger.blogspot.com/" title="Blogger Widgets" ><img src="http://img1.blogblog.com/img/blank.gif" /></a> </div></li>

<li class='btt'> <a href='#top' title='Back to top'>Slide to Top ↑</a> </li>

</ul></div></div>

Ganti http://draftbloger.blogspot.com/ dengan URL blog Anda.
Ganti HBlogger dengan feedburner username.

Langkah 2: Menambahkan The Script

Sekarang temukan kode di bawah ,

</body>

tambahkan kode di bawah ini sebelum / di atasnya,

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

<script>

//<![CDATA[

var b = $("#HB-Bar-Container");var c = b.css("top");$(window).scroll(function (){if ($(this).scrollTop() > 50){b.stop().animate({top: "0px"}, 0)}else{b.stop().animate({top: "-100px"}, 0)}});

//]]>

</script>

<script>

$(document).ready(function(){// fade in .btt

$(function () {$(window).scroll(function (){});// scroll body to 0px on click

$('.btt a').click(function () {$('body,html').animate({scrollTop: 0}, 350);return false;});});});

</script>

<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs)}(document, 'script', 'facebook-jssdk'));</script>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script>

<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Langkah 3: Menambahkan Styles di Bar

Sekarang temukan kode dibawah ini.

]]></b:skin>

tambahkan kode di bawah ini tepat di atas ]]></b:skin>

#HB-Bar-Container {

background-color:#f6f6f6;

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));

background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));

}

#HB-Bar-Container , #HB-Bar-Left .Home a, #HB-Bar-Right .btt a,.HB-emailsubmit {

box-shadow: 0 5px 5px -5px #999;

-webkit-box-shadow: 0 5px 5px -5px #999;

-moz-box-shadow: 0 5px 5px -5px #999;

}

#HB-Bar-Container{

margin: 0px 116px;

top:-100px;

-moz-border-radius:0px 0px 10px 10px;

-webkit-border-radius:0px 0px 10px 10px;

border-radius: 0px 0px 10px 10px;

text-align:center;

border-bottom: 1px solid #aaa;

z-index:999;

padding:4px;

height:33px;

  position:fixed;

  vertical-align: baseline;

  }

#HB-Bar-Container *{

padding:0;

}

#HB-Bar-Container a {

text-decoration:none;

}

#HB-Bar-Content{

width:1024px;

margin:0 auto;

}

#HB-Bar-Content li{

list-style:none;

float:left;

}

#HB-Bar-Left{

float:left;

width:45%;

}

#HB-Bar-Right{

float:right;

width55%;

}

#HB-Bar-Left li{

margin-right:1%;

margin-top:-7px;

}

#HB-Bar-Right li{

margin-top:-7px;

}

#HB-Bar-Left .Home a, #HB-Bar-Right .btt a,.HB-emailsubmit{

font-size:9pt;

font-family:cambria;

font-weight:Bold;

text-transform:uppercase;

color:#fff;

text-shadow:0 -1px 1px rgba(0,0,0,0.25);

letter-spacing: 1px;

padding:6px;

border-radius:3px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

}

#HB-Bar-Left .Home a:active, #HB-Bar-Right .btt a:active,.HB-emailsubmit:active{

position: relative;

top: 1px;

box-shadow:none;

}

#HB-Bar-Left .Home a{

background:#143eb4;

}

#HB-Bar-Left .Home a:hover{

background:#1556fa;

}

#HB-Bar-Right .Subscribe{

margin-top:-14px;

}

#HB-Bar-Right .btt a{

background:#00810b;

margin-left:3px;

}

#HB-Bar-Right .btt a:hover{

background:#06b421;

}

.HB-emailsubmit{

background:#ce1527;

cursor:pointer;

border:none;

height:26px;

width:90px;

}

.HB-emailsubmit:hover{

background: #f02a37;

}

.textarea{

border:1px solid #aaaaaa;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px;

resize:none;

font-size:8pt;

font-family:verdana;

width:170px;

height:25px;

color:#000000;

}

#share-top{

background: #f9f9f9;

border:1px solid #dddddd;

line-height: 1;

margin: -4px 0 0 60px;

padding: 10px 0 2px 5px;

-moz-border-radius:3px;

-webkit-border-radius:3px;

border-radius:3px;

}

#share-top li {

display: block;

margin-right: 0;

}

#facebook-widget,#google-widget,#twitter-widget {display:none; }

@media only screen and (min-width : 768px) and (max-width : 1050px),only screen and (min-device-width : 768px) and (max-device-width : 1024px){

#HB-Bar-Container{

display:none;

}

}

Akhirnya simpan template Anda dan lihat blog Anda.

Video Tutorial

Draft Blogger

0 Cara Membuat Fixed Position Scrolling Sticky Bar

Video Tutorial

Tidak ada komentar:

Posting Komentar