Yaniemirawk Tutorial Blog

Tutorial : Cute Update Box on Sidebar

Hai, today ada barang baru. Haha.
K just simple. Cute Update Box on Sidebar
Cer-usya bawah.

Cute tak? Haha bukan mata aku tuh leww.
Yang box apple tu. Kalau ditengokkan, yang words 1 Cute Monster ♥ tu senanya aku punya online user(s) yang tengah view blog. Wakaka. tak hawt pun macem awak,a wak dan awak. Kalau sekali sergah blog, mahu sampai puluhan kaan. Hehe ;B
Bawah dia tu ada Updates Box. Sampai banyak benda sekali aku campakkan dalam tu kan? haha, hebat tak hebat tak? Lawa tak?
K dah jum kita cuba buat.

1. Design -> Add a Gadget -> HTML/JavaScript

2. Paste code nie.

<center><div style="width:139px; height:180px; background-image: url(http://i577.photobucket.com/albums/ss216/yanie_amoy/apple_textbox.png);">
<center>
<div style="width:135px; height:70px;"></div>

<div style="width:129px; height:87px; overflow: auto;">
<span >

<center><script language="JavaScript" src="http://freehostedscripts.net/ocounter.php?site=ID19705&e1=Cute%20Monster%20%E2%99%A5&e2=Cute%20Monster%20%E2%99%A5"></script>

<center><span style="color: rgb(0, 0, 0);">-</span></center>

<center style="text-align: right;"><span class="Apple-style-span" style=" ;" >Updates.</span></center><div style="Background-image:url(YOUR LINK); repeat; padding: 3px; border:1px solid;"><center><marquee>YOUR WORDS</marquee></center></div>

</center></span>
</div>
</center>
</div>

Yang berwarna GRAY tu tukarkan ID Pelawat di blog korang.
Pastikan ada account tu dahulu di freehostedscripts.net .

Yang berwarna MERAH itu anda boleh tukar/adjust:
Cute Monster - Untuk pengetahuan berapa orang tengah stalk/view on your blog.
Updates - Title kat kotak update tu.
YOUR LINK - Image gambar (copy the link) untuk background kotak Updates tu.
YOUR WORDS - Tulis ah pape korang nak dalam tu k.

All that for today. I'm done. Have fun and enjoy your day! :D

Click on LIKE button or leave your comment. TQ

Tutorial - Link Hover

Someone request again - Link Hover. Haha. It's quite funny.
But I'll make it. In different ways ;P

Simple Link Over like before :

1. Dashboard -> Design -> Edit HTML

2. Ctrl+F and search code: a:hover {

3. Paste this code kat bawah/selepas numb 2 tadi:

color:#000000; background:url (URL HOVER);
background-repeat:repeat;
text-decoration:none
}

Yang berwarna merah tu paste dengan code image yang korang minat. Jum kita buat ;D

Black black

http://i293.photobucket.com/albums/mm62/happyy-stop/black-hover.gif

Pink pink

http://i293.photobucket.com/albums/mm62/happyy-stop/pinkhover-happyy-stop.gif

Blue blue

http://i293.photobucket.com/albums/mm62/happyy-stop/bluehover-happyy-stop.gif

Purple purple

http://i293.photobucket.com/albums/mm62/happyy-stop/purplehover-happyy-stop.gif

Rainbow rainbow

http://i293.photobucket.com/albums/mm62/happyy-stop/rainbowhover-happyy-stop.gif

Orange orange

http://i293.photobucket.com/albums/mm62/happyy-stop/orangehover-happyy-stop.gif

Green limegreen

http://i293.photobucket.com/albums/mm62/happyy-stop/greenhover-happyy-stop.gif

Oh yah one, ada lagi satu. Kalau korang tak suka dengan colour-2 bagai, korang boleh try yang nie. Maybe chun kan ;P Same je jugak dengan cara yang tadi. Paste lepas a:hover {.

background: #000000;
border-radius:8px;
padding: 2px;
text-decoration:none;
color: #ffffff;
text-decoration:none;
-moz-transition: 1s;
-webkit-transition: 1s;
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
cursor: url(http://www.drikoti.net/Goodies/Cursor/News/Gifs/02.gif), auto;
}

Alalala, yang nie omeyy sikit. Sebab nanti dia jatuh senget sikit. Heh.
Yang kaler oren tu boleh adjust. Preview and Save. Done! :D

Click on LIKE button or leave your comment. TQ

Tutorial : Welcome Note 'click enter'

Hai and Assalamualaikum. It's been a long time tak hapedet blog nie. Haha
Okayy here got some tutorial I wanna share with you guys.
Maybe ramai yang dah buat, ada yang suka, and some of them not.

1. Dashboard > Design > Edit html > tick Expand Widget Templates

2. cari code ni : ]]></b:skin>

3. copy code bawah ni past di atas / sebelum :

/* to top */
#toTop { width:100px;background:none;border:0px solid #ccc;text-
align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-
decoration:none; }
</style></head>
<script language="javascript" type="text/javascript">
/* toggle() checks to see if the images has already been faded
or not and sends the appropriate variables to opacity(); */
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}
/* changeOpacity() uses three different opacity settings to
achieve a cross-browser opacity changing function. This
function can also be used to directly change the opacity
of an element. */
function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}
/* fade() will fade the image in or out based on the starting
and ending opacity settings. The speed of the fade is
determined by the variable milli (total time of the fade
in milliseconds)*/
function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';
document.getElementById('june').style.display=''">
<img src="LINK IMAGE"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/>
</div>
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">
<body>

Kat "LINK IMAGE" yang berkaler merah tu.
Tukarkan dengan code pada gambar-2 yang berminat. ( height : 500 width : 760 )

http://i580.photobucket.com/albums/ss248/pija280195/freebieswelcomenotepurple.png

http://i580.photobucket.com/albums/ss248/pija280195/freebieswelcomenoteblue.png

http://i580.photobucket.com/albums/ss248/pija280195/freebieswelcomenotepink.png

credit: n u r h a f i z a h p i j a . b l o g s p o t . c o m

http://i1221.photobucket.com/albums/dd465/nurathirahcopyright/Freebies1.png

http://i1221.photobucket.com/albums/dd465/nurathirahcopyright/Freebies2.png

credit: p u s h e e n l o v e r . b l o g s p o t . c o m

Here got some more!

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOrnHymuzPcTJ_KBBOrKlOEf8_BRxLutFsi_aijsa6hUMt7WUz4g9oCC0gXWe_QhvV9As60XGQt0XGZr6vPGtdPA9G33o0wAjFtu1GnY5ry80XYMH6hCL4wxmv3yT6McLKWk0VaTf6G3DL/s1600/Welcome+Note+2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcgNp4jftic0NVo-DrbP9QHiS5Ag0mDpZnwXRhSwT-57F9RhBy1FpyKlYm-Ybb_D2uOC0LIoPu_bxPdhEQY6OOyxwGU-kBV8toLeSUbXNRITP03qfOm390cz-YrhwstA11LdfWq-0218rN/s1600/Welcome+Note+3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnmoVJp8tKcMlVz9C0gnVNFRMIP0kmmnR2E0SY8LMXxjOvhnPXz19pRHkXBY7hQsfNbiEUyFjQ0oz0g6DtacKBSnDGwAg8lvg6F-zlVp1jZZO3OvMQITBkOJpVov5BYwImB_Ijk5QdXr54/s1600/Welcome+Note+4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS_BI9c0Hzas8bxMYuZCRXCyhYDhogjmFJwbwyuwL_h1bGuLOY009RToTLwDiuUjbOmLsIcwOYeRCuL-11C_LPLQIP4evrjqKlk_5Xi3ELwzDhK1Ga53qnCRiTr9oglaWH9biPCkKQr_f3/s1600/Welcome+Note+Pink.png

credit: w w w . f i z g r a p h i c . c o m

Preview and Save the Template. Okay done! Enjoy it guys.

Click on LIKE button or leave your comment. TQ

Tuto : Dashboard and Follow button

-

Button dashboard dengan Follow tu selalu nya kat tumblr kan?
Tapi kita ubah sikit cerita kasi putar-belit. Kita buat kat blog pulak. Jum ;D
Sebab itu lebih memudahkan mereka-2 follow kita punya blog. Lagi-2 kita dah hide nav bar tu. Atau korang yg dah hidekan Box follower :D

Dashboard > design > page element > add a gadget > HTML/Javascript

Then copy code yang ada kat bawah nie -

<div style="display:scroll; position:fixed; top:5px; right:90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=8582460203840060091" 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><br /><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>

Tapi tunggu. Atau omputeh cakap "Waitttt". Hahaha. Cettt, dah jauh mengarut. Back to the tuto. Belum habis lagi tu. Hahaha. K aku tipu jee. Korang try Preview dulu. Kot-2 tak menjadi keee kann :D Then dah OK baru lah Save. Hebad tak? Okay settle. Bye ;D

Click on LIKE button or leave your comment. TQ

Tuto : Tukar Older Post, Home, Newer Post kepada Imej/ Icon

-

Nak rasas cantik kan. Korang jeles kaaan dengan blog yg lain punya Older Post, Home dan Newer Post yg ada Imej/Icon cantik comel kann. Jum kita pun tukar.

Dashboard / Layout / Edit HTML / Download Full Template
Sila tick Expand Widget Templates
Cari code dibawah ni (Tekan Ctrl + f untuk memudahkan pencarian)

<b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if> </div>

Word yang bold itu tukar kan dengan code ini

<img src="Image URL" />

Sebagai contoh yang telah dihasilkan -

<b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src='http://img507.imageshack.us/img507/4343/leftq.png'/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img src='http://img94.imageshack.us/img94/3545/rightyx.png'/></a> </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://img535.imageshack.us/img535/606/homeb.png'/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://img535.imageshack.us/img535/606/homeb.png'/></a> </b:if> </b:if> </div>

Hasilnya begini -

Comelkan? Kaler pink khusunya bagi korang yang pomp. Aku tahu benoo. Hahaha.
Tapi kalau geng lain yang tak suka dengan ex. yang ini. Korang leh try cari icon kat tempat lain. Contohnya kat Sini. Ada banyak yang cantik. Pewittt. *Murahnya hati aku. Haha. Selamat Mencuba. Kbye.

Click on LIKE button or leave your comment. TQ

Tutorial membuat spoiler

Akhir-2 ne banyak tekanan. Hidup nie makin mencabar. Ha-ha. *Tu jeh aku mampu cakap. Diary aku koyak. Biar kan nya rabak. Peduli kah aku? Oh tidak. Hahaha. Mengarut dah aku. Cett, biarlah. Atleast aku tak kacau soul dan heart orang lain kaaaan. Maka beralasan kan kesibukan diri, blog pun sedemikianlah dah makin terbengkalai. Rasa simpati tu ada lah. Post entry terakhir pun copy paste credit punya bahan. Ngeh-3 :D

Nahhh, maka itu. Aku nak kongsi sikit tutorial.
Pikir-2 dari kosong blog nie. Nak tunggu story hidup aku yang superb jerk tu kot kaaan. Aku penuhkan dengan tuto korang tak kesah ke? Hahaha. Okayy dah diam. Nak start dah tuto harinie - Tutorial membuat spoiler.

Apakan itu Spoiler? Dah. Dari aku mulut nie berkata, otak nie berfikir, jari ne menaip perkara yang buruk. Sini aku terangkan apa itu spoiler utk blog.

*click pada gambar jika kurang jelas dan perlukan tumbesaran.

Tu haaa dea, abaikan perkataan carut tu haa. Takde masa nak edit segala macam. Sorry. Yang ingin aku jelaskan disini. Tu haaa menatang tu, button yg tu. Yang diberi nama spoiler.

Seperti kebiasaan lah pergi kat Design > Edit layout > Add a gadjet > Html javascript

Then just copy yang yanie letak kat bawah nie ->

<div><div style="margin: 5px;"><div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tekan" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tekan'; }" type="button"/></div><div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2"><div style="display: none;">Masukkan Code JavaScript/Code Gambar/Text Di sini </div></div></div></div>

Simple as ABC ait'te? Then tukar dulu mana-2 yang patut di ubah suai. Kemudian Save. Done. Settle sudeh. Selamat berjaya :D

Source

LOVE ♥

Click on LIKE button or leave your comment. TQ

Tuto : Auto Hide Menu

Step 1 ;-

Go to >> Design >> Edit HTML

Download Full Templates [for backup]

Tick Expands Widget Template

CTRL + F , search =

</head>

Copy kod dibawah & letak di atas kod </head>.

<style type="text/css">
.texthidden {display:inline}
.shown {display:block}
</style>

<script type="text/javascript">
document.write('<style>.texthidden {display:none} </style>');
</script>

<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="shown") {
whichpost.className="texthidden";
}
else {
whichpost.className="shown";
}
}
</script>

Step 2 ;-

Go to >> Page Element >> Add a gadget >> Html / Javascript
Copy & Paste kod berikut :

<ul><a href="javascript:void(0);" onclick="expandcollapse('keyword')"> <h4>[+/-] PESANAN SILAMPUNEON</h4></a></ul>
<ul class="texthidden" id="keyword">
<center>* WRITE SOMETHING HERE *</center>
*</center>
</ul>

<ul><a href="javascript:void(0);" onclick="expandcollapse('button')"> <h4>[+/-] CREDIT </h4></a></ul>
<ul class="texthidden" id="button">
<center>* COPY CATS ARE ALLOWES HERE. PLS CREDIT SOME BACKLINKS TQVM*</center>
*</center>
</ul>

Edit perkataan warna KUNING. Perkataan warna merah ni mesti sama, kalau tak autoslide menu takkan berfungsi. Perkataan warna merah ni jugak tak digalakkan kalau korang letak nombor, guna perkataan je ok.

Edit perkataan warna HIJAU dengan tajuk menu korang.

Edit perkataan warna OREN dengan perkataan, code, widget, gambar atau apa sahaja yang korang nak ada dalam auto hide menu ni.

Preview dulu.

Dah betul pasti. Save. and DONE :D

Click on LIKE button or leave your comment. TQ

Yaniemirawk Tutorial Blog

Pages

TO HATER

OWNER

Tutorial : Cute Update Box on Sidebar

Tutorial - Link Hover

Tutorial : Welcome Note 'click enter'

Tuto : Dashboard and Follow button

Tuto : Tukar Older Post, Home, Newer Post kepada Imej/ Icon

Tutorial membuat spoiler

Tuto : Auto Hide Menu

FOOTPRINTS

I MY ME MINE