Tuto buang border images

Ok ok, malas le mau explain :P


Cara-cara nya senang je~ x smpai 1 minit je dh siap ;) 


Pi design > Edit html 
Ngan menggunakan kegunaan ctrl+f cari la kod ni yew :p 


.post-body img, .post-body .tr-caption-container,


Dah jumpa? Owh yeah~ 
nanti korng akan nampak kod yg mcm ni kan?

.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);
  background: $(image.background.color);
  border: 1px solid $(image.border.color);
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

Ok, yang warna hijau tu tukarkan la kepada nombor kosong ek~ Contoh, ala x yah le :P sori mood fiqah ngah mls skrg ni, huhehohuheho~ :P

p/s: ok pade yg ade add fiqah kat fb, sorri tau fiqah ade delete korng. Fiqah delete korng pun sbb korng sombong. Add fiqah pun just nak menambah jumlah kwn je kan. Bukannya nak tegur pun. Huh!!! :P nak tau sape yg kena delete? ce tngok sendiri ;)

Tutorial Tekan Link terus ke New Tab

Hehehe :) Comel comel je an Teddy bear ni, haha :) ecehceh, ok fiqah saje je nak letak gmbr ni ;) fiqah nak ajar bagi yg x tahu, klau kita buka satu link ni, dia terus buka ke new tab, ok ni fiqah nak ajarkan la :)

1) Pergi Desgn > Add Gadget > HTML Javascript

2) Copy and Pastekan lah kod kat HTML Javascript ni ek :)

<!-- 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") < 0 //not links that are 'inside' blog
&& arr[i].href.indexOf("javascript:") < 0) //not javascript links
arr[i].target = "_blank";
}
</script>

3) Ok dh siap :) kejap je :)

Korang cuba la tekan mane2 link,... hehe ;))

Tutorial Tukar Warna Highlight

Owh yeah :D Siape kat sini ade highlight kat rumah ? Fiqah pun ade :) fiqah saje je bwk highlight kat sekolah walaupun sekolah menengah x perlukan highlight, saje je sbb nak beratkan kotak pensil fiqah ni hah, haha ;)

ok cube korng highlight blog fiqah, ade warna ape ? kebiasaannya warna biru kan ? fiqah buat blog fiqah highlight warna biru muda, ehehehehe ;) nak tahu x mcm mane caranya ?

ok meh le mulakan, malas nak terangkan panjang lebar -,-

1) Pergi Design > Edit HTML

2) Dengan menggunakan CTRL+F cari la kod ni

a:link {

3) dah jumpe ? bagus :D

4) Ok Copy kod2 yg tertera di bawah ini dan pastekan di atas a:link {

::-moz-selection {background:#000000;color:#FFFFFF;}
::selection {background:#000000;color:#FFFFFF;}

Lepas tu korng pandai2 la edit ek yg warna background and colour yg korng nak tu, nak dapatkan kod colour nya pergi kat sini ek ;)

Tutorial Background pada Post Title

Cuba korang tengok kat blog fiqah belakang post title ada background tak ? ade kan ? ok ni fiqah nak ajar le, bagi yg belum tahu meh le baca :)

1) ok mula2 pergi Design > Edit Html > Tick Expand Widget

2) Dengan menggunakan CTRL+F cari la kod ni

post-title

3) Dh jumpe ? Ok bagus tepuk la tangan :D 

4) Dan  korang nampak tak kod anak2 dia tu ?

text-align:center;font: $(post.title.font);margin: .75em 0 0;

5) kan ? jumpe tak ? klau tak korng kena guna templete blogger tau jangan guna templete pyzam or sewaktu ngan nya sbb nanti tak jadi le,..

6) ok pergi kat bawah dia, pastekan kod ni

background:url(URL pic)

yg URL tu url gmbr yg korng nak le, klau nak cari pergi lah dekat sini ek :)

Ok dah tu preview dulu, klau dh jadi ape lagi ? save le ;) ok smoge ini membantu korng tau !! byebye :D

Tutorial Icons sebelah Post title

Ok, malas nak jelaskan, korng nmpak tak icon kecik kat sebelah post title blog fiqah ? ok fiqah nak ajar korng care nak wat mcm tu le

1) Pergi Design > Edit HTML > Expand Tick Widget

2) Dengan menggunakan CTRL+F cari la kod ni,..

<a expr:href='data:post.url'><data:post.title/></a>

3)Dan pastekan kod ni kat tengah2 kod tu

<img src="URLGMBR"/>

Bagi yg x faham contohnya mcm ni la

<a expr:href='data:post.url'><img src="URLGMBR"/><data:post.title/></a>

dan url gmbr tu url icon yg korng nak la, korng boleh cari dekat sini
Klau korng malas nak cari ambik je la yg fiqah bagi ni, hehe ;)

 http://dl8.glitter-graphics.net/pub/1008/1008838wybxuht5da.gif

 http://dl5.glitter-graphics.net/pub/638/638145bltz6zqhdo.gif

 http://dl7.glitter-graphics.net/pub/644/644197xychjg5cjg.gif

 http://dl9.glitter-graphics.net/pub/113/113609y3nrq3qd73.gif

 http://dl6.glitter-graphics.net/pub/437/437716tvik3339uq.gif

Tutorial Post Blockquote a.k.a Kotak warna2

Pen Mereh, pen biru, you marah, i hate you

Owh yeah :)  tahu tak kotak blouquote ? bagi yg baru di alam bloger yg x tahu tu, kotak blockquote tu kotak yg warna-warna tu la :) mcm yg kat atas tu, ok ni fiqah saje je nak wat tuto bagi yg blum tahu mcm mane nak wat,...

1) Mcm biase, pergi le ke Design > Edit Html

2) Dengan menekan CTRL+F cari kod ni 

]]></b:skin>

3) Dh jumpe ke ? ok ;)
4) Copy n pastekan kod di atas kod langkah 2 tadi,...

.post blockquote {
background:url(URLGAMBAR);
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px solid #ff0d62;
margin:1em 20px;
}

Yg URL background tu url background blockquote yg korng nak la :)
Nak cari tekan sini 


Klau korng malas nak cari ni fiqah ada carikan :)



http://i148.photobucket.com/albums/s11/apply_moon/pattern.png



http://i977.photobucket.com/albums/ae258/amata-jo/lime-pattern.jpg



http://i4.photobucket.com/albums/y107/newaddictions/abstract_background_04.gif


Ingat, korng guna background yg x dek banyak corak la ek, kang x nampak la dia punya ayat dlm blockquote kang,..




5) ok dh siap save le ;) 
n cuba le wat satu post n cuba le gunakan kotak blockquote tu ek ;)


Mcm mane nak menggunakannya ? 


ok highlightkan mane2 ayat yg korng tulis tadi, n tekan butang 


ok dh siap ;) n moga ini membantu korng :D

Bagi yg nak psng hover ntuk blockquote ni meh pergi sini ok :D

Tutorial pasang Code dlm entry post

ok, ni ade yg tak tahu ni fiqah nak bagi tahu la :) rmai org yg nak wat tutorial untuk dikongsikan ngan kawan2 blogger dia kan,.... dulu fiqah pun x tahu mcm mane nak pasang code dlm entry post, klau main copy je bila publish post code tu akan hilang secara automatik.....

Dengan bantuan Kak Hana fiqah dh tahu dh :) 

Bagi yg nak tahu, klau korng nak pasang code dlm entry kan korng gi laman web ni

yg kod <em>Ampersands & angle brackets need to be encoded.</em> tu korng delete le, n korang paste kod yg korng nak letak dlm entry ek :) dan tekan Encode tau !! 

Tutorial Butang Share Facebook pada post

Contohnya klau kita ade share ape2 maklumat yg menarik, klau org tu suke dia share le catatan blog kita ni,... Fiqah pun ade buat tuto ni jgk, ala saje saje je sbb kut2 ade fiqah kongsi citer menarik, ade org nak share dia cuma tekan je la butang share tu an ;) 

ok, malas la nak citer panjang lebar ni -____-

1) Pergi Design, Add HTML, Tick Expand Widget,...

Dengan menggunakan CTRL+F cari le kod ni ya :) 

<div class='post-header-line-1'/> 

Klau ade yg tak jumpe cuba kod ni pulak,...

<div class='post-header-line-1'> 

n dh jumpe ? bagusss :DD 

2) korng pilih le butang share fb ape yg korang nak ek,....

Klau nak kotak yg full tu dia punya code

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Klau nak butang share fb compact pulak ambik kod ni le 

<div style="float:right;padding:4px;"><a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/> <script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/></div>

Copy le kod tu n pastekan di bawah kod yg langkah 1 tadi ek,...

preview dulu, klau dh jadi save je la ;) 

ok la byebye, ~ 

HAH !! lelaki ! pi sembahyang jumaat !! 

ari ni an ari jumaat :) perempuan smbahyang zuhur le,... klau x boleh sembahyang duduk diam ek :p

Tutorial gerak cursor ade bintang-bintang

Alalala :) 

ok, korng cube gerak-gerakkan anak panah a.k.a cursor korng kat blog fiqah tu, hehe ;) ade bintang2 yg jatuh2 kan kan kan ? ok ni fiqah nak ajarkan la ek ;) 

ok mcm biase le pergi design, add gadget, pilih html/javascript

copy le n paste le kod  ni kat html/jacascipt tadi,..

<script src="URL JS" type="text/javascript"></script>

yg URL JS tu, korng nak bintang yg jatuh tu warna ape la,tukarkan dengan kod berikut mengikut warna sprakle yang korang nak le,....

Biru - https://sites.google.com/site/unwanted86/javascript/biru.js

Hitam - https://sites.google.com/site/unwanted86/javascript/black.js

hijau - https://sites.google.com/site/unwanted86/javascript/lawngreen.js

Ungu - https://sites.google.com/site/unwanted86/javascript/purple.js

Putih - https://sites.google.com/site/unwanted86/javascript/putih.js

Pink - https://sites.google.com/site/unwanted86/javascript/salmon.js

Kuning - https://sites.google.com/site/unwanted86/javascript/yellow.js

Hijau kebiruan - https://sites.google.com/site/unwanted86/javascript/aqua.js

korng pilih la warna yg korng nak, contohnya la kan korng pilih warna biru la, kod nya

<script src="https://sites.google.com/site/unwanted86/javascript/biru.js" type="text/javascript"></script>

Bila dh siap, save le n lihat le sendiri hasil2nya :)
dh jadi an ? 


ok byebye :)

Tutorial Hidden Shoutmix (with picture apa2 je)

ok, ni fiqah nak ajar cara nak buat hidden shoutmix la, dengan menggunakan apa2 gmbr la, yg ari tu punya yg fiqah ajarkan tu lain, ingat lagi tak ? >tekan< ni klau xingat :) ok yg fiqah ajar tu x leh guna gmbr sesuka hati, cuma boleh guna gmbr yg fiqah bagi tu je, ni plk fiqah nak ajar cara nak buat shoumix dengan menggunakan apa2 gmbr la, ok mula2, caranya, korng edit la gmbr apa2 yg korang nak, contohnya mcm gmbr kat hidden shoutmix fiqah tu la :) cari kat mane ? kat hutan la :) hehe, ceh, x dek la, cari kat google la :) ok la ni fiqah bagi link dia senang,.. je la

dan edit la, edit je guna ape2, klau nak tansparent mcm fiqah punya tu guna photoshop la, ok dh siap dh ? dh siap upload la kat photobucket

ok klau mcm tu, gi Design, mcm biasa Add Gadget n HTML/javascript, copy n paste kan kod ni ;)

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:400px;
width:150px;
float:left;
cursor:pointer;
background:url('URL gmbr korng') no-repeat;}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
MASUKKAN KOD SHOUTBOX ANDA DISINI
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>

Url gmbr tu url ape2 gmbr yg korng nak le :) bagi yg edit sendiri tu gantikan dengan url nya la ngan menenkan kan link kat bawah gmbr di photobcuket tu n paste le kat url gmbr tu


dan Masukkan Kod Shoutmix anda di sini tu gantikan la ngan kod shoutmix korng ek ;) ok la, byebye :) moga ini membantu korng,....

Tutorial Blog takk boleh dihighlightkan

ok :) sejak akhir2 ni blog korng kena copycats tak ? habis semua ayat2 korng sekali dia nak copy, ok, ni fiqah saje je nak wat tutorial an ;) maklum la x dek keja nak wat :p lepas ni solat terus n makan, owh yeah~ Esok dh la pagi tu pukul 12 kena dtg sekolah ada perjumpaan pengawas pagi n petang skali, huhu ;)

Tuto yg fiqah wat ni, bagi sape2 kat blog dia, ada buat tutorial x payah la nak ambik tutorial disable highlight la ek :) nak copy code skali mcm mana? takkan le nak taip satu2 an, panjang lebar code tu nak tapi satu2 lak -__________-

Gi Design, Add Gadget, pilih Html javascript

copy code ni n paste ek :)

&lt;script type=&quot;text/javascript&quot;&gt;
/***********************************************
* Disable Text Selection script- &amp;#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


function disableSelection(target){
if (typeof target.onselectstart!=&quot;undefined&quot;) //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!=&quot;undefined&quot;) //Firefox route
target.style.MozUserSelect=&quot;none&quot;
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = &quot;default&quot;
}


//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById(&quot;mydiv&quot;)) //Disable text selection on element with id=&quot;mydiv&quot;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
disableSelection(document.body) //disable text selection on entire body of page
&lt;/script&gt;

ok, lepas tu dh siap le :) hoho ;) 

Tutorial Favicon Comel :)

Ello, ok la fiqah nak ajar cara nak buat favicon, ala tahu tak favicon tu apa ? tngok gmbr ni ;)

itu le yg fiqah maksudkan :) yg kecik2 ketot tu, hehe :) ok mcm ni,..


1) Mcm biasa pergi design blog la an, pergi Edit Html, dengan Ctrl+F cari kod ni hah :)

<b:skin><![CDATA[/*

Dh jumpa, baguss :D 


2) Copy cod bawah ni n pastekan kod ni dia atas kod yg step 1 tu ek :)

<link href='URL image icon anda' rel='shortcut icon' type='image/gif'/>

Preview la dulu lepas tu baru lah save ;) hehe :) klau x jadi, sorry, fiqah tak tahu la :/ klau nak cari ikon yg comel loteh, pergi kat sini ek :)


Cara nak copy url ikon tu ?? Gi dia punya code kan,..
Contoh la kan ni kod nya,..

<a href="http://www.glitter-graphics.com"><img src="http://dl10.glitter-graphics.net/pub/1008/1008970zdx2f9aw7a.gif" width=18 height=18 border=0></a>

yg fiqah merahkan tu la url blognya ek ;)
ok, ade 2 cara tau, yang ini lain pulak


1) Dashboard > Design > Page Element


Korng tngok kat atas page element korng tu kan, ade perkataan favicon kan?

Ok, tekan edit n upload la mane2 ikon comel korng ye ;]


hehe, k la babai, mane lagi senang? keke... :D

Tutorial buton follow guna gambar :)

hehe :) sekarang ni perempuan solat kat surau lama ! owh yeah :D Alhamdulillah ! ni yg suka ni :) x yah la nak tunggu org lelaki bersiap, haha ;) org perempuan sembahyang jemaah sendiri la :)

ok fiqah nak ajar korng cara nak follow org guna gmbr, sesetengah org an ada buat klau nak follow tekan gambar itu ini n sbgainya la an :) ok mcm ni caranya, mula2 tu korng edit la gmbr apa2 yg korng nak kat mana2, mcm fiqah edit sendiri kat photoscape je

dan lepas tu korang upload la kat photobucket, klau nak sign up kat photobucket sign up je ngan facebook :)


bagi yg edit sendiri,copy la html code nya n,....ikuti contohnya la ek :)

ok contoh la korng pilih gambar ni lah kan,... bagi sape2 yg malas nak edit sendiri, ambik je la gmbr ni ;)

Sebelum tu gi Design, Add Gadget n tekan HTML/javascript

Dia punya code kat bawah ni la 

<a href="http://media.photobucket.com/image/cute icon/umi_uta/Icons and Icons/536.jpg?o=19" target="_blank"><img src="http://i743.photobucket.com/albums/xx73/umi_uta/Icons%20and%20Icons

yg Fiqah merahkan tu korang gantikan ngan kod ni

http://www.blogger.com/follow-blog.g?blogID=BLOG ID KORANG 

yg Blog ID tu, korang tengok kat url design korng tu, ada id blog korng tau :) copy n pastekan kat Blog ID Korang tu,..

lepas tu save je la n tengok la blog korang ek :) harap korng faham, klau x faham nanti fiqah jelaskan sbb nak cepat gi sekolah ni, malam ni insya-allah fiqah jelaskan ek :)

Tuto header ade hover gmbr kelip-kelip

Assalammualaikum

Bila guna templete designer kan, header blog fiqah boleh je tau ade hover tapi bila dh guna classic templete blog fiqah punya header x dek hover dh, yg boleh just kat link je Y___Y So fiqah dh ade idea dh cam ne nk letak hover kelip-kelip kat header ni :D

Cara dia ngan,...

Pergi Dashboard > Design > Edit Html

Dengan menggunakan keajaiban ctrl+f, cari kod ni

#header {

Dh jumpa tu kan, korng copy code dekat bawah ni n pastekan kod ni kat bawah code  anak-anak code #header {

#header:hover {

background-image: url(url background hover korng);

}

Hehe :D Yg url background hover tu ni ade fresbies dia ek :p hoho~

http://a.deviantart.net/avatars/s/p/sparklesplz.gif?1

Itu link yg dia jadi blink-blink tu ok :) Rmai yg suka hover ni termasuk la fiqah. So fiqah ambik je la hehe~

K la bye ^_______^

Tutorial Energy Saving Mood

Hehe :) nak ajar ni, fiqah sebenrnya saje je letak aplikasi energy saving mood ni, fiqah pun tak tahu ape benda ni, korng tahu tak apa aplikasi ni ?? ok korng biarkan blog fiqah lama-lama kan, nanti dia akan keluar perkataan "energy saving mood" korng tunggu je la mcm 3 minit ke ;) ok la, mcm ni, 


Pergi Design, Add New Gadget, pilih Html javascript,...


Korang copy n paste kod di bawah ni ek ~ 

<script src='http://www.vincentcheung.ca/jsencryption/jsencryption.js' type='text/javascript'></script><script type="text/javascript">if (window.jstiming) window.jstiming.load.tick('headEnd');</script>

<!-- save your energy --><script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'></script><!-- save your energy end --><script type='text/javascript'></script><script type='text/javascript'>

ok dh siap, :) 

Tutorial Catatan Archiev dlm bentuk kalendar

Ok ni, fiqah nak ajar korang la cara nak ubahkan catatan archive dlm bentuk kalendar ;) huhu, ok, tahu tak apa benda tu ? gi la kat tepi2 gadget blog fiqah, yg ada mcm kalendar tu, ok mcm ni :)


gi la design,add gadget,tekan html javascript,... korang copy code n paste ni ek ;)

<div id="blogCalendar"></div>

<script type="text/javascript" src="http://lvchen-recentcomments.googlecode.com/svn/trunk/Calendar/1.0/calendar_pack.js"></script>

<script type="text/javascript">

Calendar.base="urlblog.blogspot.com";

Calendar.timeZone="+08:00";

Calendar.timeZoneCheck = true;

Calendar.drawTable();

</script>

<style>

</style>

yg warna merah tu an, korng ubah la, url blogger fiqah ke url blogger korang ;) tanpa http:// tau !!

ok babai :) smoga ini membantu korng :)