Menambahkan Icon Sosial Media Ke Hidangan Navbar Bootstrap Drupal

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

Disini Saya memakai Drupal dan Template Bootstrap, agar tutorial ini dapat 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 sajian 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 dipakai untuk konfigurasi tingkat lanjut khusunya untuk menambahkan class tertentu pada blok yang dibentuk agar lebih simpel dalam melaksanakan konfigurasi
   

Silahkan instal tiruana module diatas dan aktifkan kemudian selanjutnya extract source Font Awesome ke sites/all/libraries. Untuk konfigurasi Iconnya nanti dapat Anda lihat pada halaman Configuration > Media > Icon
Berikut ini ialah langkah – langkah Menambahkan Icon Sosial Media ke Menu Navbar Bootsrap Drupal

1. Sebelumnya atur dulu Tex Editor/Text Format yang ada, disini Saya memakai CKEditor. Klik sajian Configuration > Text Formats, kemudian klik configure bab Full HTML. 
2. Scroll ke bawah dan aktifkan/centang Convert [icon:%bundle:%icon] tags sehingga nantinya kita dapat menambahkan icon sosial media kedalam blok ataupun artikel yang kita buat 
   
3. Buatlah sebuah blok baru, klik Structure > Block > Add block 
4. Pada bab body menambahkan 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 dapat eksklusif melaksanakan blok text/script tersebut dan menambahkan link yang diarahkan ke sosial media 
   
6. Kemudian scroll lagi kebawah, pada blok class atau CSS class(es) menambahkan class diberikut sosial-media pull right
   
    
7. Untuk region setting Saya aktifkan di Navigation Boostrap 
8. Sampai disini proses pemasangan icon sosial media sudah berhasil dimenambahkan ke sajian navigasi, namun posisinya kurang rapih, kecil dan tidak beraturan oleh hasilnya perlu melaksanakan custom css 
9. Buka file CSS untuk custom, sites/all/themes/bootstrap_subtheme/css/style.css 
10. Tambahkan script diberikut
    
    

    .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

Share :