Hafiz Zulkafly: Ogos 2013

Tutorial : Live Preview Using Blogpost

Jumaat, Ogos 30, 2013

Assalamualaikum & Salam Sejahtera

Okay , dia tanya 4 hari yang lepas . Hari ni baru berkesempatan nak buat apa yang dia request , Minta maaf sangat sebab lambat . Okay hari ni nak share dengan korang macam mana nak buat live preview menggunakan satu blog , tapi boleh buat banyak banyak live preview menggunakan satu blog sahaja . Aku taktau macam mana nak explain . Nanti lepas buat , korang akan paham sendiri . Okay , tutor ni sangat sesuai digunakan bagi skinmaker . Lets begin ^^

1) Buat blog baru . Nama kan lah blog tu sebagai Live Preview or whatsoever yang korang nak . Kemudian Revert To Classic Template .

2) Copy and paste code dibawah dekat Template .

<html>
<head>
<style type="text/css">
#navbar-iframe {
display: none !important;
}
body{
background:white;
font:11px dotum;
color:black;
letter-spacing:1px;
}
</style>
<blogger>
<$BlogItemBody$>
</blogger>
</html>

3) Save. Kemudian pergi ke new post and follow gambar dibawah ;

4) Lepas publish . Kemudian pergi ke post and view post korang tu . Tengok ada error ke tidak . Kemudian copy link tersebut dan boleh letak sebagai live preview .

5) Kemudian , kalau ada lagi skin baru yang korang nak buat live preview , buat je new post and publish .

Sorry , tak pandai nak explain dalam bentuk tulisan . Harap korang faham sebab aku cuba buat ringkas seringkasnya . Mana mana yang korang tak paham , korang boleh tanya . Okay ^^

Tutorial : Music Player Mine Version #2

Khamis, Ogos 22, 2013

Assalamualaikum

Short update . Nah another tutorial related to music player for your blog . Compatible for all template . Nothing special . I just add up some hover . Feel free to use it . Mind to comment first before you take it . I suggest , to do not change any code other than the bold one for the best view result . Thank You .

Live Preview Here

The Code ;

<style>
.player {
position:fixed;
bottom:0px;
left:-190px;
background:black;
width:200px;
height:12px;
overflow:hidden !important;
padding:10px 10px 5px 10px;
border-radius:0px 100px 0px 0px;
color:white;
font:11px consolas;
text-transform:uppercase;
letter-spacing:1px;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-ms-transition-duration:1s;
-o-transition-duration:1s;
transition-duration:1s;
}
.player:hover {
left:0px;
}
</style>
<br />
<div class="player">
nuest - loving you more ;<embed align="" height="15" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://www.strangecube.com/audioplay/online/audioplay.swf?file=PASTEYOURMP3URLHERE&auto=yes&sendstop=yes&repeat=0&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/classic_small&bgcolor=0x000000&mode=playpause" style="margin: -14px 5px 0px 185px;" type="application/x-shockwave-flash" width="15" wmode="transparent"></embed>
</div>

Tutorial : Blockquote Hover 8

Ahad, Ogos 18, 2013

Assalamualaikum

Yoo . Hari ni apis nak share satu lagi tutorial blockquote . Simple sahaja . Apis pernah pakai before this kalau korang perasan lah . Kalau nak guna sila komen dahulu . Kredit terpulang . Jadi tak jadi pon sila komen juga ya ^^ TQ

LIVE PREVIEW HERE

Code ;

<style>
blockquote{
font:11px dotum;
letter-spacing:1px;
padding:10px;
color:white;
border:7px double #fff;
background:#eee;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
}
blockquote:hover{
background:#555;
}
</style>

p/s : Mana mana apis bold kan tu , boleh ubah mengikut cita rasa korang ^^

Tutorial : Navigation With Hover #8

Ahad, Ogos 04, 2013

Assalamualaikum & Salam Sejahtera

Yoo selamat petang . Hari ni nak share dengan korang satu lagi tutorial navigation yang baru sekejap tadi buat . Biasa biasa je navigation kali ni. tak gempak macam yang lain punya . Sebab aku ni memang tak creative . So tak pandai nak buat gempak gempak punya . HEHE . Meh intai dulu macam mana rupa navigation baru ni ;

LIVE PREVIEW

Haa . itu macam lah navigation baru yang aku buat . Berminat nak pakai ? Nah codenya ;

a) Template Designer > Layout > Add A Gadget > HTML / JavaScript
b) Classic Template > Template .

<style>
.alone a{
display:inline-block;
width:60px;
margin:2px;
text-align:center;
color:#fff;
font:9px consolas;
letter-spacing:1px;
text-transform:uppercase;
font-weight:bold;
padding:10px 5px 0px 5px;
height:0px;
overflow:hidden;
text-decoration:none;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.alone a:hover {
padding:1px 5px 10px 5px;
height:0px;
}
</style>
<center>
<div class="alone">
<a href="PASTE YOUR LINK HERE" style="background:#efa784;">About</a>
<a href="PASTE YOUR LINK HERE" style="background:#ef848c;">Tutorial</a>
<a href="PASTE YOUR LINK HERE" style="background:#ef84c8;">Affiliate</a>
<a href="PASTE YOUR LINK HERE" style="background:#cd84ef;">Facebook</a>
<a href="PASTE YOUR LINK HERE" style="background:#a17de2;">Twitter</a>
<a href="PASTE YOUR LINK HERE" style="background:#8784ef;">Blogskins</a>
<a href="PASTE YOUR LINK HERE" style="background:#84b9ef;">Tumblr</a>
<a href="http://www.blogger.com/follow-blog.g?blogID=$blogID$" target="_blank" rel="nofollow" style="background:#84efc0;">+Follow</a>
</div>
</center>

Mana mana yang patut atau korang rasa nak ubah , sila lah ubah ye . Btw kalau nak guna , wajib komen dahulu ye . Kemudian pada mana mana yang tak paham atau tutor ni tak menjadi sila inform. Okay ? Kbai o/

Wordless Saturday Lah Sangat . =='

Sabtu, Ogos 03, 2013

Assalamualaikum

From : Taja

From : Miss K

Sorry quality gambar tak lawa . camera phone memang suck sikit . hehe . Lama dah tak dapat kad raya . Pagi tadi baru sampai . Both kad raya from #WhoopersFamily . Thanks a lot sudi hantar . Minta maaf lah tak berbalas ye . Sebab taktau nak tulis apa , lagipun tulisan den buruk ==' HAHA . kbai o/

Tutorial : Mini Navigation

Jumaat, Ogos 02, 2013

Assalamualaikum & Salam Sejahtera

Hai korang . Hari ni nak bagi tutorial mini navigation yang mungkin sesuai untuk korang letak dekat sidebar korang (mungkin) sebab size navigation ni tak besar atau panjang mana . Dah nama pon mini kan . HAHA . Macam mana preview dia boleh tengok bawah ni ;

BETTER PREVIEW HERE

Okay macam tu ya mini navigationnya . Taktau lah sesuai tidak untuk letak dekat sidebar . Haha . ni codenya ;

1. Dashboard > Template > Edit HTML . Copy code bawah ni . Paste dekat BAWAH code <head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>

2. Save . Copy and Paste code dibawah ni dekat Layout > Add a Gadget > HTML / JavaScript (Bagi pengguna Template Designer) . Untuk Pengguna Classic Template boleh paste dekat Template > Edit HTML .

<style>
.mini a{
display:inline-block;
width:15px;
background:#fff;
text-align:center;
color:#fe9a9a;
font:15px arial;
padding:3px 5px 5px 5px;
margin:5px 1px 5px 1px;
border-radius:100px;
text-decoration:none;
border:4px double #fe9a9a;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.mini a:hover {
border:4px double #fff;
background:#fc5d70;
color:white;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
#s-m-t-tooltip {
background:#fdabab;
font:9px cambria;
letter-spacing:1px;
text-transform:uppercase;
font-weight:bold;
color: #fff;
border-radius:3px;
text-align: center;
padding: 5px 10px 5px 10px;
display: block;
margin: 20px 14px 7px 12px;
}
</style>
<div class="mini">
<center>
<a href="PASTE YOUR LINK HERE" title="About">★</a>
<a href="PASTE YOUR LINK HERE" title="Tutorial">★</a>
<a href="PASTE YOUR LINK HERE" title="Facebook">★</a>
<a href="PASTE YOUR LINK HERE" title="Twitter">★</a>
<a href="http://www.blogger.com/follow-blog.g?blogID=$blogID$" target="_blank" rel="nofollow" title="Follow">★</a>
</center>
</div>

3. Tukar mana yang patut . Kemudian save and preview .

Kalau ada apa apa error , sila lah bagitahu ye . Kalau tak paham apa apa pon , boleh tanya . Mana yang boleh tolong , aku akan tolong . Okay ? Kbai o/