Cara Membuat Box Script Untuk Code Pada Postingan Blog

Bagi yang suka bagi-bagi tips seputar design blog box script sangat diperlukan untuk mengurung code script pada postingan blog, agar pemula blogger tidak kesulitan saat copy script


Pengalaman adalah guru yang terbaik, kali ini saya akan berbagi pengalaman untuk pertama kalinya dan langsung saya share tutorialnya diblog ini. Pastinya yang namanya blog itu tidak jauh dengan namanya HTML dan CSS juga script nya yang begitu banyak dan panjang.

Waktu itu saya mencampurkan antara script dengan tulisan menjadi satu paragraf, ternyata banyak sahabat blog yang protes, ada yang bilang gagal saat editing tamplate, ada yang tulisanya ikut kesalin dengan scriptnya dan ada juga yang baca blog sampe dibaca itu tulisan html dan css nya.

Untuk mengatasi masalah tersebut makanya perlu ada yang namanya benteng atau box script yang membedakan antara script dan juga bacaan artikel yang kita buat.

Box Script memiliki kegunaan agar tampilan blog terlihat rapi dan mudah dipahami. Tampilan box script juga bermacam macam ada yang hanya berbentuk kotak ada juga yang ditambah dengan scroll, bisa juga diganti backgroundnya dan ditambahkan dengan border.

Caranya tidak begitu sulit tinggal copas script yang ada dibawah dan akan muncul tampilan kotak pada postingan kita, ikuti langkah langkah berikut :

Step 1. Copy Box Script yang kalian inginkan

Contoh Box Script yang bisa diisi code script

Step 2. Pastekan ke entri pada menu tab HTML

Pastekan code ke entri html blog

Step 3. Pilih mode compose dan pastekan code script didalamnya

Blog Compose pastekan isi Script pada kotak


Silahkan pilih tampilan box script yang kalian inginkan :


<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Pastekan Code Script Di Sini </div>


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">
Pastekan Code Script Di Sini </div>


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;"> 
Pastekan Code Script Di Sini </div>


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">
Pastekan Code Script Di Sini </div>


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">
Pastekan Code Script Di Sini </div>


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;"> 
Pastekan Code Script Di Sini </div>


<div style="background-color: #36e4fd; border: 2px #610b38 dashed; padding: 10px;">
Pastekan Code Script Di Sini </div>


<div style="background-color: #c2c2c2; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;"> Pastekan Code Script Di Sini </div>


<div style="background-color: #82cafa; border: 3px #5f200e double; padding: 10px; text-align: left;"> Pastekan Code Script Di Sini </div>


<div style="background-color: #d5839f; border: 2px #006400 inset; padding: 10px; text-align: left;"> Pastekan Code Script Di Sini </div>


<div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: #00b8ff; border-radius: 10px; border: 7px outset #fff; padding: 10px; t-align: left;">
Pastekan Code Script Di Sini </div>

Kalian bisa modifikasi box script sesuai kreasi kalian dengan cara :

- Mengganti ukuran sudut lengkungan contohnya: border-radius: 10px ada 3 ganti semua
- Mengganti warna background contohnya : background-color: #00B8FF ( Kode Warna )
- Merubah ketebalan border / garis tepi kolom contohnya : border: 4px

Bagi kalian yang ingin menambahkan scroll pada box script bisa menggunakan code dibawah ini :


<div style="overflow:auto;width:300px;height:100px;padding:10px;border:1px solid #eee">


Isi Scroll Box

</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; height: 100px; overflow: auto; padding: 10px; padding: 10px; width: 600px;">


Isi Scroll Box



</div>

Itu aja share pengalaman pertama untuk sahabat setia blog artadhitive. Silahkan berkreasi dan selamat mencoba, semoga bermanfaat.

--- Always Pray and Stay Creative ---

COMMENTS

BLOGGER: 2
Loading...
Name

#BeMoreProductive,1,6th Indonesian Pearl Festival 2016,1,Abutours.com,1,Adobe Premier Pro,1,Asusintel,1,Award,1,Babasal Mombasa,1,Backsound,2,Balancing,1,Bangga di Banggai,1,Be Gravitasi,1,Bebas Bayar,1,Bengkel Mobil,1,Bika Bogor,1,Bika Bogor Talubi,1,Biznis,1,Blog Design,18,Blogger,24,Bumper,1,CC 2015,1,Citra Maja Raya,1,Co-working Space,1,Colidan,1,Competition,32,Competition DEV+,1,Corel Draw X7,1,Coreldraw,1,CV Design,1,Cyko Handbreak,1,dealoka,1,Designer,5,Digital Marketing,1,Domain,1,Dotcomforme.com,1,DUMET School,1,Education,6,Ekspresikan Dirimu,1,Elevenia,1,Excite Shop,1,FestHAM2016,1,Fintech,1,Footer,1,FSB,1,Goverment PR,1,HAnavi,1,Header,6,Himawan Putra,1,HIS Travel Indonesia,1,Hosting,1,hostinger,1,HRIS Software,1,Indramayu Kota Budaya,1,Influenzer,31,Inspirasi Astra,1,JIBB,1,Kuliner Bogor,1,Kursus Editing Video,1,Lawan Neuropati,1,LinovHR,1,Luna Smartphone,1,Main Post,3,Marketz,3,Meeting Room,1,Milkshake,1,Motion Graphic,2,Neurobion,1,Neuropati,1,Niagahoster,1,Obat maag paling ampuh,1,Office Room,1,Oleh-oleh Bogor,1,Oleh-oleh Khas Bogor,1,Paket Meeting,1,Pesona Jawa Tengah,1,Pop Ice,1,Ralali.com,2,Review,29,Ruang Kantor,1,Ruang Meeting,1,rukamen,1,Serumah.com,1,sewa apartemen,1,Shop n Drive,2,Sidebar,8,Skyscanner,1,Software,3,Sound Effect,2,Sponsor,14,Spooring,1,Storylio,1,Tempat Kursus Digital Marketing,1,Tips Blogging,3,Tips Design,3,Travel,8,Traveloka,2,Tutorial Blog,1,Tutorial Motion,1,Vector,1,Video Editor,5,Video Effect,1,Visit Tidore Island,1,XWORK,1,Youtuber,6,
ltr
item
Artadhitive | Daily Content Creator: Cara Membuat Box Script Untuk Code Pada Postingan Blog
Cara Membuat Box Script Untuk Code Pada Postingan Blog
Bagi yang suka bagi-bagi tips seputar design blog box script sangat diperlukan untuk mengurung code script pada postingan blog, agar pemula blogger tidak kesulitan saat copy script
https://1.bp.blogspot.com/-uHo5VYMH6mc/V2CxkldxfAI/AAAAAAAAElA/YJjK-ggBMhgDxxLbH0WbA20bhKMyKOkJQCLcB/s1600/Blog%2B4.png
https://1.bp.blogspot.com/-uHo5VYMH6mc/V2CxkldxfAI/AAAAAAAAElA/YJjK-ggBMhgDxxLbH0WbA20bhKMyKOkJQCLcB/s72-c/Blog%2B4.png
Artadhitive | Daily Content Creator
http://www.artadhitive.com/2016/06/Design-Blog-Cara-Membuat-Box-Script-Untuk-Code-Pada-Postingan-Blog.html
http://www.artadhitive.com/
http://www.artadhitive.com/
http://www.artadhitive.com/2016/06/Design-Blog-Cara-Membuat-Box-Script-Untuk-Code-Pada-Postingan-Blog.html
true
9208609652601285124
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy