Oct 31, 2016

Cara Memasang Widget Sosial Media Responsive di Blog

Fenomena perkembangan dan kemajuan era digital sekarang ini banyak bermunculan Sosial media di internet. Sosial media yang ada banyak jenis, fungsi dan ragamnya. Dari yang mulai hanya sekedar berbagi foto, tempat diskusi, hanya upload foto, forum-forum, sampai dengan yang hanya khusus sosial media mencari jodoh.

Namun tahukah kita manfaat sosial media bagi peningkatan trafik di blog atau website kita, dan fungsi informasi yang sangat berguna bagi perkembangan dan kemajuan web atau blog di mata Search Engine guna untuk perayapan, search engine sangat menyukai link yang inbond dan outbound yang berasal dari sosial media, tentunya meningkatkan serp rank bagi web atau blog kita.

Cara Memasang Widget Sosial Media Responsive di Blog

Nah disini saya akan bahas bagaimana Cara Memasang Widget Sosial Media Responsive di Blog jika ada pengunjung yang tertarik dengan artikel kita mereka bisa berbagi atau sharing di sosial media. 
Pertama sobat 
  1. login ke blog kemudian 
  2. Pilih template lalu Edit Html. 
  3. Sobat search atau bisa menggunakan control F dan input cari kode ]]></b:skin> atau </style> 
  4. Setelah ketemu sobat copy Script dibawah ini tepat di atas kode  ]]></b:skin> atau </style> 

* # Responsive Images/Videos
=========================== */
img.scale-image, .scale-image img  { max-width: 100%; height: auto; }
.video-scale { position: relative; padding-bottom: 56.25%;     padding-top: 30px; height: 0; overflow: hidden; }
.video-scale iframe, .video-scale object, .video-scale embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* Responsive Tables (Thanks http://css-tricks.com/responsive-data-tables/)
=============================================*/
table { width: 100%; border-collapse: collapse; }
tr:nth-of-type(odd) {  background: #f5f5f5; }
th { background: #999; color: #fff; font-weight: 700; }
td, th { padding: 3px; border: 1px solid #ccc; text-align: left; }
td { font-weight: normal; }
.idc-social {width: 100%; float: left;  margin: 0; padding: 1em 0; }
.idc-social ul { margin: 0;  padding: 0;  }
.idc-social ul li {  list-style:none; list-style-type: none;   padding: 0; text-transform: none; margin:0; float: left; display: inline-block; width: 20%; }
.idc-social ul li a { font-size:80%;  color: #fff;   display:block;  }
.idc-social ul li a:hover {  color: #f0f0f0;  background-color: #999; text-decoration: none;   }
.idc-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 15px; padding: 10px 50px; }
.idc-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 10px 50px;}
.idc-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 10px 50px; }
.idc-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 10px 50px; }
.idc-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 10px 50px; }
-->   
5. Pilih Simpan / save untuk memastikan bahwa script tersebut benar diletakkan dan tidak error

Untuk meletakkan posisi Sosial media di blog sobat bis di taruh di atas artikel atau di manapun yang menurut sobat pantas dilihatnya, atau jika ingin menggunakan widget bawaan bisa masuk ke Klik "Layout" > "Add a Gadget" > pilih "HTML/JavaScript" untuk Judul kosongkan saja. Kemudian Copas kode script berikut 
<div class="idc-social">
<ul>
<li><a class="rss" href="http://www.dibalikseo.com/feeds/posts/default?alt=rss">Subscribe our Feed</a></li>
<li><a class="twitter" href="https://twitter.com/dibalikrenungan">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/dbalikcom">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/u/0/111632413681186402712">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/ade-godel-3ab772130">Connect with LinkedIn</a></li>
</ul>
</div> 
Ganti Kode yang berwarna Merah dengan link yang Sobat punya sesuaikan, setelah itu pilih Save.

Jika sudah selesai sobat bisa atur penempatannya dimana saja, banyak para pakar SEO yang menyarankan memasang Script Sosial media tersebut, selain untuk mempermudah pengunjung shared artikel kita, juga dapat membantu blog sebagai backlink, tentunya sobat pasti sudah mengetahui manfaat backlink bagi peningkatan Blog kita, selamat mencoba jika ada sobat yang ingin menambahkan boleh, siapa tau ada yang lebih bagus untuk tampilan Script Media sosial tersebut.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.