Cara Membuat Kotak (Frame) dan Menempatkan Kode (Script) Pada Postingan Blog

Postingan di blog terkadang berisikan sederet kode HTML atau script lainnya terutama sekali postingan yang berisikan tutorial pada seperti postingan ini. Meletakan kode script bisa dicopykan secara langsung pada mode Compose View dengan mengubah ukuran dan jenis huruf, namun kelemahan mengcopykan secara langsung tersebut tampilannya kurang menarik. Supaya menarik perlu dimodif sedikit melalui mode HTML View. Dibawah ini merupakan beberapa kode HTML yang bisa digunakan untuk meletakan kode pada postingan di blog. Kode yang akan diletakan pada postingan diblog diletakan  dianatara <div> </div> , namun sebelum diletakan pada <div> </div> kode atau script tersebut harus diparshekan terlebih dahulu melalui website blogcrowds dengan alamat http://www. blogcrowds.com/ atau bisa klik link website http://www.blogcrowds.com/resources/parse_html.php , untuk lebih jelasnya silahkan ikuti langkah-langkah berikut:

1. Buatlah sebuah postingan yang berisikan tulisan, tabel, gambar atau apasaja dan jika didalamnya terdapat code HTML atau script yang ingin ditampilkan copylah salah satu dari baris code di bawah ini.

2. Klik pada mode HTML View kemudian pastekan dibagian yang ingin ditampilkan code HTMLnya.

Gambar 1 : Mengubah ke Mode HTML View

Gambar 2 : Bagian (tempat) untuk menyisipkan code HTML yang sudah diparshe 

Gambar 3: Website Blogcrowds

3. Copylah kode yang akan ditempelkan pada blog selanjutnya akan diparshekan terlebih dahulu dengan cara masuk ke  website blogcrowds dengan alamat http://www. blogcrowds.com/ atau bisa klik link website http://www.blogcrowds.com/resources/parse_html.php , kemudian pastekan pada kotak isian teks (textbox) dan selanjutnya klik tombol PARSHE. Setelah diklik tombol PARSHE copylah hasilnya dan selanjutnya pastekan diblog pada mode HTML View.

Gambar 4: Mengcopy code HTML yang akan diparshekan

Gambar 5: Hasil copian pada gambar 4 dipastekan pada textbox dan diklik tombol PARSHE

Gambar 6: Mengcopi hasil PARSHE

Gambar 7: Hasil copian dari gambar 6 di pastekan di HTML View

Gambar 8: Hasil code HTML yang sudah tampil pada mode Compose View

3. Ini adalah hasil atau contoh dari code HTML yang ditempel pada postingan blog, kode ini digunakan untuk membuat link artikel atau postingan terkait.

<style type="text/css"> #penaindigocom{background:#fff;width:99%;margin:5px auto;border:1px solid #2D96DF; -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);} Labelnya{color:#FFF;font-weight:bold;margin:0 -5px;margin-top:20px; padding:1px 0 2px 11px;background: #3498DB; border:1px solid #2D96DF; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb; -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;} ol{font-weight:normal;background:#fff;margin-left: 35px;} ol li{border-bottom: #ddd 1px dotted;margin-right:5px;padding:3px} </style> <div id="unixmedia"> <script> var numposts = 5; var standardstyling = true; function startpost(json){ for (var i = 0; i < numposts; i++){ var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++){ if (entry.link[k].rel == 'alternate'){ posturl = entry.link[k].href;break; } } posttitle = posttitle.link(posturl); if (standardstyling) document.write('<li>'); document.write(posttitle); } if (standardstyling) document.write('</li>'); } function finished(){} </script> <labelnya>BACA ARTIKEL LAINNYA:</labelnya> <ol> <script src="/feeds/posts/default/-/Blogger?orderby=published&amp;alt=json-in-script&amp;callback=startpost&amp;max-results=999"></script> </ol> </div><div><b><br /></b></div>

Berikut ini merupakan beberapa code (script) yang bisa dicopy yang dapat digunakan menempatkan script (code HTML) pada postingan:

Kode 1 dan hasil tampilannya:

<div style="background-color: white; border: 3px solid rgb(238, 238, 238); padding: 10px; text-align: left;"> Masukan code yang sudah diPARSHE disini</div>

Kode 2 jika akan menggunakan scrollbar:

<div style="background-color: #eaeaea; border: 3px solid rgb(238, 238, 238); height: 100px; overflow: auto; padding: 10px; text-align: left; width: 520px;"> Letakan code (script) yang sudah diparshe disini</div>

Kode 3 dan hasil tampilannya:

<div style="background-color: white; border: 3px double rgb(23, 128, 221); padding: 10px; text-align: left;"> Letakan code (script) yang sudah diparshe disini</div>

Kode 4 dan hasil tampilannya:

<div style="background-color: #eaeaea; border: 1px solid rgb(68, 68, 68); padding: 10px; text-align: left;"> Letakan code (script) yang sudah diparshe disini</div>

BACA ARTIKEL LAINNYA:

Kode 5 dan hasil tampilannya:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid rgb(34, 136, 221); border-radius: 10px; padding: 10px; t-align: left;">Letakan code (script) yang sudah diparshe disini</div>

Kode 6 dan hasil tampilannya:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed rgb(170, 170, 170); padding: 10px; t-align: left;">Letakan code (script) yang sudah diparshe disini</div>

Kode 7 dan hasil tampilannya:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid rgb(153, 153, 153); padding: 10px; t-align: left;">Letakan code (script) yang sudah diparshe disini</div>

Kode 8 dan hasil tampilannya:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double rgb(255, 255, 255); padding: 10px; t-align: left;">Letakan code (script) yang sudah diparshe disini</div>

Kode 9 dan hasil tampilannya:

<div style="background-color: #57aa52; border: 2px dashed rgb(97, 11, 56); padding: 10px; t-align: left;"> Letakan code (script) yang sudah diparshe disini</div>

Kode 10 dan hasil tampilannya:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset rgb(255, 255, 255); padding: 10px; t-align: left;">Letakan code (script) yang sudah diparshe disini</div>

Kode 11 dan hasil tampilannya:

<div style="background-color: #82cafa; border: 3px double rgb(95, 32, 14); padding: 10px; text-align: left;"> Letakan code (script) yang sudah diparshe disini</div>

Kode 12 dan hasil tampilannya:

<div style="background-color: #d5839f; border: 2px inset rgb(0, 100, 0); padding: 10px; text-align: left;">Letakan code (script) yang sudah diparshe disini</div>

Kode 13 dan hasil tampilannya:

<div style="background-color: #c2c2c2; border: 2px dotted rgb(27, 26, 118); padding: 10px; text-align: left;">Letakan code (script) yang sudah diparshe disini</div>

Video Tutorial Cara Membuat Kotak dan Menempatkan Kode (Script) Pada Postingan Blog