MEMPER BESAR TULISAN HEADER

Label: 0 komentar

Hari terasa membosankan sekali, udara yang panas, ngga ada kegiatan, dan bosen jalan2 soalnya lagi ada pembuatan fly over. akhirnya saya memutuskan untuk mengutak-ngatik template, tapi apa yang mu di kutak katik y...???? oiya saya pernah ingin memperbesar tulisan header dan membuat tanggal menjadi di tengah. nah akhirnya ada kesempatan buat ngutak-ngatik akhirnya bisa juga.



kalau anda ingin coba ikuti langkah ini okey :



  1. login ke blogger
  2. masuk ke Tata letak ===>> edit HTML
  3. cari kode di bawah ini :




    /* Posts ----------------------------------------------- */ h2.date-header { margin:1.5em 0 .5em; }



  4. kalau sudah ketemu tambahkan ini di dalamnya text-align:center; dan font-size:200%; maka akan jadi seperti ini :




    /* Posts ----------------------------------------------- */ h2.date-header { margin:1.5em 0 .5em;

    text-align:center; font-size:200%;


    }



  5. nah tulisan yang berwarna hijau bisa plend ganti sesuka hati plend, asalkan jangan ke besaran nantinya jelek (kaya muka qu dong :(()
  6. simpan dan lihat hasilnya okey
mudah bukan memperbesar tulisan header dan membuat tanggal menjadi di tengah, untuk mempermudah dalam langkah-langkahnya mungkin sambil di praktekan y. sekian dari saya terima kasih....






Anda pengunjung baru blog ini? eits jangan pergi dulu karena trik yang ada di sini menarik dan keren-keren, g percaya?? coba saja cek dan satu hal, sobat bisa bertanya tentang trik yang ada disini dengan saya di okechat. Jangan sungkan-sungkan ya untuk bertanya g bakal gigit kok ^_^



newer post

DRAGBLE GAMBAR

Label: 0 komentar
Pada kesempatan ini saya akan menjelaskan Cara Draggable Gambar artinya pada suatu kotak kecil dan didalam kotak tersebut terdapat gambar namun ukurannya melebihi kotak tersebut maka gambar tersebut bisa kita pindahkan namun hanya dalam kotak tersebut saja, walaupun tidak terlalu berguna dalam dunia blogger apa salahnya kalau saya membagikan ilmu ini yang saya dapat dari Dynamic Drive.

Oiya sebelumnya sudah mengerti maksud dari Draggable Gambar?? kalau belum mengerti y sudah g usah tau y ##11 oke dari pada saya g bener ngejelasinnya dan sangat sulit di mengerti dan g masuk akal pula, lebih baik saya kasih Demonya ajah di bawah ini ok :)) :









Bagaimana Sudah mengerti dari maksud Draggable Gambar?? kalau sudah mengerti ingin memasangnya tidak? kalau ingin ikuti y cara di bawah ini dengan teliti dan tepat oke:
  1. Seperti biasa login ke blogger dengan ID sobat sendiri
  2. Setelah selesai masuk ke halaman Tata Letak => Edit HTML
  3. lalu cari kode </head> dan masukan kode di bawah ini tepat di atasnya


    <style type='text/css'>

    /*Default CSS for pan containers*/
    .pancontainer{
    position:relative; /*keep this intact*/
    overflow:hidden; /*keep this intact*/
    width:300px;
    height:300px;
    border:1px solid black;

    }

    </style>

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

    <script src='http://oketrik.googlecode.com/files/JS.js' type='text/javascript'>

    /***********************************************
    * Simple Image Panner- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/

    </script>


  4. Setelah itu simpan deh tapi belum bisa untuk di lihat hasilnya karena ada caranya lagi untuk memakainya, mau tau cara memakainya? klo mau tau kita +()+ dulu sebentar ok biar seger lagi
  5. nah untuk memakainya sobat harus menggunakan kode di bawah ini :


    <div class="pancontainer" data-orient="center" style="width:400px; height:300px;">
    <img src="GAMBAR YANG AKAN DI GUNAKAN" style="width:700px; height:525px" />
    </div>


  6. Kalau untuk menaruh kode tersenbut sobat bisa menggunakan/menaruhnya di tempat Post Editor atau pun dijadikan berupa Widget.
  7. Selesai

Nah kalau sudah mengikuti langkah-langkah dan mengikutinya dengan benar pasti bisa menerapkannya, sebenarnya Draggable Gambar tidak terlalu penting dalam dunia Blogger dan saya sendiri pun bingung kegunaan dari Draggable Gambar namun tidak salahkan kalau saya membagikan ilmunya? Sekarang saya akhiri sampai disini ok sob, sampai jumpa Terima Kasih dan Happy Blogging |))
newer post

MEMBUAT EFEK SOBEKAN PADA BLOGGER

Label: 0 komentar
Selamat datang para sahabat blogger. Kali ini kita akan membahas cara membuat efek Page Peel Efek menggunakan jQuery & CSS, tentunya kalian bingung apakah efek tersebut. Ok kita lansung membuatnya saja :



Cara Pasang:



Letakan script code jQuery dibawah ini diatas kode <b:skin><![CDATA[




<script src='<a href="http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js</a>' type='text/javascript'/>



<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

//Page Flip on hover


$(&quot;#pageflip&quot;).hover(function() {

$(&quot;#pageflip img , .msg_block&quot;).stop()

.animate({

width: &#39;307px&#39;,

height: &#39;319px&#39;


}, 500);

} , function() {

$(&quot;#pageflip img&quot;).stop()

.animate({

width: &#39;50px&#39;,

height: &#39;52px&#39;


}, 220);

$(&quot;.msg_block&quot;).stop()

.animate({

width: &#39;50px&#39;,

height: &#39;50px&#39;

}, 200);


});

});

</script>



Kemudian letakan kode CSS dibawah ini diatas kode ]]></b:skin>



#pageflip {

position: relative;

right: 0; top: 0;


float: right;

}

#pageflip img {

width: 50px; height: 52px;

z-index: 99;

position: absolute;

right: 0; top: 0;

-ms-interpolation-mode: bicubic;

}


#pageflip .msg_block {

width: 50px; height: 50px;

overflow: hidden;

position: absolute;

right: 0; top: 0;

background: url(http://img222.imageshack.us/img222/9213/subscribe.png)

no-repeat right top;

}




Letakan kode ini dibawah tag <body>



<div id='pageflip'>

<a href='http://feeds2.feedburner.com/namafeedkamu'>

<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>

<span class='msg_block'/>

</a>


</div>



Perhatikan tulisan berwarna hitam di kode, ganti dengan nama feed milik kamu. Silahkan disimpan dan lihat hasilnya. Ingat! Tampilan diatas hanya sebagai contoh saja ya, rekan bisa mengganti gambar dan link tujuan apa saja sesuai keinginan. Silahkan langsung dicoba :)

newer post

EFEK KEMBANG API

Label: 0 komentar



Baiklah sahabat semua, kali ini ga usah berlama-lama karena saya juga ga seneng buat berlama-lama.
Kali ini saya akan beri tip's ringan berupa membuat " EFEK KEMBANG API" pada blog anda
Jika ingin lihat contohnya silahkan anda klik disini atau disini.
Kalau kalian tertarik untuk memasangnya, kalian cukup masuk ke account blogger anda==> Dashboard/dasbor==> Layout/tataletak==> Tambah gadget pilih HTML/Javascript
Lalu pastekan kode dibawah ini kedalamnya :

<script src="http://www.geocities.com/andreasfafandreo3/kembangapi2.js" type="text/javascript">
</script>

Nah setelah dipaste, silahkan anda klik tombol Save/simpan perubahan.
Dan lihat hasilnya brother.....
Mudah bukan ?

Catatan :
Sebetulnya kita bisa mengubah warna flare/kembang api dengan cara mengedit beberapa bagian yang terdapat pada file :

http://www.geocities.com/andreasfafandreo3/kembangapi2.js

dan setelah anda edit beberapa bagian yang diinginkan silahkan anda save dengan ekstensi ".js" (tanpa tanda petik).
Contoh : Akujelekbanget.js
Nah kemudian file tersebut kita upload ke webhosting untuk kita ambil URL-nya... (Kalau saya menggunakan Geocities) nah nanti url inilah yang akan kita masukan kedalam kode :

<script src="http://Akujelekbanget.js" type="text/javascript">
</script> tersebut. Paham kan ?

Tapi jika anda merasa bingung untuk meng-edit-nya dan sudah merasa cocok dengan contoh yang saya berikan, anda cukup melakukan cara pertama saja O.K ?
Selamat mencoba dan jangan lupa jika ada teman yang memerlukannya, silahkan di bagi ya ?
MARI BERBAGI !!
newer post

Membuat Efek Animasi Roaming Saat Blog di Buka

Label: 0 komentar



Pernahkah anda membuka blog terus muncul semacam animasi windowa yang menampilkan suatu animasi yang menggulung mengelilingi layar monitor selama 3 sampai 4 detik, setelah itu baru blog terbuka ? Nah jika rekan2 berminat membuatnya, kali ini aku akan tulis caranya. Untuk membuatnya tidak sulit kok, Anda tinggal memasukkan script di bawah ini ke gadget blog anda, jika tidak menginginkannya lagi anda tinggal menghapus gadget tempat anda menyimpannya.

Caranya :
1. Login ke account blogger anda.
2. Klik Layout --> Add New Gadget --> HTML/JAVA SCRIPT.
3. Copy paste script di bawah ini :




<script language="JavaScript1.2" src="http://seby.fileave.com/efek-roaming.js "></script>


4. Kemudian klik Simpan.

Perhatian :
+ Untuk mencegah over load penggunaan bandwith pada script ini, sebaiknya anda download script js nya dan up load ke hosting file js anda untuk mendapatkan Direct Link anda sendiri. Kemudian ganti Direct Link http://seby.fileave.com/efek-roaming.js yang warna merah dengan Direct link anda.

Selamat mencoba ...
newer post

Membuat efek pelangi pada link

Label: 0 komentar


Bingung juga nentuin judul yang tepat, dan akhirnya saya memilih judul Membuat efek pelangi pada link (*Bener ga tu judulnya ^^)? *)

He..he... Daripada bingung-bingung, coba arahkan cursor ke salah satu link di blog ini, atau coba lihat contoh di bawah ini.

->COBA ARAHKAN CURSOR ANDA KESINI<-

Apa yang terjadi ^^)? , bukankah linknya berkedip-kedip dan berganti warna ?.

Oke... langsung aja kita mulai ritualnya...
xixixixi....


1. Seperti biasa, login ke Blogger kemudian pilih menu Layout/Tata letak

2. Klik menu Edit HTML dan jangan lupa untuk mencentang Expand Template Widget

3. Kemudian cari kode </head> , copy kode di bawah ini kemudian paste tepat di atasnya.
* Seperti biasa juga, untuk memudahkan pencarian, gunakan CTRL + F


<script type='text/javascript'>


//<![CDATA[


var rate = 20;


if (document.getElementById)
window.onerror=new Function("return true")


var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID


if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}


function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}




function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}




function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}


if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}




function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}




function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}


if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}




function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}




function ChangeColor()
{
objActive.style.color = makeColor();
}




function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?


// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;


if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}


elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;


elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;


return '#' + elmR + elmG + elmB;
}


//]]>


</script>



4. SIMPAN TEMPLATE dan lihat hasilnya...


Semoga berhasil dan semoga bermanfaat ^^v
newer post

MEMBUAT EFEK PELANGI PADA LINK

0 komentar
Wahahaha... ada yang unik lagi nih. Oleh2 blogwalking dari tips-trik-blog.blogspot.com. Membuat efek pelangi pada link. unik khan... yuk sama2 coba. saya juga tertarik nih. link akan berwarna pelangi jika mouse di arahkan ke link tersebut.



1. Login ke http://blogger.com hingga masuk Dasbor



2. Klik Tata Letak (lay out)



3. Klik tab Edit HTML




4. Kemudian cari dan temukan kode <body>



5. Kemudian pastekan script di bawah ini persis di bawah <body>



<script src='http://www.geocities.com/yono_pati/pelangi.js'

type='text/javascript'>

</script>



6. Kemudian Simpan Template




7. Selesai



Mantaf... bagus ga yah ?.. liat ah hasilnya...
newer post
newer post older post Home
Langganan: Postingan (Atom)