Tutorial bumbung blog

Assalammualaikum. Eyra ada request dari seseorang. jom tengok mcam mana tuto ni.

Sila klik imej untuk zoom lagi dengan lebih dekat lagi.

  

  

 

Ok kalau dah siap uploadkan ke mana-mana photo hosting. Copy and paste je code dibawah untuk body css.

background: #fff url(‘IMG URL ANDA’) top repeat-x;background-attachment: fixed; 

korang pastekan dekat atas </style>. seach code tu dekat Edit template.

Selamat mencuba ye sweeties! Kalau menjadi/tak menjadi sila bagitahu dalam komen ni ye.

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Background change when cursor click

Assalammualaikum. Eyra minta maaf kalau lambat buat tuto ni. k, jom tengok bawah. tutonya macam bawah ni:)

ok. dah tahu ? mari mulakan.


Classic Template
1) dashboard > template > edit html
2) cari code ini

</style>

3) copy code bawah ni diatas code </style>

#bagie a img{
width:50px;
height:50px;
display:inline;
margin-right:10px;
margin-top:15px;
border: 2px solid #EEE;
}
#bagie a:hover img{
border: 2px solid #bdebff;
}

4) okeh , korang boleh pastekan code ni di mana2 sahaja yang korang nak asalkan dia berada di bawah </style>

<div id="bagie">
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
            $("#bgcolor1").click(function(){
                        $("body").css({"background":"url(URL GAMBAR 1)"});
            });
});
$(document).ready(function(){
            $("#bgcolor2").click(function(){
                        $("body").css({"background":"url(URL GAMBAR 2)"});
            });
});
$(document).ready(function(){
            $("#bgcolor3").click(function(){
                        $("body").css({"background":"url(URL GAMBAR 3)"});
            });
});
</script>
<center><a href="javascript:void(O)" id='bgcolor1' title="AYAT ANDA"><img src="URL GAMBAR 1" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="AYAT ANDA "><img src="URL GAMBAR 2" /></a>
<a href="javascript:void(O)" id='bgcolor3' title=" AYAT ANDA"><img src=" URL GAMBAR 3" /></a></center></div>
</div>

5) preview and save !

Template designer
1) dashboard > layout > add a gadget > html/javascript
2) copy dan pastekan code bawah ni

<style type="text/css">
#bagie a img{
width:50px;
height:50px;
display:inline;
margin-right:10px;
margin-top:15px;
border: 2px solid #EEE;
}
#bagie a:hover img{
border: 2px solid #bdebff;
}
</style>
<script type="text/javascript">
<div id="bagie">
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
            $("#bgcolor1").click(function(){
                        $("body").css({"background":"url(URL GAMBAR 1)"});
            });
});
$(document).ready(function(){
            $("#bgcolor2").click(function(){
                        $("body").css({"background":"url(URL GAMBAR 2)"});
            });
});
$(document).ready(function(){
            $("#bgcolor3").click(function(){
                        $("body").css({"background":"url(URL GAMBAR 3)"});
            });
});
</script>
<center><a href="javascript:void(O)" id='bgcolor1' title="AYAT ANDA"><img src="URL GAMBAR 1" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="AYAT ANDA "><img src="URL GAMBAR 2" /></a>
<a href="javascript:void(O)" id='bgcolor3' title=" AYAT ANDA"><img src=" URL GAMBAR 3" /></a></center></div>
</div>

3) preview and save !

note !
color : tukar dengan background anda pastika hanya 3 jenis background saja.

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Tutorial Jangan Tekan!

Assalammualaikum. Tutorial ni lebih kurang macam bawah ni. so faham-fahamkanlah :D

k. kalau tak faham tengok kat sidebar :D

1. Dashboard > Design > Add A Gadget > HTML/Javascript
2. Copy code di bawah dan pastekan dekat kotak HTML.

<center>
<input onclick="
window.open('URL churp or else');
window.open('URL churp or else');
window.open('URL churp or else');
window.open('URL churp or else');
" type="button" value="No click!" /></center>

K. nak request tuto? maybe Eyra buat lambat sikit sebab UPSR :')

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Tutorial : Close Tab Text

Assalammualaikum, Ramai yang tanya macam mana Eyra buat macam tu.. Maksudnya, kalau korang tekan perkataan tu, nanti automatik blog atau tab tu tertutup. Paham? Okeyp. Caranya mudah jewp.

Update blogger Interface
Pergi Dashboard > Layout > Add A Gadget > HTML/JavaScript

Old Blogger Interface
Pergi Dashboard > Design > Add A Gadget > HTML/JavaScript

Ataupun, apa-apa sahajalah. Kalau classic template/blogskin, memandailah cari tempat nak paste kod ni

Pastu, copy kod ni. Pastekan kat ruangan yang dikehendaki ye :

<center>Tak Suka boleh tekan <a href="javascript:window.close();">SINI</a></center>

Save.

Kata Kunci
Biru : Ayat sebelum nak close text. Boleh tambah/tukar/ganti sendiri oke.
Merah : Ayat close text. Boleh ubah kepada yang anda suka.
Hijau : Kalau tak nak ayat ni center/tengah boleh buang je kod tu. Kalau nak center, biarkan je

Credit : Kihah

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Letak Smiley at cbox!

Assalamualikum semua bloggers . Okey ada yang tanya Eyra , macam mana ek kita nak masukkan smiley yang comel molek kat cbox ? Okey tanpa membuang masa lagi jom kita masukkan !

1. Go to WEBSITE to log in okey ? Tak tahu nak sign in ? click THIS .

2. Pergi di OPTIONS > SMILIES

Keluar macam ni kan ? Now, korang click X semua. Ye, SEMUA.

Now, korang just masukkan URL Smiley korang tu. Boleh ambil di FREEBIES Eyra . Kat CODE dan ALT. CODE korang boleh buat sesuka hati.

Hasilnya, jadi comel macam ni, hehe. Oh ye, jangan lupa CLICK SAVE CHANGES pulak :)

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Era FM di blog

Okay today tutorial nak teach macam mana nak letak Era FM dekat blog so nanti bila orang kunjung blog you boleh dengar radio free right ? So let start this tutorial . First want to say this tutorial not belong to mine I curi dekat Lyssa blog ( Sorry lyssa curi tutorial ni hop you don't mind ) Tak salah right share share ilmu ni. Janji I bukan copy and I ada tulis credit by you haha :)

So let start it

1step Dashboard -Design - Add Gadget - HTML/JavaScript . Than copy paste below here and paste it in HTML/JavaScript

<div></div><div><object type="application/x-shockwave-flash" data="http://ads.era.fm/inc/app/shared/dvrplayer/capsules/radioactive/amp_flash/era/era.swf" width="200" height="170"><!--<![endif]--><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="swfversion" value="9.0.45.0" /><param name="expressinstall" value="Scripts/expressInstall.swf" /></object></div>

So enjoy lah , this Era FM more suitable for malay blogger. Cause ada lagu melayu juga yang awesome-awesome begitu. So enjoy it okay ? Have fun Kbaiiii :)

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Letak Button follow twitter

Assalammualaikum. nak buat? ikut step di bawah.

1. Pergi link  https://twitter.com/about/resources/buttons#follow
2. Tukar username twitter korang di Button Options
3. Then copy di Preview
4. Pastekan dekat mana korang nak letak
5. pastu save.

Jadi? tepuk tangan. 

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Exchange Link berkotak-kotak macam Eyra

Assalammualaikum. Eyra nak buat tuto. lebih kurang tuto dia macam bawah ni.

Nak? jom mulakan.

1. Dashboard > Design > Edit HTML
2. Tick expand widget
3. CTRL+F cari code di bawah. 

/* Header

Dah jumpa? copy code di bawah dan pastekan atas code  /* Header

a.link{
background:#FFDEBB;
padding:5px;
width:40px;
color:#000;
padding:5px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
font-family:  ronda ;
font-size: 6px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
display:inline-block;
margin:2px;
}
a.link:hover{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
color:#fff;
background:#FFECD2;
}

 Dah? sekarang.

1. Dashboard > New post > Edit Pages
2. sekarang tekan edit HTML dan pastekan code di bawah dalam kotak tu 

<a class="link" href="http://blogger.blogspot.com/">Friends</a><a class="link" href="http://blogger.blogspot.com/">Friends</a><a class="link" href="http://blogger.blogspot.com/">Friends</a><a class="link" href="http://blogger.blogspot.com/">Friends</a><a class="link" href="http://blogger.blogspot.com/">Friends</a><a class="link" href="http://blogger.blogspot.com/">Friends</a><a class="link" href="http://blogger.blogspot.com/">Friends</a><a class="link" href="http://blogger.blogspot.com/">Friends</a><a class="link" href="http://blogger.blogspot.com/">Friends</a><br><center>Wanna link exchange with me? tell me at chatbox :)</center></div><br>

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Tutorial : Tukar Sidebar Title kepada Image

Assalammualaikum . Ada org request tuto ni, so Eyra buatla, contoh macam ni tuto ni

 

Dah tahu macam mana? k, mari mulakan.

1. Dashboard > Design > Edit HTML.
2. CTRL+F untuk search Code di bwah.
3. Dah jumpa? Good. Now, korang cari width sidebar blog korang. 
4.  Bila dah tahu width sidebar berapa, korang boleh create image dekat photoshop, photoscape or dkt mana-2 je.
5.  Okay. Dah selesai. Skrg korg cari title sidebar.
6.  Kalau dah jumpa, cuba tengok anak-anak code dekat bawah tu, dan cari code macam ni

<h2 class='title'><data:title/></h2>

7. Ada kan? oke. Lepas tu korang gantikan code tadi dengan code yang ini

<center><img src='URL IMAGE' style='border-width: 0px;'/></center>

 8. Kalau tak faham. bole tengok contoh dekat bawah ni

9. If korg nk tambah image dekat bahagian title yang lain, just ulang je step yg sama.
10. Preview & save


merah : URL image
Eyra ada sediakan beberapa sidebar image. Kalau nak boleh guna. Tapi saiz tu Eyra main buat je..hee 

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Image Hover Text Part II

Assalammualaikum. Eyra nak ajar korang cara-2 image hover text. bila cursor pergi kat dia , dia ada tulis. lebih kurang macam bawah ni

1. Dashboard > Design > Edit HTML 
2. Tick Expand Widget
3. CTRL+F cari code di bawah.

/* Header

Dah jumpa? copy code di bawah dan pastekan dekat atas code yang korang cari tadi.

 #adilla{
background:#f0eeeb;
color:#000;
width:230px;
height:142px;
margin-top:-147px;
padding-left:0.5px;
padding-right:0.5px;
padding-bottom:0.5px;
padding-top:5px;
opacity:.1;
-webkit-transition:all .5s ease-in-out; }
#ck:hover{opacity:.7}

Then preview dulu baru save. eh kalau preview memang takdak lagi. sekarang kita ikut step yang seterusnya.

1.  Dashboard > Design > Add Gadget > HTML/Javascript
2. Copy code di bawah dan pastekan dalam kotak HTML 

<center><img height="142" src="URLIMG" width="230" /><br>
<div id="adilla"><br>
AYATKORANG</div><br>

NOTES
PINK : Background hover.
RED : Tinggi & Lebar hover.
PURPLE : URL image yang korang nak, tak tau nak cari ? Cari SINI
BLUE :  Ayat korang k. contoh, nama, umur dan....

Comment kalau menjadi. :D

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

sidebar to the left and main to the right

Nak ubah penampilan blog korang ? hehe saya boleh tolong 
superpower ingin membantu !!!
Eyra dah mula merepek -,-


1 . design - editHTML *jangan lupa Tick expand widget 
2 . search code ni .

#main-wrapper {

*dekat bawah tu , korang ade nampak tak code cam ni :- float: $startSide;
kalau ada , korang gantikan code tuh dengan cod ni

float: right;

eh ! tak siap lagi !! jgn save dulu . step seterusnya ,
cari cod ni , untuk permudahkan tekan ctrl+f serentak .

#sidebar-wrapper {

dah jumpe kan ? kat bawah tu ade kod ni :- float: $startSide;
korang gantikan dengan :

  float: left;

oke sekarang baru dah siap .sebelum tu preview dulu kalau jadi save .

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Hover Image Got Something Behind Image (PART1)

Assalammualaikum. tuto ni awesome. meh tengok sini.

Sebelum cursor sentuh

Selepas Cursor menyentuh.

PREVIEW 

Dah tengok? comel je kan? mari mulakan.

1. Dashboard > Design > Add Gadget > HTML/Javascript
2. Copy code di bawah dan pastekan dekat dalam kotak HTML

<style type="text/css"> #side{margin-right:-1px;width:250px;height:150px;overflow:hidden;}
#text{text-align:center;width:250px;height:200px;padding:5px;overflow:auto;color:#363636;background-color:#fff;}

#picture{margin-left:-280px;width:280px;height:220px;overflow:hidden;-webkit-transition: opacity 0.9s linear;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out;}
#side:hover #picture{margin-left:-550px;}
</style>
<table id="side" border="0" cellpadding="0" cellspacing="0" ><tr><td><div id="text">You can put anything at here.</div></td><td><div id="picture"><img src="http://data.whicdn.com/images/28636418/542389_281293305279077_141469352594807_630859_241460565_n_large.jpg"></div></td></tr></table>

NOTES:
MERAH : Ayat korang nak letak dekat dalam tu sebelum Hover.
BIRU : image yang nak diletakkan.

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Cursor Hover

Assalammualaikum. Tuto ni best. cursor hover nie macam ni, bila cursor terkena link, dia jadi strike. k, macam di bawah..

Jadi strike kan? nak? mari mulakan.

1. Log in > Dashboard > Design > Edit HTML 
2. Tekan CTRL+F dan cari code di bawah.

a:hover {

Dah jumpa?  copy code di bawah dan pastekan di bawah code tadi.

color:#D0A9F5;text-decoration:line-through;}

Notes:
Merah : letakkan code warna yang korang nak. Cari SINI

Kepada yang tak jumpa code  a:hover { boleh la guna tuto INI untuk pasang code tu, harap dapat membantu.

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Pasang Code a:hover {

Assalammualaikum. Ni tuto untuk pasang code a:hover { . heee. jom mulakan

1. Dashboard > Design > Edit HTML 
2. CTRL+F dan search code di bawah.

/* Header

Dah jumpa? sekarang copy code di bawah dan pastekan kat atas code /* Header

a:hover {

Preview dulu, takut ada error pulak. pastu save. nanti senang la nak cari code.

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Letak Button Reply

Assalammualaikum. Eyra nak buat tuto ni. harap korang faham. button reply ni macam kat bawah.

A'ah. yang dikotakan warna merah tu. tulah Reply button. k meh kita mulakan.

1. Log in > Dashboard > Design > Edit HTML > *Tick Expand Widget
2. Tekan CTRL+F dan search kod di bawah

<b:include data='comment' name='commentDeleteIcon'/>

     3. Dah jumpa? then korang copy code di bawah dan pastekan kat bawah code yang korang cari tadi.

 <span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=BLOG ID KORANG&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[REPLY SINI COMEL!]</a></span> 

NOTES :
MERAH : Blog ID korang. tak tahu? Tekan SINI
BLUE : Tukarkan kepada ayat korang.

Preview dulu, takdak error save k. Comment k, kalau menjadi.

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Cute Menu tab

Assalammualaikum guysss xD hari ini hari kedua Percubaan UPSR. kay Eyra dah dapat 2A. Menu tab ni comel. jom usha bawah niiii.

1) Dashboard >> Design >> Add a Gadget >> HTML/JavaScript

2) Copy the code below here and paste it in the content:

<span class="Apple-style-span" style="font-family: verdana, arial; font-size: medium; "><span id="nav" style="font-size: 13px; font-family: serif; background-color: #B8D3FF;
padding: 2px;
border-radius:5px;
border: #69A2FF 1px solid;
-webkit-transition:1s;"><a href="LINK" style="color:#69A2FF; text-decoration: none; -webkit-transition-duration: 0.5s; ">TITLE</a></span>
<span id="nav" style="font-size: 13px; font-family: serif; background-color: #B8D3FF;
color:#69A2FF;
padding: 2px;
border-radius:5px;
border: #69A2FF 1px solid;
-webkit-transition:1s;"><a href="LINK" style="color:#69A2FF; text-decoration: none; -webkit-transition-duration: 0.5s; ">TITLE</a></span>
<span id="nav" style="font-size: 13px; font-family: serif; background-color: #B8D3FF;
color:#69A2FF;
padding: 2px;
border-radius:5px;
border: #69A2FF 1px solid;
-webkit-transition:1s;"><a href="LINK" style="color:#69A2FF; text-decoration: none; -webkit-transition-duration: 0.5s; ">TITLE</a></span></span> 

Notes:-

Red - Link of the page that you want
Blue - Title of your navigation.
Pink - Background colour
Green - Border colour
Yellow - Title colour

3) Colour code here.

4) Save and Done.

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Kawai post tittle

Assalammualaikum, Tuto ni khas untuk pengguna washed denim. Eyra ada request dari sorang ni, dia tanya macam mana nak buat post tittle nampak kawai, and cantik. kay , macam bawah.

Cantik kan. mari kita mulakan.

1. Dashboard > design > Edit HTML 
2. jangan lupa Tick Expand Widget.
3. CTRL+F/ F3 untuk cari code di bawah.

.post blockquote {

Dah jumpa, lepastu lebih kurang bawah  .post blockquote { ada code lain kan? gantikan code tu dengan code di bawah.

.post blockquote {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgownBLXP47Ni6WiKBpf9S1qoo-BEL8KWaZCpEYECSS31YGMFk2DlgDlhSEwCSLKLOnbRNsn9RXyArr0V4LMGwmt6IHXFv85CPSSzltAlhMClUMJsPxt6I8T6Kg5WKimApPfy28fHCKydk/s1600/linepattern.png);
border: 1px solid #FFC2D5;
color:#2E2E2E;
border-radius: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
margin:1em 40px;
-webkit-transition: 0.5s;
}
.post blockquote p {
border: 1px solid #8ABEEE;
-webkit-transition: 0.5s;
}
i {

last sekali preview dulu baru save.
Kalau menjadi tepuk tangan, kalau tak menjadi sila comment , maybe code dia ada yang salah.

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Freebies : Kawai clock

Assalammualaikum, eh, tengok sidebar Eyra ada clock kawai kan? nak jugak. Ok. senang je nak ambil . Ini code Eyra sendiri , jangan RE-TUTORIAL.

1. Mula-mula pergi ke Sini
2. Then cari la code yang korang nak tu. 
3. Then Copy code bawah ni

<center>CODE CLOCK</center><br/>

Merah tu korang letak code yang korang pilih tadi. Sila tanya kalau tak faham.

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Cute tab menu part II

Assalammualaikum

tutorial ni dah lama orang suruh saya buatkan . tapi disebabkan minggu ni busy sikit , saya buat lambat sikit . hihi . lagipon dah ramai tanya .

1. Dashboard > Design > Page Element > Add Gadget > HTML/JAVASCRIPT

2. copy code bawah ni dan paste dalam kotak html/javascript okay .

<br/><span style="background-color: #ced8f6; border-radius: 5px 5px 5px 5px; padding: 3px 10px;"><a href="URL SITE">About Me</a></span><span style="background-color: #ced8f6; border-radius: 5px 5px 5px 5px; padding: 3px 6px;"><a href="URL SITE">Tutorial</a></span><span style="background-color: #ced8f6; border-radius: 5px 5px 5px 5px; padding: 3px 6px;"><a href="URL SITE">Tumblr</a></span><br /><br /><span style="background-color: #ced8f6; border-radius: 5px 5px 5px 5px; padding: 3px 5px;"><a href="URL SITE">Twitter</a></span>
<span style="background-color: #ced8f6; border-radius: 5px 5px 5px 5px; padding: 3px 5px;"><a href="URL SITE">Youtube</a></span>
<span style="background-color: #ced8f6; border-radius: 5px 5px 5px 5px; padding: 3px 5px;"><a href="URL SITE">Formspring</a></span>

note

merah - url site korang

biru - warna background 

p/s : kalau korang ikot sebijik , mungkin akan sama macam yang saya punya . tu pon kalau lebar size sidebar sama . 

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---

Tutorial : Marquee for contest/ churp-churp

Assalammualaikum, Eyra ada request dari FB , tengok bawah ni.

K. mari mulakan.

1. Dashboard > Design > Add A Gadget
2. pastekan kod di bawah ke dalam kotak tu. 

<center>Ayat korang </center><br/>
<marquee scrolldelay="0" behavior="scroll" diretion="left" onmouseover="this.stop();" onmouseout="this.start();">
<a href=" URL churp-churp/GA " target="_blank"><img src="URL Image" width="100" height="100" /></a>
<a href=" URL churp-churp/GA " target="_blank"><img src=" URL Image " width="100" height="100" /></a>
<a href=" URL churp-churp/GA " target="_blank"><img src=" URL Image " width="100" height="100" /></a>
<a href="URL churp-churp/GA" target="_blank"><img src=" URL Image " width="100" height="100" /></a>
</marquee>

Oren : Ayat korang k.
Hijau : Tukar ikut suka korang (left , right , top , bottom)
Merah : URL churp atau GA
Biru : URL image churp/ GA

Kalau menjadi comment sini, takfaham? sila comment.

---

Terima kasih baca entry ni. Jangan lupa datang lagi ke sini!

---