Cara Mudah Membuat Social Media Buttons Dengan Modifikasi CSS

Social Media Buttons adalah Suatu tombol yang dimana terdapat fungsi untuk menuju link ke Media Sosial yang diinginkan.

Cara Mudah Membuat Social Media Buttons Dengan Modifikasi CSS
Agar tampilan Social Media Buttons lebih menarik, perlu adanya modifikasi CSS yang sangat sederhana dan mudah.

Yang perlu Anda lakukan untuk Social Media Buttons Dengan Modifikasi CSS sebagai berikut:

Cara Mudah Membuat Social Media Buttons Dengan Modifikasi CSS #1


1. Login ke blogger.com.
2. Cari kode </head> pada Tema > Edit HTML.
3. Copas (copy-paste) kode di bawah ini sebelum kode </head>.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

4. Cari kode </style> pada Tema > Edit HTML.
5. Copas (copy-paste) kode di bawah ini sebelum kode </style>.
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-android {
  background: #a4c639;
  color: white;
}

.fa-dribbble {
  background: #ea4c89;
  color: white;
}

.fa-vimeo {
  background: #45bbff;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-vine {
  background: #00b489;
  color: white;
}

.fa-foursquare {
  background: #45bbff;
  color: white;
}

.fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}

.fa-yahoo {
  background: #430297;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-rss {
  background: #ff6600;
  color: white;
}

6. Bila sudah memasang style button pada Tema > Edit HTML, sekarang simpan tema Anda.
7. Sekarang untuk menerapkan kode di atas, tambahkan kode HTML di bawah ini di dalam postingan pada tab HTML (bukan compose).
<!-- font awesome icons -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-snapchat-ghost"></a>
<a href="#" class="fa fa-skype"></a>
<a href="#" class="fa fa-android"></a>
<a href="#" class="fa fa-dribbble"></a>
<a href="#" class="fa fa-vimeo"></a>
<a href="#" class="fa fa-tumblr"></a>
<a href="#" class="fa fa-vine"></a>
<a href="#" class="fa fa-foursquare"></a>
<a href="#" class="fa fa-stumbleupon"></a>
<a href="#" class="fa fa-flickr"></a>
<a href="#" class="fa fa-yahoo"></a>
<a href="#" class="fa fa-reddit"></a>
<a href="#" class="fa fa-rss"></a>

Result:


Cara Mudah Membuat Social Media Buttons Dengan Modifikasi CSS #2

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-android {
  background: #a4c639;
  color: white;
}

.fa-dribbble {
  background: #ea4c89;
  color: white;
}

.fa-vimeo {
  background: #45bbff;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-vine {
  background: #00b489;
  color: white;
}

.fa-foursquare {
  background: #45bbff;
  color: white;
}

.fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}

.fa-yahoo {
  background: #430297;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-rss {
  background: #ff6600;
  color: white;
}

Penerapan kode di atas sama seperti Cara Mudah Membuat Social Media Buttons Dengan Modifikasi CSS #1.


Result:


Cobalah kreasikan sendiri di sini Tryit Editor

Related Search Pages:
  • Membuat 15 Efek Social Media Button Dengan CSS Part I
  • Cara Membuat WIDGET SOCIAL MEDIA FOLLOW US BUTTONS ...
  • Membuat Social Share Button Responsive Tanpa JavaScript di Blog
  • Membuat Loading saat Input Form
  • Membuat Tombol dengan Progres Button

Komentar

Posting Komentar

Postingan populer dari blog ini

Terlalu Dekat Dengan Pasar, 15 Minimarket Modern Di Malang Akan Di Tutup Oleh Pemkot Malang

Gambar
WESTERNBLOG.XYZ  - Rencana Pemerintah Kota Malang untuk menutup toko modern yang dekat dengan pasar tradisional terus menjadi matang. Selain itu, mencoba memasukkan produk-produk usaha mikro, kecil dan menengah (UMKM) ke dalam toko-toko ritel yang dioperasikan juga ditingkatkan. Mengenai penyelesaian toko modern yang sedang berjalan, itu juga membantu mengangkat produk UMKM. Upaya untuk mengendalikan toko modern di dekat pasar tradisional akan segera diterapkan pada mereka yang mengganti aturan. "Pengendalian toko modern ini harus dilakukan tahun ini," kata Walikota Malang, Sutiaji, Minggu (21/4). "Dalam waktu dekat, saya akan bertemu dengan toko ritel modern untuk membahas dan mengadakan perjanjian baru," jelas politisi Demokrat itu. Sebelumnya, Sutiaji mengaku telah bertemu dengan salah seorang General Manager sebuah toko modern di Jakarta. Dia mengumumkan bahwa dia telah membuka rencana untuk memutuskan toko modern, sementara berencana untuk memasarkan produk lok...
Baca selengkapnya

Cara Menghindari Konten Salinan dengan Baik dan Benar

Gambar
Apakah kalian tahu, bahwa konten Kalian hasil salinan atau bukan? disengaja dan tidak disengaja bisa saja terjadi pada Blog Kalian. Bagaimana tidak, banyak para Blogger diluar sana yang berbondong - bondong membuat artikel yang memungkin tulisan mereka sama walaupun tidak disengaja. Artikel ini tidak mengajari Kalian untuk berbuat curang dengan membuat konten salinan yang aman dan sebagainya, akan tetapi hal itu bisa dilakukan selama Kalian tahu caranya. Merasa kasihan dengan mereka para Blogger yang telah membuat artikel dengan susah payah lalu di Copy begitu saja tanpa ijin. Akan lebih baiknya lagi selain menampilkan sumber yang di cari di berbagai website yang Kalian kunjungi, hendahlak untuk mengganti kata - kata yang bertujuan sama dengan maksud menghindari konten salinan. Berikut ini contoh yang baik dan benar untuk mengbuat konten atau artikel dengan Mencantumkan sumber ilmu yang didapatkan. Mengbuat Konten atau Artikel dengan Mencantumkan Sumber "Banyak Para Blogger membua...
Baca selengkapnya

112 TPS di Riau akan melakukan pengulangan Coblosan dan Lanjutan

Gambar
WESTERNBLOG.XYZ - Bawaslu Riau merekomendasikan bahwa ada 112 tempat pemungutan suara yang akan melakukan pemungutan suara ulang (PSU) dan pemilihan lebih lanjut. Ini dilakukan karena masalah di lapangan. "Kami sudah menyampaikan ini ke KPU Riau. Ini karena banyaknya laporan yang kami terima dari publik saat pemilihan 17 April 2019," kata Ketua Bawaslu Riau, Rusidi Rusdan Lubis. Rusidi menjelaskan rekomendasi PSU dan melanjutkan setelah partainya memverifikasi dan mengumpulkan hasil data pemantauan di TPS di Riau. Hasil pengawasan ini kemudian ditinjau dan dibahas dua hari setelah pemungutan suara. "Diskusi dilakukan secara komprehensif dengan merekapitulasi peristiwa dan masalah khusus yang terjadi di semua TPS di Riau," kata Rusidi. Menurut Rusdi, berdasarkan hasil pengumpulan masalah, ditemukan bahwa 26 tempat pemungutan suara akan dilakukan oleh PSU dan 86 tempat pemungutan suara dilaksanakan dengan pemilihan lebih lanjut. "(Sebanyak) 26 tempat pemungutan ...
Baca selengkapnya