-->
logo blog

Membuat Share Buttom Cantik dan Ringan di Bawah Postingan 1

Membuat Share Buttom Cantik dan Ringan di Bawah Postingan 1

share buttom cantik ringan
Hal yang paling menyenangkan bagi pemilik situs atau blog adalah dapat memberikan manfaat untuk pengunjung. Terlebih lagi, banyak pengunjung yang bisa memanfaatkan isi dari situs yang dibuat tersebut.

Namun demikian, untuk membuat blog atau situs dengan pengunjung yang ramai itu perlu usaha yang tekun dan giat. Tidak mungkin sebuah blog bisa ramai pengunjung tanpa usaha apapun dari pemilik situs. Itu ibarat orang yang ingin mendapatkan emas jatuh dari langit...he Namun tenang saja, untuk membuat blog ramai pengunjung sebenarnya mudah koq. Sahabat tinggal mau atau tidak. ITU INTINYA.
BACA: Trik Mudah Agar Blog Ramai Pengunjung

Sebagaimana diuraikan di atas, sahabat pasti ingin postingan di blog dilihat banyak orang. Maka salah satu meningkatkan kunjungan blog adalah memberikan pelayanan kepada pengunjung dengan baik. Salah satu bentuk pelayanan kepada pengunjung adalah dengan diberikannya fasilitas untuk sharing. Oleh karenanya, kebutuhan widget sharing buttom sangatlah penting.

Pentingnya Tombol Sharing di Blog


Keberadaan tombol sharing jangan pernah diabaikan. Tombol ini walau terlihat sederhana, namun bisa mendongkrak visitor di blog kita. Bisa sahabat bayangkan, jika salah satu pengunjung blog atau situs kita membaca dan menelaah postingan yang kita buat. Dan, ternyata pengunjung ini tertarik dan bisa mengambil manfaat, dan uniknya pengunjung ini ingin membaginya kepada teman-temannya di sosial media. Maka, keadaan inilah yang musti bisa dimanfaatkan dengan baik.

Kesempatan seorang pengunjung yang ingin berbagi, jika tidak difasilitasi, maka seperti membuang kesempata emas dengan sia-sia. Bayangkan saja, jika satu pengunjung berbagi kepada teman-temannya. Maka berapa banyak orang yang akan memiliki potensi untuk mengunjungi situs kita? Jumlah ini tentunya sebanding dengan jumlah teman yang dimiliki pengunjung kita tadi. LALU, bagaimana jadinya jika yang tertarik kepada postingan kita itu puluhan dan ingin membagi kepada teman-temannya. SUNGGUH, KESEMPATAN EMAS BUKAN?

Oleh karenanya, jangan pernah untuk menyepelekan tombol sharing di situs atau blog sahabat semua. Segera dan jangan ragu-ragu untuk memasangnya di blog atau situs.

Cara Membuat Share Buttom Cantik dan Ringan di Bawah Postingan 1


Namun demikian, tidak semua share buttom itu ringan dan ramah di blog. Oleh karenanya, sahabat Ngonline06 perlu menyeleksi dan memilih share buttom ringan dan ramah buat blog. Atas dasar itulah, Ngonline06 ingin berbagi widget share buttom yang ringan dan tentunya menarik untuk ditempelkan di blog, yaitu seperti pada gambar di atas.
Cara membuat widget share buttom cantik dan ringan pun sangat mudah. Berikut adalah langkah-langkah pembuatannya:
  1. Kunjungi dashboar blog sahabat.
  2. Klik template > edit html.
  3. Cari kode ]]></b:skin> dan letakkan kode CSS di bawah ini tepat di atas kode ]]></b:skin> tersebut.
  4. ul.social_cyber88 {
        list-style:none;
        display:inline-block;
        margin:15px auto;
        }
        ul.social_cyber88 li {
        display:inline;
        float:left;
        background-repeat:no-repeat;
        }
        ul.social_cyber88 li a {
        display:block;
        width:50px;
        height:50px;
        padding-right:10px;
        position:relative;
        text-decoration:none;
        }
        ul.social_cyber88 li a strong {
        font-weight:400;
        position:absolute;
        left:20px;
        top:-1px;
        color:#fff;
        z-index:9999;
        text-shadow:1px 1px 0 rgba(0,0,0,0.75);
        background-color:rgba(0,0,0,0.7);
        -moz-border-radius:3px;
        -moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
        -webkit-border-radius:3px;
        -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
        border-radius:3px;
        box-shadow:0 0 5px rgba(0,0,0,0.5);
        padding:3px;
        }
        ul.social_cyber88 li.abfacebook {
        background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghtt4vKnWakByJqBx9mJkx-cRHBbvXJ9VsE4fitGWMjnA-7Z5BHTw2CQ8JZpLAgXDqinYxP_poZJm-FVXOm30XHyKpKiUPHhwjpsuYlsYvEW49g8KjzwmMk1hZiLuzo9IsVvo2ZR7Ysm54/s1600/btrix-facebook-icon.png);
        }
        ul.social_cyber88 li.abtwitter {
        background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_iJmi97sbXdDBNV_f1exhV-v6c2cfTdcbGZw97uu0xdLuLWNTmzpfFK5X87GOLB6O38JeailUT4ZE1BBBeNsu9b7xb0At2Zn1ODSQA9_rxakO_j87jnJ9PEwBm_R00FgWnQooOEZTp1X-/s1600/btrix-twitter-icon.png);
        }
        ul.social_cyber88 li.abgoogleplus {
        background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW7p33GxeVCPbb4BaQ73gPwpzSEIWl7jw-6q81V24oUyahAeXimu24MPw_s-pxFWmsA1Cqt1bGl1ArRhciBLrCozpIUw35T_dHJ67dZuiYLtQmKrRsNbtpdopMSlOpTqErtif9ZhYMOjiD/s1600/btrix-google-icon.png);
        }
        ul li.abpinterest {
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyI44_4pDQrdgxkhgjpr_AHl0yw4lOdaG90AWQAR6bTmM4AIw4wXrF8FADC2r_-qWwW4bxUzeXoKeT8_S35wwRvq24WnVJTgkEh9fLZNMTVK3BgpU8KhvN6S1J0DmcXx-UKujaVixfK4k0/s1600/btrix-Pinterest-icon.png);
        }
        ul.social_cyber88 li.abstumbleupon {
        background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg7JM8DE2xl8X6eD6a9N4NOAVUpNw4sd3Cq1T68cGmw2fiT9dyRDZPmfG31g6ABodnp4ew02MKREHGDM-rY9w3nRq1PWnPCbb480T9Ze4Z9irjD651mIDnbMweGbWCrt-Wu0gaGpfGUicV/s1600/btrix-StumbleUpon-icon.png);
        }
        ul.social_cyber88 li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiksjVkS3OnNgg3lRtPUwq2KME_aHmw2qFHQ-NSu3FO43raBw0uqxjASsQ5C9enJ5jLlaphrGcdxnGxVIcloTGDToaWF-Mv27MvKrCJH6qRfdLYV2Wq0T3CPAG8kwzoCaM1pee_yFwa-YZT/s1600/btrix-Digg-icon.png);
        }
        ul.social_cyber88 li.ablinkedin {
        background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ0ERRT8Xav3O_4lIVm8kNtES9MUng9bJDQo3SCcwYceV248Y9Tq9okAbW7JDmsAWzphi3XOhVG2Vg6Yf4HxsOmj5245LelTcw-pOTuto2dugg0lLUG76iDH7KdisIUgNI3jxLw7nbNPEX/s1600/btrix-Linkedin-icon.png);
        }
        #animation_cyber88:hover li {
        opacity:0.2;
        }
        #animation_cyber88 li {
        -webkit-transition-property:opacity;
        -webkit-transition-duration:500ms;
        -moz-transition-property:opacity;
        -moz-transition-duration:500ms;
        }
        #animation_cyber88 li a strong {
        opacity:0;
        -webkit-transition-property:opacity, top;
        -webkit-transition-duration:300ms;
        -moz-transition-property:opacity, top;
        -moz-transition-duration:300ms;
        }
        #animation_cyber88 li:hover {
        opacity:1;
        }

    #animation_cyber88 li:hover a strong {
        opacity:1;
        top:-10px;
        }
  5. Kemudian, cari kode <data:post.body/> dan letakkan kode di bawah ini, tepat di bawah kode <data:post.body/>.
  6. <!-- Share Button Cyber88 Widget Mulai-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='font-size: 22px;padding: 7px;margin: 0px auto;text-align: center;font-family: Oswald;text-transform: uppercase;color: #216A93;background: none repeat scroll 0% 0% #DDD;border: 1px dotted #AAA;'><b>Share this article with your friends</b></div>
    <div style='text-align:center'>
        <ul class='social_cyber88' id='animation_cyber88'>
        <li class='abfacebook'>
        <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' ><strong>Facebook</strong></a>
        </li>
        <li class='abtwitter'>
        <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' title='Twitter' target='_blank'><strong>Twitter</strong></a>
        </li>
        <li class='abgoogleplus'>
    <a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' title='G+'  target='_blank'><strong>Google+</strong></a>
        </li>
        <li class='abpinterest'>
    <a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'  target='_blank' title='Pinterest'><strong>Pinterest</strong></a>
        </li>
        <li class='abstumbleupon'>
        <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' title='Stumbleupon'  target='_blank'><strong>StumbleUpon</strong></a>
        </li>
        <li class='abdig'>
          <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Dig'  target='_blank'><strong>Dig</strong></a>
        </li>
        <li class='ablinkedin'>
        <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;'  target='_blank' title='LinkedIn'><strong>LinkedIn</strong></a>
        </li>
      </ul></div>
    </b:if>
    <!-- Share Button Cyber88 Widget Selesai-->
  7. Save.
Tralala, sekarang sahabat telah memiliki widget share buttom yang ringan dan cantik. Jika kurang puas dengan bentuknya, sahabat Ngonline06 bisa melirik juga widget share buttom yang ringan dan cantik 2.

Share this:

Artikel Menarik Lainnya

Show comments
Hide comments

No comments

Silahkan berkomentar dengan baik.

Info Pendidikan