TUTORIAL : Cantikkan comment box 2

Assalammualaikum and Hye Blogger's//

Hari ni, una nak buat tutorial untuk korang cantikkan kotak komen korang. cara-caranya ialah :

1.DASHBOARD > DESIGN > EDIT HTML > tekan ctrl + F dan cari code ini :

/* Comments

dah dapat cari kannn ? then nanti korang akan jumpa dengan anak-anakcoding dia kan ? delete je sume code yang ade kat bawah tuh then korunk ganty kan dengan coding baru yang una bagi ni :) okee ?

.h4 {
background:#fff;
text-align:center;
color:#fff;
text-shadow:2px 2px 3px #888;
font:30px ttn !important;
}
.comments {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #ffffff;
border:0px solid #E0ECF8;
padding: 10px;
}
.comment-content{
background:#FEF3F3;
padding:13px;
border-radius:10px;
color:#666;
border:3px dashed #FEE8E8;
}
.datetime{
background:#fff;
padding:5px;border:2px solid #FEE8E8;
float:right;
border-radius:10px;
font:10px arial;
margin-top:10px;
}
.secondary-text{
padding:5px;
background:#fff;
border-radius:5px;
float:-left;
border-bottom:2px solid #FEE8E8;
}
.avatar-image-container{
background:#FFE2E2;padding:6px;border-radius:50%;
}
.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;
}
.avatar-image-container img:hover{
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
}
.comments .comments-content .loadmore a {
border-top: 1px solid #FFF;
border-bottom:2px solid #FEC9C9;
}
.comments .comment-thread.inline-thread {
background-color: #FFF7F7;
}
.comments .continue {
border-top:2px solid #FEC9C9;
}
#comments {
height:300px;
overflow:auto;
}

Korang tweak code dia je ya untuk ubah background colour, or apa-apa pun. semoga membantu. kalau tak faham silakan bertanya una :D

---

Hai! Selamat membaca. Jangan lupa tinggal komen ya?

---

TUTORIAL : Horizontal Menu Bar

Assalammualaikum and Hye Blogger's//

Nampak x gambar di atas? Hari ni kita belajar tutorial nak buat horizontal menu bar/menu bar mendatar macam yang di atas ya. Jadi, jom mulakan :

• Pertama korunk kene Sign in Blog dulu lah kan ? then pergi ke DESIGN > ADD A GADGET > HTML/JavaScript 
• Then korunk copy & paste code dekat bawah ni okey?? 

<style>
.navi{
padding:5px;
display: inline-block;
font:11px verdana;
font-weight:bold;
text-align:center;
margin:2px;
color:white;
text-decoration:none;
letter-spacing:2px;
-webkit-transition-duration:0.5s;
}
.navi:hover{
background:#ffffba;
border-radius:5px;
text-decoration:none;
-webkit-transition-duration:0.5s;
color:black;
}
</style>
<center><div style="padding:3px;background:#fed5d5; width:980px;">
<a class="navi" href="URL LINK/">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
</div></center>

• OKAY! Dah selesai copy paste now save dan view blog korang. Kalau nak cantikkan navbar tuh korang ubah je mana yang una higlight kan tuh yer? :D semoga dapat membantu 

ungu : untuk bahagian backgroun navbar

hijau : untuk bahagian yang bila cursor sentuh link

kuning : bahagian lebar dan background luar navbar

NOTA BIT BOT :

Kena pandai mix and match tau! tq guys

---

Hai! Selamat membaca. Jangan lupa tinggal komen ya?

---

TUTORIAL : Cute icon sebelah tittle Blog Archieve

Assalammualaikum and Hello Blogger's//

Nampak tak cute icon sebelah tittle Blog Archieve tuh? so, ini dia tutorialnya. jom belajar!

1.First sila log in Blog anda

2.Pilih perkataan Template -> Edit HTML -> Click ctrl+F -> Search code di bawah ni ->

<li><a expr:href='data:i.url'><data:i.title/></a></li>

3.Jumpa? sekarang korang gantikan code di atas dengan code yang dibawah ni :

 <li><img src='URL CUTE ICON'/><a expr:href='data:i.url'><data:i.title/></a></li>

4.Code biru tuh korang boleh ganti dengan apa-apa sahaja url cute icon yang korang nak.
5.Preview untuk pastikan tiada error. kalau dah okey SAVE kan aje! huhu :D

---

Hai! Selamat membaca. Jangan lupa tinggal komen ya?

---

TUTORIAL : Tukar perkataan post a comment kepada gambar

Assalammualaikum and Hello Blogger's//

-->

Tutorial ini adalah untuk menukar perkataan post a comment kepada gambar. Rujuk Step di bawah :)

1. Log in Blog anda

2. Pilih perkataan Template -> Edit HTML -> Click ctrl+F -> Search code di bawah ni ->

 <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

 3. Dah jumpa? okey sekarang copy code di bawah ni dan pastekan di bawah code di atas :

<center><img src='URL IMAGE POST A COMMENT'/></center></a>

4. Yang biru tuh korang tukar url image yang korang nak. boleh ambil dari freebies INI.
5. Preview dulu untuk pastikan tak ada code yang error
6. Untuk lihat image tuh korang kene click entry and tengok lah muncul ke tak gambarnya. kalau ada bagus.     kalau tak ada tukar dulu setting komen korang mcm kat bawah nie :

---

Hai! Selamat membaca. Jangan lupa tinggal komen ya?

---

TUTORIAL: Cute Border Background Tepi Content Blog

Assalammualaikum and Hello Blogger's//

1.First sila log in Blog anda
2.Pilih perkataan Template -> Edit HTML -> Click ctrl+F -> Search code di bawah ni ->

#content-wrapper {

3.Dah jumpa? korang copy pula code di bawah ni dan letak di bawah code di atas

background: url(URL Border Background anda);

4.and sebelum tuh. adjust content wrapper korang,yang una highlight color biru tuh. Function dia adalah untuk biar background border tuh berada mengikut kesesuain width/lebar yang telah korang edit di mana-mana software.contoh macam code dibawah ini :

 #content-wrapper {
background: url(URL Border Bacground anda);
width: 1000px;margin: 0 auto;
padding: 0 0 25px;
text-align: left;
}

5. Korang boleh guna FREEBIES yang una dah bagi ni. harap berjaya. ^_^

---

Hai! Selamat membaca. Jangan lupa tinggal komen ya?

---

TUTORIAL : Navigation atas header macam Kemetot Chomel

Assalammualaikum bloggers sekalian.. okey tadi ada yang tanya una macam mana nak buat navigation macam una.. kita letak atas header.. actually bukan navigation je kita boleh letak dekat bahagian header tuh tapi code ni juga boleh guna untuk letak icon social network.. so lets start guys!

STEP 1 :

Log in ur Blogger Dashboard. Then sila cari 'Layout' then korunk click 'Add A Gadget' then sila search for the HTML/JavaScript. okey, dah selesai? now copy paste this code :

STEP 2 : 

<div class='clear'></div>
<div class='widget html' id='html1'>
<div class='widget-content'>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<div style='; position:absolute; top: 110px; left:350px;'>
<a href="URL LINK" target="_blank" >
<img src="URL GAMBAR"/></a>
</div></div></div>
<div class='clear'></div>

Nota Kecil :
Merah : yg ni kegunaan dia adalah untuk adjust posisi navigation korunk tuh samaada nak ke atas skit atau ke bawah sikit. kalau korunk increase px dia so dia akan semakin kebawah dan kebawah.. tau? kalau xfhm try dulu then review tgok apa beza kalau korunk adjust in different px. okay?
Oren : yang nie pun sama sama ada nak ke kiri sikit atau ke kanan sikit
Kuning : ini lah ruang untuk korunk letak link korunk contoh : aqupunyekesahbukankau.blogspot.com
Hijau : yang ni pulak url gambar yg korunk nak masukkan tuh. create lah dlu dkt phtoscape ke photoshop ke.

---

Hai! Selamat membaca. Jangan lupa tinggal komen ya?

---

TUTORIAL : link RAINBOW !

okehh , now una nak buat tuto LINK RAINBOW pulakk ! huhu :) nak takk ?? biler cursor sentuh je link , link akan jadi colourfull mcm rainboww !~ ngeee :D okeeehh nowww we start okehhh ??

• first thing korunk kene buat ialah SIGN IN BLOGGER > DESIGN > HTML/JavaScript 
• then copy lah CODE di bawah nie :) dan lihat hasilnyaaa :)

<script src="http://fwzynn.googlepages.com/rainbow.user.js" type="text/javascript">
/***********************************************
* Script edited by Ynn Ainul at http://fwzynn.blogspot.com/
* Please keep this notice intact
***********************************************/
</script>

SELAMAR MENCUBA :) KALAU JADY COMMENT OKEHH ? DAN KALAUTAK JADY TANYA UNA TAUUU :) 

---

Hai! Selamat membaca. Jangan lupa tinggal komen ya?

---

TUTORIAL : Follow and Dashboard button Like TUMBLR !

assalammualaikum semuanya :) okeh nie first tutorial yang akan una buat untuk kalian semua ^^ so hary nie una sangat rajin mahu buat tuto nie buat kalian :) jady mari kite ikut step nyer kayhh ? mulekan dengan bismisllah tauu ?? huhhu :) okeh  , lets we startt !

• first korunk kene Sign in Blog dulu lah kan ? then pergy ke DESIGN > ADD A GADGET > HTML/JavaScript 
• Then korunk copy & paste code dekat bawah nie okehh ?? 

<div style="display:scroll; position:fixed; top:5px; right:95px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" /></a> <div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?6" /></a></div></div>

• dah sudah copy ? now , korunk tukar ID code yang telah di BOLD kan tuhh tauu ?? jangan lupe pulakk ?? nty tak jadi :) 
• lastly , korunk tekan button SAVE dan view lah blog korunkk :) hahhh , menarik takkk ?? 

TAK PAHAM TANYA LAH OKE ?? UNA AKAN BANTU PUNYE :) JANGAN RISAU :D

---

Hai! Selamat membaca. Jangan lupa tinggal komen ya?

---