Membuat Widget Icon dengan CSS Tanpa Javascript

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Junior Iqfar - Membuat Widget Icon dengan CSS Tanpa Javascript dan jQuery. Alhamdulillah pada pagi yang sedikit mendung ini lagi-lagi saya melanjutkan menulis artikel tentang Membuat Widget Icon dengan CSS Tanpa Javascript dan jQuery. Pada artikel sebelumnya saya juga pernah menuliskan artikel tentang Membuat Widget Icon dengan CSS. Artikel tentang Membuat Widget Icon dengan CSS ini sangat berkaitan dengan artikel yang sedang saya tulis ini karena widget blogger ini hampir sama bentuknya namun social media yang berbeda.

Untuk artikel ini saya menambahkan beberapa social media seperti Subcribe via RSS, Follow us on Google+, Like us on Facebook, Follow us on Twitter, Follow us on YouTube, Follow us on Pinterest, Follow us on LinkedIn. Jadi sangat berbeda dengan artikel yang sebelumnya widget blogger ini saya akan lebih mudah saat sobat memasangnya pada template sobat. Jika sobat masih binggung tentang widget blogger tentang Membuat Widget Icon dengan CSS Tanpa Javascript dan jQuery, saya akan berikan sebuah demo kepada sobat untuk gambaran tentang model dan bentuk dari widget blogger ini.

Demo Widget Icon dengan CSS Tanpa Javascript dan jQueryKlik disini untuk melihat demo Widget Icon dengan CSS Tanpa Javascript dan jQuery

Langkah-langkahnya

1. Seperti biasa, sobat masuk ke akun blogger sobat
2. Kemudian klik menu dropdown dan pilih Tata Letak

3. Pilih Tambahkan Widget

4. Kemudian sobat cari HTML/Javascript

5. Kemudian sobat salin kode di bawah ini

<style>
 #Social {
  width: 260px;
  margin: 5px 20px;
  padding:5px;
 }
 #Social li {
  cursor: pointer;
  height: 48px;
  position: relative;
  list-style-type: none;
 }
 #Social .icon {
  background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaAx1awgc2kzURkdg6cqFFPVrUXKuH9qxwaHEvkdwx8eGEUzL3y3798NarQPy9mg6XzAY9rtnQPz4Oue4M6HVaFYS-9EvarCuzjYueor32gjnYgZzBKAfxP3ZwF4SE_9KA_aqpLN0ZJnE/s1600/Social.png') 0 0 no-repeat;
  background-color: rgba(217, 30, 118, .42);
  border-radius: 30px;
  display: block;
  color: #141414;
  float: none;
  height: 48px;
  line-height: 48px;
  margin: 5px 0;
  position: relative;
  text-align: left;
  text-indent: 90px;
  text-shadow: #333 0 1px 0;
  white-space: nowrap;
  width: 48px;
  z-index: 5;
  -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
  -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
  -o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
  transition: width .25s ease-in-out, background-color .25s ease-in-out;
  -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
  -moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
  -o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
  box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
  text-decoration: none;
 }
 #Social span:hover {
  visibility: hidden;
 }
 #Social span {
  display: block;
  top: 15px;
  position: absolute;
  left: 90px;
 }
 #Social .icon {
  color: #fafafa;
  overflow: hidden;
 }
 #Social .fb {
  background-color: rgba(45, 118, 185, .42);
  background-position: 0 -382px;
 }
 #Social .twit {
  background-color: rgba(0, 161, 223, .42);
  background-position: 0 -430px;
 }
 #Social .google {
  background-color: rgba(167, 0, 0, .42);
  background-position: 0 -478px;
 }
 #Social .pint {
  background-color: rgba(204, 0, 0, .42);
  background-position: 0 -526px;
 }
 #Social .linked {
  background-color: rgba(0, 87, 114, .42);
  background-position: 0 -574px;
 }
 #Social .ytube {
  background-color: rgba(170, 0, 0, .42);
  background-position: 0 -670px;
 }
 #Social .rss {
  background-color: rgba(255, 109, 0, .42);
  background-position: 0 -718px;
 }
 #Social li:hover .icon {
  width: 250px;
 }
 #Social li:hover .icon {
  background-color: #d91e76;
 }
 #Social li:hover .fb {
  background-color: #2d76b9;
  background-position: 0 2px;
 }
 #Social li:hover .twit {
  background-color: #00A1DF;
  background-position: 0 -46px;
 }
 #Social li:hover .google {
  background-color: #A70000;
  background-position: 0 -94px;
 }
 #Social li:hover .pint {
  background-color: #C00;
  background-position: 0 -142px;
 }
 #Social li:hover .linked {
  background-color: #005772;
  background-position: 0 -190px;
 }
 #Social li:hover .ytube {
  background-color: #A00;
  background-position: 0 -286px;
 }
 #Social li:hover .rss {
  background-color: #EC5601;
  background-position: 0 -334px;
 }
 #Social .icon:active {
  bottom: -2px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
 }
</style>

<ul id="Social">
 <!-- RSS Start -->
 <li><a target="_blank" href="http://feeds.feedburner.com/" class="icon rss">Subscribe via RSS</a><span>Subscribe via RSS</span></li>
 <!-- RSS End -->
 <!-- Google+ Start -->
 <li><a target="_blank" href="https://plus.google.com/" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span></li>
 <!-- Google+ End -->
 <!-- Facebook Start -->
 <li><a target="_blank" href="http://www.facebook.com/" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span> </li>
 <!-- Facebook End -->
 <!-- Twitter Start -->
 <li><a target="_blank" href="https://twitter.com/" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span> </li>
 <!-- Twitter End -->
 <!-- YouTube Start -->
 <li><a target="_blank" href="http://www.youtube.com/" class="icon ytube">Follow us on YouTube</a><span>Follow us on YouTube</span> </li>
 <!-- YouTube End -->
 <!-- Pinterest Start -->
 <li><a target="_blank" href="http://www.pinterest.com/" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span> </li>
 <!-- Pinterest End -->
 <!-- LinkedIn Start -->
 <li><a target="_blank" href="http://www.linkedin.com/" class="icon linked">Follow us on LinkedIn</a><span>Follow us on LinkedIn</span> </li>
 <!-- LinkedIn End -->
</ul>

6. Selanjutnya sobat letakkan pada kotak kontent

7. Klik Simpan

Selesai sudah tutorial tentang Membuat Widget Icon dengan CSS Tanpa Javascript dan jQuery. Jika sobat ada keluhan atau masalah dalam memasang widget ini, silahkan saja menuliskan komentar pada akhir artikel ini.

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait