Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Monday, December 26, 2011

Tutorial :- Iklan floating wth close button



Tqvm tutorial :-


Cara²

1) Dashboard > Design > Add Gadjet > HTML Java Script

2) Kopipes coding dibawah :-

utk skyscrapper

<style type='text/css'>
#topbar{
position:absolute;
margin: 0px -23px;
padding: 0px;
width: 130px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
/***********************************************
* Floating Top Bar script- �© Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopRight=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopRight()", 10);
}
ftlObj = ml("topbar");
stayTopRight();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div id="topbar">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLpXvJPXPKSpSdu6qc5nFs2Pei3owi9Zaydto9s0lgVGH8S5o-eFSOExllc6tHnSKqabEKPxFKiCcNwphSj1omRdSwNM3mWkVA1ASdohnZqUGZ-Q_-ZItdHht-XskOmzEVRXnz3TQ1Vkla/s320/close.png" border="0" /></a>
Masukkan kod iklan d sini
</div>

utk leaderboard

&lt;style type='text/css'&gt;
#topbar{
position:absolute;
margin: 400px -23px;
padding: 0px;
width: 730px;
visibility: hidden;
z-index: 100;
}
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
/***********************************************
* Floating Top Bar script- &Atilde;�&Acirc;&copy; Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos=&quot;fromtop&quot; //enter &quot;fromtop&quot; or &quot;frombottom&quot;
function iecompattest(){
return (document.compatMode &amp;&amp; document.compatMode!=&quot;BackCompat&quot;)? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + &quot;=&quot;
var returnvalue = &quot;&quot;;
if (document.cookie.length &gt; 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(&quot;;&quot;, offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie=&quot;remainclosed=1&quot;
document.getElementById(&quot;topbar&quot;).style.visibility=&quot;hidden&quot;
}
function staticbar(){
barheight=document.getElementById(&quot;topbar&quot;).offsetHeight
var ns = (navigator.appName.indexOf(&quot;Netscape&quot;) != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose &amp;&amp; get_cookie(&quot;remainclosed&quot;)==&quot;&quot;)
el.style.visibility=&quot;visible&quot;
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+&quot;px&quot;;this.style.top=y+&quot;px&quot;;};
el.x = startX;
if (verticalpos==&quot;fromtop&quot;)
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos==&quot;fromtop&quot;){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout(&quot;stayTopLeft()&quot;, 10);
}
ftlObj = ml(&quot;topbar&quot;);
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener(&quot;load&quot;, staticbar, false)
else if (window.attachEvent)
window.attachEvent(&quot;onload&quot;, staticbar)
else if (document.getElementById)
window.onload=staticbar
&lt;/script&gt;
&lt;div id=&quot;topbar&quot;&gt;
&lt;a href=&quot;&quot; onclick=&quot;closebar(); return false&quot;&gt;&lt;img src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLpXvJPXPKSpSdu6qc5nFs2Pei3owi9Zaydto9s0lgVGH8S5o-eFSOExllc6tHnSKqabEKPxFKiCcNwphSj1omRdSwNM3mWkVA1ASdohnZqUGZ-Q_-ZItdHht-XskOmzEVRXnz3TQ1Vkla/s320/close.png&quot; border=&quot;0&quot; /&gt;Close&lt;/a&gt;
Masukkan kod iklan d sini
&lt;/div&gt;




Tuesday, December 13, 2011

Tutorial :- Flash Blockquote



Flash blockquote ni means blockquote akan
bertukar bila cursor dihalakan..
jadi ada 2 background blockquote yg berbeza.. =)

Credit Tutorial:


1) Dashboard> Design > Edit Html

2) Tekan Cltr + F serentak dan cari kod:-
.post blockquote {
3) Paste code di bawah SELEPAS kod di step (2)
background: url(http://dl3.glitter-graphics.net/pub/264/264393ps0ft3rzze.gif);
border:2px solid  #fbd5dd;
-moz-border-radius: 25px 10px / 10px 25px; 
border-radius: 25px 10px / 10px 25px;

colour:#FFFFFF}
blockquote:hover {
background: url(http://dl5.glitter-graphics.net/pub/590/590935ankbyj1xx4.gif) repeat right bottom ;
border:2px dotted  #fbd5dd;
-moz-border-radius: 40px 10px;
border-radius: 40px 10px;

}

4) Preview & Save!


okes, siap!!!
selamat Mencuba




Tuesday, December 6, 2011

Tutorial : Gambar besar bila cursor sentuh



Credit tutorial :-


contoh gambar :-


bila cursor menyentuh gambar akan membesar kan.. =)


1) Dashboard> Design > Edit Html

2) Tekan Cltr + F serentak dan cari kod:-
<head>
3) Paste code di bawah SELEPAS kod di step (2)
   <style>
    .post img:hover {
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -webkit-transform: scale(1.2); }
    </style>

4) Preview & Save!


okes, siap!!!
selamat Mencuba..





Tuesday, October 25, 2011

Tutorial jenis² Border


credit tutorial to Tengku Nizam



background: #790101;
border: 1px solid #790101;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
 background: #790101;
border: 1px solid #790101;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
background: #790101;
border: 1px solid #790101;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
background: #790101;
border: 1px solid #790101;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
background: #790101;
border: 1px solid #790101;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
 background: #790101;
border: 1px solid #790101;
 -moz-border-radius: 35px;
border-radius: 35px;
}












Wednesday, October 19, 2011

Tutorial Blockquote Senget bila cursor dialihkan..


Ekceli tatau nak letak tajuk seswai ngan tutorial,
tp arap u ols paham la ape yg sy mau sampaikan itew.. ;-p
kalo tak phm, korang leh tgk post sblm ni

acu cuba try test letak cursor kat blockquote tu
& cuba alihkan..
bergerak bukan.. ?...=)

sy tlh cuba tutorial Mama Aqish
yeyeyey.. berjaya, tq mama!!!



1) Dashboard>Design>Edit HTML>
2) Tekan Ctrl F serentak dan cari kod
]]></b:skin>
3) Pastekan semua kod di bawah ini sebelum atau di atas kod di dalam step no (2)
.post blockquote {
-webkit-transition-duration: 1.0s;
background-image: url('BACKGROUND IMEJ ANDA SEBELUM DIHALAKAN CURSOR');
border:2px dashed #000000;
padding: 8px;
color: #888888;
max-width: 400px;
-moz-opacity:0.75;
filter:alpha(opacity=75);
-khtml-opacity: 0.75;
opacity: 0.75;
-moz-border-radius: 35px;
border-radius: 35px;
}
blockquote:hover{
background-color: #FFCCFF;
background-image:url(URL IMEJ BERGERAK YANG ANDA SUKA);
background-repeat:no-repeat;
background-position:bottom right;
-moz-opacity:1.0;
filter:alpha(opacity=100);
-khtml-opacity: 1.0;
opacity: 1.0;
-webkit-border-radius: 36px 12px;
    -moz-border-radius: 36px 12px;
    -webkit-transform: skew(2.deg,1.5deg);
    -moz-transform: rotate(4deg);
    -webkit-transform: rotate(4deg); }
    border:2px dashed #000000;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomright: 10px;
}
.post blockquote p {
margin: .75em 0;
}


okes, siap!!!


try n error la yer.. =)







Tuesday, October 18, 2011

Blockquote hover testing.. =)

testing testing

Wednesday, December 8, 2010

Note di bawah setiap post

Source : Syamira
1. Dashboard > Design > Edit html > 
2. Tick Expand WidgetsTekan Ctrl+F dan cari kod :
<data: post.body/>
3. Ctrl + C untuk copy kod di bawah :
<hr/><center>
<b>AYAT ANDA??</b>
</center><hr/>
 
4. Kemudian , pastekan kod yang telah di copy bawah kod <data: post.body/>
5.  Gantikan tulisan bewarna merah dengan ayat yang anda nak .
6. Preview & Save!!

Wednesday, November 10, 2010

Tulisan Bergerak²

Salam..


1. Teks bergerak ke kiri


Selamat Datang










<marquee direction="left"><span style="color: rgb(0, 0, 0); font-weight: bold;">Selamat Datang</span></marquee>

2. Teks bergerak atas ke bawah 


Selamat Datang 

<marquee align="center" direction="up" behavior="alternate" scrollamount="5" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color: rgb(0,0, 255); font-weight: bold;">Selamat Datang</span></marquee>


3.  Teks bergerak kiri kanan


Selamat Datang 



<marquee direction="left" behavior="alternate"><span style="color: rgb(0, 0,255); font-weight: bold;">Selamat Datang</span></marquee>



Sunday, August 15, 2010

Cara utk licinkan kulit muka

Credit to Sifoo.com yg sudi share tutorial ini..
ye, ianya sgt berguna utk saya okeh..
hahahah.. utk mencantikkan wajahku yg berjerawat batu ni.. :P


arini jom kite main ngan software Adobe Photoshop plak ekk..
frankly speaking, i senirik bkn la fasih benor ngan software ni,
tp.. bleh la stakat yg senang² tu..

bagi yg. mempunyai kulit muka bermasalah ..
elokla mencuba kaedah ini..
iye, teknik penyamaran muka kat forum sembang..
hahahha, i conform nyah.. 
riburiban pakwe²-makwe² yg terpikat u.. :D


fully tutorial pls refer kat Sifoo.com la ekk..
ini versi nak cepat aje..


1.
aktifkan Quick Mask (tekan key Q)

2. 
Brush - beruskn ats bhgn muka yg nk licinkn 
*guna eraser utk pdmkn bhgn lebih

3. 
Slps selesai gunakn Brush tadi, klik semula pada ikon Quick Mask di bhgn bwh toolbar, atau tekan key ‘Q’ pd keyboard. Satu selection akn aktif.

 inversekan selection- tekan Ctrl+Shift+I atau klik Select > Inverse.
Kemudian, tekan Ctrl+J utk copy and paste selection di layer yg baru (Layer 1).

4.
Applykan Gaussian Blur kepada Layer 1. 
Klik Filter > Blur > Gaussian Blur.
Nilai radius adalah terpulang kepada berapa ‘licin’ yang anda mahukan. (3-5 pixels)
Capacity layer kepada 70%-80%.

5. 
Copy layer Background – Klik kanan > Duplicate Layer.
Susunkan layer ‘Background copy’ di atas Layer 1 Drag dan drop.
Tukarkan layer blend mode daripada Normal kepada Linear Light.- layer b/g copy

6.
Klik Filter > Other > High Pass (setkan nilai radius di antara 0.1 – 0.5 pixels).
 
Tambahan, untuk dapatkan :
  • Copy merged: Ctrl+Shift+Alt+E
  • Sharpen: Klik Filter > Sharpen > Smart Sharpen
  • Level: Klik Image > Adjustments > Level



Monday, August 9, 2010

New Icon utk Older Post, Home & Newest Post


Mekasih utk. Yanie yg. sudi berkongsi tutorial beliau dengan semua..

U ols,
 jom tukar icon Older, Home & Newest Post..
ala, cam rama² i tu.. =)
1) Log-in blog cam biasa 





2) Dashboard > Layout > Edit HTML
3) Tick Expand Widget templates 

HOME
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/> 
 OLDER POST
<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>
  NEWEST POST
<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>

*Utk semua yg hurufnya bold kaler merah tu,
gantikan dgn


<img src='URL ICON'/>




4) Preview dlu, tgk menjadi or tidak..
5) berkenan? sila SAVE.. ;p



Friday, July 16, 2010

Blockquote kalerful

Salam sejahtera

1st of all, 
TQVM tuk Liyaana yg sudi share tutorial beliau

meh saya ajar balik ape yg beliau share...
tutorial arini psl nk buat benda alah ni..

*
*
*
salam satu mesia

1) Log-in blog cam biasa 
2) Dashboard > Layout > Edit HTML
3) Tick Expand Widget templates 
4) Cari code  .post blockquote {  ** guna ctrl + f
 
5) copy dan pastekan semua itu dengan code ini di bawah code .. (4).. 
background: #FFCC99;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px solid #ff0d62;

** Note**
background: #FFCC99; ( kaler bulih tuko SINI )
-moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; (  ini border dia. kalau nak ubah, just ubah top atau bottom)
padding: 6px; ( tak perlu usik )
Border: 1px solid #ff0d62; ( ini border color merah. kalau nak tukar line dia tebal, tambah lagi 1 kepada 5 atau 10px.

solid adalah garisan lurus. contoh ___________
dotted adalah garisan titik² contoh .........................
dashed adalah garisan putus² contoh _ _ _ _ _ _ _
margin:1em 20px; ( tak perlu usik )
 
6) Save n siap



Saturday, May 22, 2010

Icon cute kat Link sidebar

Salam sejahtera,
Kali ni nak share camane nk wat ikon yg. cute, ganti ikon bloggers
yg salu terpapar kat sidebar link tu..

first of all,
TQVM utk AlmansuQie yg. sudi share tutorial tu..

stepnyer :-
1) pastikan kat configure blog list yg kite follow tu JGN tick icon
2) Log-in blog cam biasa 
3) Dashboard > Layout > Edit HTML
  4) Cari perkataan.. ** ctrl+f**
 .sidebar ul li {
 
5) Lepas perkataan tu, letakkan (paste) koding dibawah
background:url("Alamat Gambar Disini") no-repeat 2px .25em;
 
**gantikan alamat url**

6) Tadaa,, siap n save 




Tuesday, April 20, 2010

Letak Icon pd. tajuk post

Salam :-*

Ngerti apa tajuk entry kali ni?.. :-/
macam SINI la 
ekceli, tutorial asal akak amek kat SINI
Macih ye Darls, sudi u kongsi tutorial ngan kite sume ek..


1. Log masuk cam biase la kan
2. Dashboard > Layout > Edit HTML
3. Cari kod .post h3 {  


4. Letak kod di bawah SELEPAS kod .post h3 {  

line-height: 1.1em;
text-transform: uppercase;
text-align: center;
margin: 0 0 10px 0;
padding: 0 5px 0 0;
background:url(url gambar) no-repeat left top;


4. Preview, kalo suke, SAVE




:D








Monday, April 19, 2010

shortcut to icon/ text


Salam =D>
(so amacam, last tutorial kira menjadi la yep.. :-*)


entry kali ni lak pasal camane ek nak wat shorcut icon..
ala.. yg macam ni ♥, ♪, ♫ n else tu..
gamak²nye de ke org nak jwb kalo kite yg. tataw kebenda ni tanya?..
so, dont fening²,
meh sini nk turunkan ilmu sket..


akak tataw le kat mane amek dis shortcut tempohari..
sori ek mane² otai sume..
akak salin balik kt buku nota akak..
mane taw, dibuatnye hilang..
tak dapek nak nolong.. :)


so, here we goes..


alt + 1 = ☺
alt + 2 = ☻
alt + 15 = ☼
alt + 12 = ♀
alt + 11 = ♂
alt + 6 = ♠
alt + 5 = ♣
alt + 3 = ♥
alt + 4 = ♦
alt + 13 = ♪
alt + 14 = ♫
alt + 253 = ²
alt + 0153 = ™
alt + 0169 = ©
alt + r = ®




amacam ;;)
So, selamat mencuba..





Sunday, April 18, 2010

Emoticon on post

Salam

Kali ni entry pasal camne nk letak emoticon² dalam post,
ala cam dlm ym tu, hikhikhik

source asal kat SINI

1. Log masuk ke akaun blog memasing
2. Layout> Edit HTML
3. Cari kod </head>
4. Letak kod dibawah SEBELUM kod </head>

<script src="http://mltan100.googlepages.com/emoticons.js" type="text/javascript"/>

5. Siap, save!!!


jom testing!!!

=))


Wednesday, April 7, 2010

kotak dalam entry


Salam

n3 camane nak letak kotak² dlm post..
ala, macam ni..




Ayat² chenta.. :P


jugak saya refer kat tutorial c33ra..
macih skali lagi c33ra..
sangat berguna ilmu yg. awak sampaikan.. =D



1. Cam biase, nak wat new post
2. letak lak coding ni.. 

<span ><div style="border: 1px solid rgb(0, 0, 0); padding: 7px 5px 7px 10px; width: 400px; background: #F5A9F2">
letak ayat kamuu..
</div></span>


*jenis² border yg. leh alter :- 
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;


  • border: 1px solid tu = boleh ditukar 
  • width = boleh ditukar 
  • background = pun bleh ditukar 
*kod warna html ... HERE.. 

3. okeh, siap n publish le wei.. ;p



Update!!

yg ini sy create sendiri :-






letak ayat kamuu..


<center><div style="background: #F5A9F2; border-bottom-style: dotted; border-color: #FF00FF; border-left-style: solid; border-right-style: solid; border-top-style: dotted;
border-width:2px; padding: 7px 5px px 10px; width: 400px;">
letak ayat kamuu..</div>
</center>

Tuesday, March 16, 2010

Tajuk Blog bergerak²

Salam


1. Log-in blog cam biasa
2. Dashboard > Layout > Edit HTML
3. Cari perkataan.. ** ctrl+f**


<head>


4. Letak coding ni kat bawah <head> tadi
 
<script language='JavaScript'>var txt=".. tulisla nak tulis ape pon..";var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;txt=txt.substring(1,txt.length)+txt.charAt(0);segarkan=setTimeout("bergerak()",kecepatan);}bergerak();</script>


4. preview dlu, kalo setuju Save templates.. :) 
5. Amacam, menjadi????...



noted: yippie, menjadik =D

Monday, March 15, 2010

Memasang Favicon



Apa itu Favicon?

A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage.




Cara nak tukar Favicon:-

1. Log-in kat blog memasing  
2. Dashboard > Layout > Edit HTML 
3.  Cari code </head>
4.  Lepas tu, letak code ni..


 <link href='YOUR URL' rel='Shortcut Icon'/>

** ganti URL tu ngan URL kite nyer

5. Favicon chantek² bleh didapati kat ----> SINI








p/s: TQVM Tutorial Along Arman
noted: yippie... menjadi!!!!.. :) 


 

About This Blog