Cara Membuat Tombol Follow Us Responsive di Blog Keren

Blogger Sukses ID ~ Cara Membuat Follow Us di Blog - Halo sobat blogger! pada kesempatan yang sangat baik ini saya akan sharekan tutorial atau cara membuat tombol follow us di blog, tombol follow atau tombol ikuti.
Cara Membuat Follow Us dI Blog
Pada umunya kamu bisa membuat tombol ikuti atau follow dengan menambahkan widget baru di tata letak, namun itu desain standar atau bawaan blogger, ada juga tombol follow yang bagus di beberapa template bawaan yang premium.

Nah jika kamu ingin membuat tombol follow atau tombol ikuti blog yang keren sepeti di template template pro version kamu tinggal ikuti saja tutorial yang saya berikan dibawah. Tutorial cara membuat tombol follow us ini ada dua style atau dua macam desain, tadinya saya mau membuat style yang banyak tapi agak males jadi saya buat dua saja.

Oya saya juga pernah memberikan tutorial cara membuat kotak berlangganan ala igniel yang keren diblog, kamu juga bisa membuatnya di blog agar pengunjung bisa berlanganan atau memsubscribe blog kamu.

Dan perlu kamu tau membuat tombol follow us atau kotak berlanganan di blog itu sangat bermanfaat sekali agar pengunjung bisa mengikuti blog kamu sehingga setiap kali kamu update artikel atau konten postingan baru bisa mendapatkan notif via email dan kemungkinan mereka akan mengunjungi artikel atau konten postingan yang kamu publikasikan di blog.

Jadi ayo buat membuat tombol follow us di blog keren, oya lagi ini bukan hanya tombol follow blog saja tapi disertai tombol follow media sosial, jadi pengunjung juga bisa memollow media sosial seperti facebook, instagram, dan akun media sosial lainya.

Owalah sangat bermanfaat dan berguna sekali berarti! ohya tentu jadi terus lah ikuti tutorial ini dan kamu pilih mana desain tombol follos us yang kamu sukai untuk di pasang di sidebar blog kamu oke. Sekarang basa basinya udah basi jadi langsung saja ke tutorialnya.

Cara Membuat dan Memasang Tombol Follow Us Keren Di Blog

Style 1

Langkah Pertama
Kamu masuk atau login ke akun blogger masing masing.

Langkah Kedua
Pilih menu Tema > Edit HTML dan letakan kode dibawah tepat dibawah tag kode </style> atau ]]></b:skin> silahkan cari dengan CTRL + F biar cepat.


/* CSS Social */
#social-counts > li{display:block;margin-bottom:1px;padding:0}
#social-counts > li > a{display:block;font-size:13px;font-weight:700;height:40px;line-height:40px;padding:0 10px;opacity:.95}
#social-counts > li:last-child > a{margin-bottom:0}
#social-counts > li > a:hover,#social-counts > li > a:focus{opacity:.8;color:#fff}
#social-counts > li > a > .fa{background:rgba(0,0,0,0.1);display:inline-block;height:25px;width:25px;line-height:25px;margin-right:10px;text-align:center;vertical-align:middle}
#social-counts.modal-1 > li > a,#social-counts.modal-3 > li > a,#social-counts.modal-1 > li > a > .fa,#social-counts.modal-3 > li > a > .fa{color:#fff}
.social-facebook{background:#3C599F}
.social-twitter{background:#32CCFE}
.social-pinterest{background:#cb2027}
.social-telegram{background:#0088cc}
.social-rss{background:#f26522}
.social-youtube{background:#bb0000}
.social-blogger{background:#f39c12}
.social-vimeo{background:#229ACC}
.social-linkedin{background:#0085AE}
.social-whatsapp{background:#128c7e}
.social-instagram{background:#517fa6;background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4)}
Langkah Ketiga
Silahkan Simpan dulu kemudian pergi ke Tata Letak dan Tambah Gatget > HTML/JavaScript.
Cara Membuat Gatget Baru
Lalu letakan semua kode dibawah.


<ul id="social-counts" class="social-counts modal-1 typo-white">
   <li>
      <a href="#" target="blank" rel="nofollow noopener" class="social-facebook">
      <span class="fa fa-facebook"></span>
      <span class="follow-inner-text">Facebook</span>
      <span class="follow-redirect-text pull-right">Like</span>
      </a>
   </li>
   <li>
      <a href="#" target="blank" rel="nofollow noopener" class="social-twitter">
      <span class="fa fa-twitter"></span>
      <span class="follow-inner-text">Twitter</span>
      <span class="follow-redirect-text pull-right">Follow</span>
      </a>
   </li>
   <li>
      <a href="#" target="blank" rel="nofollow noopener" class="social-telegram">
      <span class="fa fa-telegram"></span>
      <span class="follow-inner-text">Telegram</span>
      <span class="follow-redirect-text pull-right">Follow</span>
      </a>
   </li>
   <li>
      <a href="#" target="blank" rel="nofollow noopener" class="social-instagram">
      <span class="fa fa-instagram"></span>
      <span class="follow-inner-text">Instagram</span>
      <span class="follow-redirect-text pull-right">Follow</span>
      </a>
   </li>
   <li>
      <a href="#" target="blank" rel="nofollow noopener" class="social-blogger">
      <span class="fa fa-user"></span>
      <span class="follow-inner-text">Blogger</span>
      <span class="follow-redirect-text pull-right">Follow</span>
      </a>
   </li>
</ul>
Langkah Empat
Nah sebelum menyimpanya kamu ubah tanda pagar ( # ) jadi link yang mengarah ke media sosial dan follow blog kamu, jika sudah silahkan simpan.

Demonya akan saya tampilkan di akhir postingan, sekarang lanjut ke style 2.

Style 2

Langkah Pertama
Seperti cara tadi kamu masuk atau login ke akun blogger masing masing.

Langkah Kedua
Pilih menu Tema > Edit HTML dan letakan kode dibawah tepat dibawah tag kode </style> atau ]]></b:skin> silahkan cari dengan CTRL + F biar cepat.


/* CSS Follow us */
.invert-socials-icon{display:inline-block;width:100%}
.invert-socials-icon ul{margin:0;padding:0;list-style:none;margin-bottom:-5px;margin-right:-5px;overflow:hidden}
.invert-socials-icon ul li:before{display:none}
.invert-socials-icon ul li{margin:0;padding:0;list-style:none;float:left;width:32px;height:32px;line-height:32px;text-align:center;background:#00baff;font-size:18px;margin:3px;border:0}
.invert-socials-icon ul li a{line-height:32px;display:block;color:#fff}
.invert-socials-icon ul li a:hover{color:#fff}
.invert-socials-icon ul li.home{background:#83868a}
.invert-socials-icon ul li.facebook{background:#516ca4}
.invert-socials-icon ul li.googleplus{background:#f20000}
.invert-socials-icon ul li.rss{background:#f29400}
.invert-socials-icon ul li.youtube{background:#f20000}
.invert-socials-icon ul li.dribbble{background:#dc71a6}
.invert-socials-icon ul li.deviantart{background:#4c5e51}
.invert-socials-icon ul li.pinterest{background:#f20000}
.invert-socials-icon ul li.instgram{background:#406f94}
.invert-socials-icon ul li.tumblr{background:#395875}
.invert-socials-icon ul li.linkedin{background:#1985bc}
.invert-socials-icon ul li.soundcloud{background:#f60}
.invert-socials-icon ul li.delicious{background:#3274d1}
.invert-socials-icon ul li.flickr{background:#ff0084}

Langkah Ketiga
Jangan di simpan dulu, kamu cari kode <head> dan letakan dibawahnya.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>

Jika sudah baru kamu klik simpan.

Langkah Keempat
Silahkan Simpan dulu kemudian pergi ke Tata Letak dan Tambah Gatget > HTML/JavaScript.

Cara Membuat Gatget Baru
Lalu letakan semua kode dibawah.

<div class='invert-socials-icon mom-socials-widget'>
    <ul>
        <li class='facebook'><a href='#' rel='nofollow' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook'/></i></a></li>
        <li class='twitter'><a href='#' rel='nofollow' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter'/></i></a></li>
        <li class='googleplus'><a href='#' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus'/></i></a></li>
        <li class='rss'><a href='#' rel='nofollow' target='_blank' title='Follow us on RSS'><i class='fa fa-rss '/></i></a></li>
        <li class='youtube'><a href='#' rel='nofollow' target='_blank' title='Follow us on Youtube'><i class='fa fa-youtube '/></i></a></li>
        <li class='dribbble'><a href='#' rel='nofollow' target='_blank' title='Follow us on Dribble'><i class='fa fa-dribbble '/></i></a></li>
        <li class='deviantart'><a href='#' rel='nofollow' target='_blank' title='Follow us on Delicious'><i class='fa fa-deviantart'/></i></a></li>
        <li class='pinterest'><a href='#' rel='nofollow' target='_blank' title='Follow us on Pinterest'><i class='fa fa-pinterest '/></i></a></li>
        <li class='instgram'><a href='#' rel='nofollow' target='_blank' title='Follow us on Instagram'><i class='fa fa-instagram '/></i></a></li>
        <li class='tumblr'><a href='#' rel='nofollow' target='_blank' title='Follow us on Tumblr'><i class='fa fa-tumblr '/></i></a></li>
        <li class='linkedin'><a href='#' rel='nofollow' target='_blank' title='Follow us on LinkedIn'><i class='fa fa-linkedin '/></i></a></li>
        <li class='soundcloud'><a href='#' rel='nofollow' target='_blank' title='Follow us on diigo'><i class='fa fa-soundcloud '/></i></a></li>
        <li class='delicious'><a href='#' rel='nofollow' target='_blank' title='Follow us on Delicious'><i class='fa fa-delicious '/></i></a></li>
        <li class='flickr'><a href='#' rel='nofollow' target='_blank' title='Follow us on Medium'><i class='fa fa-flickr '/></i></a></li>
    </ul>
</div>
</div>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="#" rel="nofollow">Follow us widget</a>

Langkah Kelima
Nah sebelum menyimpanya kamu ubah tanda pagar ( # ) jadi link yang mengarah ke media sosial dan follow blog kamu, jika sudah silahkan simpan.

Oke sekarang kamu bisa lihat Demonya dibawah.

Style 1

cara membuat follow us di blog

Style 2

Cara Membuat Tombol Follow Us Responsive DI Blog Keren
Penutup
Demikian tentang Cara Membuat Tombol Follow Us Responsive DI Blog Keren. Semoga tutorial ini bisa bermanfaat bagi banyak orang, terima kasih buat sobat yang sudah mengikuti tutorial ini dan sering berkunjung bloggersukses.id.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel