Assalamualaikum dan hai.
Korang tau tak malam ni ade lawan bola (JDT dgn Pahang)? Kalau tau baguslahh, sebab saya sokong JDT (y) Back to the topic, hari nie saya nak wat tutorial live preview kt blog lain. Faham takk?? Kalau tak paham refer kat >sini< . Kan ade tulis "live preview here", bile korang click and taa'dah ! Jadi camni~ Btw tuto nie direquest oleh na nyna :)
Sengaja letak copyright -_- haha nampak tak permainan dia? :P Okay let's start !
2. Pergi click Template dan cari perkataan "Revert to classic templates"
3. Dah jumpa? Click "Revert to classic template". And jadilah macam ni
4. Padam semua kod dkt Edit template tu. Saya ulang, PADAM !
5. Gantikan dengan kod di bawah
<html>
<head>
<base target='_blank'/><link href='http://media.tumblr.com/tumblr_lthc4oPwfL1qhwcy0.gif' rel='icon' type='image/x-icon'/>
<title>preview</title>
<style type="text/css">
#navbar-iframe {
display: none !important;
}
body {
font-family: times new roman;
color: #000;
font-size: 11px;
letter-spacing: 1px;
background: #fff;
}
a:link,a:visited{
color:#999;
text-decoration:none;
-webkit-transition: .4s;
}
a:hover{
color: #000;
background: yellow;
-webkit-transition: .4s;
text-decoration:none;
}
.page {
background:#ffffff;
color:#848484;
padding:8px;
width:600px;
font-size:11px;
border-radius:10px;
text-align:left;
}
.title {
color:#7d95a8;
font-size:15px;
padding:3px;
border-bottom:1px solid #eee;
}
.comment {
font-style:italic;
font-size:10px;
margin-bottom:2em;
}
</style>
</head>
<body>
<center><div class="page">
<blogger>
<$blogitembody$></blogger><br>
</div></center>
</html>
6. Pastekan kod tu kat edit template. And then save !
Sekarang ni nak buat post kat blog preview pulak. (dekat blog baru untuk dijadikan preview)
1. Dashboard > New post
2. Copy kod di bawah
3. Okay. kat mana nak paste kod tu? Masa korang tulis entri tu, nampak tak benda ni?
Sekarang ni nak buat post kat blog preview pulak. (dekat blog baru untuk dijadikan preview)
1. Dashboard > New post
2. Copy kod di bawah
<style>
img{
-webkit-filter: grayscale(0%);
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(0%);
-moz-transition: .5s ease-in-out;
-o-filter: grayscale(0%);
-o-transition: .5s ease-in-out;
}
img:hover{
-webkit-filter: grayscale(100%);
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(100%);
-moz-transition: .5s ease-in-out-o-filter: grayscale(100%);
-o-transition: .5s ease-in-out;}
</style>
<br />
<center>
<div class="img">
<img src="http://data.whicdn.com/images/63156440/large.jpg" width="400" /></div>
</center>
3. Okay. kat mana nak paste kod tu? Masa korang tulis entri tu, nampak tak benda ni?
Nampak kann? Click benda tu.
4. Lepas dah klik, paste kan kod tadi dekat bahagian paling bawah sekali dekat Edit HTML tu. Then, korang klik Compose balik. Tadaaa. Dah ada kann?
5. Kalau dah siap, save ! :D Jadilah macam ni~ ^_^
*hover the picture*
P/S : Selain daripada kod image hover, korang boleh letak ape2 kod macam (affies, scrollbar etc) ^^ cuma korang kene ubah kod macam gambar di bawah.
Hope korang paham dgn tutorial nie. Kalau tak paham tanye tauu :)
2 ulasan:
thanks for this tuto :)
tp sy xphm yg last sekali tu.
nak ubah mcm mana ye?
wc :) oh yang ubah kod tu.. awak ubah ikut saya yg wat kotak warne hitam.. yg kod yg sy bagi tu kod image hover. awk leh ubah kod macamni :
a.special {
opacity: .8;
background: url(URL BACKGROUND KORANG);
display: block;
color: #f42c2c;
border: 1px solid #f42c2c;
text-align: left;
padding: 3px;
}
a.special:hover {
opacity: 1.0;
color: #ddd;
text-indent: 200px;
}
hehe. sorry klau x paham :)
Catat Ulasan