Cara Menambahkan Icon dan Link Social Media Section pada Blog/Website

Sebagai seorang blogger yang menggunakan platform Blogspot, tentu saja ada saatnya ada rasa bosan dengan template blog yang itu-itu saja, sehingga memutuskan untuk mecari suasana baru dengan mengganti template blog dengan template kostum. Setelah selesai mengganti template, tentu harus dilakukan beberapa penyesuaian agar seluruh unsur blog sesuai dengan keinginan kita. 

Kali ini kita akan membahas salah satu unsur penting pada blog dan website, yaitu Social Media Section yang berfungsi sebagai media sharing atau link untuk mengarahkan kita pada berbagai macam platform media sosial. 

Namun, walaupun sudah tersemat pada template kostum yang kita gunakan, tetap saja ada hal yang harus diubah, yaitu link media sosial kita yang belum tersemat dan jumlah platform media sosial yang tidak sesuai dengan keinginan kita. 

Berikut adalah langkah-langkah menyematkan link dan menambah platform media sosial pada Social Media Section blog kita. 

1. Langkah pertama adalah mengedit kode HTML pada widget Social Media Section pada bagian Tata Letak.

2. Salin kode HTML dari widget ke Notepad. 

3. Untuk menambah jenis platform media sosial, salin kode HTML seperti pada gambar di bawah ini, lalu paste di bagian bawah kode HTML yang tadi disalin. 

4. Selanjutnya ubah link dengan link yang baru. Biasanya link berada diantara kode '...'

5. Setelah mengganti link, selanjutnya adalah mengganti icon media sosial, dalam kasus ini tadi kita menyalin dari kode media sosial Twitter yang akan kita ubah menjadi Youtube. Caranya salin kode seperti di bawah (kode adakan berbeda tergantung provider icon) lalu paste di mesin pencari, ganti tilisan 'twitter' dengan 'youtube' 

6. Setelah menemukan icon yang sesuai, cari kode HTML icon seperti pada gambar di bawah, lalu salin koder tersebut. 

7. Kembali ke Notepad yang berisi kode HTML yang sedang diedit, paste kode HTML icon yang sudang kita salin untuk mengganti kode HTML icon sebelumnya. Kode yang diganti adalah mulai dari <i class hingga <i>. 

8. Selanjutnya salin kode HTML dari Notepad yang sudah diedit lalu paste pada widget Social Media Section. Jangan lupa untuk menyimpannya. 

Berikut kode HTML-nya: 

<div class='social-search-wrapper'>

<div class='header_social'>

  <a class='' href='http://facebook.com/' target='_blank'><i class='fa fa-facebook'/></i></a>

  <a class='' href='https://twitter.com/rudy_arra/' target='_blank'><i class='fa fa-twitter'/></i></a>

  <a class='' href='http://instagram.com/' target='_blank'><i class='fa fa-instagram'/></i></a>

</div>

<div class='s-search'>

<a class='search-icon' href='#' id='s-search-icn' title='Search here.'><i class='fa fa-search'/></i></a>

<div class='close' id='search'>

  <button class='close' type='button'>&#10005;</button>

  <div class='vertical-align-middle'>

  <div class='vertical-middle-inner'>

     <form action='/search' id='s-searchform' method='get' role='search'>

     <label class='heading_font'>Search</label>

     <input name='q' placeholder='Type Your Search' type='search'/>

    <button class='btn btn-primary' type='submit'><span class='fa fa-search'/></span></button>

    </form>

    <p class="search-note">Type and hit <span>Enter</span> to display search result</p>

</div>

</div>

</div>

</div>

</div>

9. Jika proses edit HTML berhasil, maka icon beserta link media sosial baru akan muncul. 

Nah begitulah langkah-langkah menambahkan icon dan link pada Social Media Section pada blog, khususnya platform Blogspot. 

Bisa juga menyimak tutorial pada video di bawah ini: