Cara Membuat Widget All In One Sosial Sharing di Blogger yang super keren.
Seperti yang kita tahu bahwa sosial sharing adalah salah satu cara untuk meningkatkan pengunjung blog kita, tapi anda juga harus tahu bahwa penampilan atau layout social sharing juga sangat berpengaruh pada pengunjung untuk membagikan artikel kita melalui widget sosial sharing yang kita pasang.Bayangkan berapa banyak tempat di blog yang kita gunakan jika kita menaruh widget sosial sharing seperti Facebook, Twitter, Google plus dan RSS Feed satu persatu, tapi jika anda menggunakan Widget All In One Sosial Sharing ini maka anda akan sangat menghemat ruang di blog anda dan tampilan blog anda pun lebih terlihat profesional.
Lihat demo dari Widget All In One Sosial Sharing :
Cara pemasangan Widget All In One Sosial Sharing di Blogger
- Masuk ke Blogger kemudian klik Tata letak (Layout)
- Kemudian klik tambah gadget "Add Gadget" di sebelah kanan sidebar
- Kemudian pilih tambah "HTML/JavaScript"
- Langkah berikutnya tambahkan atau copy paste code dibawah ini :
<style>
/* www.PassionateBlogging.com All in One Social Widget *
#Pb-allinonesocial-widget {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
.fb-likebox {
background: #fff
padding: 10px 13px 0 10px;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-bottom: 1px solid #D8E6EB;
margin:0px;
height:45px;
}
.googleplus {
background: #F5FCFE;
border-top: 1px solid #FFF;
border-bottom: 1px solid #ebebeb;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-image: initial;
font-size: .90em;
font-family: "Arial","Helvetica",sans-serif;
color: #000;
padding: 9px 11px;
line-height: 1px;}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
display:inline-block;
margin: 9px 70px;}
.g-plusone { float: left;}
.gplus {
background: #fff;
padding: 0px;
border: 0px solid #C7DBE2;
margin-bottom:-13px;}
.twitter {
background: #EEF9FD;
padding: 10px;
border: 1px solid #C7DBE2;
border-top: 0;}
#allinonesocial {
background: #EBEBEB;
border: 1px solid #CCC;
border-top: 1px solid white;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;}
#allinonesocial .author-credit {}
#allinonesocial .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration:none;}
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
height:35px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
background: #ff9b00;
background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
#other-social-widget {
background-color: #D8E6EB;
box-shadow: 0 1px 1px #FFFFFF inset;
padding: 0px;
font-family: "Arial","Helvetica",sans-serif;
font-weight:bold;
overflow: hidden;
border: 1px solid #B6D0DA;
height:37px;
}
#other-social-widget ul {list-style: none outside none; padding-left: 4px;}
#other-social-widget .other-follow {
float: left;
color:#1E598E;
overflow: hidden;
height:20px;
padding:5px;
width: 270px;}
#other-social-widget .other-follow ul {
list-style: none outside none;
padding-left: 4px;}
#other-social-widget .other-follow ul li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-widget .other-follow ul li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-widget .other-follow li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-widget .other-follow li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-widget .other-follow li.my-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcFIiSo23VOdy_TYHDjAdzEPesUARkbx4LWVfmOmJ4nOM1I_4cy61f4_oYUI2Yeg6_TS_AHTpj6HyK2jqJbICtOeZuARX5qA3uzLacw8XRXbM-X87QH6EvoPGuxoyrl71j6coUc7eB9dA/s400/rss-16x16.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}
#other-social-widget .other-follow li.my-rss a, #other-social-widget .other-follow li.my-twitter a, #other-social-widget .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-widget .other-follow li.my-rss a:hover, #other-social-widget .other-follow li.my-twitter a:hover, #other-social-widget .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-widget .other-follow li.my-twitter {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf74jfIXE7BfQ6X8E0p4mhkGEiQ0rHFg4hdEa_qSfQFqC7g31lt_0CQ-wnBMnePsPpdsoGXnHOpo_D_W2_Rxy1j4fHs0yUHaEMs8b9edjayNjFBm44PtOUqbdMjx9zb418Ij7BH4U42o8/s400/twitter%2527.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}
#other-social-widget .other-follow li.my-gplus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjwei3xzCxb5iGrrgJG9s7OpQVcPM5T7BztBYbaeIh0n1H5Ou9UHxk_Ui6Mjsfpm27bhxzqoDuybQzHXVF_WsDCJH0Z0oVXx-xdwspY2_AbXwZ0fhJRLDFf-p3dg2up6R5vZgt718VLXQ/s400/gplus-16x16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;}
/* www.PassionateBlogging.com All in One Social Widget */
</style>
<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{
background: #FFCA00;
}
</style>
<![endif]-->
<!--begin of social widget--><div style="margin-bottom:10px;"><div id="Pb-allinonesocial-widget" > <!-- Begin Widget -->
<div class="gplus"> <link href="https://plus.google.com/110312139088618941668" rel="publisher" />
<script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script>
<!-- Place this tag where you want the badge to render -->
<g:plus href="https://plus.google.com/110312139088618941668" width="300" height="131" margin="0px" theme="light"></g:plus> </div>
<div class="fb-likebox"> <!-- Facebook -->
<iframe src="http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/pages/Passionate-Blogging/392648784159408&send=false&layout=standard&width=200&show_faces=false&action=like&colorscheme=light&font=arial&height=100" scrolling="no" frameborder="0" style="border:none; overflow:hidden;"></iframe> </div>
<div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter"> <!-- Twitter -->
<iframe src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter_tweet_button_0& lang=en&link_color=&screen_name=PassionateBlogg&show_count=& show_screen_name=&text_color=" title="" style="width: 300px; height: 20px;" class="twitter-follow-button" frameborder="0" scrolling="no"></iframe> </div>
<div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=PassionateBlogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> <input type="hidden" value="PassionateBlogging" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div>
<div id="other-social-widget"> <!-- Other Social widget --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/PassionateBlogging" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="http://twitter.com/PassionateBlogg" target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="https://plus.google.com/110312139088618941668" target="_blank">Google Plus</a> </li> </ul> </div> <div id="allinonesocial" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://gudcheat.blogspot.com/2014/11/cara-membuat-widget-all-in-one-sosial.html" target="_blank" >All in One Social Widget »</a></span></div></div> <!-- End Widget --> </div>
<!--end of social widget-->
Keterangan kode di atas, ganti link sosial profil di dalam kode di atas dengan sosial profil milik anda.
- Ganti link google plus https://plus.google.com/110312139088618941668 dengan link google plus milik anda. (2 link yang harus di ganti)
- Ganti link facebook Page https://www.facebook.com/pages/Passionate-Blogging/39264878415940 dengan facebook page milik anda. (hanya satu link yang diganti)
- Ganti twitter user name PassionateBlogg dengan twitter user name milik anda (hanya satu link).
- Ganti PassionateBlogging dengan Feedburner Id milik anda (satu link).
- Ganti http://feeds.feedburner.com/PassionateBlogging dengan Feedburner RSS Link milik anda (satu link).
- Ganti http://twitter.com/PassionateBlogg dengan Twitter profile link milik anda (satu link).