Home » » Cara membuat kotak script yang responsive di dalam postingan blog

Cara membuat kotak script yang responsive di dalam postingan blog

Written By Altri Ramadoni on 16 March 2016 | 22:47



Assalamu'alaikum sobat blogger, kali ini penulis akan membahas tentang bagaimana cara membuat kotak script atau script box di dalam postingan blog. Kotak ini berfungsi untuk tempat kita menulis sebuah script di dalam postingan yang mana script ini akan tersusun di dalam sebuah kotak atau tidak berserakan dan bercampur dengan kata lain di dalam postingan. Contoh nya seperti kotak dibawah ini :

TEMPAT MENULIS SCRIPT

Nah, kotak di atas adalah contoh kotak script/ script box dari blog Fisika Islam ini. Penulis cenderung menggunakan warna biru muda itu sebagai background kotak nya agar lebih enak dipandang mata. Baiklah kita langsung masuk pada ini pembahasan, bagaimana cara membuat kota tersebut? Silakan sobat ikuti langkah langkah di bawah ini :

1. Pastikan sudah login ke dashboard blogger Anda, lalu pilih menu Template dan klik Edit HTML.
2. Setelah itu carilah kata </head> didalam kode template blog Anda tersebut. untuk memudahkan gunakan/ tekan Ctrl + F.
3. Setelah itu copy script dibawah ini tepat di ATAS kode </head> tersebut. berikut adalah script nya :

/* Kotak dalam postingan -- */
.kotak { 
background: #FFFFFF;
text-align: left;
padding: 5px 5px 5px 5px;
border-top: 1px solid #223344;
border-bottom: 1px solid #223344;
border-left: 1px solid #223344;
border-right: 1px solid #223344; 
box-shadow: 0 0 1px 1px #212836;}
/* Kotak dalam postingan End-- */

4.  Setelah itu SIMPAN/SAVE template blog Anda.
5. Nah, ketika Anda ingin membuat kotak di dalam postingan maka Anda buat kode seperti di bawah ini kedalam postingan Anda. Ingat!! kode ini ditulis di menu HTML pada postingan blogger Anda, dan bukan pada menu COMPOSE. Begini cara menulinya. :

<div class="kotak">
MASUKAN SCRIPT ANDA DISINI
</div>

6. Setelah itu balik ke menu COMPOSE, kotak memang belum terlihat, namun akan muncul setelah di posting.
7. Anda dapat mengganti warna background kotak tersebut dengan mengubah huruf "FFFFFF" pada script di dalam kotak pada langkah nomor 3 di atas.

Demikianlah cara membuat kotak di dalam postingan, jika ada masalah silakan tanyakan di kolom komentar atau silakan hubungi Admin, Semoga bermanfaat.




Share this article :
Ditulis oleh: Altri Ramadoni Fisika Islam Updated at : 22:47

0 komentar:

Post a Comment

 
Support : Kontak | Privasi | Tentang
Copyright © 2017. Fisika Islam - All Rights Reserved
Temukan Kami di Facebook @ Fisika Islam