™Alan Bae Rezpector™: April 2012

1 Cara Pasang Box Shadow Hover di Blog

Selasa, 10 April 2012

Baiklah pada kesempatan kali ini utta' ingin share lagi nich,.. mengenai trik CSS pada Box Shadow Hover. biasa utta senang banget bermain-main dengan CSS3, selain memiliki efek bagus, tampilan blog kita juga akan tampak lebih keren pastinya, lihat saja template utta sekarang..keren ngga?? hehe,.. :D

Berikut ini screen Demonya :

Contoh Sebelum Hover :

Contoh saat hover :

gimana??tertarik untuk mencobanya,..
sebelum kita ke tutorial pembuatannya, saya ingin jelaskan, disini utta hanya ingin memberikan trik pemasangan Box shadow hover pada kotak postingan saja,..
dan box shadow ini sendiri dapat dipasang dimana aja, seperti di kotak 'posting','sidebar' 'komentar' maupun pada 'footer', dari kita saya mau pasang dimana...

Untuk lebih jelasnya sobat perhatikan kode-kode berikut ini :

:::Kode CSS sebelum Hover:::

margin:1em 0 1em 0;
line-height:1.6em;
margin: 20px 4px;
border: 1px solid #999;
padding: 10px 6px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-o-transition: 1s ease-out;
-moz-transition: 1s ease-out;
-webkit-transition: 1s ease-out;

:::Kode CSS saat Hover:::

border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
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;

KET:
Sobat perhatikan teks yang berwarna merah, itu adalah warna box shadow. dan dapat anda ganti dengan warna kesukaan sobat sendiri.
untuk melihat-lihat warna lainnya Klik Disini.

Baiklah, kita lansung kelangkah pembuatannya..
Ikuti langkah-langkah berikut :

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>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .

.post-body {
margin:1em 0 1em 0;
line-height:1.6em;
margin: 20px 4px;
border: 1px solid #999;
padding: 10px 6px;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;
-o-transition: 1s ease-out;
-moz-transition: 1s ease-out;
-webkit-transition: 1s ease-out;
}
.post-body:hover {
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
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;
}

6. Terkhir Preview dulu,. jika berhasil. baru Save template..

Jika sobat masih bingung, sobat tinggal meninggalkan pesan pada kotak komentar

Semoga bermanfaat,..

0 Membuat Back To Top Dengan Smoothscroll jQuery

Senin, 09 April 2012

hehehe kemarin saya juga dah posting tentang cara pasang back top di blog dan sekarang saya posting cara Membuat Back To Top Dengan Smoothscroll jQuery .

Back To Top merupakan sebuah aplikasi tambahan (widget/plugin) untuk ditempatkan di dalam sebuah blog dan sepertinya saat ini memang sudah tidak asing lagi di telinga kita dan mungkin saja kita sendiri sudah sering menjumpai widget Back To Top ini.

yang ini akan sedikit berbeda back top yang ini ketika sobat klik maka dia akan perlahan-lahan naik ke atas dengan smooth (lembut dan santai).

Fungsi:

Memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik tulisan "Back To Top".

Buat teman-teman yang ingin membuatnya silahkan ikuti langkah-langkah di bawah ini:

copy script di bawah ini

2. paste kan

<head>

3. sealesai ^__^

Mudah Bukan !
sealamat mencoba dan selamat bereksperimen!!!

0 Cara Memasang Flag Counter Di Blog

Counter Adalah Alat Bantu Hitung yang di gunakan di beberapa blog.. ada yang di hitung Berdasarkan Pageviews dan Visitor / Perorangan. Oke, Gak Usah Basa-Basi Kelamaan inilah Counter yang di pakai di beberapa blog + cara penggunaannya

- COUNTER PAGEVIEWS -

Overstock.com Coupon

counter pageview alias yang dihitung berdasarkan berapa kali blog anda di buka.. ini caranya..

1. Klik -disini- dan klik Create Your Free Web Counter !

2. Pilih Jenis Tampilan yang anda mau.. dan klik Use selected style & Go to Step 2.

3. Isi Data Anda dan untuk Starting Count isi dengan angka 1 untuk Increment on** jangan di ubah.^{4. Buka Tab Baru, Login Ke Blogger dan Edit Tata Letak, Tambah Gadget, HTML / Javascript}

^{5. copy HTML yang muncul ke HTML / Javascript dan Save..}

^{- COUNTER VISITOR / PERORANGAN -}

^{counter visitor adalah Counter yang di hitung berdasarkan IP Address.. Uniknya disini kita bisa melihat darimana asal negara orang itu, sok, begini caranya..}

^{1. Klik -disini- dan klik GET YOUR OWN FLAG COUNTER disini ada dua pilihan yaitu Flag Map & Top Countries..

Untuk Flag Countries

Map Size : Di Sesuaikan Ukuran Blog
Label : Visitor}

Klik Show Pageview Count Dan

Lalu Copy Code For Website Ke Blog Anda..
Jadilah Seperti ini :

Untuk Top Countries

Maximum Flag : 248

Coloums : 2

Label : Visitor

Klik

Show Country Codes

Show Pageview Count

Dan

Lalu Copy Code For Website ke blog anda..
Jadilah Seperti Ini :

0 Cara Membuat Pesan Pembuka dan Penutup di Blogspot

Langkah - langkah sebagai berikut :

Login Ke Blogger
Klik Rancangan
Klik Tambahkan Gadget >> HTML/JavaScript
Copy Kode Dibawah ini ke >> HTML/JavaScript

<SCRIPT quality='high' type='text/javascript'>
var name = prompt("TEKS PESAN PEMBUKA 1", "NAMA SOBAT DISNI ");
alert("Salam kenal ya "+name)
//
alert ("TEKS PESAN PEMBUKA 2. Kami sarankan anda memakai browser Mozilla Firefox. ")
// goodbye alert
function goodbye(){
alert('TEKS PESAN PENUTUP DISINI');
}
parent.window.onunload=goodbye;
//<![CDATA[
//]]>
//<![CDATA[
//]]>
</SCRIPT>

5. Simpan Template

Note : Silahkan sobat ganti tulisan berwarna biru dengan yang sobat inginkann.

0 Membuat Marquee ( Text Berjalan ) versi 2

kemarin saya sudah posting cara membuat marque (text berjalan).dan kali ini saya akan posting tentang Membuat Marquee ( Text Berjalan ) versi 2 bedanya hanya yang versi 2 ini bisa kita atur sesuai selera kita.

Kita yang berkecimpung dalam dunia blog, kita dapat menuangkan ucapan tersebut pada halaman blog dengan mengaplikasi script marquee pada blog kita.

Salah satu contoh aplikasi marquee yang dapat kita terapkan dengan format seperti di bawah ini.

<marquee direction="left" scrollamount="4"><font color="black" face="broadway" size="3">
teks atau tulisan yang ingin ditampilkan
</font>
</marquee>

Keterangan

<Direction >> arah gerakan, dapat kita ganti dengan RIGHT
Scrollamount >> semakin kecil nilanya semakin cepat gerakannya, dapat kita ubah sesuai kebutuhan
Size >> ukuran huruf, semakin besar nilanya semakin besar pula ukuran hurufnya
Color >> warna huruf, dapat diubah sesuai selera masing-masing
Face >> jenis font, dapat diubah sesuai selera

Di mana kita menempatkanya pada blog kita? Sedapat mungkin di tempat yang “strategis” sehingga mudah dilihat pengunjung yang datang ke blog kita. Pada tips ini, Tips Blog mencoba menempatkan di tempat sedemikian rupa sehingga mudah dilihat. Anda pun dapat menempatkan di tempat lain sesuai selera Anda.

Klik Tata Letak (layout)
Klik Edit HTML
Kemudian cari kode <body>
Kemudian tempatkan kode html di atas tadi persis di bawah kode <body>
Kemudian Simpan Template

nanti contohnya akan jadi seperti ini:

teks atau tulisan yang ingin ditampilkan

Selamat Mencoba !!!

0 Membuat Marquee ( Text Berjalan )

Marquee adalah teks berjalan dalam bahasa html. Kalo kita lihat marquee menurut semantik sepertinya ga ada hubungan dengan teks berjalan, tapi kalo diperhatikan lagi… mmmmh memang ga ada hubungannya ^_^ (sepertinya). Tapi kalo kita mau perhatikan lebih dalem, Marquee mempunyai arti “Tenda Besar,” atau “tempat berteduh seperti atap dimuka pintu masuk sebuah gedung” Mmmmh… apa hubungannya dengan marquee sebagai teks berjalan…? Setidaknya menurut saya memang ada, melalui “tenda” tersebut orang lalu lalang berjalan.

Berikut ini contoh-contoh sebagian kecil penggunaan marquee pada teks.
Berikut ini contoh-contoh sebagian kecil penggunaan marquee pada teks.

Marquee 1.0
Teks Anda
Marquee 1.0 ini merupakan marquee standar agar teks Anda bisa berjalan secara default (dari kanan ke kiri).

Tag Html
<marquee>Teks Anda</marquee>

Marquee 1.0.1
Teks Anda
Marquee 1.0.1 adalah pengembangan dari 1.0, keistimewaannya jika Anda arahkan mouse pada teks tersebut maka dia akan istirahat dan berhenti ~~dari perjalanannya yang panjang~~.

Tag Html
<marquee onmouseover="this.stop()" onmouseout="this.start()">Teks Anda</marquee>

Marquee 1.0.2
Teks Anda
Marquee 1.0.2 jika Anda menggunakan teks Arabic yang dimulai dari kanan ke kiri, maka Anda membutuhkan Marque ini yang berjalan sebaliknya; dari kiri ke kanan, contoh dengan teks arabic:
مرقو ادلح تيكس برجالان

Tag Html
<marquee direction="right">Teks Anda</marquee>

Marquee 2.0
Teks Anda
Marquee 2.0 Marquee ini tidak memiliki kemampuan magic seperti ~~David Coperfield~~ marquee sebelumnya yang bisa menembus ruang, Marquee 2.0 ini kerjaannya bolak-balik dari ruang kotak yang kasat mata.

Tag Html
<marquee behavior="alternate">Teks Anda</marquee>

Marquee 2.0.1
Teks Anda
Marque 2.0.1 Pengembangan dari marquee sebelumnya, dengan pancingan scrollamount dia menjadi sangat agresif

Tag Html <marquee behavior="alternate" scrollamount="18">Teks Anda</marquee>

Marquee 2.0.2
Teks Anda
Marquee 2.0.2 Masih pengembangan dari Marquee 2.0 dengan sentuhan on-mouse-over stop dan on-mouse-out start, seperti marquee 1.0.1 jika Anda arahkan mouse pada teks maka dia akan berhenti.

Tag Html
<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">Teks Anda</marquee>

Marquee 3.0
Teks Anda
Marquee 3.0 Dia adalah marquee climbing, marquee pendaki ini suka sekali ketinggian, sehingga kita lihat arah teksnya pun ke atas (up)

. Jika Anda memiliki teks yang banyak, maka marquee ini merupakan pilihan yg tepat dan sangat cocok ~~sebagai teman pendamping hidup Anda~~.

Tag Html
<marquee direction="up">Teks Anda</marquee>

Marquee 3.0.1
Teks Anda
Marquee 3.0.1 Pengembangan dari marquee sebelumnya yang tidak mempunyai batas ruang, marquee ini kita batasi ruang kasatnya sehingga memliki height 100 saja. Demikian dengan kemampuan scrollamountnya kita perlambat. Dan kita kasih on mouse stop/start juga.

Tag Html
<marquee direction="up" onmouseover="this.stop()" width="100%" scrollamount="2" onmouseout="this.start()" height="100">Teks Anda</marquee>

Marquee 3.0.2
Teks Anda

Marquee 3.0.2 Masih pengembangan dari marquee sebelumnya, hanya saja teks berada di tengah ruang kasat.

Tag Html
<marquee direction="up" width="100%" scrollamount="2" height="100" align="center">Teks Anda</marquee>

Marquee 3.0.3

Teks Anda
Marquee 3.0.3 Pengembangan juga dengan arah berlawanan dari marquee sebelumnya, marquee ini senang sekali berjalan menurun. Sehinggan teks yang kita lihat berjalan dari atas ke bawah. Kemampuan scrollamountnya tidak kita batasi sehingga terlihat agresif dengan ruang kasat yang kecil. Silahkan Anda perlambat sendiri.

Tag Html
<marquee direction="down" width="100%" height="100">Teks Anda</marquee>

Demikian tips sederhana ini, silahkan Anda coba….! Jika ingin manambahkan marquee yang lain silahkan tulis komentar.

Keep Blogging ^_^

Sumber : adjiebrotot

0 cara membuat Cursor Bertabur Bintang

bintang adalah salah satu cara untuk mempercantik tampilan blog.karena saat cursor di geser kursor tersebut akan mengeluarkan bintang-bintang. Contohnya Bisa kalian lihat disini.

Setelah melihat Contohnya Tertarik tidak sobat untuk membuatnya ?jika tertarik silakan ikuti tutorial Cara Membuat Cursor Bertabur Bintang di bawah ini untuk Membuat Cursor Bertabur Bintang.

1.Login ke blogger.

2.Klik Tatat Letak.

3.Klik Tambah Gadget.

4.Pilih HTML/javascript.

5.Letakkan HTML di bagian paling atas..

6.Pilih lalu Copy dan paste kode di bawah ini ke dalah kotak HTML/javascript tadi .

Bintang biru

<script src="http://denisahlan.netau.net/bintang.biru.js" type="text/javascript"></script>

Bintang hijau

<script src="http://denisahlan.netau.net/bintang.hijau.js" type="text/javascript"></script>

Bintang merah

<script src="http://denisahlan.netau.net/bintang.merah.js" type="text/javascript"></script>

Bintang putih

<script src="http://denisahlan.netau.net/bintang.putih.js" type="text/javascript"></script>

Bintang ungu
<script src="http://denisahlan.netau.net/bintang.ungu.js" type="text/javascript"></script>

Sumber : adjiebrotot

0 Cara Membuat Tulisan berjalan secara bergantian di addres bar blog

Hy...friends,,kali ini saya akan berbagi tips cara membuat Tulisan bergerak pada blog,mungkin tips ini dah kuno,bagi anda yng sudah lama berkecimpung didunia blogger,,,

yang mungkin anda sudah bosen ingin mencoba sesuatu hal yang baru pa bagaimana begitu...

oke langsung saja Berikut ini langkah-langkahnya :

1. Masuk ke akun Blogger Anda.

2. Klik Tata Letak.

3. Klik Tambah Gadget.

4. Pilih HTML/JavaScript.

lalu copy kan script dibwah ini pada HTML/javascript

catatan :
-. Ubah Nomor / Angka yang berwarna Biru dengan jumlah baris pesan yang akan di tampilkan.
-. Sesuaikan pesan yang bercetak merah dengan pesan yang akan ditampilkan.
-. Untuk menambah baris pesan copy tb8_messages[2] = "Isi pesan"; , tambahkan kode tersebut di bawahnya, jangan lupa untuk mengurutkan nomor yang ada di dalam kurung.

9. Selanjutnya jangan lupa untuk mengklik tombol Simpan.

10. Selesai...

selamat mencoba !!!

0 Membuat Judul bergerak di addres bar blog

kali ini saya akan berbagai tips buat temen yang belum tahu bagaimana untuk membuat judul blog bergerak atau pun ber animasi katanya ci...

mungkn tips ini sudah tidak lagi asing bagi blogger profesional....!!

oya ni scrictnya di bawah ini :

ganti tulisan yang bercetak merah dengan judul blog anda...

untuk memasangnya semuanya lakukan sebagaiberikut :
* Masuk BLOGGER Anda
* Dashboard/dabor
* Layout/tata letak
* Tambah Gaget
* Pilih HTML/JAVASCRIPT.
* Paste script diatas lalu edit sesuai keinginan anda
* kemudian simpan
*
*Selamat Mencoba ya......* :)

*Dan Semoga Bermanfaat YA!!!* :d

0 Cara Membuat Teks berkelap-kelip di blog

Tulisan yang berkelip pada blog banyak digunakan bagi menarik minat pengunjung untuk melihat dan klik link pada tulisan tersebut.

cara nya amat mudah cuma letakkan kode blink pada depan dan belakang teks yang hendak
kod mesti rapat,Jika ada ruang kosong antara tanda < > dengan blink ia tidak berfungsi
HASILNYA:

TULISAN BERKELIP

ni contoh sripct nya :

<blink> TULISAN BERKELIP</blink>

Note : Hanya sesuai untuk browser tertentu sahaja:Netscape(sesetengah version sahaja)dan Mozilla Firefox .Internet Explorer dan Google Chrome tidak support tags ini.

0 Cara Membuat Widget SMS Gratis di Blog

Sahabat, tau gak dengan tool ini kamu bisa kirim-kirim sms secara gratis lewat blog kamu. dan juga tentunya keunggulan dari memasang widget ini ialah dapat mendulang traffik (SEO). mendulang traffik tambahan buat blog kamu. namun masih ada kekurang dari widget ini yaitu tidak bisa menerima sms balasan. sehingga bila ada yang membalas kita tidak bisa membacanya. namun walaupun seperti itu gedget ini sangat bermanfaat terutama baut kita yang suka sms-an.

Silakan copy kode di bawah ini :

Silakan login ke blogger
Pilih tata letak
Tambah widget baru
Setelah itu kamiu pilih
Edit HTML/Javascript
Paste kan kode yang sudah kamu copy tadi

Sekarang blog kamu sudah bisa melayani sms gratis buat para pengunjung. lumayan kan, buat nambah-nambah traffik. contoh layanan SMS Gratis nya dapat kamu lihat dibawah (footer) blog aku ini...

Ok sobat informasi maya cukup sekian dulu ya, semoga bermanfaat
assalamualaikum

0 Cara Membuat Buku Tamu Yang Keren

Minggu, 08 April 2012

1. Siapkan kode Buku tamu Chat anda.

2. Rancangan -> Tambah Gadget ->
pilih HTML/JavaScript

3. Masukkan kode yang ada di bawah ini
ke dalam kontennya kemudian

0 Cara Memasang Tombol Suka Facebook [Like Button]

Diantara kemajuan yang facebook berikan adalah adanya plug in Like Button / Tombol Suka, nah mengapa tidak kita pasang di blog kita sendiri?? Keuntungannya banyak sekali loh, diantaranya adalah sebagai ajang promosi blog kita, karena saat ada pembaca yang menyukai posting kita, lalu menyukainya dengan meng-klik tombol itu, maka secara otomatis akan tampil di profil penyuka itu... Nah artinya, kawan2 dari si peng-klik tersebut akan melihat halaman yang disukai, lalu tak mustahil dia tergoda, lalu mengunjungi blog kita, jadinya rame deh...coba deh, caranya ga sulit kok...
Kodenya ini :

Nah Cara Mengaturnya adalah :

layout=standard menjadi layout=button_count .

show_faces=false menjadi show_faces=true

action=like menjadi action=recommend

font=arial menjadi font=lucida+grande atau font=segoe+ui atau font=tahoma atau font=trebuchet+ms atau font=verdana

colorscheme=light menjadi colorscheme=dark

Cara Memasangnya :

1.Login ke Blogger > Layout/Tata Letak > Edit HTML > Expand Widget Templates

2.Copy kode diatas dan letakan tepat dibawah kode berikut

<div class='post-header-line-1'/>

atau kalau tidak ada menemukan kode diatas bisa juga diletakan sebelum kode berikut :

<data:post.body/>

untuk memudahkan pencarian jangan lupa pakai mesin pencari, tekan Ctrl+F berbarengan...

Nah berhasil deh...Sekarang tampil sudah Like Button kita

0 Mau Animasi Kursor di ikuti Tulisan?

Caranya :
1. Login ke akunmu.
2. pilih Tata letak / rancangan .
3. tambah gadget HTML
4. lalu copas kode berikut ini tanpa harus memberi judul., letakkan dimana saja.

<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='tulis teks disini'.split('').reverse().join('');

var font='Verdana,Arial';
var size=3; // up to seven
var color='#ff0000';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------

var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

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

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>

Ganti tulisan warna merah dengan teks anda, ingat jangan terlalu panjang...

Lalu Save ...

contoh hasilnya bisa dilihat disini

0 Cara Menampilkan Gambar Pada Judul Posting Artikel

Ini sekedar trik untuk mempercantik tampilan blog kita saja ...

Caranya sih ga sulit - sulit amat.
Langkah-langkah seribunya :
1. Upload photo yang di inginkan di foto bucket, lalu ambil Url link gambarnya.
2. Masuk ke dashbor, lalu klik rancangan, klik Edit HTML, lalu klik Expand widget.
3. Aktifkan mode pencarian dengan CTRL + F
4. Lalu cari kode di bawah ini :

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

Lalu Copas kode berikut ini :

<img src="Url Gambar Anda" width="Lebar yang anda inginkan" hight="Tinggi yang anda inginkan" border="0"></img>

Kemudian masukkan kode ini di area Sisipkan kode Disini
<a expr:href='data:post.url'>Sisipkan Kode Disini<data:post.title/></a>
<b:else/>

Nah Lalu SAVE deh ... The End...

Nah hasilnya akan seperti yang ada di blog ini ... cantikkan ??

Itulah Kopi Jahe Merah Karomah Yang nikmat Kopinya, Terasa Jahenya, Pas Susunya ... sehat khasiatnya...jangan lupa pesan ya ... he he...

Ini gambar Produknya :

0 Cara Memasang Daftar Isi Unik

Wah beneran trik cara memasang daftar isi kali ini unik, hasilnya bener2 menarik, ringan, tampilannya mantap, sebelumnya lihat dulu hasilnya disini

Nah kalo kamu berminat, nih abang kasih deh trik cara memasangnya ...

Login blogger
Rancangan, edit html, cari kode ]]></b:skin>
Simpan kode berikut tepat diatas kode tadi :

/* jToCTree */
#judafistre {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisoArYc9gO0QJ36B13OwiIL0vuGb7y4PSZ7zoQ7_JU0FI8j2qzFQ76HVK9_cNwRkZBwiv5DDNn8kZ6VzG4fWhxi5AjJ5Z_OdZRh1VSmVNrczYkzLyWv_-oW1RFLP3zeoLtkBL66BcyOQs/d/bg5.gif)
    repeat-y scroll left center #E7F7FB;
    padding:5px;
    border:1px solid #339DC6;
     }
.branda {
    background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TUBMbWj8ZzI/AAAAAAAAEr4/iqyIQmaeqTc/d/blogger.png)
    0px 4px no-repeat !important;
     }
.judafis {
     padding:0 0 0 4px;
     font-weight:bold;
     }
.treeview, .treeview ul {
     padding: 0;
     margin: 0;
     list-style: none;
     }
.treeview ul {
    background-color:
    transparent;
    margin-top: 4px;
    }
.treeview .hitarea {
    background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TUBMyDGBM0I/AAAAAAAAEsQ/b__wKvGpCLo/d/treeview-default.gif) -64px -25px no-repeat;
    height: 16px;
    width: 16px;
    margin-left: -16px;
    float: left;
    cursor: pointer;
    }
* html .hitarea {
    display: inline;
    float:none;
    }
.treeview li {
    margin: 0;
    padding: 3px 0pt 3px 16px;
    }
.treeview a.selected {
    background-color: #eee;
    }
#treecontrol {
     margin: 2px 0;
     display: none;
      }
.treeview .hover {
    color: red; cursor: pointer;
    }
.treeview li {
    background: url(http://lh3.ggpht.com/_xcD4JK_dIjU/TUBMyE2GQFI/AAAAAAAAEsU/8rb8Y7zjLQw/d/treeview-default-line.png)
    0 0 no-repeat;
     }
.treeview li.collapsable, .treeview li.expandable {
     background-position: 0 -176px;
     }
.treeview .expandable-hitarea {
    background-position: -80px -3px;
     }
.treeview li.last {
    background-position: 0 -1766px ;
    }
.treeview li.lastCollapsable {
     background-position: 0 -111px
     }
.treeview li.lastExpandable {
     background-position: -32px -67px
     }
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea {
    background-position: 0;
    }
.treeview-black li {
    background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMxfHyt7I/AAAAAAAAEsM/OQ8KPEkd4iI/d/treeview-black-line.png);
    }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable {
    background-image: url(http://lh5.ggpht.com/_xcD4JK_dIjU/TUBMblX2uHI/AAAAAAAAEsI/qilKwCGDUas/d/treeview-black.gif);
     }
.filetree li {
     padding: 3px 0 2px 16px;
     }
.filetree span.folder, .filetree span.file {
    padding: 1px 0 1px 18px; display: block;
    }
.filetree span.folder {
    background: url(http://lh3.ggpht.com/_xcD4JK_dIjU/TUBMbqeQA4I/AAAAAAAAEsA/MxndTFShj-4/d/folder.gif)
    0 0 no-repeat;
    }
.filetree li.expandable span.folder {
     background: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMbhMdwlI/AAAAAAAAEsE/9pe2zTo3i1U/d/folder-closed.gif)
      0 0 no-repeat;
      }
.filetree span.file {
     background: url(http://lh4.ggpht.com/_xcD4JK_dIjU/TUBMbVyeYzI/AAAAAAAAEr8/pGIGq0amWFE/d/file.gif)
     0 0 no-repeat;
     }
.filetree span.file a {
     text-decoration:none;
     }

selanjutnya cari kode </head> dan letakkan kode berikut tepat diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='https://github.com/jzaefferer/jquery-treeview/raw/master/jquery.treeview.js' type='text/javascript'/>
<script src='http://kangdadang.googlecode.com/files/jtoctree-1.0.js' type='text/javascript'/>
<script language='javascript'>//<![CDATA[
var judul = 'Daftar Isi'
function dafisjtoctree() {
$('#hitam').treeview({
animated: 'fast',
collapsed: true,
control: '#treecontrol'
});
}
$(document).ready(function() {
dafisjtoctree();
});
//]]></script>:

Daftar Isi bisa diganti dengan nama yang kawan inginkan, Fast dapat diubah dengan kata Normal untuk kecepatan lebih lambat.

selanjutnya untuk cara pemanggilannya pada edit html Posting atau pada Gadget HTML/JAVA SCRIPT :

<div id="judafistre">
<div id="treecontrol">
<a title="Tutup semua folder" href="#"> Tutup</a> | <a title="Buka semua folder" href="#"> Buka</a> | <a title="Tombol buka tutup semua folder" href="#">Buka Tutup</a>
</div>
<script src="http://abuiram.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=jtoctree">

</script>
</div>

yang berwarna biru ganti dengan alamat blog sobat yang dipakai

selesai.........

0 Cara Memasang Add A Gadget Pada Template Blogger

Sobat pembaca...

Pada posting kali ini saya akan coba bagi tips untuk cara memasang Add A Gadget Pada Template Blogger kita. Karena terkadang kita ingin menambahkan sesuatu misal pada Header Blog Kita, Tapi eh ternyata dalam Lay Out Template kita tak ada Gadgetnya. Nah daripada bikin kamu kesel dan Ngedumel, Baca aja trik berikut ini. ...

Loh Mana Caranya kok Blank??
Tenang Anda akan saya bawa terbang ke Ruangan Khusus, jangan bengong dan jangan tidur... Klik Aja Gambar dibawah ini... Anda duduk dan pegangan ya...

0 Cara Membuat Huruf Besar Diawal Artikel Posting

Nah seringkali kita lihat sebuah artikel huruf awalnya ditulis dengan huruf besar, Tahukah kita begitu gampang cara memasang nya? Ga sulit sama sekali kok.

Contohnya lihat disini

Oke deh kita mulai trik nya ya... :)

Pertama : Masuklah ke akun blogger kamu
Kedua     : Masuk Ke Rancangan,
Ketiga     : Pilih Edit HTML, jangan lupa centang expand widgetnya.
Keempat : Cara memasangnya adalah sebagai berikut ;

Cari Kode ]]>< /b:skin>

Lalu copy kode yang dibawah ini; kemudian paste diatas kode tadi

.huruf_besar {
       float:left;
       color:#000000;
       line-height:60px;
       padding-right:5px;
       font-family:trebuchet ms,verdana;
       font-size:60px;

SAVE

Cara memasang nya agar berefek menjadi huruf besar nanti di awal posting artikel kita adalah, dengan menambahkan kode <span class="huruf besar"> huruf yang akan di buat besar</span>

Misalnya artikel tersebut berisi kalimat :

Seandainya hari ini tidaklah hujan, Insya Allah Aku akan kerumahmu

Nah cara memasangnya adalah <span class="huruf besar">S</span>eandainya hari ini tidaklah hujan, Insya Allah Aku akan kerumahmu

Gampangkan??

0 Membuat buku tamu melayang di blog anda

Caranya ? Gampang aja ... ikuti deh ya ...

caranya :

1. Login Ke blog dulu
2. MAsuk Ke Rancangan
3. Tambahgan ADD Gadget
4. Pilih HTML
5. Copy Paste Code Dibawah ini :

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:120px;
width:60px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:3px solid #00FF00;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1XdIgBswKN_aU3Y2URB4SP4_0vgsxQAH8s5QJD6009PTxyn4BsNRrmWOVr0o7nHaQOaKEdBEbVagnvnfQitbgghTdQhY0Dnx934gCwq72xgq6Vz-Kulf6WaRgC5IaGSCLIXuZD5Idrbc/s1600/Wido2.gif) #000000 repeat-y center;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #00FF00;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>

<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style:url(http://i53.tinypic.com/6gx34z.jpg) no-repeat center;">

<br />

------ Code Buku Tamu Anda --------

<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i53.tinypic.com/vvtyc.png" alt="Close" title="Click here to Close Cbox" /></a></div>

</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<div style='display:scroll; position:fixed; top:60px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0tgkU4T_hS-fbQXrws2uSa1rGWRAEbyE0v0O6c8mzYLACnZYAOWGm3PzHiTMWIP1NLYK0SgTX76jvjUyEdZYBxQ3UTjuJu1LA9u0R6W7UZePBvzvx4JTqMvdm8azme8Y1oWe8tEABX_s/s1600/bkuwd.gif"/></a>

</div></div></div>

CATATAN :
1. Ganti Tulisan Yng berwarna MERAH dengan Buku tamu Anda
2. Ganti Tulisan Yng Berwarna BIRU dengan Image Jika Mau di Ganti

SAVE

0 Membuat Link Berefek Pelangi

Pelangi atau bianglala adalah gejala optik dan meteorologi berupa cahaya beraneka warna saling sejajar yang tampak di langit atau medium lainnya. Di langit, pelangi tampak sebagai busur cahaya dengan ujungnya mengarah pada horizon pada suatu saat hujan ringan. Pelangi juga dapat dilihat di sekitar air terjun yang deras. ensiklopedi

Dengan membuat link pelangi akan membuat blog kita menjadi penuh warna. Bagaimana cara membuat link pelangi? Ikuti saja langkah-langkah berikut ini:

Cara Membuat Link Pelangi
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Taruh (copy paste) kode berikut ini diatas kode </head>

<script src='http://achmad46.googlepages.com/rainbow.js'>
</script>

6. Simpan Template jika sudah selesai

0 Cara Membuat Efek Bintang Kedip-kedipan di Link pada Web / Blog Kita

Ini tentang memberi efek pada link. ; Apabila link disentuh dengan kursor maka efek tesebut akan menimbulkan efek Animasi Bintang Berkedip-kedip . Dengan menggunakan Efek Link ini kita dapat membuat efek ini di blog kita atau web kita. trik ini juga bisa anda modifikasi agar efek tidak hanya link saja namun pada gambar atau image juga bisa (Contoh lihat disini).

Caranya :

Seperti biasa login ke blogger
masuk ke Tata Letak => Edit HTML
cari kode </head> lalu masukan kode di bawah ini tepat di atasnya
<style>
a:hover { text-decoration:blink; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFCtEF8BNNaJTALGrB5zRsREmS03Bs32S3x9dYwikQ1B1rMJdJ_DLFyWLTGVShC1Qt1Hyw55hPo7QYMXqStxCdWKiluELJZLi4clu-4oks8GjjEKkSAPBIxZ0ipCs23YY6_iCIVmmp-g/s1600/stars1.gif'); }
</style>
Simpan Tempat

0 Template Transparent 1.0 design

Kamis, 05 April 2012

Featured :

2 Colums
Right sidebar
2 colums footer
Read more
Blockquote kren

Kalo sobat tertarik silahkan download dan tinggalkan jejak di kotak komentar...

Featured :
2 columns
Right sidebar
3 kolom footer
Blockquote IndahFull color.
readmore,...
Slider Post.

Template Name : Chibi Transparent Version 1.0

Fiture :
[-] Chibi Transparent Template
[-] Chibi Blue Matrix Background
[-] Music Player
[-] Auto Read More (Jarang ada)

Tutorial :
1. Download dulu dari MFR Data
2. Extract file .exe menjadi folder.
3. Masuk ke Blogger kamu.
4. Lalu menuju "Rancangan".
5. Centang "Expand Template Widget"
6. Pada Backup/Restore Template, pilihlah browse.
7. Ambil file "Chibi Transparent V. 1.0" dan unggah.
8. Jika ada Notice pilih "Pertahankan" dan selesai.

Demo | Download | Mirror

Keterangan :
1. Auto readmore
2. Facebook Like button
3. Slide Out Navigasi
4. Scroll bar Arsip blog
5. Komentar Admin berbeda dengan visitor.
6. Auto hide navbar (Include)
7. Favicon (Include)
8. Meta Tag SEO Friendly
9. Efek pelangi pada Link

0 Cara Membuat Icon Twitter Burung Terbang

Rabu, 04 April 2012

Hello Pengunjung Oktri Blog.Ok, kali ini saya ingin berbagi tentang salah satu cara memperindah tampilan blog dan sedikit membuat kita tenar di twitter, ( emang bisa ? ) gk kok saya cuma sedikit berlebihan hehehe. Fly follow twitter bird in blog atau floating twitter bird in blog atau burung follow twitter di blog menggunakan script. Sebaiknya langsung saja karena saya tidak pandai berkata-kata hehehe.

Untuk melihat demo nya bisa langsung lihat di bl og saya ini :)

Berikut langkah-langkahnya:
1. Masuk (Login) ke Dashboard Blogger anda.
2. Pilih Rancangan >> Element laman
3. Kemudian Tambahkan Gadged/Widget, pilih HTML/JavaScript.

<script type="text/javascript" src="http://oktriblog.googlecode.com/files/twitterfloat.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz3gr5JXHefKDu4XjGw9RtUDx7G9pyupK_5buZu4ICvmIKeNGBjAQsw_cP3INbTgyY5Afr_vp7VhdSvawoW-RBC32x_ARA5jrdZR3iug5WsQ2bW6sRgRuztxf-3iCqlOlJzPg-R543Ff5v/s1600/original.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button",
"select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/#!/oktridarmadi";var tweetThisText = "Twitter - UserID http://www.oktri.co.cc/";tripleflapInit();
</script>

Ganti yang saya beri warna merah tebal dengan nama twitter kamu
Ganti yang saya beri warna biru tebal dengan URL blog kamu
Selesai :)

Mungkin ingin menyesuaikan warna burung nya dengan layout blog kamu, saya coba bantu sedikit :D . Cukup ganti url gambar yang saya beri warna pink tebal di atas dengan url gambar di bawah ini :