Tutorial Belajar Pemrograman, membuat game, membuat aplikasi, membuat program, android, game maker, yii, php, CSS, HTML, java, javascript, codeigniter, jquery, Pascal, c++

Saturday, March 17, 2012

Membuat Icon Share Melayang Di Samping Blog

Terkadang ketika kita ingin menaikan trafik kita  akan mengshare website kita atau artikel kita, akan tetapi tombol di bawah postingan kurang menarik bagi pengunjung mengshare website atau blog kita. sekarang saya akan menjelaskan bagaimana membuat icon share melayang di samping website.

1. Masuklah terlebih dahulu ke Blog anda
2. Pilih Tata Letak/Rancangan
3. Tambah widget baru yaitu HTML/Javascript.
4. Masukan script berikut ini :

<style>
#floatingbuttons{
 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;
 float:left;
 padding:0 0 3px 0;
 position:fixed;
 bottom:15%;
 left:0;
 z-index:10;
 border-radius:0 5px 5px 0;
 box-shadow:2px 2px 5px rgba(0,0,0,0.3);
 }

#floatingbuttons .floatbutton{
 float:left;
 clear:both;
 margin:5px 4px 0 4px;
 } 
.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:9px;
 font-weight:bold;
 text-decoration:none;
 line-height:11px;
 } 
.addbuttons a:hover span{
 color:#fff;
 background:none;
 text-decoration:underline;
 }
</style>

<div id='floatingbuttons' title="Share this post!">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><!-- Medium Button -->

<script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'>
<fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='floatbutton' id='google+1'>
<g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div>
<div class='floatbutton' id='linkedin'>

<div>
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>

</div>
<br>

<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div>
<div class="addbuttons">
<span class="sharebuttons">share buttons</span></a> </div>
</div>

5. Kemudian pilih Simpan.

Icon Share Melayang Di Samping Blog anda sekarang sudah selesai, baca juga tutorial blogger lainnya.

Terima Kasih Telah Mengunjungi Blog Sederhana Ini.

Di Mohon Apabila Anda Ingin Mengcopas Artikel Pada Blog ini Cantumkan URL Sumber.

Sebagai Pengunjung Yang Baik Anda Dapat Meninggalkan Komentar di Blog Sederhana Ini.

Share this post

8 komentar

  1. kok ga bisa di copy script nya??

    ReplyDelete
  2. bisa gan,,,
    semua huruf yang ada dalam kotak bisa di copy kecuali yang diluar,,,

    ReplyDelete
  3. Lam knal gan. Ditunggu kunjung baliknya ya...
    Coba tombol like & share melayang versi gw gan, tutorial lengkap klik aja nama gw di atas ya: All About...

    ReplyDelete
  4. knpa iconnya di kanan,, bisa dikiri nggk???

    ReplyDelete
  5. Artikel menarik gan,kunjungan baliknya gan
    www.mbahgahol.blogspot.com
    follow aja nnti saya followbalik blog agan

    ReplyDelete

:) :) :-) :-) :)) :)) =)) =)) :( :( :-( :-( :(( :(( :d :d :-d :-d @-) @-) :p :p :o :o :>) :>) (o) (o) [-( [-( :-? :-? (p) (p) :-s :-s (m) (m) 8-) 8-) :-t :-t :-b :-b b-( b-( :-# :-# =p~ =p~ :-$ :-$ (b) (b) (f) (f) x-) x-) (k) (k) (h) (h) (c) (c) cheer cheer

 
© Jin Toples Programming
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0