Wigdet Icon Sosial Mirip Tema developers Google Kusus Template VioMagz

Hai kembali lagi bersama saya admin blog rianseo, dimana domain utama blog saya adalah https://www.rianseo.com dan kini saya membuat blog lagi dengan subdomain https:/blog.rianseo.com.

Sebelumnya saya ingin memberitahukan sedikit, bahwa blog ini saya kususkan untuk membahas tutorial blogging dimana 70% artikel blog ini sebelumnya adalah hasil dari blog saya yang di Mywapblog, jadi kemungkinan sobat akan mendapatkan beberapa trik tentang Mywapblog di dalam blog ini.

Kenapa Gak di Hapus Mas?

Mywapblog tutup di tahun 2016 kemarin, jadi semua trik Mywapblog tersebut tidak ada yang berfungsinya lagi. Tapi kenapa semua post yang berkaitan dengan mywapblog tidak saya hapus?

Jawabannya simple, karena su sayang :)

Tujuan adanya blog yang beralamat dengan subdomain blog.rianseo.com  adalah kusus untuk membahas beberapa informasi blogspot dan juga trik-trik blog lainnya yang saya tunjukan buat kamu yang masih pemula atau baru belajar membuat blog gratis yang ada di blogspot.

Apabila kamu tertarik, kamu bisa kok follow blog ini untuk bisa mendapatkan beberapa informasi dan tips menarik tentang blogging. yang pastinya semua trik lewat pengalaman saya pribadi akan dibagikan di dalam blog ini.

Wigdet Icon Sosial Media Keren Mirip Tema developers Google

Trik ini saya buat untuk pengguna template VioMagz, jadi akan berbeda jika kamu menggunakan template selain VioMagz.

Seperti apa tampilan wigdet sosial media ini, silahkan kalian lihat contoh gambar dibawah ini.

Atau bisa juga langsung melihat lewat tampilan halaman lewat template sayaatau developers.google.com

Untuk tampilan via smartphone saya matikan, jadi wigdet ini hanya akan tampil lewat layar versi Desktop saja.

Langkah 1

Salin kode CSS dibawah ini.

/* FOOTER WIDGET */
#footer-widget-container {
 font-size: 18px;
    background: #f7f7f7;
}
/* SOCIAL ICON */
ul.nav-social {
    list-style: none;
    margin: 0;
 padding: 0;
}
ul.nav-social li {
    display: inline-block;
    padding: 0;
 margin: 20px;
    vertical-align: top;
    width: 192px;
}

ul.nav-social li a:hover {
 color:#2ec4f2;
}
ul.nav-social li a {
 color:rgba(0,0,0,.87);
    font-weight: 500;
    font-size: 14px;
}
.social-title {
    font-weight: 400;
    font-size: 14px;
    color: #212121;
}
.devsite-footer-promo-icon {
    color: rgba(0,0,0,.87);
    display: block;
    font-size: 48px;
    height: 48px;
    margin: 0 auto 8px;
    width: 48px;
}
@media only screen and (max-width:480px){
   ul.nav-social {
        display: none;
    }

Selanjutnya letakan tepat dibagian atas kode ]]></b:skin> Lalu klik Simpan 

Langkah 2

Salin semua kode HTML dibawah ini. 

<ul class="nav-social">
  <li><a href="https://blog.rianseo.com/" rel="nofollow"><img class="devsite-footer-promo-icon" src="//www.gstatic.com/images/icons/material/product/2x/chrome_chromium_64dp.png">Blog</a>
<div class="social-title">The latest news on the Chromium blog.</div> 
  </li><li><a href="https://blog.rianseo.com/" rel="nofollow"><img class="devsite-footer-promo-icon" src="//developers.google.com/site-assets/logo-github.svg">GitHub</a>
<div class="social-title">Fork our code samples and other open-source projects</div>
  </li>
<li><a href="https://twitter.com/" rel="nofollow"><img class="devsite-footer-promo-icon" src="//developers.google.com/site-assets/logo-twitter.svg">Twitter</a>
<div class="social-title">Connect with @ChromiumDev on Twitter.</div>
  </li>
  <li><a href="https://www.youtube.com/" rel="nofollow"><img class="devsite-footer-promo-icon" src="//www.gstatic.com/images/icons/material/product/2x/youtube_64dp.png">Videos</a>
<div class="social-title">Check out our videos.</div> 
  </li>
</ul>

Buka Tata Letak > Add Wigdet > Kode HTML

 Note : Ubah link sesuai dengan link kalian

Demo

Itulah tadi wigdet sosial media yang keren mirip seperti tema developers Google, Jika ada pertanyaan silahkan tulis di kolom komentar blog ini