Headline News

Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Home » Posts filed under html

TUTORIAL - CARA BUAT EMBED FLASH DI ENTRY BLOG

[-] potia casadelarossa on 14.12.12 | 3:48 AM

→ TUTORIAL - CARA BUAT EMBED FLASH DI ENTRY BLOG

Di atas permintaan encik Miko aka Kopi pasta ia iaitu tuan tanah kepada encikcopypaste.blogspot.com (mohon terjahan melulu ke blog beliau) beliau minta tutorial cara buat embeded flash di entry blog.
Sebenarnya banyak versi embeded kod ni, ianya memang mudah tetapi ada yang kurang support di sesetengah browser. Antara cara mudah untuk membuat embed flash di blog adalah seperti di bawah.:

<object type="application/x-shockwave-flash">
    <param name="movie" value="myclip.swf" />
    <param name="quality" value="high" />
</object>
Kod flash embed di atas  berfungsi dengan IE, Google chrome dan Safari dan dengan Firefox perlu ada kod <object> di permulaan. Sila rujuk kod di atas.

Untuk keputusan yang lebih baik kod embed perlu di sertai dengan kod OBJECT supaya berfungsi dengan baik di setiap jenis browser. Sila perhatikan kod di bawah :

<object type="application/x-shockwave-flash" data="myclip.swf">
    <param name="movie" value="myclip.swf" />
    <param name="quality" value="high" />
    <!-- Sandwich the embed tag inside the object tag -->
    <embed src="myclip.swf" quality="high" />
</object>

Untuk ringkasan jika embed kod yang ingin di ubah saiz kelebaran dan juga ketinggiannya terutama Object yang ingin di letakkan itu adalah jenis format video atau jenis file format Swf, setelah buat percubaan di blog menggunakan HTML anda dicadangkan menggunakan kod seperti di bawah :

<object type="application/x-shockwave-flash" data="myclip.swf"
    width="550" height="400">
    <param name="movie" value="myclip.swf" />
    <param name="quality" value="high" />
</object>
Kod yang terbaru dan telah di uji memang berfungsi dengan baik di chrome dan firefox seperti dibawah;


<p align="center">
<object type="application/x-shockwave-flash" data="myclip.swf" width="550" height="400">
<param name="movie" value="myclip.swf" />
<p style="font-size:60px"><a href="http://www.silenceblogz.com/2012/12/tutorial-cara-buat-embed-flash-di-entry.html" rel="nofollow">Check this help</a></p>
</object>
</p>

Penerangan;
550 = kelebaran saiz static entry.
400 = ketinggian yang anda mahukan.
myclip.swf = file atau url flash yang ingin di pasang mesti bermula dengan http://

 Demo flash video sila klik di sini
→ [Read More]
{ 11 Komen }
Posted by , Tags: , , , ,

Cara Membuat Menu Bar Drop Down Di Blog

[-] potia casadelarossa on 30.9.12 | 10:44 PM

→ Cara Membuat Menu Bar Drop Down Di Blog

Di atas permintaan ramai (ramailah konon..) Berikut adalah cara menbuat menu bar drop down yang mudah seperti contoh bergambar di bawah :
Sila perhatikan pada gambar di ruangan Blog Links, apabila anda halakan pointer mouse di menu tersebut secara automatik drop down akan keluar, seperti contoh tersebut saya letakkan nama-nama links sebagai "coming soon" sebab belum ada lagi links yang saya ingin masukkan di situ.

Cara Membuat Menu Bar Drop Down adalah seperti berikut: Masuk ke ruangan Template > Edit HTML > Proceed kemudian Expand Widget Templates.
Lepas tu cari kod ni dengan menekan (crtl + F serentak): ]]></b:skin>

Bila dan jumpa sila paste kan kod di bawah ini betul-betul di atas ko di atas kod ]]</b:skin>
Kod css nya seperti berikut :
 <!-- Menu Bar css silenceblogz.blogspot.com Start-->
.menuku{height:41px;background:url(http://3.bp.blogspot.com/-d-aYQ9Wn-bg/UDj-R3vNmeI/AAAAAAAAIhw/dC5tXMDtp-8/s1600/menuwrapper.png) repeat-x top;font:normal 12px Arial;line-height:normal;width:960px;text-transform:none;color:#f1f1f1;text-decoration:none;margin:0;padding:0;border-bottom: 3px solid #356aa1}
.menuku ul{margin:0;padding:0}
.menuku li{list-style:none;color:#FFF;float:left;display:inline;position:relative;margin:0;padding:0}
.menuku li a{display:block;background:0;background:url(http://2.bp.blogspot.com/-h_vz_AuEcQg/UDj-795v5fI/AAAAAAAAIh4/f4AiOVMtOm4/s1600/menuku+batas.png) no-repeat center right;color:#FFF;text-decoration:none;font:bold 14px Arial;text-shadow: -1px -1px 0 #254b71;outline:none;margin:0;padding:12px 13px}
.menuku li a:hover{background:#2a2a2a;text-shadow: -1px -1px 0 #000}
.menuku li ul{position:absolute;z-index:10;left:0;top:100%;height:30px;width:170px;display:none;margin:0;padding:0}
.menuku li ul a{background:#2a2a2a;border-left:none;font:12px Arial;border-right:none;border-top:1px solid #484848;border-bottom:1px solid #000;display:block;padding:6px 10px;text-shadow: -1px -1px 0 #000}
.menuku li ul a:hover{background:#484848;}
.menuku li ul li{float:none;display:block;width:auto}
.menuku li ul ul{top:0;left:100%}
.menuku li a:hover,.menuku ul li a:hover{color:#ccc}
<!-- Menu Bar css silenceblogz.blogspot.com End-->
Kemudian cari kod ni pula dengan menekan (crtl + F serentak): </body>
Bila dah jumpa kod sila gantikan (replace) dengan kod ini:
<script type="text/javascript">
$(function() {
    $(&#39;.menuku li&#39;).hover(function() {
        $(this).children(&#39;ul&#39;).filter(&#39;:not(:animated)&#39;).show(200);
    }, function() {
        $(this).children(&#39;ul&#39;).hide(400);
    });
});
</script>
</body>
Kemudian save.. kalau tiada error dan pergi ke Layout lakukan langkah yang biasa iaitu Add a Gadget > HTML/Javascript kemudian pastekan kod ini menggunakan HTML (bukan compose). Kodnya seperti di bawah:
<div class="menuku">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 1</a></li>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 2</a></li>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Lain-Lain Link </a>
<ul>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 2.1</a></li>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 1</a></li>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 2</a></li>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 3</a></li>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 4</a></li>
<li><a href="url-link-anda-mest-bermula-dgn-http://">Link 5</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/" target="_blank">Dashboard</a></li>
</ul>
</div>
Link-link tersebut anda edit masukkan link-link anda sendiri dan mesti bermula dengan http:// . Untuk Contoh menu bar drop down berdasarkan kod di atas ianya akan lelihatan seperti di bawah:
Nampak tak? cuba mouse pointer anda halakan di di Menu 1 atau Menu 2. Secara automatik dia akan drop down link-link yang berada di Menu 1 dan di Menu 2.

Anda masih boleh mengubah warna Menu bar drop down ini dengan menggunkan image background anda sendiri. apa yang perlu anda tukar seperti link image yang berwarna merah di atas. Jika terdapat kemusykilan sila tinggalkan pertanyaan anda di ruangan komen. Selamat mencuba!.
→ [Read More]
{ 9 Komen }
Posted by , Tags: , , ,

Cara Buat Border Style Di Blog

[-] potia casadelarossa

→ Cara Buat Border Style Di Blog

Berikut Tutorial ataupun cara buat border style yang menarik di blog ia menggunakan kod CSS (HTML) yang simple dan mudah di fahami. Lihat beberapa contoh Boder style seperti di bawah :

Penerangan ringkas mengenai border

Jenis-jenis boder: (Border Style)


border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

Definasi:
Boder-boder ini boleh di set kepada beberapa jenis boder mengikut kesukaan masing-masing.

a)dotted- Ini akan mewujudkan sempadan dengan garisan bertitik.
b)dashed- Ini akan mewujudkan sempadan dengan garis putus-putus.
c)solid- Ini akan mewujudkan sempadan dengan garis pepejal.
d)double- ini akan mewujudkan sempadan yang mengandungi garisan kembar
e)groove- Ini akan mewujudkan sempadan yang akan kelihatan seperti alur.
f)ridge- Ini akan mewujudkan sempadan yang akan kelihatan seperti rabung.
g)inset- Ini akan mewujudkan sempadan dengan garis mencari sisipan.
h)outset- Ini akan mewujudkan sempadan dengan garisan mencari permulaannya.

Contoh Boder dotted:
<div style="border-width: 2px; border-style: dotted; border-color: red; "> testing border style</div>

Hasilnya:

testing border style



Contoh Boder dashed:
<div style="border-width: 2px; border-style: dashed; border-color: red; "> testing border style</div>

Hasilnya:

testing border style



Contoh Border solid:
<div style="border-width: 2px; border-style: solid; border-color: red; "> testing border style</div>

Hasilnya:

testing border style



Contoh Border double:
<div style="border-width: 4px; border-style: double; border-color: red; "> testing border style</div>

Hasilnya:

testing border style



Contoh Border groove:
<div style="border-width: 4px; border-style: groove; border-color: red; "> testing border style</div>

Hasilnya:

testing border style



Contoh Border ridge:
<div style="border-width: 4px; border-style: ridge; border-color: red; "> testing border style</div>

Hasilnya:

testing border style



Contoh Border inset:
<div style="border-width: 4px; border-style: inset; border-color: red; "> testing border style</div>

Hasilnya:

testing border style



Contoh Border outset:
<div style="border-width: 4px; border-style: outset; border-color: red; "> testing border style</div>

Hasilnya:

testing border style

*Cuba lihat bagaimana saya membuat border dengan menggunakan jenis Boder Double. Kodnya Boder Double ini saya ubah sedikit mengikut kesukaan saya. Perhatikan kod asal dengan kod yang ubah.

Ini Kod Asal :

<div style="border-width: 4px; border-style: double; border-color: red; "> Hai Semua.. Selamat datang ke SilenceBlogz.. jangan lupa komen ok..</div>


Hasilnya :
Hai Semua.. Selamat datang ke SilenceBlogz.. jangan lupa komen ok..

Ini Kod Yang Telah Di Ubah :
<div style="border-width: 20px; border-style: double; border-color: green; "> Hai Semua.. Selamat datang ke SilenceBlogz.. jangan lupa komen ok..</div>


Dan Hasilnya :
Hai Semua.. Selamat datang ke SilenceBlogz.. jangan lupa komen ok..

Apa yang telah di ubah?
  1. Saiz daripada 4px kepada 20px
  2. Warna "red" kepada "green" ( sila rujuk HTML Color Code kalau tak tau nak pilih color )
Contoh terbaik jenis boder yang digunakan di blog iniseperti gambar di bawah:
Jenis Boder : SOLID ketebalan 1px
Nota: CSS - HTML memang menyeronokkan jika anda mempunyai kemahuan ingin memcuba di dalam pembikinan Website, Wapsite atau pun Blog. Selamat Mencuba.

*Nanti kita belajar macam mana nak buat tulisan macam ni pulak... hmmm... macam mana buat ni ye???

=> Contoh tulisan Menarik ni..ngaaaa~~
=>Wow ! tulisan ni pun Menarik jugak..
→ [Read More]
{ 8 Komen }
Posted by , Tags: , , ,

CARA BUAT MENU DROP DOWN DI BLOG

[-] potia casadelarossa

→ CARA BUAT MENU DROP DOWN DI BLOG

Cara buat menu drop down
Ada yang bertanyakan macam mana Cara nak buat Menu Drop Down di Blog ? di sini cara mudah untuk buat menu drop down di blog, sesuai untuk di pasang di sidebar blog yang mempunyai ruang yang agak terhad. 

Kod HTML Menu Drop Down adalah seperti di bawah :


<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=1 name=menu>
<option />Menu Drop Down Anda
<!-- tukar link kepada link yang anda inginkan -->
<option value="http://silenceblogz.blogspot.com/" />SilenceBlogz
<option value="http://www.google.com" />Google.com
<option value="http://sites.google.com" />My Site Google
<option value="http://info-minda.blogspot.com" />Blog Info Minda
</select></form>
  • *Apa yang perlu anda lakukan cuma tukar sahaja link yang bewarna merah kepada link yang anda inginkan.
  • *Boleh di pasang di sidebar blog.. Di dalam entry pon boleh jika nak buat review blog yang melibatkan link blog yang banyak.
  • *Nak letakkan link rakan blog anda banyak-banyak di sidebar pun boleh sebab menjimatkan ruang.
  • *Boleh juga anda letakkan link dalaman blog anda sebagai shortcut url.


 Demo Menu Drop Down adalah kelihatan seperti di bawah ini :

→ [Read More]
{ 8 Komen }
Posted by , Tags: , ,

Tutorial Buat Text Bergerak | Marquee Code

[-] potia casadelarossa on 25.9.12 | 6:25 AM

→ Tutorial Buat Text Bergerak | Marquee Code


Berikut adalah cara atau Tutorial untuk buat Text bergerak dengan menggunakan HTML Marquee Code. Mungkin ada yang kurang tahu dengan kod-kod ini sebelum ni. Disini terdapat beberapa jenis Marquee code yang mana anda boleh membuatkan Text di blog anda bergerak-gerak seperti contoh di bawah ini. Disini di sertakan jenis-jenis Marquee Code, Code Marquee dan Demo Marquee sekali. Sila ikuti Tutorial di bawah.
Jenis-jenis Marquee Sila Salin Kod Marquee Contoh atau Demo Marquee
Slide-in text: <marquee behavior="slide" direction="left">Text Slide-in text di sini</marquee> Text Slide-in text di sini
Continuous scrolling text: <marquee behavior="scroll" direction="left">Text Continuous scrolling anda di sini</marquee> Text Continuous scrolling anda di sini
Text bouncing back and forth: <marquee behavior="alternate">Text bouncing back and forth anda di sini</marquee> Text bouncing back and forth anda di sini
Text Scrolling Upwards: <marquee behavior="scroll" direction="up">Text upward scrolling adna di sini</marquee> Text upward scrolling adna di sini
Change the Scrolling Speed: <marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee> Slow scroll speed Medium scroll speed Fast scroll speed
Apa yang perlu anda buat cuma salin dan paste di ruang mana-mana yg anda inginkan di blog anda dan cuma perlu tukarkan TEXT mengikut apa yang anda inginkan. Menyusul nanti Cara membuat marquee Text dengan Backgruond color dan Marquee Image iaitu membuat Gambar bergerak.
→ [Read More]
{ 6 Komen }
Posted by , Tags: , ,