April 28, 2014

Widget Media Sosial Keren untuk Blogspot

April 28, 2014

Cara Memasang Link Icon Widget Media Sosial Keren untuk Blog Blogspot di Sidebar dan Bawah Postingan.

YANG CB maksud dengan Widget Media Sosial Keren untuk Blogspot adalah widget yang seperti CB pasang di bawah Related Posts.

Kita juga bisa memasang widget Facebook, Twitter, Google Plus, dan RSS Feedburner ini di Sidebar blog.

Berikut ini Widget Media Sosial Keren untuk Blog dengan desain tampilan seperti di bawah ini.

Widget Share Sosial Media Keren untuk Blogspot

CB dapatkan Widget Media Sosial Keren untuk Blogspot ini dari Atoz Buzz. Kodenya lalu di-parse di Blog Crowds dan disimpan di bawah kode Related Posts.

Cara Pasang di Sidebar:

1. Klik "Layout" > Klik "Add a Gadget".
2. Pilih "HTML/JavaScript"
3. Copy + Paste kode berikut ini di bagian "Content"

<style> .touchme a { display:block; height:50px; width:50px; padding:0 4px; float:left; background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat; -webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all; -o-transition: ease-in 0.2s all; -ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all; cursor:pointer; } .touchme a.googleplus { background-position: 0px -58px; } .touchme a.googleplus:hover { background-position: 0px 0px; } .touchme a.twitter { background-position: 0px -290px; } .touchme a.twitter:hover { background-position: 0px -232px; } .touchme a.facebook { background-position: 0px -406px; } .touchme a.facebook:hover { background-position: 0px -348px; } .touchme a.rss { background-position: 0px -174px; } .touchme a.rss:hover { background-position: 0px -116px; } </style> <p style="display:none;">Social Media Sharing by <a href="http://contohblognih.blogspot.com">CB Bloggerz</a></p> <div class='touchme'>
<!--RSS--> <a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>
<!--Google Plus--> <a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='nofollow' target='_blank'></a>
<!--Facebook--> <a class='facebook' href="YOUR FACEBOOK LINK" rel='nofollow' target='_blank'></a>
<!-- Twitter --> <a class='twitter' href="YOUR TWITTER LINK" rel='nofollow' target='_blank' ></a> </div>

Jangan lupa, ganti/ubah tulisan berwarna merah!

Cara Pasang Link Media Sosial di Bawah Posting Blog

1. Klik "Template" > "Edit HTML".
2. Cari (Ctrl+F) kode <data:post.body/>
3. Copy + Paste kode berikut ini di bawah <data:post.body/> tadi.


&lt;b:if cond=&#039;data:blog.pageType == &quot;item&quot;&#039;&gt;
&lt;style&gt; .touchme a { display:block; height:50px; width:50px; padding:0 4px; float:left; background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat; -webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all; -o-transition: ease-in 0.2s all; -ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all; cursor:pointer; } .touchme a.googleplus { background-position: 0px -58px; } .touchme a.googleplus:hover { background-position: 0px 0px; } .touchme a.twitter { background-position: 0px -290px; } .touchme a.twitter:hover { background-position: 0px -232px; } .touchme a.facebook { background-position: 0px -406px; } .touchme a.facebook:hover { background-position: 0px -348px; } .touchme a.rss { background-position: 0px -174px; } .touchme a.rss:hover { background-position: 0px -116px; } &lt;/style&gt; &lt;p style=&quot;display:none;&quot;&gt;Social Media Sharing by &lt;a href=&quot;http://contohblognih.blogspot.com&quot;&gt;CB Bloggerz&lt;/a&gt;&lt;/p&gt; &lt;div class=&#039;touchme&#039;&gt;
&lt;!--RSS--&gt; &lt;a class=&#039;rss&#039; href=&quot;YOUR RSS LINK&quot; rel=&#039;external nofollow&#039; target=&#039;_blank&#039;&gt;&lt;/a&gt;
&lt;!--Google Plus--&gt; &lt;a class=&#039;googleplus&#039; href=&quot;YOUR GOOGLE PROFILE LINK&quot; rel=&#039;nofollow&#039; target=&#039;_blank&#039;&gt;&lt;/a&gt;
&lt;!--Facebook--&gt; &lt;a class=&#039;facebook&#039; href=&quot;YOUR FACEBOOK LINK&quot; rel=&#039;nofollow&#039; target=&#039;_blank&#039;&gt;&lt;/a&gt;
&lt;!-- Twitter --&gt; &lt;a class=&#039;twitter&#039; href=&quot;YOUR TWITTER LINK&quot; rel=&#039;nofollow&#039; target=&#039;_blank&#039; &gt;&lt;/a&gt; &lt;/div&gt;
&lt;/b:if&gt;

Jangan lupa, ganti/ubah tulisan berwarna merah!

Alternatif: Vertical Style

Widget Media Sosial keren lainnya seperti berikut ini

Ini kodenya. Silakan pasang/copas dengan lebih dulu mengubah link media sosialnya (warna merah) dengan "kepunyaan" Anda ^_^.

<style>
#abt{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#abt a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#abt li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#abt .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh6.googleusercontent.com/-O_eNfqyGbXY/Ua7QecE1aiI/AAAAAAAAA_M/CyeEAD56u1M/w35-h158-no/facebook+and+google%252B+.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#abt li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#abt .icon{overflow:hidden; color:#fafafa;}
#abt .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#abt .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#abt .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#abt .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#abt .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#abt li:hover .icon,
.touch #abt li .icon{width:210px;}
.touch #abt li .facebook, #abt li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #abt li .twitter, #abt li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #abt li .googleplus, #abt li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #abt li .pinterest, #abt li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #abt li .rss, #abt li:hover .rss{background-color:rgba(255,102,0,1);}
</style><a href="http://contohblognih.blogspot.com" style="font-size:0pt">CB Blogger</a><ul id="abt">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/cbblogger" target="blank">Follow us on Facebook</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/106869251529186655236/posts" target="blank">Follow us on Google+</a></li>
<li data-alt="Follow us on twitter"><a class="icon twitter" href="https://twitter.com/contohblog/" target="blank">Follow us on Twitter</a></li>
<li data-alt="Subscribe via RSS"><a class="icon rss" href="http://feeds.feedburner.com/contohblognih" target="blank">Subscribe via RSS</a></li>
</ul>

Cara pasangnya juga sama, namun karena bentuknya list vertikal, sebaiknya dipasang di Sidebar atau di About seperti punya CB.

Cara Lain Pasang Widget Media Sosial di Blogger

Jika cara di atas tidak jalan, karena link kode atau gambarnya broken, masih banyak alternatif lainnya. Di antaranya desain tampilan link/icon media sosial untuk di sidebar blog sebagai berikut

Widget Media Sosial

Cara Pasang:
Cara memasangnya sangat mudah.
1. Klik Layout > Add a Gadget > pilih HTML/Javascript
2. Copas kode HTML berikut ini:

<style>
.widget_social_apps{margin-left:-.5%;margin-right:-.5%}.widget_social_apps:before,.widget_social_apps:after{content:&quot; &quot;;display:table}.widget_social_apps:after{clear:both}.widget_social_apps .app_social{margin:0 .5% .5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.widget_social_apps .app_social.facebook{background-color:#3e64ad}.widget_social_apps .app_social.twitter{background-color:#58ccff}.widget_social_apps .app_social.pinterest{background-color:#de010d}.widget_social_apps .app_social.instagram{background-color:#125688}.widget_social_apps .app_social.google{background-color:#dd4b39}.widget_social_apps .app_social.linkedin{background-color:#007bb6}.widget_social_apps .app_social.flickr{background-color:#ff0084}.widget_social_apps .app_social.vine{background-color:#00bf8f}.widget_social_apps .app_social:hover{background-color:#111}.widget_social_apps .app_social a{display:block;color:#fff;padding:15px 5px}.widget_social_apps .app_social span{display:block}.widget_social_apps .app_social span.app_icon i{font-size:24px;margin-bottom:5px}.widget_social_apps .app_social span.app_count{font-weight:700;line-height:16px}.widget_social_apps .app_social span.app_type{font-size:14px;line-height:16px}
</style><div class="widget_social_apps">
<div class="app_social facebook">
<a href="https://www.facebook.com/" target="_blank">
<span class="app_icon"><i class="fa fa-facebook"></i></span>
<span class="app_count">7845</span> <span class="app_type">Fans</span> </a></div>
<div class="app_social twitter">
<a href="https://www.twitter.com/" target="_blank">
<span class="app_icon"><i class="fa fa-twitter"></i></span>
<span class="app_count">32</span>
<span class="app_type">Followers</span>
</a></div>
<div class="app_social pinterest">
<a href="https://www.pinterest.com/" target="_blank">
<span class="app_icon"><i class="fa fa-pinterest"></i></span>
<span class="app_count">4774</span> <span class="app_type">People</span> </a></div>
<div class="app_social instagram">
<a href="https://www.instagram.com/" target="_blank">
<span class="app_icon"><i class="fa fa-instagram"></i></span>
<span class="app_count">65684</span> <span class="app_type">Followers</span> </a></div>
<div class="app_social google">
<a href="https://www.plus.google.com/" target="_blank">
<span class="app_icon"><i class="fa fa-google-plus"></i></span>
<span class="app_count">65684</span> <span class="app_type">People</span> </a></div>
<div class="app_social linkedin">
<a href="https://www.linkedin.com/in/" target="_blank">
<span class="app_icon"><i class="fa fa-linkedin"></i></span>
<span class="app_count">65684</span> <span class="app_type">Fans</span> </a></div>
<div class="app_social flickr">
<a href="https://www.flickr.com/" target="_blank">
<span class="app_icon"><i class="fa fa-flickr"></i></span>
<span class="app_count">44</span>
<span class="app_type">Followers</span>
</a></div>
<div class="app_social vine">
<a href="https://www.vine.com/" target="_blank">
<span class="app_icon"><i class="fa fa-vine"></i></span> <span class="app_count">574</span> <span class="app_type">People</span> </a></div>
</div>

3. Ganti link media sosial warna merah dengan link akun medsos Anda.

Save widget!

Fungsi Widget Media Sosial di Blog

Untuk apa pasang widget link media sosial di blog? Jawabnya: Media Sosial dan Blog itu saling mendukung.

Trafik blog bisa meningkat karena kita share atau di-share pengunjung. Sebaliknya, follower dan "liker" akun media sosial juga bisa bertambah dengan cara memasang link sosial media kita di blog. Simbiosis mutualisme gitu kali ya... :)

Baca Juga: Cara Share Otomatis Posting Blog ke Sosmed.

Demikian cara pasang Widget Media Sosial Keren untuk Blog. Good Luck and Happy Blogging! (www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

27 comments on Widget Media Sosial Keren untuk Blogspot

  1. alhamdulillah.. tutorial yg satu ini juga berhasil di blog saya..

    blog saya -> http://TektenaTokoOnline.blogspot.com/

    ReplyDelete
  2. mas saya gak bisa bikin tulisan Please FOLLOW and JOIN to get update! rata kanan, caranya gimana ya

    ReplyDelete
  3. makasih ttorialnya bermnfaat, slm kenal.

    ReplyDelete
  4. makasih agan CB, hasilnya memuaskan

    ReplyDelete
  5. terima kasih tutorialnya.. dan sudah terpasangndi
    http://situsfotoz.blogspot.com

    ReplyDelete
  6. mau menambahkan Instagram gimana caranya.?

    ReplyDelete
  7. ijin praktek, keren banget

    ReplyDelete
  8. Kalau lebih dari 1 gimana min??

    ReplyDelete
  9. Ini kayak di Template New Johny Wuzz V3 kan min????
    Ngurangin SEO nggak kalau bikin di blog?

    ReplyDelete
  10. oke, terimakasih atas infonya gan.

    ReplyDelete
  11. oke, terimakasih atas informasinya gan..

    ReplyDelete
  12. cara menambahkan Instagram gmna caranya ya...
    help.

    ReplyDelete
  13. Terima kasih banyak :)

    ReplyDelete
  14. yang vertical keren bos CB, izin sedot..

    ReplyDelete
  15. Saya ijin coba ya gan.. Ane pengunjung langganan lho di CB :D

    Seneng bgt sayanya klo mau dikunjungin balik sma agan CB . Makasih

    ReplyDelete
  16. kak kalau mau masukin instagram gimana yaa?

    ReplyDelete
    Replies
    1. gambarnya harus diganti dengan yang ada instagram

      Delete
  17. This comment has been removed by a blog administrator.

    ReplyDelete
  18. Mas agar data countnya sesuai dengan yang kita miliki bagaimana?

    ReplyDelete
    Replies
    1. Sesuaikan dengan data real di bagian kode app_count

      Delete
  19. Thx shobt sangat membantu...

    ReplyDelete

Contact Form

Name

Email *

Message *