BELAJAR BIKIN CSS TEKNIK DASAR

Ass...wah binggun harus nyimpan data dimana buat belajar CSS lom ngerti-ngerti juga kwkwkwk.......ya sudah lah simpan disini aja kali aja bisa berguna buat yang mau belajar seperti ane.......




Karena nggak mau pusing sendirian,,,,akhir'x saya posting dech ''BELAJAR BIKIN CSS TEKNIK DASAR'' ini....
Sekalian ngajak2 para NEWBIe yang mau belajar bikin CSS, buat ikutan berPUSING-RIA seperti saya....hehehehe

Apa yang Harus Kamu Tahu Terlebih Dahulu?

Kamu harus paham tentang css, bila tidak tahu sama sekali, tidak masalah.

Melalui tutorial ini, kamu akan disulap menjadi MyWapBlog Designer dadakan secara cepat (insya allah).

Pengenalan CSS

CSS adalah bahasa/kode yang digunakan untuk mendesain tampilan halaman internet ( HTML, XHTML, dll.)
Dengan CSS, kamu bisa mengatur tampilan background, warna text, ketebalan text, perataan text/gambar/tabel/daftar, dll

Kode CSS

CSS memiliki syntax (kode baku) sebagai berikut:
selector { property: value }


contoh untuk mengatur paragraf:
p { background: red; color: white; }


maka paragraf akan tampil dengan background merah dan text berwarna putih.


Untuk memisahkan property, gunakan tanda titik-koma ( ; )


Keterangan:
1. SELECTOR, yaitu elemen/bagian halaman yang ingin kamu atur, misal:
paragraf, text, dll.
2. PROPERTY, yaitu atribut dari elemen yang ingin kamu atur, misal:
text diatur warnanya, ketebalannya, perataanya, dll.
3. VALUE, adalah nilai dari properti, misal:
warna merah, rata tengah, dll.

Penjelasan Syntax

1. SELECTOR, terdiri atas:
body= seluruh isi halaman.
p= paragraf.
a= anchor/link
#= id
. (titik)= class.

2. PROPERTY, terdiri atas:
color=warna text.
background= background.
align= perataan,,,terdiri atas: left, center, right, justify.
margin= batas tepi halaman dengan isi halaman.
border= bingkai halaman.
padding= batas bingkai dengan isi di dalam bingkai
VALUE =(diisi dengan).
color= di isi nama/kode warna.
background=diisi dengan warna atau url gambar.
margin= diisi dengan angka px (pixel) atau persen (misal: 12px atau 12%.)
border= (penjelasannya lumayan panjang).
padding= (penjelasannya lumayan panjang).

Dimana Kita Membuat dan Menyimpan Theme/CSS Kita?

Kamu harus punya wapsite atau situs lain yang bisa digunakan untuk membuat file CSS, misalnya wen.ru,
silakan buat wapsite di http://wen.ru
bila sudah punya, masuklah ke wExplorer > > add >> Create File (txt, css, js, wmls, xml) >> pada kotak atas,
isi nama halaman dengan nama yang kamu suka dan pada kotak bawahnya, pilih .css, klik OK.
masukkan kode CSS nya.
................................ berikut adalah pengaturan untuk seluruh isi halaman
body {...}
berikut adalah pengaturan standar paragraf
p {...}


berikut adalah pengaturan standar link
a {...}
pengaturan diatas berlaku apabila bagian-bagian dibawah ini tidak diatur.
berikut adalah pengaturan untuk judul blog
#header h1 a {...}
berikut adalah pengaturan untuk deskripsi blog
#header p {...}
berikut adalah pengaturan untuk Search Form
#search_form {...}
berikut adalah pengaturan untuk informasi saat seseorang mencari kata menggunakan Search Form
#search_info {...}
berikut adalah pengaturan untuk shortcut "[#] Comments"
#nav_shortcut {...}
berikut adalah pengaturan untuk judul post & nama komentator
.title {...}
berikut adalah pengaturan untuk isi posting
.post {...}
ralat: text penunjuk "Comments"
#comments h2 {...}
ralat: isi komentar
#comment p {...}
berikut adalah pengaturan untuk Comment Form
#comment_form {...}
berikut adalah pengaturan untuk judul Navigasi
#navigation h2 {...}
ralat: text pada bagian Navigasi
#navigation p {...}
berikut adalah pengaturan untuk link pada bagian Navigasi
#navigation a {...}
berikut adalah pengaturan untuk judul Blogroll
#blogroll h2 {...}
ralat: text pada Blogroll
#blogroll p {...}
berikut adalah pengaturan untuk link pada Blogroll
#blogroll a {...}
berikut adalah pengaturan untuk text pada footer
#footer p {...}
berikut adalah pengaturan untuk link pada footer
#footer a {...}
................................ Isilah ''{...}'' dengan kode CSS yang kamu kehendaki.
Misal:
body { background: #000000; color: #ffffff; text- align: center; text-size: small; margin: 5px; border: 2px solid #ff0000; padding: 10px; }
maka halaman akan tampil dengan warna hitam, text putih ukuran kecil, rata tengah, bingkai 2 pixel warna biru, margin 5 pixel, dan padding 10 pixel.
Silakan buang bagian yang tidak perlu.
Simpanlah file tersebut.
Masuk ke wExplorer, catat url file tersebut.
Sekarang masuk ke Dashboard MyWapBlog, pilih Blog Theme, masukan url theme buatan kamu.
Lihat hasilnya!

SUMBER

Cara Pasang Google Plus One Button di Blog

    Pada tahun 2011 ini google seperti dikejar setoran. Banyak produk-produk baru yang dikeluarkan untuk memanjakan kita sebagai penggunanya. Salah satu yang terbaru adalah Proyek Google Plus yang digadang-gadang bakal menjadi saingan terberat facebook yang menggila itu. Semoga saja tidak seperti Orkut ataupun Wave yang layu sebelum berkembang.

Dan pada post kali ini saya akan membahas Google Plus One Button. Sebuah tombol layaknya tombol "like" pada facebook. Entah apa maksudnya, kenapa tombolnya dulu yang heboh ketimbang Proyek Google Plus itu sendiri.

Agak telat saya mem-post cara Memasang Google Plus One Button di Blog atau mungkin tidak sama sekali jika tidak membuka Google Webmaster Tool dan mendapati halaman seperti gambar berikut;

Ternyata tombol satu ini berdampak kepada hasil pencarian kita di search engine google. Lalu adakah pengaruhnya dengan traffik?


Melihat hal itu, kayaknya penting juga untuk Memasang Google Plus One Button di Blog, yang secara defaultnya memang sudah terpasang di template bawaan blogger. Tapi untuk template modifikasi seperti yang kita pake ini tentunya fitur tersebut tidak ada. Dan untuk memasangnya adalah:


Letakkan kode berikut di atas tag <head> pada template kita.
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'id'}
</script>
Letakkan kode <div class='g-plusone'></div> dimana saja kamu menginginkan tombol Google Plus One akan terlihat di blog kita.
Untuk info lebih lengkap tentang Google Plus One Button, silahkan kunjungi halaman http://www.google.com/webmasters/+1/button/


Happy blogging!

SUMBER

Cara pasang TGL/harian di blog

ketemu lagi sob ....!
ane kasi saran dikit buat yg pelupa tgl sama hari hahahahaha nih ane kasi code html nya

<script type="text/javascript">
now = new Date();
if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))
else (a=now.getTime());
now.setTime(a);
var tahun=now.getFullYear()
var hari=now.getDay()
var bulan=now.getMonth()
var tanggal=now.getDate()
var hariarray=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu")
var bulanarray=new Array("Januari","Pebruari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","Nopember","Desember")
document.write(hariarray[hari]+" "+tanggal+" "+bulanarray[bulan]+" "+tahun)
</script>

sumber

Cara buat spoiler

Ass sob.. bingung mau posting apaan
ane kasi tip's bikin spoiler z ok langsung nie kode HTML nya 

<div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input value="BUKA DISINI" style="margin: 0px; padding: 5px; width: 100%; font-size: 11px; background:#424242; color:#ffffcc; border:1px dashes yellow;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;TUTUP DISINI&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;BUKA DISINI&#39;; }" type="button" /></div><div class="alt2"><div style="display: none;"><div style="border: 2px dashes white; color:Bisque;background-color:NONE; text-align: justify; padding:10px; ">


KODE HTML / NON HTML


</div></div></div></div></div>


YANG WANA KUNING ISI DAH TERSERAH ANDA mudah kn

Bikin daftar isi otomatis

Ass...

Posting kali ini sederhana tapi mantap...ok langsung sob!

Berawal dari ga pengen ribeut bikin DAFTAR isi otomatis terus cari" di google dah berapakali di coba gagal melulu dan akhir nya ada yg jalan setelah dites soal nya yangposting ngak dites dulu lansung di pos jadi gagal dah, nah kali ini ane dah terapkan d blog ane ternyata sukses.........

1.biasa login bloger

2.pilih racangan

3 tambah HTML/JAVA

nih HTML nya

<!-----nerocan----->

<center><div style="border: 3px solid rgb(0, 0, 0); padding: 5px; overflow: auto; width: 550px; height: 230px; background-color: rgb(0, 0, 0);"><script src="http://antigaptek.googlecode.com/files/recentpost.js"></script>

<script>var numposts = 50; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>

<script src="http://nerotips.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">

</script></div><center>

<!-----nerocan------>

 

4. GANTI WARNA KUNING DENGAN JUMLAH POS YANG KAMU INGIN KAN SOB DAN GANTI WARNA HIJAU SAMA ALAMAT BLOG MU

5.save tralalala..jadi dah

Menambah Icon di Samping Judul Artikel

 

Ass....

Posting kali ane bikin artikel enak diliat mata nei....langsung aja

Caranya Ialah :
1. Masuk Akun Blogger Anda dan klik Layout pilih Edit Html.

2. Cari Kode Css Berikut :
.post h3 {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
<font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;

3. Cari Icon Yang ada suka misalnya icon buku dan pena yang punya gambarnya (http://tbn1.google.com/images?q=tbn:nlmFs_SO55kJ_M:http://remas-alakbar.com/images/
buku.pngh) atau anda bisa mencarinya di Iconarchive.com, disana anda akan mendapatkan banyak contoh icon.

4. Ganti kode padding:30px 0px 0px 45px; Jadi padding:48px 0px 0px 45px; dan tambahkan height:48px; dan background:url nya dibawah color:#333;yang jadinya seperti ini:

 
.post h3 {
margin:.5em 0;
padding:48px 0px 0px 45px;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
background:url(http://tbn1.google.com/images?q=tbn:nlmFs_SO55kJ_M:
http://remas-alakbar.com/images/buku.png) no-repeat left center;

5. Save templatenya.
Nah silahkan mencoba apakah anda bisa.. saya yakin anda pasti bisa

Bikin Comentar Admin terbaru

Untuk posting sekarang ini agak sedikit ribeut temen" tapi hasil nya memuaskan telah saya coba sukses di blog saya yang satu lagi.

Ketika saya jalan-jalan (blogwalking) ane sering menemukan komentar admin yang berbeda dari pengunjung nya,wah ane tertarik juga terus coba eh emang menarik buat di pasang di blog.Ok! langsung

Masuk blogger > rancangan > edit html > centang expand template widget
Cari kode ]]></b:skin> Pastekan kode berikut tepat di atas kode  ]]></b:skin>

 .author-comments {
background: #333333;
border: 2px solid #666666;
padding: 5px;
}

Pada kode berwarna merah di kotak atasbisa diganti sesuai keinginan.
Kemudian cari kode
            <data:commentPostedByMsg/>
            </dt>

Jika sudah ketemu kode di atas, pastekan kode di bawah ini tepat di bawah </dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>   

Kemudian cari kode <dd class='comment-footer'> tambahkan </b:if> tepat di atas kode <dd class='comment-footer'>Sehingga keseluruhannya tampak seperti di bawah ini :

<data:commentPostedByMsg/>
</dt><b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/> <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
</b:if>            <dd class='comment-footer'>

Terakhir simpan template, dan kemudian untuk melihat hasilnya silahkan  berkomentar di blog sendiri dengan catatan harus login di blogger dulu. 
sumber

Cara Membuat Kotak Komentar Blogspot Via Facebook

   Ada beberapa cara membuat Komentar box di blogspot via FB maupun Yahoo dengan menggunakan FB Developers. Cara yang pertama ane jelaskan yah!..  dengan memasukkan kode HTML yang akan kita letakkan di bawah setiap postingan. Jadi tanpa harus edit HTML ribeut hehehe.....
Sebelumnya temen masuk sini dulu 
nah timbulkan jendela seperti  gambar diatas..? sekarang edit deh dengan selera temen" Copy ke HTML  blog temen"...
dah kan ada di blog nya..? wokeh selamat anda berhasil .hehehehe

Cara Mengganti Icon/Logo Blog Di Address Bar

Pada posting kali ini ane akan mencoba untuk menuliskan tutorial cara mengganti icon/logo yang terletak di address bar, bagi teman-teman yang ingin tahu bagaimana cara merubah icon blog di address bar, cara mengganti icon blog ini tidak hanya berlaku untuk blog blogger saja, walaupun sedikit beda :-)

Wokeh langsung z kepokok nya   :)

• Untuk mengganti icon di address bar langkah pertama yang harus anda lakukan adalah Login ke Blogger
• Setelah itu klik menu Layout atau Tata letak
• Kemudian klik menu Edit HTML
• Silahkan temukan kode ini </head>
• Setelah itu kode nya sudah di temukan silakan taroh kode icon di bawahnya.

Berikut kode untuk mengganti icon yang harus di pasang
<link href='MASUKKAN LINK LOGO/GAMBAR DISINI' rel='SHORTCUT ICON'/>

Selamat mencoba klo ada ggl berarti ada kurang berutung dan kurang ganteung heeehehe...........
Nyatai aja pasti berhasil kok......

Tujuan Blog

Ass...teman

   Posting pertama ane adalah mau ngasitau aja tujuan dari ngeblog yaitu buat seneng" apa buat Cari aunga heee", klao buat seneng isilah blog mu dengan pernak-pernik yang bikin blog mu indah "seperti Blog ane ini

tapi klo buat cari uang cobalah serius tentang isi nya aja.....

OK ayo kita mulai............