Membuat Block Pada Halaman Depan Drupal

Dalam tutorial ini Saya memakai Template Bootstrap, jadi sebelumnya Anda harus memasang terlebih lampau  template Bootstrap ke Drupal, silahkan pelajari caranya pada halaman Instalasi dan Konfigurasi Template Bootstrap Pada Drupal.

Ceritanya disini Saya ingin membuat sebuah block dengan tiga kolom, dimana block tersebut nantinya ditaruh dibawah slider yang sudah pernah Saya buat sebelumnya. Lihat artikel Membuat Slider Gambar Yang Mengarah ke Artikel di Drupal

Jadi nantinya akan ada satu blok namun meliputi tiga kolom,  disini tidak memakai tabel melainkan menggunakan class=”col-md-4” yang memang ialah hukum dari Bootstrap sendiri biar tampilannya rapih dan responsive. Nanti tampilannya kurang lebih akan terlihat menyerupai gambar dibawah ini

Kemudian selanjutnya saat link “Selengkapnya” di klik akan mengarah ke artikel atau basic page yang sudah dibentuk sebelumnya. 

Sebelum membuat blok dengan tiga kolom, lakukan terlebih lampau konfigurasi text editor. Disini Saya memakai CKEditor, untuk konfigurasinya Anda dapat mengikuti langkah – langkah diberikut :

1. Klik sajian > Configuration > Content authoring > CKEditor
2. Pada Full HTML klik edit
3. Klik CLEANUP AND OUTPUT kemudian scrol kebawah
   
4. Pada use  custom formatting options pilih Yes dan hilangkang tanda centang Pada “Break line after the opening tag”
5. Terakhir klik Save

Langkah selanjutnya yaitu tinggal Membuat Block Pada Halaman Depan Drupal

1. Klik sajian Structure > Blocks > Add block
2. Pada block title masukan <none> dan Pada description masukan deskripsi dari kolom tersebut, masukan saja misal 3 Kolom Block Depan
   
3. Pastikan text format pada bab block body sudah diatur ke Full HTML
4. Selanjutnya pada block body klik “Sumber” kemudian masukan script dibawah ini
   
   

    <div class="col-md-4"> <h3>Tentang Kami</h3>  <p class="rtejustify">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>  <p><a class="btn btn-default btn-primary" href="/perum/node/1">Selengkapnya »</a></p> </div>  <div class="col-md-4"> <h3>Layanan</h3>  <p class="rtejustify">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>  <p><a class="btn btn-default btn-primary" href="/perum/node/2">Selengkapnya »</a></p> </div>  <div class="col-md-4"> <h3>Alamat</h3>  <p class="rtejustify">Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>  <p><a class="btn btn-default btn-primary" href="/perum/node/3">Selengkapnya »</a></p> </div>

5. Klik “Sumber” kembali dan nanti kurang lebih balasannya akan terlihat menyerupai ini
   
6. Karena disini kita ingin menghubungkan 3 kolom tersebut dengan sebuah artikel/ Basic Page, maka Anda tinggal menaruh link dari artikel yang ingin Anda hubungkan.
7. Klik linknya kemudian tekan tombol link sehingga akan muncul tampilan menyerupai dibawah ini
   
8. Bila ingin lebih simpel lagi dalam membuat link antar halaman Anda dapat memakai CKEditor link, dimana nantinya akan ada pilihan “Internal Path” pada Link Type. Silhakan pelajari caranya pada artikel Insatalasi dan Konfigurasi Module CKEditor Link
9. Scroll kebawah, pada bab Region Settings Bootstrap Sub-Theme (CDN) (default theme) atur ke content
   
10. Kemudian scroll lagi kebawah, pada Pages Anda pilih “only the listed pages” dan masukan <front>, ini biar block spesialuntuk akan tampil dihalaman depan saja. Terakhir klik Save Blocks
    

Sampai disini proses pembuatan block dengan 3 koloh dihalaman depan website sudah selesai. Nanti kurang lebih structure atau posisi bloknya dipengaturan akan terlihat menyerupai gambar dibawah ini

Share :