PROFESIONAL SOCIAL SIDEBAR WIDGET UNTUK BLOGSPOT

Home » Blogspot » Tutorial Blog » Widget Blogger » Widget Blogger Terbaik » Widget dan Plugin » PROFESIONAL SOCIAL SIDEBAR WIDGET UNTUK BLOGSPOT

PROFESIONAL SOCIAL SIDEBAR WIDGET UNTUK BLOGSPOT

0 comments

Mungkin sebagian dari kita pernah berfikir bahwa Blogspot memiliki nilai kurang daripada Blog Wordpress Self Hosting terutama dalam penggunaan berbagai Widget, yang mana dalam Wordpress telah disediakan berbagai macam Plugin Widget yang bisa dengan mudah untuk dinstall, namun itu tidak sepenuhnya benar, Blogspot berjalan hidup dalam nuansa dan cara yang berbeda.

Blogspot menjadi semakin fleksibel dengan hadirnya para Blogger Expert yang notabene begitu mencintai Platform Blogspot, dengan berbagai cara antara pengetahuan dan pengalaman terciptalah berbagai macam Widget-widget Blogspot yang dengan mudah bisa kita terapkan hanya dengan menyisipkan potongan script / kode Widget dalam Sidebar atau dibagian-bagian tertentu yang dikehendaki.

Widget Blogger Lainnya : 3 Varian Widget Halaman Sitemap Blogspot

Sehubungan dengan paragraf diatas, pada artikel ini Zbtop.info akan sharing sebuah Widget Blogger yang oleh sang empu diberi nama Professional Social Sidebar Widget untuk Blogspot, Social Widget yang menarik dan bisa menjadi wajib untuk di sematkan pada Blog sobat, selanjutnya sampeyan akan melihat bahwa beberapa jejaring sosial sobat telah terkoneksi dengan Blog.

PROFESIONAL SOCIAL SIDEBAR WIDGET UNTUK BLOGSPOT

Bagaimana cara menerapkan Professional Social Sidebar Widget di Blog Blogspot? ikuti panduannya dalam tabs berikut ini.

Pertama pastikan sobat telah berada pada Dassboard blogspot
Selanjutnya klik menu Layout / Tata Letak disebelah kiri Dassboard Blogspot
Dalam tampilan menu layout silahkan klik Add Gadget
Pada Pop up Browser yang muncul, cari dan pilih HTML/Javascript
Copy dan Paste Script atau Kode yang telah disediakan dalam tabs Script/Code pada kotak kosong dari HTML/Javascript (pada point 4)
Save template dan lihat hasilnya

DEMO

Copy dan Paste Kode Widget dibawah dan Jangan lupa untuk mengganti url yang berwarna merah dengan url / id jejaring sosial milik sobat

<div id='social-sidebar'>

   <ul>

    <li>

     <a class='entypo-twitter' href='https://twitter.com/id sobat' target='_blank'>

      <span>Twitter</span>

     </a>

    </li>

    <li>

     <a class='entypo-gplus' href='http://dribbble.com/id sobat' target='_blank'>

      <span>google+</span>

     </a>

    </li>

    <li>

     <a class='entypo-tumblr' href='http://www.tumblr.com/id sobat' target='_blank'>

      <span>tumblr</span>

     </a>

    </li>

<li>

     <a class='entypo-facebook' href='http://www.facebook.com/id sobat' target='_blank'>

      <span>facebook</span>

     </a>

    </li>

        <li>

     <a class='entypo-rss' href='http://feeds.feedburner.com/id sobat' target='_blank'>

      <span>feedburner</span>

     </a>

    </li>

   </ul>

  </div>

<style type='text/css'>

/*<![CDATA[*/

@charset "utf-8";

/* CSS Document */

/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://www.digitalhubinc.com/---------- */

/* ---------- http://weloveiconfonts.com/ ---------- */

@import url(http://weloveiconfonts.com/api/?family=entypo);

[class*="entypo-"]:before {

 font-family: 'entypo', sans-serif;

}

/* ---------- GENERAL ---------- */

#social-sidebar a { text-decoration: none; }

#social-sidebar ul {

 list-style: none;

 margin: 0;

 padding: 0;

}

/* ---------- Social Sidebar ---------- */

#social-sidebar {

 left: 0;

 margin-top: -75px; /* (li * a:width) / -2 */

 position: fixed;

 top: 50%;

}

#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }

#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }

#social-sidebar ul li a {

 background: #121212;

 color: #fff;

 display: block;

 height: 50px;

 font-size: 18px;

 line-height: 50px;

 position: relative;

 text-align: center;

 width: 50px;

}

#social-sidebar ul li a:hover span {

 left: 130%;

 opacity: 1;

}

#social-sidebar ul li a span {

 border-radius: 3px;

 line-height: 24px;

 left: -100%;

 margin-top: -16px;

 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

 filter: alpha(opacity=0);

 opacity: 0;

 padding: 4px 8px;

 position: absolute;

 -webkit-transition: opacity .3s, left .4s;

 -moz-transition: opacity .3s, left .4s;

 -ms-transition: opacity .3s, left .4s;

 -o-transition: opacity .3s, left .4s;

 transition: opacity .3s, left .4s;

 top: 50%;

 z-index: -1;

}

#social-sidebar ul li a span:before {

 content: "";

 display: block;

 height: 8px;

 left: -4px;

 margin-top: -4px;

 position: absolute;

 top: 50%;

 -webkit-transform: rotate(45deg);

 -moz-transform: rotate(45deg);

 -ms-transform: rotate(45deg);

 -o-transform: rotate(45deg);

 transform: rotate(45deg);

 width: 8px;

 z-index: -2;

}

#social-sidebar ul li a[class*="twitter"]:hover,

#social-sidebar ul li a[class*="twitter"] span,

#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }

#social-sidebar ul li a[class*="gplus"]:hover,

#social-sidebar ul li a[class*="gplus"] span,

#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }

#social-sidebar ul li a[class*="tumblr"]:hover,

#social-sidebar ul li a[class*="tumblr"] span,

#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }

#social-sidebar ul li a[class*="facebook"]:hover,

#social-sidebar ul li a[class*="facebook"] span,

#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }

#social-sidebar ul li a[class*="rss"]:hover,

#social-sidebar ul li a[class*="rss"] span,

#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }

/*]]>*/

</style>

ZBTOP INFO

PROFESIONAL SOCIAL SIDEBAR WIDGET UNTUK BLOGSPOT

MEMASANG PROFESIONAL SOCIAL SIDEBAR WIDGET UNTUK BLOGSPOT

TUTORIAL WIDGET BLOG 2014

Related Post:

0 comments:

Posting Komentar

PROFESIONAL SOCIAL SIDEBAR WIDGET UNTUK BLOGSPOT