kode warna web

Ada yang pengen tau kode warna yang digunakan pada web nich aku kasih bocoran dikit

 

 Cyan #00ffff
Blue #0000ff
Skyblue #abcdef
Darkcyan #008686
Cadetblue #5f9ea0
Midnightblue #191970
Mediumslateblue #7b68ee
Cornflowerblue #6495ed
Lightsteelblue #b0c4de
Lightskyblue #87cefa
Powderblue #bde0e6
Aquamarine #7fffda
Dodgerblue #1e90ff
Royalblue #4169e1
Blueviolet #8a2be2
Indigo #460082
Lavender #e6e6fa
Lightblue #add8e6
Deepskyblue #00bfff
Darkslateblue #483080
Mediumvioletred #071585
Mediumturquoise #4801cc
Mediumorchid #ba55d3
Darkturquoise #00ccd1
Paleturquoise #afeeee
Darkorchid #9932cc
Slateblue #6454cd
Aqua #00ffff
Red #ff0000
Darkred #860000
Indianred #cd5c5c
Firebrick #622222
Lightsalmon #ffa07a
Lightcoral #f08080
Maroon #800000
Crimson #dc143c
Tomato #ff6347
Salmon #fa8072
Coral #ff7f50
Pink #ffc0cb
Hotpink #ff69ba
Deeppink #ff1493
Lightpink #ffb6c1
Mistyrose #ffe4e1
Moccasin #ffe4b5
Peachpuff #ffdab9
Mintcream #f5fffa
Floralwhite #fffaf0
Oldlace #fdf5e6
Thistle #d8bfd8
White #ffffff
Linen #faf0e6
Navy #000080
Snow #fffafa
Orange #ffd000
Orangered #ff4500
Burlywood #deb887
Darkorange #ff8c00
Palevioletred #db7093
Sandybrown #f4a460
Rosybrown #bc8f8e
Brown #a52a2a
Peru #cd853f

Gold #ffd700
Yellow #ffff00
Lightyellow #ffffe0
Yellowgreen #9acd32
Palegoldenrod #eee8aa
Goldenrod #daa520
Lime #00ff00
Green #008000
Seagreen #f4a460
Palegreen #98f698
Lightseagreen #20b2aa
Forestgreen #228622
Lightgreen #90ee90
Olive #808000
Tan #d2b48c
Teal #008080
Olivedrab #6b8e23
Greenyellow #adff2f
Darkslategray #2f4f45
Darkolivegreen #55662f
Mediumspringgreen #00fa9a
Darkgoldenrod #688606
Darkkhaki #606766
Orchid #da70d6
Fuchsia #ff00ff
Darkmagenta #860086
Darkviolet #940003
Mediumpurple #9370db
Violet #ee82ee
Purple #800080
Plum #dda0dd
Gray #808080
Dimgray #696969
Gainsboro #dcdcdc
Lightslategray #778899
Lightgray #d3d3d3
Slategray #708090
Darkgray #a9a9a9
Silver #c0c0c0
Springgreen #00ff7f
Lightpink #ffb6c1
Navojowhite #ffdead
Khaki #f0e68c
Chocolate #d2691e

read more "kode warna web"

READ MORE - kode warna web

Memberi shading pada judul postingan

Banyak hal unik yang dapat kita lakukan melalui blog salah satunya berkreasi dengan apa yang ada di imajinasi di sini saya pengen memberi salah satu tips untuk memberi bayangan pada judul postingan yang kita buat maka sobat harus mencari kodenya yang di tandai dengan h1 Untuk tanggal entri dan judul dari sidebar ditandai dengan h2, sedangkan untuk judul postingan di tandai dengan h3, dan terahir adalah komentar yang di tandai dengan h4.

Di bawah ini adalah kode dari masing-masing CSSnya yang terdapat pada template Minima Ochre baru :

#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}

h2 {

margin:1.5em 0 .75em;

font:$headerfont;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color:$sidebarcolor;

}

.post h3 {

margin:.25em 0 0;

padding:0 0 4px;

font-size:140%;

font-weight:normal;

line-height:1.4em;

color:$titlecolor;

}

#comments h4 {

margin:1em 0;

font-weight: bold;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color: $sidebarcolor;

}

Untuk menambahkan efek bayangan pada teks, kita hanya perlu menambahkan kode seperti ini :

text-shadow:1px 1px 1px #006400;

Sebagai contoh kita ambil h1 untuk judul Blog, maka kurang lebih akan menjadi seperti ini :

#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

text-shadow:1px 1px 1px #006400;

}

Untuk langkah pemasangan pertama-tama :

-Login ke Blogger

-Tata letak

-Edit HTML

Setelah itu cari dari masing-masing kode judul

h1 h2 h3 h4

yang ingin ditambahkan. Sebagai contoh yang kedua adalah judul posting atau h3. Setelah menemukan kode CSSnya, sobat tinggal menambahkan kode ini :

text-shadow:1px 1px 1px #006400;

*ini untuk warna efek hijau

tepat di bawahnya, sehingga menjadi seperti ini :

.post h3 {

margin:.25em 0 0;

padding:0 0 4px;

font-size:140%;

font-weight:normal;

line-height:1.4em;

color:$titlecolor;

text-shadow:1px 1px 1px #006400;

}

read more "Memberi shading pada judul postingan"

READ MORE - Memberi shading pada judul postingan

Sembunyikan nama blog

Memberi nama pada blog emang keharusan tapi gimana ya kalau kita pengen nama blog itu tidak nampak pada header blog kita....????

untuk menyembunyikan mudah sekali dilakukan, yaitu klik PENGATURAN, lalu pilih TATA LETAK dan kemudian masuk ke EDIT HTML. Kemudian cari kode berikut atau yang mirip dengan ini :

#header h1 {
margin:0px 0px 0;
padding-left:30px;
padding-top:10px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
color:$pagetitlecolor;
}

setelah ketemu, tinggal tambahkan code visibility:hidden; kedalam code tadi, sehingga menjadi

#header h1 {
margin:0px 0px 0;
padding-left:30px;
padding-top:10px;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
color:$pagetitlecolor;
visibility:hidden;
}

read more "Sembunyikan nama blog"

READ MORE - Sembunyikan nama blog

merubah ukuran elemen pada template

Template pada blog pada dasarnya berisi kode-kode yang saling berhubungan. Di dalam sebuah template umumnya terdapat beberapa bagian atau dibagi menjadi beberapa bagian, yang diantaranya adalah :

= Header
== Halaman posting
=== Sidebar
==== Footer
===== Halaman dari blog itu sendiri


kadang secara deault ukuran dari elemen diatas sudah diatur oleh sang pembuat template. Tapi untuk kita selaku anak baru alias newbie didunia blogger pasti merasakan penasaran dan ingin mencoba mengotak-atik kode-kode dalam template. Disini saya akan memberikan solusi untuk kalian yang ingin merubah ukuran tiap elemen pada template blog.
CATATAN PENTING : jika kalian merubah ukuran salah satu elemen diatas, maka kalian harus menyeimbangkan tampilan template dengan merubah ukuran yang lainnya seperti yang saya katakan diatas kalo semua elemen ini saling berhubungan.

OK... langsung ke pokok permasalahan, berikut saya jelaskan cara merubah ukuran untuk tiap bagian elemen diatas.

1. Merubah ukuran Header

kalian cari kode berikut :

#header-wrapper {
overflow: hidden;
height: 90px;
border-bottom: 1px solid #021f32;
width: 960px;
margin:0 auto;
}

2. Merubah ukuran Halaman posting

kalian cari kode berikut :

#main-wrapper {
float: left;
width: 600px;
padding: 0;
background: #fff;
}

3. Merubah ukuran sidebar

kalian cari kode berikut :

#sidebar-wrapper {
width: 320px;
float: $endSide;
}

4. Merubah ukuran footer

kalian cari kode berikut :

#footer {
overflow: hidden;
width: 1000px;
margin: 0 auto 14px auto;
padding: 2px 0 0 0;
}

5. merubah ukuran Halaman Blog

kalian cari kode berikut :

#outer-wrapper {
width: 100%;
margin:0 auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
}

KETERANGAN :
== Untuk merubah ukuran lebar masing2 elemen kalian perhatikan kode berwarna merah
== Untuk ukuran biasanya dalam bentuk px atau %
== Untuk setiap template kode CSS diatas tidak akan sama persis tergantung templatenya sendiri dan tergantung yang membuat template.

Semoga artikel sederhana diatas dapat membantu dan sebagai sarana belajar buat kita yang sedang mendalami dunia blogger.

 

from :z33s

read more "merubah ukuran elemen pada template"

READ MORE - merubah ukuran elemen pada template

Bikin tabmenu di blog

Sistem navigasi yang baik dalam blog sangatlah diperlukan yang jelas2 dapat mempermudah pengunjung blog saat sedang menjelajahi isi blog kamu. Sistem navigasi ini bisa berupa Menu, baik horizontal maupun vertikal, atau berupa post yg dengan sedemikian rupa diubah menjadi halaman navigasi. Lalu, apa yg menarik dari Menu Horizontal Tab ini?


Menu Horizontal bisa menjadi alternatif buat Menu Vertikal biasanya dan bisa jadi ngebuat halaman blog jadi lebih hemat. Melihat dari pentingya keberadaan nya, Menu Horizontal Tab biasanya diletakkan di tempat yg mudah dilihat pengunjung. Di bawah Header contohnya.

1. Langkah pertama, masuk ke Layout > Edit HTML.

2. Masukkan kode CSS ke dalam template, gampangnya letakkan di atas kode ]]></b:skin>

#navigation{font-size:110%;
height:2.2em;
line-height:2.2em;
margin:0 1px;
color:#999;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ccc;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #999;
}
* html #navigation a {width:1%;}
#navigation a:hover{
background:#ccc;
color:#fff;
text-decoration:none;
}

3. Selanjutnya cari kode ini:

<b:section class="header" id="header" maxwidgets="1" showaddelement=”no”>

Kalo engga ketemu cari section dengan class="header".
Lalu ubah menjadi:

<b:section class="header" id="header" maxwidgets="10" showaddelement="yes">

Ini dilakukan supaya kamu bisa memasukkan element di bawah bagian header blog kamu.

4. Lalu masuk ke Page Elements. Di bawah bagian Header, klik Add a Gadget. Pilih HTML/JavaScript

5. Masukkan kode2 ini ke dalamnya:

<div style="text-align: center;">
<div id="navigation">
<ul>
<li class="selected">
<a href="http://blogkamu.blogspot.com/">Home</a></li>
<li><a href="http://blogger-holic.blogspot.com/search/label/LABEL" >Link Label</a></li>
<li><a href="http://blogger-holic.blogspot.com/">Blogroll Links</a></li>
</ul>
</div>
</div>

6. Klik save.


Menu horizontal tab sebaiknya diisi dengan link yg bisa menjadi 'pintu2' bagi artikel lainnya. Contohnya dengan link menuju label tertentu. Dan jangan juga mengisi nya dengan terlalu banyak link, tentunya bakal bikin jadi penuh nantinya.

Pas lagi2 jalan ke blognya O-OM, saya nemuin ada sebuah online tools yg bisa ngedesain menu, horizontal bisa.. vertikal apalagi. Namanya MyCSSMenu. Tools ini rasanya perlu dicoba, selain prosesnya yg mudah, pilihan menunya juga banyak. Thanks infonya O-OM ^.^b


Update:
Ok, menu sudah terpasang, terus bagaimana caranya nambah isi link ke dalam menunya?
Caranya mudah aja koq..
tinggal tambahkan:

<li><a href="LINK_YANG_DIINGINKAN" >Anchor text</a></a></li>

diantara <ul> dan </ul>. Ubah LINK_YANG_DIINGINKAN dengan link yang akan dimasukkan ke dalam menu dan ubah Anchor text

review : blogger holic

read more "Bikin tabmenu di blog"

READ MORE - Bikin tabmenu di blog