Saturday 25 June 2016

Cara Membuat Kolom Script Keren di Blog

Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.

Pada Artikel kali ini kita akan membahas Cara Membuat Kolom Script Keren di Blog, Postingan ini masih berhubungan dengan Artikel Widget.

Cara Membuat Kolom Script Keren di Blog

Advertisement
Cara memasang kotak script di dalam postingan artikel blog - Halo sobat blog siabdi, sebelumnya saya sudah membagikan artikel mengenai panduan tepat belajar bisnis online untuk pemula, dan pada kesempatan kali ini saya akan membagikan tutorial mengenai cara untuk membuat kotak script dalam postingan artikel blog. Sebenarnya blog siabdi sudah pernah membagikan cara ini namun dalam versi sebelumnya saya membagikan cara membuat kotak script menggunakan kolom script syntax. Menurut saya pribadi, memasang kolom script dalam postingan artikel sangatlah penting, terutama untuk blog yang memiliki niche tutorial seputar blogging, karena niche blog tersebut tidaklah lepas dari kode-kode HTML, baik javascript ataupun CSS.

Dengan menggunakan kolom script ini, maka tampilan artikel serta kode-kode script yag di bagikan di dalamnya akan terlihat rapi dan tidak amburadul. Selain itu, penggunaan kotak script ini sendiri juga sangatlah bagus guna untuk membantu pengunjung dalam membedakan mana kode yang masuk dalam teks artikel dan mana kode script yang akan di gunakan. Cara untuk pemasangan kotak script ini pun cukuplah mudah, anda hanya perlu mencopy dan mempaste kode di bawah ini ke dalam postingan artikel anda pada mode html.


Cara Memasang Kotak Script di Blog

1. Silahkan sobat masuk ke halaman posting artikel sobat.
2. Silahkan masuk ke mode HTML dan masukkan kode di bawah ini ke dalamnya.
3. Silahkan sobat kembali ke mode Composse dan silahkan ganti tulisan KODE SCRIPT DISINI dengan kode script yang ingin sobat bagikan.
<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;">KODE SCRIPT DISINI</div>  

Hasil :

KODE SCRIPT DISINI

4. Silahkan sobat publikasikan artikel anda dan lihat hasilnya.

Di bawah ini ada beberapa pilihan kolom script yang dapat anda gunakan, silahkan pilih sesuai dengan selera sobat.

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">KODE SCRIPT DISINI</div>

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">KODE SCRIPT DISINI</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;">KODE SCRIPT DISINI</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;">KODE SCRIPT DISINI</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;">KODE SCRIPT DISINI</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;">KODE SCRIPT DISINI</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;"> KODE SCRIPT DISINI</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> KODE SCRIPT DISINI</div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> KODE SCRIPT DISINI</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> KODE SCRIPT DISINI</div>

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> KODE SCRIPT DISINI</div>

Namun apabila sobat ingin kolom script syntax seperti yang saya gunakan, sobat bisa membaca artikelnya disini : Cara memasang kolom script syntax highlighter di blog

Demikian artikel kali ini mengenai cara membuat atau memasang kolom script keren di blog. Apabila sobat memiliki pertanyaan seputar artikel di atas silahkan tinggalkan komentar anda dalam kotak komentar. Semoga bermanfaat :)


EmoticonEmoticon