widget yang seperti BS pasang di bawah Related Posts. Kita juga bisa memasang widget RSS Feedburner,Google Plus,Facebook, Twitter, dan ini di Sidebar blog.
BS 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>
<!--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 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.
<b:if cond='data:blog.pageType == "item"'>
<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>
</b:if>
<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>
</b:if>
Jangan lupa, ganti/ubah tulisan berwarna merah!
Alternatif: Vertical Style
Widget Media Sosial keren lainnya seperti berikut ini
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_Uyu0hnLnq2v3wBguoPb27NYyHzPZAqt9sHKPX8xgbw-ntwETzpoEkOKQpx1L4l3FJ46I_Va5YogROjCm-HF_CR6Fen50mv23_bg1VXI-ww-tX3zGzGpICa43UImYG5rssmRqae6FdU/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://blogosmile.blogspot.com/" style="font-size:0pt">BS Blogger</a><ul id="abt">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/blogosmile" 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/blogosmile/" target="blank">Follow us on Twitter</a></li>
<li data-alt="Subscribe via RSS"><a class="icon rss" href="http://feeds.feedburner.com/blogosmile" target="blank">Subscribe via RSS</a></li>
</ul>
#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_Uyu0hnLnq2v3wBguoPb27NYyHzPZAqt9sHKPX8xgbw-ntwETzpoEkOKQpx1L4l3FJ46I_Va5YogROjCm-HF_CR6Fen50mv23_bg1VXI-ww-tX3zGzGpICa43UImYG5rssmRqae6FdU/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://blogosmile.blogspot.com/" style="font-size:0pt">BS Blogger</a><ul id="abt">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/blogosmile" 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/blogosmile/" target="blank">Follow us on Twitter</a></li>
<li data-alt="Subscribe via RSS"><a class="icon rss" href="http://feeds.feedburner.com/blogosmile" 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 BS.
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... :)
BS harap Anda juga Follow dan Join akun Sosmed BS di bawah ini, biar kita saling Follow dan Like, sekaligus keep update masing-masing blog.
Good Luck and Happy Blogging!