Pengertian Web Design 8: 10 Cara edit tampilan website agar terlihat lebih keren part 6

10 Cara edit tampilan website agar terlihat lebih keren part 6 – Akhirnya kali ini kita sudah sampai part ke-6 dari artikel dengan judul 10 Cara edit tampilan website agar terlihat lebih keren. Pada part terakhir ini kita sudah masuk kedalam poin terakhir juga atau poin yang ke sepuluh.

Oiya sekedar mengingankan bahwa jika anda belum membaca artikel pada part sebelumnya maka silahkan kunjungi link-link berikut ini.

10 Cara edit tampilan website agar terlihat lebih keren part 1
10 Cara edit tampilan website agar terlihat lebih keren part 2
10 Cara edit tampilan website agar terlihat lebih keren part 3
10 Cara edit tampilan website agar terlihat lebih keren part 4
10 Cara edit tampilan website agar terlihat lebih keren part 5

Langsung saja ini dia poin terakhir cara edit tampilan blog agar terlihat menjadi lebih keren.

10. Menggunakan widget social share melayang
Cara terakhir yang dapat anda lakukan yaitu adalah dengan menggunakan widget social share yang bisa melayang sendiri disebelah kiri blog anda. Selain tujuannya adalah untuk mempercantik tampilan website widget ini juga berguna untuk memperoleh visitor dari sosial media yang di share artikel nya oleh pembaca anda.

Untuk itu anda harus menggunakan teknik memasang widget social share agar jumlah pengunjung anda meningkat dan tampilan website anda menjadi lebih menarik. Langsung saja berikut adalah cara memasang widget-nya.

1. Masuk kedalam blog anda
2. Pilihlah menu Layout, dan lalu klik Add a Gadget, sesuai dengan posisi peletakan widget social share melayang ini.
3. Setelah itu pasti akan muncul jendela popup, maka silahakan anda pilih HTML/JavaScript.
4. Masukkan kode berikut ini.

<style>
#seocipssharebtn {position:fixed; bottom:20%; left:10px; float:left; background-color:#fff;padding:0 0 2px
0;z-index:10;box-shadow:0 2px 2px #666;-webkit-box-shadow:0 2px 2px #666;border-radius:4px;-webkit-border-radius:4px;border: 1px solid #ddd;moz-animation:bawah 7s;-webkit-animation:bawah 7s;animation:bawah 7s;}
#seocipssharebtn .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;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
@media screen and (max-width:480px){#seocipssharebtn{display:none;}}
@-webkit-keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
@keyframes bawah{
from{transform:translate(0px, 2000px)}
to{transform:translate(0px,0px)}
}
</style>
<div id='seocipssharebtn' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></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='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

5. Simpan dan Selesai deh.