daftar isi 2

daftar isi

Cara Menambah Background di Posting Blog

Selamat siang Guys.
Akhirnya saya dapat berposting lagi setelah saya sembuh dari sakit....
Baiklah tidak perlu panjang lebar, kita lansung saja ke cara pembuatannya :
seperti biasa
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. cari code : .post { (Jika tidak ketemu maka letakkan kode berikut diatas kode ]]></b:skin> )
Lalu hapus kode diatas, lalu ganti dengan kode berikut :

.post {
margin: 0px 20px 0px 0px;
height:100%;
color:#000;
padding:10px 0px;
background:url("http://i56.tinypic.com/wiuhq1.png") no-repeat scroll 0 0 black; background-position:bottom left;
-o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out}

::: Tapi Jika Anda sudah mempunyai code .post { di template anda,mka anda tinggl memasukkan kode yang berwarna KUNING diantara kode .post { ditempalte anda.

Sebagai contoh :
.post {
-----
---
background:url("http://i56.tinypic.com/wiuhq1.png") no-repeat scroll 0 0 black; background-position:bottom left;
-o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out

}
5. Save Template,..

Sekarang lihat hasilnya.

GOOD LUCK

Cara membuat Floating Top Bar

Sudah lama ini aku tidak pernah posting jadi kangen pengen posting sudah langsung aja.
yang pertama seperti biasa Anda login blogger dulu
plih rancang
tambah di gadget baru HTML javascript

Copy Code Dibawah ini

<style type="text/css">

#float-japarus{
background-color:#61380B;
position:absolute;
visibility:hidden;
z-index:100;
border:2px
#FFFFFF groove;
-moz-border-radius:8px;
padding-top:6px;
padding-left:1px;
padding-bottom:3px;
padding-right:1px;
-moz-opacity:0.63;
filter:alpha(opacity=63);opacity:0.63;
}
#float-japarus a img{
color:transparent;text-decoration:none;border:none;
}
</style>

<script language="javascript">

/***************************************************************
* Floating Top Bar script - Dynamic Drive (http://www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* Simplified Floating by !CrazyDavinci! (http://crazydavinci.net)
* editing floating by japarus.co.tv
* Visit http://www.dynamicdrive.com/ for full source code
***************************************************************/
startX = parseInt(screen.width/2)+500;startY = parseInt(screen.height/2)-110
function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
function staticbar(){
ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
d = document;
el= d.getElementById("float-japarus");
barheight= el.offsetHeight;
function ml(id){
el.style.cssText="visibility:visible;width:75px";if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.x = startX;el.y -= startY;return el;
}
window.stayTopright=function(){
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("stayTopright()", 10);
}
ftlObj = ml("float-japarus");stayTopright();
}
if (window.addEventListener) window.addEventListener("load", staticbar, false);
else if (window.attachEvent) window.attachEvent("onload", staticbar);
else if (document.getElementById) window.onload=staticbar </script>

<div id ="float-japarus" align="center">
<a href="http://hisyamyahya.wapsite.me/" target="_blank">
<img src="http://a3.twimg.com/profile_images/1576855477/227353_211134618911544_100000450229512_736542_8261709_a_normal.jpg  " width="70px" /></a><blink><font face="Times New Roman" size="2,8" color="#FF0000"><br />About Me<br /></font></blink></div>

 oke untuk tulisan yang berwarna merah bisa kalian ganti dengan URL kamu.
Yang Berwarna Putih kalian ganti Dengan Gambar Kalian.
Dan untuk yang berwarna Kuning Bisa kalian ganti sesuka Anda

Artikel Tidak Bisa Di Block/ Tidak Bisa Di Copy

wah sudah lama ini aku tidak posting jadi  kangen nie

oke teman teman langsung saja artikel kali ini yaitu cara buat artikel tidak bisa diblock/ tidak bisa di copy..??
bila kalian mau
Silahkan ikuti langkah-langkahnya:

1. Masuk ke Dasbor
2. Klik tab Tata Letak
3. Klik tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode <head>
6. Kalau sudah ketemu, anda Copy Pastekan script yang ada dibawah ini "Persis setelah kode <head> ".


kode:

<SCRIPT type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</SCRIPT>

Selesai DEMO BISA coba DISINI

creat by
japarus

foto berputar -putar saat di sentuh oleh mouse

hy sobat blogger kali ini materinya adalah cara membuat foto berputar -putar saat di sentuh oleh mouse

dan ini gambarnya 

kalau masih tidak percaya klik DEMO

LANGSUNG KE TUTORIAL AJa

Berikut langkah - langkah nya
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode ]]></b:skin>
Kemudian paste kode ini di atas nya

kode:

#japarusimgfb:hover{-o-transform: scale(1.2) rotate(360deg) translate(0px);-moz-transform: scale(1.2) rotate(360deg) translate(0px);-webkit-transform: scale(1.2) rotate(360deg) translate(0px);-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}
#japarusimgfb{-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}

Kemudian Masuk Kebagian rancangan, tambah gatget HTMLjavascript
paste kode di bagian ..


kode:

<div id='japarusimgfb'><center><a href="URL FACEBOOK ANDA" target="_blank"title="Hisyam"><img src="URL FOTO FACEBOOK ANDA" width="120" height="203" style="border: 0px;" /></a></center></div>

NB ..
dibagian URL FACEBOOK ANDA, ganti dengan URL facebook anda misal Http://www.facebook.com/hisam.yahya

dibagian URL FOTO FACEBOOK ANDA, ganti dengan url foto anda, misal
http://a3.twimg.com/profile_images/1576855477/227353_211134618911544_100000450229512_736542_8261709_a_reasonably_small.jpg

Good Luck

creat by
japarus

Mematikan Fungsi Pada Keyboard,Dan Anti Klik Kanan..???

hy para sobat blogger learning kali ini aku memberi meteri cara mematikan fungsi keyboard, anti klik kanan, dan tulisannya tidak bisa di copy. 

bagi yang mau caranya langsung saja ke TKP .

 login blog kalian  masing masing

1. ke "Edit HTML"
2. Centeng Expand Widget Template
3. Cari <body>
4.ganti dengan kode ini: 

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

simpan ...

Cara Membuat Artikel Terkait (Related Post) dengan efek Animasi Miring

hy teman teman Blog Learing. Pada kali ini saya akan memberikan cara membuat Artikel terkait (Related Post) dengan efek animasi miring.

Dan kegunaannya adalah menampilkan artikel terkait berdasarkan kategorinya,

jika kalian masih penasaran, maka seperti apa yah tampilannya, maka Saya akan memperlihatkan Gambarnya seperti di bawah ini:

Tampilan Dasar:

Tampilan Saat Di Sorot

Bagi kalian yang tertarik atau Anda ingin membuatnya. Silhakan ikuti langkah - langkah berikut ini:

1. Login ke Akun Blogspot, Anda

2. Klik Design atau rancangan kemudian pilh edit HTML

3. centang Expand Templates Widget,(download template Anda dahulu)

4. Lalu cari kode :<data:post.body/>, bagi yang sudah memasang read more akan ada dua kode nah ambil kode yang pertama, lalu copy kode berikut ini di bawah :<data:.post.body/>

<!-- Related Posts Scroll Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait :</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>
<!-- Related Posts Scroll Code End-->

Sedikit Tambahan sobat:::.

• silahkan ganti tulisan yang berwarna Kuning sesuai kehendak kalian....
• jika Nanti Artikel Terkait diatas Tidak Muncul dibawah posting Kalian, maka kode diatas sobat simpan dibawah kode :<data:post.body/>yang 'kedua' (lebih tepatnya dibawah tag </b:if>).

5. Selanjutnya Anda Cari kode : ]]></b:skin> lalu copy code di bawah ini : dan letakkan tepat diatas kode : ]]></b:skin>

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #FFF;-moz-border-radius:5px; margin:5px;opacity:0.9; filter:alpha(opacity=40); this.style.opacity=6;box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;}
.rbbox:hover{background:url(http://i634.photobucket.com/albums/uu66/oktri_2009/L8e18979.gif) no-repeat right bottom #fff;-moz-border-radius:5px;margin:5px;padding:5px;box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #F70000;transform:rotate(-3deg); -moz-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -o-transform:rotate(-3deg)}

Sedikit Tambahan ::.

• Teks yang berwarna merah itu adalah gambar yg akan muncul saat" mouse" disorot.
• teks yang berwarna biru itu adalah warna BOX Shadow' sebelum atau saat "mouse" disorot, kalian bisa menggantinya dengan warna lainnya.
• sedangkan teks yang berwarna Orange, itu adalah 'Rotate Miring' saat 'Mouse'disorot.makin besar angkanya, maka akan semakin Miring, kalian tinggal merubah angkanya.

6. Terakhir Save templates Anda... dan lihat hasilnya......????

Good Lauck

Cara MerubahTampilan Kolom Komentar dengan Efek Bubble

Hallo pengujung blog Learning. pada posting kali ini saya akan mengajarakan cara merubah tampilan kolom komentar dengan efek bubble.
dan ini hasil screen shoot kotak komentar efek bubble:

jika anda tertarik ingin membuatnya langsung saja ikuti langkah -langkah berikut ini:
1. login ke account blogger Anda
2. klik design atau Rancangan  kemudian pilih edit HTML 
3. Centang Espand Widget Template (Dan saya anjurkan download dahulu template Anda
4. cari kode  ]]></b:skin> lalu copy code di bawah ini :  ( dan letakkan di atas kode diatasnya)

/* Comment */
#bg_commentblock {color:#fff;width:598px;background:transparent;float: left;padding:10px;margin:0px}
#bg_commentblock li{list-style:none}
div .comment-body a{color:#0080ff}
div .comment-body a:hover{color:#fff}
.comment-body {background:transparent;text-shadow:2px 2px 2px #000;padding:5px 0px 0px 7px;-moz-border-radius:10px;margin:15px 0px 20px 0px;border:1px solid#aaa;color:#fff}
.comment-body:hover{background:#000; opacity:0.8; font-size:16px;box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #33F;}
.comment-body-author {background:#666;background:-moz-linear-gradient(top,#fff,#fbefd9);padding:5px 0px 0px 7px;-moz-border-radius:10px;margin:15px 0px 20px 0px;border:1px solid #aaa;color:#fff}
.comment-list li a{color:#00a}
.sg1 {position:relative;top:-29px;left:5px;border-color: transparent transparent #aaa transparent;border-style:solid;border-width:12px;height:0;width:0;}
.sg2 {position:relative;top:0px;left:5px;border-color: transparent transparent #fff transparent;border-style:solid;border-width:12px;height:0;width:0;margin-top:-52px;}
.commentblock {text-align:left;padding:0;margin:0;}
.commentblock a{color:#666;}
.commentblock a:hover{color:#fff;}
#comment-editor{height:300px;width:618px;margin:0;padding:0;}
.commentlist {margin-top:10px}
.commentlist li {list-style:none;margin-bottom:px;line-height: 20px;padding: 0px;}
.author-name a {color:#ff5500}
.author-name a:hover {color:#fff}

KET::
--> Ubah teks berwarna biru diatas sesuai dengan kalkulasi berikut :
Lebar main-wrapper dikurangi 22px.
--> Contoh, Jika lebar main wrapper anda adalah 410px, maka sesuai dengan kalkulasi diatas, lebar tersebut kemudian dikurangi sebesar 22px.
410px – 22px = 388px
Hasil tersebut lah yang kemudian harus di gantikan pada teks berwarna biru diatas.
--> Ganti kode berwarna merah dengan kode warna background yang anda inginkan.
--> Ganti kode berwarna hijau dengan kode warna border/garis pinggir yang anda inginkan.

5. Selanjutnya,cari seluruh kode berikut :

<dl class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
</b:if>
</dt>pada hari&#160;<dd class='comment-footer' style='display:inline; margin:0px'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd></span>
<dd class='commenttext'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:loop>
</dl> 

6. Lalu Ganti Semua kode diatas dengan kode berikut ini :

<dl class='commentlist'><b:loop values='data:post.comments' var='comment'>
<li class='comment' id='li-comment'><div id='commentblock'><div class='comment-author vcard'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/></b:if>
<a expr:name='data:comment.anchorName'/><b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/></b:if><div class='author-name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a><b:else/>
<data:comment.author/></b:if></div></div><div class='comment-meta'>             
<a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/></div><div class='comment-body'>
<div class='sg1'/><div class='sg2'/><b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span><b:else/><p><data:comment.body/>
<span class='interaction-iframe-guide'/></p></b:if></div></div></li></b:loop></dl> 

7. Simpan hasil kerja anda. Kini kolom komentar anda sudah lebih cantik bukan ?

 Good Luck

membuat blockquote indah dengan efek hover

Hallo Pengunjung Learning Blog, pada postingan kali ini saya akan mengajarkan cara membuat blockquote indah dengan efek hover.akan aku jelaskan sedikit tentang blockquote.
blockquote adalah kutipan yang bisa digunakan  untuk mengutip perkataan orang lain atau menjelaskan intisari dari suatu bacaan.:
kalo ingin melihat demonya silhakan klik disini
dan ini hasil secreen shootnya bisa dilihat

CONTOH BLOCKQUOTE SEBELUM DI HOVER

 CONTOH BLOCKQUOTE SESUDAH DI HOVER
kalau anda tertarik anda bisa mencobanya.??
berikut langkah - langkah pembuatannya.
1. Login ke Akun Blogger anda masing - masing 
2. Klik Design atau Rancangan, kemudian pilih edit HTML
3. Centang Expand Widget Template (Dan saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin>
lalu letakkan kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin>.

.post-body{margin:10px 5px;padding:0px}

.post-body blockquote {overflow:auto; height:220px; background-position:-10px -7px; border: 1px dashed #fff; margin: 10px; padding: 10px; background:#666; text-align: justify; line-height:1.4em;

opacity:0.9; filter:alpha(opacity=95); this.style.opacity=6;border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 10px #33F}

.post-body blockquote:hover{color:#fff; font-size:15px; background:#000;

opacity:0.9; filter:alpha(opacity=95); this.style.opacity=6;border-radius:15px; -moz-border-radius:5px; -webkit-border-radius:15px; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #000000; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #000000; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #000000;}

.post blockquote{ margin:1em 15px}

.post blockquote p{ margin:.75em 0}

Sobat perhatikan kode CSS diatas, sobat dapat mengeditnya dengan mengganti teks yang berwarna merah.
5. Terakhir Save template, dan lihat hasilnya.....


cara penggunaanya adalah
masuk ke entri baru terus pilih edit html..
kalau sudah ketikan kode ini <blackquote>Teks </blackquote>
atau anda bisa masuk setelan pilih Templat Entri kalau sudah masukan code <blackquote>teks</blackquote>

good luck 

Javascript Disable Keybord

Helo Pengunjung Learning Blog,Pada postingan kali ini saya ingin share javascript untuk mendisable fungsi keyboard di blog. Jadi ketika seorang menekan tombol keyboard di blog nya, akan ada pesan/alert kalo tombol keyboard di disable pada halaman itu.


Pada Prinsip nya tips ini tidak beda jauh Pada tutorial disable klik kanan pada blog,namun pada tutorial ini disable keybord,






Ok, langsung aja ikuti cara di bawah ini.Berikut langkah-langkahnya:
1. Masuk (Login) ke Dashboard Blogger anda.
2. Pilih Rancangan >> Element laman
3. Kemudian Tambahkan Gadged/Widget, pilih HTML/JavaScript.
4.Masukan Kode dibawah ini pada halaman HTML/JavaScript

<script>
function keypress() {
alert("Maaf, Fungsi Keyboard Di Non-aktifkan Pada Blog Ini !!");
}
document.onkeydown=keypress;
</script>
Kamu bisa mengganti kata2 yang berwarna biru sesuai dengan keinginanmu..

5. Simpan


Liat hasilnya ,semoga Bermanfaat

Cara Membuat Cursor following menu

Hello Pengunjung Learning Blog Kali ini saya postingkan adalah menu following cursor atau menu yang dari kata-kata nya adalah menu navigasi yang mengikuti kursor secara otomatis, selain itu juga menu ini mempunyai efek show hide untuk menu navigasi nya, untuk demonya kawan-kawan bisa lihat pada kursor blog ini, cukup dengan mengklik Tag +menu yang mengikuti kursor akan membuka menu navigasi yang dibuat, dan menggeser mouse untuk menutup menu show hide nya,,,, dan untuk selengkapnya bisa kawan baca di web ini malihu




Berikut Ini langkah - Langkah Membuat nya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]></b:skin>
3. Dan Simpan kode berikut diatasnya :

/* ---------------
cursor following menu
---------------------------------- */
#cf_menu{position:absolute; display:inline-block; z-index:10; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; cursor:pointer; top:0; left:0; background:url(empty.gif);} /* stupid IE needs a background value */
#cf_menu .containerfollow{position:relative; font-family:Arial, Helvetica, sans-serif; font-size:10px;}
#cf_menu .title{position:relative; display:inline-block; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background:#333; font-size:10px; text-transform:uppercase; text-decoration:none; margin:1px; color:#fff; padding:5px 8px;}
#cf_menu ul{margin:0; padding:0; list-style:none; display:none;}
#cf_menu ul li{margin:0; padding:0;}
#cf_menu ul ul{margin:0 0 0 2px; padding:0; list-style:none; display:inline-block;}
#cf_menu ul ul li{margin:0 2px 0 0; padding:0; display:inline-block;}
#cf_menu a:link,#cf_menu a:visited{position:relative; display:inline-block; -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; font-size:10px; text-transform:uppercase; text-decoration:none; margin:1px 1px 5px 1px; padding:5px 8px; border-bottom:1px solid #f33; border-right:1px solid #f33; color:#fff; background:#f33;}
#cf_menu a:hover{background:#fff; color:#000; border-bottom:1px solid #000; border-right:1px solid #000;}
#cf_menu ul ul a:link,#cf_menu ul ul a:visited{background:#333; color:#ddd; border-bottom:1px solid #333; border-right:1px solid #333;}
#cf_menu ul ul a:hover{background:#fff; color:#000;}
.cf_menu_transparency{filter:alpha(opacity=25); -moz-opacity:0.25; -khtml-opacity:0.25; opacity:0.25;}

4. Simpan script berikut diatas kode </head> :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://oktriblog.googlecode.com/files/jquery.easing.1.3panning.js"></script>

5. Simpan script berikut diatas kode </body> :

<script type="text/javascript">
//cursor following menu config
$mouseover_title="+ MENU"; //menu title text on mouse-over
$mouseout_title="MENU"; //menu title text on mouse-out
$menu_following_speed=2000; //the speed in which the menu follows the cursor (in milliseconds)
$menu_following_easing="easeOutCirc";
$menu_cursor_space=30; //space between cursor and menu
$menu_show_speed="slow"; //menu open animation speed
$menu_show_easing="easeOutExpo"; //menu open animation easing type
$menu_hide_speed="slow"; //menu close animation speed
$menu_hide_easing="easeInExpo"; //menu close animation easing type
</script>
<script src="http://kangdadang.googlecode.com/files/malihu.jquery.cfm.js"></script>

6. Pemanggilannya simpan kode berikut dibawah kode <body> :

<div id="cf_menu">
<div class="containerfollow">
<div class="title">MENU</div>
<ul id="cf_menu">
<li><a href="#" onclick="Animate2id('#home');return false">&uarr;Home</a></li>
<li><a href="#" onclick="Animate2id('#about');return false">About me</a></li>
<li><a href="work">+ Work</a>
<ul>
<li><a href="#" onclick="Animate2id('#recent');return false">Recent</a></li>
<li><a href="#" onclick="Animate2id('#web');return false">Web</a></li>
<li><a href="#" onclick="Animate2id('#print');return false">Print</a></li>
</ul>
</li>
<li><a href="#" onclick="Animate2id('#blog');return false">Blog</a></li>
<li><a href="links">+ Interesting links</a>
<ul>
<li><a href="#" onclick="Animate2id('#freebies');return false">Freebies &amp; Resources</a></li>
<li><a href="#" onclick="Animate2id('#people');return false">People</a></li>
</ul>
</li>
<li><a href="#" onclick="Animate2id('#contact');return false">Contact</a></li>
<li><a href="info">+ Script info</a>
<ul>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>

7. Simpan template dan selesai..... semoga bermanfaat :)

Menghilangkan Tulisan "Tampilkan Entri Lawas"

Saat kita memilih suatu label dengan mengkliknya, maka kita akan dibawa ke halaman yang menampilkan semua postingan yang berlabel itu. Dan juga dihalaman itu pasti ada tulisan menampilkan entri terbaru dengan label ... "Tampilkan Entri Lawas" dalam kotak yang berada diatas halaman postingan. Mungkin ada yang menggangap tidak terlalu bermasalah atau menggangu tulisan itu. Tapi juga ada yang menggangap tulisan "Tampilkan Entri Lawas" menggangu dan ingin menghilangkannya. Untuk kita yang ingin menghilangkan tulisan "Tampilkan Entri Lawas" bisa mengikuti langkah berikut.

Berikut Cara Menghilangkan Tulisan "Tampilkan Entri Lawas"
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

7. Setelah ketemu, hapus Semua kode di atas, lalu ganti dengan kode berikut :

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

8. Simpan Template jika sudah selesai.

Membuat Link Berkedip Ala Pelangi

Perhatikan semua link yang terdapat di dalam blog saya, coba sobat sorot dan lihat hasilnya.
Tampak link yang disorot akan berkelip warna-warni seperti pelangi, hehe..

Jika para sobat tertarik untuk memasangnya di blog, silahkan untuk mengikuti langkah-langkah berikut ini :
1. Login Ke Blogger Menggunakan ID sobat
2. Klik "Tata Letak"
3. Klik "Edit HTML"
4. Lalu cari kode seperti ini : </head>
Kemudian copy paste kode dibawah ini tepat diatas code </head>

<script src='http://miscah.googlecode.com/files/rainbow.js'/>

5. Setelah itu "Simpan Template"

Buat Judul Blog Pada Adress Bar Bergerak

Artikle kali ini saya membahas bagaimana cara membuat judul address bar menjadi tambah keren,
triks kali ini hampir sama dengan yang dulu itu tapi hanya beda bentuknya doang.tidak usah panjang lebar lagsung aja . .
Disini saya akan memberikan beberapa code script dan pastinya berbeda-beda.

SCRIPT 1 :

<script type="text/javascript">
//<![CDATA[
function tb9_makeArray(n){
this.length = n;
return this.length;
}
tb9_messages = new tb9_makeArray(1);
tb9_messages[0] = "++ [[> Welcome to my Blog <]] ++ [[> Hisyam <]] ++ [[> Learning City <]] ++";
tb9_rptType = 'infinite';
tb9_rptNbr = 5;
tb9_speed = 100;
tb9_delay = 2000;
var tb9_counter=1;
var tb9_currMsg=0;
var tb9_timerID = null
var tb9_bannerRunning = false
var tb9_state = ""
tb9_clearState()
function tb9_stopBanner() {
if (tb9_bannerRunning)
clearTimeout(tb9_timerID)
tb9_timerRunning = false
}
function tb9_startBanner() {
tb9_stopBanner()
tb9_showBanner()
}
function tb9_clearState() {
tb9_state = ""
for (var i = 0; i < tb9_messages[tb9_currMsg].length; ++i) {
tb9_state += "0"
}
}
function tb9_showBanner() {
if (tb9_getString()) {
tb9_currMsg++
if (tb9_messages.length <= tb9_currMsg) {
if ((tb9_rptType == 'finite') && (tb9_counter==tb9_rptNbr)){
tb9_stopBanner();
return;
}
tb9_counter++;
tb9_currMsg=0;
}
tb9_clearState()
tb9_timerID = setTimeout("tb9_showBanner()", tb9_delay)
}
else {
var tb9_str = ""
for (var j = 0; j < tb9_state.length; ++j) {
tb9_str += (tb9_state.charAt(j) == "1") ? tb9_messages[tb9_currMsg].charAt(j) : "____"
}
document.title = tb9_str
tb9_timerID = setTimeout("tb9_showBanner()", tb9_speed)
}
}
function tb9_getString() {
var full = true
for (var j = 0; j < tb9_state.length; ++j) {
if (tb9_state.charAt(j) == 0)
full = false
}
if (full) return true
while (1) {
var num = tb9_getRandom(tb9_messages[tb9_currMsg].length)
if (tb9_state.charAt(num) == "0")
break
}
tb9_state = tb9_state.substring(0, num) + "1" + tb9_state.substring(num + 1, tb9_state.length)
return false
}
function tb9_getRandom(max) {
var now = new Date()
var num = now.getTime() * now.getSeconds() * Math.random()
return num % max
}
tb9_startBanner()

//]]>
</script>

SCRIPT 2 :

<script type='text/javascript'>
//<![CDATA[
msg = " --- welcome to my blog--- ";
msg = " --Terimah kasih sudah mau berkunjung--" + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",100);
}
scrollMSG();
//]]>
</script>

SCRIPT 3 :

<script type="text/javascript">
//<![CDATA[

var message = new Array() // leave this as is

message[0] = "Welcome to my Blogger !";
message[1] = "yOu Was EnTeREd To HeLL aReA";
message[2] = "bUt, YoU wIll nOt DeAtH hErE";
message[3] = "jUst keEp EnJoY !!";
message[4] = "Don't fOrgEt...";
message[5] = "LeaVe mE a cOoL cOmment !!";
var reps = 2
var speed = 100
var p=message.length;
var T="";
var C=0;
var mC=0;
var s=0;
var sT=null;
if(reps<1)reps=1;
function doTheThing(){
T=message[mC];
A();}
function A(){
s++
if(s>9){s=1}
if(s==1){document.title='[U====] '+T+' [====U]'}
if(s==2){document.title='[=T===] '+T+' [===T=]'}
if(s==3){document.title='[==T==] '+T+' [==T==]'}
if(s==4){document.title='[===A=] '+T+' [=A===]'}
if(s==5){document.title='[====>] '+T+' [<====]'}
if(s==6){document.title='[===A=] '+T+' [=A===]'}
if(s==7){document.title='[==T==] '+T+' [==T==]'}
if(s==8){document.title='[=T===] '+T+' [===T=]'}
if(s==9){document.title='[U====] '+T+' [====U]'}
if(C<(8*reps)){
sT=setTimeout("A()",speed);
C++
}else{
C=0;
s=0;
mC++
if(mC>p-1)mC=0;
sT=null;
doTheThing();}}
doTheThing();
//]]>
</script>

SCRIPT 4 :

<script type='text/javascript'>//<![CDATA[
var message = new Array() // leave this as is
message[0] = "Hisyam Yahya";
message[1] = "Hisyam Yahya";
message[2] = "Hisyam Yahya";
message[3] = "Hisyam Yahya";
message[4] = "Hisyam Yahya";
message[5] = "Hisyam Yahya";
var reps = 2
var speed = 0
var p=message.length;
var T="";
var C=0;
var mC=0;
var s=0;
var sT=null;
if(reps<1)reps=1;
function doTheThing(){
T=message[mC];
A();}
function A(){
s++
if(s>9){s=1}
if(s==1){document.title='<+=**=+[ '+T+' ]=+=**=>'}
if(s==2){document.title='<=+=**=[ '+T+' ]+=**=+>'}
if(s==3){document.title='<+=**=+[ '+T+' ]=**=+=>'}
if(s==4){document.title='<=**=+=[ '+T+' ]+=**=+>'}
if(s==5){document.title='<+=**=>[ '+T+' ]<=+=**>'}
if(s==6){document.title='<=**=+=[ '+T+' ]+=**=+>'}
if(s==7){document.title='<+=**=+[ '+T+' ]=**=+=>'}
if(s==8){document.title='<=+=**=[ '+T+' ]+=**=+>'}
if(s==9){document.title='<+=**=+[ '+T+' ]=+=**=>'}
if(C<(8*reps)){
sT=setTimeout("A()",speed);
C++
}else{
C=0;
s=0;
mC++
if(mC>p-1)mC=0;
sT=null;
doTheThing();}}
doTheThing();
//]]>
</script>

SCRIPT 5 :

<script language="javascript">
var rev = "fwd";
function titlebar(val)
{
var msg = "Hisyam Yahya111";
var res = " ";
var speed = 100;
var pos = val;
msg = " |--- "+msg+" ---|";
var le = msg.length;
if(rev == "fwd"){
if(pos < le){
pos = pos+1;
scroll = msg.substr(0,pos);
document.title = scroll;
timer = window.setTimeout("titlebar("+pos+")",speed);
}
else{
rev = "bwd";
timer = window.setTimeout("titlebar("+pos+")",speed);
}
}
else{
if(pos > 0){
pos = pos-1;
var ale = le-pos;
scrol = msg.substr(ale,le);
document.title = scrol;
timer = window.setTimeout("titlebar("+pos+")",speed);
}
else{
rev = "fwd";
timer = window.setTimeout("titlebar("+pos+")",speed);
}
}
}
titlebar(0);
</script>

Ket :
teks yang berwarna Kuning diatas anda ganti dengan nama yang anda inginkan.

Dan Berikut Langkah-langkah nya :
1. login terlebih dahulu pastinya.
2. Masuk ke tata letak (layout) >> Edit HTML
3. Cari code <b:skin> kalo udah ketemu copy salah satu code Script diatas, lalu letakan tepat di atasnya code<b:skin>



Semoga bermanfaat yach,..

Cara Menambah Background Di Postingan Blog

Akhirnya saya menyempatkan diri untuk mengupdate blogger saya ini, dan berhubung ad slah teman kita yang menanyakan kepda saya, "Kakak gimana caranya kasih backgraund di posting ?? kayak punya kakak yang sekarang".baiklah disini saya akan mencoba memberikan trik menambah 'Background di Posting Blog', walau sebentar ini trik yang sangat mudah.heheeg.

Baiklah tidak perlu panjang lebar, kita lansung saja ke cara pembuatannya :
seperti biasa
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. cari code : .post { (Jika tidak ketemu maka letakkan kode berikut diatas kode ]]></b:skin> )
Lalu hapus kode diatas, lalu ganti dengan kode berikut :

.post {
margin: 0px 20px 0px 0px;
height:100%;
color:#fff;
padding:10px 0px;
background:url("http://i56.tinypic.com/wiuhq1.png") no-repeat scroll 0 0 black; background-position:bottom left;
-o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out}

Tapi Jika Anda sudah mempunyai code .post { di template anda,mka anda tinggl memasukkan kode yang berwarna BIRU diantara kode .post { ditempalte anda.
dan tulisan yang berwarna KUNING bisa kalian ganti dengan Gambar Kalian Sendiri

Sebagai contoh :
.post {
-----
---
background:url("http://i56.tinypic.com/wiuhq1.png") no-repeat scroll 0 0 black; background-position:bottom left;
-o-transition:1s ease-out; -moz-transition:1s ease-out; -webkit-transition:1s ease-out


}
5. Save Template,..

Sekarang lihat hasilnya.

Cara Membuat Background Animasi pada Judul Posting

Background animasi yang dipadukan dengan judul posting akan mampu menciptakan sebuah penampilan baru yang memberi nuansa baru pada blog. Background animasi ini akan membuat judul posting mempunyai latar belakang/bacground baru yang sangat jauh berbeda dari bentuk semula. Variasi animasi background yang dapat digunakan sebenarnya amatlah banyak, akan tetapi kali ini akan kita coba tampilkan sebuah background animasi pelangi yang sangat menarik untuk dimanfaatkan guna memperindah tampilan blog. Contoh bentuk Judul posting yang menggunakan background animasi :

1. Background Pelangi (Animated Rainbow Background) :

Judul Posting - Judul Posting - Judul Posting

1. Blink (Blink Animation) :

Judul Posting - Judul Posting - Judul Posting

Langkah untuk membuat Background Animasi Pelangi pada Judul Posting :

1. Login ke Blogger.
2. Amankan Template.
3. Tetap di Edit HTML.
4. Cari KODE

.post h3 a{
margin: ...px;
font-size: ...%/px;
...
...
}

Ganti dengan KODE baru :

.post h3 a{
background:transparent url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/bgsGRbgRainbow.gif);
display:block;
padding:2px 4px;
text-align:center;
margin: ...px;
font-size: ...%/px;
...
...
}

Bila KODE pada template kamu hanya berupa :

.post h3 {
margin: ...px;
...
...
}

Ganti dengan KODE seperti di atas (ada penambahan "a").

Bila ingin menambahkan border di atas dan di bawah judul posting seperti contoh gambar di atas, tambahkan KODE :

border-top:2px dotted red;
border-bottom:2px dotted red;

Sehingga bentuk KODE baru-nya menjadi seperti ini :

.post h3 a{
background:transparent url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/bgsGRbgRainbow.gif);
display:block;
padding:2px 4px;
text-align:center;
border-top:2px dotted red;
border-bottom:2px dotted red;
margin: ...px;
font-size: ...%/px;
...
...
}

membuat titel berjalan pada blog

tips ini akan membuat titlebok anfda berjalan dibrowse anda


Pertama kamu login dulu di blogger
terus klik layout, edit html, cari kode </head>
kalo uda ketemu copas kode dibwah diatas kode diatas:

<script type='text/javascript'>
//<![CDATA[
function tb9_makeArray(n){
this.length = n;
return this.length;
}
tb9_messages = new tb9_makeArray(1);
tb9_messages[0] = "selamat datang di blog saya";
tb9_rptType = 'infinite';
tb9_rptNbr = 5;
tb9_speed = 100;
tb9_delay = 2000;
var tb9_counter=1;
var tb9_currMsg=0;
var tb9_timerID = null
var tb9_bannerRunning = false
var tb9_state = ""
tb9_clearState()
function tb9_stopBanner() {
if (tb9_bannerRunning)
clearTimeout(tb9_timerID)
tb9_timerRunning = false
}
function tb9_startBanner() {
tb9_stopBanner()
tb9_showBanner()
}
function tb9_clearState() {
tb9_state = ""
for (var i = 0; i < tb9_messages[tb9_currMsg].length; ++i) {
tb9_state += "0"
}
}
function tb9_showBanner() {
if (tb9_getString()) {
tb9_currMsg++
if (tb9_messages.length <= tb9_currMsg) {
if ((tb9_rptType == 'finite') && (tb9_counter==tb9_rptNbr)){
tb9_stopBanner();
return;
}
tb9_counter++;
tb9_currMsg=0;
}
tb9_clearState()
tb9_timerID = setTimeout("tb9_showBanner()", tb9_delay)
}
else {
var tb9_str = ""
for (var j = 0; j < tb9_state.length; ++j) {
tb9_str += (tb9_state.charAt(j) == "1") ? tb9_messages[tb9_currMsg].charAt(j) : "____"
}
document.title = tb9_str
tb9_timerID = setTimeout("tb9_showBanner()", tb9_speed)
}
}
function tb9_getString() {
var full = true
for (var j = 0; j < tb9_state.length; ++j) {
if (tb9_state.charAt(j) == 0)
full = false
}
if (full) return true
while (1) {
var num = tb9_getRandom(tb9_messages[tb9_currMsg].length)
if (tb9_state.charAt(num) == "0")
break
}
tb9_state = tb9_state.substring(0, num) + "1" + tb9_state.substring(num + 1, tb9_state.length)
return false
}
function tb9_getRandom(max) {
var now = new Date()
var num = now.getTime() * now.getSeconds() * Math.random()
return num % max
}
tb9_startBanner()

//]]>
</script>

Nb : Kode yang berwarna merah kamu ganti dengan text kamu sendiri, yang orange, adalah untuk mengatur kecepatan...

Membuat Fasilitas Print di Blog

Setelah sebulan lebih tidak nge-BLOG dikarenakan libur sekolah pulang kampung eehh pas kemarin di lihat Blog Kang Fatur Page Rank-nya menurun yang tadinya Page Rank saya 3 sekarang menjadi 2, dan Alexa pun menjadi naik yang tadinya 252.263 sekarang menjadi 311.863. Saya pun heran dan agak sedikin marah. Yaaaa nasiiiiiibbbb.

OK. Para sobat daripada ngobrolin masalah Trafik yang gak penting-penting amat mending kita mulai berbagi ilmu aja. Kali ini untuk pertama posting setelah sekian lama tidak saya akan mengetengahkan cara Membuat Fasilitas Print di Blog

Contoh :

Print halaman ini

Apakah ini yang sobat cari-cari?

Berikut cara membuatnya :

Dibawah ini script fasilitas print, silahkan ganti alamat icon(teks yang berwarna merah) dengan alamat milik temen - temen, sedangkan teks yang berwarna biru adalah teks yang akan muncul disamping icon print(bisa diganti).


<a href="javascript:window.print()"><img src="http://i396.photobucket.com/albums/pp48/putro16/iconprint.png" alt="print this page" border="0"/>&#160;Print halaman ini</a>

Copy scriptnya lalu sobat Paste.
Terserah, Paste scriptnya dimana aja bisa kok

Selamat mencoba. Semoga bermanfaat

cara memberi al-quran online

mungkin kita pasti tau biasanya di blog hanya di isi seperti mp3 atau lagu lagu yang lain
tapi aku akan berikan cara memberi al-quran online...
ikuti langkah langkah berikut ini :
cara memasang al-quran online
-buka rancangan
-tambah gadget(pilih Html/javascript)
-lalu paste code ini :
<embed allowscriptaccess="never" src="http://www.tvquran.com/Player.swf" menu="false" quality="high" name="index" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="playList=http://www.tvquran.com/add/Al-Ghamdi.xml&amp;ShowPlaylist=1&amp;ShowEQ=1&amp;firstTrack=0&amp;initVol=100" wmode="transparent" width="300" height="300"></embed>