Css Education

Selasa, 09 Oktober 2012

Pengenalan JavaScript

Apa itu JavaScript?

JavaScript adalah bahasa “Scripting”, bukan bahasa pemrograman.

JavaScript didisain untuk membuat halaman HTML menjadi lebih interaktif.

JavaScript biasanya disisipkan langsung pada halaman HTML.

Client Side scripting.

Apakah JavaScript sama dengan Java? TIDAK. JavaScript dan Java sangat berbeda baik itu dari bahasa maupun dari konsep dan disainnya.

JavaScript bersifat Case Sensitive.

Penggunaan JavaScript

Menggunakan tag HTML <script>

Contoh

<script type="text/javascript">
...
...
</script>

Penempatan JavaScript

Ditempatkan pada tag <head>

Ditempatkan pada tag <body>

Ditempatkan pada tag <head> dan <body>

Sebagai file external.

Penggunaan JavaScript External

File contoh1.js

document.write("<h2>Text ini ditulis dengan JavaScript</h2>");

File contoh1.html

<head>
    <script type=“text/javascript”src=“contoh1.js”></script>
</head>

Variabel

Aturan penulisan Variabel :

Nama variabel bersifat Case Sensitive

Harus dimulai dengan huruf atau karakter underscore.

Deklarasi Variabel dengan statement var

var nama;

var nama="denddy";

Variabel yang tidak dideklarasikan

nama="denddy";

x=y+5;

Catatan : Artikel ini masih berlanjut ke tahap Pengenalan Operator javascript.

tungu artikelnya ya..!!!

Post By : denzdii

Read More No comments

Senin, 03 September 2012

under88 - Kali ini saya akan mencoba menjelaskan cara membuat CSS Corner Ribbon yang pada dasarnya untuk memberikan tanda pada sebuah content atau widget tertentu. dalam hal ini saya hanya akan mempergunakan CSS3 sebagai basicnya tanpa menggunakan Image(gambar). lihat demo...

View Page Demo

HTML

Banyak penyimpanan markup yang bisa di lakukan

<div class="wrapper">
  <div class="ribbon-wrapper-green">
     <div class="ribbon-green">UNDER</div>
  </div>
</div>

CSS Wrapper

Style warna hijau yang mungkin bisa anda kembangkan sendiri sesuai selera.

.wrapper {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}

Content yang mencangkup keseluruhan isi. dengan penempatan ini bisa di lakukan di berbagai tempat seperti .post , .content-wrapper , #main-wrapper dan lain-lain . Yang perlu di perhatikan adalan position: relative;. Saya sarankan itu tidak perlu ada perubahan position. karena bila di ganti maka posisi bukan lagi di tempat yang sesuai. mungkin akan muncul di atas header atau di samping. tingkat lanjut tulis komentar.

CSS Corner-Ribbon Style

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

ket : tanpa harus ada perubahan .. kecuali background ,border dan box shadow yang bisa di kreasikan dengan tampilan yang anda inginkan. tingkat lanjut tulis komentar .

Lihat Demo

reference

Read More No comments

Penggunaan Link CSS Sprite Gambar

CSS Sprite Pada Gambar biasa di gunakan untuk membuat menu,item,list,button dan lainnya dengan background sebuah gambar. untuk mengatur link css sprite kita harus selalu mengunakan markup akhir a:,agar link pada text anchor tetap aktive..

a {
       display: block;
       background: url(sprite.png) no-repeat;
       height: 25px;
       width: 150px;
}

a:hover {
       background-position: 0 -25px;
}

display: block; gunakan block agar gambar pada text bisa membungkus keseluruhan. atur tinggi dan lebar sesuaikan gambar,agar berfungsi di semua browser termasuk mobile layout.

a:hover {
       background-position: 0 -25px;
}

a:hover guna meroll background sprite gambar menjadi berbeda dengan hanya mengatur background-position:

Read More No comments

Sabtu, 01 September 2012

Pure CSS3 Mac Toolbar

Button menu pada toolbar dengan tema windows MAC pure dari CSS3.

* Karena tutorial ini tidak memiliki tujuan praktis untuk membuat kelengkapan caranya, saya hanya berupaya memenuhi dan target jadwal yang sudah di tentukan.

<div class="toolbar">
    <div class="nav">
        <a class="close" href="#">&nbsp;</a>
        <a class="minimize" href="#">&nbsp;</a>
        <a class="expand" href="#">&nbsp;</a>
    </div>
    Mac Toolbar in Pure CSS
</div>

.toolbar {
  overflow:hidden;
  background:#CFCFCF;
  background-color:#cfcfcf;
  background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#cfcfcf),to(#a8a8a8));
  background-image:-webkit-linear-gradient(top,#cfcfcf,#a8a8a8);
  background-image:-moz-linear-gradient(top,#cfcfcf,#a8a8a8);
  background-image:-ms-linear-gradient(top,#cfcfcf,#a8a8a8);
  background-image:-o-linear-gradient(top,#cfcfcf,#a8a8a8);
  background-image:linear-gradient(top,#cfcfcf,#a8a8a8);
  -webkit-border-radius:4px 4px 0 0;
  -moz-border-radius:4px 4px 0 0;
  position:relative;
  overflow:hidden;
  font:14px/26px 'lucinda grande',Helvetica,Arial;
  text-align:center;
  padding:1px 0 0 68px;
  height:26px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
.toolbar,
.toolbar* {
  color:#111;
  text-shadow:0 1px 0 rgba(255,255,255,0.4);
}
.nav {
  position:absolute;
  top:6px;
  left:12px;
}
.nav a {
  position:relative;
  overflow:hidden;
  display:block;
  float:left;
  width:14px;
  margin-right:7px;
  font:bold 14px/14px 'Helvetica','Arial';
  text-align:center;
  color:#FFF;
  -moz-box-shadow:0 -1px 1px 0 rgba(0,0,0,0.3) inset,0 1px 3px 0 rgba(0,0,0,0.80) inset,0 1px 0 0 rgba(255,255,255,0.40);
  -webkit-box-shadow:0 -1px 1px 0 rgba(0,0,0,0.3) inset,0 1px 3px 0 rgba(0,0,0,0.80) inset,0 1px 0 0 rgba(255,255,255,0.40);
  box-shadow:0 -1px 1px 0 rgba(0,0,0,0.3) inset,0 1px 3px 0 rgba(0,0,0,0.80) inset,0 1px 0 0 rgba(255,255,255,0.40);
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
}
.nav a.close {
  background-color:#f12519;
  background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#f12519),to(#ff8684));
  background-image:-webkit-linear-gradient(top,#f12519,#ff8684);
  background-image:-moz-linear-gradient(top,#f12519,#ff8684);
  background-image:-ms-linear-gradient(top,#f12519,#ff8684);
  background-image:-o-linear-gradient(top,#f12519,#ff8684);
  background-image:linear-gradient(top,#f12519,#ff8684);
  color:#630f0a;
}
.nav a.minimize {
  background-color:#e59130;
  background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#e59130),to(#ffdf4b));
  background-image:-webkit-linear-gradient(top,#e59130,#ffdf4b);
  background-image:-moz-linear-gradient(top,#e59130,#ffdf4b);
  background-image:-ms-linear-gradient(top,#e59130,#ffdf4b);
  background-image:-o-linear-gradient(top,#e59130,#ffdf4b);
  background-image:linear-gradient(top,#e59130,#ffdf4b);
  color:#742a08;
}
.nav a.expand {
  background-color:#a1e268;
  background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#a1e268),to(#a1e268));
  background-image:-webkit-linear-gradient(top,#a1e268,#a1e268);
  background-image:-moz-linear-gradient(top,#a1e268,#a1e268);
  background-image:-ms-linear-gradient(top,#a1e268,#a1e268);
  background-image:-o-linear-gradient(top,#a1e268,#a1e268);
  background-image:linear-gradient(top,#a1e268,#a1e268);
  color:#093b00;
}
.nav a:before {
  content:'';
  width:6px;
  height:3px;
  background:-webkit-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:-moz-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:-ms-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:-o-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  position:absolute;
  left:50%;
  top:1px;
  margin-left:-3px;
}
.nav a:after {
  content:'';
  line-height:2px;
  width:12px;
  height:12px;
  position:absolute;
  left:50%;
  margin-left:-6px;
  bottom:-4px;
  opacity:0.55;
  background:-webkit-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:-moz-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:-ms-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:-o-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
}
.nav a.close:after {
  font:bold 11px/0 Verdana;
}
.nav:hover a.close:after {
  content:'x';
}
.nav:hover a.minimize:after {
  content:'-';
}
.nav:hover a.expand:after {
  content:'+';
}
a.close:active {
  background:#c84840;
}
a.minimize:active {
  background:#bb7e39;
}
a.expand:active {
  background:#5b9d2a;
}

DEMO Mac Toolbar

Post By : denzdii

Original Artikel : calebogden.com/mac-toolbar-css/

Read More No comments

Jumat, 31 Agustus 2012

4 Template Responsive Blogger 2012

Sebelum memulai tutorial Web Design, kali ini saya akan membagikan 4 template responsive yang mungkin akan anda sukai. template responsive ini akan berguna untuk semua layar baik dari PC, Tablet, Mobile dan media screen dari berbagai ukuran. meskipun baru-baru ini blogger sudah mengaktifkan fitur baru dengan Template dinamis untuk mobile. tapi tidak salahnya anda bisa menggunakan template yang saya bagikan agar stylenya tidak terbatas, atau bisa di kembangkan lagi dengan kreasi dan inspirasi anda. silahkan download dan lihat demonya sebelum di gunakan.

Post By : denzdii

Read More No comments

Rabu, 29 Agustus 2012

Penggunaan @font-face Dengan Google Web Font

Cara Untuk mengganti dan menggunakan font blog tidaklah sulit karena banyak web yang memberikan font-font menarik yang bisa kita gunakan sesuka hati. nah kali saya akan memberikan tutorial cara mengganti font dengan Google Web Fonts. karena banyak pertanyaan seperti berikut.

Bagaimana cara mengganti font dengan google web fonts ?.

Bagaimana Mengambil hanya @font-face dari Google Web Fonts ?.

Apa bedanya menggunakan script,url style,dan @font-face ?.

berikut tutorialnya.

1. Masuk dulu di Google Web Fonts.

2 Setelah masuk pilih font yang di inginkan.

sebagai contoh kita akan pilih font Arbutus. seperti gambar berikut, klik add to collection. anda juga bisa memilihi banyak font yang di inginkan.

3. jika sudah pilih font. kemudian pada bagian menu di bawah terdapat 3 pilihan choose,review dan use. langsung klik saja use. seperti pada gambar berikut :

4. Setelah itu kita akan di hadapkan dengan berbagai pilihan style font seperti normal,bold,italic,bold italic dan lainnya tergantung dukungan font tersebut.

5. Di bawahnya ada pilihan kode untuk memasukan pada template.

Standar : biasanya pilihan ini berupa url link css.

@import : pilihan ini jarang di gunakan untuk template blogger.

javascript : pilihan font dalam bentuk javascript.

6. Nah pilihan terakhir adalah mengambil @font-face meskipun disana tidak di sediakan pilihan tersebut. tapi kita bisa mengambilnya dengan melihat isi URL link font. contoh pilihan standar :

<link href='http://fonts.googleapis.com/css?family=Arbutus' rel='stylesheet' type='text/css'>

ambil link url saja seperti ini http://fonts.googleapis.com/css?family=Arbutus, lalu buka link tersebut pada adress bar browser anda maka akan terbuka @font-face seperti ini.

@font-face {
  font-family: 'Arbutus';
  font-style: normal;
  font-weight: 400;
  src: local('Arbutus'), url(http://themes.googleusercontent.com/static/fonts/arbutus/v2/ZIN1_iT2tfyR9znPvk0NwA.woff) format('woff');
}

7. Terakhir kita bisa menyimpan @font-face pada blog dan menyimpanya pada bagian skin css template atau di atas ]]></skin>

mudah bukan cara pasang @font-face Google Web Fonts di blog, semoga artikel ini bermanfaat buat anda yang masih belajar membuat blog terutama pengguna blogger. terima kasih atas perhatiannya.

Post By : denzdii

Read More No comments

Display Switch Grid And List

Cara Membuat Post Display Grid Dan List jarang orang yang membuat tutorial ini karena saya sendiri suka sulit untuk menemukannya di google. kebanyakan semua dalam bahasa ingris. dan kesempatan kali ini saya akan mencoba membuatnya semudah mungkin. sebelumnya kita akan mengetahui dulu apa yang di maksud dengan grid dan list. penggunaan ini untuk menambahkan style pada readmore otomatis dengan javascript plus tumbnail. tombol switch ini hanya untuk mempercantik blog anda dan bisanya Display Grid Dan List ini di gunakan untuk blog dengan konten gallery, template blog, iklan, pemasaran produk, info movies, download software dan lainnya.

Demo Switch

GRID: Posisi default saat membuka blog maka yang akan active adalah pada display grid.

LIST : untuk melihat artikel dengan keternagan serta gambar kita hanya cukup mengklik tombol list.

Artikel Grid : Jika pengunjung buka blog kita maka pada halaman depan blog secara default yang akan tampil adalah grid dengan artikel gambar. ini akan cocok sekali jika blog anda berupa blog dengan mengutamakan sebuah gambar.

Artikel List : pengunjung akan sangat terbantu dengan list ini agar pengunjung tidak perlu secara langsung membuka artikel blog untuk melihat keterangan. cukup klik timbol list maka keterangan akan muncul. seperti pada gambar di atas.

Cara Memasang Display Grid Dan List Pada Template

1. masuk bagian edit template. centang bagian Expand Widget Templates .

2. Pasang HTML : cari kode seperti ini <b:section class='main' id='main' showaddelement='yes'> . ket : kode tersebut adalah widget post cari yang mirip saja. jika ketemu maka simpan HTML berikut di atas kode tadi.

<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='switch'>
  <div class='switch-left'>
    <span style='color: #CC0000;'>Recent</span> Post
  </div>
  <div class='switch-right'>
    <a class='bar_view' href='#'>Grid</a>
    <a class='dat_view' href='#'>List</a>
  </div>
</div>
</b:if></b:if>

keterangan : perhatikan yang di garis bawahi (no.5). ganti sesuai yang anda inginkan.

2. Sisipkan class="bar" : cari kode <div class='post hentry uncustomized-post-template'> atau <div class='post hentry'> jika sulit menemukannya gunakan ctrl+F untuk mempercepat. biasanya kode tersebut lebih dari satu. sisipkan pada semua kode tersebut. jika ketemu maka sisipkan bar pada atribut class maka hasilnya akan seperti ini.

<div class='post bar hentry uncustomized-post-template'>

atau

<div class='post bar hentry'>

3. Pasang Javascript dan jQuery. cari kode </head>.

dan simpan kode berikut di atasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://css3-tutsplus.googlecode.com/svn/trunk/personal/switch-display.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/**
 * jQuery switch
 *
 * active class active pada switch grid atau list
 * update by denddy gustiana
 * http://under-88.blogspot.com/
 * https://plus.google.com/109783772548428705949
 *
 */
jQuery(document).ready(function () {
    var $box=jQuery(".post"),
        $bar=jQuery("a.bar_view");
    $dat=jQuery("a.dat_view");
    $dat.click(function () {
        $box.removeClass("bar");
        jQuery(this).addClass("active");
        $bar.removeClass("active");
        jQuery.cookie("dat_style", 0);
        return false
    });
    $bar.click(function () {
        $box.addClass("bar");
        jQuery(this).addClass("active");
        $dat.removeClass("active");
        jQuery.cookie("dat_style", 1);
        return false
    });
    if(jQuery.cookie("dat_style")==0) {
        $box.removeClass( "bar");
        $dat.addClass("active")
    } else {
        $box.addClass("bar");
        $bar.addClass("active")
    }
});
//]]>
</script>

Catatan : script yang di garis bawahi di atas adalah plugin jquery versi 7. jika pada template anda sudah terpasang maka jangan di pasang kembali

4. Pasang CSS : karena grid ini hanya di tampilakan pada bagian home dan menggunakan tag conditional maka kita akan menaruh css di bawah ]]></b:skin> .

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
/*FONT PT Sans Narrow*/
@font-face {
    font-family:'PT Sans Narrow';
    font-style:normal;
    font-weight:400;
    src:local('PT Sans Narrow'),local('PTSans-Narrow'),
url(http://themes.googleusercontent.com/static/fonts/ptsansnarrow/v3/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff) format('woff');
}
/* CSS Untuk Tombol Switch*/
.switch {
 border-bottom:5px solid #CC0000;
 height:35px;
 color:#444;
 margin:0 10px;
 padding:5px 9px;
 text-transform:uppercase;
}
.switch-left {
 width:360px;
 float:left;
 margin:0 auto;
 padding-top:5px;
 font:20px PT Sans Narrow;
 text-shadow:1px 1px 0 #000;
 color:#AAA;
}
.switch-right {
 width:120px;
 float:right;
 margin:0 auto;
 padding-top:10px;
}
.switch a {
 border:1px solid #999;
 font:11px Arial;
 padding:3px 8px 3px 25px;
 text-transform:none;
 color:#aaa;
}
a.bar_view {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEVV40TNrq_zUISwno9PMKO2MnHvXr9AaOAUW1yP0Npd41hTw07om5Tjtr_ka0ZVwx6L53S3QSoXKO98AR5lP9shUXVkLGHsYCWN5vDXyeJhrKL9kdM5Lli_8E7P5neX_1E8zXI8hlIP2F/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihlWp7khzJUnjmGZjVl8IBTGS4Pi6ZDFC50OyBYi-5KIBYnpeTB_aj-tHUL4F6gj04H5LjuM_WM3j9Z5AjYE1Z4pQhgh87o2g142iQ9QmdhMsdbS-HbhtqOtZTZJHEsK_oCe0Vu7DJS4vs/s1600/listed.gif) no-repeat 3px center;
}
.switch a.active {
 background-color:#aaa;
 border:1px solid #999;
 color:#111;
 cursor:default;
}
/* CSS Bar untuk bagian grid */
.bar {
    background-color:rgba(0,0,0,0.3);
    border:1px solid #000;
    box-shadow:0 0 0 1px #333;
    -moz-box-shadow:0 0 0 1px #333;
    -webkit-box-shadow:0 0 0 1px #333;
    -o-box-shadow:0 0 0 1px #333;
    display:inline;
    float:left;
    height:160px;
    list-style:none;
    margin:10px 0 0 9px;
    overflow:hidden;
    padding:2px 3px 5px;
    position:relative;
    text-align:center;
    width:160px;
}
.bar h3 {
    height:30px;
    border:0 none;
    line-height:8px;
    margin:0 5px 5px;
    padding:2px;
    text-shadow:1px 1px 0 #000;
}
.bar h3 a {
    font:14px PT Sans Narrow;
    text-align:center;
    line-height:16px;
}
.bar h3 a:hover {
    color:#c1541a;
}
.bar .post-body {
    background:none;
    height:245px;
    overflow:hidden;
    width:167px;
    padding:0;
    margin:0 0 .3cm;
}
.bar img {
    float:left;
    height:110px;
    margin:0 18px;
    width:110px;
}
</style>
</b:if></b:if>

CSS yang saya gunakan sama seperti pada DEMO jika warna kurang cocok dengan template anda silahkan ganti sesuai kreasi anda dan di harapkan anda harus teliti membuat CSS karena itu maslah yang sering terjadi yang hasilnya kurang rapi

5. Simpan template anda dan lihat hasilnya.

Mengatasi kesalahan

Kebanyakan kesalahan biasanya pada bagian CSS karena pada template anda mungkin sudah banyak yang mengedit dengan berbagai style terutama pada bagian post dan gambar post yang hasilnya tidak rapi. serta readmore yang kurang benar cara pemasangannya. jika anda mengalami kesulitan dalam penempatan dan pengaturan css silahkan diskusikan untuk menemukan solusinya. dan jangan lupa tulis URL blog anda yang akan di pasang tutorial di atas. agar saya bisa mereview dan melihat kesalahan untuk mengatasinya.

semoga bermanfaat dan mohon maaf jika banyak kekurangan.

Post By : denddy

Read More No comments

Innovative Btemplates View Demo Download	Responsive CSS Tutsplus View Demo Download
Incipient bloggerbuster View Demo Download	Responsival fiveforblogger View Demo Download

Pages

Css Education

New Post

Rss

Pengenalan JavaScript

Pure CSS Corner Ribbon

HTML

CSS Wrapper

CSS Corner-Ribbon Style

Penggunaan Link CSS Sprite Gambar

Pure CSS3 Mac Toolbar

4 Template Responsive Blogger 2012

Penggunaan @font-face Dengan Google Web Font

Display Switch Grid And List

Cara Memasang Display Grid Dan List Pada Template

Mengatasi kesalahan