Cara Membuat Social Media Button untuk Blogger

Thursday 31 May 2018

Akhirnya Postingan saya yang pertama tahun 2018, setelah hiatus selama tiga tahun lebih. Postingan terakhir saya adalah Akame ga Kill Blogger Template. Di postingan yang pertama setelah hiatus ini adalah Cara Membuat Social Media Button untuk Blogger.

Buat yang belum tahu Social Media Button, adalah sebuah tombol yang apabila di klik maka akan mengalihkan pengguna ke link yang sudah ditentukan, misalnya ketika kita klik tombol Sosial Media Facebook atau Instagram maka kita akan dialihkan ke profil pengguna. Kurang lebih singkatnya seperti itu.

Untuk contoh Social Media Button sendiri bisa dilihat pada halaman atas kiri bagian header blog saya ini disitu terdapat Social Media Button untuk Facebook, Twitter, Google Plus dan Instagram. Silahkan tes dengan mengklik tombol tersebut dan follow akun saya yaa...

Berikut ini adalah tutorialnya

Langkah Pertama 1) :
-Tambahkan Link eksternal CSS berikut dan letakkan tepat dibawah tag ]]></b:skin>

-Tambahkan tag HTML, untuk tag HTML ini penempatannya bebas, dalam contoh ini saya letakkan milik saya di bawah tag <header>

Di atas adalah Social Media Button yang dapat digunakan, apabila terlalu banyak dan tidak memiliki semua Media Sosial diatas bisa gunakan seperlunya saja, Dalam contoh ini saya hanya menggunakan Sosial media Facebook, Twitter, Google Plus dan Instagram

Langkah Kedua 2) : (Untuk tombol sosial media kotak)
-Langkah kedua adalah tambahkan CSS untuk Social Media Button yan sudah dibuat agar terlihat lebih menarik. Letakkan CSS dibawah <b:skin><![CDATA[

.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;
}

(Untuk tombol media sosial lingkaran)
-Apabila kalian lebih suka sama tombol lingkaran daripada kotak gunakan syntax berikut dengan mengganti syntax CSS .fa {

.fa {
    padding: 20px;
    font-size: 30px;
    width: 30px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}

Syntax CSS diatas tidak perlu digunakan semua, hanya gunakan syntax CSS yang sesuai dengan Social Media Button yang digunakan.

Langkah Ketiga 3) :
-Apabila Syntax HTML dan CSS sudah dimasukkan langkah terakhir adalah penyesuaian ukuran sesuai selera. Silahkan di edit sendiri untuk bagian padding, font-size dan juga width nya sesuai selera.

Mungkin sekian dari saya, Semoga postingan saya yang pertama setelah hiatus selama tiga tahun ini bisa bermanfaat. Apabila ada yang mengalami kesulitan bisa dibuka website Ini
Atau bisa langsung ditanyakan di kolom komentar.
Sekian dan Terimakasih.

Tinggalkan Komentarmu

Subscribe to Posts | Subscribe to Comments

君の名は

ZFaqih-Share

Minatozaki Sana GIF

Cara Membuat Social Media Button untuk Blogger

Tinggalkan Komentarmu

Popular Post