Sabtu, 02 November 2013

Membuat Widget Social Share dengan Animasi CSS

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم
Junior Iqfar - Membuat Widget Social Share dengan Animasi CSS. Alhamdulillah pada hari sabtu ini saya masih bisa mengupdate blog saya ini dan insya allah mulai minggu depan saya tidak bisa mengupdate artikel karena saya sedang menghadapi Ujian Tengah Semester (UTS). Dan insya allah selesai UTS saya kembali menulis artikel lagi.

Dan masih belum jauh-jauh dari animasi CSS karena tutorial hari ini masih berkaitan dengan tutorial kemarin yang masih sama tentang CSS. Pada hari ini tuorial yang akan saya bahas adalah Membuat Widget Social Share dengan Animasi CSS. Namun untuk tutorial ini masih ada Edit HTMLnya karena widget ini diletakkan pada akhir artikel. Berikut ini adalah demo untuk Membuat Widget Social Share dengan Animasi CSS.

Demo Widget Google Translate dengan Animasi CSSKlik disini untuk melihat demo Widget Google Translate dengan Animasi CSS

Memasang CSS
  1. Masuk ke akun blogger sobat
  2. Kemudian masuk ke Template, pilih dan klik Edit HTML
  3. Kemudian cari kode di bawah ini
    4. ]]></b:skin>
  4. Lalu salin kode di bawah ini
    5. ul.social{
  list-style: none;
  display: inline-block;
  margin: 15px auto;
}

ul.social li{
  display: inline;
  float: left;
  background-repeat: no-repeat;
}

ul.social li a{
  display: block;
  width: 50px;
  height: 50px;
  padding-right: 10px;
  position: relative;
  text-decoration: none;
}

ul.social 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 li.facebook{
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9WnoQJ50U9XyQSF2WsUgWd9vnVm6kI2RM00Mh9SEg-h7F4Rc7MbU7QPheVnfAnovGKDkyKdoPJJfa8payUA5Q2F6p_HLUMj60Bv4jNiuqZkExCZAiQrCe50N2yD5yQFfl7D0-BgcUoqBU/s1600/tutorialblogspot-facebook-icon.png');
}

ul.social li.twitter{
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh6KrhG4l9RIjrN3WJOCiYNekYQZ3_UPLGT9obWJONWmteRbihoaqup8em0lP5SgMsct6LicJCtGSv36d_H1vSNNfvTsl-l9nNUUjWB8dOSxy2vD3Zrl2lLDd_54zx_4sOK0VLnW3AXCjZ/s1600/tutorialblogspot-twitter-icon.png');
}

ul.social li.googleplus{
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVR99HWNF1zqV9P6YFDJ9TEc2Ml0gqczK6zUd8GIjlts2lOUKZLJuzpkJN8xPsVhTx-GPRGquwKWc3O8AuH8IvGwIWMX_jCZ8gf79-WM9lVl1M1j-U0hUNmtCI23V5XAux1VMSjn4ZdcQE/s1600/tutorialblogspot-google-icon.png');
}

ul li.pinterest{
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx1E3_upqxQchvhG213JEREm8x5gDdQvVJ7qUzXu7gu5OWfp4TVGlJ2w3WWzUp9c1ElFqnnqiprTGzTWAsj5Wcuk3AEBNTO3KI9Y-QQ60Gwrk8P1OMVzCu365HgKmO5tdORWF-wcnea1oq/s1600/tutorialblogspot-Pinterest-icon.png');
}

ul.social li.stumbleupon{
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN0eVnwosg0-0Folex9ekTy_nfc8EEAaQvj0vQzNVujr8WPl7rOV2AKRnaStH3FU97GVlnnKONc-XLcmN3mBvZSWZ6hm2zLNrKvGiTUlsINlru6L4xx0VmVyeazwGmZIB0yR5TWRibQQPI/s1600/tutorialblogspot-StumbleUpon-icon.png');
}

ul.social li.dig{
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNKsNVFub30JsRzcsjx3drCtaAT8_EWbX-WwE_wpEnl2dvOXw2Nt93eq1FFBlLINGhmGPQq2YWwWGRTemKv3iYcjR48nlMOiD9GDAGIVOcVd_c4uCCDhs4MHGqY7V0RVRzkRsDtKstASl5/s1600/tutorialblogspot-Digg-icon.png');
}

ul.social li.linkedin{
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN4S1mvUPQn0gOroMp6ErAjxzxPMCnQ68x-fkRdOoncNctdKx21X_0T47F5fZGhm8OIsoU20wmzLaoxeq4ThZAgCJordYOLyLSy7wKIz-4DdaG7QZZ4HWdw-yxu0CFUHKwjfQTdOGPPtr2/s1600/tutorialblogspot-Linkedin-icon.png');
}

#animation:hover li{
  opacity: 0.2;
}

#animation li{
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 500ms;
  -moz-transition-property: opacity;
  -moz-transition-duration: 500ms;
}

#animation li a strong{
  opacity: 0;
  -webkit-transition-property: opacity,top;
  -webkit-transition-duration: 300ms;
  -moz-transition-property: opacity,top;
  -moz-transition-duration: 300ms;
}

#animation li:hover{
  opacity: 1;
}

#animation li:hover a strong{
  opacity: 1;
  top: -10px;
}
  5. Kemudian letakkan sebelum kode
    6. ]]></b:skin>
  6. Simpan template sobat.
    Sampai langkah ini kode CSS sudah selesai.

Memasang kode HTML
  1. Masih pada Edit HTML
  2. Cari kode di bawah ini pada template blog sobat.
    <data:post.body/>
    Sobat bisa meletakkannya sebelum Artikel Terkait dengan Scroll, atau sebelum widget blogger yang lainnya.
  3. Kemudian salin kode ini
    4. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <ul class='social' id='animation'>
    <li class='facebook'>
      <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;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='twitter'>
      <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='googleplus'>
      <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;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='pinterest'>
      <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)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>
    </li>
    <li class='stumbleupon'>
      <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='dig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='linkedin'>
      <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;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
    </li>
  </ul>
</b:if>
  4. Letakkan setelah kode ini
    5. <data:post.body/>
  5. Simpan template blog sobat

Dan ucapkan alhamdulillah jika sobat berhasil dalam Membuat Widget Social Share dengan Animasi CSS. Namun untuk sobat lain yang belum berhasil silahkan tuliskan komentar pada akhir artikel ini dan jika ada keluhan lain atau masalah lain, sobat bisa juga menuliskan komentar pada akhir artikel ini.
ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait


, ,

0 komentar:

Posting Komentar

Jangan Lupa komentar apabila terdapat penulisan kata, kalimat atau yang lainnya. Terima kasih telah berkunjung ke sini.