Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Friday, October 18, 2013

widget social media

Widget social media merupakan salah satu andalan blogger meningkatkan trafik pengunjung, cara membuat widget social media pada postingan kali ini sangat simple dan saya rasa para blogger pemula seperti saya inipun dapat memasangnya di halaman blog kesayangannya contohnya, saya saja bisa apalagi anda. Widget social media dengan sentuhan data hint yang dimoifikasi kedalam bentuk tooltip merupakan andalan dari widget social media yang saya posting kali ini. Efect transition menambah kesan elegan pada tampilan widget social media ini. Untuk melihat bagaimana tampilan widget ini silahkan klik demo dibawah dan jangan lupa ditest demonya. Bila anda tertarik dengan widget social media ini silahkan simak penjelasan dibawah ini, langsung saja menuju TKP.

Demo


Install Program CSS

  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Widget social media
By : Rivai Silaban | Blog Design
Update : Jumat, 18 Oktober 2013
******************************************/
.bdrssocial-thumb{
text-align:center;
padding:18px 0 0;
line-height:1;
}.bdrssocial-thumb a{
display:inline-block;
width:47px;
height:46px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1XD4o8AuJ4f1DDY9PEFxbfS72mVJFYbZRmoRVV2dG6-GTUpRPqgo8aDxA7d6I_ap9y-GIAiLzMXjRvacG7zkZ2rK9DuzMgkTEpAHi5amNLM-Sb45RALhQA9CyS8dpJ3tkRgBZjYKaSys/s1600/sosialbd.gif');
opacity:0.7;
margin-right:1px;
border-radius:50%;
}.bdrssocial-thumb a:hover{
opacity:1;
}.bdrssocial-thumb a.facebook{
background-position:0 -47px;
}.bdrssocial-thumb a.googleplus{
background-position:0 -94px;
}.bdrssocial-thumb a.rss{
background-position:0 -141px;
}.bdrssocial-thumb a:before{
margin-left:-6px;
}
[bdrs-count]{position:relative;display:inline-block;text-decoration: none;}
[bdrs-count]:before,[bdrs-count]:after{
position:absolute;
visibility:hidden;
opacity:0;
z-index:1000000;
pointer-events:none;
transition:0.3s ease;
bottom:100%;
left:50%;
}[bdrs-count]:hover:before,[bdrs-count]:hover:after{
visibility:visible;
opacity:1;
transform:translateY(-8px);
}[bdrs-count]:before{
content:'';
position:absolute;
background:transparent;
border:6px solid transparent;
z-index:1000001;
border-top-color:#990000;
margin-bottom:-12px;
}[bdrs-count]:after{
content:attr(bdrs-count);
color:white;
text-shadow:0 -1px 0px black;
padding:8px 10px;
font-size:11px;
line-height:12px;
white-space:nowrap;
box-shadow:4px 4px 8px rgba(0,0,0,0.3);
margin-left:-18px;
background-color: #990000;
font-family: Verdana;
}/*code CSS end */


Install Program Tag HTML

Untuk memanggil widget social media tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini.

  • Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
  • Untuk memasang kode htmlnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.
  • Silahkan pilih " Tata Letak " pada dasbor blog anda.
  • klik "Add gadget " ( Tambahkan gadget )
  • Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
  • Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
  • Edit html , save dan lihat hasilnya, semoga bermanfaat...

<!-- BDRS widget social media code start -->
<div class="bdrssocial-thumb">
<a class="twitter" href="LINK TWITTER " target="_blank" title="twitter" bdrs-count="215,882+ Followers"></a>
<a class="facebook" href="LINK FACEBOOK " target="_blank" title="facebook" bdrs-count="49,540+ Like"></a>
<a class="googleplus" href="LINK GPLUS " target="_blank" title="gplus" bdrs-count="901,540+ Invite"></a>
<a class="rss" href="LINK FEEDBURNER " target="_blank" title="rss" bdrs-count="193,692+ Readers" ></a>
</div>
<!-- BDRS widget social media code end -->

Keterangan Gambar
  • Code warna MERAH ganti dengan link social media anda.
  • Code warna BIRU merupakan hint decimal dari social media, silahkan anda sesuaikan dengan hint social media anda
  • Silahkan anda desain code CSS nya untuk menyesuaikan tampilan Thems halaman blog anda, semoga bermanfaat.

Kesimpulan

Widget social media dengan tampilan elegan dan menarik akan menambah kesan tampilan halaman blog anda semakin berkesan elegan tampa harus memiliki kemahiran luarbiasa untuk mengedit kode kode htmlnya.

Bila teman teman mengalami kesulitan dalam memasang kode widget ini atau mendapatkan kode yang Error, silahkan hubungi saya atau share bersama saya pada form komentar dibawah. Semoga postingan ini bermanfaat buat teman teman.

Widget social media
Jumat, 17 Oktober 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 11:31 AM

8 comments :

  1. nggk ada perubahan pada blog sya kak.?

    ReplyDelete
    Replies
    1. Coba di cek kembali kodenya, baik itu titik, komma atau yang lain, biasanya sering kelupaan, atau pas waktu di copy kodenya tidak sempurna..

      Delete
  2. keren bro, tak coba nanti..., sekalian tanya-tanya...

    ReplyDelete
    Replies
    1. Untuk bertanya, silahkan bro, tapi join dulu sama kita kita biar lebih abdol curhatnya heheheh

      thx atas pendapatnya dan kunjungannya bro...

      Delete
  3. Ijin pake Bang..udah di coba hasilnya mantap..hehehe

    ReplyDelete
  4. html5
    Attribute bdrs-count not allowed on element a at this point.

    ReplyDelete
    Replies
    1. thx atas pendapatnya gan, memang sistem count tidak valid HTML5

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog