Cara Membuat Share Melayang

Tutorial Blogspot - Sebelumnya kita telah membahas tutorial Cara Membuat Komentar Admin Berbeda tetapi berbeda dengan posting kali ini yang lebih menuju ke Share.


Share dalam bahasa indonesia nya adalah berbagi yang berarti berbagi hal apa saja ke siapapun dan widget share sangat berguna di kalangan para blogger,biasanya mereka (Para Blogger) menyuruh share artikel blog mereka ke situs-situs ternama seperti facebook,twitter dan lain-lain hal itu dilakukan agar blog nya para blogger bisa rame karena mendapat backlink dari share yang dilakukan oleh si pembaca.
Untuk demo nya : Mr.Black Hats Informasi
Nb : Perhatikan widget share melayang yang berada disebelah kiri blog.
Untuk cara nya silahkan lihat tutorial dibawah ini.

  • Login ke blogger
  • Klik rancangan
  • Klik tambah gadget
  • Pilih html/java script
  • masukkan kode berikut ke dalamnya :

<!-- Halaman Share Melayang Start bloghats -->
<style>
#pageshare {position:fixed; bottom:35%; margin-left:-111px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Get this from bloghats.blogspot.com">

<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>

<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

<div class='sbutton' id='rt'>

<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>

<div class='sbutton' id='gb'>

<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>

<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</a></div>

<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>

<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>

<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://bloghats.blogspot.com/2011/08/cara-membuat-share-melayang.html">widget</a></div>
</div>
<!-- Halaman Share Melayang End -->

 Nb:Kode yang berwarna merah untuk mengatur posisi tampilan :
Sebagai contoh sobat tentang posisi tampilan sedikit saya jelaskan
Bottom : 35% artinya posisi tampilan nya semakin mendekati ke atas,kesimpulan nya semakin kecil persen nya tersebut posisinya makin kebawah.
sedangkan untuk margin-left : -111px maka tampilan nya akan mepet ke kiri dan semakin kecil nilainya maka posisinya semakin ke kanan tapi tetap masih di posisi kiri.
Jika sobat ingin tampilan nya berada disebelah kanan tinggal ganti saja angka -111px nya menjadi 800px tanpa [-Min].

Jika ada pertanyaan silahkan berkomentar dibawah ini.

Recommended Posts :



4 komentar:

Endri Wijanarko mengatakan...

bagus ni infonya gan, saya coba yaa..., Thanks

Lucky mengatakan...

@ Endri : Silahkan gan :D

Beben Koben mengatakan...

saya update kok, cuman itu postingan marhaban yaa ramadhannya di bikin di atas terus :) ;) :D

Lucky mengatakan...

@ Bang ben : Ohh kituu,woke lah bang ;))

Posting Komentar - Kembali ke Konten

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x(

 

Alexa Site Info