TUTORIAL BUAT BLOG

• 


• 


• 

1. Login : Login to BloGGeR (login ke BloGGeR)
2. Dasboard : Setelah masuk di halaman ini, cari dan KLIK link "Design".
3. Beberapa saat kemudian kita akan melihat halaman baru iaitu "Page Element (Element Laman)". KLIK "Edit HTML".
4. Kita akan melihat kode HTML penyusun blog. Disinilah kode CSS baru akan kita tambahkan. Cari kode ]]></b:skin>
5. Copy dan pastekan kode CSS Box Posting Kode HTML dg Animasi-1 tepat di atas kode tersebut seperti yang terlihat di bawah ini:


.GRenlarge{list-style-type: none;margin: 0;padding: 0;}
.GRenlarge li, .GRenlarge li.anim1, .GRenlarge li.anim2, .GRenlarge li.anim3 {display: inline;
width: 110px;}
.GRenlarge li img, .GRenlarge li.anim1 img, .GRenlarge li.anim2 img, .GRenlarge li.anim3 img {
width: 100px; float: left;
border: 4px solid #996600;
margin: 5px;
opacity: 0.6;
background: #888;
padding: 2px;
z-index: 100;
cursor: pointer;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
box-shadow: 1px -2px 8px rgba(0,0,0, 1.0);
-moz-box-shadow: 1px -2px 8px rgba(0,0,0, 1.0);
-webkit-box-shadow: 1px -2px 8px rgba(0,0,0, 1.0);
}
.GRenlarge li img:hover {
-moz-transform: scale(2.8);
-webkit-transform: scale(2.8);
-o-transform: scale(2.8);
opacity: 1.0;
background: #999;
border-color: #fff;
}
.GRenlarge li.anim1 img:hover {
-moz-transform: scale(2.8) rotate(720deg);
-webkit-transform: scale(2.8) rotate(720deg);
-o-transform: scale(2.8) rotate(720deg);
}
.GRenlarge li.anim2 img:hover {
-moz-transform: scale(2.8) rotate(0deg) translate(50px);
-webkit-transform: scale(2.8) rotate(0deg) translate(50px);
-o-transform: scale(2.8) rotate(0deg) translate(50px);
}
.GRenlarge li.anim3 img:hover {
-moz-transform: scale(2.5) rotate(30deg) translate(50px);
-webkit-transform: scale(2.5) rotate(30deg) translate(50px);
-o-transform: scale(2.5) rotate(30deg) translate(50px);
}


6. KLIK Simpan (SAVE) Template.

Untuk posting kode HTML caranya sangat sederhana sekali. Tuliskan seperti yang terlihat di bawah ini ketika posting kode HTML dilakukan.

<ul class="GRenlarge">
<li><img src="http://www.tipsexam.com/myimages/merdeka_greet3.gif" /></li>
</ul>

7. Tukarkan url imej (yg berwarna merah) dengan url anda.

8. Macam mana? Tahniah menjadi juga akhirnya