Cara Membuat Icon Sosial Media Dengan Gaya Metro Elegan di Blog

Membuat icon sosial media di blog merupakan salah satu dari penerapan SEO. Alasannya apa ? tentu saja dengan memasang icon sosial media akan meningkatkan pengunjung blog dan meningkatkan popularitas blog di sosial media dan mesin pencarian. Selain memasang witget icon untuk optimalisasi search engine tetapi bisa juga digunakan untuk memperindah tampilan blog. Icon ini sangat elegant, tidak banyak pernak-pernik yang mengganggu. Jadi sangat direkomendasikan buat kalian para blogger untuk menggunakannya. Sebelumnya juga kami sudah memberitahu kalian cara Cara Membuat Tombol Sosial Media Melayang di Blog . Sekarang kami akan memberitahu cara membuat Icon Sosial Media dengan Gaya Metro Elegan di Blog
Membuat Icon Sosial Media Dengan Gaya Metro Elegan di Blog
Sosial Media Gaya Metro

1. Buka Dasbor Blogger → Tata Letak → Tambahkan Gatget → Pilih HTML/Javascript

2. Copy kode dibawah

<div class="metro-social">
<li><a class="fb" href="Your Facebook URL here"></a></li>
<li><a class="tw" href="Your Twitter URL here"></a></li>
<li><a class="gp" href="Your GooGle + URL here"></a></li>
<li><a class="fd" href="Your FeedBurner URL here"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: 
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>
<br />

3. Ganti huruf yang berwarna biru dengan kode kalian lalu Save

Popular posts from this blog

Contoh RPP IPA Kelas 2 Semester II (KTSP)

Image
RENCANA PELAKSANAAN PEMBELAJARAN (RPP) A.     Identitas 1.       Sekolah                         : SD Negeri 1 Gianyar 2.       Kelas/Semester             : II/ II 3.       Mata Pelajaran             : Ilmu Pengerahuan Alam 4.       Jumlah Pertemuan        : 3 x 35 menit (105 menit) B.      Standar Kompetensi        : 3.        Mengenal berbagai sumber energi yang sering dijumpai dalam kehidupan sehari-hari dan kegunaannya C.     Kompetensi Dasar            : 3.2      Mengidentifikasi jenis energi yang paling sering digunakan di lingkungan sekitar dan cara menghematnya D.     Indikator                           : 3.2.1         Menyebutkan jenis energi di lingkungan sekitar 3.2.2         Memberi contoh penggunaan energi di lingkungan sekitar 3.2.3        Melaporkan cara menghemat energi dalam kehidupan sehari-hari E.      Tujuan Pembelajaran      : 1.    Setelah membaca buku, mengamati media, melaksanakan tanya jawab dan mencocokan kartu, sisw
Read more

Sifat-Sifat dan Hubungan Bangun Segiempat

Image
1. PERSEGI Sifat-sifatnya : Mempunyai empat sisi yang sama panjang ( AB = AC = BD = DC ) Keempat sudutnya siku-siku (∠CAB = ∠ABD = ∠BDC = ∠DCA = 90°) Mempunyai 2 garis diagonal yang sama panjang dan saling berpotongan tegak lurus (AD = BC, AD ⊥ BC)  Mempunyai 2 pasang sisi yang sejajar ( AC // BD dan AB // DC) Mempunyai 4 simetri lipat Mempunyai 4 simetri putar  Persegi adalah belah ketupat yang salah satu sudutnya siku-siku Persegi adalah persegi panjang yang dua sisi yang berdekatan sama panjang 2. PERSEGI PANJANG Sifat-sifatnya : Mempunyai 4 buah sisi, sisi-sisi yang berhadapan sama panjang ( PR = QS, PQ = RS)  Keempat sudutnya siku-siku (∠PRS = ∠RSQ = ∠SQP = ∠QPR = 90°)  Mempunyai 2 garis diagonal yang saling berpotongan dan sama panjang (PS = QR)  Mempunyai 2 pasang sisi yang sejajar ( PR // QS dan RS //PQ)  Mempunyai 2 simetri lipat  Mempunyai 2 simetri putar  Persegipanjang adalah jajargenjang yang salah satu sudutnya siku-siku 3. JAJAR GENJAN
Read more

Media Pembelajaran : Pop Up Book

Image
 Media Pop-Up   Book adalah   media   berbentuk   buku   yang   mempunyai unsur   tiga   dimensi   dan   gerak.   Materi   pada Pop-Up   Book disampaikan dalam   bentuk   gambar   yang   menarik   karena   terdapat   bagian   yang   apabila dibuka dapat bergerak atau berubah bentuk. Media ini juga memberikan kejutan-kejutan dalam setiap halamannya yang dapat mengundang kekaguman ketika halamannya dibuka dan memberikan kesan tersendiri karena warnanya yang colorful. Di sudut tiap halaman yang muncul akan ada penjelasan lebih lanjut mengenai gambar-gambarnya. Penggunaan Pop-Up Book   sangat cocok untuk memberikan variasi pembelajaran. Media Pop-Up Book masih jarang digunakan oleh guru disekolah untuk membelajarkan materi terutama pada sekolah yang terletak dipedesaan. Hal ini terjadi karena ketidaktahuan pihak guru dan kurangnya sosialisasi tentang pembuatan maupun   penggunaan media Pop-Up Book. Ini merupakan suatu kesempatan untuk memperkenalkan media Pop-Up Book ke sekolah-se
Read more