Kamis, 29 September 2011

0 Membuat Read More Pada Blog


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

Membuat Read More Pada Blog. Baru kemaren teman saya bertanya, Eh gimana sih caranya membuat read more pada blog? Nah langsung aja yuk kita mulai.

1. Langkah pertama Login ke blog kamu.

2. Masuk ke posting kamu atau edit entri artikel yang akan di read more.

3. Tentukan batas kalimatnya dengan cara letakkan tanda cursor mouse kamu. Lalu klik Insert jump break (Seperti gambar dibawah ini).


0 Sahabat Blogger Award


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


Persahabatan memang tidak mengenal SIKONLOK
(situasi-kondisi-lokasi). Di dunia maya seperti inipun bisa.
Buktinya blog ini mendapat lagi " Sahabat Blogger
Award ", dimana award ini untuk yang kali kedua,
setelah yang pertama " Setetes Embun award ".

Oleh karena itu, tak berlebihan bila blog ini meng-
ucapkan rasa terima kasihnya pada Deary Widodo
yang telah memberikan penghargaan ini.

Tak lupa, yang paling pertama dan utama tentu saja
bersyukur kepada Allah SWT, Tuhan YME atas segala
Rahmat dan Karunia-Nya sehingga ada saja sahabat
yang peduli dan perhatian pada blog ini.

Ke depan, semoga saja blog ini senantiasa selalu eksis dalam
memberikan atau berbagi dalam hal apa saja, Insya Allah ....

Terakhir, blog inipun tidak lupa pula untuk mengucapkan
terima kasih yang sebesar-besarnya kepada para sahabat/
pengunjung yang telah dengan setia mengunjungi, membaca
dan menggunakan tutorial yang ada di blog ini teriring
ucapan........ semoga sukses untuk Anda.

Selamat mencoba dan tetap good luck!

Rabu, 28 September 2011

0 Linux Sebagai Bagian Sistem Operasi


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

Sistem Operasi Linux/UNIX terdiri dari kernel, program sistem dan beberapa program aplikasi. Kernel merupakan inti dari sistem operasi yang mengatur penggunaan memori, piranti masukan keluaran, proses-proses, pemakaian file pada file system dan lain-lain. Kernel juga menyediakan sekumpulan layanan yang digunakan untuk mengakses kernel yang disebut system call. System call ini digunakan untuk

0 Cara Cepat Menaikkan PageRank Blog


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

Cara Cepat Menaikkan PageRank Blog. Ini merupakan artikel yang saya kira sudah banyak di tulis oleh para netter dan ternyata tidak. Setelah saya cek ternyata jumlah artikel dengan title Cara Cepat Menaikkan PageRank Blog ini masih 767.000 artikel. Jadi selain masih cukup banyak kesempatan untuk mendapatkan posisi pertama di Google masih cukup banyak dengan kata kunci Cara Cepat Menaikkan

Sabtu, 24 September 2011

0 Memasang Meta Tag Yang Otomatis


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



Gunanya bila kita memasang Meta Tag ini adalah
agar mempermudah mesin pencari untuk menemukan
posting atau artikel bahkan yang kita baru buat sekalipun.
Jadi kita tidak perlu lagi repot untuk menuliskan secara
manual Meta Tag yang biasanya terletak di bawah
postingan yang kita buat.


Bila Anda ingin memasang Meta Tag Yang Otomatis ini,
langkahnya adalah seperti berikut :

1.   Masuk ke Edit HTML.

2.   Carilah kode yang seperti ini :

<title><data:blog.pageTitle/></title>

3.   Ganti kode tersebut dengan deretan
      kode yang ada di bawah ini :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='judul deskripsi blog Anda' name='description'/>
<meta content='beberapa kata kunci blog Anda (pisahkan dengan tanda koma)' name='keywords'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/>
</b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta content='nama blog Anda' name='copyright'/>
<meta content='nama Anda' name='author'/>
<meta content='index, follow' name='Robots'/>
<meta content='2 days' name='revisit-after'/>
<meta content='id' name='geo.country'/>
<meta content='negara Anda' name='geo.placename'/>
<meta content='global' name='distribution'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if>

Sebagai contoh untuk Anda :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Belajar Sambil Berbagi' name='description'/>
<meta content='Tutorial blog, komputer, photoshop' name='keywords'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/>
</b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta content='syamsudinnamaku.blogspot.com' name='copyright'/>
<meta content='Syamsudin' name='author'/>
<meta content='index, follow' name='Robots'/>
<meta content='2 days' name='revisit-after'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='global' name='distribution'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if>

4.   Terakhir, simpan template Anda.

Selamat mencoba, good luck!

0 Cara Membuat Iklan Melayang seri 4


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

Iklan Melayang yang satu ini menggunakan sistem sliding.
Sehingga tidak menggangu area yang ada di blog Anda.
Letak dari widget ini berada di sebelah kiri bawah blog.
Seperti yang Anda lihat contohnya di blog ini.







Contoh Iklan


Apakah Anda tertarik? Hanya 1 (satu) langkah
untuk membuatnya, yaitu :

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

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

<style type="text/css">

#sy{
position:fixed;
bottom:20px;
left:1px;
z-index:+1000;
}

* html #sy{position:relative;}
.sytab{
height:45px;
width:30px;
float:right;
cursor:help;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg84PQxH2GOsa0_fnD-_S0lw54W_tgfD_zL6j-8XT9d3oeYoHBKgfE3Rrc8WUXLcAv3x-rr8tIX28NIUu0rJuaW1t_WrlvoiuGA03_c_uATGCXGEhSM8l-fnige7hKsUMIF22xQQwILHQrC/') no-repeat;}
.sycontent{
float:right;
border:2px solid #CCC;
background:#FFF;
padding:5px;}

</style>

<script type="text/javascript">

function showHideSY(){
var sy = document.getElementById("sy");
var w = sy.offsetWidth;
sy.opened ? moveSY(20-w, 0) : moveSY(0, 35-w);
sy.opened = !sy.opened;}
function moveSY(x0, xf){
var sy = document.getElementById("sy");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
sy.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveSY("+x+", "+xf+")", 90);}
}

</script>

<div id="sy">
<div class="sytab" onclick="showHideSY()" title="Show / Close" alt=""> </div>
<div class="sycontent">

<a href="URL iklan Anda di sini" target="_blank"><img src="URL image iklan Anda di sini" alt=".............." style="width:....px; height:....px;" border="0"/></a>

<script type="text/javascript">
var sy = document.getElementById("sy");
sy.style.left = (30-sy.onsetWidth).toString() + "px";
</script></div></div>

KETERANGAN =

Sesuaikan posisi letaknya pada kode
bottom dan left.

Masukkan URL alamat iklan anda
pada kode URL iklan Anda di sini.

Masukkan juga kode URL image iklan anda
pada kode URL Image Iklan Di sini.

Sesuaikan ukuran lebar dan tinggi image
iklan Anda pada kode width dan height.

Isilah alt="........................."
dengan judul iklan Anda.

TAMBAHAN :

Perhatikan pada kode ini :

<a href="URL iklan Anda di sini" target="_blank"><img src="URL image iklan Anda di sini" alt=".............." style="width:....px; height:....px;" border="0"/></a>

Kode tersebut dapat Anda gantikan dengan kode
ShoutMix atau kode Buku Tamu Anda.

Selamat mencoba dan tetap good luck!

Selasa, 20 September 2011

0 Cara Membuat Menu Navigation Tersembunyi


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

Menu Navigation Tersembunyi ini menyimpan Profile,
Facebook, Twitter, E-Mail dan RSS Feed Anda.

Lihat contohnya di bagian atas blog ini.
Coba arahkan cursor Anda pada menu-menunya.



Berikut ini langkah untuk membuatnya :

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

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

<ul id="navigation">
<li class="about-me"><a href="URL Profile Anda/"><span>My Profile</span></a></li>
<li class="facebook"><a href="URL Facebook Anda"><span>My Facebook</span></a></li>
<li class="twitter"><a href="URL Twitter Anda"><span>My Twitter</span></a></li>
<li class="e-mail"><a href="URL E-mail Anda"><span>My E-mail</span></a></li>
<li class="rss"><a href="URL RSS Feed Anda"><span>RSS Feed</span></a></li>
</ul>

KETERANGAN :

Masukkan URL-URL Anda sesuai namanya.

3.   Lalu masuk ke Edit HTML.

4.   Cari tag ]]></b:skin>

5.   Copy kode berikut dan letakkan
      di atas tag ]]></b:skin> ini.

ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:750px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: 0px;
width: 100px;
height: 25px;
background-color:#fff;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #0000ff;
-moz-border-radius:0px 0px 8px 8px;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-khtml-border-bottom-right-radius: 8px;
-khtml-border-bottom-left-radius: 8px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
ul#navigation li a:hover{
background-color:#fff;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#ff0000;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
}
ul#navigation .about-me a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3jR2vraYiB0VUVAecWJxGp2IJXdj3Gin5KZ3-AifT6JqM1yjOcikD4PLa59a9Uk2d7w1qp_vQ2WekeokBWGhXSFc8GP7lzuFSFxLCzjjZZehSeV1gKNOo6sZyPTArE5AQrs0OSkxztkI/s400/photo.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS_7-RfF5nFCSod2jKmmHX8d3O3fjqwo7wAv4x1kWpxsoQOY-UKtX6EIwYqI4eSzChLwoF-yGe5f7r_BUI0A0mghfYwAY6vjDVUpN8Kn_0HiQBv1KdHycFBgcRpEF1nptgPdpDThIL4q8/s400/facebook.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZXYLDgjutSVZcfQ7q3NqKqyIl-VtzGauA72JP-tFsw-AwWHFELZMh26xdOOc1Vbu-xESm9wovSKIXgRe-kAAZFNncSX1GXf4MjKo-C5_riOvFZQXy5D9g8rDfk0itNoHbfxP3dXnI758/s400/twitter.png);
}
ul#navigation .e-mail a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuEQS3pQwPlXrLmKdsT6nHYVoIApmPzK-HRly6t2XRceaA88zom3sEw3zuFhaIX96kx7IaueslwSu5IOWCujb7L96lcNV_bbqG6TUjDOwG1ik2rpEQbGUm2DHC-0hJ6oUZ1Z_UjYW1SMA/s400/mail_edit.png);
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXzTGmNoNsdupw8OBCC6tyXAzQAopG72etXULTska7TaCBppDXge-dp7sBxDtco2Tej8Pgw_kpzhe7jBDI77oTt5mNIY-25evWZvf47fCEKvue5SY6IZSgQ_byR2TdHqzkc78NLzPaoao/s400/rss.png);
}

6.   Cari lagi tag </body>

7.   Copy kode berikut dan letakkan di atas
      atau sebelum tag </body> ini :

<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script>

<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

Selamat mencoba dan tetap good luck!

0 Cara Membuat Floating Top Bar


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

Script ini menampilkan sebuah bar mengambang yang
tampil di bagian kiri atas jendela, meluncur lembut
menyusuri kemanapun jalannya scrollbar. Dengan
adanya tombol close di sebelah kiri atas yang berfungsi
sebagai tombol penutup bagi pengunjung yang telah
melihat dan ingin menutupnya.

Perhatikan screenshotsnya di bawah ini :



Berikut ini cara untuk membuatnya :

1.   Masuk ke Edit HTML

2.   Carilah tag </head>

3.   Copy kode berikut dan letakkan
      di atas atau sebelum tag </head> ini :

<script type="text/javascript">

/***********************************************
* Floating Top Bar script- © Dynamic Drive
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* User http://www.syamsudinnamaku.blogspot.com/
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos=&quot;fromtop&quot; //enter &quot;fromtop&quot; or &quot;frombottom&quot;

function iecompattest(){
return (document.compatMode &amp;&amp; document.compatMode!=&quot;BackCompat&quot;)? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + &quot;=&quot;
var returnvalue = &quot;&quot;;
if (document.cookie.length &gt; 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(&quot;;&quot;, offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie=&quot;remainclosed=1&quot;
document.getElementById(&quot;topbar&quot;).style.visibility=&quot;hidden&quot;
}

function staticbar(){
barheight=document.getElementById(&quot;topbar&quot;).offsetHeight
var ns = (navigator.appName.indexOf(&quot;Netscape&quot;) != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose &amp;&amp; get_cookie(&quot;remainclosed&quot;)==&quot;&quot;)
el.style.visibility=&quot;visible&quot;
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+&quot;px&quot;;this.style.top=y+&quot;px&quot;;};
el.x = startX;
if (verticalpos==&quot;fromtop&quot;)
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos==&quot;fromtop&quot;){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout(&quot;stayTopLeft()&quot;, 10);
}
ftlObj = ml(&quot;topbar&quot;);
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener(&quot;load&quot;, staticbar, false)
else if (window.attachEvent)
window.attachEvent(&quot;onload&quot;, staticbar)
else if (document.getElementById)
window.onload=staticbar

</script>

4.   Cari lagi tag </body>

5.   Copy kode berikut dan letakkan
      di atas atau sebelum tag </body> ini :

<div id="topbar">
<a href="" onClick="closebar(); return false"><img src="http://www.dynamicdrive.com/dynamicindex11/close.gif" border="0" /></a>
Tulisan atau Gambar Anda Letakkan di sini.
<img src="URL gambar Anda di sini" border="0" /><img src="URL gambar Anda di sini" border="0" />
</div>

KETERANGAN :

Masukkan tulisan ataupun gambar Anda
pada tempat yang tersedia.

Selamat mencoba dan tetap good luck!

0 Cara Membuat Drop Down Menu CSS


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

Drop Down Menu dengan menggunakan CSS ini
pembuatannya amat mudah namun hasilnya tidak kalah
dengan Drop Down Menu lain yang sejenisnya.


Anda lihatlah previewnya yang seperti di atas
dan bila Anda berminat mencoba, ikutilah langkah
cara membuatnya yang seperti berikut ini :


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

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

<div id="access">
<ul id="level-one">
<li><a href="URL nama blog Anda">Home</a></li>
<li>Menu Item A
<ul id="level-two">
<li><a href="URL Menu 1">Sub Menu 1</a></li>
<li><a href="URL Menu 2">Sub Menu 2</a></li>
<li><a href="URL Menu 3">Sub Menu 3</a></li>
<li><a href="URL Menu 4">Sub Menu 4</a></li>
<li><a href="URL Menu 5">Sub Menu 5</a></li>
<li><a href="URL Menu 6">Sub Menu 6</a></li>
<li><a href="URL Menu 7">Sub Menu 7</a></li>
<li><a href="URL Menu 8">Sub Menu 8</a></li>
</ul>
</li>
<li>Menu Item B
<ul id="level-two">
<li><a href="URL Menu 1">Sub Menu 1</a></li>
<li><a href="URL Menu 2">Sub Menu 2</a></li>
<li><a href="URL Menu 3">Sub Menu 3</a></li>
<li><a href="URL Menu 4">Sub Menu 4</a></li>
<li><a href="URL Menu 5">Sub Menu 5</a></li>
<li><a href="URL Menu 6">Sub Menu 6</a></li>
<li><a href="URL Menu 7">Sub Menu 7</a></li>
<li><a href="URL Menu 8">Sub Menu 8</a></li>
</ul>
</li>
<li>Menu Item C
<ul id="level-two">
<li><a href="URL Menu 1">Sub Menu 1</a></li>
<li><a href="URL Menu 2">Sub Menu 2</a></li>
<li><a href="URL Menu 3">Sub Menu 3</a></li>
<li><a href="URL Menu 4">Sub Menu 4</a></li>
<li><a href="URL Menu 5">Sub Menu 5</a></li>
<li><a href="URL Menu 6">Sub Menu 6</a></li>
<li><a href="URL Menu 7">Sub Menu 7</a></li>
<li><a href="URL Menu 8">Sub Menu 8</a></li>
</ul>
</li>
<li>Menu Item D
<ul id="level-two">
<li><a href="URL Menu 1">Sub Menu 1</a></li>
<li><a href="URL Menu 2">Sub Menu 2</a></li>
<li><a href="URL Menu 3">Sub Menu 3</a></li>
<li><a href="URL Menu 4">Sub Menu 4</a></li>
<li><a href="URL Menu 5">Sub Menu 5</a></li>
<li><a href="URL Menu 6">Sub Menu 6</a></li>
<li><a href="URL Menu 7">Sub Menu 7</a></li>
<li><a href="URL Menu 8">Sub Menu 8</a></li>
</ul>
</li>
<li>Menu Item E
<ul id="level-two">
<li><a href="URL Menu 1">Sub Menu 1</a></li>
<li><a href="URL Menu 2">Sub Menu 2</a></li>
<li><a href="URL Menu 3">Sub Menu 3</a></li>
<li><a href="URL Menu 4">Sub Menu 4</a></li>
<li><a href="URL Menu 5">Sub Menu 5</a></li>
<li><a href="URL Menu 6">Sub Menu 6</a></li>
<li><a href="URL Menu 7">Sub Menu 7</a></li>
<li><a href="URL Menu 8">Sub Menu 8</a></li>
</ul>
</li>
<li>Menu Item F</li>
<li>Menu Item G</li>
</ul>

</div>

KETERANGAN :

Gantikah kata Menu Item A sampai G
dengan kata yang Anda kehendaki.

Masukkan URL link Anda yang ingin
Amda jadikan Menu-menunya.

3.   Lalu masuk ke Edit HTML.

4.   Cari tag </head>

5.   Copy kode berikut dan letakkan
      di atas atau sebelum tag </head> ini
      kemudian Simpanlah template Anda.

<style type="text/css">

ul#level-one{
width:100%;
height: 36px;
position: relative;
list-style: none;
line-height:36px;
background:#f0f0f0 url(http://www.entheosweb.com/tutorials/css/images/menus/menu-back.png) repeat-x bottom left;/* url("http://www.entheosweb.com/tutorials/css/images/menus/grey_bkg.jpg") repeat-x bottom left;/* for non-css3 browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#f0f0f0)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #f0f0f0); /* for firefox 3.6+ */
}
ul#level-one li{
width:100px;
float: left;
font-weight: bold;
font-family: Arial;
padding-left: 12px;
}
ul#level-one li:hover{
background:#FFA500;
}
ul#level-two{
list-style: none;
background:#FFA500 url(http://www.entheosweb.com/tutorials/css/images/menus/menu-grad.png) repeat-x bottom left; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF4500', endColorstr='#FFA500'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFA500), to(#FF4500)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFA500, #FF4500); /* for firefox 3.6+ */
display:none;
position:absolute;
top:36px;
padding:0;
width:200px;
height:245px;
border:0px solid red;
}
ul#level-two li{
width:196px;
padding-left:4px ;
line-height: 30px;
}
ul#level-two li:hover{
background:#f0f0f0 url(http://www.entheosweb.com/tutorials/css/images/menus/menu-li.png) repeat-x bottom left;/* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#c0c0c0)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #c0c0c0); /* for firefox 3.6+ */

}
ul#level-one li:hover > ul#level-two {
display: block;
}
a{
width:200px;
text-align: center;
text-decoration: none;
color:#000000;
}

</style>

Selamat mencoba dan tetap good luck!

0 Cara Membuat Statis Menu


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

Statis Menu ini muncul di sebelah pojok kiri atas
halaman blog. Preview dari Statis Menu ini seperti
yang Anda lihat pada gambar di bawah ini :


Inilah langkah cara untuk membuatnya :


1.   Masuk ke Edit HTML.

2.   Cari tag </head>

3.   Copy kode berikut dan letakkan
      di atas tag </head> ini,
      kemudian Simpan template Anda.

<STYLE TYPE="text/css">
<!--

.menuh {
BORDER-COLOR : #FFFF99 ;
cursor : hand ;
Border-Left : #FFFF99 ;
Border-Top : #FFFF99 ;
Padding-Left : 1px ;
Padding-Top : 1px ;
Background-Color : #FFFF99 ;
}
.menu {
Background-Color : white ;
}
.home {
cursor : hand ;
}

.menulinks{
text-decoration:none;
}
//-->
</STYLE>

<script language="Javascript1.2">
<!--

/*
Static menu script III (By maXimus, maximus@nsimail.com, http://absolutegb.com/maximus/)
Modified slightly/ permission granted to Dynamic Drive to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

//configure below variable for menu width, position on page
var menuwidth=110
var offsetleft=10
var offsettop=90

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0

function makeStatic() {
if (ie4) {object1.style.pixelTop=document.body.scrollTop+offsettop}
else if (ns6) {document.getElementById("object1").style.top=window.pageYOffset+offsettop}
else if (ns4) {eval(document.object1.top=eval(window.pageYOffset+offsettop));}
setTimeout("makeStatic()",0);
}

if (ie4||ns6) {document.write('<span ALIGN="CENTER" ID="object1" STYLE="Position:absolute; Top:20; Left:'+offsetleft+'; Z-Index:5;cursor:hand;background-color:black;"><TABLE BORDER="1" width="'+menuwidth+'" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="black" bgcolor="white">')}
else if (ns4){ document.write('<LAYER top="20" name="object1" left="'+offsetleft+'" BGCOLOR=black><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1"><TR><TD><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" width="'+menuwidth+'">')}

if (ie4||ns6||ns4)
document.write('<TR><TD BGCOLOR="#3399FF" BORDERCOLORDARK="#99CCFF" BORDERCOLORLIGHT="#003399"><P ALIGN=CENTER><FONT SIZE="4" FACE=ARIAL>Menu</FONT></TD></TR>')

var menui = new Array();
var menul = new Array();

//configure below for menu items. Extend list as desired

menui[0]="Menu 01";
menui[1]="Menu 02";
menui[2]="Menu 03";
menui[3]="Menu 04";
menui[4]="Menu 05";
menui[5]="Menu 06";
menui[6]="Menu 07";
menui[7]="Menu 08";

menul[0]="URL Menu 01";
menul[1]="URL Menu 02";
menul[2]="URL Menu 03";
menul[3]="URL Menu 04";
menul[4]="URL Menu 05";
menul[5]="URL Menu 06";
menul[6]="URL Menu 07";
menul[7]="URL Menu 08";

for (i=0;i<=menui.length-1;i++)
if (ie4||ns6) {document.write('<TR><TD BORDERCOLOR="white" ONCLICK="location=\''+menul[i]+'\'" onmouseover="className=\'menuh\'" onMouseout="className=\'menu\'"><CENTER><FONT>'+menui[i]+'</FONT></TD></TR>')}
else if (ns4){document.write('<TR><TD BGCOLOR="white"><ILAYER><LAYER width="'+menuwidth+'" onmouseover="bgColor=\'yellow\'" onmouseout="bgColor=\'white\'"><CENTER><A HREF="'+menul[i]+'" class=menulinks>'+menui[i]+'</A></CENTER></LAYER></ILAYER></TD></TR>')}

if (ie4||ns6) {document.write('</TABLE></span>')}
else if (ns4){document.write('</TABLE></TD></TR></TABLE></LAYER>')}

function menu3(){
if (ns6||ie4||ns4)
makeStatic()
}

window.onload=menu3

//-->
</script>

KETERANGAN :

Gantilah warna-warna border dan back-
groundnya dengan warna keinginan Anda.

Atur juga ukuran menunya
pada kode var menuwidth=.........

Masukkan URL-URL yang akan
Anda isi di menu statis ini.

Kurangi atau tambahkanlah URLnya
sesuai dengan kebutuhan Anda.

Selamat mencoba, good luck!

0 Cara Membuat Efek Coretan Di Blog


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


Silahkan Anda corat-coret blog ini dengan menggunakan
cat semprot yang ada. Gerakan dan tekan mouse Anda.
Untuk menghilangkan atau menghapus coretan yang
Anda buat tadi , kliklah tombol yang bertanda silang.

Efek ini lebih cocok buat Anda yang suka " maaf "
mencorat- coret tembok atau dinding.

Cara membuatnya, langkahnya sebagai berikut :
masukkan kode yang ada di bawah ini ke dalam
Gadget HTML/JavaScript atau Anda juga dapat
meletakkan kode ini di atas tag </body>.

<script language="javascript">
nd_mode="graff";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://www.netdisaster.com/js/mynd.js"></script>

Selamat mencoba dan tetap semangat!

Senin, 19 September 2011

0 Cara Membuat Bunga-Bunga Bermekaran


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




Lihat dan cobalah Anda perhatikan contohnya.
Klik tombol bertanda silang bila Anda
ingin efek bunga mekar ini berhenti.

Setelah sebelumnya membuat tutorial Cara Membuat Bunga-Bunga Berguguran, kini blog ini ingin berbagi
lagi kepada Anda semua para pengunjung setia
khususnya para wanita, yakni tentang Cara Membuat
Bunga-Bunga Bermekaran.

Anda tertarik untuk memasang efek ini?, caranya
adalah masukkan kode yang ada di bawah ini ke dalam
Gadget HTML/JavaScript atau Anda juga dapat
meletakkan kode ini di atas atau sebelum tag </body>

<script language="javascript">
nd_mode="flowers";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://www.netdisaster.com/js/mynd.js"></script>

Selamat mencoba dan tetap semangat!

0 Cara Memasang Efek Meteor Berjatuhan


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


Buat Anda yang senang akan efek-efek yang berkenaan
dengan animasi penghias blog, kiranya efek meteor ini
layak Anda pertimbangkan untuk memasangnya.

Perhatikanlah contohnya. Klik tombol bertanda silang
bila Anda ingin efek meteor ini berhenti.

Bila Anda tertarik untuk memasang efek ini, caranya
masukkan kode yang ada di bawah ini ke dalam
Gadget HTML/JavaScript atau Anda juga dapat
meletakkan kode ini di atas atau sebelum tag </body>.

<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="http://www.netdisaster.com/js/mynd.js"></script>

Selamat mencoba dan tetap semangat!

Sabtu, 17 September 2011

0 Memasang Radio Streaming Seri 2


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

Buat Anda yang suka atau ingin memasang
Radio Streaming di blognya, tutorial ini
mungkin bisa bermanfaat buat Anda.


Radio Streaming di seri ini adalah radio yang
bernuansa Islami 6 in 1. Artinya ada 6 (enam)
stasiun radio dalam 1 (satu) widget mini yang
hanya berukuran lebar: 120px dan tinggi: 180px.

Cara memasangnya, cukup Anda tambahkan
Gadget HTML/JavaScript, masukkan kodenya
ke dalam kontennya kemudian simpan, selesai.

Lihatlah dahulu contohnya di bawah ini
dan silahkan Anda untuk mencobanya.



Silahkan Anda copy kodenya di bawah ini :

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="120" height="180" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="flashvars" value="width=120&amp;height=180&amp;file=http://www.radioassunnah.com/radiobox/playlist.xml&amp;displayheight=100&amp;shuffle=false&amp;showeq=true&amp;showstop=true&amp;overstretch=fit" /><param name="src" value="http://www.radioassunnah.com/radiobox/mediaplayer.swf" /><embed type="application/x-shockwave-flash" width="120" height="180" src="http://www.radioassunnah.com/radiobox/mediaplayer.swf" flashvars="width=120&amp;height=180&amp;file=http://www.radioassunnah.com/radiobox/playlist.xml&amp;displayheight=100&amp;shuffle=false&amp;showeq=true&amp;showstop=true&amp;overstretch=fit"></embed></object>

Selamat mencoba dan tetap good luck!

0 Memasang Widget Jadwal Waktu Sholat Seri 2


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

Widget Jadwal Waktu Sholat ini buatan Republika.co.id.
Memasangnya mudah. Anda hanya cukup memasukkan
kodenya ke dalam konten HTML/JavaScript.

Widget ini memungkinkan para pengunjung blog Anda dapat
memilih Jadwal Waktu Sholat yang sesuai dengan daerahnya,
karena di widget ini sekurangnya ada 56 (lima puluh enam)
kota atau propinsi yang ada di seluruh Indonesia.

Lihatlah previewnya terlebih dahulu berikut ini :


Copylah kodenya yang ada di bawah ini :
<iframe src="http://a.republika.co.id/jadwal_sholat/index.html" scrolling="no" width="300" height="400" frameborder="no" framespacing="0"> </iframe>

Selamat mencoba dan tetap good luck!

Kamis, 15 September 2011

0 Cara Membuat Widget Top Komentator Model Cloud


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

Widget Top Komentator Model Cloud ini contohnya
Anda dapat lihat seperti gambar preview di bawah ini :



Untuk membuat Widget Top Komentator yang seperti itu,
sebelumnya Anda copy dahulu kodenya berikut ini :


<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='text-decoration:none;font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + " </a>";//clickable commentator name
display = display + ccLName;
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://www.syamsudinnamaku.blogspot.com
&Exclusions=Syamsudin
&ShowHowMany=15
&Order=frequency
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>

KETERANGAN :

Masukkanlah kode yang Anda copy tersebut
ke dalam konten HTML/JavaScript.

Kalau Anda melihat ada URL blog ini dalam kode
di atas, maka gantilah dengan URL blog Anda.

Begitu pula dengan Syamsudin, gantilah
dengan nama user blogger Anda.

Selamat mencoba, good luck!

0 Cara Mengatasi Galat Di Dasbor


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

Apakah Anda pernah mengalami hal seperti gambar yang
ada di bawah ini saat Anda ingin memasuki Dasbor?



Karena pernah mengalami hal ini, maka blog inipun
dapat berbagi pengalaman dalam mengatasi hal di atas.

Setidaknya ada 2 (dua) cara yang dapat Anda lakukan :


CARA PERTAMA :

1.   Loginlah ke sini.

2.   Isikan nama Email dan kode Sandi Anda.
      (lihat gambar di bawah).


3.   Setelah itu, lihatlah pada sebelah kanan atas
      dan coba Anda pilih bahasa Inggris/English,
      kemudian Anda keluar dari halaman tersebut.

4.   Coba Anda masuk lagi lewat http://blogger.com
      atau yang seperti biasa Anda lakukan.

CARA KEDUA :

Pada saat Anda masuk Dasbor dan melihat gambar
seperti gambar yang ada di paling atas tadi,
kliklah " bahasa " yang ada pada tab bagian bawah.
(lihat gambar di bawah).


Setelah itu, pilihlah bahasa Inggris/English
kemudian klik " Simpan Setelan ", selesai.
(lihat gambar di bawah).


Selamat mencoba, good luck!

Rabu, 14 September 2011

0 Membuat Efek Bintang Berkelap-kelip Seri 2


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


Setelah sukses membuat Efek Bintang Berkelap-kelip
pada seri yang pertama, kini blog ini coba " berbagi "
lagi dalam seri yang ke-2 (dua).

Lihatlah contohnya pada blog yang Anda kunjungi ini.
Perhatikanlah kemunculannya dengan seksama.
Bagi Anda yang mempunyai blog dengan background
yang berwarna gelap maka akan semakin terlihat jelas.
Berikut adalah cara membuatnya bila Anda berminat :


3.   Masuk ke Edit HTML.

4.   Cari tag </head>

5.   Copy kode berikut ini dan letakkan
      sebelum atau di atas tag </head>
      kemudian simpan, selesai.

<script type="text/javascript" src="http://yourjavascript.com/2711111957/syamsudinnamaku_star.js"></script>

Selamat mencoba dan tetap good luck!

0 Memasang Animasi Spiderman Seri 2


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


Demi menjawab dan sekaligus untuk memenuhi
keinginan para pengunjung setia blog ini dimana
pada posting sebelumnya masih ada yang merasa
kesulitan dalam memasang animasi Spiderman,
maka untuk seri yang ke-2 (dua) ini kodenya
dipermudah, sehingga mudah-mudahan tidak ada
lagi komentar yang menyatakan kesulitannya.

Lihat dahulu contohnya. Perhatikan di bagian atas.
Copylah kodenya yang ada di bawah ini :


<div style="position: fixed; top: -10px; left: 50px;">
<embed src="http://www.widgipedia.com/widgets/orido/RedSpidey-5671-8192_134217728.widget" swliveconnect="true" quality="best" loop="true" menu="false" wmode="transparent" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="200" height="350"></embed>
</div>

KETERANGAN :

Masukkan kode tersebut ke dalam konten
HTML/JavaScript lalu simpan.

Sesuaikan posisinya dengan selera Anda.
Aturlah nilai angka top dan left-nya.

Anda juga dapat mengatur besar-kecil widget
spidermannya pada kode width dan height-nya.

Selamat mencoba dan tetap good luck!

Senin, 12 September 2011

0 Cara Membuat Efek Hover Image Yang Keren Seri 2


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

Tumpang tindih script di setiap DIV pada halaman
Anda amat sempurna dengan kotak overlay ketika
mouse terarah pada gambarnya. Dengan efek
pergeseran menimbulkan gambar atau teks yang lain
dibalik gambar yang pertama. Ditambah lagi dengan
adanya efek slide dari arah kiri ke arah kanan.

Contohnya dapat Anda lihat seperti di bawah ini :















Dan berikut adalah cara untuk membuatnya :

1.   Rancangan -> Tambah
      Gadget ->
      HTML/JavScript.

2.   Masukkan ke dalam
      kontennya
      kode berikut ini
      kemudian simpan.






<div class="imagecontainers" data-overlayid="springinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://www.javascriptkit.com/script/script2/spring.jpg" />
</div>

<div class="imagecontainers" data-overlayid="summerinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://www.javascriptkit.com/script/script2/summer.jpg" />
</div>

<div class="imagecontainers" data-overlayid="winterinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://www.javascriptkit.com/script/script2/winter.jpg" />
</div>

<div id="springinfo">
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />
</div>


<div id="summerinfo">
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
</div>


<div id="winterinfo">
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />
</div>

KETERANGAN :

Ganti semua link yang ada pada kode di atas
dengan link apa saja yang Anda inginkan.

Ganti juga URL gambarnya dengan URL
gambar yang Anda kehendaki.

Sesuaikan pula ukurannya.

3.   Kemudian masuk ke Edit HTML

4.   Carilah tag </head>

5.   Copy kode berikut dan letakkan
      di atas tag </head> ini.
      Pratinjau lalu simpan template Anda.

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

<script src="http://www.javascriptkit.com/script/script2/overlaybox.js">

/***********************************************
* DIV Content Overlay script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* User http://syamsudinnamaku.blogspot.com/
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/

</script>

<script>

jQuery(function($){ //on document.ready

$('#info').overlaycontent({ //initialize overlay on single DIV with id="info"
speed:500, //duration of animation in milliseconds
dir:'up' //supports 'up', 'down', 'left', or 'right'
})

$('div.imagecontainers').overlaycontent({ //initialize overlay on DIVs with class="imagecontainers"
speed:300,
dir:'right',
opacity:0.8 //opacity: 0 to 1
})

})

</script>

<style type="text/css">

div#springinfo, div#summerinfo, div#winterinfo{
background:white;
padding:5px;
}

</style>

Selamat mencoba dan tetap good luck!

0 Cara Membuat Efek Hover Image Yang Keren Seri 1


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

Tumpang tindih script di setiap DIV pada halaman
Anda amat sempurna dengan kotak overlay ketika
mouse terarah pada gambarnya. Dengan efek
pergeseran menimbulkan gambar atau teks yang lain
dibalik gambar yang pertama. Ditambah lagi dengan
adanya efek slide dari arah bawah menuju ke atas.

Contohnya dapat Anda lihat seperti di bawah ini :




Desain web adalah istilah yang luas digunakan untuk mencakup cara bahwa konten (biasanya hypertext atau hypermedia) yang dikirimkan ke pengguna akhir melalui World Wide Web, menggunakan web browser atau web lainnya yang memungkinkan perangkat lunak untuk menampilkan konten.


Dan berikut ini adalah cara membuatnya :

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

2.   Masukkan ke dalam kontennya
      kode berikut ini kemudian simpan.

<div id="info" style="width:250px;border:1px solid gray;padding:15px;background:#ADE0E3" data-overlayid="moreinfo">
Desain web adalah istilah yang luas digunakan untuk mencakup cara bahwa konten (biasanya hypertext atau hypermedia) yang dikirimkan ke pengguna akhir melalui World Wide Web, menggunakan web browser atau web lainnya yang memungkinkan perangkat lunak untuk menampilkan konten.
</div>

<div id="moreinfo">
<b>Contoh Website:</b><br />
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />

</div>

KETERANGAN :

Sesuaikan ukuran dan warna backgroundnya
dengan ukuran dan warna yang sesuai.

Ganti semua link yang ada pada kode di atas
dengan link apa saja yang Anda inginkan.

Ganti kalimat yang ada pada kode tersebut
dengan kalimat Anda sendiri.

Ganti juga URL gambarnya dengan URL
gambar yang Anda kehendaki.

3.   Kemudian masuk ke Edit HTML

4.   Carilah tag </head>

5.   Copy kode berikut dan letakkan
      di atas tag </head> ini.
      Pratinjau lalu simpan template Anda.

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

<script src="http://www.javascriptkit.com/script/script2/overlaybox.js">

/***********************************************
* DIV Content Overlay script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* User http://www.syamsudinnamaku.blogspot.com/
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/

</script>

<script>

jQuery(function($){ //on document.ready

$('#info').overlaycontent({ //initialize overlay on single DIV with id="info"
speed:500, //duration of animation in milliseconds
dir:'up' //supports 'up', 'down', 'left', or 'right'
})

$('div.imagecontainers').overlaycontent({ //initialize overlay on DIVs with class="imagecontainers"
speed:300,
dir:'right',
opacity:0.8 //opacity: 0 to 1
})

})

</script>

<style type="text/css">

div#moreinfo{
background:lightblue;
padding:10px;
background:lightblue url(http://www.javascriptkit.com/script/script2/pattern.png);
}

div#springinfo, div#summerinfo, div#winterinfo{
background:white;
padding:5px;
}

.imagecontainers{
float:left;
margin-right:10px;
}

</style>

Selamat mencoba dan tetap good luck!

0 Cara Membuat Efek Hover Pada Tombol


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

Masing-masing tombolnya dapat menampung teks
lebar variabel dan mendukung efek hover ketika
mouse berada di atasnya. Arahkan cursor Anda
tepat di atas tombol-tombol yang ada di bawah ini :






Cara Membuatnya, ikuti langkah berikut :

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

2.   Masukkan ke dalam kontennya
      kode berikut ini :

<div class="buttonwrapper" onClick="return false">
<a class="squarebutton" href="URL link 1"><span>Judul link 1</span></a> <a class="squarebutton" href="URL link 2" style="margin-left: 6px"><span>Judul link 2</span></a>
<a class="squarebutton green" href="URL link 3" style="margin-left: 10px"><span>Judul link 3</span></a>
<a class="squarebutton green" href="URL link 4" style="margin-left: 6px"><span>Judul link 4</span></a>
<a class="squarebutton orange" href="URL link 5" style="margin-left: 10px"><span>Judul link 5/span></a>
<a class="squarebutton orange" href="URL link 6" style="margin-left: 6px"><span>Judul link 6</span></a>
</div>

KETERANGAN :

Ganti URL dan Judul Linknya dengan URl
dan Judul apa saja yang Anda kehendaki.

3.   Kemudian masuk ke Edit HTML

4.   Carilah tag </head>

5.   Copy kode berikut dan letakkan
      di atas tag </head> ini.
      Pratinjau lalu simpan template Anda.

<style type="text/css">

a.squarebutton{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}

a.squarebutton span{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

a.green{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-green-left.gif') no-repeat top left
}

a.green span{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-green-right.gif') no-repeat top right;
}

a.orange{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-orange-left.gif') no-repeat top left
}

a.orange span{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-orange-right.gif') no-repeat top right;
}

a.blue{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-blue-left.gif') no-repeat top left
}

a.blue span{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-blue-right.gif') no-repeat top right;
}

a.red{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-red-left.gif') no-repeat top left
}

a.red span{
background: transparent url('http://www.dynamicdrive.com/cssexamples/media/square-red-right.gif') no-repeat top right;
}

</style>

Selamat mencoba, good luck!

0 Cara Membuat Efek Gambar Beterbangan


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

Tutorial ini hanya sekedar selingan tuk melepas kejenuhan
setelah berlama-lama di depan komputer.

Tidak perlu berbanyak kata karena bukan kata yang bisa
membuat Anda mengerti akan maksud dari tutorial ini.

Anda langsung lihat saja contohnya.
Perhatikan gambar yang sesekali melintas ke atas.







Anda mau mencoba ? Mau membuat yang seperti ini?
Ikutilah langkahnya yang berikut ini :


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

2.   Masukkan ke dalam kontennya
      kode berikut ini :

<div id="flySpawn" class='spawn'></div>
<script type='text/javascript'>
flyEffect.makeEffect("flySpawn", 24, 12);
flyEffect.makeEffect("flySpawn2", 24, 12);
</script>

3.   Masuk ke Edit HTML

4.   Cari tag </b:skin>

5.   Copy kode yang berikut ini lalu
      letakkan di atas tag tersebut.

.puff {
position: absolute;
left: -70px;
right: 50px;
top: 200px;
bottom: -100px;
}

6.   Cari lagi tag </head>

7.   Copy kode yang berikut ini lalu
      letakkanlah di atas tag tersebut.

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

<script type="text/javascript">
var flyEffect = {

imgLocation: "https://lh3.googleusercontent.com/-jNjKa-WDLHI/TlBXUusAusI/AAAAAAAABv4/X2lqfk0KJRY/raibow_smoke.png",
flyWidth: 500,
flyHeight: 150,

//don't touch this:
flyPos: new Array(),

makeEffect: function(id, posX, posY) {
//set position from the "parent"
flyEffect.flyPos[id] = new Array();
flyEffect.flyPos[id]['x'] = posX;
flyEffect.flyPos[id]['y'] = posY;

//set a random time to start puffing
var time = (Math.floor(Math.random()*3001));
setTimeout("flyEffect.animate('" + id + "')", time);
},

animate: function(id) {

//create the fly cloud
var puff = document.createElement("IMG");
$(puff).attr("src", flyEffect.imgLocation);
$(puff).attr("alt", "puff");
$(puff).attr("class", "puff");

//create a temp id for the cloud so we can delete it later on
var tempId = "puff" + Math.floor(Math.random()*1001);
$(puff).attr("id", tempId);

//append the cloud to the body
$(document.body).append($(puff));

var objPos = $('#' + id).offset();

//do fly animation
$(puff).css({
top: (objPos['top'] + flyEffect.flyPos[id]['y']) + "px",
left: (objPos['left'] + flyEffect.flyPos[id]['x']) + "px",
zIndex: 25,
opacity: 0.3
});
$(puff).animate({
width: flyEffect.flyWidth + "px",
height: flyEffect.flyHeight + "px",
marginLeft: "-" + (flyEffect.flyWidth / 2) + "px",
marginTop: "-" + (flyEffect.flyHeight * 1.5) + "px",
opacity: 0.7
},{
duration: 1000
}).animate({
marginTop: "-" + (flyEffect.flyHeight * 3.5) + "px",
opacity: 0.0
},{
duration: 2000
});

//create timeout and run the animation again
var time = 1500 + (Math.floor(Math.random()*5001));

setTimeout("flyEffect.animate('" + id + "')", time);

//remove the old one
setTimeout("$('#" + tempId + "').remove()", 4200);

}
}
</script>

KETERANGAN :

Gantilah URL image raibow_smoke yang terdapat
pada kode di atas dengan URL image milik Anda.

Sesuaikan ukuran image Anda pada kode
flyWidth: .........., flyHeight:...........

Selamat mencoba, good luck!

Minggu, 11 September 2011

0 Cara Membuat Menu Combo Link


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

Menu Combo Link ini hasil dari perkembangan Menu
Drop Down yang telah di bahas sebelumnya. Dengan
penambahan tombol " Go! " yang berada di samping
kanan atau di bawahnya, menjadikan Menu ini jadi
berbeda dengan Menu-Menu Drop Down sebelumnya.

Contohnya seperti di bawah ini. Pilihlah salah satu link
yang ada, setelah itu Anda klik tombol " Go! " untuk
menuju ke link yang Anda pilih tadi.





Ikuti cara yang berikut bila Anda ingin mencoba :

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

2.   Masukkan ke dalam kontennya
      kode berikut ini lalu simpan

<div align="left">
</div>
<form name="mycombo">
<select name="syam" size="1"> <option value="URL link 1">Nama link 1 </option><option value="URL link 2">Nama link 2 </option><option value="URL link 3">Nama link 3 </option><option value="URL link 4">Nama link 4 </option></select>
<script language="javascript">
<!--
function go()
{
location=
document.mycombo.syam.options[document.mycombo.syam.selectedIndex].value
}
//-->
</script>
<input name="test" onclick="go()" type="button" value="Go!" /></form>

KETERANGAN :

Masukkan URL Link Anda
pada tempat yang tersedia.

Berikan juga nama dari link
yang Anda masukkan tersebut.

Tambahkan lagi URL Linknya
sesuai kebutuhan Anda.

Selamat mencoba dan tetap good luck!

0 Memasang Gambar Animasi Bubbles


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

Gambar Animasi Bubble buatan Pageplugins ini dapat Anda
gunakan sebagai sarana untuk pengucapan selamat datang
buat para pengunjung yang datang mengunjungi blog Anda
atau untuk apa saja sekehendak hati Anda.

Contohnya seperti gambar yang di bawah ini :




<center><embed src="http://www.pageplugins.com/generators/bubbles/bubbles.swf" FlashVars="t1=Selamat datang
dan terima kasih
atas kunjungannya.&pt=0&dom=http://www.PagePlugins.com" quality="high" wmode="transparent" width="380" height="450" name="Bubbles" align="middle" allowScriptAccess="samedomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed><br><a href="http://www.PagePlugins.com">Myspace Bubbles Note Generator</a></center>



<center><embed src="http://www.pageplugins.com/generators/bubbles/bubbles.swf" FlashVars="t1=Selamat datang
dan terima kasih
atas kunjungannya.&pt=1&dom=http://www.PagePlugins.com" quality="high" wmode="transparent" width="380" height="450" name="Bubbles" align="middle" allowScriptAccess="samedomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed><br><a href="http://www.PagePlugins.com">Myspace Bubbles Note Generator</a></center>

KETERANGAN :

Masukkan kodenya dalam konten Gadget HTML/JavaScript.

Gantilah kalimat Selamat datang dan terima kasih
atas kunjungannya dengan kalimat apa saja yang
Anda inginkan tetapi dengan catatan tidak lebih
daripada 60 karakter (huruf).

Atur ukuran width dan heightnya untuk disesuaikan
dengan ukuran sidebar blog Anda namun hendaknya
dengan ukuran yang proposional (seimbang).

Selamat mencoba dan tetap 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 *