Showing posts with label Sticky Bar. Show all posts
Showing posts with label Sticky Bar. Show all posts

Wednesday, August 15, 2012

Cara Membuat Widget Slidenote / Pesan Notifikasi Untuk Blogger

11:26 AM Hzndi 50 comments

Cara Membuat Widget Slidenote / Pesan Notifikasi Untuk Blogger

Di postingan kali ini saya akan membagikan sebuah widget menarik berbentuk SlideNote. ya hampir mirip sama recommended Slied Post, namun kalau widget SlideNote ini hanya digunakan untuk menampilkan pesan saja, bukan untuk menampilkan postingan (walaupun bisa untuk menampilkan postingan namun hanya berupa pesan). Untuk Demo-nya bisa kalian lihat gambar diatas.

Widget ini akan muncul ketika kamu menyorot ke bagian bawah blog dan akan menghilang dengan sendirinya saat kamu naik kebagian atas blog. Saya sudah mencoba Plugin dari Jquery ini, dan bisa loh, jadi buat kalian yang tertarik bisa mencobanya.

1. Login ke Blogger.com

2. Klik Template --> Klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini
3. Masih di bagian Template, Klik Edit HTML --> Klik Lanjutkan --> Centang "Expand Template Widget" --> Cari kode </head>, gunakan CTRL + F untuk memudahkan Pencarian.

4. Salin kode di bawah ini dan letakkan di atas kode </head>
 <style type="text/css">
.slidenote { width: 540px; height: 140px; background: #FBEC78; padding: 1em;
-moz-box-shadow: -0.2em -0.2em 0.7em #333; -webkit-box-shadow: -0.2em -0.2em 0.7em #333;}
.slidenote img { float: left; margin-left: -2em; margin-top: -2em; }
.slidenote img:hover { margin-top: -1.95em; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hzndi.googlecode.com/files/hzndi.blogspot.com-jquery.slidenote.min.js" type="text/javascript"></script>

5. Sekarang cari lagi kode </body> dan gunakan CTRL + F untuk memudahkan Pencarian.

6. Salin kode di bawah ini dan letakkan diatas kode </body>

<div class='slidenote' id='note'>
<div id='container'>
<h2>MASUKKAN JUDUL YANG KAMU SUKA</h2>
<span><em>MASUKKAN KATA-KATA YANG KAMU SUKA </em></span>
<p>MASUKKAN KATA-KATA YANG KAMU SUKA <a href='MASUKKAN URL YANG INGIN KAMU ALIHKAN'>MASUKKAN JUDUL URL-NYA</a></p>
</div>
</div>
<script type='text/javascript'>
$(&#39;#note&#39;).slideNote({
closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8oDFGSkjbqHEWzO-NR0DPFWDa6qBP3ncuUnvXUvA5Xo3JMeZ3pCYlkmNVGQtVI6ILnKNFqHV7uUlRYEPg-msK7wexqb34Z6QaZG3LbgX6nCLLHNWYFOYgft8tW-0QIm1ZAOtazDL1X5g/s320/slidenote.close.png&#39;
});
</script>

NOTE : 
Untuk memasukkan kata-kata baru, bisa dengan memasukkan kata-kata diantara kode  
<p>masukkan kata-kata disini</p>

7. Jika sudah, kamu simpan deh :)
Read more »

Tuesday, July 31, 2012

Cara Membuat Scrolling Sticky Bar Lengkap Untuk Blogger

12:31 PM Hzndi 29 comments

Buka gambar di tab baru jika tidak jelas

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.

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 :)

Untuk demo langsungnya bisa kamu lihat disini

1. login ke Blogger.com

2. Klik Template --> Edit HTML --> 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> 

3. Sekarang kamu cari kode </body>, salin kode di bawah ini dan letakkan di atas kode </body>. Untuk mencari kode </body>, jangan lupa gunakan ctrl +f oke :)

<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> 

4. 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;
}
}

5. Simpan template dan kamu lihat hasilnya, thanks to http://www.hackinguniversity.in/ yang sudah membuat widget ini :)
Read more »

Wednesday, April 18, 2012

Menaruh Widget Subscription Berbentuk Perangko

4:28 PM Hzndi 10 comments



Sepertinya jika membahas tentang widget untuk blogger memang tidak akan ada habisnya, sekarang ada lagi widget dengan tampoilanb yang lumayang menarik dan seperti perangko. Di dalam widget tersebut juga kita bisa memasukkan alamat feedburner, RSS, Twitter, Facebook hingga google plus. Tentu saja itu semua dapat memanjakan pengunjung kita dan menambah jumlah follower di twitter maupun jumlah fans di FB. Lihat langkahnya di bawah ini.

1. Login ke blogger.com

2. klik Rancangan --> Elemen Laman --> Tambah Gadget --> HTML/Javascript.

3. Masukkan kode di bawah ini ke dalam Kotak HTML/Javascript tadi.

<style>
a:hover {background-color: transparent;opacity:0.7;}
</style>

<a title="Rss Feed" href="MASUKKAN ALAMAT FEEDBURNER KAMU" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKRnXReMkOI-wxU_tSjWafg3PbN0AB_-PAmauocviZvT7UtKG-6Ddyn7qt-BFg7Cpb-jB4mGKzVBZBd2UQ4jXF2dw0oOQQAO7fQeIi4Pi3t8jGUaQZjjIaA7mvkMs2umQVV6u1RmrQf2bP/s1600/rss_48x48.png" /></a>

<a title="Subscribe Via Email Rss" href="http://feedburner.google.com/fb/a/mailverify?uri=GANTI DENGAN NAMA FEEDBURNER KAMU&loc=en_US" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidMq37-mDhbJ48Y7ui_Htgq_jhPLdsYTCbwyyCLrPOH1k9Or5tpWTDAeB_fdFj5mpV4WTGV95D_CEn3X7Rrcn4910M8UZjqIomqt-UTSx_XUq-kDB95plSlHp3SMj8HadJtACpiPSGJ0LP/s1600/mailrss_48x48.png" /></a>

<a title="Follow On Twitter" href="MASUKKAN ALAMAT TWITTER KAMU" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1-3WO4is1-5sdgoIPZibPk0j29K8mPXw8YUh7-MF3fFLleJIph9nHIGEwpFv1gz_vrTL49I4Vw46r-5O3610DnVzqDwLKasA9xs6TSZZRLjwxNRYSxaCNiM75QvNsbQPSZtCzGQ_9PFYZ/s1600/twitter_48x48.png" /></a>

<a title="Find Us On Facebook" href="MASUKKAN ALAMAT FB/ FANS PAGE FB KAMU" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqU-n-kqi11OzKh_qIR7n7LoM-lyreubgWBSlmyNwXD8TQ30rnmNEocU8xcUGDlzhiMK1P_iiaaExA0EvaXypKjgxd38qMfaYJ045odtLKVXFQMWr9lhzI4X8L7VDfBqTHxwwJXraThOio/s1600/facebook_48x48.png" /></a>

<a title="Add To Circles" href="MASUKKAN ALAMAT GOOGLE PLUS KAMU" rel="nofollow" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoCT5Ykh8v3O8BhHoW50-afcr35Ii_rYl3p5YFAc10A4odGWddtBtAtrE41j2C9pXrRmiEFS6En8eJ7f9OqtSKeiptbYYlCBIV04rUmb9ojNmD1Mg38bgtYjO1KAmyMm3Gf4U7I97e4vky/s1600/googleplus_48x48.png" /></a>

4. Simpan template.
Read more »

Thursday, April 12, 2012

Menambah Bar Notifikasi Untuk Blogger Dengan Tombol "Like" Facebook

11:13 AM Hzndi 8 comments

Notification Bar With Facebook Like Button
(source : mybloggertricks.com)
 
Jika tadi widget yang saya bagikan tidak menampilkan tombol like facebook, di widget yang sau ini akan ada tombol like facebooknya. Fungsinya sih hampir sama seperti widget sticky bar namun dengan adanya tombol like, bisa menambah fans kamu di halaman fans FB. Lihat tutorialnya di bawah ini:

1. Masuk ke Blogger.com

2. Klik Rancangan --> Edit HTML --> Cari kode ]]></b:skin> Kemudian kamu salin kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>.

#mbt-stickybar{
background:#FF0000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJGQ2RQ7OnZu6M1xRt-59phar0mW5Gev4MGbGIlFddLt3gzMTDukfNaPS5bWqEiyYCz3LTXonBOGr2sR6IgNIZ40Vm8aokmhrkMxzMax8CEPW3p4blZgnh4Z2OQxlFrG0Ly-lqQY_a6Qc/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#mbt-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#mbt-stickybar a:hover{
text-decoration:underline;
}
#mbt-stickybar p {margin:0; list-style:none;}
#mbt-stickybar img {vertical-align: middle;
      margin-right: 6px;}

3. Kamu cari lagi kode <body> atau </body>, kamu salin lagi kode di bawah ini dan letakan di bawah kode <body> (Jika kamu ingin menempatkannnya di bawah header) atau letakkan di </body> (Jika kamu ingin menempatkannya di bawah footer).

<div id='mbt-stickybar1'>
<div style='float:left; width:400px;'>
<a href='#'>Receive Free Updates Via Email. Subscribe Now!</a>
</div>
<div style='float:right; width:300px;'>
<table style='margin:0; padding:0;'>
<tr>
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='alamat fan page Facebook kamu' layout='button_count' send='false' show_faces='false' width='80'/>
</td>
</tr>
</table>
</div>
</div>

NOTE :

- Ganti kode # dengan alamat feedburner kamu.
- Ganti kode yang berwarna biru dengan alamat url fan page facebook kamu.

5. Simpan template, Kode di atas di dapatkan dari mybloggertricks.com. Kunjungi juga situs-nya yah :)
Read more »

Menaruh Pesan di Sticky Bar Dengan Tombol Tutup

11:00 AM Hzndi 12 comments


Sudah beberapa hari saya tidak membagikan tutorial tentang blog dan kali ini akan saya bagikan lagi sebuah tutorial untuk menaruh pesan di widget Sticky Bar. Kira-kira bagaimana sih tampilannya ? kamu bisa lihat seperti Gambar di atas dan langsung saja langkah-langkahnya di bawah ini:

1. Masuk ke Blogger.com

2. Klik Rancangan --> Edit HTML --> Cari kode ]]></b:skin> Kemudian kamu salin kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>.

#mbt_bar{
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJGQ2RQ7OnZu6M1xRt-59phar0mW5Gev4MGbGIlFddLt3gzMTDukfNaPS5bWqEiyYCz3LTXonBOGr2sR6IgNIZ40Vm8aokmhrkMxzMax8CEPW3p4blZgnh4Z2OQxlFrG0Ly-lqQY_a6Qc/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#mbt_bar a{
text-decoration:underline;
color:#E2E504;
}
#mbt_bar a:hover{
text-decoration:none;
}
#mbt_bar p {margin:0; list-style:none;}
#mbt_bar img {vertical-align: middle;
      margin-right: 6px;}

3. Kemudian kamu cari lagi kode </head>, setelah itu kamu salin kode javascript di bawah ini dan letakkan yang sudah kamu salin di atas kode </head>.

<script type='text/javascript'>
//<![CDATA[
var mbt_arr = new Array();
var mbt_clear = new Array();
function mbtFloat(mbt) {
mbt_arr[mbt_arr.length] = this;
var mbtpointer = eval(mbt_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt);
this.mbtsrc.height = this.mbtsrc.offsetHeight;
this.mbtheight = this.cmode.clientHeight;
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]);
var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);';
mbtbar = mbtbar;
eval(mbtbar);
}
function mbtGetOffsetY(mbt) {
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop);
var parentOffset = mbt.mbtsrc.offsetParent;
while ( parentOffset != null ) {
mbtTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mbtTotOffset;
}
function mbtFloatInit(mbt) {
mbt.pagetop = mbt.cmode.scrollTop;
mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px";
}
function closeTopAds() {
document.getElementById("mbt_bar").style.visibility = "hidden";
}
//]]>
</script>

4. Kamu cari lagi kode <body>, kamu salin lagi kode di bawah ini dan letakan di bawah kode <body>.

<div id='mbt_bar'> INGIN MENJADI PENULIS TAMU DI BLOG INI ?
<a href='http://hzndi.blogspot.com/2012/06/menjadi-penulis-di-blog-hzndi.html'>KLIK DISINI</a>
<span style='padding:0px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8s2PLNjAZuP69tEDlbnfobv7A4J8_1rvSmfB8rkkX5dHaCXNQowJfN4ouiPpB7gHzQPQtzpShVwsI3vcD1So29lrIGeBIDDp0dJ5PfPg6lAHguLSDgfP9lODxThIPfUeHCGVIpHpPGNo/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>

NOTE :

- Tulisan yang berlatar belakang berwarna kuning kamu ganti dengan kata-kata kamu sendiri.
- Kode yang berwarna biru adalah alamat URL yang bisa kamu taruh, ganti juga kata yng berwarna biru berlatar belakang kuning dengan kata-kata kamu sendiri.

5. Simpan template, Kode di atas di dapatkan dari mybloggertricks.com. Kunjungi juga situs-nya yah :)
Read more »

Twitter Delicious Facebook Digg Stumbleupon Favorites More