TrikDanTutorialBlog

Browse: > > Memasang Floating Share Dengan Jquery

19 Jan 2012

Memasang Floating Share Dengan Jquery





Kali ini Tutorial Blog mau share tentang Cara Memasang Floating Share Dengan Jquery dengan 7 warna background, seperti gambar di bawah ini.

Cara Memasang Floating Share Dengan Jquery

Untuk memasangnya mari kita ikuti tutorial berikut ini :

1.    Login ke Blogger

2.    Pilih tab Design > Edit HTML > beri tanda centang pada Expand Widget Templates

3.    Cari kode </head>

4.    Pilih warna background sesuai selera dan Copy kode di bawah ini dan pastekan tepat di atas kode
</head>










SILVER

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa));background:-moz-linear-gradient(top, #f2f2f2, #aaa);
border:1px solid #808080;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
.addbuttons{clear:both;text-align:center;padding-top:5px;} 
.addbuttons a span.getfloat,.addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:6px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() &gt; offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>
</b:if>










RED

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
background:#C12424;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F54F4F), color-stop(1, #C12424));background:-moz-linear-gradient(top, #F54F4F, #C12424);
border:1px solid #B31919;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
.addbuttons{clear:both;text-align:center;padding-top:5px;} 
.addbuttons a span.getfloat,.addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:6px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() &gt; offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>
</b:if>










BLUE

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
background:#295698;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3980E6), color-stop(1, #295698));background:-moz-linear-gradient(top, #3980E6, #295698);
border:1px solid #1E4A8A;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
.addbuttons{clear:both;text-align:center;padding-top:5px;} 
.addbuttons a span.getfloat,.addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:6px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() &gt; offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>
</b:if>










BLACK

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
background:#333;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #656565), color-stop(1, #333));background:-moz-linear-gradient(top, #656565, #333);
border:1px solid #222;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
.addbuttons{clear:both;text-align:center;padding-top:5px;} 
.addbuttons a span.getfloat,.addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:6px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() &gt; offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>
</b:if>










GREEN

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
background:#80A81C;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #A1D423), color-stop(1, #80A81C));background:-moz-linear-gradient(top, #A1D423, #80A81C);
border:1px solid #739619;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
.addbuttons{clear:both;text-align:center;padding-top:5px;} 
.addbuttons a span.getfloat,.addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:6px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() &gt; offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>
</b:if>











ORANGE

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
background:#C15F24;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F58D4F), color-stop(1, #C15F24));background:-moz-linear-gradient(top, #F58D4F, #C15F24);
border:1px solid #B35319;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
.addbuttons{clear:both;text-align:center;padding-top:5px;} 
.addbuttons a span.getfloat,.addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:6px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() &gt; offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>
</b:if>










YELLOW

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
background:#FFF19D;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF8CA), color-stop(1, #FFF19D));background:-moz-linear-gradient(top, #FFF8CA, #FFF19D);
border:1px solid #F1E7AC;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
.addbuttons{clear:both;text-align:center;padding-top:5px;} 
.addbuttons a span.getfloat,.addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:6px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() &gt; offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>
</b:if>










WHITE

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
background:#F9F9F9;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);
border:1px solid #ccc;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
.addbuttons{clear:both;text-align:center;padding-top:5px;} 
.addbuttons a span.getfloat,.addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:6px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() &gt; offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>
</b:if>


5.    Kemudian cari kode
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
Jika tidak menemukannya cari kode yang ini
    <data:post.body/>

6.    Copy kode di bawah ini dan pastekan di atas kode tadi 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharebox'>
  <div class='wdt'>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Del.icio.us'><img alt='delicious' src='http://lh5.ggpht.com/_So-xppeH7x0/TKfoBd8U24I/AAAAAAAAAYg/tPsrA9WLIek/s800/delicious_icon.jpg' style='border:0px;'/></a>
</div>
<div class='wdt'>
  <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share On Facebook'><img alt='Facebook' src='http://lh4.ggpht.com/_TqPdHmAEwTM/SrXQ3G_uRnI/AAAAAAAAFq0/ktY0xwRy4Oo/fb.gif' style='border:0px;'/></a>

  </div>
<div class='wdt'>
  <a expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumble This'><img alt='Stumble' src='http://lh3.ggpht.com/_So-xppeH7x0/TKfoBaa6TsI/AAAAAAAAAYo/aq2JJqtTJvQ/s800/stumbleupon%20icon.png' style='border:0px;'/></a>


  </div>
  <div class='wdt'> <a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Add To Technorati'><img alt='Technorati' src='http://lh6.ggpht.com/_TqPdHmAEwTM/SrVsIDBoz7I/AAAAAAAAFqw/UpGK_0UQUZg/technorati.gif' style='border:0px;'/></a>

  </div>
  <div class='wdt'> <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg This'><img alt='Digg' src='http://lh4.ggpht.com/_So-xppeH7x0/TKfoBXGvlbI/AAAAAAAAAYk/bwSALZ7aCNY/s800/Digg_icon.png' style='border:0px;'/></a>
  </div>
<div class='addbuttons'><a href='http://trikdantutorialblog.blogspot.com/2011/11/memasang-floating-social-media-share.html' title='Add floating share buttons to your blog!'><span class='getfloat'>Get floating</span><div style='clear:both'/><span class='sharebuttons'>share buttons</span></a> </div>
  </div>
  </b:if>

7.    Setelah selesai simpan template kamu dan lihat hasilnya.

Selamat mencoba, semoga berhasil dan bermanfaat, happy blogging

Tags :


Berlangganan artikel
dari Tutorial Blog

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Tutorial Blog di inbox anda:

TrikDanTutorialBlog

Buy me a cup of Cofee



MyFreeCopyright.com Registered & Protected

Penulis: Tutorial Blog ~ Tutorial Blogger | Free Template | SEO Blogger

TB Artikel Memasang Floating Share Dengan Jquery ini dipublish oleh Tutorial Blog pada tanggal, 19 Jan 2012
Terima kasih Anda telah membaca artikel tentang Memasang Floating Share Dengan Jquery dan Anda bisa menemukan artikel Memasang Floating Share Dengan Jquery ini dengan url http://trikdantutorialblog.blogspot.com/2012/01/memasang-floating-share-dengan-jqurey.html, Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Memasang Floating Share Dengan Jquery ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Memasang Floating Share Dengan Jquery sebagai sumbernya. Semoga artikel ini dapat bermanfaat dan menambah wawasan kita semua. Terima kasih atas kunjungan serta kesediaan Anda membaca dan berkomentar tentang artikel ini

:: Get this widget ! ::

Berikan komentar asal jangan Spam!!
Mohon tidak memasang anchor text link di dalam kotak komentar,
nanti komentar akan saya hapus, terima kasih

4 comments:

  1. pengen juga sig pasang di blog semacan ini sobat, tapi takut membuat loading blog menjadi terganggu sobat....

    BalasHapus
    Balasan

    1. kayaknya ga terlalu berat sob, silahkan dicoba aja,

      Hapus

  2. wah .. widget seperti ini fungsinya untuk apa ya.,??

    jika boleh memberi saran tolong sertakan pula kelebihan dan kekurangan dari trik" yang agan berikan :) ..

    BalasHapus
    Balasan

    1. widget ini berfungsi untuk mempermudah pembaca artikel untuk membagikan artikel yang ada di blog kita, makasih atas sarannya

      Hapus

Langgan: Poskan Komentar (Atom)

Tutorial Blog
Follower