Langsung ke konten utama

Membuat Widget Social Media Button Flat Design di Blog

Social media button atau biasa di sebut tombol sosial media, di gunakan untuk menghubungkan beberapa sosial media yang kita miliki agar pengunjung bisa langsung berinteraksi dan melihat sosial media yang kita miliki. Namun kali ini yang berbeda adalah tombol sosial media ini menggunakan flat design yang kekinian, untuk itulah pada tutorial kali ini saya akan memberikan cara membuat widget sosial media button dengan effect flat design.
Membuat Widget Social Media Button Flat Design di Blog

Widget ini adalah widget yang ringan karena tidak menggunakan javascript, dan hanya menggunakan script CSS dan HTML saja. Jadi agan tidak perlu takut untuk memasang widget social media button flat design ini. Sedikit informasi saja, flat design ini di populerkan oleh Google, dan banyak di gunakan dalam berbagai produk google.

(Baca juga : Cara Membuat Gambar Flat Design Ala Tutorial Umum Blog)

Bagi yang belum tahu bagaimana cara memasang widget social media button flat design ini, ikuti langkah-langkah dari saya.

Cara Memasang Widget Social Media Button Flat Design di Blog

  • Langkah pertama masuk ke akun Blogger agan
  • Kemudian pilih menu Tata Letak, klik Tambahkan Gadget di tempat yang agan inginkan, klik HTML/JavaScript
  • Masukan Judul widget sesuai keinginan agan, lalu masukan script di bawah ini pada kolom Konten
    • <style>
    .simplifymedsos a{
    position: relative;
        display: inline-block;
        text-align: center;
        color: #fff;
        font-size: 26px;
        text-decoration: none;
        line-height: 48px;
        width: 48px;
        height: 48px;
        overflow: hidden;
        background: #000;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        -moz-transition: 0.5s;
        -o-transition: 0.5s;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.35);
        -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.35);
        -o-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.35);
        -ms-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.35);
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.35);
    }
    .simplifymedsos a i{
    }

    .simplifymedsos .facebook{
    background: #3b5998;
        text-shadow: 0px 0px #2d4278, 1px 1px #2d4278, 2px 2px #2d4278, 3px 3px #2d4278, 4px 4px #2d4278, 5px 5px #2d4278, 6px 6px #2d4278, 7px 7px #2d4278, 8px 8px #2d4278, 9px 9px #2d4278, 10px 10px #2d4278, 11px 11px #2d4278, 12px 12px #2d4278, 13px 13px #2d4278, 14px 14px #2d4278, 15px 15px #2d4278, 16px 16px #2d4278, 17px 17px #2d4278, 18px 18px #2d4278, 19px 19px #2d4278, 20px 20px #2d4278, 21px 21px #2d4278, 22px 22px #2d4278, 23px 23px #2d4278, 24px 24px #2d4278, 25px 25px #2d4278, 26px 26px #2d4278, 27px 27px #2d4278, 28px 28px #2d4278, 29px 29px #2d4278, 30px 30px #2d4278;
    }
    .simplifymedsos .twitter{
    background: #00aced;
    text-shadow: 0px 0px #0087ba, 1px 1px #0087ba, 2px 2px #0087ba, 3px 3px #0087ba, 4px 4px #0087ba, 5px 5px #0087ba, 6px 6px #0087ba, 7px 7px #0087ba, 8px 8px #0087ba, 9px 9px #0087ba, 10px 10px #0087ba, 11px 11px #0087ba, 12px 12px #0087ba, 13px 13px #0087ba, 14px 14px #0087ba, 15px 15px #0087ba, 16px 16px #0087ba, 17px 17px #0087ba, 18px 18px #0087ba, 19px 19px #0087ba, 20px 20px #0087ba, 21px 21px #0087ba, 22px 22px #0087ba, 23px 23px #0087ba, 24px 24px #0087ba, 25px 25px #0087ba, 26px 26px #0087ba, 27px 27px #0087ba, 28px 28px #0087ba, 29px 29px #0087ba, 30px 30px #0087ba;
    }
    .simplifymedsos .googleplus{
    background: #dd4a3a;
        text-shadow: 0px 0px #c23122, 1px 1px #c23122, 2px 2px #c23122, 3px 3px #c23122, 4px 4px #c23122, 5px 5px #c23122, 6px 6px #c23122, 7px 7px #c23122, 8px 8px #c23122, 9px 9px #c23122, 10px 10px #c23122, 11px 11px #c23122, 12px 12px #c23122, 13px 13px #c23122, 14px 14px #c23122, 15px 15px #c23122, 16px 16px #c23122, 17px 17px #c23122, 18px 18px #c23122, 19px 19px #c23122, 20px 20px #c23122, 21px 21px #c23122, 22px 22px #c23122, 23px 23px #c23122, 24px 24px #c23122, 25px 25px #c23122, 26px 26px #c23122, 27px 27px #c23122, 28px 28px #c23122, 29px 29px #c23122, 30px 30px #c23122;
    }
    .simplifymedsos .rssfeed{
    background:#ee802f;
        text-shadow: 0px 0px #da7224, 1px 1px #da7224, 2px 2px #da7224, 3px 3px #da7224, 4px 4px #da7224, 5px 5px #da7224, 6px 6px #da7224, 7px 7px #da7224, 8px 8px #da7224, 9px 9px #da7224, 10px 10px #da7224, 11px 11px #da7224, 12px 12px #da7224, 13px 13px #da7224, 14px 14px #da7224, 15px 15px #da7224, 16px 16px #da7224, 17px 17px #da7224, 18px 18px #da7224, 19px 19px #da7224, 20px 20px #da7224, 21px 21px #da7224, 22px 22px #da7224, 23px 23px #da7224, 24px 24px #da7224, 25px 25px #da7224, 26px 26px #da7224, 27px 27px #da7224, 28px 28px #da7224, 29px 29px #da7224, 30px 30px #da7224;
    }
    .simplifymedsos .facebook:hover {
        color: #3b579d;
        opacity: 1;
        /* transform: rotate(360deg); */
        background: #fff;
        text-shadow: 0px 0px #d4d4d4, 1px 1px #d4d4d4, 2px 2px #d4d4d4, 3px 3px #d4d4d4, 4px 4px #d4d4d4, 5px 5px #d4d4d4, 6px 6px #d4d4d4, 7px 7px #d4d4d4, 8px 8px #d4d4d4, 9px 9px #d4d4d4, 10px 10px #d4d4d4, 11px 11px #d4d4d4, 12px 12px #d4d4d4, 13px 13px #d4d4d4, 14px 14px #d4d4d4, 15px 15px #d4d4d4, 16px 16px #d4d4d4, 17px 17px #d4d4d4, 18px 18px #d4d4d4, 19px 19px #d4d4d4, 20px 20px #d4d4d4, 21px 21px #d4d4d4, 22px 22px #d4d4d4, 23px 23px #d4d4d4, 24px 24px #d4d4d4, 25px 25px #d4d4d4, 26px 26px #d4d4d4, 27px 27px #d4d4d4, 28px 28px #d4d4d4, 29px 29px #d4d4d4, 30px 30px #d4d4d4;
    }
    .simplifymedsos .twitter:hover {
        color: #00aced;
        background: #fff;
        text-shadow: 0px 0px #d4d4d4, 1px 1px #d4d4d4, 2px 2px #d4d4d4, 3px 3px #d4d4d4, 4px 4px #d4d4d4, 5px 5px #d4d4d4, 6px 6px #d4d4d4, 7px 7px #d4d4d4, 8px 8px #d4d4d4, 9px 9px #d4d4d4, 10px 10px #d4d4d4, 11px 11px #d4d4d4, 12px 12px #d4d4d4, 13px 13px #d4d4d4, 14px 14px #d4d4d4, 15px 15px #d4d4d4, 16px 16px #d4d4d4, 17px 17px #d4d4d4, 18px 18px #d4d4d4, 19px 19px #d4d4d4, 20px 20px #d4d4d4, 21px 21px #d4d4d4, 22px 22px #d4d4d4, 23px 23px #d4d4d4, 24px 24px #d4d4d4, 25px 25px #d4d4d4, 26px 26px #d4d4d4, 27px 27px #d4d4d4, 28px 28px #d4d4d4, 29px 29px #d4d4d4, 30px 30px #d4d4d4;
    }
    .simplifymedsos .googleplus:hover {
    color: #dd4a3a;
    background: #fff;
        text-shadow: 0px 0px #d4d4d4, 1px 1px #d4d4d4, 2px 2px #d4d4d4, 3px 3px #d4d4d4, 4px 4px #d4d4d4, 5px 5px #d4d4d4, 6px 6px #d4d4d4, 7px 7px #d4d4d4, 8px 8px #d4d4d4, 9px 9px #d4d4d4, 10px 10px #d4d4d4, 11px 11px #d4d4d4, 12px 12px #d4d4d4, 13px 13px #d4d4d4, 14px 14px #d4d4d4, 15px 15px #d4d4d4, 16px 16px #d4d4d4, 17px 17px #d4d4d4, 18px 18px #d4d4d4, 19px 19px #d4d4d4, 20px 20px #d4d4d4, 21px 21px #d4d4d4, 22px 22px #d4d4d4, 23px 23px #d4d4d4, 24px 24px #d4d4d4, 25px 25px #d4d4d4, 26px 26px #d4d4d4, 27px 27px #d4d4d4, 28px 28px #d4d4d4, 29px 29px #d4d4d4, 30px 30px #d4d4d4;
    }
    .simplifymedsos .rssfeed:hover {
    color: #ee802f;
    background: #fff;
        text-shadow: 0px 0px #d4d4d4, 1px 1px #d4d4d4, 2px 2px #d4d4d4, 3px 3px #d4d4d4, 4px 4px #d4d4d4, 5px 5px #d4d4d4, 6px 6px #d4d4d4, 7px 7px #d4d4d4, 8px 8px #d4d4d4, 9px 9px #d4d4d4, 10px 10px #d4d4d4, 11px 11px #d4d4d4, 12px 12px #d4d4d4, 13px 13px #d4d4d4, 14px 14px #d4d4d4, 15px 15px #d4d4d4, 16px 16px #d4d4d4, 17px 17px #d4d4d4, 18px 18px #d4d4d4, 19px 19px #d4d4d4, 20px 20px #d4d4d4, 21px 21px #d4d4d4, 22px 22px #d4d4d4, 23px 23px #d4d4d4, 24px 24px #d4d4d4, 25px 25px #d4d4d4, 26px 26px #d4d4d4, 27px 27px #d4d4d4, 28px 28px #d4d4d4, 29px 29px #d4d4d4, 30px 30px #d4d4d4;
    }
    </style>

    <div class="simplifymedsos" style="margin: 5px;">
    <a class="facebook" href="www.link-URL-sosial-media-agan.com" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a>
    <a class="twitter" href="www.link-URL-sosial-media-agan.com" rel="nofollow" target="_blank"><i class="fa fa-twitter"></i></a>
    <a class="googleplus" href="www.link-URL-sosial-media-agan.com" rel="nofollow" target="_blank"><i class="fa fa-google-plus"></i></a>
    <a class="rssfeed" href="www.link-URL-sosial-media-agan.com" rel="nofollow" target="_blank"><i class="fa fa-rss"></i></a>
    </div>
  • Pengaturan :
  • Setelah selesai mengatur, pilih Simpan
  • Sekarang tombol sosial media yang keren sudah agan pasang di blog.
    CARA MEMBUAT WIDGET TOMBOL SOSIAL MEDIA (FB, TWITTER, GOOGLE+) DI BLOG


Demikian tutorial yang singkat dari saya mengenai cara membuat widget social media button flat design. Untuk pertanyaan mengenai widget sosial media ini, silahkan agan masukan kedalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum, semoga artikel ini bermanfaat bagi agan atau sista. Untuk tutorial yang lainnya mengenai blogging, silahkan tetap kunjungi blog Tutorial Umum.

Postingan populer dari blog ini

Cara Memasang Komentar Disqus di Blogger dengan Mudah

Komentar Disqus adalah sistem komentar paling di gemari oleh para blogger, karena banyak memiliki fitur-fitur yang lebih baik daripada sistem komentar yang lainnya. Karena komentar disqus mudah di gunakan, apalagi sistem komentar disqus yang mobile friendly , yaitu fitur yang bisa di gunakan di berbagai device . Untuk itu pada tutorial kali ini, saya akan memberikan cara memasang komentar Disqus di blogger dengan mudah. Akan tetapi agan tidak perlu takut kalau komentar yang berada di blogger akan hilang apabila agan memasang komentar disqus ini, karena fitur dari sistem komentar disqus yang dapat mengimport komentar yang sudah ada di blog agan. Untuk cara memasang komentar disqus di blogger dengan mudah , ikuti langkah-langkah dari saya berikut ini. Cara Memasang Komentar Disqus di Blogger Langkah pertama masuk ke dalam akun Blogger agan Kemudian masuk ke halaman Disqus , langsung pilih GET STARTED Silahkan masukan Nama , Email , dan Password yang agan inginkan di form tersebut Selanj...
Baca Lebih Lanjut »

Cara Membuat Pop Up Like Box Facebook di Blogger

Pada artikel kali ini saya akan memberikan tutorial tentang cara membuat pop up like box facebook fanpage di blogger . Perlu kalian ketahui script pop up adalah script yang paling di benci pengunjung karena sangat menghalangi pengelihatan mereka, oleh karena itu sebaiknya kalian memikirkan para pengunjung blog juga. Baca juga :  Cara Mudah Menambahkan Simple Fanpage Facebook di Widget Blogger Namun jika kalian ingin meningkatkan like atau pengunjung facebook fanpage kalian, hal ini sangat di rekomendasikan karena visitor dari facebook juga di perlukan. Dengan tampilan yang sudah saya modifikasi sehingga facebook fanpage ini terlihat lebih menarik di lihat mata, dan saya menggunakan tombol close yang jelas agar pengunjung juga tidak kebingungan saat ingin menutup pop up like facebook ini. Kurang lebih tampilannya seperti ini. Nah untuk cara memasang pop up like box facebook di blogger, ikuti langkah-langkah dari saya berikut ini. Baca juga :  Cara Membuat Widget Breaking News ...
Baca Lebih Lanjut »

Free Download Tutor Magazine Template Responsive Fast Loading

Pada kesempatan kali ini saya akan membagikan sebuah template yang saya desain sendiri, dan sedang saya pakai sekarang. karena saya rasa banyak yang sudah menanyakan tentang template saya. Sebetulnya template ini tidak jauh berbeda seperti template yang saya desain sebelumnya, karena hampir memiliki fitur yang sama. Template ini saya beri nama Tutor Magazine Template karena ini adalah template yang pernah saya pakai. (Baca juga :  Update Template Tutor Magazine 3D Versi 1.0, Template Biru Paling Favorit ) Tutor Template ini menggunakan desain yang Responsive jadi bisa support di berbagai device seperti Smartphone, Tablet, Komputer, dan Laptop. Tentunya akan membuat blog kalian menjadi sangat menarik. Tutor Template ini juga sudah memiliki fitur Seo, jadi kalian tidak perlu repot-repot mengatur meta seo secara manual. Jadi akan mempermudah kalian dalam menaikan peringkat di situs pencarian. Bagi yang masih penasaran dengan fitur-fitur dari Tutor Template, berikut adalah fitur-fitu...
Baca Lebih Lanjut »

Download Tutor Green Magazine Blogger Template Premium Responsive Fast Loading

Setelah sebelumnya saya membagikan template tutor magazine responsive fast loading , kali ini saya akan membagikan template yang saya beri nama Tutor Green Magazine . Sesuai dengan namanya, template ini dibuat dengan warna hijau sebagai warna utamanya. (Baca juga :  Download Template Premium Paling Laris 2017, Hijau Magazine V1.0 Template ) Template Tutor green magazine ini memiliki desain yang responsive, dimana template ini dapat tampil di berbagai device seperti handphone, smartphone, laptop, dan komputer. Sehingga akan membuat blog kalian akan lebih menarik. Dengan konsep bentuk daun dan warna daun yang saya buat, di harapkan para pengunjung blog dapat merasa tenang dan betah berlama-lama saat mengunjungi blog yang memakai template ini. Apalagi dengan fitur SEO otomatis serta kecepatan yang sudah dimiliki template ini dapat memudahkan kalian dalam membangun blog yang bagus, cepat, dan SEO tentunya. (Baca juga :  Free Download Tutor Magazine Template Responsive Fast Load...
Baca Lebih Lanjut »

Cara Menghapus Icon Gambar Obeng dan Tang di Blogger

Pada artikel ini saya akan membagikan tentang cara menghapus icon gambar obeng dan tang di blogger . Sebenarnya cara ini sudah saya berikan di artikel saya tentang cara mudah menaikan SEO score di chkme.com , tetapi hanya sekilas, jadi tidak terlalu terlihat. Baca juga :  Cara Mudah Menaikan SEO Score di chkme.com Icon obeng dan tang ini sebenarnya berfungsi untuk mengedit widget yang ada di blog tersebut, jadi kita tidak perlu khawatir ini akan merusak blog kita, karena sebenarnya icon gambar obeng dan tang ini hanya bisa di lihat oleh admin blog tersebut saja. Tetapi dalam hal tertentu, terkadang ada juga icon gambar obeng dan tang ini tetap muncul di halaman blog walaupun orang tersebut bukan admin dari blog atau situs tersebut, hal inilah yang harus di hindari bagi setiap blogger. Sebenarnya icon obeng dan tang ini hanya menggunakan satu script saja yaitu <b:include name='quickedit'/> . Jika kalian merasa terganggu dengan icon gambar obeng dan tang ini, silahkan ikuti...
Baca Lebih Lanjut »

Cara Mudah Menghapus Blog di Blogger

Menghapus blog biasanya di lakukan pada saat blog yang kita buat salah nama, atau bisa jadi error pada banyak artikel. Kejadian ini adalah hal yang umum di lakukan, tetapi lebih baik sobat pikirkan terlebih dahulu sebelum membangun sebuah blog karena kejadian seperti ini banyak terjadi di kalangan blogger pemula. Bagi kalian yang sudah terlanjur, dan ingin menghapus blog kalian, kali ini saya akan memberikan cara mudah menghapus blog di blogger . (Baca juga : Cara Menghapus Tulisan Diberdayakan oleh Blogger ) Bagi sobat yang ingin menghapus blog , ikuti langkah-langkah dari saya berikut ini. Cara Menghapus Blog di Blogger Langkah pertama masuk ke akun Blogger sobat Pilih blog yang ingin di hapus Pilih menu Setelan , pilih Lainnya , kemudian pilih Hapus blog Sebelum menghapus, jika sobat ingin mengekspor blog sobat silahkan pilih Download blog Untuk langsung menghapus blog silahkan pilih Hapus Blog ini Sekarang blog sobat sudah di hapus, untuk menghapus secara permanen, silahkan ikuti ...
Baca Lebih Lanjut »

3 Tips Jitu Menentukan Template yang Cocok untuk Blog Kita

Kita tahu Template adalah hal yang sangat identik dengan blog, namun apabila template kita kurang menarik. Bisa jadi para pengunjung blog kita hanya melihat sekejap mata saja, atau hanya 1 halaman saja yang mereka lihat dikarenakan tampilan yang kurang menarik. Untuk itulah saya akan membahas tentang 3 tips jitu menentukan template yang cocok untuk blog kita . Memang sebetulnya tampilan bukanlah hal utama dalam sebuah blog, tetapi konten yang bermutu dan berbobotlah yang membuat blog kita memiliki banyak pengunjung. Namun apabila mereka hanya datang tak di undang dan pulang tak di antar seperti jelangkung, atau datang hanya membuka 1 halaman dan pergi tanpa meninggalkan komentar. Bagi kalian yang ingin mengetahu tips jitu menentukan template yang cocok untuk blog kita, baca terus artikel ini. (Baca juga :  Update Template Tutor Magazine 3D Versi 1.0, Template Biru Paling Favorit ) Cara Menentukan Template yang Cocok untuk Blog Kita 1. Berdasarkan Topik atau niche blog Niche Umum B...
Baca Lebih Lanjut »