Menambahkan Icon Sosial Media Ke Menu Navbar Bootstrap Drupal

Icon Sosial Media seperti facebook, twitter dsb biasanya selalu terlihat dalam sebuah website ataupun blog. Bahkan hal tersebut bukan hanya sekedar menjadi pemanis belaka namun seperti sudah menjadi suatu kewajiban.

Disini Saya menggunakan Drupal dan Template Bootstrap, supaya tutorial ini bisa sedikit nyambung dan Anda pun mengerti maka sebaiknya Instal dulu template Boostrapnya. Untuk Isntalasi template Bootsrap di Drupal silahkan baca panduannya pada artikel Instalasi dan Konfigurasi Template Bootstrap Pada Drupal
Ada beberapa hal yang perlu Anda persiapakan sebelum menambahkan icon sosial media ke menu Navigasi diantaranya :
  1. Module Icon Api 
  2. Module Font Awesome 
  3. Source Font Awesome, Download dari fontawesome.github.io 
  4. Block Class, module ini digunakan untuk konfigurasi tingkat lanjut khusunya untuk menambahkan class tertentu pada blok yang dibuat supaya lebih mudah dalam melakukan konfigurasi
Silahkan instal semua module diatas dan aktifkan kemudian selanjutnya extract source Font Awesome ke sites/all/libraries. Untuk konfigurasi Iconnya nanti bisa Anda lihat pada halaman Configuration > Media > Icon
Berikut ini adalah langkah – langkah Menambahkan Icon Sosial Media ke Menu Navbar Bootsrap Drupal
  1. Sebelumnya atur dulu Tex Editor/Text Format yang ada, disini Saya menggunakan CKEditor. Klik menu Configuration > Text Formats, kemudian klik configure bagian Full HTML. 
  2. Scroll ke bawah dan aktifkan/centang Convert [icon:%bundle:%icon] tags sehingga nantinya kita bisa menambahkan icon sosial media kedalam blok ataupun artikel yang kita buat 
    melakukan pengaturan CKEditor terlebih dahulu
  3. Buatlah sebuah blok baru, klik Structure > Block > Add block 
  4. Pada bagian body tambahkan icon sosial media yang Anda inginkan. Disini Saya ingin menambahkan icon sosial media facebook, twitter dan youtube 
  5. Tambahkan[icon:fontawesome:facebook-square] [icon:fontawesome:twitter-square][icon:fontawesome:youtube-square] nanti Anda juga bisa langsung melakukan blok text/script tersebut dan menambahkan link yang diarahkan ke sosial media 
    menambahkan font awesome ke navigasi
  6. Kemudian scroll lagi kebawah, pada blok class atau CSS class(es) tambahkan class berikut sosial-media pull right
    menempatkan posisi icon sosial media
     
  7. Untuk region setting Saya aktifkan di Navigation Boostrap 
  8. Sampai disini proses pemasangan icon sosial media telah berhasil ditambahkan ke menu navigasi, namun posisinya kurang rapih, kecil dan tidak beraturan oleh karenanya perlu melakukan custom css 
  9. Buka file CSS untuk custom, sites/all/themes/bootstrap_subtheme/css/style.css 
  10. Tambahkan script berikut

    .sosial-media{margin: 0;}
    .sosial-media p a{ margin-left: 5px; font-size:35px; color: #3399FF;}

Sampai disini proses menambahkan icon sosial media ke Navbar Drupal sudah selesai, bila berhasil nanti kurang lebih tampilannya akan terlihat seperti berikut

tampilan menu icon sosial media yang berhasil ditambahkan

2 Responses to "Menambahkan Icon Sosial Media Ke Menu Navbar Bootstrap Drupal"

  1. Fungsi dari social media sangat penting ya kang dan bisa untuk berbagi juga dan tentunya jadi nambah visitor.

    ReplyDelete
  2. triknya selalu lengkap dan rinci, jadi lebih mudah untuk mengaplikasikan cara menambahkan Icon Sosial Media Ke Menu Navbar Bootstrap Drupal

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...