thanks for visit Tutorial BLogAnimated Typing Text - Animasi Mengetik Teks atau tulisan

 Animated Typing Text - Animasi Mengetik Teks atau tulisan

Animated Typing Text - Animasi Mengetik Teks ini bisa di pasang di widget dan post blog.
Animated Typing Text - Animasi Mengetik Teks ini berguna untuk membuat animasi dalam tulisan.
Animated Typing Text - Animasi Mengetik Teks ini berbeda dengan typing text seperti biasanya.Animated Typing Text - Animasi Mengetik Teks ini menambahkan animasi setiap mengetik huruf.

Berikut tutorial blog mengenai membuat Animated Typing Text - Animasi Mengetik Teks:

Neon Lights Text - Teks Animasi

Neon Lights Text - Teks Animasi ini membuat tulisan animasi di blog kamu.
Neon Lights Text - Teks Animasi bisa di pasang di widget.
Neon Lights Text - Teks Animasi ini berguna sebagai alert ucapan selamat datang atau bisa kamu sesuaikan sendiri.

Copy dan paste kode Neon Lights Text - Teks Animasi di bawah ini kedalam widget atau post blog kamu.

<h3><script language="JavaScript1.2"> /* Neon Lights Text By: ulil amri http://ulil-amri.com http://tutorial-blog-amricow.blogspot.com */ var message="Welcome to My Blog!" var neonbasecolor="black" var neontextcolor="red" var flashspeed=100 //in milliseconds ///No need to edit below this line///// var n=0 if (document.all||document.getElementById){ document.write('<font color="'+neonbasecolor+'">') for (m=0;m<message.length;m++) document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>') document.write('</font>') } else document.write(message) function crossref(number){ var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number) return crossobj } function neon(){ //Change all letters to base color if (n==0){ for (m=0;m<message.length;m++) //eval("document.all.neonlight"+m).style.color=neonbasecolor crossref(m).style.color=neonbasecolor } //cycle through and change individual letters to neon color crossref(n).style.color=neontextcolor if (n<message.length-1) n++ else{ n=0 clearInterval(flashing) setTimeout("beginneon()",1500) return } } function beginneon(){ if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed) } beginneon() </script></h3>

Nb:
- Ubah tulisan Welcome to my blog!
- Ubah Var color

Create Rounded Corners with Border-Radius atau Membuat Garis Lengkung

Postingan tutorial blog ini mengenai Create Rounded Corners with Border-Radius atau Membuat Garis Lengkung dengan css.
Disini saya hanya menjelaskan prinsip dari Border Radius atau Membuat Garis Lengkung dengan css di beberapa browser.
Perlu kamu ketahui bahwa kode html pada setiap browser untuk Border Radius atau Membuat Garis Lengkung dengan css itu berbeda.
Berikut penjelasan Create Rounded Corners with Border-Radius atau Membuat Garis Lengkung pada beberapa browser.

- Border Radius atau Membuat Garis Lengkung pada Mozilla Firefox

-moz-border-radius

Contohnya : -moz-border-radius-topright:15px;

- Border Radius atau Membuat Garis Lengkung pada Webkit (Safari) atau yang biasa disebut Google Chrome

-webkit-border-radius

Contohnya : -webkit-border-top-left:15px;

- Border Radius atau Membuat Garis Lengkung pada Opera

border-radius

Contohnya : border-radius:15px;

Berikut beberapa model Create Rounded Corners with Border-Radius atau Membuat Garis Lengkung pada Mozilla Firefox, Webkit (safari)dan Opera:

-moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; border:5px solid #BDDC12;

-moz-border-radius-topright:15px; -moz-border-radius-bottomright:15px; -webkit-border-top-right-radius:15px; -webkit-border-bottom-right-radius:15px; border-top-right-radius:15px; border-bottom-right-radius:15px; border:5px solid #BDDC12;

-moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -webkit-border-top-left-radius:15px; -webkit-border-top-right-radius:15px; border-top-left-radius:15px; border-top-right-radius:15px; border:5px solid #BDDC12;

-moz-border-radius-topleft:15px; -moz-border-radius-bottomright:15px; -webkit-border-top-left-radius:15px; -webkit-border-bottom-right-radius:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border:5px solid #BDDC12;

-moz-border-radius-topright:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-bottomleft:15px; border-top-right-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px; border:5px solid #BDDC12; padding:10px;

Jika ingin melihat border radius circle atau membuat lingkaran dengan border radius klik DISINI

Create Rounded Corners with Border-Radius atau Membuat Garis Lengkung dengan css ini bisa di gunakan untuk posting, widget,dll.

Many Text Styles - Tulisan Anak Gaul (Lebay)

Many Text Styles - Tulisan Anak Gaul (Lebay) ini untuk menghasilkan tulisan yang di singkat,mengandung angka dan mengandung huruf besar dan huruf kecil berguna untuk website atau blog, facebook, twitter, myspace,dll.
Caranya adalah dengan copy teks yang telah di ubah pada box 2 atau kotak kedua dan paste di website atau blog, twitter, facebook, my space,dll.

Tuliskan Teks Yang Ingin Kamu Jadikan Tulisan Anak Gaul (Lebay) di bawah ini

Tulisan Huruf Besar dan Kecil
Tulisan Pakai Angka
Tulisan Yang di Singkat

Crossed Oblique Text - Tulisan Tercoret Miring

Crossed Oblique Text - Tulisan Tercoret Miring ini untuk menghasilkan tulisan tercoret miring dan berguna untuk website atau blog, facebook, twitter, myspace,dll.
Caranya adalah dengan copy teks yang telah jadi tercoret miring pada box 2 atau kotak kedua dan paste di website atau blog, twitter, facebook, my space,dll.

Tuliskan Teks Yang Ingin Kamu Jadikan Teks Tercoret Miring di bawah ini

Flip Text Generator - Tulisan Terbalik

Flip Text Generator - Tulisan Terbalik ini untuk menghasilkan tulisan terbalik dan berguna untuk website atau blog, facebook, twitter, myspace,dll.

Caranya adalah dengan copy teks yang telah jadi terbalik pada box 2 atau kotak kedua dan paste di website atau blog, twitter, facebook, my space,dll.

Underline Text Generator - Tulisan Garis Bawah

Underline Text Generator - Tulisan Garis Bawah ini untuk menghasilkan tulisan di garis bawah dan berguna untuk website atau blog, facebook, twitter, myspace,dll.
Caranya adalah dengan copy teks yang telah jadi garis bawah pada box 2 atau kotak kedua dan paste di website atau blog, twitter, facebook, my space,dll.

Tuliskan Teks Yang Ingin Kamu Jadikan Teks Bergaris Bawah di bawah ini

Upperline Text Generator - Tulisan Garis Atas

Upperline Text Generator - Tulisan Garis Atas ini untuk menghasilkan tulisan di garis atas dan berguna untuk website atau blog, facebook, twitter, myspace,dll.
Caranya adalah dengan copy teks yang telah jadi garis atas pada box 2 atau kotak kedua dan paste di website atau blog, twitter, facebook, my space,dll.

Tuliskan Teks Yang Ingin Kamu Jadikan Teks Bergaris Atas di bawah ini

Membuat Link Dengan Animasi Tooltip

Tutorial Blog Membuat Link Dengan Animasi Tooltip ini sangat berguna karena blog atau website kamu akan terlihat elegan saat pengunjung menyorot sebuah link akan mengeluarkan animasi.

Berikut adalah Membuat Link Dengan Animasi Tooltip :
- Login akun blogger kamu
- Pilih Rancangan kemudian edit html
- Copy dan Paste kode di bawah ini di atas kode </head>

<style type='text/css'> a.tooltip span { display:none; padding:5px 5px; margin-left:3px; margin-top:10px; width:170px; font-size:12px; line-height:150%; } a.tooltip:hover span{ display:inline; position:absolute; background:#B5E21A; border:1px solid #FFFFFF; -moz-border-radius: 20px; -webkit-border-radius: 20px; color:#fff; } </style>

- Gunakan kode berikut untuk memasang link dengan animasi tooltip tadi

<a class="tooltip" href="http://www.ulil-amri.com" style="color: red;" target="_blank"><span> DOWNlOAD HERE</span>Tutorial Blogger</a>

Untuk Melihat contohnya,sorot link di bawah ini.

DOWNlOAD HERETutorial Blogger

Trik Untuk Merubah Mouse di Blog atau Website

Trik Untuk Merubah Mouse di Blog atau Website ini hanyalah menggunakan teknik sederhana dalam css.
Kita hanya menambah kode stlye pada tulisan atau link di blog kamu.
Kebanyakan blogger berkeinginan untuk merubah gaya kursor blog pada saat menyorot link dan teks.

Berikut tutorial blog Merubah Mouse di Blog atau Website.

Untuk melihat contoh cursor maka sorot pada tulisan tutorial blog.


- Cursor hand | kursor tangan

Tutorial Blog

- Cursor text | kursor teks

Tutorial Blog


- Cursor crosshair | kursor tanda tambah

Tutorial Blog


- Cursor wait | kursor menunggu

Tutorial Blog

- Cursor move | kursor gerak

Tutorial Blog

- Cursor help | kursor tanda tanya

Tutorial Blog


- Cursor not-allowed | kursor dilarang

Tutorial Blog


Itu aja dulu ya., Trik Untuk Merubah Mouse di Blog atau Website.
Kode di atas adalah kursor yang umum di gunakan dalam website.

Jika ingin memesan atau mengetahui kode kursor yang biasa kalian lihat baik di website atau di komputer kamu.

Silahkan komentar saja !!!

Cara Membuat Post Body Hover

Cara Membuat Post Body Hover berguna untuk sebagai animasi pada postingan blog kamu.
Caranya cukup mudah hanya dengan copy dan paste kode post body dan paste saja di template kamu.

Berikut Tutorial Blog Cara Membuat Post Body Hover :
- Login akun BLogger kamu
- Pilih rancangan kemudian edit html
- Centang expand template widget
- Back up html untuk mengamankan template apabila terjadi galat atau kesalahan dalam mengedit atau desain blog kamu.
- Simak Tutorial Blog di bawah ini

Caranya cukup mudah hanya dengan copy dan paste kode post body kemudian paste kode html post body tadi di template kamu.

Setelah kamu paste tambahkan kode :hover

Misalkan kode html post body aku seperti di bawah ini

.post-body{background:#3B5998 url(link image 1) center repeat;}

kemudian untuk post hover body seperti ini

.post-body:hover{background:#FFFFFF url(link image 2) center repeat;}

Perhatikan perbedaan kode html di atas,saya menambahkan kode hover,background warna dan background gambar yang berbeda.

Begitulah yang dimaksud dengan post hover,terjadi perbedaan antara sebelum mouse menyorot postingan blog kamu dengan saat mouse menyorot postingan kamu.

Terkesan memberikan sebuah animasi pada postingan blog kamu.

Sebuah Tutorial Blog yang singkat tapi sangat berguna untuk postingan blog kamu.

Upload The Javascript, Images (png, jpg, gif, etc.), sis, sisx, jar, zip, etc

Your secret code is: 177424824 
Save in Folder amri

Your link download: http://amricow.wen.ru/amri/your file name
Example: http://amricow.wen.ru/amri/unit-converter-length.jpg


Tempat Upload Javascript,Image (png,jpg,gif,dll),sis,sisx,jar,rar,dll

Cara Membuat Highlight All atau Select All

Cara Membuat Highlight All atau Select All dengan background ini sangat mudah,hanya tinggal copy dan paste kode di bawah ini di widget yang kamu inginkan.
Biasanya Highlight All atau Select All ini di gunakan dalam postingan blog yang mengandung kode html ,dll. Bisa juga kamu atur tinggi dan lebar textarea nya.
Cara Membuat Highlight All atau Select All yang simple dan praktis ini kamu copy dan paste kode di bawah ini ke dalam widget atau pun postingan blog kamu.

Keterangan : - Ubah ukuran lebar yang berada pada tulisan width - Ubah ukuran tinggi yang berada pada tulisan height - Ubah warna yang berada pada tulisan background Jika masih bingung,silahkan komentar.

Cara Otomatis Merubah Gambar Background Blog

Berikut adalah tutorial blog untuk merubah background website atau blog tanpa harus edit html.
Mungkin diantara kamu ada yang berkata tidak ada gunanya dan membuat loading blog menjadi berat.
Tapi menurut saya merubah background blog dengan cara otomatis sangat berguna untuk membuat pembaca artikel postingan kamu tidak jenuh melihat 1 background saja dan ini tidak membuat blog atau website menjadi berat karena hanya memakan 1kb hingga 2kb.

Jika berminat maka copy dan paste kode html di bawah ini ke dalam widget kamu.

<select onchange="amrichangebgi(this.value);" name="amricbgc" title="Change Background Image" width="200" height="30"> <option value="url(MASUKKAN URL GAMBAR DISINI) repeat center center fixed" />background 1 <option value="url(MASUKKAN URL GAMBAR DISINI) repeat center center fixed" />background 2 <option value="url(MASUKKAN URL GAMBAR DISINI) repeat center center fixed" />background 3 <option value="url(MASUKKAN URL GAMBAR DISINI) repeat center center fixed" />background 4 <option value="url(MASUKKAN URL GAMBAR DISINI) repeat center center fixed" />background 5 </select><script src="http://amricow-file.googlecode.com/files/change%20background.txt" type="text/javascript"></SCRIPT>

Keterangan : - Ubah tulisan Backgroung 1 sampai background 5 dengan yang kamu inginkan - Ubah tulisan MASUKKAN URL GAMBAR DISINI dengan url atau link gambar yang ingin kamu pasang jadi background blog atau website kamu

Cara Memasang Widget Status Yahoo Messenger

Memasang Widget Status Yahoo Messenger ini berguna untuk mengetahui online atau offline kamu di yahoo messenger yang mana pengunjung dapat mengobrol atau bertanya dengan kamu melalui yahoo

Berikut Tutorial Cara Memasang Widget Status Yahoo Messenger :

1. Login ke Blogger
2. klik Tab Rancangan
3. klik Add gadget
4. pilih HTML/Javascript
5. copy dan paste kode di bawah ini

Ketetangan :
- Tulisan amricow di ubah dengan ID yahoo kamu
- Angka 15 di ubah dengan keinginan icon YM kamu sendiri

Cara Membuat CSS Drop Down Menu Klik Aja Gambarnya Agar Terlihat Jelas
br/> 1. Copy paste ini kode dibawah ini di atas kode </head>
br/>

<style type="text/css"> .menu-secondary-wrap{padding:0;position:relative;height:56px;z-index:300;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFpa_IjuYoH-iMHDh9vT4lfvL8GhJD1nye2r_8e24gRFS-NHyYOZup9QUl9LR_5AQm5rQtgyz_cpmrXxbghyphenhyphend64-PHSUnPhLJP6POZvIwRsszkVjrDqC4_uNYCmCDYfHFyEzsoO_QHhxBa/s1600/menu-secondary-bg.png) left top repeat-x;margin-bottom:4px;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding-left:6px} .menu-secondary{} .menu-secondary ul{min-width:160px} .menu-secondary li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKTldpTiw5EAm5aMWbw7SMMRN0L1Tqw6Rz5XdsPHKBnUD78Q-94JO0qztTh70DVaZtB4E009z-XOkeoLqty0N_FFpqGlSMH_HiQYlO5gI7GEGrNXElTCyvsogL0mfq1v_uFseuwfxgQxTB/s1600/menu-secondary-separator.png) right center no-repeat;margin:0 5px 0 0} .menu-secondary li a{color:#E9EDE1;padding:19px 15px 22px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px Arial,Helvetica,Sans-serif;margin:0 6px 0 0} .menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#E9EDE1;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFpa_IjuYoH-iMHDh9vT4lfvL8GhJD1nye2r_8e24gRFS-NHyYOZup9QUl9LR_5AQm5rQtgyz_cpmrXxbghyphenhyphend64-PHSUnPhLJP6POZvIwRsszkVjrDqC4_uNYCmCDYfHFyEzsoO_QHhxBa/s1600/menu-secondary-bg.png) left -156px repeat-x;outline:0} .menu-secondary li li a{color:#FFF;background:#6B9A05;padding:10px 15px;text-transform:none;margin:0;font-weight:normal;border:0} .menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#FFF;background:#9ADF06;outline:0} .menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px} .menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:20px 13px 0 0} .menu-secondary li li .sf-sub-indicator{padding:8px 13px 0 0} .menu-secondary-wrap .sf-shadow ul{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD-DZsp8olkHyQ152Rrjxp-KOTq7tvMWOz79HXsLvxMf8rKctE7ZusR42kBtq_JLbsh0QGH7jUy-FiInCqxJPS22vKmURUW5TNsqdRSjdfDbTSyswveOgdnYswpXTsJR-N_sD4CK1u-QbH/s1600/menu-secondary-shadow.png') no-repeat bottom right}</style>

2. Berikut Pemasangan Html nya,taruh di atas kode <body>

<div class='span-24'><div class='menu-secondary-wrap'> <ul class='menus menu-secondary'><li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='#'>Business</a> <ul class='children'><li><a href='#'>Internet</a></li> <li><a href='#'>Market</a></li> <li><a href='#'>Stock</a></li> </ul></li> <li><a href='#'>Downloads</a> <ul class='children'><li><a href='#'>Dvd</a></li> <li><a href='#'>Games</a></li> <li><a href='#'>Software</a> <ul class='children'><li><a href='#'>Office</a> </li> </ul></li> </ul></li> <li><a href='#'>Parent Category</a> <ul class='children'><li><a href='#'>Child Category 1</a> <ul class='children'><li><a href='#'>Sub Child Category 1</a></li> <li><a href='#'>Sub Child Category 2</a></li> <li><a href='#'>Sub Child Category 3</a></li> </ul></li> <li><a href='#'>Child Category 2</a></li> <li><a href='#'>Child Category 3</a></li> <li><a href='#'>Child Category 4</a></li> </ul></li> <li><a href='#'>Featured</a></li> <li><a href='#'>Health</a> <ul class='children'><li><a href='#'>Childcare</a></li> <li><a href='#'>Doctors</a></li> </ul></li> <li><a href='#'>music</a></li> <li><a href='#'>Uncategorized</a></li> </ul></div></div>

br/> Jika ada kesulitan,silahkan komentar ...

Menjadwalkan Postingan

Untuk Menjadwalkan Postingan sangat mudah,hanya dengan pilih Post options kemudian lihat pada gambar di atas.

Bisa juga kamu Menjadwalkan Postingan untuk besok.

Menjadwalkan Postingan ini sangat mudah tapi cukup bermanfaat untuk mengatur urutan postingan di blog kamu.

Silahkan Mencoba !!!!

Membuat Page View Terlihat Banyak Pengunjung

Membuat Page View Terlihat Banyak Pengunjung ini bukanlah sebuah tutorial blog tapi adalah sebuah trik menipu pengunjug.
Loh kenapa begitu sob,kok bisa membohongi pegunjug?
Iya,karena page view atau statistik website atau blog bukan hanya dari pengunjung blog kita.
bingung ya?

Contoh :

aku pasang sebuah widget flag counter atau statistik akan tetapi aku bukan pasang widget statistik dari blog melainkan memasang widget statistik dari blog atau website lain.
Mulai mengerti kan?
Bisa saja kita pasang widget statistik dari kaskus
bahkan bisa kita pasang lebih dari 1 website di blog kita

Silahkan mencoba !!!