Amazing Marque untuk Blogger

Ada beberapa efek marquee yang dapat kita buat seperti: teks bergerak kesatu arah, bergerak bolak balik, bergerak keatas, bergerak sekali saja, dan lain-lain.

Efek-efek ini timbul karena adanya perpaduan dari beberapa fungsi yang disebut dengan attributes. Sebelum kita mulai, mari kita pelajari dulu fungsi dari masing-masing atributes.

Beberapa attributes yang sering digunakan dalam marquee yaitu:

1. Behavior : untuk mengatur gaya gerakan pada teks.
Ada 3 gaya gerakan yang bisa digunakan yaitu :


* Alternate : Teks bergerak bolak-balik
* Slide : Teks hanya bergerak sekali saja
* Scroll : Teks bergerak ke satu arah secara kontinu


2. Direction : mengatur arah gerakan teks.
Ada 4 arah gerakan yang bisa digunakan yaitu :

* Up : Teks bergerak keatas
* Down : Teks bergerak kebawah
* Left : Teks bergerak kekiri
* Right : Teks bergerak kekanan

3. Face : Untuk mengatur font teks seperti : arial, verdana, times new roman, courier, dan lain-lain. Anda bisa menggunakan semua jenis font yang tersimpan pada komputer Anda

4. Color : Untuk mengatur warna teks, seperti : "black", "green", "blue", "red", "yellow", dan lain-lain. Anda juga bisa menggunakan kode warna untuk menghasilkan warnanya, seperti: "#fffff", "#ff5a00", "#abb0b5", dan lain-lain.

5. Width : Untuk mengatur panjang ruangan teks dalam satuan pixel.

6. Height : Untuk mengatur lebar ruangan teks dalam satuan pixel.

7. Bgcolor : Untuk mengatur warna background, seperti: "black", "green", "blue", "red", "yellow", dan lain-lain. Jika Anda ingin menghilangkan warna background gunakan "transparent".

8. Scrolldelay: Untuk mengatur waktu tunda gerakan dalam satuan mili detik.

9. Scrollamount: Untuk mengatur kecepatan gerakan dalam satuan pixel.

10. Loop: untuk mengatur jumlah pengulangan.

Itulah beberapa attributes yang sering digunkan untuk membuat efek marquee atau teks berjalan. Berikut saya akan memberikan beberapa contoh efek marquee:

Contoh 1: Efek teks berjalan bolak-balik secara horizontal:

Welcome To JM

<font face="arial" color="black" size="4"><marquee direction="right" behavior="alternate" direction="right" scrollamount="2" height="20px" scrolldelay="10" bgcolor="orange" width="450px">Welcome To JM</marquee></font>

Contoh 2: Efek teks berjalan bolak-balik secara vertikal:

Welcome To JM

Kodenya :

<font face="verdana" color="yellow" size="4"><marquee direction="up" behavior="alternate" scrollamount="2" height="100px" scrolldelay="10" bgcolor="green" width="450px">Welcome To JM</marquee></font>

Contoh 3: Efek teks berjalan kekanan secara kontinue


Welcome To JM

Kodenya :

<font face="times" color="green" size="4"><marquee direction="right" behavior="scroll" scrollamount="3" height="20px" scrolldelay="10" bgcolor="yellow" width="450px">Welcome To JM</marquee></font>

Contoh 4: Efek teks berjalan kekiri sekali saja

Welcome To JM

Kodenya :

<br /> <font face="courier" color="red" size="4"><marquee direction="left" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="blue" width="450px">Welcome To JM</marquee></font>

Contoh 5: Efek teks berjalan kekanan tiga kali

Welcome To JM

Kodenya

<font face="courier" color="blue" size="4"><marquee direction="right" loop="3" behavior="slide" scrollamount="1" height="20px" scrolldelay="100" bgcolor="red" width="450px">Welcome To JM</marquee></font>

Contoh 6: Efek Bounce

Belajar Blog dan Bisnis Online

Kodenya

<font face="comic sans ms" color="orange" size="4"><marquee scrolldelay="10" behavior="alternate" direction="up" width="450px" scrollamount="2" height="100px" bgcolor="black"><marquee scrolldelay="10" behavior="alternate" direction="left" scrollamount="2">Belajar Blog dan Bisnis Online</marquee></marquee></font>

Untuk membuat teks berhenti jika mouse menyentuh area marquee dan berjalan kembali jika mouse meninggalkan area marquee. Tambahkan kode onmouseover="this.stop()" dan onmouseout="this.start()"

Sebagai contoh:

Ngeblog Itu Asyik Coy

Kodenya

<font face="arial black" color="green" size="4"><marquee behavior="alternate" direction="up" onmouseover="this.stop()" width="450" height="100" onmouseout="this.start()" bgcolor="blue">Ngeblog Itu Asyik Coy</marquee></font>

Silahkan menggeser mouse Anda ke area marquee untuk melihat hasilnya..sengihnampakgigi

Ini hanya beberapa contoh efek marquee atau teks berjalan. Masih banyak efek-efek lain. Silahkan utak-atik sendiri dengan mengganti nilai-nilai pada attributes.


Cara memasang kode marquee pada blog:

1. Login ke Blogger. Klik menu Design->Page Elements
2. Klik Add a Gadget-> HTML/ Javascript
3. Masukkan kode marquee yang ingin Anda gunakan lalu klik Save
4. Selesai. Klik View Blog untuk melihat hasilnya

Selamat berkreasi, semoga bermanfaat

Read More »

Cara Membuat Banner Berjalan

Langsung saja kita lihat contohnya





Nah sekarang inilah caran dan kodenya :

<marquee scrolldelay="10" direction="right" behavior="scroll" scrollamount="3" width="468" height="60"><a href="http://jasamodal.blogspot.com" target="_blank"><br /><img border="0" width="140" src="http://i289.photobucket.com/albums/ll222/vartimbella/rametuk-1-1.jpg" height="30" title="KLIK DISINI!" /></a></marquee>

Ganti tulisan http://www.jasamodal.blogspot.com dengan url website yang ingin dituju dan tulisan http://i289.photobucket.com/albums/ll222/vartimbella/rametuk-1-1.jpg dengan url banner anda. Jika anda ingin memasang lebih dari 1 banner. Sebagai contoh anda ingin menambah 1 banner lagi. Tambahkan kode dibawah ini diatas kode </marquee>

<span style="padding-left: 10px;"><a href="http://jasamodal.blogspot.com" target="_blank"><br /><img border="0" width="140" src="http://i289.photobucket.com/albums/ll222/vartimbella/Untitled-1-3.png" height="30" title="KLIK DISINI!" /></a></span>
Ingat:
Ganti tulisan http://www.jasamodal.blogspot.com dengan url website anda dan tulisan http://i289.photobucket.com/albums/ll222/vartimbella/rametuk-1-1.jpg dengan url banner kedua anda.

Jadi susunan kodenya menjadi seperti ini:
<marquee scrolldelay="10" direction="right" behavior="scroll" scrollamount="3" width="468" height="60"><a href="http://jasamodal.blogspot.com" target="_blank"><br /><img border="0" width="140" src="http://i289.photobucket.com/albums/ll222/vartimbella/rametuk-1-1.jpg" height="30" title="KLIK DISINI!" /></a></p><p><span style="padding-left: 10px;"><a href="http://jasamodal.blogspot.com" target="_blank"><br /><img border="0" width="140" src="http://i289.photobucket.com/albums/ll222/vartimbella/Untitled-1-3.png" height="30" title="KLIK DISINI!" /></a></span> </marquee>

Hasilnya :




Begitulah seterusnya jika anda ingin menambah banner lagi.Semoga Bermanfaat:)

Read More »

Cara Menghilangkan Title Blog

Jika kita menggunakan Title atau Judul blog dengan menggunakan template bawaan blogger tentu tidak akan banyak variasi yang kita dapatkan, sehingga tampilan header blog terasa kaku kurang enak dipandang, terutama model font serta background dari header blog itu sendiri. Karena itu untuk memperindah tampilan header blog, kita harus menggantikannya dengan banner kreasi kita sendiri yang biasanya sudah dipasangi title blognya sekalian, sehingga header blog kelihatan lebih indah, tapi ingat! jika kita hanya mengganti header blog dengan banner tanpa menyembunyikan title blog, jangan harap hasilnya akan bagus, karena tanpa menyembunyikan title blog, akan tampil title blog yang dobel, yaitu title blog dari default setting dan title blog dari kreasi banner. Untuk mengganti default setting pun tidak bisa, karena sistem di blogger tidak mengijinkan untuk menghapus (mengosongkan) title blog. Terus bagaimana caranya ?
Berikut ini adalah cara untuk menghilangkan (menyembunyikan)title blog, tanpa mengubah setting default dari blogger itu sendiri.
Caranya hanya dengan menambah script ini : visibility:hidden;

Langkah yang perlu kita lakuka adalah :
1. Login ke blogger --> tata letak --> edit HTML
2. Cari kode dibawah ini

#header h1 { margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
}


3. Kemudian Kita tinggal menyisipkan kode visibility:hidden;
dibawah kode color:#FFFFFF; tadi.

4. Sehingga hasilnya seperti ini

#header h1 { margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden;
}

5. Lalu Save Template, dan lihat hasilnya. Mudah bukan.

Read More »

Fitur Baru Blogger: Gadget Posting Terpopuler dengan Thumbnile dan Statistik Blog

Dua Gadget terbaru pada blogger memang sangat membantu kita dalam mengelola blog. Kita bisa tahu artikel atau postingan apa yang paling banyak di baca atau istilahnya terpopuler oleh pengunjung.

Silahkan anda coba sendiri gadget terbaru blogger ini. Caranya seperti biasa

1. Loggin dulu ke www.blogspot.com
2. Langsung tuju Design | Page Elements, dan klik “Add a gadget.”

Untuk Gadget Statistik Blog, kita bisa menampilkan total halaman yang tampil dalam bentuk tampilan angka atau grafik yang simpel dan cukup unik. Untuk tampilan ini anda bisa atur, mau grafik atau ingin menampilkan total tampilan halaman saja, sedangkan untuk proses perhitungannya dimulai dari diluncurkannya statistik blog ini, bukan mulai dari saat blog anda di buat.

Untuk gadget Posting Terpopuler: dari namanya saja anda sudah bisa menebak, dengan memasang gadget ini, pengunjung blog anda akan tahu posting mana yang paling banyak dibaca oleh pengunjung. Untuk konfigurasinya kita bisa menampilkan posting yang paling banayak dibuka berdasarkan waktu, 1 minggu terakhir, 1 bulan terakhir atau semua waktu. sedangkan yang saya anggap unik di gadget ini kita bisa mengatur untuk menampilkan thumbnail gambarnya atau tidak.

Read More »

Admin Bar Widget untuk Blogger

Widget ini menciptakan link yang akan membawa langsung ke pilihan blogger. Ada dua jenis dan masing-masing memiliki cara instalasi yang berbeda. Kita akan membahas kedua cara tersebut.

1. Instalasi Custom jenis-jenis ini adalah lebih bergaya, dapat melihat screenshot di bawah ini.

Untuk memasang widget ini, pergi ke PAGE ELEMENT>> ADD A GADGET>> HTML/JavaScript dan salin kode di bawah ini.

<ul class="adminbar"><li><a class="dashboard" href="http://www.blogger.com/home" target="_blank">Dashboard</a></li> <li><a class="settings" href="http://www.blogger.com/blog-options-basic.g?blogID=####" target="_blank">Change Settings</a></li> <li><a class="layout" href="http://www.blogger.com/rearrange?blogID=####" target="_blank">Change layout</a></li> <li><a class="editpost" href="http://www.blogger.com/post.g?blogID=####" target="_blank">Edit posts</a></li> <li><a class="newpost" href="http://www.blogger.com/post-create.g?blogID=####" target="_blank">New post</a></li> </ul>.

Rubah #### dengan id blog Anda. Anda dapat menemukan ID blog anda pada Adress Bar diatas, kemudian jangan lupa disimpan.

Kemudian pergi ke EDIT HTML lalu temukan ]]></b:skin> kemudian salin kode berikut diatasnya:

ul.adminbar<br /> {background-color:#EEEEEE;<br /> border:1px solid #E6E8E9;<br /> margin-bottom:8px;<br /> padding:5px 5px 0;<br /> }<br /> ul.adminbar li {<br /> background-color:#FAFAFA;<br /> border:1px solid white;<br /> list-style:none outside none;<br /> margin-bottom:6px;<br /> outline:1px solid #DDDDDD;<br /> padding:12px;<br /> }<br /> ul.adminbar li a<br /> {display:block;<br /> color:#888888 !important;<br /> text-shadow:1px 1px 0 #FFFFFF;<br /> text-decoration:none;<br /> font-size:22px;<br /> height:27px;<br /> margin:0 0 0 15px;<br /> }<br /> a.dashboard<br /> {background:url(http://i54.tinypic.com/9iseuw.jpg) no-repeat 0px 0px;<br /> padding:4px 0 2px 47px;<br /> }<br /> a.settings<br /> {background:url(http://i56.tinypic.com/2hdofnt.jpg) no-repeat 0px 0px;<br /> padding:5px 0 0 47px;}<br /> a.layout<br /> {background:url(http://i55.tinypic.com/2d8s4qw.jpg) no-repeat 0px 0px;<br /> padding:5px 0 0 47px;<br /> }<br /> a.editpost<br /> {background:url(http://i54.tinypic.com/10gwpl5.jpg) no-repeat 0px 0px;<br /> padding:5px 0 0 47px;<br /> }<br /> a.newpost<br /> {background:url(http://i54.tinypic.com/4ky1xi.jpg) no-repeat 0px 0px;<br /> padding:5px 0 0 47px;<br /> }.

Kemudian Simpan & Selesai sudah.

Sekarang jika Anda mengalami kesulitan dengan widget diatas, ada cara lain yang lebih sederhana untuk menginstalnya tanpa menggunakan CSS.

2. Instalasi jenis klasik ini lebih sederhana dan mudah. Hanya pergi ke PAGE ELEMENT>> LINK LIST dan tambahkan link berikut di dalamnya.

Dashboard : http://www.blogger.com/home

Change Settings : http://www.blogger.com/blog-options-basic.g?blogID=####

Change Layout : http://www.blogger.com/rearrange?blogID=####

Edit Posts : http://www.blogger.com/post.g?blogID=####

New Post : http://www.blogger.com/post-create.g?blogID=####


Ganti #### dengan ID blog kamu dan kemudian simpan.

Read More »

Hadiahkan Alexa Ranking untuk Blog Kamu

AlexaRank adalah ukuran kepopuleran suatu Website dengan membandingkan suatu situs dengan semua situs yang berada di jaringan Internet. Perhitungan Alexa rank ini dengan cara mengkombinasikan rata - rata visitor suatu situs perhari dan jumlah jumlah halaman suatu website yang dibuka oleh visitor. Suatu website yang berada di tingkat alexa tertinggi mempunyai
Alexa Rank 1 jadi dalam artian semakin kecil berarti semakin bagus Alexa ranking nya. Dengan kata lain urutan alexa ranking kebalikan dari pagerank.

Kegunaan Alexa rank tidak terlalu jauh berbeda dengan pagerank, yakni lebih ditujukan kepada para pebisnis online yang ingin mengumpulkan rezeki via internet. Karena tempat-tempat mencari uang di internet seperti Teks Link ads, Sponsored Review, ReviewMe, ask2link serta web-web penghasil uang lainnya menjadikan alexa rank sebagai salah satu tolok ukur. Semakin bagus alexa rank yang kamu dapatkan, maka akan semakin baik pula blog kamu di mata para pemasang iklan atau adverstiser yang mau memasang iklannya, artinya rupiah akan semakin mudah untuk masuk ke kantong kamu.
Adapun cara meningkatkan Alexa rank blog kamu hampir serupa dengan cara mendapatkan pagerank dengan tambahannya adalah sebagai berikut :

1. Buatlah postingan tentang Alexa Ranking.
2. Download plugin (add-on) Alexa untuk web browser kamu atau dikenal dengan sebutan "Sparky" di http://www.alexa.com/toolbar. Hal ini untuk memudahkan Alexa.com untuk mendeteksi keberadaan blog kamu serta trafik yang terjadi.
3. Masukkan pula widget Alexa Rank dalam blog kamu, dengan cara seperti di bawah ini.

* Silakan kunjungi site Alexa.com.
* Di sebelah kanan, klik banner "Update Your Website Info".
* Klik menu "Site Widgets", kemudian pilih bentuk widget yang akan ditampilkan (umumnya widget yang kedua).
* Masukkan alamat lengkap blog kamu dan klik "Build Widget".
* Nah, sekarang akan muncul 3 script kembali. Silakan pilih script mana yang akan kamu pasang dalam blog kamu.


Selamat ber-Alexa ranking...

Read More »

Membuat text berjalan di blog

Mungkin kalau melihat dari judulnya para rekan blogger akan berfikir biasa biasa saja, dan memang biasa biasa asaja sob tutornya, disamping sebagai bahan untuk penambah wawasan, juga sebagai arsip untuk blog ini, siapa tahu dari sekian banyak blogger ada yang belum bisa dan bahkan dengan tidak sengaja menemukan nya di blog ini (heuheuheu) Langsung saja kita praktek ya... ni kodenya

<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" behavior="scroll" align="center"> WWW.JASAMODAL.BLOGSPOT.COM </marquee> lanjut ke penjelasannya sob..
sebelumnya lihat hasilnya dari kode tadi di bawah ini
WWW.JASAMODAL.BLOGSPOT.COM

* direction="left"adalah untuk menentukan arah. anda bisa menggantinya dengan up,left,right,down.

* onmouseover="this.stop()" onmouseout="this.start()" kode berguna agar pada saat mouse menyentuh teks yang di teks tersebut berhenti.

* scrollamount="4" untuk menentukan kecepatannya.

* behavior="Alternate" untuk menentukan model pergerakan teks. anda bisa menggantinya dengan:

1. Alternate : Teks bergerak kekanan/kekiri
2. Scroll : Text bergerak terus menerus
3. Slide : Teks bergerak sekal
oke, sekian tips dan trik membuat teks berjalan, selamat mencoba

Read More »

Menempatkan Google Adsense Disebelah dan Dibawah Posting Blogger

Sesuai dengan judul diatas Menempatkan Ads atau iklan Disebelah dan Dibawah Posting Blogger. Mungkin bagi sebagian blogger tips kali ini udah basi dan sudah begitu banyak yang tahu, tapi ni diperuntukan bagi mereka yang belum tahu dan sekaligus untuk melengkapi postingan di blog ini mudah mudahan bermanfaat buat rekan blogger yang lainnya. langsung saja kita implementasikan (heuheuheu so intelek dikit tulisannya)Ok langsung saja, agar mempunyai posting di samping dan di bawah posting, tentu saja anda harus login www.blogger.com, lantas “layout”, “Edit html” lalu klik “expand widget template”. TEMUKAN TAG BERIKUT:

<p><data:post.body/></p>
Lalu ganti dengan kode dibawah ini
<br /> <b:if cond='data:blog.pageType == "item"'><br /> <div style="float:left;"> Letakan Skrip Adsense Anda Disini</div><br /> <p><data:post.body/></p><br /> Letakan Skrip Adsense Anda Disini<br /> <b:else/><br /> <p><data:post.body/></p><br /> </b:if>

Setelah itu klik save template. Mudah bukan ?
kalau ada pertanyaan silahkan tanyakan di kotak komentar.

Read More »

Modifikasi text area Part 2

Lama sekali rasanya tidak posting di blog ini, abisnya bingung mau nulis apa atau mungkin istilahnya sudah kehabisan ide, iseng iseng akunyoba modif text area aja dan hasilnya lumayan sangat tidak mengecewakan. Langsung saja kita action sobat, mungkin sebelumnya pernah di bahas di postingan sebelumnya di blog ini tentang cara membuat text area, mangga di lihat

Text Anda Disini

Nah ini penjelasannya
Fitur :
* Background berwarna Hijau
* Border berwarna biru (dot)
* Warna Text Hitam
* Text bergaris bawah

Untuk kodenya copy kode di bawah ini :
<form><br /> <textarea rows="3" cols="30" color="green" style="border-style: dotted; border-color: blue; color: black; background-color: green; text-decoration: underline;">Text Anda Disini</textarea></form>



Text Area Contoh #2

Text Anda Disini

Fitur
* Background berwarna Hijau
* Border berwarna Kuning (solid)
* Text Huruf Besar (Uppercase)
* Warna Text Putih


<form><textarea rows="3" cols="30" style="color: white; background-color: green; text-transform: uppercase; border-style: solid; border-color: yellow">Text Anda Disini</textarea></form>

Text Area Contoh #3

a href="http://bisnis-asra.blogspot.com">

Fitur
* Background berwarna Biru
* Border berwarna Merah (solid)
* Text Tanpa bergaris bawah
* Warna Text Kuning

<br /> <form><textarea rows="3" cols="30" style="color: yellow; background-color: blue; border-style: solid; border-color: red" >a href="http://bisnis-asra.blogspot.com"></textarea></form>


Yang terakhir dengan menggunakan tombol sellect all

<a href="http://bisnis-asra.blogspot.com"><img width="178" alt="Asra = mawadda" src="http://images.cooltext.com/842079.png" height="32"/></a>

Fitur
* Background berwarna putih
* Warna Text hitam
* Tombol sellect all(kode langsung di Block)

Untuk Kodenya silahkan Liat di bawah ini:
<br /> <form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width: 300px; height: 50px;" name="txt"><a href="http://bisnis-asra.blogspot.com"><img width="178" alt="Asra = Mawadda" src="http://images.cooltext.com/842079.png" height="32"/></a></textarea></p></form>
Sekian.. Semoga bermanfaat

Read More »

Cara Pasang Meta Tag untuk SEO di Blogger

Nah mungkin bagi para master sudah lebih memahami tentang SEO, pasang meta tag agar Blog SEO Frendly. Tutorial berikut ini saya berikkan bagi sobat blogger yang belum mengetahuinya. Untuk pemahaman tentang SEO bisa baca dulu disini. Berikut ini teknik Meta tag kelanjutan tutorial saya yang sudah lama sekali tetang cara pemasang meta tag di Blogger. Ok langsung saja untuk membuat meta tag untuk SEO Blogger atau Blogspot.

1. Login ke akun Blogger Anda
2. Klik Design atau tata letak
3. Klik tab menu Edit HTML
4. Beri centang kotak kecil samping tulisan
5. Setelah Anda pasang masukkan kode berikut di bwah kode <head>


<meta content=' your blog description ' name='description'/>
<meta content=' your keyword  ' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>
<meta content='all-language' http-equiv='Content-Language'/>
<meta content='Global' name='Distribution'/>
<meta content=' your country ' name='geo.country'/>
<meta content=' your city ' name='geo.placename'/>
<meta content=' your name ' name='author'/>
<meta content='all' name='robots'/>
<meta content='all' name='googlebot'/>
<meta content='all' name='msnbot'/>
<meta content='all' name='Googlebot-Image'/>
<meta content='all' name='Slurp'/>
<meta content='all' name='ZyBorg'/>
<meta content='all' name='Scooter'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='1 days' name='revisit'/>
<meta content='1 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='en' name='language'/>
<meta content='US' name='country'/>
<meta content='all' name='audience'/>
<link expr:href='data:blog.url' rel='canonical'/>

* Keterangan silahkan Anda sesuaikkan kata yang berwarna biru dengan Bolg yang Anda miliki.

7. Klik Save Template

Semoga bermanfaat, saya do'akkan semoga Blog Anda ramai pengunjungnya, jangan lupa untuk promosi blogwalking dan lain-lain agar blog Anda lebih terkenal. Informasi Meta TAg untuk SEO ini say dapat dari seorang teman Blogger di asrizalwahdanwilsa.blogspot.com silahkan mengunjungi untuk informasi lebih lanjut dan jika ingin belajar SEO lebih dalam lagi karena cukup banyak informasi SEO disana

Read More »

Pasang Icon Emotions Upin dan Ipin di Komentar Blog

Pada posting ini saya akan membahas emotion di komentar emotions film animasi yang lagi ngetren, lagi populer,.,., Yaitu upin & ipin.
Nah... Bagi temen-temen blogger yang suka dengan upin & ipin sekarang bisa memasang emotion flim upin & ipin. Timbang Basa-basi terus dan saya juga malas ngetik,. jadi langsung aja saya berikan tutorialnya.


1. Login ke Akun blog kamu, Kalu sudah masuk ya ga usah.. :)
2. Klik Tata letak / Layout
3. Masuk ke Edit HTML
4. Beri centang pada Expand Widget Template
5. Setelah itu cari kode </body> pada template Untuk lebih mudah mencari tekan ctrl F atau F3 kemudian copy paste kode yang di cari
6. Letakkan Kode HTML dibawah ini sebelum kode </body>

<script src='http://aditx.fileave.com/ipin%20dan%20upin.js' type='text/javascript'/>

7. Kemudian, cari kode berikut, cari mencarinya seperti tadi yang saya jelaskan.

<b:if cond='data:post.embedCommentForm'>

8. Letakkan Kode HTML dibawah ini sebelum kode di atas.

<b>
<img height='50' src='http://i550.photobucket.com/albums/ii403/Aditx/ehsan01.gif' width='50'/>
:a:
<img height='50' src='http://i550.photobucket.com/albums/ii403/Aditx/ehsan02.gif' width='50'/>
:b:
<img height='50' src='http://i550.photobucket.com/albums/ii403/Aditx/fizi01.gif' width='50'/>
:c:
<img height='50' src='http://i550.photobucket.com/albums/ii403/Aditx/ipin01.gif' width='50'/>
:d:
<img height='50' src='http://i550.photobucket.com/albums/ii403/Aditx/ipin02.gif' width='50'/>
:e:
<img height='50' src='http://i550.photobucket.com/albums/ii403/Aditx/kakros01.gif' width='50'/>
:f:
<img height='50' src='http://i550.photobucket.com/albums/ii403/Aditx/kakros02.gif' width='50'/>
:g:
<img height='50' src='http://i550.photobucket.com/albums/ii403/Aditx/mail01.gif' width='50'/>
:h:
<img height='50' src='http://i550.photobucket.com/albums/ii403/Aditx/upin01.gif' width='50'/>
:i:
<img height='50' src='http://i550.photobucket.com/albums/ii403/Aditx/upin02.gif' width='50'/>
:j:
</b>

9. Yang terakhir klik Save Template

Semoga berhasil... :)
Klik view Blog untuk melihat hasilnya. gambarnya seperti di bawah ini

Semoga bermanfaat dan samapi ketemu di Tips Ngeblog yang lain

Read More »

Istimewanya seorang Wanita

Kaum feminis bilang susah jadi wanita, lihat saja peraturan dibawah ini:

1. Wanita auratnya lebih susah dijaga (lebih banyak) dibanding lelaki.
2. Wanita perlu meminta izin dari suaminya apabila mau keluar rumah tetapi
tidak sebaliknya.
3. Wanita saksinya (apabila menjadi saksi) kurang berbanding lelaki.
4. Wanita menerima warisan lebih sedikit daripada lelaki.
5. Wanita perlu menghadapi kesusahan mengandung dan melahirkan anak.
6. Wanita wajib taat kepada suaminya, sementara suami tak perlu taat pada
isterinya.
7. Talak terletak di tangan suami dan bukan isteri.
8. Wanita kurang dalam beribadat karena adanya masalah haid dan nifas yang
tak ada pada lelaki.

Itu sebabnya mereka tidak henti-hentinya berpromosi untuk"MEMERDEKAKAN
WANITA ".



Pernahkah kita lihat sebaliknya (kenyataannya) ?

1. Benda yang mahal harganya akan dijaga dan dibelai serta disimpan ditempat
yang teraman dan terbaik. Sudah pasti intan permata tidak
akan dibiar terserak bukan? Itulah bandingannya dengan seorang wanita.
2. Wanita perlu taat kepada suami, tetapi tahukah lelaki wajib taat kepada
ibunya 3 kali lebih utama daripada kepada bapaknya?
3. Wanita menerima warisan lebih sedikit daripada lelaki, tetapi tahukah
harta itu menjadi milik pribadinya dan tidak perlu diserahkan kepada
suaminya, sementara apabila lelaki menerima warisan,ia perlu/wajib juga
menggunakan hartanya untuk isteri dan anak-anak.
4. Wanita perlu bersusah payah mengandung dan melahirkan anak,tetapi tahukah
bahwa setiap saat dia didoakan oleh segala makhluk, malaikat dan seluruh
makhluk ALLAH di muka bumi ini, dan tahukah jika ia mati karena melahirkan
adalah syahid dan surga menantinya.
5. Di akhirat kelak, seorang lelaki akan dipertanggungjawabk an terhadap ! 4
wanita, yaitu : Isterinya , ibunya, anak perempuannya dan saudara
perempuannya. Artinya, bagi seorang wanita tanggung jawab terhadapnya
ditanggung oleh 4 orang lelaki, yaitu : suaminya, ayahnya, anak lelakinya
dan saudara lelakinya.
6. Seorang wanita boleh memasuki pintu syurga melalui pintu surga yang mana
saja yang disukainya, cukup dengan 4 syarat saja, yaitu :sembahyang 5 waktu,
puasa di bulan Ramadhan, taat kepada suaminya dan menjaga kehormatannya.
7. Seorang lelaki wajib berjihad fisabilillah, sementara bagi wanita jika
taat akan suaminya, serta menunaikan tanggungjawabnya kepada ALLAH, maka ia
akan turut menerima pahala setara seperti pahala orang pergi berjihad
fisabilillah tanpa perlu mengangkat senjata.

Masya ALLAH ! Demikian sayangnya ALLAH pada wanita... kan
Ingat firman Nya, bahwa mereka tidak akan berhenti melakukan segala upaya,
sampai kita ikut / tunduk kepada cara-cara / peraturan
buatan mereka. (emansipasi ala western)

Yakinlah, bahwa sebagai dzat yang Maha Pencipta, yang menciptakan kita, maka
sudah pasti Ia yang Maha Tahu akan manusia, sehingga segala
hukumnya / peraturannya, adalah YANG TERBAIK bagi manusia dibandingkan
dengan segala peraturan/hukum buatan manusia.

Jagalah isterimu karena dia perhiasan, pakaian dan ladangmu, sebagaimana
Rasulullah pernah mengajarkan agar kita (kaum lelaki)
berbuat baik selalu (gently) terhadap isterimu.
Adalah sabda Rasulullah bahwa ketika kita memiliki dua atau lebih anak
perempuan, mampu menjaga dan mengantarkannya menjadi muslimah
yang baik, maka surga adalah jaminannya.. (untuk anak laki2 berlaku kaidah
yang berbeda).

Read More »

Membuat Efek Stabilo/ Membuat Background Pada Tulisan

Perhatikan Contoh Berikut ini !!!

Jasamodal Blog Hadir Untuk Anda

Sudah Lihat kan Contoh nya ?.... Sekarang kita tinggal Cara membuat nya

Tambakan Kode berkut ini pada tulisan yang akan anda beri warna background atau efek stabilo hanya itu saja gampang kan ?

<span style="background-color:#FFFFB3;"> Disini letak tulisan yang mau diberi efek stabilo </span>

Semoga bermanfaat

Read More »

Membuat Link Jadi Lebih Menarik

Ga perlu saya jelaskan lagi karena contoh nya sudah ada di blog ini yaitu saat anda mengarahkan Mouse ke arah judul postingan (semua yang memiliki Hyperlink) maka effek itu yang akan terjadi.... langsung saja kita praktekan

* Loggin ke blogger
* Klick layout atau tata letak
* Edit HTML
* Cari code berikut:

hover

Setelah ketemu tambahkan code dibawah ini sejajar pada setiap code tadi.

{ color: #00FFFF; text-transform: uppercase; font-weight: bolder; font-size: 20px; background-image: url(http://i27.tinypic.com/2626vyh.jpg); }

* Silahkan edit codenya sesuai selera anda, font size, image backgroud dan warna font, untuk code warna bisa lihat disini
* Jangan lupa save, simpan template!

Semoga Bermanfaat

Read More »

Cara Pasang Artikel Terkait ( Related Posts )

Sebenarnya ini untuk kedua kali nya saya menulis tutorial yang satu ini, Yang pertama tidak tahu kenapa postingan nya Hilang mungkin ga sengaja kedelet kali yah.. langsung saja Kita peraktekan

Seperti biasa Login ke Blog Sobat
Klik menu layout ( Tata Letak )
Klik Edit HTML
Klik Download Template
Centang kotak Expand Template Widget,

Cari Kode Berikut ini

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

<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>
</div>
</div>

Setelah itu copy kode berikut di bawah ini, lalu paste persis di bawah kode yang di atas tadi :

<b:if cond='data:blog.pageType == "item"'><br /> <div class='similar'><!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** --><br /> <!-- *****************Related Articles by Labels - Take Two****************** --><br /> <div class='widget-content related-by-cat'><h3>Related Posts / Artikel Terkait :</h3><div id='data2007'/><br /> <br /> <br /> <div id='hoctro' style='display:none;'>Widget by <u><a href='http://jasamodal.blogspot.com'>Jasamodalblog</a></u> | <u><a href='http://www.jasamodal.blogspot.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></u><br /> </div><script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 50; var maxNumberOfLabels = 40; maxNumberOfPostsPerLabel = 40; maxNumberOfLabels = 40; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); 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 < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('data2007').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); 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 = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script><br /> </div></div></b:if>

Klik tombol SIMPAN TEMPLATE / SAVE TEMPLATE.

Semoga bermanfaat

Free Template Blog

Pada postingan kali ini saya akan mencoba berbagi template yang saya kumpulkan dari beberapa web penyedia template, untuk kali ini akan saya posting template dengan 3 Kolom silahkan sobat bandingkan satu persatu di bawah ini sapa tahu ada yang minat

Coffe Desk



My Studio



Fortuzine



HealthyLifestyle



TypographyBlogger



FunkyChicks



PadMess



pro-blogger



Mungkin segitu aja dulu kapan kapan insya Alloh aku sambung lagi

Read More »

Cara Membuat Read More di Blogger

Mungkin sebagian blogger sudah pada tahu bagaimana cara membuat tulisan Readmore / Baca Selengkap nya dalam sebuah blogger. Kenapa harus memakai ReadMore / Baca selengkap nya jawaban .. untuk menghemat space tulisan. jadi dalam setiap postingan tidak tampil semuanya hanya sebagian atau seperempat saja tergantung dimana kita akan meletakan kode read More tersebut. Sebagai Contoh sobat bisa melihat dalam setiap postingan di bawah ini.
Langsung saja kita praktekan

1. Login ke blogger milik sobat
2. Klik Layout
3. Klik EditHtml
4. Download Full Template
5. Centang Kotak kecil Expand Template Widget
6. Cari Kode berikut ini

<data:post.body/>

Atau kode berikut
<p><data:post.body/></p>

7. Hapuslah kode di atas lalu ganti dengan kode di bawah ini

<b:if cond='data:blog.pageType == "item"'> <br /> <style>.fullpost{display:inline;}</style> <br /> <p><data:post.body/></p><b:else/> <br /> <style>.fullpost{display:none;}</style> <br /> <p><data:post.body/><br /> <a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p></b:if><br />

8. Lalu Klik tombol Save Template

Masih ada satu langkah lagi ....

1. Login ke blog sobat
2. Klik Setting
3. Klik Formatting
4. Scorl ke bawah pada kotak :Post Template: Masukan Kode dibawah ini

<br /> <span class="fullpost"><br /> <br /> <br /> </span>
5. Save temlpate

Saat sobat membuat postingan letakan tulisan yang mau di tampilkan di atas kode ini

<span class="fullpost">

dan sisanya setelah kode tadi.

sekian semoga membantu dan bermanfaat

Read More »

Membuat Jam dan Tanggal Mengikuti Mouse

Sudah lama sekali saya mencari JS buat menjawab pertanyaan kang Ruslan di blog saya, mungkin baru bisa saya jawab sekarang Kang... setelah gagal dalam beberapa kali percobaan akhirnya saya menemukan solusinya. Nah mudah mudahan pada tutor kali ini bisa membantu Kang Ruslan dan sobat Blogger lainnya. Langsung saja kita praktekan yach

1. Login ke blog punya sobat

2. Klik Layout
3. Klik Edit Html
4. Centang Kotak Expand Widget Templates
5. Klik Download Download Full Template (Buat jaga -jaga kalau seandainya eror)
6. Setelah itu cari Kode berikut ini

]]></b:skin>

7. Paste kode dibawah ini tepat di atas kode

]]></b:skin>

<style type="text/css"> <!-- /*Do not Alter these. Set for alignment*/ .css1{ position:absolute;top:0px;left:0px; width:16px;height:16px; font-family:Arial,sans-serif; font-size:16px; text-align:center; font-weight:bold; } .css2{ position:absolute;top:0px;left:0px; width:10px;height:10px; font-family:Arial,sans-serif; font-size:10px; text-align:center; } //--> </style>

8.Cari kode seperti ini

</head>

dan paste kode Script dibawah ini diatas kode yang berwarna hijau tersebut

<script language="JavaScript"> <!-- Mouse Follow Clock from Rainbow Arch --> <!-- This script and many more from : --> <!-- http://rainbow.arch.scriptmania.com --> <!-- Mouse Follow Clock from www.rainbow.arch.scriptmania.com //Hide from older browsers if (document.getElementById&&!document.layers){ // *** Clock colours dCol='#00ff00'; //date colour. fCol='#ffffff'; //face colour. sCol='#ffffff'; //seconds colour. mCol='#00ff00'; //minutes colour. hCol='#00ff00'; //hours colour. // *** Controls del=0.6; //Follow mouse speed. ref=40; //Run speed (timeout). // Alter nothing below! Alignments will be lost! var ieType=(typeof window.innerWidth != 'number'); var docComp=(document.compatMode); var docMod=(docComp && docComp.indexOf("CSS") != -1); var ieRef=(ieType && docMod) ?document.documentElement:document.body; theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"); theMonths=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"); date=new Date(); day=date.getDate(); year=date.getYear(); if (year < 2000) year=year+1900; tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year; D=tmpdate.split(""); N='3 4 5 6 7 8 9 10 11 12 1 2'; N=N.split(" "); F=N.length; H='...'; H=H.split(""); M='....'; M=M.split(""); S='.....'; S=S.split(""); siz=40; eqf=360/F; eqd=360/D.length; han=siz/5.5; ofy=-7; ofx=-3; ofst=70; tmr=null; vis=true; mouseY=0; mouseX=0; dy=new Array(); dx=new Array(); zy=new Array(); zx=new Array(); tmps=new Array(); tmpm=new Array(); tmph=new Array(); tmpf=new Array(); tmpd=new Array(); var sum=parseInt(D.length+F+H.length+M.length+S.length)+1; for (i=0; i < sum; i++){ dy[i]=0; dx[i]=0; zy[i]=0; zx[i]=0; } algn=new Array(); for (i=0; i < D.length; i++){ algn[i]=(parseInt(D[i]) || D[i]==0)?10:9; document.write('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'</div>'); tmpd[i]=document.getElementById("_date"+i).style; } for (i=0; i < F; i++){ document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'</div>'); tmpf[i]=document.getElementById("_face"+i).style; } for (i=0; i < H.length; i++){ document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'</div>'); tmph[i]=document.getElementById("_hours"+i).style; } for (i=0; i < M.length; i++){ document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'</div>'); tmpm[i]=document.getElementById("_minutes"+i).style; } for (i=0; i < S.length; i++){ document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'</div>'); tmps[i]=document.getElementById("_seconds"+i).style; } function onoff(){ if (vis){ vis=false; document.getElementById("control").value="Clock On"; } else{ vis=true; document.getElementById("control").value="Clock Off"; Delay(); } kill(); } function kill(){ if (vis) document.onmousemove=mouse; else document.onmousemove=null; } function mouse(e){ var msy = (!ieType)?window.pageYOffset:0; if (!e) e = window.event; if (typeof e.pageY == 'number'){ mouseY = e.pageY + ofst - msy; mouseX = e.pageX + ofst; } else{ mouseY = e.clientY + ofst - msy; mouseX = e.clientX + ofst; } if (!vis) kill(); } document.onmousemove=mouse; function winDims(){ winH=(ieType)?ieRef.clientHeight:window.innerHeight; winW=(ieType)?ieRef.clientWidth:window.innerWidth; } winDims(); window.onresize=new Function("winDims()"); function ClockAndAssign(){ time = new Date(); secs = time.getSeconds(); sec = Math.PI * (secs-15) / 30; mins = time.getMinutes(); min = Math.PI * (mins-15) / 30; hrs = time.getHours(); hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360; for (i=0; i < S.length; i++){ tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px"; tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px"; } for (i=0; i < M.length; i++){ tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px"; tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px"; } for (i=0; i < H.length; i++){ tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px"; tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px"; } for (i=0; i < F; i++){ tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px"; tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px"; } for (i=0; i < D.length; i++){ tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px"; tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px"; } if (!vis)clearTimeout(tmr); } buffW=(ieType)?80:90; function Delay(){ scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset; if (!vis){ dy[0]=-100; dx[0]=-100; } else{ zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del); zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del); } for (i=1; i < sum; i++){ if (!vis){ dy[i]=-100; dx[i]=-100; } else{ zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del); zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del); } if (dy[i-1] >= winH-80) dy[i-1]=winH-80; if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW; } tmr=setTimeout('Delay()',ref); ClockAndAssign(); } window.onload=Delay; } //--> </script>


9 . Klik Save Template
10. Klik Page Elemen untuk menambahkan elemen baru
11. Klik Add Gadget
12. Pilih HTML/JavaScript lalu masukan Kode di bawah ini

<style type="text/css"> <!-- /*Do not Alter these. Set for alignment*/ .css1{ position:absolute;top:0px;left:0px; width:16px;height:16px; font-family:Arial,sans-serif; font-size:16px; text-align:center; font-weight:bold; } .css2{ position:absolute;top:0px;left:0px; width:10px;height:10px; font-family:Arial,sans-serif; font-size:10px; text-align:center; } //--> </style><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <script language="JavaScript"> <!-- Mouse Follow Clock from Rainbow Arch --> <!-- This script and many more from : --> <!-- http://rainbow.arch.scriptmania.com --> <!-- Mouse Follow Clock from www.rainbow.arch.scriptmania.com //Hide from older browsers if (document.getElementById&&!document.layers){ // *** Clock colours dCol='#00ff00'; //date colour. fCol='#ffffff'; //face colour. sCol='#ffffff'; //seconds colour. mCol='#00ff00'; //minutes colour. hCol='#00ff00'; //hours colour. // *** Controls del=0.6; //Follow mouse speed. ref=40; //Run speed (timeout). // Alter nothing below! Alignments will be lost! var ieType=(typeof window.innerWidth != 'number'); var docComp=(document.compatMode); var docMod=(docComp && docComp.indexOf("CSS") != -1); var ieRef=(ieType && docMod) ?document.documentElement:document.body; theDays=new Array("SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"); theMonths=new Array("JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"); date=new Date(); day=date.getDate(); year=date.getYear(); if (year < 2000) year=year+1900; tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year; D=tmpdate.split(""); N='3 4 5 6 7 8 9 10 11 12 1 2'; N=N.split(" "); F=N.length; H='...'; H=H.split(""); M='....'; M=M.split(""); S='.....'; S=S.split(""); siz=40; eqf=360/F; eqd=360/D.length; han=siz/5.5; ofy=-7; ofx=-3; ofst=70; tmr=null; vis=true; mouseY=0; mouseX=0; dy=new Array(); dx=new Array(); zy=new Array(); zx=new Array(); tmps=new Array(); tmpm=new Array(); tmph=new Array(); tmpf=new Array(); tmpd=new Array(); var sum=parseInt(D.length+F+H.length+M.length+S.length)+1; for (i=0; i < sum; i++){ dy[i]=0; dx[i]=0; zy[i]=0; zx[i]=0; } algn=new Array(); for (i=0; i < D.length; i++){ algn[i]=(parseInt(D[i]) || D[i]==0)?10:9; document.write('<div id="_date'+i+'" class="css2" style="font-size:'+algn[i]+'px;color:'+dCol+'">'+D[i]+'</div>'); tmpd[i]=document.getElementById("_date"+i).style; } for (i=0; i < F; i++){ document.write('<div id="_face'+i+'" class="css2" style="color:'+fCol+'">'+N[i]+'</div>'); tmpf[i]=document.getElementById("_face"+i).style; } for (i=0; i < H.length; i++){ document.write('<div id="_hours'+i+'" class="css1" style="color:'+hCol+'">'+H[i]+'</div>'); tmph[i]=document.getElementById("_hours"+i).style; } for (i=0; i < M.length; i++){ document.write('<div id="_minutes'+i+'" class="css1" style="color:'+mCol+'">'+M[i]+'</div>'); tmpm[i]=document.getElementById("_minutes"+i).style; } for (i=0; i < S.length; i++){ document.write('<div id="_seconds'+i+'" class="css1" style="color:'+sCol+'">'+S[i]+'</div>'); tmps[i]=document.getElementById("_seconds"+i).style; } function onoff(){ if (vis){ vis=false; document.getElementById("control").value="Clock On"; } else{ vis=true; document.getElementById("control").value="Clock Off"; Delay(); } kill(); } function kill(){ if (vis) document.onmousemove=mouse; else document.onmousemove=null; } function mouse(e){ var msy = (!ieType)?window.pageYOffset:0; if (!e) e = window.event; if (typeof e.pageY == 'number'){ mouseY = e.pageY + ofst - msy; mouseX = e.pageX + ofst; } else{ mouseY = e.clientY + ofst - msy; mouseX = e.clientX + ofst; } if (!vis) kill(); } document.onmousemove=mouse; function winDims(){ winH=(ieType)?ieRef.clientHeight:window.innerHeight; winW=(ieType)?ieRef.clientWidth:window.innerWidth; } winDims(); window.onresize=new Function("winDims()"); function ClockAndAssign(){ time = new Date(); secs = time.getSeconds(); sec = Math.PI * (secs-15) / 30; mins = time.getMinutes(); min = Math.PI * (mins-15) / 30; hrs = time.getHours(); hr = Math.PI * (hrs-3) / 6 + Math.PI * parseInt(time.getMinutes()) / 360; for (i=0; i < S.length; i++){ tmps[i].top=dy[D.length+F+H.length+M.length+i]+ofy+(i*han)*Math.sin(sec)+scrollY+"px"; tmps[i].left=dx[D.length+F+H.length+M.length+i]+ofx+(i*han)*Math.cos(sec)+"px"; } for (i=0; i < M.length; i++){ tmpm[i].top=dy[D.length+F+H.length+i]+ofy+(i*han)*Math.sin(min)+scrollY+"px"; tmpm[i].left=dx[D.length+F+H.length+i]+ofx+(i*han)*Math.cos(min)+"px"; } for (i=0; i < H.length; i++){ tmph[i].top=dy[D.length+F+i]+ofy+(i*han)*Math.sin(hr)+scrollY+"px"; tmph[i].left=dx[D.length+F+i]+ofx+(i*han)*Math.cos(hr)+"px"; } for (i=0; i < F; i++){ tmpf[i].top=dy[D.length+i]+siz*Math.sin(i*eqf*Math.PI/180)+scrollY+"px"; tmpf[i].left=dx[D.length+i]+siz*Math.cos(i*eqf*Math.PI/180)+"px"; } for (i=0; i < D.length; i++){ tmpd[i].top=dy[i]+siz*1.5*Math.sin(-sec+i*eqd*Math.PI/180)+scrollY+"px"; tmpd[i].left=dx[i]+siz*1.5*Math.cos(-sec+i*eqd*Math.PI/180)+"px"; } if (!vis)clearTimeout(tmr); } buffW=(ieType)?80:90; function Delay(){ scrollY=(ieType)?ieRef.scrollTop:window.pageYOffset; if (!vis){ dy[0]=-100; dx[0]=-100; } else{ zy[0]=Math.round(dy[0]+=((mouseY)-dy[0])*del); zx[0]=Math.round(dx[0]+=((mouseX)-dx[0])*del); } for (i=1; i < sum; i++){ if (!vis){ dy[i]=-100; dx[i]=-100; } else{ zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del); zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del); } if (dy[i-1] >= winH-80) dy[i-1]=winH-80; if (dx[i-1] >= winW-buffW) dx[i-1]=winW-buffW; } tmr=setTimeout('Delay()',ref); ClockAndAssign(); } window.onload=Delay; } //--> </script>



13. Lalu Save dan Lihat Hasil nya semoga bermanfaat

Read More »

Cara Membuat Text Area

Apa itu text area?. Untuk memudahkan anda memahami apa itu text area, silahkan alihkan perhatian anda ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut text area. Nah dengan melihat contoh tadi, maka dapat kita katakan bahwa Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>

Maka Hasilnya Akan Seperti Ini:

Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area

Keterangan : rows="

6

", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya.

Cols="

20

", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.

Text Area dengan memakai HighLight

Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form>

Maka Hasilnya Akan Seperti Ini

simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung

Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan yang kedua adalah elemen kode untuk membuat text area.

Elemen tombol highlight All :

<div align="center">

kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.

<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()">

kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.

Value="Highlight All"

kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

Element text area :

<p align="center">

ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
2. -->kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"

HEIGHT: 144px

angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.

Semoga bermanfaat buat blogger semua

sumber kolomtutorial.com

Read More »

Calculator Keyword For Blogger & Netter

Iseng lagi browsing nemu blog nya mba osi ada artikel yang bagus yang menarik perhatian saya, yaitu Calculator Keyword.....sudah pasti pada bisa nebak apa maksud dari tulisan ini. Yupz.. kalkulator keyword adalah sebuah aplikasi atau widget untuk mencari seberapa banyak dan kuat kata kunci yang ada di blog kita caranya sangatlah mudah tinggal masukan url web kita terus klik submit hanya itu saja. Bagi para Blogger cara ini akan sangat membantu dalam pembuatan postingan, Lansung saja sobat bloger coba aplikasi di bawah ini.

Keyword Density Checker Enter a URL to analyze

Read More »