» » » Cara Membuat Widget All In One Sosial Sharing di Blogger

Cara Membuat Widget All In One Sosial Sharing di Blogger

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.rizkiew.co.vu 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/AVvXsEikc_C4bxRaY9KghecHMaP4MMKs10r0uQF2NTWCi82lSFidDNi8rn7fUB2AM-zUnM-Q5SpS0L6NsdDSX7V860IOvJ5KF4PMPOmVMPkwXAXNpZiwnNXAQ07MPuzdUlaxMQAe6ydQXkYspAo/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/AVvXsEgCIaB_eQKO1Q38IU0F_ZJpsbupkwzoGMac9IhJXKcyc_w9TMsIKOusDYWGzkOzNCl-JOwXJRc1V4nSWm3aoEVKArLXtQDKJcYQ0Gls2f5sulOVUxr0lz4Qy15fa-Z2eUtjUtyEkCmdFaY/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/AVvXsEjTTeNJHku1CUVgZRogq3etaA2JjD4TEHqDLbCQT2aDiRhT7Fr2YdN6Ripok2aQAdk3pC-IBkpMO5eJ38LaatBIuCUGAKOV5atvqfQXSLXv7s5Lify3j1eRz2r6E-IHmKyitElffgYTOyI/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 */&nbsp;
    </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/115591935117453650327" 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/115591935117453650327" 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/Shadowknifez-Cross-Fire-Online-Indonesia/979611408735458&amp;send=false&amp;layout=standard&amp;width=200&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;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&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=en&amp;link_color=&amp;screen_name=Riski_NGT&amp;show_count=&amp; show_screen_name=&amp;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=rizkiew', '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=&#39;&#39;;" onblur="if(this.value=='')this.value=this.defaultValue;" /> <input type="hidden" value="rizkiew" 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/rizkiew" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/Rizki_Eka_NGT"  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://www.rizkiew.co.vu/2015/01/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/Shadowknifez-Cross-Fire-Online-Indonesia/979611408735458 dengan facebook page milik anda. (hanya satu link yang diganti)
  • Ganti  twitter user name Rizki_Eka_NGT dengan twitter user name milik anda (hanya satu link).
  • Ganti rizkiew dengan Feedburner Id milik anda (satu link).
  • Ganti http://feeds.feedburner.com/rizkiew dengan Feedburner RSS Link milik anda (satu link).
  • Ganti https://twitter.com/Rizki_Eka_NGT dengan Twitter profile link milik anda (satu link).
Untuk mempermudah pencarian maka silahkan gunakan Ctrl + F di keyboard anda.
Posted by
Labels: ,

No comments:

Post a Comment

Selamat Datang di NGANTANG COMMUNITY. Pada sa'at komentar tidak boleh berkata kotor seperti j**c**, a**, anj***, dll. Ya, sudah jelass?. Berkata yang baik dan benar. Selamat berkomentar :) .

Subscribe to: Post Comments (Atom)