CARA MEMBUAT TAG PRE KEREN DIBLOGGER

Tag Pre Adalah Suatu Kotak Yang Kayak BLOCKQUOTE Yaitu Untuk Meletakkan Script Atau CSS Di Blog ,, Hayo Kalian suka mana ?? kalo saya sih Blockquote !! okelah langsung aja yuk tutorialnya :D


Demo nya di bawah ini:

MASUKKAN KODE HTML ANDA ATAU SEMBARANG 

MASUKKAN KODE CSS ANDA DISINI HERE HERE

MASUKKAN KODE JAVASCIRPT ANDA DISINI WOOY 

MASUKKAN KODE JQUERY DISINI SEMBARANG 

MASUKKAN KODE PHP DISINI ATAU KODE SEMBARANG BISA

MASUKKAN KODE XML DISINI ATAU KODE SEMBARANG BISA

Simak langkah-langkah nya dibawah ini:

1. Login Di Blooger
2. Template --> edit HTML
3. CTRL +F Cari Kode ]]></b:skin>
4. Lalu Masukkan Kode Dibawah Ini Diatas Kode Tersebut

pre {
background-color:white;
background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
-webkit-background-size:30px 30px;
-moz-background-size:30px 30px;
-ms-background-size:30px 30px;
-o-background-size:30px 30px;
background-size:30px 30px;
background-repeat:repeat;
font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
color:#333;
border:2px solid #666;-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
position:relative;
padding:0 7px;
margin:10px 5px;
overflow:auto;
word-wrap:normal;
white-space:pre;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
position:relative;
 }
pre[data-codetype] {
padding:29px 1em 7px 1em;
 }
pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
position:absolute;
top:0;
right:0;
left:0;
background-color:#666;
padding:0 7px;
font:bold 11px/20px Arial,Sans-Serif;
color:white;
}
pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;}
pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;}
pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;}
pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;}
pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;}
pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;}
pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
pre[data-codetype="CSS"]:before {background-color:#7B990C;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#395540;}
pre[data-codetype="PHP"]:before {background-color:#FF9900;}
pre[data-codetype="XML"]:before {background-color:#FF0C39;
  }

5. Simpan Template
*Untuk Menampilkan Tampilan Tag Pre Tersebut Guankan Mode HTML 
6. Lalu Masukkan Kode Pemanggil nya dibawah ini simak baik baik ya ^_^

 <pre data-codetype="HTML">Disini Tag XML</pre>

 <pre data-codetype="CSS">Disini Tag CSS< </pre>

 <pre data-codetype="JavaScript">Disini Tag JavaScript</pre>

 <pre data-codetype="JQuery"> Disini TagJQuery</pre> 

  <pre data-codetype="PHP">Disini Tag PHP</pre>

  <pre data-codetype="XML">ini Tag XML </pre>

7. Simpan Postingan tersebut ,,

Good Luck

Read More

CSS Selectors

CSS memungkinkan Anda untuk memilih dan memanipulasi elemen HTML.
CSS digunakan untuk "menemukan" (atau memilih) elemen HTML berdasarkan  id, kelas, jenis, atribut, dan banyak lagi,

Elemen Selector
Anda dapat memilih semua <p> elemen pada halaman seperti ini: (semua <p> elemen akan pusat-blok, dengan warna teks merah)

01 02 03 04 05 06 07

p { text-align:center; color:black; font-family:arial; }

Read More

Komentar pada CSS

Komentar digunakan untuk menjelaskan kode Anda, dan dapat membantu Anda ketika Anda mengedit kode sumber di kemudian hari. Komentar diabaikan oleh browser. Sebuah komentar CSS diawali dengan "

/ *

dan diakhiri dengan

* /

, seperti ini:

1 2 3 4 5 6 7 8

/*anda bisa menuliskan komentar si sini*/ p { text-align:center; /*anda bisa menuliskan komentar di sini juga*/ color:black; font-family:arial; }

Read More

Code Warna RGB

Just to tell you all that for the flexibleness and easy Blogger Template customization, I actually have revealed very helpful tool which will help you get the hexadecimal color value or RGB value for any color you would like. These tools are advanced integrated versions of color pickers utilized ingraphic software like Photoshop. i'm happier than you'r as a result of currently I don’t have to be compelled to open Photoshop on every occasion for selecting my desired color or eat my brain to find matching colors

Read More

Syntax CSS

Aturan CSS memiliki dua bagian utama: SELECTOR dan satu atau lebih DEKLARATION:
Selector biasanya elemen HTML yang ingin di buat style.
Setiap Declaration terdiri dari Property dan Value.
Property adalah atribut style yang ingin anda rubah nilainya(value).

Sebuah deklarasi CSS selalu diakhiri dengan titik koma ( ; ), dan kelompok deklarasi dikelilingi oleh kurung keriting (curly brackets) ({.......}):
contoh:

1	p {color:red;text-align:center;}

Untuk membuat CSS lebih mudah dibaca, Anda dapat menempatkan satu deklarasi pada setiap baris, seperti ini

1 2 3 4 5

p { color:red; text-align:center; }

Read More

Pengenalan CSS

CSS merupakan kepanjangan dari Cascading Style Sheet yaitu suatu dokumen yang digunakan untuk
melakukan pengaturan halaman web.

Apa itu CSS ???

• CSS singkatan dari Cascading Style Sheets
• Styles didefinisikan bagaimana manampilkan elemen HTML
• Styles umumnya disimpan ke dalam Style Sheet
• Styles ditambahkan HTML untuk membantu pekerjaan
• External Style Sheets dapat membantu banyak pekerjaan
• ExternalStyle Sheet disimpan dalam CSS files
• Multiple Style dapat didefinisi banyak jendela menjadi satu

Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun
bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets
merupakan kelebihan tersendiri.

Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada.
Style sheet mendeskripsikan bagaiman tampilan document HTML di layar. Anda juga bisa
menyebutnya sebagai template dari documents HTML yang menggunakanya.

Read More