Showing posts with label tutorial. Show all posts
Showing posts with label tutorial. Show all posts

Tutorial : Single Colour Underline

Assalamualaikum (:

Okay, aku baru lepas godek kod untuk Single Coloured Underline, bukan Double Coloured Underline ya? Klik link di atas untuk ke tutorial Double Coloured Underline. Cuba korang tengok dekat bawah ini, lawa tak?
ILoveyouu ♥
• Dashboard > Design > Edit HTML
• Ctrl + F dan cari kod */Header
• Copy kod di bawah ini
u {
text-decoration: none;
border-bottom: 2px solid #000000;
padding: 0px;
}
• Paste-kan di ATAS kod */Header
P U Z Z L E -- T I M E

• 2px : Kod untuk ketebalan garis bawah
• Solid : Kod untuk bentuk garis bawah
• #000000 : Kod warna garis bawah
• Lepas itu, SAVE
Aku Pegang Tutorial Ini, Ada Masalah?

kredit : Athirah Rahim 

Tutorial : Button Show-Hide Spoiler

Assalamualaikum , kawan-kawan . 

Happy Chinese New Year bagi orang yang menyambutnya ye :) 

Okey , tujuan ash update entry kali ini adalah bertujuan nak bantu kak Mimie selesaikan masalah dia :) haha //sengal betul ayat aku tu.
Entry kali ni , agak panjang sedikit . Sorfiena tak tahu nak terangkan macam mana -.-'
Akak tu tanya Sorfiena macam ni ,
korang tahu apa yang akak ni maksudkan ? tengok gambar bawah pulak :)
lepas korang tekan salah satu button , dia akan keluar macam ini ..

jelas ? sebelum tu , entry ni , sama je ngan entry INI . ok , jum kita start :)

bagi pengguna Old Blogger interface , korang buat macam biasa k , pergi kat tempat biasa , pilih add gadjet , dan pilih HTML , dan pastekan kod dibawah ini dalam ruangan HTML :)

bagi yang guna New Blgoger interface , pergi kat layout , pilih add gadjet , dan pilih HTML/JavaScript 


<center><div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Close&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tutorial&#39;; }" style="margin: 0px; padding: 0px; width: 95px;" value="Tutorial" type="button" />
</div>
<div style="border: 0px inset; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">
<div>
<img src="URL ICON COMEL" /> TAJUK:<a href="LINK ENTRY YANG HENDAK DITUJU">TAJUK ENTRY TERSEBUT</a><br />
<br />
<img src="URL ICON COMEL" /> TAJUK :<a href="LINK ENTRY YANG HENDAK DITUJU">TAJUK ENTRY TERSEBUT</a><br />

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



Tutorial : tukar tajuk besar , sebelum spoiler dibuka.
URL ICON COMEL : boleh ambik kat sini //HERE\\
TAJUK : selepas spoiler dibuka , ayat dalam spoiler.
LINK ENTRY YANG HENDAK DITUJU : link yang korang nak taruk
TAJUK ENTRY TERSEBUT : nama link yg korang nak taruk tu .

perhatian ! kalau nak tambah , just copy dari <center><div><div style="margin: 5px;"> sampai </center></center></div></div></div></div></center> yang lain-lain tu , boleh tukar sendiri kan ? kalau tak nak letak TAJUK=freebies :<a href="LINK ENTRY YANG HENDAK DITUJU"> . boleh padam :) korang boleh letak nama kawan or apa-apa je yang tak ada backlink :)

//kalau tak paham , boleh tanya :)

Freebies : ShoutBox Ulzzang

Assalamualaikum !
Hari ni ash datang balik dengan freebies :) weee , tapi , ash baru berjinak - jinak dengan pemadam -.- 
eh , pemadam ? pemadam apa ? haha , pemadan transparent ni , ahahaha , ash baru belajar guna pemadam tu :)
ini lah hasilnya , tak seberapa ponn -.- sorry eyh , nanti ash usaha lagi untuk memperbaiki ketaq-ketak keliling gambaq tu :D
btw , ini 2 yang ash suka :) haha, ok tak ? besar sangat ye -.-' sorry eyhh . gambar pertama ni , gambar ulzzang , gambar kedua , gambar baby mason waktu dia kecik :) sayang dia . muehehehe .

width : 153
height : 300


width : 194
height : 274


update ! 
width : 155
height : 300
klik READ MORE !

Cara Letak Link Entry Dalam Comment

Selamat pagi ! hehe , hari ni Ash nak kongsi kan sikit tutorial ni ngan korang . tutor nie simple je . sumpah simple :D tajuknya cara letak link entry dalam comment . tengok gambar kalau tak paham ye .




Senang je cara nya ..


1.  Copy and Paste kod di bawah ini di ruangan komen  :


MESEJ  : <a href="LINK ENTRI KORANG"><b>TAJUK ENTRI KORANG</b></a>


2. lastly . Klik Publish Your Comment !


* Mesej = Taip apa yang korang nak taip .. contoh : saya join segmen ini . jum singgah sini :)


* Link Entry Korang = contoh : http://mykawaaiiionlinediary.blogspot.com/2011/11/segmen-free-headers-for-you-jom-join.html


* Tajuk Entry Korang = Taipkan tajuk Entry korang . Kalau tajuk yang menarik , for sure ramai  
                                  yang akan singgah :) cth : Segmen Free Header's For You. 


hah ! dah siap pon :) sama tak macam dalam pics tu ? jadi tak ? kalau tak paham . boleh tanya :)

TUTORIAL : NEON HIGHLIGHT II


ahahaa, sorry weyh , aku guna pics kau , akcelly , aku guna pics kau sbb kau yang mintak tutorial nie . hehe
ok , tutor nie ash copy dari kawan ash , iaitu Leeya . dia kata dia reka khas , sbb tu ash kreditkan untuk dia . haha.
tengok gambar kalau tak tahu apa diaa ..


Let's start ..

1 . Design > Edit HTML
2 . Cari kod nie
a:link
3 . Pastekan kod nie ATAS a:link

::-moz-selection {
color:#000000;
text-shadow: 2px 2px 4px #000000;
text-shadow: 0 0 0.5em #00000, 0 0 0.5em #00000;
}
::selection {
color:#000000;
text-shadow: 2px 2px 4px #000000;
text-shadow: 0 0 0.6em #000000, 0 0 0.6em #000000;
}

4 . Preview and Save jika tiada error ..

p/s : yang di bold kan , sila tukar . Pastikan semua sama :)
code color boleh cari di SINI

TUTORIAL NEON HIGHLIGHT I

ok , straight to de point je larg ye :)
apa itu neon highlight ? tengok gambar !


1 . Dashboard > Design > Edit HTML
2 . Search a:link
3 . Pastekan kod ini ATAS a:link

::-moz-selection {
color:#FFFFFF;
text-shadow: 0 0 0.2em  #000000, 0 0 0.2em  #9FDFF5;
}
::selection {
color:#FFFFFF;
text-shadow: 0 0 0.2em  #000000, 0 0 0.2em  #9FDFF5;
}



yang di bold kan tu , boleh tukar ikut kehendak sendiri :)
code color boleh cari di SINI

Tutorial : Open link in new tab

Untuk memudahan org ramai pergi ke link baru, apa kata you all taruk ini dulu, baru senang org ramai nak ke new link or new tabs :)
CARA YANG PERTAMA :
1step Dashboard - Design - Add Gadget - HTML/JavaScript

Copy and paste code below in HTML / JavaScript

<!-- code for turning all non-blog links to new page links --> <script type="text/javascript" language="javascript"> var arr = document.getElementsByTagName("a"); //get all links in the page for(var i = 0; i < arr.length; i++) { if(arr[i].href.indexOf("Your URL Blog") < 0 //not links that are 'inside' blog && arr[i].href.indexOf("javascript:") < 0) //not javascript links arr[i].target = "_blank"; } </script>

untuk senang lagi, letak dibahagian footer :)

CARA YANG KEDUA : bagaimana nak pastikan semua link akan keluar di window/tab yang baru.

Pegi ke Design - Edit HTML. Ctrl + F dan cari <head> dan tambahkan <base target='_blank'/> di bawahnya. Lebih kurang akan jadi begini. Selamat mencuba !

sebelum

<head>

selepas

<head>
<base target='_blank'/>

Tutorial : Floating Button


singgah sini dulu ye  http://ash-tsukidate.blogspot.com/2011/09/i-need-your-like-dear-please.html







oke ,now! I nak teach korang , macam mana nak buat floating button !
Apa itu floating button ? Tengok kat bawah ni :)


Floating button ini , ada dekat sebelah kiri blog i ni .

1. Log in > Dashboard > Design > Add Gadget > Html/Java Script

2. Copy code dibawah ni dan paste di ruang HTML/Javascript


<style type='text/css'> a.linkopacity img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;} a.linkopacity:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } </style> <div style='display:scroll; position:fixed; top:200px; left:-12px;'>

<a class='linkopacity' href=' URL FACEBOOK' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://3.bp.blogspot.com/-kU9w2lr0_5M/TZhyYaUpiII/AAAAAAAABWU/CGGeAlcrxxc/s1600/pink-facebook.png" /></a><br />

<a class='linkopacity' href=' URL TWITTER' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://2.bp.blogspot.com/-vXrrlV8rpaM/TZhyZFawpLI/AAAAAAAABWc/cQWnjAxyvR4/s1600/pink-twitter.png" /></a><br /></div>

okey, itu je buat masa nie, klu x jadi, kasi tahu kat ash ye :) insyaAllah, ash boleh tolong ^^

Toturial : Gantikan button follower kepada gambar.

Tutorial ni untuk blog yg penuh dgn tulisan, gambar tak byk, u all boleh letak tutor ini untuk menceriakan blog korang ^___^ Tengok gambar kalau x paham juga . Btw, klu dah taruk tutor ini, jgn taruk apa2 button followe lagi, ini untuk kesenangan org ramai tau, Mereka tidak perlu untuk follow yg lain, sbb kekadang dia x akan berfungsi . #paham-paham je lahh .

yg ini (bawah)




Anime icon Pictures, Images and Photos

okeyy, dah tahu kan? berminat ? jum ikut step by step .

1step : pergi ke design >  add gadjet > HTML/JavaSprit

2step : copy and paste code ini ^^




<center><a href="http://www.blogger.com/follow-blog.g?blogID=IDBLOGYOUALL" target="_blank"><img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/s720x720/308107_176026329142651_100002058545544_382894_836835557_n.jpg" border="0" alt="Anime icon Pictures, Images and Photos"/></a><center></center></center>

*WARNA MERAH : boleh tukar gambar , taruk URL photo.
*WARNA PINK : letak blog id u all.

okey, itu je .klu tak tahu, coment ye :)


singgah sini juga  http://ash-tsukidate.blogspot.com/2011/09/i-need-your-like-dear-please.html


p/s : sakitt peroottt-.-

Image Opacity Effect


singgah sini dulu ye  http://ash-tsukidate.blogspot.com/2011/09/i-need-your-like-dear-please.html


 This tutorial is request by Aida Aneesa , Apa dia Image Opacity Effect ? hmmp ini macam bila cursor korang sentuh mana-mana gambar yang dekat entry , gambar dia asal kabur than bila cursor sentuh dia jadi terang balik.Kalau tak ada link pada gambar tu, dia jadi terang . Apabila cursor sentuh , dia jadi kabur . Understand ? If still don't understand just follow my step :)
1 step Dashboard - add gadget - HTML/JavaScript

2step Copy and paste into HTML/JavaScript
<style>
/* ----- Image opacity effect 2 ----- */
.post a img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

.post a:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
</style>

Tutorial - Follow and Dashboard mcm tumblr .

This tuto req from Aida :) my friend kat sekolah ^___^
so , ini aku share ngan kau nie :) kalau x paham , post kat wall aku yerk syg ? jarang on9 blog larg dear ^^ oke oke , jum start yerk ?


1. log in blog>dashboard>design>add gadget>html/javascript

copy code ni and paste dalam ruangan html/javascript
<div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=9056625225703167037" target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" border="0" /></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>
tukar 9056625225703167037 kepada ID blog korang .

#ID BLOG boleh carik kat mana-mana je ^^ kalau korang tgh copy n nak paste kat HTML gadjet , tengok
kat atas link blog korang ,

cth : http://www.blogger.com/rearrange?blogID=9056625225703167037

nampak x kat atas tuw ? hah , copy je blog id korang tuw ... ambil yg background warna biru tuw tau  . paham ? :)


Terima kasih daun keladi , kalau ada umur yg panjang, kita berjumpa lagi :D 

Tutorial-jquery lazyload


singgah sini dulu ye  http://ash-tsukidate.blogspot.com/2011/09/i-need-your-like-dear-please.html



tensyen tak . blog lambat loading ?
salah satu cara nak bagi cepat . .
ambek code ni . . copy . and paste . 
design>> add gadjet>>HTML Java Script >> save .


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script><script type="text/javascript">jQuery(document).ready(function($){if (navigator.platform == "iPad") return;jQuery("img").lazyload({effect:"fadeIn",placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF3GTQu1_OpGAolPbYRmKKswx-QsX7-OBr5Ip3ZdC_lE1w-vAA51LXRE2XAWJAvBj_81SBJBePCy1k6WGOsDISNvWgKjo7ZL1vU0NmZztLwwj_kNJq81dnFx8JzLcW8wu1N533dFbv_zs/s1600/grey.gif"});});</script><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script><script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script><script type="text/javascript">jQuery(document).ready(function($){if (navigator.platform == "iPad") return;jQuery("img").lazyload({effect:"fadeIn",placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF3GTQu1_OpGAolPbYRmKKswx-QsX7-OBr5Ip3ZdC_lE1w-vAA51LXRE2XAWJAvBj_81SBJBePCy1k6WGOsDISNvWgKjo7ZL1vU0NmZztLwwj_kNJq81dnFx8JzLcW8wu1N533dFbv_zs/s1600/grey.gif"});});</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script><script type="text/javascript">jQuery(document).ready(function($){if (navigator.platform == "iPad") return;jQuery("img").lazyload({effect:"fadeIn",placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF3GTQu1_OpGAolPbYRmKKswx-QsX7-OBr5Ip3ZdC_lE1w-vAA51LXRE2XAWJAvBj_81SBJBePCy1k6WGOsDISNvWgKjo7ZL1vU0NmZztLwwj_kNJq81dnFx8JzLcW8wu1N533dFbv_zs/s1600/grey.gif"});});</script> 

Measure Blog Weight

Assalamualaikum ^__^ straight to de point ! tadi ash pergi  Timbang Berat Blog , 
dan keputusannya amat larg menyedihkan T___T berat kott blog ash -..-'

Blog mestilah BAWAH daripada 100kb . Jika lebih , buang widget yang tak penting
nak kira ? okey , klik sini yerk :)


Tutorial : Letak Ayat Di Bawah Setiap Post




1. Log in > Dashboard > Design > Edit Html
2. Tick Expand Widget Template
3. Korunk Tekan Ctrl + F dan cari kod ini  <data:post.body/>
4. Kalo sudah jumpa , korunk copy kod kat bawah ni , and paste di bawah kod<data:post.body/> td :)


<hr/><center>AYAT KORANG</center><hr/>

5. Preview dulu oke :)
6. If dh jadi , SAVE k ^_^

Tutorial : Centerkan Tajuk Post dan Sidebar

1. Log in > Dashboard > Design > Edit html
2. Then , tekan ctrl + F and  cari kod ni 

Untuk sidebar :

h2 {

Untuk post title :

h3.post-title {
@atau 

h4 {
3. Copy kod kat bawah nih ,


text-align:centre;
4.  Then , paste kat bawah kod yang korang cari tadi.
5. Jgn lupa save plak  ;) 


jadi tak ? klu tak jadi , sila kasi tahu :)
#siap