Tampilkan postingan dengan label tips dan trik blog. Tampilkan semua postingan
Tampilkan postingan dengan label tips dan trik blog. Tampilkan semua postingan
0

Create Rounded Corners with Border-Radius

Senin, 25 Juli 2011



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.
0

Membuat Link Dengan Animasi Tooltip

Minggu, 24 Juli 2011


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>



- Gunakan kode berikut untuk memasang link dengan animasi tooltip tadi



Untuk Melihat contohnya,sorot link di bawah ini.

DOWNlOAD HERETutorial Blogger
0

Trik Untuk Merubah Mouse di Blog atau Website

Sabtu, 23 Juli 2011


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 !!!
0

Cara Membuat Post Body Hover




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.
0

Membuat Page View Terlihat Banyak Pengunjung

Senin, 11 Juli 2011



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 !!!
0

Kegunaan Wapsite Wen.ru Sebagai Tempat Upload

Rabu, 29 Juni 2011


Kegunaan Wapsite Khususnya bagi Blogger

Kegunaan wapsite bagi blogger adalah sebagai tempat upload Javascript,Image (png,jpg,gif,dll),sis,sisx,jar,rar,dll.
Kebanyakan dari blogger melupakan hal ini padahal wapsite adalah sebuah situs yang biasa di buat dari hp dan simple.
Tentunya ringan untuk di akses karena di khusus kan untuk pembuat website dari hp.

Berikut tutorial untuk membuat wapsite dan sekaligus mendapatkan tempat uploadnya:




1. register di wen.ru ,jika tidak bisa di akses oleh mozilla maka instal pengaya ini
di mozilla kamu
2. login ke akun wen.ru
3. ikuti langakah screenshot ini


4. setelah login,pilih wexplorer kemudian pilih add selanjutnya create folder.Tulis nama folder kamu
5. bukalah folder yang telah kamu buat tadi kemudian pilh add setelah itu pilih secret code
6. simpan secret code yang telah kamu dapatkan tadi
7. buka link ini yang merupakan link external upload dari wen.ru
8. tuliskanlah secret code dan nama folder yang telah kamu buat tadi
9. setelah kamu upload file kamu maka link downloadnya seperti ini

Contoh: http://amricow.wen.ru/amri/your file name
nama file yang aq upload unit-converter-length.jpg
maka jadinya seperti ini:


kelebihan dari upload wen.ru ini,kamu bisa upload javascript kamu,sis,sisx,rar,gambar,dll dan bisa di lakukan tanpa login.
cukup hanya mengingat secret code dan nama folder kamu.

aku membuat ini agar mudah di akses hanya dengan cara membuat iframe link external upload dari wen.ru di blog aku.
Lihat disini iframe yang telah aku buat.
0

HTML Encrypt

0

Membuat Recent Post dengan Efek Marquee

Selasa, 28 Juni 2011



Membuat Recent Post dengan Efek Marquee


Membuat Recent Post dengan Efek Marquee ini cukup mudah caranya,hanya dengan copy dan paste kode Membuat Recent Post dengan Efek Marquee di bawah ini ke gadget atau html/javascript di blog kamu.






Setelah kamu copy dan paste kode Membuat Recent Post dengan Efek Marquee di atas maka ganti tulisan http://tutorial-blog-amricow.blogspot.com dengan link blog kamu.
bagaimana?
mudahkan Membuat Recent Post dengan Efek Marquee !!!!
Untuk melihat contoh Membuat Recent Post dengan Efek Marquee ini bisa di lihat di atas postingan ini.
0

Tutorial Mengganti Background Blog dan Membuat Background Transparan di Blog

Minggu, 19 Juni 2011



Tutorial Mengganti Background Blog dan Membuat Background Transparan di Blog


Kebanyakan blogger sangat senang mengganti background untuk membuat blog dia lebih dinamis tetapi ada juga blogger yang ingin tampilan blog transparan ,katanya lebih keren.
Semua itu tergantung selera sobat blogger.

Berikut Tutorial Mengganti Background Blog dan Membuat Background Transparan di Blog :

1. Carilah kode di bawah ini di template kamu,jangan lupa centang expand template widget

body {

atau

body{

2. Jika sudah ketemu maka akan terlihat seperti ini

body {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px; font-weight: bold;
background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT7DCbQ3IsRaig9jMQfJvw4SipYehyphenhyphenUeTM4rCTwgR3-YLD2WJ0ie5CQLjFBfyxlKBJPO_wA0DBiQg2ItGmprFyFl9Ce56kIBjUitelAL7pwEFz1R6EQMiNu0lY3_Y1KILa4dqP5K10Ic0/s1600/Bleach.jpg") center fixed;
}

3. Pada tulisan kode background di atas merupakan warna dan gambar background blog saya.
background saya memiliki warna background putih yang tertuliskan di atas dengan kode html #fff

4. Jika Membuat background blog kamu menjadi transparan maka kodenya seperti ini

body {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px; font-weight: bold;
background:transparent;
}

5. Jika ingin mengganti background blog kamu maka kodenya seperti ini

body {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px; font-weight: bold;
background:#fff url("masukkan background kamu") center fixed;
}

== ganti tulisan masukkan background kamu dengan link atau url background kamu ==

Jika masih tidak mengerti,silahkan beri komentar di bawah ini.
0

Cara Membuat Judul Posting Berjalan

Jumat, 17 Juni 2011




Cara Membuat Judul Posting Berjalan


Berikut tutorial blog ini mengenai Cara Membuat Judul Posting Berjalan :

1. Login akun blogger kamu
2. Pilih rancangan kemudian edit html
3. Centeng expand template widget
4. Cari kode di bawah ini di dalam template kamu dengan menggunakan Ctrl + f
5. Back up template kamu untuk mengamankan apabila ada kesalahan



6. Jika sudah ketemu,ganti dengan kode yang di bawah ini



7. Klik pratinjau dan lihat hasilnya,jika gagal pilih bersihkan edit dan jika berhasil pilih simpan template .

Good Luck !!!
0

Merubah Tulisan ReadMore dengan Gambar

Selasa, 14 Juni 2011







Merubah Tulisan ReadMore dengan Gambar





Merubah Tulisan ReadMore dengan Gambar ini hanyalah menambah kode menampilkan gambar sebagai pengganti tulisan readmore kalian sebelumnya.




Tutorial :



- Login akun blogger kamu
- Pilih rancangan kemudian edit html kemudian centang expand template widget
- Cari kode di bawah di template kamu







- Jika sudah ketemu maka ganti tulisan readmore kamu dengan kode di bawah ini







- Save dan lihat hasilnya
0

Membuat Navigasi Breadcrumd di Blog




Membuat Navigasi Breadcrumd di Blog



Kegunaan dari Membuat Navigasi Breadcrumd di Blog adalah sebagai navigasi yang mempermudah pengunjung untuk membaca artikel blog kita dan Navigasi Breadcrumd berada tepat di atas postingan kita. Contohnya bisa di lihat dari screenshoot di atas.

Berikut tutorial Membuat Navigasi Breadcrumd di Blog :

1. Login akun blogger kamu
2. Pilih rancangan kemudian edit html dan centang expand template widget akan tetapi backup terlebih dahulu template kamu untuk mengamankan template blog kamu apabila adalah kesalahan
3. Cari kode ]]></b:skin> di template kamu dengan cara menggunakan Ctrl+f
4. Copy dan paste kode di bawah ini di atas kode ]]></b:skin>



5. Cari kode <div class='post hentry'> yang di atasnya ada kode seperti ini <b:includable id='post' var='post'> maka akan terlihat seperti di bawah ini

<b:includable id='post' var='post'> <div class='post hentry'>


6. Copy dan paste kode di bawah ini di bawah kode <div class='post hentry'>



7. Save dan lihat blog kamu
0

Membuat Widget atau Gambar Berada di Pojok

Senin, 13 Juni 2011


Membuat Widget atau Gambar Berada di Pojok



Berikut adalah tutorial blog mengenai Membuat Widget atau Gambar Berada di Pojok bawah kanan , Membuat Widget atau Gambar Berada di Pojok bawah kiri , Membuat Widget atau Gambar Berada di Pojok atas kanan , Membuat Widget atau Gambar Berada di Pojok atas kiri .

1. Kode Css Membuat Widget atau Gambar Berada di Pojok atas kanan



2. Kode Css Membuat Widget atau Gambar Berada di Pojok atas kiri



3. Kode Css Membuat Widget atau Gambar Berada di Pojok bawah kiri



4. Kode Css Membuat Widget atau Gambar Berada di Pojok bawah kanan



5. Cara penggunaan Membuat Widget atau Gambar Berada di Pojok sebagai berikut :

- Login akun blogger kamu
- Pilih rancangan kemudian edit html dan centang expand template widget
- Copy dan paste kode css yang kamu inginkan di bawah kode ]]></b:skin>
- Setelah itu copy dan paste kode html di bawah ini sebelum kode </body> atau bisa juga kamu copy dan paste kode html di bawah ini di gadget atau widget (html/javascript)

6. Kode Html Membuat Widget atau Gambar Berada di Pojok



7. Save dan lihat hasilnya.
0

Membuat Link Berkedip Warna Warni



Membuat Link Berkedip Warna Warni

Tutorial blog
kali ini adalah mengenai cara Membuat Link Berkedip Warna Warni

Caranya :

1. Login akun blogger kamu
2. Pilih rancangan kemudian edit html
3. Cari kode </head> di template kamu
4. Copy dan paste kode di bawah ini di bawah kode </head>


0

Cara Memasang atau Menyisipkan Gambar di Judul Posting Blog

Sabtu, 11 Juni 2011


Cara Memasang atau Menyisipkan Gambar di Judul Posting Blog


Berikut tutorial Cara Memasang atau Menyisipkan Gambar di Judul Posting Blog yang berguna untuk memperindah blog kamu. Jika berminat ikuti tutorial di bawah ini.

1. Login ke akun blog kamu 2. Pilih Rancangan,Tata letak kemudian Pilih edit html dan centang kolom expand template widget 3. Carilah Kode di bawah ini



4. Letakan kode dibawah ini diantara kedua kode yang tadi

5. Hasil yang terlihat akan seperti ini



6. Save atau Pratinjau agar tidak ada kesalahan dalam pengeditan

Nb: sesuaikan ukuran gambar dengan blog kamu agar indah di lihat
0

Membuat Efek Animasi Blur Otomatis Di Blog

Kamis, 09 Juni 2011


Membuat Efek Animasi Blur Otomatis Di Blog


1. Log in Ke Blogger Lalu masuk Menu Layout kemudian Edit HTML Centang Kolom Expand Template Widget

2. Tambakan Kode Berikut Tepat Diatas Kode </head>



3. Save dan lihat hasilnya.
0

Membuat Label Tag Clouds



Tags Clouds adalah sebuah Label yang hurufnya tidak rata maka dari itu dinamakan Tags Clouds yang artinya Tag adalah Label dan Clouds adalah awan jadi Label Tag Clouds adalah Label yang seperti tidak rata. Oleh karena itu Label Tag Clouds ini bisa di masuk dalam kategori search engine optimization.

Berikut cara Membuat Label Tag Clouds

1. Log in Ke Blogger Lalu masuk Menu Layout kemudian Edit HTML

2. Kemudian simpan Code Css dibawah ini diatas Code ]]></b:skin>



3. Lalu simpan Code Dibawah ini tepat dibawah Code <head>


4. Lalu Scroll Kebawah coba cari Code seperti ini


5. Lalu Ganti code diatas dengan Code dibawah Ini



6. Selesai Deh kemudian Save
0

Cara Membuat Judul Blog Berjalan atau bergerak




Cara Membuat Judul Blog Berjalan atau bergerak


Disini di jelaskan cara membuat judul blog berjalan atau bergerak,walaupun tidak berguna tapi cukup keren juga di lihat.

1. Login ke blogger kemudian ke menu Layout ---> Edit HTML
2. Cari kode/script
<title><data:blog.pageTitle/></title>
3. Ganti kode diatas dengan



Keteranga:teks yang berwarna merah adalah kecepatannya.
0

Cara Membuat Tombol Home,Back To Top, Bottom dan Refresh atau Reload di Blog

Selasa, 07 Juni 2011




1.Masuk Ke akun Blog Sobat

2.Pada Dasbor Pilih Rancangan-->Edit HTML Dan jangan Lupa Centang Kolo Expand Template Widget

3.Kemudian Cari Kode ]]></b:skin> ( gunakan CTRL F atau F3 untuk memudahkan pencarian )

4.Copy Paste Kode Dibawah Ini Tepat Diatas Kode Tadi













5.Selanjutnya cari kode </body> Dan Letak Kode Dibawah Ini Tepat Diatasnya










6.Langkah Terakhir Tinggal Memasukkan Kode Dibawah Ini Tepat Dibawah Kode <body>











7.Dan Simpan Templatenya



Credit To HTC



PENAMBAHAN Tombol Refresh atau Reload:





menambah tombol reload atau refresh disamping Tombol Home,Back To Top,Dan Bottom di Blog anda.



Copy Paste Script dibawah ini jika ingin memasang  Tombol Home,Back To Top,Bottom dan Refresh atau Reload di Blog anda.

-Masukkan Kode Dibawah Ini Tepat Dibawah Kode <body>

0

Teks Mengikuti Kursor (Text Following Cursor)





ganti tulisan welcome to my site dengan yang kamu inginkan. jika mau ganti warna tulisan.,ganti kode warna yang ada di var color='#0000FF';