>>>Selamat Datang :::: Simak berbagai info menarik +++ Kritik, saran, informasi atau artikel dapat dikirimkan kepada kami melalui email prabawa08s@gmail.com >>> Info pemasangan iklan by email atau SMS ke +6285217365999 ::: Terima kasih atas Kunjungannya dan semoga Bermanfaat <<<<

Saturday, July 4, 2015

http://wanskawani.blogspot.com/ KAWANI MEDIA
بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم



Berbagi pengalaman dalam ngoding pada sebuah artikel akan terlihat menarik kalau sebuah Code yang akan dibagikan tampil beda dengan tulisan biasa. Cara ini lebih mudah dalam WordPress dengan hanya meng klik Code pada WYSIWG editor ( What You See Is What Yoe Get, bar yang ketika kita bikin post, icon bold italic dll ). Kemudian masukan Code yang akan kita share dan munculah Code yang sudah otomatis di wrap oleh Style CSS yang berbeda dengan isi konten.

Pertanyaannya adalah apakah ini bisa diterapkan pada Blog kita?
Jawabannya, Sangat Bisa!!!

Disini kita akan mencoba sebuah Code agar Code itu tampak berbeda dengan tulisan biasa. Sebelumnya kita buat Code style CSS untuk si Code, berikut adalah contoh ketika ingin berbagi Code misal struktur HTML:

<html>
<head>
<title>Struktur Dasar HTML</title>
<head>
<body>
Kawani Media
</body>
<html>

Code diatas terlihat kurang menarik kan? itu karena tidak menonjolkan bahwa itu adalah Code, bandingkan dengan yang diberi style dibawah ini:

<html>
<head>
<title>Struktur Dasar HTML</title>
<head>
<body>
Kawani Media
</body>
<html>

Hasilnya lebih menarik kan? jika kita ingin membuatnya maka sebelumnya kita tambahkan dulu Code CSS berikut pada Blog kita, ini Codenya :

.code {
background: #F5F8FA;
background-repeat: no-repeat;
border: solid #0098FF;
border-width: 1px 1px 1px 20px;
color: #000; font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow: auto;
padding: 28px 10px 10px; width: 90%;
}

Setelah menambahkan Code CSS diatas cara mengunakannya ketika kita menulis sebuah artikel masuk ke tab html lalu tambahkan code dibawah ini:

<div class="code">
Konten code yang akan dibagikan
</div>

Demikian share saya kali ini, Jangan lupa Kritik, Saran dan Komentarnya, semoga bermanfaat!!! Salam Kawani.

Materi diambil dari berbagai Sumber

Diposting Oleh : Wawan Sihabuddin

Wans Sihabuddin Anda sedang membaca artikel tentang Posting Cantik dengan Box Code. Anda diperbolehkan mengcopy paste isi blog ini, namun jangan lupa untuk mencantumkan link ini sebagai sumbernya. Beritahukan kepada saya jika ada Link yang rusak atau tidak berfungsi. Apabila suka dengan postingan ini silahkan di Like dan Share dengan tidak lupa Komentar dan Masukannya.

:: Get this widget ! ::

Share artikel ke: Facebook Twitter Google+ Linkedin
Reaksi:

0 komentar:

Waktu Adzan

Pilih Artikel

Arsip Lain

Followers

Translite

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
By : Kawani

Sponsor

Random Post

Al-Qur'an

Al-Qur'an Online

Anda juga bisa menggunakan navigasi berdasarkan surat yang telah disediakan dibawah ini:

Shalat Tepat Waktu

Kalender Hijriyah




Perhitungan pada sistem konversi Masehi – Hijriah ini memungkinkan terjadi selisih H-1 atau H+1 dari tanggal seharusnya untuk tanggal Hijriyah

Popular Posts

Space Ad

Ingin Berlangganan Post Terbaru

Subscribe via Email