?

Catatan

NULL

Tentang Blog Ini×

Blog ini adalah tempat Saya menuangkan hasil-hasil karya Saya sekaligus tempat saya belajar membangun sebuah blog/website dan berharap untuk tetap bisa memberikan yang terbaik kepada pembaca. kom4 (seekor nyamuk kecil yang tak pernah berhenti menyebarkan wabah.!)

Tentang Saya

Salam pembuka dari saya sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Sulawesi.

Berikut adalah data diri saya Dharla Ferdana, Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini. jika ada yang mengaku saya,namun mempunyai data yang berbeda dari yang ada dibawah, maka itu bukanlah saya. berikut data diri saya:

Nama : Muh. Dharla Ferdana Samudra
Email : dharlaferdana@yahoo.co.id
Invite My BBM : PIN : 2779647D

iklan
Bagikan kepada teman!

Membuat Scrolling Sticky Bar Lengkap

Scrolling Sticky Bar adalah sebuah widget yang muncul di halaman kamu. Cara kerjanya sama seperti scrolling facebook header, kamu tahu kan ? itu loh, sebuah header yang jika kita scroll ke bawah akan mengikuti arahan pointer mouse.

Stycky bar
Scrolling Sticky Bar Lengkap

Widget ini juga berisi sosial sharing yang berisi share ke twitter, facebook ataupun google plus. Sehingga pengunjung yang tertarik dengan postingan kamu bisa langsung membagikannya ke teman-temannya. Secara tidak langsung akan menambah nilai plus dari blog kamu. Langsung saja deh ga usah panjang lebar lagi. Kita coba menaruhnya di blog kita

Cara Membuatnya

Cari kode <body> dan kamu salin kode di bawah ini kemudian kamu letakkan di bawah kode <body>

<div id='SYB-Bar-Container'>
<div id='SYB-Bar-Content'>
<ul id='SYB-Bar-Left'>
<li class='Home'> <a href='MASUKKAN ALAMAT URL BLOG KAMU'>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='SYB-Bar-Right'>
<li class='Subscribe'>
<div class='SYB-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=MASUKKAN USERNAME FEEDBURNER KAMU&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);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='MASUKKAN USERNAME FEEDBURNER KAMU' />
<input name='loc' type='hidden' value='en_US' />
<input class='SYB-emailsubmit' type='submit' value='Subscribe' />
</form>
<a href="http://www.hzndi.blogspot.com.com" title="Tutorial Blog dan SEO">
<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 &#8593;</a>
</li>
</ul>
</div>
</div>

Sekarang kamu cari kode </body>, salin kode di bawah ini dan letakkan di atas kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
var b = $("#SYB-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>

Terakhir, kamu cari kode ]]></b:skin>, salin lagi kode di bawah ini dan letakkan di atas kode ]]></b:skin>.

#SYB-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));
}

#SYB-Bar-Container , #SYB-Bar-Left .Home a, #SYB-Bar-Right .btt a,.SYB-emailsubmit {
box-shadow: 0 5px 5px -5px #999;
-webkit-box-shadow: 0 5px 5px -5px #999;
-moz-box-shadow: 0 5px 5px -5px #999;
}

#SYB-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;
}

#SYB-Bar-Container * {
padding: 0;
}

#SYB-Bar-Container a {
text-decoration: none;
}

#SYB-Bar-Content {
width: 1024px;
margin: 0 auto;
}

#SYB-Bar-Content li {
list-style: none;
float: left;
}

#SYB-Bar-Left {
float: left;
width: 45%;
}

#SYB-Bar-Right {
float: right;
width55%;
}

#SYB-Bar-Left li {
margin-right: 1%;
margin-top: -7px;
}

#SYB-Bar-Right li {
margin-top: -7px;
}

#SYB-Bar-Left .Home a, #SYB-Bar-Right .btt a,.SYB-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;
}

#SYB-Bar-Left .Home a:active, #SYB-Bar-Right .btt a:active,.SYB-emailsubmit:active {
position: relative;
top: 1px;
box-shadow: none;
}

#SYB-Bar-Left .Home a {
background: #143eb4;
}

#SYB-Bar-Left .Home a:hover {
background: #1556fa;
}

#SYB-Bar-Right .Subscribe {
margin-top: -14px;
}

#SYB-Bar-Right .btt a {
background: #00810b;
margin-left: 3px;
}

#SYB-Bar-Right .btt a:hover {
background: #06b421;
}

.SYB-emailsubmit {
background: #ce1527;
cursor: pointer;
border: none;
height: 26px;
width: 90px;
}

.SYB-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) {
#SYB-Bar-Container {
display: none;
};
}

Simpan template dan kamu lihat hasilnya

iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com/ dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
Iklan Murah

Sejauh ini belum ada diskusi yang masuk. Mulailah berdiskusi dan temukan teman-teman barumu.

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode <i rel="anchor">http://nama_situs.com</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p* Klik untuk melihat kode!

Konversi Kode di Sini (Jendela Munculan) Emoticon

Batal

Pasang IklanPasang IklanPasang IklanPasang Iklan

Terakhir Diperbaharui

Ke atas!