Rabu, 27 Juli 2011

0 Cara Membuat Tab Menu jQuery


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!


Screenshot dari tutorial ini seperti yang terlihat di atas.
Nah, untuk membuatnya, langkahnya sebagai berikut :


1.   Masuk ke Edit HTML.

2.   Cari kode </head>

3.   Copy kode yang ada di bawah ini
      dan paste di atas kode </head>,
      lalu simpan template anda.

<style type="text/css" media="screen">
<!--
BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; }
H1 { margin-bottom: 2px; font-family: Garamond, "Times New Roman", Times, Serif;}
DIV.container { margin: auto; width: 90%; margin-bottom: 10px;}
TEXTAREA { width: 80%;}
FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }
LEGEND { color: #ccc; font-size: 120%; }
INPUT, TEXTAREA { font-family: Arial, verdana; font-size: 125%; padding: 7px; border: 1px solid #999; }
LABEL { display: block; margin-top: 10px; }
IMG { margin: 5px; }

UL.tabNavigation {
list-style: none;
margin: 0;
padding: 0;
}

UL.tabNavigation LI {
display: inline;
}

UL.tabNavigation LI A {
padding: 3px 5px;
background-color: #ccc;
color: #000;
text-decoration: none;
}

UL.tabNavigation LI A.selected,
UL.tabNavigation LI A:hover {
background-color: #333;
color: #fff;
padding-top: 7px;
}

UL.tabNavigation LI A:focus {
outline: 0;
}

div.tabs > div {
padding: 5px;
margin-top: 3px;
border: 5px solid #333;
}

div.tabs > div h2 {
margin-top: 0;
}

#first {
background-color: #f00;
}

#second {
background-color: #0f0;
}

#third {
background-color: #00f;
}

.waste {
min-height: 1000px;
}
-->
</style>

<script src="http://jqueryfordesigners.com/wp-content/themes/j4d/static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();

$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>

KETERANGAN :

Gantilah ketiga warna background tabnya
pada kode #first {, #second { dan #third {
dengan warna yang Anda sukai.

4.   Rancangan -> Tambah Gadget
      dan pilihlah HTML/JavaScript

5.   Copy kode berikut lalu pastekan
      ke dalam kontennya :

<div class="tabs">
<ul class="tabNavigation">
<li><a href="#first">First</a></li>
<li><a href="#second">Second</a></li>
<li><a href="#third">Third</a></li>
</ul>

<div id="first">
<p>Kalimat 1 Anda letakkanlah di sini</p>
</div>

<div id="second">
<p>Kalimat 2 Anda letakkanlah di sini</p>
</div>

<div id="third">
<p>Kalimat 3 Anda letakkanlah di sini</p>
</div>
</div>
<div class="waste"></div>

KETERANGAN :

Masukkan kalimat apa saja yang Anda inginkan
pada kode Kalimat 1-3 Anda letakkanlah di sini.

Selamat mencoba, good luck!

Minggu, 24 Juli 2011

0 Cara Membuat Efek Zoom Dengan CSS


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Efek Zoom yang satu ini berbasis CSS yang memung-
kinkan efektifitas dalam kerjanya sehingga dapat
menghemat banyak waktu Anda karena hanya
menggunakan 1 (satu) gambar dalam proses pem-
buatannya. Sebuah teks keterangan untuk gambar
juga dapat Anda ditampilkan pada bagian bawah
gambar yang diperbesarnya. Keren, bukan ?!

Sebagai contohnya, Coba letakkan cursor Anda
pada gambar yang bertuliskan nama blog ini,
yang letaknya tepat di atas judul posting ini atau
di bawah header sisi sebelah kiri.

Kalau Anda sudah melihat contoh tersebut,
sekarang kita menuju ke tutorial cara
pembuatannya, yaitu seperti berikut ini :


1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan dalam kontennya
      kode yang berikut ini terus simpan.

<div class="ienlarger"><a href="URL nama blog Anda/"><img src="URL gambar Anda di sini" alt="thumb" class="resize_thumb" /><span>
<img src="URL gambar Anda di sini" alt="large" /><br />
Kalimat keterangan gambar</span></a></div>

KETERANGAN :

Masukkan URL nama blog dan URL gambar Anda.

Tuliskan juga keterangan gambarnya dengan
kalimat yang Anda inginkan.

1.   Kemudian masuk ke Edit HTML.

2.   Carilah tag </head>

3.   Copy kode yang ada di bawah ini dan
      paste-lah di atas tag </head> ini,
      lalu simpan template anda.

<style type="text/css">

.ienlarger {
float: left;
clear: none; /* set to left or right if needed */
padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}

.ienlarger a {
display:block;
text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.ienlarger a:hover{ /* don't move this positioning to normal state */
position:relative;
}

.ienlarger span img {
border: 2px solid #FFFFFF; /* adds a border around the image */
margin-bottom: 8px; /* pushes the text down from the image */
}

.ienlarger a span { /* this is for the large image and the caption */
position: absolute;
display:none;
color: #FFF; /* caption text colour */
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px; /* caption text size */
text-align: center;
background-color: #FF0000;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}

.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.ienlarger a:hover span {
display:block;
top: 30px; /* means the pop-up's top is 50px away from thumb's top */
left: 70px; /* means the pop-up's left is 90px far from the thumb's left */
z-index: 100;

/* If you want the pop-up open to the left of thumb, remove the left: 70px; and add
right: 70px; This would mean the right side of the pop-up is 70px far from the right side of thumb */

/* If you want the pop-up open above the thumb, remove the top: 50px; and add
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */

/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}

.resize_thumb {
width: 256px; /* enter desired thumb width here */
height : auto;
}

/* smart image enlarger ends here */

</style>

KETERANGAN :

Gantilah warna border & backgroundnya
sesuai dengan warna yang Anda kehendaki.

Sesuaikan juga ukuran width: dan height :-nya
dengan gambar yang Anda masukkan.

Selamat mencoba, good luck!

0 Cara Membuat Efek Hover Image Di Depan Link


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Pernahkah Anda melihat ketika cursor menyorot
sebuah link maka di depan link tersebut muncul
gambar ? Kalau belum, cobalah cursor Anda sorot-
kan ke deretan link-link yang ada di bawah ini :


Membuat Garis Berdansa di Blog

Aneka Macam Kalender Untuk Blog

Membuat Kalender Yang Keren


Anda bisa coba juga pada deretan link-link yang ini :


Cara Membuat Gambar Bisa Diputar

Membuat Gambar Bisa Diputar #2

Cara Membuat Floating Slide Menu


Demikianlah maksud dari tutorial yang " dibagikan "
kali ini. Untuk membuatnya, Anda ikuti saja
langkah yang seperti berikut ini :


1.   Masuk ke Edit HTML.

2.   Cari tag </head>

3.   Copy kode yang ada di bawah ini dan
      paste-kan di atas tag </head> ini,
      lalu simpan template anda.

<style type="text/css">

.bulletimagestyle{ /*Absolute position bullet image. No need to modify*/
position: absolute;
left: -200px;
}

</style>

<script type="text/javascript">

/***********************************************
* Bullet Link script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* User script http://www.syamsudinnamaku.blogspot.com/
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Define your bullet image(s) via arbitrary variables, where bulletimg=["imagepath", imagewidth, offsetxfromroot, offsetyfromroot]
var bulletimg1=["https://lh5.googleusercontent.com/-4Z91c1zuZQU/TibFhRphsuI/AAAAAAAABjE/lNmHnieXCS8/greenup.gif", 14, 2, 0]
var bulletimg2=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyIgBKc9hqhohFLr1cXBhyIq5FxPEHR6nkuTxT1yO1Jwty_pQFQCrIu_6xtdqHzQyOeIeD8GfLVqCYOJVfQvQuSP3TyCr94KcKYbChzD-qLSAJ0KxcvjuW19WJGSxuzU_vkYgHLv2eCMJr/", 17, 4, 0]

////Stop editting here/////////////////////
var classnameRE=/(^|\s+)ddbullet($|\s+)/i //regular expression to screen for classname within element

function caloffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function displaybullet(linkobj){
var reltovar=window[linkobj.getAttribute("rel")]
bulletobj.setAttribute("src", reltovar[0])
bulletobj.style.left=caloffset(linkobj, "left")-reltovar[1]-reltovar[2]+"px"
bulletobj.style.top=caloffset(linkobj, "top")-reltovar[3]+"px"
bulletobj.style.visibility="visible"
}

function modifylinks(){
bulletobj=document.createElement("img")
bulletobj.setAttribute("id", "bulletimage")
bulletobj.className="bulletimagestyle"
document.body.appendChild(bulletobj)
for (i=0; i<document.links.length; i++){
if (typeof document.links[i].className=="string" && document.links[i].className.search(classnameRE)!=-1){
document.links[i].onmouseover=function(){displaybullet(this)}
document.links[i].onmouseout=function(){bulletobj.style.visibility="hidden"}
}
}
}

if (window.addEventListener)
window.addEventListener("load", modifylinks, false)
else if (window.attachEvent)
window.attachEvent("onload", modifylinks)
else if (document.getElementById || document.all)
window.onload=modifylinks

</script>

<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/ddincludes/mainstyle.css" />

KETERANGAN :

Ganti gambar imagenya dengan milik Anda pada
kode var bulletimg1= dan var bulletimg2=

4.   Untuk menimbulkan gambarnya pada link Anda,
      sisipkan kode class="ddbullet" rel="bulletimg1"
      atau kode class="oldclass ddbullet" rel="bulletimg2"
      diantara link-link yang akan Anda beri efek ini.

Pemakaian untuk contoh yang pertama adalah :

<a href='URL Anda di sini' class="ddbullet" rel="bulletimg1">Keterangan Link</a>

Dan pemakaian untuk contoh yang kedua adalah :

<a href='URL Anda di sini' class="oldclass ddbullet" rel="bulletimg2">Keterangan Link</a>

Selamat mencoba, good luck!

0 Cara Membuat Ikon Total Komentar


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!


Anda lihat gambar ikon yang berada di akhir judul
posting pada screenshots di atas ? Itulah tutorial yang
dimaksud kali ini. Fungsinya untuk mengetahui seberapa
banyak jumlah komentar yang mengomentari suatu link
yang ada pada blog kita.

Hanya 1 (satu) langkah yang Anda butuhkan untuk
membuat yang seperti itu, yaitu :


1.   Masuk ke Edit HTML

2.   Centang kotak

3.   Carilah kode seperti berikut :

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

4.   Copy kode yang ada di bawah ini
      kemudian letakkan di bawah kode no. 2 tadi.

   <b:if cond='data:blog.pageType != &quot;item&quot;'>
     <img border='0' src='https://lh6.googleusercontent.com/-xb_rb-u_hMI/Tiv2g2c_8nI/AAAAAAAABlw/VnDywtA0508/icon-comments.png'/>
   <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a>
</b:if>

Formatnya akan seperti ini :

<a expr:href='data:post.url'><data:post.title/></a>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
     <img border='0' src='https://lh6.googleusercontent.com/-xb_rb-u_hMI/Tiv2g2c_8nI/AAAAAAAABlw/VnDywtA0508/icon-comments.png'/>
   <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a>
</b:if>

5.   Pratinjaulah terlebih dahulu
      lalu simpan template Anda.

Selamat mencoba, good luck!

0 Cara Membuat Efek Hover Background Pada Link Seri 1


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!


Animasi Superman di Pojok Blog

Memasang Animasi Superman Di Pojok 2

Memasang Efek Keren Superman Terbang

Cara Mudah Membuat Label Tag Cloud

Ketika sebuah link disorot atau diletakkan cursor
di atasnya, maka link tersebut akan memunculkan
background, yang warna atau gambarnya bisa kita
ubah dan disesuaikan dengan selera kita masing-
masing seperti yang Anda lihat pada contoh di atas.

Ikutilah langkah berikut bila Anda ingin membuatnya.


1.   Masuk ke Edit HTML.

2.   Carilah kode </head>

3.   Letakkanlah di atas kode </head>,
      kode yang ada di bawah ini :

UNTUK BERBACKGROUND WARNA =

<style type="text/css">

a:hover {
text-decoration: none;
background-color: #FFFF00;
background-position: 100%;
}

</style>

UNTUK BERBACKGROUND GAMBAR =

<style type="text/css">

a:hover {
text-decoration: none;
background: url(URL gambar Anda di sini) repeat;
background-position: 100%;
}

</style>

KETERANGAN :

Gantilah warna backgroundnya dengan warna
apa saja yang Anda inginkan.

Masukkan URL gambar Anda pada kode
URL gambar Anda di sini.

So pasti Anda suka, good luck!

Sabtu, 23 Juli 2011

0 Cara Membuat Efek Berganti Warna Background Plus Hover Pada Link


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Seperti yang telah Saya katakan sebelumnya, bahwa
link yang ada di blog kita bisa kita berikan berbagai
macam efek. Salah salahnya lagi yang seperti
Anda lihat di bawah ini :


Belajar Membuat Gambar GIF Seri 1

Belajar Membuat Gambar GIF Seri 2

Belajar Membuat Gambar GIF Seri 3

Background pada link di atas berkedap-kedip dan
berganti warna dengan sendiribya. Dan bila cursor
Anda diletakkan tepat di atas link tersebut, maka
background pada link tersebut akan berganti lagi
warnanya. Nah, bila Anda tertarik ingin membuat
yang seperti itu, caranya adalah seperti ini :


1.   Masuk ke Edit HTML.

2.   Carilah kode </head>

3.   Letakkanlah di atas kode </head>,
      kode yang berikut ini kemudian
      simpanlah template Anda.

<script type="text/javascript" src="http://h1.ripway.com/syamsudin/flashinglinks.js"></script>

<style type="text/css">

a:link {
text-decoration: none;
background-color: #00FF00;
background-position: 100%;
}

a:hover {
text-decoration: none;
background-color: #FF0000;
background-position: 100%;
}

</style>

KETERANGAN :

Ubahlah warna background-color:
pada a:link dan a:hover
sesuai warna yang Anda inginkan.

4.   Untuk penerapan pada linknya.
      Sisipkan kode rel="flashbg[.....................]"
      diantara kode link Anda.

5.   Isilah titik-titik yang terdapat pada kode
      di atas dengan warna yang Anda inginkan.

Contohnya seperti ini :

<a href='URL link Anda' rel="flashbg[yellow]">Keterangan link</a>

KETERANGAN :

Gantilah warna backgroundnya pada kode [yellow]
dengan warna apa saja yang Anda kehendaki.

Warna setiap link-nya boleh saja berbeda satu dengan
lainnya, seperti yang Anda lihat pada contoh di atas.

Selamat mencoba, good luck!

0 Memasang Jadwal Waktu Sholat Agustus 2011


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Bulan Agustus Tahun 2011 ini, Insya Allah bertepatan
dengan pelaksanaan Ibadah Puasa Ramadhan yang
merupakan salah satu ibadah yang wajib dikerjakan
oleh setiap orang muslim, baik lelaki atau perempuan.
Untuk mengingatkan kita semua akan waktu datang-
nya Sholat, maka widget ini tidak ada salahnya bila
dipasang pada blog yang kita miliki.




Jadwal Waktu Sholat Bulan Agustus 2011
Date Day Fajr Sunrise Dhuhr Asr Maghrib Isya
1 Mon 4:52 6:03 12:00 3:22 5:55 7:03
2 Tue 4:52 6:03 12:00 3:22 5:55 7:03
3 Wed 4:52 6:03 11:59 3:21 5:55 7:03
4 Thu 4:51 6:03 11:59 3:21 5:55 7:03
5 Fri 4:51 6:02 11:59 3:21 5:55 7:03
6 Sat 4:51 6:02 11:59 3:21 5:55 7:03
7 Sun 4:51 6:02 11:59 3:21 5:55 7:03
8 Mon 4:51 6:02 11:59 3:21 5:55 7:03
9 Tue 4:51 6:01 11:59 3:20 5:55 7:03
10 Wed 4:51 6:01 11:59 3:20 5:55 7:03
11 Thu 4:50 6:01 11:59 3:20 5:55 7:02
12 Fri 4:50 6:01 11:58 3:20 5:55 7:02
13 Sat 4:50 6:00 11:58 3:20 5:55 7:02
14 Sun 4:50 6:00 11:58 3:19 5:55 7:02
15 Mon 4:50 6:00 11:58 3:19 5:55 7:02
16 Tue 4:49 5:59 11:58 3:19 5:55 7:02
17 Wed 4:49 5:59 11:57 3:18 5:55 7:02
18 Thu 4:49 5:59 11:57 3:18 5:55 7:01
19 Fri 4:49 5:58 11:57 3:18 5:55 7:01
20 Sat 4:48 5:58 11:57 3:17 5:55 7:01
21 Sun 4:48 5:58 11:56 3:17 5:55 7:01
22 Mon 4:48 5:57 11:56 3:17 5:54 7:01
23 Tue 4:47 5:57 11:56 3:16 5:54 7:01
24 Wed 4:47 5:56 11:56 3:16 5:54 7:00
25 Thu 4:47 5:56 11:55 3:15 5:54 7:00
26 Fri 4:46 5:55 11:55 3:15 5:54 7:00
27 Sat 4:46 5:55 11:55 3:14 5:54 7:00
28 Sun 4:46 5:55 11:55 3:14 5:54 7:00
29 Mon 4:45 5:54 11:54 3:13 5:54 6:59
30 Tue 4:45 5:54 11:54 3:13 5:53 6:59
31 Wed 4:44 5:53 11:54 3:12 5:53 6:59

Special thanks : Islamicfinde

Copy saja kode yang ada di bawah ini dan masukkan
ke dalam postingan ataupun ke dalam konten HTML/
JavaScript blog Anda kemudian simpan.


<style type="text/css">
.IslamicData { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #1B5A41; text-decoration: none}
.IslamicHeader { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #FFF; text-decoration: none;}
</style>
<table bgcolor="#1b5a41" cellpadding="1" cellspacing="1" style="width: 366px;"><tbody>
<tr> <td align="center" class="IslamicHeader" colspan="9"><b>
Jadwal Waktu Sholat Bulan Agustus 2011</b> </td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData" style="color: red;">Date</td> <td align="center" bgcolor="#ffffff" class="IslamicData" style="color: red;">Day</td> <td align="center" bgcolor="#ffffff" class="IslamicData" style="color: blue;">Fajr</td> <td align="center" bgcolor="#ffffff" class="IslamicData" style="color: blue;">Sunrise</td> <td align="center" bgcolor="#ffffff" class="IslamicData" style="color: blue;">Dhuhr</td> <td align="center" bgcolor="#ffffff" class="IslamicData" style="color: blue;">Asr</td> <td align="center" bgcolor="#ffffff" class="IslamicData" style="color: blue;">Maghrib</td> <td align="center" bgcolor="#ffffff" class="IslamicData" style="color: blue;">Isya</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">1</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Mon</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:52</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">6:03</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">12:00</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:22</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">7:03</td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData">2</td> <td align="center" bgcolor="#ffffff" class="IslamicData">Tue</td> <td align="center" bgcolor="#ffffff" class="IslamicData">4:52</td> <td align="center" bgcolor="#ffffff" class="IslamicData">6:03</td> <td align="center" bgcolor="#ffffff" class="IslamicData">12:00</td> <td align="center" bgcolor="#ffffff" class="IslamicData">3:22</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffff" class="IslamicData">7:03</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">3</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Wed</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:52</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">6:03</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">11:59</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:21</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">7:03</td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData">4</td> <td align="center" bgcolor="#ffffff" class="IslamicData">Thu</td> <td align="center" bgcolor="#ffffff" class="IslamicData">4:51</td> <td align="center" bgcolor="#ffffff" class="IslamicData">6:03</td> <td align="center" bgcolor="#ffffff" class="IslamicData">11:59</td> <td align="center" bgcolor="#ffffff" class="IslamicData">3:21</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffff" class="IslamicData">7:03</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">5</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Fri</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:51</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">6:02</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">11:59</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:21</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">7:03</td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData">6</td> <td align="center" bgcolor="#ffffff" class="IslamicData">Sat</td> <td align="center" bgcolor="#ffffff" class="IslamicData">4:51</td> <td align="center" bgcolor="#ffffff" class="IslamicData">6:02</td> <td align="center" bgcolor="#ffffff" class="IslamicData">11:59</td> <td align="center" bgcolor="#ffffff" class="IslamicData">3:21</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffff" class="IslamicData">7:03</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">7</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Sun</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:51</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">6:02</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">11:59</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:21</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">7:03</td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData">8</td> <td align="center" bgcolor="#ffffff" class="IslamicData">Mon</td> <td align="center" bgcolor="#ffffff" class="IslamicData">4:51</td> <td align="center" bgcolor="#ffffff" class="IslamicData">6:02</td> <td align="center" bgcolor="#ffffff" class="IslamicData">11:59</td> <td align="center" bgcolor="#ffffff" class="IslamicData">3:21</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffff" class="IslamicData">7:03</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">9</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Tue</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:51</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">6:01</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">11:59</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:20</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">7:03</td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData">10</td> <td align="center" bgcolor="#ffffff" class="IslamicData">Wed</td> <td align="center" bgcolor="#ffffff" class="IslamicData">4:51</td> <td align="center" bgcolor="#ffffff" class="IslamicData">6:01</td> <td align="center" bgcolor="#ffffff" class="IslamicData">11:59</td> <td align="center" bgcolor="#ffffff" class="IslamicData">3:20</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffff" class="IslamicData">7:03</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">11</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Thu</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:50</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">6:01</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">11:59</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:20</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">7:02</td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData">12</td> <td align="center" bgcolor="#ffffff" class="IslamicData">Fri</td> <td align="center" bgcolor="#ffffff" class="IslamicData">4:50</td> <td align="center" bgcolor="#ffffff" class="IslamicData">6:01</td> <td align="center" bgcolor="#ffffff" class="IslamicData">11:58</td> <td align="center" bgcolor="#ffffff" class="IslamicData">3:20</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffff" class="IslamicData">7:02</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">13</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Sat</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:50</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">6:00</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">11:58</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:20</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">7:02</td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData">14</td> <td align="center" bgcolor="#ffffff" class="IslamicData">Sun</td> <td align="center" bgcolor="#ffffff" class="IslamicData">4:50</td> <td align="center" bgcolor="#ffffff" class="IslamicData">6:00</td> <td align="center" bgcolor="#ffffff" class="IslamicData">11:58</td> <td align="center" bgcolor="#ffffff" class="IslamicData">3:19</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffff" class="IslamicData">7:02</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">15</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Mon</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:50</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">6:00</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">11:58</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:19</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">7:02</td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData">16</td> <td align="center" bgcolor="#ffffff" class="IslamicData">Tue</td> <td align="center" bgcolor="#ffffff" class="IslamicData">4:49</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:59</td> <td align="center" bgcolor="#ffffff" class="IslamicData">11:58</td> <td align="center" bgcolor="#ffffff" class="IslamicData">3:19</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffff" class="IslamicData">7:02</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">17</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Wed</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:49</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:59</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">11:57</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:18</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">7:02</td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData">18</td> <td align="center" bgcolor="#ffffff" class="IslamicData">Thu</td> <td align="center" bgcolor="#ffffff" class="IslamicData">4:49</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:59</td> <td align="center" bgcolor="#ffffff" class="IslamicData">11:57</td> <td align="center" bgcolor="#ffffff" class="IslamicData">3:18</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffff" class="IslamicData">7:01</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">19</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Fri</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:49</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:58</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">11:57</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:18</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">7:01</td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData">20</td> <td align="center" bgcolor="#ffffff" class="IslamicData">Sat</td> <td align="center" bgcolor="#ffffff" class="IslamicData">4:48</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:58</td> <td align="center" bgcolor="#ffffff" class="IslamicData">11:57</td> <td align="center" bgcolor="#ffffff" class="IslamicData">3:17</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffff" class="IslamicData">7:01</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">21</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Sun</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:48</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:58</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">11:56</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:17</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">7:01</td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData">22</td> <td align="center" bgcolor="#ffffff" class="IslamicData">Mon</td> <td align="center" bgcolor="#ffffff" class="IslamicData">4:48</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:57</td> <td align="center" bgcolor="#ffffff" class="IslamicData">11:56</td> <td align="center" bgcolor="#ffffff" class="IslamicData">3:17</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:54</td> <td align="center" bgcolor="#ffffff" class="IslamicData">7:01</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">23</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Tue</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:47</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:57</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">11:56</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:16</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:54</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">7:01</td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData">24</td> <td align="center" bgcolor="#ffffff" class="IslamicData">Wed</td> <td align="center" bgcolor="#ffffff" class="IslamicData">4:47</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:56</td> <td align="center" bgcolor="#ffffff" class="IslamicData">11:56</td> <td align="center" bgcolor="#ffffff" class="IslamicData">3:16</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:54</td> <td align="center" bgcolor="#ffffff" class="IslamicData">7:00</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">25</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Thu</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:47</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:56</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">11:55</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:15</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:54</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">7:00</td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData">26</td> <td align="center" bgcolor="#ffffff" class="IslamicData">Fri</td> <td align="center" bgcolor="#ffffff" class="IslamicData">4:46</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffff" class="IslamicData">11:55</td> <td align="center" bgcolor="#ffffff" class="IslamicData">3:15</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:54</td> <td align="center" bgcolor="#ffffff" class="IslamicData">7:00</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">27</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Sat</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:46</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">11:55</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:14</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:54</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">7:00</td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData">28</td> <td align="center" bgcolor="#ffffff" class="IslamicData">Sun</td> <td align="center" bgcolor="#ffffff" class="IslamicData">4:46</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:55</td> <td align="center" bgcolor="#ffffff" class="IslamicData">11:55</td> <td align="center" bgcolor="#ffffff" class="IslamicData">3:14</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:54</td> <td align="center" bgcolor="#ffffff" class="IslamicData">7:00</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">29</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Mon</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:45</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:54</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">11:54</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:13</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:54</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">6:59</td> </tr>
<tr> <td align="center" bgcolor="#ffffff" class="IslamicData">30</td> <td align="center" bgcolor="#ffffff" class="IslamicData">Tue</td> <td align="center" bgcolor="#ffffff" class="IslamicData">4:45</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:54</td> <td align="center" bgcolor="#ffffff" class="IslamicData">11:54</td> <td align="center" bgcolor="#ffffff" class="IslamicData">3:13</td> <td align="center" bgcolor="#ffffff" class="IslamicData">5:53</td> <td align="center" bgcolor="#ffffff" class="IslamicData">6:59</td> </tr>
<tr> <td align="center" bgcolor="#ffffcc" class="IslamicData">31</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">Wed</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">4:44</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:53</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">11:54</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">3:12</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">5:53</td> <td align="center" bgcolor="#ffffcc" class="IslamicData">6:59</td> </tr>
</tbody></table>
 
KETERANGAN :

Lihat kode "width: 366px;"Gantilah  angkanya dengan menyesuaikan lebar
pada postingan ataupun sidebar blog Anda.

Selamat mencoba dan tetap good luck!

0 Cara Membuat Efek Link Berkedap-kedip Seri 2


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Maksud tutorial ini adalah membuat link-link yang
ada di blog yang kita miliki dapat berkedap-kedip
dengan sendirinya tanpa tersentuh mouse sekalipun
seperti layaknya sebuah ' lampu sein ' pada
kendaraan bermotor. Sebagai contohnya anda bisa
lihat di blog ini pada Menu Tab View " Photoshop ".

Untuk membuatnya, caranya adalah sebagai berikut :


1.   Masuk ke Edit HTML.

2.   Cari kode </head>

3.   Copy kode yang ada di bawah ini dan
      pastelah di atas kode </head>,
      lalu simpanlah template anda.



4.   Sisipkan kode rel="flashbg[blue]"
      diantara kode-kode link Anda yang miliki.

Contohnya seperti terlihat di bawah ini :

<a href='URL link Anda' rel="flashbg[blue]">Keterangan link</a>

KETERANGAN :

Gantilah URL link pada kode di atas dengan
URL link anda termasuk keterangannya.

Ganti juga warna berkedipnya, pada kode : [blue]
dengan warna apa saja sesuka hati Anda.

Selamat mencoba, good luck!

0 Cara Membuat Efek Link Berkedap-kedip Seri 1


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Maksud tutorial ini adalah membuat link-link yang
ada di blog yang kita miliki dapat berkedap-kedip
dan berwarna-warni dengan sendirinya tanpa tersentuh
oleh mouse sekalipun seperti layaknya ' lampu sein '
pada kendaraan bermotor. Sebagai contohnya anda bisa
lihat di blog ini pada Menu Tab View " Komputer ".

Anda tertarik ? Ikuti cara membuatnya seperti berikut :


1.   Masuk ke Edit HTML.

2.   Cari kode </head>

3.   Copy kode yang ada di bawah ini dan
      paste di atas kode </head>,
      lalu simpan template anda.



4.   Untuk penerapan pada linknya :
      Sisipkan kode rel="flashfg[green]"
      diantara kode-kode link yang Anda miliki.

Contohnya seperti di bawah ini :

<a href='URL link Anda' rel="flashfg[green]">Keterangan link</a>

KETERANGAN :

Gantilah URL link pada kode di atas dengan
URL link anda termasuk Keterangan Linknya.

Ganti juga warna berkedipnya, pada kode : [green]
dengan warna apa saja sesuka hati Anda.

Selamat mencoba, good luck!

Jumat, 22 Juli 2011

0 Cara Membuat Animasi Garis Atas Dan Bawah Pada Link


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Efek animasi yang bisa kita terapkan pada link yang
kita miliki amat beragam modelnya. Entah sudah
berapa efek animasi link yang diposting blog ini,
Sampai Saya sendiripun tidak ingat lagi. Dan hari ini
Saya coba " bagikan " 1 (satu) lagi efek animasi
pada link yang contohnya seperti di bawah ini :


ANIMASI GARIS DI ATAS LINK =


Cara Membuat Tanda Tangan Model Animasi

Cara Membuat Spoiler Di Blog

Membuat Background Pada Postingan

Cara Membuat Recent Comment

Cara Membuat Text Area Berbackground

ANIMASI GARIS DI BAWAH LINK =


Cara Membuat Tanda Tangan Model Animasi

Cara Membuat Spoiler Di Blog

Membuat Background Pada Postingan

Cara Membuat Recent Comment

Cara Membuat Text Area Berbackground


Untuk membuat Efek animasi ini, caranya adalah :


1.   Masuk ke Edit HTML.

2.   Carilah kode </head>

3.   Letakkanlah di atas kode </head>,
      kode yang berikut ini :

Kode untuk Animasi Garis di atas link :

<style type="text/css">

a:hover {
text-decoration: none;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9BKnzhMkjjpxXT5tQ36o4E3JFFlQB8ccAHLgMH0SdmqpGQXinnrAAWqloPVDUtvP-rDDz5OUWRaBBUMoQpkphFWTOslXhFS8ZB0Nf4r1vbBwzc29iEvykiCOlkiXKbOU2weirh0SiSA/);
background-repeat: repeat-x;
background-position: 100% 100% 0% 0%;
padding-bottom: 2px;
}

</style>

Kode untuk Animasi Garis di bawah link :

<style type="text/css">

a:hover {
text-decoration: none;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9BKnzhMkjjpxXT5tQ36o4E3JFFlQB8ccAHLgMH0SdmqpGQXinnrAAWqloPVDUtvP-rDDz5OUWRaBBUMoQpkphFWTOslXhFS8ZB0Nf4r1vbBwzc29iEvykiCOlkiXKbOU2weirh0SiSA/);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;
}

</style>

Selamat mencoba dan tetap good luck!

0 Cara Menambahkan Image Di Depan Link Seri 2


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Anda lihat kan, gambar bintang berkedip-kedip di
depan link pada sidebar blog ini ? Itulah yang
dimaksudkan dalam tutorial kali ini. Untuk
membuatnya, copy kode yang ada di bawah
kemudian masukkan pada bagian paling atas
sidebar dimana Anda letakkan link tersebut :


<style>.list
{background: url("URL Gambar di sini") no-repeat left center; line-height:1.2em;padding:3px 5px 3px 15px;)</style>

KETERANGAN :

Buatlah gambarnya dengan ukuran
kecil saja, misalnya : 10 px X 10 px.

Letakkan kode URL gambar Anda
pada kode URL Gambar di sini

Sesuaikanlah angka padding-nya
dengan link dan sidebar blog Anda.

PENERAPAN PADA LINKNYA :

Sisipkan kode <div class="list">...............</div>
diantara kode-kode link Anda.

Contohnya seperti di bawah ini :

<div class="list"><a href="http://syamsudinnamaku.blogspot.com/2011/01/membuat-efek-salju-di-blog.html">Membuat Efek Salju di Blog</a></div>

Selamat mencoba, good luck!

0 Cara Membuat Animasi Gambar Di Bawah Menu


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Efek ini menggunakan teknik CSS untuk membuat
Menu Anda tampil lebih keren. Efek ini tidak
menggunakan gambar sebagimana yang biasa
digunakan sebagai penunjang sebuah animasi.
Lihatlah contoh berikut ini. Arahkan cursor Anda
pada deretan menu-menu yang ada di bawah ini :





Ikuti langkah berikut, bila Anda ingin membuat :


1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan dalam kontennya
      kode yang berikut ini terus simpan.

<ul class="arrowunderline">
<li><a href="URL Menu 1 Anda di sini">Menu URL 1</a></li>
<li><a href="URL Menu 2 Anda di sini">Menu URL 2</a></li>
<li class="selected"><a href="URL Menu 3 Anda di sini">Menu URL 3</a></li>
<li><a href="URL Menu 4 Anda di sini">Menu URL 4</a></li>
</ul>

KETERANGAN :

Masukkan URL Anda pada tempat yang disediakan.

Bila perlu, tambahkan lagi jumlah Menunya
dengan mengikuti kode yang sebelumnya.

1.   Terus Masuk ke Edit HTML.

2.   Cari kode </head>

3.   Copy kode yang ada di bawah ini dan
      paste di atas kode </head>,
      kemudian simpan template anda.

<style>

ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
font: bold 18px Georgia;
}

ul.arrowunderline li{
display:inline;
margin-right:25px; /* spacing between each menu item */
}

ul.arrowunderline li a{
position:relative;
color:black;
padding-bottom:7px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;

}

ul.arrowunderline li a:hover{
border-bottom:3px solid red; /* style of arrow underline */
}

ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px; /* value should match border-width below */
bottom: 0;
border-width:5px; /* value should match margin-left above */
border-style:solid;
border-color: transparent transparent red transparent; /* create up arrow */
}

</style>

Selamat mencoba dan tetap good luck!

0 Cara Membuat Panel Seksi Menu Vertikal


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Panel seksi ini adalah menu daftar vertikal dengan
tepi kanan yang melengkung. Sebagai menu, ini
tidak hanya mempertahankan tampilan melalui
perubahan pada lebar atau tinggi tetapi juga sangat
mudah untuk mewarnainya melalui CSS saja.
Anda mau tahu contohnya ?! Lihat previewnya
dan sorotlah menu-menu di bawah ini :




Bila ingin membuat Panel Seksi Menu Vertikal ini,
Anda ikuti langkahnya seperti berikut ini :


1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan dalam kontennya
      kode yang berikut ini terus simpan.

<ul class="sexypanels">
<li><a href='URL 01 Anda di sini'>» Judul Menu 01</a></li>
<li><a href='URL 02 Anda di sini'>» Judul Menu 02</a></li>
<li><a href='URL 03 Anda di sini'>» Judul Menu 03</a></li>
<li><a href='URL 04 Anda di sini'>» Judul Menu 04</a></li>
<li><a href='URL 05 Anda di sini'>» Judul Menu 05</a></li>
<li class="lastitem"><a href="URL 06 Anda di sini">» Judul Menu 06</a></li>
</ul>

KETERANGAN :

Masukkan URL Anda pada kode yang tersedia.
Dan bila perlu, tambahkan lagi sesuka Anda.

1.   Lalu masuk ke Edit HTML.

2.   Cari kode </head>

3.   Copy kode yang ada di bawah ini dan
      paste di atas kode </head>,
      lalu simpan template anda.

<style type="text/css">

.sexypanels{
list-style-type: none;
margin: 0;
padding: 0;
width: 220px; /* width of menu */
}

.sexypanels li{
border-bottom: 0px solid white; /* white border beneath each menu item */
}

.sexypanels li a{
background: #FF0000 url(http://www.dynamicdrive.com/cssexamples/media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: black;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/
}
.sexypanels li a:visited, .sexypanels li a:active{
color: blue;

}

.sexypanels li a:hover{
background-color: blue; /*color of menu onMouseover*/
color: white;
border-bottom: 1px solid black; /*bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/
}

</style>

<!--[if IE]>
<style type="text/css">
.sexypanels li a{ /* Menu link width value for IE */
width: 100%;
}
</style>
<![endif]-->

Keren kan ?  good luck!

Kamis, 21 Juli 2011

0 Membuat Efek Transformasi Dan Transisi Dengan CSS3


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Mau tahu yang dimaksud dalam tutorial ini ?
Lihatlah contohnya di bawah ini dan coba saja letakkan
cursor Anda tepat di atas ke-5 (lima) ikon yang ada :




Kalau Anda ingin mencoba membuat yang seperti itu,
ikuti langkahnya seperti berikut ini :


1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan ke dalam kontennya
      kode yang berikut ini lalu simpan.

<ul class="bubblewrap">
<li><a href="URL Stumbleupon Anda"><img src="http://dynamicdrive.com/cssexamples/media/stumbleupon.png" title="Add to Stumbleupon" /></a></li>
<li><a href="URL Facebook Anda"><img src="http://dynamicdrive.com/cssexamples/media/facebook.png" title="Add to Facebook" /></a></li>
<li><a href="URL Digg Anda"><img src="http://dynamicdrive.com/cssexamples/media/digg.png" title="Add to Digg" /></a></li>
<li><a href="URL Twitter Anda"><img src="http://dynamicdrive.com/cssexamples/media/twitter.png" title="Add to Twitter" /></a></li>
<li><a href="URL RSS Feed Anda"><img src="http://dynamicdrive.com/cssexamples/media/rss.png" title="Add RSS Feed" /></a></li>
</ul>

KETERANGAN :

Masukkan URL Stumbleupon, URL Facebook,
URL Digg, URL Twitter dan URL RSS Feed Anda
di tempat yang tersedia pada kode di atas.

3.   Lalu masuk ke Edit HTML.

4.   Carilah tag </head>

5.   Letakkanlah di atas tag </head>,
      kode yang ada di bawah ini.
      Pratinjau, simpan template Anda.

<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>

Selamat mencoba, good luck!

0 Membuat Gambar Berjalan Dengan jQuery


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Preview dari tutorial ini adalah seperti ini :



Agar Anda lebih jelas lagi,
lihatlah DEMO-nya di sini.

Untuk membuat seperti yang demikian,
berikut ini tutorialnya :




1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript.

2.   Masukkan dalam kontennya
      kode yang ada di bawah ini :

<div id="outerContainer">

<div id="imageScroller">
<div id="viewer" class="js-disabled">
<a class="wrapper" href="URL Link 1 Anda" title="........"><img class="logo" id="........" src="URL Gambar 1 Anda" alt="........"></a>
<a class="wrapper" href="URL Link 2 Anda" title="........"><img class="logo" id="........" src="URL Gambar 2 Anda" alt="........"></a>
<a class="wrapper" href="URL Link 3 Anda" title="........"><img class="logo" id="........" src="URL Gambar 3 Anda" alt="........"></a>
<a class="wrapper" href="URL Link 4 Anda" title="........"><img class="logo" id="........" src="URL Gambar 4 Anda" alt="........"></a>
<a class="wrapper" href="URL Link 5 Anda" title="........"><img class="logo" id="........" src="URL Gambar 5 Anda" alt="........"></a>
</div>
</div>

</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {

//remove js-disabled class
$("#viewer").removeClass("js-disabled");

//create new container for images
$("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");

//add images to container
$(".wrapper").each(function() {
$(this).appendTo("div#container");
});

//work out duration of anim based on number of images (1 second for each image)
var duration = $(".wrapper").length * 1000;

//store speed for later (distance / time)
var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;

//set direction
var direction = "rtl";

//set initial position and class based on direction
(direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;

//animator function
var animator = function(el, time, dir) {

//which direction to scroll
if(dir == "rtl") {

//add direction class
el.removeClass("ltr").addClass("rtl");

//animate the el
el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {

//reset container position
$(this).css({ left:$("div#imageScroller").width(), right:"" });

//restart animation
animator($(this), duration, "rtl");

//hide controls if visible
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;

});
} else {

//add direction class
el.removeClass("rtl").addClass("ltr");

//animate the el
el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() {

//reset container position
$(this).css({ left:0 - $("div#container").width() });

//restart animation
animator($(this), duration, "ltr");

//hide controls if visible
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;
});
}
}

//start anim
animator($("div#container"), duration, direction);

//pause on mouseover
$("a.wrapper").live("mouseover", function() {

//stop anim
$("div#container").stop(true);

//show controls
($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;
($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;
($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;

//variable to hold trigger element
var title = $(this).attr("title");

//add p if doesn't exist, update it if it does
($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;
});

//restart on mouseout
$("a.wrapper").live("mouseout", function(e) {

//hide controls if not hovering on them
(e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;

//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

//work out distance left to travel
var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ;

//new duration is distance left / speed)
var newDuration = distanceLeft / speed;

//restart anim
animator($("div#container"), newDuration, $("div#container").attr("class"));

});

//handler for ltr button
$("#ltr").live("click", function() {

//stop anim
$("div#container").stop(true);

//swap class names
$("div#container").removeClass("rtl").addClass("ltr");

//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

//work out remaining distance
var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));

//new duration is distance left / speed)
var newDuration = distanceLeft / speed;

//restart anim
animator($("div#container"), newDuration, "ltr");
});

//handler for rtl button
$("#rtl").live("click", function() {

//stop anim
$("div#container").stop(true);

//swap class names
$("div#container").removeClass("ltr").addClass("rtl");

//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

//work out remaining distance
var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));

//new duration is distance left / speed)
var newDuration = distanceLeft / speed;

//restart anim
animator($("div#container"), newDuration, "rtl");
});
});
</script>

KETERANGAN :

Masukkan Link dan Gambar Anda dalam kode
di atas pada tempat yang disediakan.

Isilah titik-titik pada kode title=", id=" dan alt="
dengan kata atau kalimat yang Anda inginkan.



3.   Lalu masuk ke Edit HTML.

4.   Carilah tag </head>

5.   Letakkanlah di atas tag </head>,
      kode yang ada di bawah ini lalu
      simpanlah template Anda.

<link rel="stylesheet" type="text/css" href="http://nettuts.s3.amazonaws.com/300_jquery/image Scroller/imageScroller.css" />



Selamat mencoba, good luck!
1. Good Girl
2. D'MASIF -sudah perih ini
3. Haney Bunny Sweety-G-String.mp3
4. ARMADA-Mau Dibawa Kemana.mp3
5. Ayang Ayangku.mp3
6. Tak Semestinya Kita Berpisah (TSKB).mp3
7. When The Children Cry - White Lion.mp3
Info

Catatan HUGGENG|CYBER

SELAMAT DATANG DI BLOG SAYA :), MAAF KALO DI BLOG INI ISI DARI KONTEN KURANG MENARIK< TETAPI SAYA AKAN MEMBUAT PARA PENGUNJUNG SENANG DI BLOG INI

Sekilas Tentang Admin

Saya Buakanlah Profesional Pembuat Blog Atau Web, Saya Masih Butuh Belajar, Dari Rekan2 Bloger. INFO:
BLOG ANAK INDONESIA UNTUK ANDA SEMUA

Follow

Follow HUGGENG|CYBER

Nikmati Layanan TV Online Gratis di HUGGENG|CYBER *