Cara Membuat Tombol G+ Follow Twitter Like Facebook Unik SEO Friendly Di Blog

Heloo sobat Gobel's Blog, Ada yang baru nih dengan membuat tombol share ini blog Sobat akan tampil lebih elegan dan simple dan yang pasti SEO friendly. Untuk itu saya sarankan sobat untuk menggunakan tombol ini. Karena sangan simpel. Cara Membuat Tombol G+ Follow Twitter Like Facebook Unik SEO Friendly Di Blog ini sangat enak dipandang pengunjung.
Untuk caranya bisa sobat ikuti langsung ke tekape -->

  • Pertama, masuk dashbor blog sobat
  • Lalu masuk ke Tata letak
  • klik Tambah gadget
  • Pilih HTML/Javascript
  • Kemudian pstekan kode dibawah ini

 <style>
    /* Social Widget */
    #MBT-mashable-bar {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:250px;
    }
    .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;}
    #mashable {
        background: #EBEBEB;
        border: 1px solid #CCC;
        border-top: 1px solid white;
        padding: 2px 8px 2px 3px;
        text-align: right;
        border-image: initial;}
    #mashable .author-credit {}
    #mashable .author-credit a {
        font-size: 10px;
        font-weight: bold;
        text-shadow: 1px 1px white;
        color: #1E598E;
        text-decoration:none;}
    #email-news-subscribe .email-box{
        background: #EEF9FD;
        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-bar {
        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-bar ul {list-style: none outside none; padding-left: 4px;}
    #other-social-bar .other-follow {
        float: left;
        color:#1E598E;
        overflow: hidden;
        height:20px;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow ul li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow ul li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li.my-rss {
        background: url('http://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/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-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('http://2.bp.blogspot.com/-KsALKRN7Zzo/T0vKkSG3AfI/AAAAAAAAF_k/l-VHD5xxzps/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(http://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

    </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="MBT-mashable-bar" >

<!-- Google Plus-->
<div class="gplus"> <link href="http://plus.google.com/105986063824600027269" 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="http://plus.google.com/105986063824600027269" width="250" height="69" margin="0px" theme="light"></g:plus> </div>
<div class="fb-likebox">

<!-- Facebook -->
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2F146543882165484&amp;send=false&amp;layout=standard&amp;width=230&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=80&amp;appId=179027942166719" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:80px;" allowtransparency="true"></iframe> </div>
<div class="googleplus">

<!-- Google --> <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="230"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter">

<!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=algo_zali&amp;show_count=&amp; show_screen_name=&amp;text_color=" 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=GobelsBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 100px; font-size: 12px;" id="email" name="email" value="Masukan Email Anda" onfocus="ifundefinedthis.value==this.defaultValue)this.value=&#39;&#39;;" onblur="ifundefinedthis.value==&#39;&#39;)this.value=this.defaultValue;" /> <input type="hidden" value="tntbystc" 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-bar">

<!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/GobelsBlog" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/algo_zali  target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="http://plus.google.com/105986063824600027269" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" 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://tips-gobel.blogspot.com/2013/02/cara-membuat-tombol-unik-seo-friendly-di-blog.html" target="_blank" > Get This Blogger Widget »</a></span></div></div> <!-- End Widget --> </div>
<!--end of social widget-->

Contoh hasil tampilannya nanti akan seperti ini

Cara Membuat Tombol Follow Like Facebook G+

    Memang kodenya banyak tapi itu akan terlihat simpel dan enak dipandang mata saat blog sobat dikunjungi oleh visitor.
    Untuk sobat yang ingin mendapatkan banyak pengikut di facebook bisa masuk ke link ini Cara Mendapatkan Banyak follower Atau pengikut Di facebook. Sekian tutorial saya tentang Cara Membuat Tombol G+ Follow Twitter Like Facebook Unik SEO Friendly Di Blog.
    Semoga artikel ini bermanfaat bagi sobat semua.
    Terima kasih
    See you Next post


    Artikel Menarik Lainnya

    26 comments :

    daun sirsak ace max said...

    artikelnya sangat menarik untuk di baca

    cara mengobati kelenjar tiroid said...

    sukses terus buat blog nya yaa

    Vahlepi Blogger Hape said...

    wah...
    Mantappp sobb ...
    Tp saya udah betah pake yg sekarang ...
    Thanks for Share :D

    mampir :)

    mekanik komputer said...

    panjang amat ya skripnya gan, klo sempat ane coba dah :)

    Adhitya p said...

    ARTIKEL BERMANFAAT SOB
    BLOGWALKING : http://wizard-game.blogspot.com/

    Brebes VS Lamongan said...

    keren gen infonya trmksih genk dah berbagi'y sobat

    Rendo Aditama said...

    nice info.komen balik bro di rendo-redcell.blogspot.com
    yg mau tukar link jg bs

    A-R-A-F-Y-chemichalromance_MVHACKERBOsS said...

    ghan panjang amat ribett bingung gw??

    Widi said...

    Nice Article Sob

    Bfc Sarif SatriaSatriaan said...

    mantep nih mas,tpi bikin blog berat gk??

    Algo Zali Aishiteru said...

    Sip, di share ke teman-teman ya

    Algo Zali Aishiteru said...

    Makasih sobat

    Algo Zali Aishiteru said...

    Ya, makasih juga sobat udah mau berkunjung kesini

    Algo Zali Aishiteru said...

    emang script nya agak panjang sih, tapi jadi user friendly, enak dilihat pengunjung dan tertata rapi.

    Algo Zali Aishiteru said...

    OK, makasih sobat

    Algo Zali Aishiteru said...

    Thanks udah selalu berkunjung disini.

    #member

    Algo Zali Aishiteru said...

    Thanks sobat

    Algo Zali Aishiteru said...

    kalo g mau ribet, tinggal copas aja semua kode nya langsung tempel di blog sobat.
    wkwkwk

    Algo Zali Aishiteru said...

    Thanks sobat

    Algo Zali Aishiteru said...

    agak berat sob, tapi jadi user friendly, enak dipandang oleh pengunjung, jadi betah terus-terus liatin blog sobat.

    UUS ROHIMAT said...

    makasih gan tas infonya, dah ane coba v npa ea G+ dan like fbnya gak muncul?

    Anonymous said...

    I blog often anԁ Ι seriοusly aρρrecіate your contеnt.
    Тhe аrtіcle has reallу
    рeakеd my іntеrеѕt.

    I'm going to bookmark your site and keep checking for new details about once per week. I subscribed to your Feed as well.

    Review my web blog :: sportsbet

    Anonymous said...

    Greetіngs, I do believе your wеbѕite cоuld be
    havіng brοωsеr cοmρatibility pгoblemѕ.
    Whenеver I take a loоk at yοuг sіtе іn
    Ѕafari, іt lookѕ fine however, ωhеn opening in I.
    E., it has some oveгlapping iѕsuеs.
    I simρly wаnted to provіde yοu with a quick hеаԁs uρ!
    Besides that, excеllent site!

    Also viѕit mу web blog: Raspberry Ketones

    priyonisme said...

    mas... mau bertanya.. kira-kira kalau untuk menghilangkan kotaknya bisa gak... karena saya lebih suka transparan atau warna putih semuanya..

    id-pemula blogspot said...

    Thx infonya :)

    Dwi prasetyo said...

    thanks ya gan,sudah berhasil di blog saya....

    Post a Comment

    Tinggalkan jejak Anda dikomentar ini.
    Kami membutuhkan kritik dan saran Anda untuk kemajuan Blog ini.
    Terima kasih sudah berminat untuk meluangkan waktu berkomentar disini, semua kritik dan saran Anda akan saya dengarkan untuk memajukan Blog ini.
    Gunakan name/url untuk berkomentar.
    Anonymous = Spam

    ---->>Alexa<-----

    ---->Histats<----

    Link Sobat