PpVYjUNPJxHpgz48ODtJ762UUZTduUYkOHyHjNeZ
Bookmark

Cara Membuat Tombol Follow Us Media Sosial Responsive Di Blogger

Cara membuat tombol follow us di Blogger

Menambahkan tombol follow us atau ikuti kami yang memiliki banyak tombol media sosial didalamnya dapat mempercantik blog dan blog bisa terlihat lebih profesional. Bahkan dengan adanya tombol ini pengunjung blog dapat berkunjung dan mengikuti sosial media yang ditambahkan.

Sebagai contoh teman - teman bisa lihat pada gambar diatas atau juga melihat langsung di widget follow us  milik saya, terlihat cantik bukan? Nah, jika ingin menampilkanya diblog teman - teman, saya akan membagikan kode html dan css-nya serta tutorialnya.


Langkah - langkah membuat tombol Follow us (cara pertama).

Untuk membuat tombol Follow Us, pertama tama kita memasukkan memasukkan kode html dulu.

  • Masuk ke blog teman - teman
  • Buka "dashboard" kemudian pilih menu "Tata Letak" dan pilih tempat dimana teman -teman menempatkannya. bisa di Sidebar maupun di Footer
  • Tambakan Gadget dan pilih "Html/Java Script"
  • Pada kolom "Title" tambakan text "Follow Us "atau "Ikuti Kami" dan sebagainya
  • Copy kode berikut dan pastekan di kolom "Content"
  •   <div class="arsa-social">
          <ul class="Arsa-icons a-social arsa-social-bg arsa-social-bg-hover">
            <li class="facebook"><a class="fab fa-facebook arsa-btn"href="url disini"><span>Facebook</span></a></li>
            <li class="instagram"><a class="fab fa-instagram arsa-btn"href="url disini"><span>Instagram</span></a></li>
            <li class="youtube"><a class="fab fa-youtube arsa-btn"href="url disini"><span>Youtube</span></a></li>
            <li class="tiktok"><a class="fab fa-tiktok arsa-btn"href="url disini"><span>Tiktok</span></a></li>
            <li class="twitter"><a class="fab fa-twitter arsa-btn"href=" url disini"><span>twitter</span></a></li>
            <li class="linkedin"><a class="fab fa-linkedin arsa-btn"href="url disini"><span>Linkedin</span></a></li>
          </ul>
        </div>
  • Ganti alamat Url "url disini" dengan url media sosial milik teman -teman
  • Klik simpan


Lanjut ke tahap berikutnya yaitu menghubungkan css dan font awesome yang bertujuan untuk memberikan tampilan seperti warna dan icon. caranya yaitu:

  • Buka kembali "Dashboard" pilih "Tema atau Template" kemudian "Edit Html"
  • Cari kode </head> atau untuk lebih cepat tekan CTRL+F pada PC anda dan masukkan kata kunci "</head>" untuk mencarinya
  • Salin dan pastekan kode berikut ini diatas kode </head> tadi.
  •   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
      <style type='text/css'>
    
    .arsa-social ul{
      margin: 0;
      padding:  0;
      box-sizing: border-box;
    }
     .arsa-social ul.Arsa-icons{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        grid-gap:5px;
    }
      .Arsa-icons a{
        display:flex;
        align-items:center;
        justify-content:space-between;
        height:34px;
        font-size:16px;
        color:#fff;
        font-weight:400;
        overflow:hidden;
        text-decoration: none;
        
    }
     .arsa-social .Arsa-icons a:before{
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-shrink:0;
        width:34px;
        background-color:rgba(255,255,255,0.08)
    }
     
     .arsa-social .Arsa-icons a:hover{
        opacity:.9;
    }
    
    .social-icon {
    color: red;
    background: red;
    }
    
    ul.Arsa-icons {
    margin-top: 10px;
    }
    
    .Arsa-icons li{
        display:block;
        margin:0;
     }
     
    .arsa-social .Arsa-icons span{
        font-size:14px;
        padding:0 10px
    }
    .arsa-btn{
        position:relative;
        border-radius: 4px;
    }
    
     .arsa-social-bg .linkedin a,.social-bg-hover .linkedin a:hover{
        background-color:#0077b5
    }
    .arsa-social-bg .facebook a,.arsa-social-bg .facebook-f a,.arsa-social-bg-hover .facebook a:hover,.arsa-social-bg-hover .facebook-f a:hover{
        background-color:#3b5999
    }
     .arsa-social-bg .twitter a,.arsa-social-bg-hover .twitter a:hover{
        background-color:#00acee
    }
     .arsa-social-bg .youtube a,.arsa-social-bg-hover .youtube a:hover{
        background-color:#f50000
    }
     .arsa-social-bg .instagram a,.arsa-social-bg-hover .instagram a:hover{
        background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4)
    }
     .arsa-social-bg .pinterest a,.arsa-social-bg .pinterest-p a,.arsa-social-bg-hover .pinterest a:hover,.arsa-social-bg-hover .pinterest-p a:hover{
        background-color:#ca2127
    }
    
    .arsa-social-bg .tiktok a,.arsa-social-bg-hover .tiktok a:hover{
        background-color:#0d0d0d
    }
       </style>
  • Simpan tema dan coba lihat hasilnya

Jika tidak ingin ribet memasukkan kodenya satu - satu, bisa menggunakan cara kedua berikut karna semua kode sudah disatukan.

Langkah -  langkah membuat Tombol Follow Us (cara kedua)


Langkah - langkah kedua ini sebenarnya sama caranya dengan langkah - langkah pertama hanya saja lebih simpel. Untuk lebih jelasnya bisa langsung coba, caranya sebagai berikut:

  • Masuk ke blog anda
  • Buka "dashboard" kemudian pilih menu "Tata Letak" dan pilih tempat dimana anda menempatkannya. bisa di Sidebar maupun di Footer
  • Tambakan Gadget dan pilih "Html/Java Script"
  • Pada kolom "Title" tambakan text "Follow Us "atau "Ikuti Kami" dan sebagainya
  • Copy kode berikut dan pastekan di kolom "Content"
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
      <style type='text/css'>
    
    .arsa-social ul{
      margin: 0;
      padding:  0;
      box-sizing: border-box;
    }
     .arsa-social ul.Arsa-icons{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        grid-gap:5px;
    }
      .Arsa-icons a{
        display:flex;
        align-items:center;
        justify-content:space-between;
        height:34px;
        font-size:16px;
        color:#fff;
        font-weight:400;
        overflow:hidden;
        text-decoration: none;
        
    }
     .arsa-social .Arsa-icons a:before{
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-shrink:0;
        width:34px;
        background-color:rgba(255,255,255,0.08)
    }
     
     .arsa-social .Arsa-icons a:hover{
        opacity:.9;
    }
    
    .social-icon {
    color: red;
    background: red;
    }
    
    ul.Arsa-icons {
    margin-top: 10px;
    }
    
    .Arsa-icons li{
        display:block;
        margin:0;
     }
     
    .arsa-social .Arsa-icons span{
        font-size:14px;
        padding:0 10px
    }
    .arsa-btn{
        position:relative;
        border-radius: 4px;
    }
    
     .arsa-social-bg .linkedin a,.social-bg-hover .linkedin a:hover{
        background-color:#0077b5
    }
    .arsa-social-bg .facebook a,.arsa-social-bg .facebook-f a,.arsa-social-bg-hover .facebook a:hover,.arsa-social-bg-hover .facebook-f a:hover{
        background-color:#3b5999
    }
     .arsa-social-bg .twitter a,.arsa-social-bg-hover .twitter a:hover{
        background-color:#00acee
    }
     .arsa-social-bg .youtube a,.arsa-social-bg-hover .youtube a:hover{
        background-color:#f50000
    }
     .arsa-social-bg .instagram a,.arsa-social-bg-hover .instagram a:hover{
        background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4)
    }
     .arsa-social-bg .pinterest a,.arsa-social-bg .pinterest-p a,.arsa-social-bg-hover .pinterest a:hover,.arsa-social-bg-hover .pinterest-p a:hover{
        background-color:#ca2127
    }
    
    .arsa-social-bg .tiktok a,.arsa-social-bg-hover .tiktok a:hover{
        background-color:#0d0d0d
    }
       </style>
        <div class="arsa-social">
          <ul class="Arsa-icons a-social arsa-social-bg arsa-social-bg-hover">
            <li class="facebook"><a class="fab fa-facebook arsa-btn"href="url disini"><span>Facebook</span></a></li>
            <li class="instagram"><a class="fab fa-instagram arsa-btn"href="url disini"><span>Instagram</span></a></li>
            <li class="youtube"><a class="fab fa-youtube arsa-btn"href="url disini"><span>Youtube</span></a></li>
            <li class="tiktok"><a class="fab fa-tiktok arsa-btn"href=" url disini"><span>Tiktok</span></a></li>
            <li class="twitter"><a class="fab fa-twitter arsa-btn"href="url disini"><span>twitter</span></a></li>
            <li class="linkedin"><a class="fab fa-linkedin arsa-btn"href="url disini"><span>Linkedin</span></a></li>
          </ul>
        </div>
  • Ganti alamat Url "url disini" dengan url media sosial milik anda 
  • Klik simpan dan lihat hasilnya


Itulah artikel bagaiamana cara menambakan tombol Follow Us diblogger atau diwebsite, semoga dapat membantu dan bermamfaat. ikuti blog ini untuk mendapatkan notifikasi konten terbaru dari arsauve.com, Terimah kasih.
Posting Komentar

Posting Komentar