Tutorial : Cross Prosses Photo

Assalamualaikum :)

Alhamdulillah, akhirnya ada juga idea nak update tutorial ni. Tutorial ni bukan untuk blog tapi untuk edit-edit gambar. Sebenarnya mengedit gambar ni salah satu hobi Ajmal. Hobi yang tak berapa berbakat. Kat Tumblr Ajmal tengok banyak sangat gambar-gambar cute dan inspiring.

Jadi, oleh sebab Ajmal ni suka main tekan sana sini, Ajmal cuba godek-godek kat Photoscape macam mana nak edit gambar ala-ala inspiring. Hari tu Ajmal ada ikut tutorial macam mana nak edit gambar vintage guna Photoshop, tapi tahu-tahulah kan Photoshop tu complicated sangat. Buat-buat tak jadi. Jadi, guna photoscape lebih simple tapi hasil dia tak sehebat Photoshop.

Okay, jadi inilah hasilnya selepas Ajmal edit.

This is my little brother, Nukman.

Langkah 1:
-Buka Photoscape. Belum ada? Download kat sini.

Langkah 2:
-Tekan Editor.

Klik gambar untuk besarkan.

Langkah 3:
-Pilih mana-mana gambar yang anda suka.

Langkah 4:
-Dekat ruang mengedit tu tekan

Home > Filter > Film Effect > Cross Prosses

Klik gambar untuk besarkan.

-Dekat Cross Prosses tu boleh pilih sama ada Low/Middle/High. Ajmal sarankan pilih High

Langkah 5
-Ok, dah siap! Save je lah yer.

Tutorial : Follower Gadget (Classic Template / Blogskin)

Assalamualaikum :)

Alhamdulillah, ada juga idea nak buat tutorial hari ni. Dah sedia nak buat. Okey, tarik nafas panjang-panjang, daan lagi daaan lagii. Okey, lepasss. Peringatan, tutorial ni khas untuk pengguna classic template atau blogskins sahaja. Bagi pengguna template designer, nak baca pun boleh. Mana tahu, nanti berubah hati pulak nak tukar blog guna classic template.

Langkah 1
Layari laman web di bawah:
http://www.google.com/friendconnect/

Langkah 2
Tekan button "Add the member gadget".

Langkah 3
Setting warna kotak ikut kesukaan anda.

Klik untuk besarkan gambar

Langkah 4
Tekan button "Generate code"

Langkah 5
Copy kod yang tertera dan paste di sidebar atau mana-mana ruang yang anda suka.

Kalau dah siap, preview dulu tau. Kalau tak jadi, bagi tahu yerr. Jangan lupa comment tau!

Tutorial : Falling Snowball

Assalamualaikum :)

Ini request daripada AF IF.

Langkah 1

Dashboard - Design - Page Element - Add a Gadget

Langkah 2
Copy kod di bawah

<script>
//Tutorial By Jeritan Blog
var snowsrc="http://i13.servimg.com/u/f13/11/52/70/02/snowba10.png"
//how many snowflakes there will be (currently 12)
var no =40;
//How fast will the snow disappear (0 is never)
var hidesnowtime = 0;
//The height the snow will reach before it disappears ("windowheight" or "pageheight")
var snowdistance = "pageheight";
///////////////////////////////End of Settings///////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600;
if (ns6up)
{
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else
if (ie4up)
{
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i)
{
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ie4up||ns6up)
{
if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://rftactical.darkbb.com/index.htm\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
}
else
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6()
{
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i)
{
yp[i] += sty[i];
if (yp[i] > doc_height-50)
{
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow()
{
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}

if (ie4up||ns6up)
{
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>

Langkah 3
Tekan save jer ok.

P/S: Baru jer beberapa minit sampai dari Kelantan dah nak wat tutorial. Gatal kot tangan nih. Almaklumlah dah seminggu tak online. Hope you like it!

I love you, Danbo !

Tutorial : Background di Sidebar (Minima Templates)

Assalamualaikum :)
Apa khabar, reader? Lama Ajmal tak update Tutorial. Hehe, biasa la,, PMR candidates. Ok, background yang Ajmal nak ajar ni khas untuk Minima Template ja tau. Contohnya macam di bawah:

Mula-mula dekat Dashboard, tekan

Design - Edit HTML - Tick "Expand Widget Templates"

Kemudian cari

/* Sidebar Content

Kemudian copy code di bawah dan paste di bawah /* Sidebar Content tadi

.sidebar .widget {
background : #FBEFEF;
 -webkit-border-bottom-left-radius: 10px;
 -webkit-border-bottom-right-radius: 10px;
 -webkit-border-top-left-radius: 10px;
 -webkit-border-top-right-radius: 10px;
border-top: 3px dotted #F78181;
border-bottom: 3px dotted #F78181;
border-left: 3px solid #F78181;
border-right: 3px solid #F78181;
margin:0 -5px 1.5em -5px;
padding:7px 7px 7px 7px;
}

*Kalau nak tukar background tukarkan  #FBEFEF. Kod warna boleh cari kat Main Page Tutorial kat blog ni. Kalau nak yang pelbagai, cari kat sini. Kalau background tu nak guna gambar, highlight #FBEFEF dan gantikan dengan url(URL GAMBAR ANDA).
*Kalau nak tukar bentuk bucu border tu tukarkan 10px. Kalau korang tak minat dengan bucu bulat macam tu, korang hightlight

 -webkit-border-bottom-left-radius: 10px;
 -webkit-border-bottom-right-radius: 10px;
 -webkit-border-top-left-radius: 10px;
 -webkit-border-top-right-radius: 10px;

dan gantikan dengan jenis border yang korang suka. Jenis-jenis border boleh didapati di sini.

*Kalau nak tukar ketebalan line border, tukar 3px.

*Kalau nak tukar jenis line border, tukar dotted. Jenis-jenis line border boleh tengok kat Main Page Tutorial di blog ni.

*Kalau nak tukar warna line border tu, tukar #F78181.

Kemudian, preview dulu baru save ok! Selamat mencuba!

Tutorial : Background di Shoutbox

Assalamualaikum :)
Waa, pertama kali buat tutorial sebab ada orang request. Requested by Na Neina.

Design - Page Elements - Add HTML

Copy kod di bawah:

<div id="edited" style="width:100%; height:460px; background:url(URL GAMBAR) no-repeat left top; padding-top:-5px; padding-left:0px; position:relative" align="center">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe frameborder="0" title="Jeritanblog" height="460" src="SHOUTBOX ID" id="r" style="filter:alpha(opacity=50);opacity:0.55;-moz-opacity:0.55; display:block; " scrolling="auto" width="100%">
<a href="SHOUTBOX ID">View shoutbox</a>
</iframe>></div>

<!-- End ShoutMix -->

*Sila tukarkan tulisan-tulisan yang berwarna merah.
*Tengok dulu shoutbox korang saiz berapa baru edit gambar.

Tutorial : Tab Menu Menggunakan JQuery Lava-Lamp

Assalamualaikum :)
Alhamdulillah, harini Ajmal nak buat tutorial. Tahu tak Jquery Lava-Lamp? Wat2 sudah laa~ contohnya yang macam Ajmal guna utk buat tab menu kat atas tuu.


Langkah 1:

Design - Page Element - Add a Gadget - Add HTML

Langkah 2:
Copy kod di bawah

<style>
#container {
width: 100%;
margin: 0px 0px;
padding: 0px 0px 40px 10px;
}
ul, li {
margin: 0; padding: 0;
}
#blob {
border-right: 3px dotted #0059ec;
border-left: 3px dotted #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #FF0080;
background: -moz-linear-gradient(top, #FF0080, #F5A9D0);
background: -webkit-gradient(linear, left top, left bottom, from(#FF0080), to(#F5A9D0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 5px #011331;
-webkit-box-shadow: 2px 3px 5px #011331;
}
#lava-lamp {
background: #32312E;
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 15px;
padding: 8px 430px 10px 0px;
}
#lava-lamp li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 0px solid #4a4a4a;
}
#lava-lamp li a {
color: #FFFFFF;
text-shadow: 0 0px 1px #81807B;
position: relative;
z-index: 2;
float: left;
font-size: 18px;
font-family: CyberCaligraphic, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 0px 20px;
}
</style>
<div id="container">
<ul id="lava-lamp">
<li id="selected"><a href="http://ajmaltahani.blogspot.com">ツHomeツ</a></li>
<li><a href="http://ajmaltahani.blogspot.com/p/about-me_25.html">ツAbout Meツ</a></li>
<li><a href="http://ajmaltahani.blogspot.com/p/blog-page.html">ツExchange Linkツ</a></li>
<li><a href="http://ajmaltahani.blogspot.com/p/tutorial.html">ツTutorialツ</a></li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery.spasticNav.js"></script>
<script type="text/javascript">
$('#lava-lamp').spasticNav();
</script>

8.10.sion !

• Kalau nak tukar warna lampu yang "menghighlight" tab. Dia ada dua warna, satu atas, satu bawah. 

background: #FF0080;background: -moz-linear-gradient(top, #FF0080, #F5A9D0);background: -webkit-gradient(linear, left top, left bottom, from(#FF0080), to(#F5A9D0)); 

• Kalau tak nak guna background macam Ajmal, buang

#lava-lamp {
background: #32312E;
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 15px;
padding: 8px 430px 10px 0px;
}

• Kalau nak tukar tulisan, tukar kat

font-family: CyberCaligraphic, sans-serif;

• Tukarkan url berikut kepada url anda beserta tajuk anda sendiri

<ul id="lava-lamp"><li id="selected"><a href="http://ajmaltahani.blogspot.com">ツHomeツ</a></li><li><a href="http://ajmaltahani.blogspot.com/p/about-me_25.html">ツAbout Meツ</a></li><li><a href="http://ajmaltahani.blogspot.com/p/blog-page.html">ツExchange Linkツ</a></li><li><a href="http://ajmaltahani.blogspot.com/p/tutorial.html">ツTutorialツ</a></li></ul>

Tutorial : Scrolling Image

Assalamualaikum . . .
Alhamdulillah , ada jgk idea nk post ape yerr .
Hehe, tetiba jerr nk wt tutorial scrolling image .
Ok2 , sebelum melalut, kita terus pd tajuk .
Korang tau tak scrolling image ? ?
Ajmal pun xtau nk terangkan .
Tp, korang blh tngk contoh yg Ajmal dah letak pada sidebar .
Kalau korang xnmpk, ni contohnya,,



My Lovely Namstar


My Charismatic Leader


My Cute Cheek's Boy


My Powerful Dancer


That's my bias ok ?! Jgn cuba2 nk jatuh hati kt dy org tu !
First, korang ukur dulu korang punya lebar sidebar supaya gambar korang tak terpotong masa dy scroll .
And then, korang edit lew comey2 then upload di imageshack atau photobucket utk dptkan urlnya .
So, pergi

Dashboard -> Add a Gadget -> Page Element -> Add HTML

Then, copy paste code ni

<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="3" width="190" height="228"><br /> <a href="Link utk dibuka"><img src="url gambar" /></a></marquee><br />

P/S :
up : Arah gambar korang di scroll
3 : Kelajuan scroll
190 : Lebar korang punya kawasan gambar utk discroll / Lebar korang punya sidebar
228 : Tinggi korang punya kawasan gambar utk discroll
Link utk dibuka : Link apabila gambar itu ditekan
Url gambar : Url gambar yg korang suka
Kalau korang nak tambah gambar lagi, copy dari <a href="Link utk dibuka"><img src="url gambar" /></a> dan pastikan </marquee> berada di penghujung gambar yg terakhir sahaja.
Satu lg, kalau korang xnak letak Link untuk dibuka, just padam <a href="Link utk dibuka"> dan tinggalkan <img src="url gambar" /></a></marquee> sahaja .
Korang nmpk kn Ajmal ada tulis nama dy orang.
So, kalau nk tulis apa2 caption, tulis atas atau bawah <a href="Link utk dibuka"><img src="url gambar" /></a>
Senang kan ?!
Selamat mencuba !

Tutorial : Cara Pasang Image Opacity Effect

Assalamualaikum :)
Ahad yg indah . Haha, ok2, terus pada tajuk .
Hari ni Ajmal nk wt tutorial yg kedua iaitu, baca sndiri kt atas, malas nk tulis .
Image opacity effect adalah suatu kesan atau efek yang berlaku apabila cursor mouse diletakkan di atas sesuatu image yang terdapat pada bahagian post .
Ada banyak jenis effect sebenarnya, tp Ajmal nk tutor jenis apabila cursor mouse diletakkan di atas sesuatu image, gambar yg kabur menjadi terang .
Macam yg Ajmal guna skarang ni laa .
Nk tngk try move cursor korang kt gambar di bawah .


Dashboard -->Design --> Add A Gadget --> HTML/Javascript


Copy kod di bawah
<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>





credits:
http://maribinablog.blogspot.com/2010/12/cara-pasang-image-opacity-effect.html

Tutorial : Cara Membuat Favicon yg Boleh Diterima oleh Google Chrome

Assalamualaikum~

Korang mesti tau kan apa tu favicon .

Gambar yg atas tu laa .

Nmpk kan  ?

Ok, arini tetiba Ajmal nk test wt satu tutorial yg pling senang .

Saja nk test .

Ada sesetengah favicon yg xblh diterima oleh Google Chrome dan hanya blh diterima oleh Mozilla .

Sbb Chrome nk hosting yg sah .

So, first, pergi kat favicon.cc .

Klau korang nk design sniri pun blh .

Sapa yg malas, cri je kt laman web tu .

Lepas tuu pilih favicon yg korang suka .

Dia ada bg dua kod kn ?

So, korang amik kotak yg kedua .

Colur merah itu adalah data-data imej di dalam format base64 .
Korang tak perlu susah-susah nak upload favicon.ico dekat mana-mana hosting.

Simpan jer dalam HTML blogger templetes tuu.

Korang boleh ubah gambar format ape-ape pun kepada data base64 di laman web ini.

Tetapi kena ingat, converter ini cuma mengubah format kepada data base64 sahaja.

Coding untuk letak favicon kat belog korang rujuk balik coding yang kat atas tadi tuu.

Perhatikan pada code yang berwarna biru... sila tambah yer... Merah campur biru baru menjadi....

credits:

http://www.adamxis.com/2011/01/tutorial-advance-favicon-untuk-blogger.html