Rabu, 04 Maret 2015

Filled Under:

Fanspage Social Terbaru Keren dan Ringan

Memperindah blog terutama blogspot tentu sudah tidak asing lagi bagi sobat blogger, salah satunya yakni menambah widget social Retro. Widget ini akan membuat blog kita makin keren, karena tampil beda dengan widget-widget social network lainnya. Beberapa hari lalu kami juga membuat tutorial Cara Membuat Professional Social Sidebar dan Widget Social Slide Hover Keren, Sobat bisa coba karena selain terlihat profesional juga lumayan ringan.

Seperti yang kita semua sadari fakta bahwa situs Jejaring Sosial memainkan peran penting dalam mengembangkan blog anda terutama untuk menjaring visitor sebanyak-banyaknya, jadi sangatlah penting untuk memiliki widget Follower Sosial yang elegant . Ada beberapa widget sosial yang memiliki fitur yang cukup mengesankan, tapi terlalu berat untuk dimasukkan dalam sebuah blog karena dapat mempengaruhi kecepatan dari sebuah blog. Hari ini di artikel ini, kami akan berbagi Widget Social Retro dengan tampilan lumayan keren.

Sobat bisa lihat di kanan blog yang saya gunakan
Bagaimana sobat, sangat menarik bukan?
Mengapa menggunakan Widget ini untuk Blog Anda?

Selain Ringan widget ini juga dapat membuat blog jadi elegan dgn gaya yang menarik dan membuat pengunjung penasaran untuk mengclicknya dan ini menjadi salah satu keuntungan, karena sedikit tidak mereka akan mengikuti di Jejaring social Anda terutama yakni Google+ | Facebook | Twitter.

Cara Install | Pasang di Blogger?
Ikuti langkah-langkah berikut dengan benar.

Silahkan menuju Blog yang akan ditambahkan Banner

Klik Tata Letak >>Tambah Widget >> HTML/Javasript

Sekarang silahkan Copy dan Paste Kode berikut pada form widget
Beikut kodenya :

<div class='metro-social'>
<li><a class="fb" href="http://www.facebook.com/cerdasshare/" rel="nofollow" target='blank' title='Like Me'></a></li>
<li><a class="tw" href="http://twitter.com/cerdasshare/" rel="nofollow" target='blank' title='Follow Me'></a></li>
<li><a class="gp" href="https://plus.google.com/u/0/101943141618663492666" rel="nofollow" target='blank' title='Follow Me'></a></li>
<li><a class="pi" href="http://www.pinterest.com/cerdasshare" rel="nofollow" rel="nofollow" target='blank' title='Follow Me'></a></li>
<li><a class="in" href="http://www.linkedin.com/pub/hendratno-rian-desta/82/327/88b/" rel="nofollow" rel="nofollow" target='blank' title='Like Me'></a></li>
<li><a class="yt" href="https://www.youtube.com/user/HendratnoRian" rel="nofollow" target='blank' title='Subscribe Channel'></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/cerdasshare" rel="nofollow" target='blank' title='Subscribe'></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFzbVKecVjkz2yFftGX16AQTYpn0009f2vi-dqTOPLWqA7ZrB_YdDiSN3h30YCCfJZ-t4vdXC2jM6EL7iUZQpSfaWKlUKyRM1b6aSY7KjatS8lPdaR5clbznS2R7vjFfe7KoQ6paCNxe0/s1600/fb%601.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifUIjCt-INX2eSY90DDti8bBfbZacgldOloweqQEE6xQ-KIPReEQ6apCx5T-QnmD1OFlnwUhZBkEmpgHsFluvQuPD9fTS63_kT_OJ7I0e5-CVOLgw0L6HyshSN0wuuE-FukV2a5a4NxYY/s1600/tw1.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQq7FnaWZ5T2MVAbeyyu4y3fgBpzcaaq72MebRNblSRji7TBUu9EOj2-LsKJjONMbujCi-XADg7QxIX7DVmLOZTTedW73MRd_lzuYHSqxcpXg4tFIleD9DWyT3amLZWOSJaK3XwacDRtY/s1600/g+1.png) no-repeat center center #da4a38}
.metro-social .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqiCyUG5GfZtHMWQogj3_WWdx6mLFcoSRf4ev9OEqAnFQnlRz-hkTCCPXnrCo1pWeaKi2vRHqTvpXUIFxFZ9AxYHJ_ITx6zprjzr4X6mFHzFwhgupC-rpKhZj9wAaBj9uSX3P6NImlt9o/s1600/pin1.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6bUgFA6m3QOEGbfEGXcSbX9F2Cekqp2L1PR8_xfdDUa2k3j-KadUbASZSL2gMPLSok2HEgUgwB8a27GhC016tp1xgs-YtI3l15DTR7Q9A6QZyLFoW5ElUcwTAAeEiLbThTXnRN5HUYdY/s1600/Lin1.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIL3mr7BTh6pSnQA3nDoFhT7AF3AxMDNFc9Demoorwqj7xvNT6YlB51qeL50jsOtKAHBlqwQZzSCdmq-s-wckNMIEFGCqSA1nHkutK4e0l1m0AMcWe38ddwg_CxLbB6HMYXgDUGqLkW8U/s1600/YT1.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJHnGqSj49gPxoqfo45UqOspueMZfISzauLCDoZyJrtcUx2aC2E6WLrFWjRzYsIELgD_JiCgo38LCU3MKQljDuz1_gdA51sCxb7ZgZwbkIrxipPl-NQ98NIWfLEPJQPiNLSdTet4B9i10/s1600/feed1.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQfNXU60F3VxxEZuXdTrRB2tshnWh3KDk59mHRPt_I_eedOR5lN40_HZP97mBgXkPZLtJtbxogUa4rruCP21RW-KJg3O8DvQMfmHCcximqehyphenhyphenXudnPQWXN9auESLVN7Xgwk5uW0v3Th3E/s1600/fb2.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgat12Dm1kuPnYeLFCnpBt4Nv8WmWdsam1Gh21bJQJ_51SMYMJR0vJ37opf12gduP-DaMxlGy5lZ_k1t_38kV0HzjmmJo0NKVVpiTNFa-JKAguk0FcSMKG4QIM8qmJ0aOL61yutmpiruT4/s1600/tw2.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrstXJT8J1I341raMEXYRippNu_UVUJTc1t_lUWLYNUwLHp9Amc81HGhnCPLJiKl93ngulSJo1hqUrA1lSaB5CdRFpJ0Z9Kx4nDVKsBhQL-aBvTcLR3FQDtF1p_3agSNEV4nR0QYi3MMM/s1600/g+2.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfjG_WDdoIW68BKNXjnDMGob6cwalUDAJbK4q3V748GdqUT1U6wZ2WHkiegcMXPTQIFoC6y5xwW9C_Vwdw2WFkVSFz0iVr5ub0FWMozmli0sAi-29fQ-HgtTv-sq6aEdQ6Dp5srl9Koz4/s1600/pi2.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYMBvHkdTaTo0XFyNYVIDpPKwwvml6-j-lfSVQvk5mavrnfFIlX0PZTCfSJgvQLnhhn0N7z_rlZjfOf1mdagAPH2UYi60-nSO-BVZXAXFZwhp6OkzZiJ8wESrvroJeqrho7LiLKNTZAN8/s1600/Lin2.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2tkK5Vm_Z6UhYHGhWKBTKJGN933xkB2N2rBkvibv2M-9V7a0bNCy7syKi37OZigFuYK8VWqrq-_1nWz-05Wx9d1wh-UybCaoh6d1ii_UJhf3wXE8O4Fv4Qy66566FhngBfNH8RBGf3I/s1600/yt2.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYVdMcu-B66k8ewv79Bx_mKW7SY7dydGRcAw3s0WsJ6k5gR9MkJoMTGaS2cwuTI-C37zrWHRZ0un-d3jMr322JdUKlsJj4Qmrec50zH0JcmUy4-HBBh49yCmBUSSMmTPrqAhz3XRktADE/s1600/feed2.png) no-repeat center center #e9a01c}
</style>

Keterangan | Silahkan Ganti  : 
http://www.facebook.com/ceddasshare dengan Fanpage Fb masing-masing
http://twitter.com/cerdasshare dengan Id Twitter masing-masing
https://plus.google.com/+cerdasshare dengan Id Gplus masing-masing
http://www.pinterest.com/cerdasshare dengan Id Pinterest masing-masing
http://www.linkedin.com/pub/hendratno-rian-desta/82/327/88b dengan Id Linkedin anda.
http://www.youtube.com/HendratnoRian dengan Channel/saluran Youtube masing-masing
http://feeds.feedburner.com/cerdasshare dengan Id Feedburner masing-masing

Selamat Mencoba, jangan lupa komentar




0 komentar:

Posting Komentar