Home » » Cara Memasang Media Sosial Book Marking di Blog dengan Mudah

Cara Memasang Media Sosial Book Marking di Blog dengan Mudah

Written By Sahilluqman on Kamis, 04 Juni 2015 | 02.04

media sosial
Sobat. Salah satu cara agar blog kita bisa dikenal orang lain adalah menggnakan bantuan"media social book marking".

Dengan memanfaatkan media sosial tersebut, kita bisa langsung memberikan update informasi artikel terbaru kepada rekan-rekan pembaca dengan mudah.

Seperti halnya pada blog ini, di atas header terdapat media sosial pada bagian sidebar bagian kanan. Dengan begitu, komunikasi antara admin dengan pembaca setia akan terjaga dan terjalin dengan baik. Keren kan?

Salah satu tip desain blogger dalam memasang media social book marking adalah di atas header dan di bagian sidebar blog. Berikut cara mudah memasang media sosial di sidebar blog.

1. Masuk akun blogger
2. Pilih layout (tata letak) > widget > HTML/JacaScript
3. Copas kode di bawah ini:
<!-- SOCIAL PROFILE END -->
<div class='widget-content'>
<style>
#socialwidget {width: 300px;margin:10px 1px 10px 1px;}
    .TZ-social{padding:0 5px 15px;}
    .TZ-social img:hover{opacity:0.8}
    .googleplus {background: #ffffff;border-top: 1px solid white;border-bottom: 1px solid #ebebeb;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
    .TZ {background: #ffffff;border-top: 1px solid white;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
    .TZ span {color: #000;font-size: 11px;position: absolute;margin: -12px 100px;width: 310px;}
    #widgetbox .author-credit a {font-size: 10px;font-size: 10px;letter-spacing: 1px;color: #1E598E;text-decoration: none;}
    .TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
    .TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
    </style>
    <div id='socialwidget'>
    <div class='TZ-social'>
    <!-- social ico -->
    <center>
    <a href='https://www.facebook.com/pages/Membangun-Peradaban-Bangsa/762695560467693' rel='nofollow' style='margin-right: 15px;' target='_blank'>
    <img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9pETZWC-7Dd8BYxfl1sJIi0Trbkzct8W2LFsDs0FRUE15QjYhewXB69DlSpjaXs5T1rqASX-xOZCBCpM_TTX0rDBkDpI1n66T3rXqCGNooDv426TwRvtxjFfYEwxtKfhNjdQBzmNNXz8/s1600/facebook.png'/></a>
    <a href='http://twitter.com/sahilluqman' rel='nofollow' style='margin-right: 12px;' target='_blank'>
    <img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4t5YREqEFkZOXMgxoTtiDTQsCPqLGu8DVC7IVqNYfSAvp1Mec1au4x6QZKjdmI3g1t028lJ0j6fFsefjlL3V-GWkK4mpYQLYfz3YyoUIUHaBVxiioTN3jkADuETfIRhYmSVymTNzJcuA/s1600/twitter.png'/></a>
    <a href='https://plus.google.com/u/0/102411564198767664080' rel='me' style='margin-right: 12px;' target='_blank'>
    <img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0kclYM6UWkSy3uesTXbY5Gt5JFd0mOiU4eAQhsJF7V4ljCtfZ830txxQZHOgLxVHhgimYYSpo7WuGE1q0P2K0WsHYe7JozGfF8eX0xkGdQyZUaU-Hay152IR5gFdJqAeBeCQor7xoxSA/s1600/gplus.png'/></a>
    <a href='http://www.pinterest.com/sahilluqman' style='margin-right: 12px;' target='_blank'>
    <img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_18tsXXW42BhwH1kk4N4T1lt5khLnlZD4bnyeAJRi685gsjm0PwClTB2V3th9YwyAa9FFFvLKTZ9kOv2ZhBdnE5PmHSXcvl-T2j3Lr35aSbCPymJc9UrFIewSAP1lB5aPWD_5I2e-R2s/s1600/pinterest.png'/></a>
    <a href='http://feeds.feedburner.com/blogspot/ygynf' rel='nofollow' style='margin-right: 12px;' target='_blank'>
    <img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv8MBKsK-Kj0alg01-lsU3oAtQvKW2G-pRmThyphenhyphenFGKCpXevRj5WMiocPLOt1TUjS9i-EryR6ZPKOFwLQ72WP__jfH15B8QCQuWkH_0Iae8zIypUgdbAy3zo6hD-RZqWQ0uPTzfTRh4V568/s1600/rss.png'/></a>
    <a href='http://www.linkedin.com/in/' rel='nofollow' style='margin-right: 12px;' target='_blank'>
    <img alt='Linkedin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkEMmzxUvEe9iLxe2QP4l98wd2me0Q1S76dDPOyKOSX0IlTdcVvitWcSmxoXwbGLJfCY9uEz4ywQfMLMvkNjtdG1LcDZ1Rgc3Fx8loEKA9w8nRbKeTHK244BtMSkF09rHtSWxnF1Yu5r4/s1600/linkedin.png'/></a>
    </center>
    </div>
    </div>
</div>
<!-- SOCIAL PROFILE END -->
4. Save

Keterangan:
- Ganti kode berwarna merah di atas dengan ID sobat masing-masing.
Life Demo 1
Life Demo 2 

Demikian tips desain blogspot kali ini. Semoga menambah kualitas blog sobat. Salam.
(http://forumblogindo.blogspot.com).*

0 komentar:

Posting Komentar