June 04, 2009

Onmouse Over Link Effect

Author: Desta | Posted at: 1:10 PM | Filed Under:
Onmouse Over Link effect, ini merupakan salah satu cara untuk sobat dalam membuat tampilan teks yang merupakan Text Link atau Hyperlink yang memiliki efek tambahan saat mouse menunjuknya (onmouse over). Sekarang coba sobat tunjuk judul pada salah satu posting pada blog ini, atau pada bagian Categories, Recent posting, pada sisi kiri blog ini.
Saat sobat tunjuk menggunakan mouse perhatikan bagaimana perubahan pada teks link tersebut. Secara sederhana seperti pada gambar berikut ini :

Sebelum di tunjuk mouse


Setelah di tunjuk mouse


(bukan perubahan ukuran gambarnya, tetapi tampilan teks tersebut secara nyata)dimana terjadi perubahan ukuran teks, dan warna background, saat mouse menunjuk teks link tersebut.Ok deh kita lanjutkan caranya ....


Untuk membuat efek pada teks link tersebut ikuti langkah berikut ini :
1. Login ke blogger sobat, masuk ke Tata Letak / Layout - Edit HTML
2. Copy script berikut ini dan Paste - kan setelah <head>

<style>
a:hover{color:red; font-weight:bold; font-size:18; background-color:black; }
</style>

3. Klik Save / Simpan Template

Sobat dapat memodifikasi script diatas pada color, font-weight, font-size, background-color sesuai dengan keinginan sobat.
atau
Jika ingin membuat sendiri silahkan sobat klik Disini

ikuti langkah-langkahnya yang pada akhirnya sobat akan mendapatkan Script-nya.

ok mudah bukan Selamat Mencoba ....!

catattan :
Semua Teks yang merupakan Hyperlink pada blog sobat akan mendapatkan efek ini.

Bookmark and Share
Readmore 2 komentar

June 03, 2009

Membuat Text Marquee

Author: Desta | Posted at: 7:35 AM | Filed Under:
Trik ini saya posting untuk menjawab pertanyaan dari sobat Tiar, yaitu bagaimana tampilan menu yang baik berupa teks atau pun image yang memiliki link nya bergerak seperti ke atas, ke kiri, ke kanan, bahkan ke bawah. Seperti pada tampilan berikut ini (image yang memiliki link)



SMAN 1 Lahat

M.Deswan Dinata
Photobucket
Fircom Lahat



atau seperti ini (teks yang memiliki link)



Artikel Hakikat Pengabdian
Tutorial Pengenalan Internet
Tutorial Membuat Logo WMP
Tutorial_Flash 4
Tutorial Ms. Excel
Tutorial Ms. Access
Tutorial Membuat Animasi



Silahkan lanjutkan dulu membacanya ...

untuk membuat tampilan tersebut ikuti langkah-langkah berikut ini :
1. Copy kode berikut ini


2. Paste -kan kode tersebut dimana akan ditampilkan (kolom kiri, kolom kanan, bahkan pada posting artikel sobat)

3. Silahkan pada bagian .......... sebelum </marquee> sobat tambahkan URL baik itu untuk image maupun teks yang memiliki link ke tempat lain seperti untuk Download maupun link banner, advertiser dengan image dll.

4. Simpan atau Terbitkan Entri jika pada posting blog, silahkan lihat hasilnya.

Penjelasan kode diatas

scrollamount : untuk mempercepat atau memperlambat gerakannya, dengan mengubah nilainya ("2", "3", "4", ..) semakin tinggi angkanya semakin cepat gerakkannya.

direction : untuk mengubah arah gerakkannya "up" (ke atas), "down" (ke bawah), "left" (ke kiri), dan "right" (ke kanan).

width dan height : untuk ukuran lebar dan tinggi penempatan URL yang anda tampilkan

align : posisi dari URL pada tempat tersebut "left" "right" "center".

Ok saudara tiar semoga bermanfaat...silahkan mencoba...!
Bookmark and Share
Readmore 5 komentar

June 01, 2009

Floating Top Bar

Author: Desta | Posted at: 9:19 AM | Filed Under:
Floating top bar merupakan tampilan sebuah baris yang terletak pada bagian atas (head) dari sebuah tampilan jendela browser yang aktif serta memiliki content (isi) hasil preview dari kode-kode HTML yang kita buat sendiri atau kode yang berasal dari sebuah web penyedia feature yang sering sobat gunakan untuk penghias blog.
Secara sederhana dapat sobat lihat seperti pada gambar berikut ini (tunjuk agar gambar membesar):


Tepatnya pada bagian kotak berwarna yang berisi Your content here dan sebuah tombol artikel diatas. Keunikan dari bar ini adalah …??


jika user menggulung mouse untuk melihat isi dari layar browser pada bagian bawah maka secara otomatis bar tersebut akan turut serta mengikuti hingga dapat terus terlihat oleh user, akan tetapi dengan menekan tombol artikel pada sisi kirinya maka bar tersebut akan menutup dan hilang dari pandangan user, atau sebaliknya jika sobat ingin pesan pada bar tersebut tetap ada dan user tidak dapat menutupnya, sobat hanya sedikit membuang / menghapus beberapa script kode pembentuknya.(sobat lihat sisi kiri atas blog ini / " Wellcome in my blog " teks dibuat pada glittermaker)


Ok jika sobat ingin mencoba membuatnya ikuti langkah-langkah berikut ini :
1. Login pada blog sobat, kemudian masuk ke Tata Letak / Layout – Edit HTML
2. ENCODE terlebih dahulu Script berikut ini :
untuk melakukan ENCODE klik Disini Jika sudah Copy dan Paste kan script tersebut (yang sudah di ENCODE) setelah tag <head> pada template layout sobat.
Kode yang harus sobat ENCODE :

<style type="text/css">
#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* 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="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
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("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>

3. Copy Script berikut ini dan Paste – kan setelah tag <body> , untuk Script ini tidak perlu sobat ENCODE
<div id="topbar">
<a href="" onClick="closebar(); return false"><img src=" http://i647.photobucket.com/albums/uu191/admincoy/close.gif " border="0" /></a>
Your content here.
</div>

4. Silahkan sobat ganti pada Your content here dengan teks yang berupa kode HTML- nya.
Misalnya kode HTML seperti ini :
<font face="Arial" size="3" color="blue">Selamat Datang di Blog Saya</font>

5. Klik Save / Simpan Template

Catattan :
Pada Langkah 2 diatas Dapat sobat ganti warna background (lightyellow) dan ukuran lebar Top Bar (width) yaitu pada bagian ini :
background-color: lightyellow;
width: 620px;

Jika menggunakan Text dari glittermaker atau lainnya untuk Your content here maka Scriptnya di ENCODE dahulu.

Jika sobat tidak ingin ada tanda artikel pada bar tersebut maka sobat harus menghapus Script berikut :

<a href="" onClick="closebar(); return false"><img src=" http://i647.photobucket.com/albums/uu191/admincoy/close.gif " border="0" /></a>

Pada langkah 3 diatas.

Silahkan sobat lihat hasilnya…….!!




Bookmark and Share
Readmore 2 komentar
Subscribe to: Posts (Atom)
 

Followers