Tampilan Social Subscription Button Sliding Effect Dengan CSS3

Semakin maraknya tampilan blog dengan menggunakan fitur fitur CSS,maka untuk itu pada kesempatan ini saya akan coba berikan tutorial tentang Membuat tampilan button sliding Effect Dengan CSS,bagi sobat yang penasaran silahkan lihat demonya.

Bagi sobat yang mau mencobanya silahkan ikuti tutorialnya.

1.  Kode Snippet 

q:before,q:after{content:''}
ol,ul{list-style-position:outside;padding-left:.95em}
li{list-style-type:disc}ol li{list-style-type:decimal}
.pbt_share-links{font-size:.8em;width:215px;z-index:1;}.pbt_share-links>
.heading{display:inline-block;min-width:105px;text-align:center;color:#000}.pbt_share-links>
ul{margin-bottom:29px}.pbt_share-links>
ul>
li{display:inline-block;overflow:hidden;margin-left:5px; padding:0px;}.pbt_share-links .share-link{display:inline-block;width:20px;height:20px;line-height:20px;text-align:left;background:#606060 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJMyWJIAW1qJFBIeSHbniO4dlklrqtQEpr9goqiRlBP1pjZfcybLipcRwJb19i3nj1vAV41SAov9MLJESvC5KNEqs9bT_WyNWr4EtnOT6f9atkEOO-Wx6Rbes32y4OIHObfFbQI1yH-gdg/s1600/social-sprite.png") scroll 0 0 no-repeat;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-transition:none .3s ease-out;-moz-transition:none .3s ease-out;-ms-transition:none .3s ease-out;-o-transition:none .3s ease-out;transition:none .3s ease-out;-webkit-transition-property:min-width,background-color;-moz-transition-property:min-width,background-color;-ms-transition-property:min-width,background-color;-o-transition-property:min-width,background-color;transition-property:min-width,background-color;min-width:0;color:#fff}.pbt_share-links .gplus{background-position:0 0}.pbt_share-links .gplus:hover{min-width:111px;background-color:#dd4b39}.pbt_share-links a.twitter{background-position:0 -20px}.pbt_share-links a.twitter:hover{min-width:83px;background-color:#419ad9}.pbt_share-links a.facebook{background-position:0 -40px}.pbt_share-links a.facebook:hover{min-width:94px;background-color:#3b5998}.pbt_share-links a.email{background-position:0 -60px}.pbt_share-links a.email:hover{min-width:77px;background-color:#5fc355}.pbt_share-links .share-link>
span{display:inline-block;width:300px;padding-left:23px;color:#fff}.pbt_share-links .gplus>
span>
div{position:relative;top:2px;right:-2px}.page_title{margin:5px 0 0 0}

 

2. Pilih menu Template > Edit HTML

3. Cari kode ]]></b:skin> dan letakan kode snippetnya yang tadi  di atas kode ]]></b:skin>

Setelah penempatan kode di atas selesai kemudian

* Kembali ke menu dan pilih Tata Letak 

* Add Gadget > HTML/Javascript

* Letakan kode di bawah pada bagian kolom konten

<div class="pbt_share-links">
  <ul>
    <li>
      <span class="share-link gplus" title="LABSTRIKE on Google Plus">
        <span>
          GOOGLE + 
          <g:plusone size="small" annotation="none"
          href="Web URL">
          </g:plusone>
        </span>
      </span>
    </li>
    <li>
      <a class="share-link twitter"
      href="http://twitter.com/Username"
      title="LABSTRIKE on Twitter">
        <span>
          TWITTER
        </span>
      </a>
    </li>
    <li>
      <a class="share-link facebook"
      href="http://www.facebook.com/Username"
      title="LABSTRIKE on Facebook">
        <span>
          FACEBOOK
        </span>
      </a>
    </li>
    <li>
      <a class="share-link email"
      href="mailto:Your Email ID" title="Receive LABSTRIKE Updates via Email">
        <span>
          EMAIL
        </span>
      </a>
    </li>
  </ul>
</div>
<!-- .pbt_share-links -->
<script type="text/javascript">
   
  var po = document.createElement('script');
   
  po.type = 'text/javascript';
  po.async = true;
  po.src = 'https://apis.google.com/js/plusone.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);
</script>

Keterangan :
Untuk tulisan yang berwarna merah silahkan ganti dengan URL blog sobat.
Untuk yang berwarna hijau ganti dengan nama account sobat.
Untuk yang berwarna pink ganti dengan alamat email sobat.

4. Setelah semuanya beres tinggal save dan lihat hasilnya.


Selamat Mencoba.............

Sharing Button Widged Dengan Tampilan Karikatur Rumah

Assalamualaikum pada kesempatan ini saya akan share mengenai cara membuat sharing button widged dengan tampilan baru di blog anda sebenarnya ada banyak sekali tampilan tampilan menawan yang ditawarkan oleh widged ini tetapi mungkin apa yang akan saya bagikan sekarng bisa menjadi salah satu pilihan anda jika anda tertarik silahkan ikuti langkah dibawah ini....

Masuk blog anda
pilih menu tata letak/add gadged
kemudian pilih html javascript
setelah itu letakan kode dibawah ini pada box yang tersedia

    <style>

    #PTTHOME img {

        -moz-transition: all 0.8s ease-in-out;

        -webkit-transition: all 0.8s ease-in-out;

        -o-transition: all 0.8s ease-in-out;

        -ms-transition: all 0.8s ease-in-out;

        transition: all 0.8s ease-in-out;

    }

    #PTTHOME img:hover {

        -moz-transform: rotate(360deg);

        -webkit-transform: rotate(360deg);

        -o-transform: rotate(360deg);

        -ms-transform: rotate(360deg);

        transform: rotate(360deg);

    }

    </style>

    <center><p id="PTTHOME">

        <a href="https://www.facebook.com/arieadie30 "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif5ZFsAVQfW8MAjPsOsQEkNGBufK4zOszw2VAb7lh88cUYtDJOzofSXXFVTpyEY0KzkYNgLG-sST_0ArGnmDPzZBOMAfRpcQgcSp2kfIDf8FfnfVzRGa-FX_49ZuroX3TgthFsCklgsGA/h120/Facebook-Home.png"  title="Like Our Facebook Page" /></a>

        <a href="https://www.twitter.com/lindamarlina40"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEjscxKYXFhjCvvXrtDxOWcaouJka5y8IEmLbUkr14MIu_pm8_SLUpBb-z_CiI2VSygVlS_dJ2LGP8xJ3Ol89nbnssIj9EsZeQhjJpwhJ7BIbkbDKJmbevhy8GhecciOLSaoHwiWmWX-g/h120/Twitter-Home.png" title="Follow Our Updates On Twitter" /></a>

        <a href="https://plus.google.com/u/0/112756918350798570373"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyF31DCG2kyxOjfIs1azbzeR8sCpVGH65WgBqsOvCv2kkU62gmHILFDkywRU3k6M5n4WG-gMAPNmh-z5FyFPMTG8smhty_do3_iEC0Cv3IIGKqZymUJp8hYs6EUnzj0bOn1qURxvEQ3cU/h120/Google-Social-store.gif" title="Follow Us On Google+" /></a>

        <a href="http://www.feeds.feedburner.com/pengembarabiru"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvEHKuezOulVPffBFB6YQvwcABqm8FC-G60QRNMOYLIKQWpgB0xp8Di7g43XrwDHaelAPwO_E60B_L72VMSykLkEP4pO__sqsdltFUvTzVyOUWWW8UlWsvdsQdDakS47SvekInegPYiVQ/h120/RSS-Home.png" title="Grab Our Rss Feed" /></a>

    </p></center>

Catatan : saya kira agan sudah mengerti silahkan ganti kode yang berwarna merah sesuai dengan akun agan masing - masing
setelah itu simpan template agan dan lihat hasilnya..
semoga agan menyukainya selamat mencoba semoga bermanfaat....

Membuat Tombol Sosial Media Keren Menggunakan CSS3

Pada postingan ini saya saya akan share tentang bagaimana cara menambahkan tombol sosial media keren di blog menggunakan CSS 3 caranya sangat mudah gan dan agan patut mencobanya hehe...

baikalah gan lansung saja pada langkah langkahnya..

Masuk blog agan
pilih menu template/edit html
cari kode ]]></b:skin> gunakan ctrl + f untuk memudahkan pencarian
jika sudah ketemu lansung aja letakan kode dibawah ini tepat diatas tag ]]></b:skin>

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

Setelah itu silahkan save template anda terlebih dahulu
kemudian kita beralih ke munu tata letak/add gadged
lalu letakan kode dibawah ini pada box yang tersedia

<center><ul class="bubblewrap">
<li><a href="Kode agan disini "><img src="http://img42.imageshack.us/img42/7086/stumbleuponlj.png" title="Add to Stumbleupon" /></a></li>
<li><a href="Kode agan disini "><img src="http://img253.imageshack.us/img253/835/facebookv.png" title="Add to Facebook" /></a></li>
<li><a href="Kode agan disini "><img src="http://img832.imageshack.us/img832/5893/twittermx.png" title="Add to Twitter" /></a></li>
<li><a href="Kode agan disini "><img src="http://img4.imageshack.us/img4/2004/rssqn.png" title="Add RSS Feed" /></a></li>
</ul>
</center>

Catatan : Silahkan sesuaikan kode berwarna merah dengan kode sosial media anda



Jika sudah silahkan simpan template agan dan lihat hasilnya...

Selamat mencoba tombol sosial media barunya semoga bermanfaat....