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. Module Library
5. 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 
   
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 
   
6. Kemudian scroll lagi kebawah, pada blok class atau CSS class(es) tambahkan class berikut sosial-media pull right
   
    
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;}

Baca juga : Membuat Tombol Share Sosial Media di Drupal Tanpa Module
 
Video Menambahkan Icon Sosial Media Ke Menu Navbar Bootstrap Drupal

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple