Slide Show Gambar [Gambar bergerak]

Hyee. Amrina Request untuk melakukan Slide Show gambar. Dia request kat Shoutmixt. Hehe. Credits ANIS DIYANASlide ni guna marquee dan akan berhenti jika cursor sentuh.
1. Dashbord > Design > Add A Gadget > HTML Java Script.2. Pastekan kod ini dalam ruangan HTML/JavaScript

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" align="center">

<img src="URL GAMBAR" height="200" width="190" />

<img src="URL GAMBAR" height="200" width="190" />

<img src="URL GAMBAR" height="200" width="190" />

</marquee>

• Tukarkan URL GAMBAR kepada gambar korang.
• Dan nombor tu untuk kebesaran gambar korang. 

Kalau gambar yang korang snap tu, banyak sangat, Tambah kod ini.

<img src="URL GAMBAR" height="200" width="190" />

p/s : Komen jika tak nak dikacau hantu malam Jumaat. :)

UPDATE!

Okay, ramai tanya "Mana Ambik URL gambar? Korang boleh tengok tutorial ni. TEKAN

Edit Template SIMPLE. [Part 2]

Hola! Ingat tak semalam Kihah buat Tuto Edit Simple Template yang Part 1 punya. Ni Sambungannya. Kihah nak buat cepat-cepat. Nanti, tak lah tertangguh. Acc, Kihah baru balik dari Tusyen kat sekolah. Haha.
Cara Nak Buang Benda Warna Putih Kat HeaderTuto ni, Kihah pernah buat. Tengok sini. Kita buat Sekali lagi :D

SEBELUM. Tengok kat Header.

1.Dashbord > Design > Edit HTML2. Find this kod /* Mobile3. Dah jumpa? Pastekan kod ini atas kod  /* Mobile tadi.

.header-outer, .content-inner { background-color: transparent; }

.main-outer, .tabs-outer { background-color: $(content.background.color);}

#Kalau tak jadi, Copy yang ni pulak.

 .tabs-inner .widget ul { margin: 0px -15px;}

.content-inner{padding: 0px;}

4. Preview, and SAVE. Ni Hasilnya:

Cara nak buat Header Bersambung Dengan Blog

Kalau nak buat, mesti ada Gimp dengan Photoscape. Hee. First, Buka Gimp

Tekan CTRL+N serentak. Keluarla kotak automatik.

Width untuk Denim template ialah 761 ( Melainkan korang dah ubah ) So tukarkan Width jadi 761. Height boleh tukar ikut suka hati. Jangan tekan OK lagi! Korang tekan simbol + sebelah  Advanced Options dulu. Nanti keluar macam ni : 

Kan ada bahagian Fill with: tu kan? Sebelah dia pulak Background color kan? Tekan arrow kat situ pastu keluar drop down menu. Pilih Transparency. Then tekan OK. Nanti keluar camni :

Jeng jeng jeng. Sekarang kat bahagian toolbox tu, pilih button kotak then bawah tu pilih rounded corners. 

Yang kat radius kat bawah rounded edges tu ubah jadi 20 - 60 camtu. jangan banyak sangat.

Sekarang korang bawak mouse korang kat bakal header korang punya hujung. Tarik dia sampai memenuhi bahagian bawah header korang. kalau terkeluar pun takpe. nanti dia jadi dashed ( - - - - - ) macam ni : 

dashed tu bergerak. sbb tu tk nmpk sgt kay.

Sekarang, tekan Brush tool pulak. tukar kan color jadi warna putih. pastu just color kan dekat bakal header korang tuu.

Tengok gambar .

Kalau time nak warna kan tu, warna kan je cacai barai. dia takkan ganggu bahagian luar sbb td korg dah highlight hujung header korg tu :D

Ni baru siap dia punya bahagian untuk sambungkan pada blog T_T hehe

headeruntuktesterblog.PNG

Skrg untuk edit di photoscape pula. Savekan bakal header korang tadi. Savekan jadi .PNG file tau. contohnya :  headersaya.PNG

Bila tekan Save , nanti keluar kotak mcm ni :

bila keluar kotak ni, tick ikut gmbr di atas ok :D Tick  Save Resolution dan Save Creation Time SAHAJA.

Sekarang bukak bakal header korang dekat Photoscape.

Nanti bila bukak nampak semua putih kan? Jgn risau! sbnrnya header korang still transparent. Cuma dia tak tunjuk transparency je.

DIINGATKAN BAHAWA VIEWER DIA MMG CMTU. nmpk semua putih tp ekcuali dia transparent. Korang edit-2 lah & letak gmbr semua tu *Doodle tu saya yang buat okay!*. Pastu Save jadi .PNG file. takpun korang tekan butang Save terus. takyah tekan Save As. Kalau korang tak caye dia transparent, cuba bukak dekat folder. Anyway, upload la ke blog korang. 

Tengoklah blog anda. =) Cantik tak? Jadilah macam ni

Kalau dia tak sama dengan Main Blog, pergi Dashbord > Design > Template Designer > Adjust Width. Adjust sampai boleh ok. :D

Bye.

Edit Template SIMPLE. [Part 1]

Salam. [: Masa Kihah berfacebook,  Syiqin tanya Kihah macam mana nak Edit Template Simple.Sebenarnya, Senang je \Ceeehhh! Perasan budak nih. Cepuk kang :p/ Ni tutorial Kihah sendiri kayh. So,

CREDIT JIKA GUNA TUTO INI. 

Firstly, Korang kena Tukar kepada Template Simple Dulu.
Dashbord > Design > Template Designer 
Pergi Templates, Choose Simple. Ambik yang warna Putih tuh. Kat HUJUNG sekali.

Cara Nak Letak Background
1. Dashbord > Design > Template Designer > Background
2. Upload gambar kat situ.

3. Dah? Save Template.

If korang 'berdegil', tak nak guna yang tu, Guna yang kod punya . Boleh rujuk SINI. Or tengok kat bawah ni :p

1- Korang buka design->edit html 

2. Cari kod dibawah ini. Nak senang tekan CTRL + F ( Serentak Yer ) .

body {

3.Copy dibawah, code Pastekan Dibawah  body { tadi. 

background-image:url(url image anda); 

repeat;

} 

4- url image tu, gantikan dengan URL image atau background yang anda suka.. Boleh cari di Photobucked atau Google

Nah. Free. Credit to Jaja [Stripe] And Google

http://i863.photobucket.com/albums/ab195/shz97/bg/pinkyred.png

http://i863.photobucket.com/albums/ab195/shz97/bg/yellow.png

 http://i863.photobucket.com/albums/ab195/shz97/bg/purple2.png 

http://t1.gstatic.com/images?q=tbn:ANd9GcTjTZ7HpVtAGIfDGS3MX5WpdfHCiKVmhm50EPYGqLyGrbqC6tvZ8w

http://t0.gstatic.com/images?q=tbn:ANd9GcSWs4V3T6N6NBvXgeyCJttrf1ch2xrAMln2PJzf5JgQnovj1hWY

Okaay. That's all. Nanti, Kihah Update Part 2. Pulak. Jangan Risau! :D CREDIT JIKA GUNA TUTO INI. 

>>PART 2<<

Tutorial : Buat gambar bergerak

Hii. Kali ni nak buat Tuto lagi. This tuto request from Ieqa.

Korang tahu tak tuto ni nak buat cam ne. Tengok gambar ini.

Abaikan saja muka Kihah. Time tuh Elektrik tak ddaa. Boring =.- Buka lah Lappy. :DTutorial ini guna PHOTOSCAPE. So, sesiapa yang TAK ADA software Photoscape,>>DOWNLOAD SINI.<<

Cara nak buat Gambar Bergerak.
Firstly, Buka Photoscape.

Second, Pegi kat bahagian Animated GIF. Tengok gambar ini.

2. Tekan Add. ambik gambar korang yang korang tangkap guna kamera Laptop korang.

3. Tukar Masa, Kalausemakin sikit, Gambar tu akan bergerak laju. Dan sebaliknya.

4. Save.

Cara nak letak gambar Dalam Blog.

1. Pergi account Photobucket.. Upload gambar. 

2. And  then, copy dia punya HTML codes.

Copy code dalam kotak uh. :D

3. Dasdbord > Design > Add A Gadget > HTML/JavaScript

4. Pastekan kod kat dalam ruangan tuh. And Then, tulis lah ape-ape pun dibawah kod tuh :D

5. SAVE..

Kan Dah cakap, senang macam makan kacang :p Comment jika tak paham.

Tuto : Transparent YouTube

Pssstt! Tu beg tangan Kihah  :p

Ada la seorang blogger ni \dah lupa URL BLOG/ . Dia ask, macam mana nak buat Transparent YouTube Player.

Kali ni Kihah nak buat yang Transparent. Korang ingat? Ada Kihah buat yang warna Pink Punya.

>TEKAN<

1. Go YouTube. Search lagu Pilihan.2. Bawah Video, ada butang SHARE. Tekan butang tu.3. Done? Tekan pulak Butang Embed.4. Tick Use Old Embedkod SHJ. Copy Kod tu.5. Masa untuk edit.EXAMPLE CODE

<object width="560" height="349"><param name="movie" value="http://www.youtube.com/v/8v_4O44sfjM?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/8v_4O44sfjM?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="560" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object>

6. Delete yang warna Merah tuh. Dan gantikan dengan:

&color1=0xffffff&color2=0xffffff

7. Dan akan jadi macam nih

<object width="560" height="349"><param name="movie" value="http://www.youtube.com/v/8v_4O44sfjM?&color1=0xffffff&color2=0xffffff"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embedsrc="http://www.youtube.com/v/8v_4O44sfjM?&color1=0xffffff&color2=0xffffff" type="application/x-shockwave-flash" width="560" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object>

8. Savee!

HAHA. Senang tak? :p

Credit

http://schadayantiofficial.blogspot.com/2011/07/transparent-youtube-player.html

Tuto : Open New Tab When Cursor Click the link

Comel tak kucing Kihah? ✿
Hye. Hari ni, Kihah nak buat tuto Open New Tab When Cursor Click the link. Paham tak? Tutorial ni, Bila cursor tekan link, Automatik, dia buka New Tab. :D So, kepada sesiapa yang blog dia tu tak boleh right click, Boleh la guna tuto ini :D
1. DAshbord > Design > Add A Gadget > HTML JavaScript2. Copy [CTRL+C serentak] kod kat bawah ni, dan pastekan [CTRL+V serentak] di dalam ruangan HTML/JavaScript tadi tu.

<!-- 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. Save. ◕‿◕ 
Ok. Sekarang, korang tekan la link-link kat blog karang tu. Theee :D Wa'alaikumussalam ◕‿◕ 

Scroll Top Button

Hari ni nak buat tuto Scroll Top Button. Top Button ni cangginh sikit sebab dia lambat naik AKA ianya scroll sendri bila tekan. Kihah suka pakai :D
1. Dashbord > Design > Edit HTML2. CTRL + F search kod

</body>

3. Copy kod kat bawah ni. Kemudian, pastekan dibawah kod </body> tadi :D

<a href='#' id='toTop'><img src='URL IMAGE TOP BUTTON?t=1292762029' style='border:0;'/></a>

CONTOH:

4. Ehhhh. If Previeww, Memang la tak naik lagi. Korang CTRL + F search kod ini pulak

 ]]></b:skin>

5. Pastekan kod ini DIATAS/SEBELUM  ]]></b:skin>.

/* 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; }

• Kalau gamabr korang terpotong/tak nampak semua, Tukarkan 100px tu ok?

6. This is LAST STEP. CTRL+F Search kod ini pulak

</head>

7.Pastekan kod ini diatas kod </head> tadi

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>

/*----------------------- 

* jQuery Plugin: Scroll to Top 

* by Craig Wilson, Ph.Creative (http://www.ph-creative.com) 

* Bring to you by Zen from http://zenplate.blogspot.com 

* Copyright (c) 2009 Ph.Creative Ltd. 

* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling. 

* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx 

* Do not delete these infomation 

* Version: 1.0, 12/03/2009 

-----------------------*/ 

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}); 

$(function() { 

$("#toTop").scrollToTop(); 

}); 

</script> 

8. Preview dulu, Kemudian. SAVE TEMPLATE

Senang kan? :p Ni ada sedikit FREEBIES TOP BUTTON from Kihah :D

http://i1227.photobucket.com/albums/ee434/Faqihah_Husni/TOPBUTTON1.png

http://i1227.photobucket.com/albums/ee434/Faqihah_Husni/TOPBUTTON3.png

 http://i1227.photobucket.com/albums/ee434/Faqihah_Husni/TOPBUTTON4png.png

http://i1227.photobucket.com/albums/ee434/Faqihah_Husni/TOPBUTTON2.png 

Credit

ANIS DIYANA

Comment juka guna ^^