Cara Membuat Efek Lipatan Kertas Di Ujung Blog

Cara Membuat Efek Lipatan Kertas Di Ujung Blog - Setelah saya berhasil dengan apa yg di inginkan, membuat efek lipatan kertas pada ujung kanan blog, 
yang menurut saya agak lumayan bikin pusing  juga

Setelah berkali-kali mencoba merubah kode java scriptnya, akhirnya selesai juga, dan lihat hasilnya di ujung kanan blog siti, {sedikit pamer, heheheheee,, } ga apa" yaaah

Bagai mana....! ada yang berminat untuk membuat lipatan kertas pada ujung blog seperti blog
Tips Trik Blog {tenag aja yang saya bagi tidak ada foto jelek saya ko heheheheee,,, }
silakan ikuti lankah-langkah berikut ini ya :

1. Silahkan Login ke akun blogger anda.
2. Lalu masuk ke design Template, klik Edit HTML
3. Seperti Biasa Centang Expand Template Widget

4. Kemudian cari kode berikut </body>

5. Setelah ketemu silakan Sobat copy dan letakkan kode di bawah ini tepat di atas kode  </body>

<script type='text/javascript'>var tujuan =&#39;http://Alamat Url Feeds Sobat&#39;</script>

<script src='http://petir-project.googlecode.com/files/ktb4.js' type='text/javascript'/>

 6. Coba sobat pertinjau terlebih dahulu (Sekiranya sudah yakin baru di save)

Keterangan:

• Kode warna hijau: ganti dengan URL Feeds anda
• Kode warna biru: ganti apabila anda ingin mengganti gambar sesuai selera ea.

Ikuti langkah-langkah berikut ini bila ingin mengganti gambarnya.

Bagi sobat yang ingin mengganti gambarnya silakan download dulu scriptnya disini.

• Setelah selesai download silakan buka script tersebut dengan Notepad.

Untuk merubah gambar yang berukuran kecil (gambar saat lipatan tertutup) anda cari url berikut dalam text kalo ga salah ada di bagian atas dan silakan ubah dengan url gambar sobat:

http://petir-project.googlecode.com/files/fedkcl.png 

(Upload gambar di code.google.com atau situs upload lainya untuk mendapatkan URL gambar)

• Untuk merubah gambar yang berukuran besar (gambar saat lipatan terbuka) ubah url berikut dengan url gambar anda:

http://petir-project.googlecode.com/files/feed.png

•  Setelah selesai merubah kode URL gambar tersebut... Save Text, selanjutnya silakan anda upload text tersebut dan ganti URL http://petir-project.googlecode.com/files/ktb4.js dengan URL hasil upload  tadi.

NB: sedikit saran apabila sobat ingin merubah gambar, sebaiknya ukuran gambar harus sesuai dengan gambar semula untuk hasil yang lebih baik.

Selamat mencoba.... dan jangan lupa like nya yaaaaa  ^_~

http://zuazz.blogspot.com

Continue Reading

Cara Membuat Efek Glow Pada Link Blog

Cara Membuat Efek Glow Pada Link Blog

Efek Glow ini berfungsi jika saat kita mengarahkan mouse pointer ke link blog kita. Jika kita mengarahkannya maka terlihat bayangan link tersebut. Jika belum paham lihat gambar diatas :) .
Baik tanpa basa-basi lagi langsung saya jelaskan. Simak langkah-langkah berikut ini !

• Tentunya kamu harus masuk ke akun blogger
• Selanjutnya masuk ke Rancangan > Edit Html > Jangan lupa klik centang Expand Template Widget.
• Tekan CTRL + F pada keyboard dan cari kode a:link nanti akan muncul semiripnya seperti berikut!

a:link{ color:#006699; text-decoration:none}
a:visited{ color:#006699; text-decoration:none}
a:hover{ color:#000; text-decoration:none}

• Kode yang saya beri warna biru silahkan ganti dengan kode 

text-decoration:none;text-shadow:0 0 10px blue  

Sehingga hasilnya seperti berikut ini!

a:link{ color:#006699; text-decoration:none}
a:visited{ color:#006699; text-decoration:none}
a:hover{ color:#000; text-decoration:none;text-shadow:0 0 10px blue;}

• pada kode 10x bisa anda ganti sesuai keinginan anda semakin tinggi nilainya semakin besar efek cahaya yang muncul. Dan kode blue bisa di ganti dengan red, black, green, dsb sesuai dengan kebutuhan anda :).
• Jika semuanya sudah selesai jangan lupa klik SIMPAN TEMPLATE dan lihat hasilnya.  
  jika ingin menambah kan efek bintang nya lanjutkan dengan meng-editnya seperti di bawah ini:
  Cari kode a:hover{ atau  a:visited{ (Tekan CTRL + F untuk mempermudah pencarian)
  Letakkan kode di bawah ini, di bawah kode a:hover{ atau a:visited{
  
  

  a:hover{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFzr1JI3zXFqO51HD1sjCf4f2v4gftTFO9qx2aGGGjZnfIQ2ZduN2WufeP2Xfd9w3iuzttuS4E7Tjh3BIz6A4DvhhRLWF8mdEGM4Hw5WCmSwPS6vTJx9M1Zb2FUZ6WvWv4B_bSvTD4qXY/s1600/stars.gif);} 

   Lalu klik simpan template.

Continue Reading

Cara Buat Backround Entri Berubah Warna Saat Disentuh Mouse

Cara Buat Backround Entri Berubah Warna Saat Disentuh Mouse
seperti biasa kali ini saya memposting artikel Tips Trik blog. Cara Buat Backround Entri Berubah Warna Saat Disentuh Mouse Mungkin diantara sahabat blogger ada yang tertarik membuat backround entri blog berubah saat disentuh mouse. tanpa basa-basi langsung saja, berikut ini langkah-langkahnya:

1. Login ke blogger
2. Klik Rancangan >> Edit Html
3. Kasih centang pada "Expand Template Widget".
4. Tekan CTRL + F dan cari kode ]]></b:skin>
5. Letakkan kode berikut tepat diatas kode ]]></b:skin>

.post-body:hover {background:#000;color:#fff;}

Catatan: #000 adalah backround entri. #fff adalah warna teks atau tulisan.

6. Jika sudah klik "SIMPAN TEMPLATE"
7. Lihat hasilnya.
Catatan: karna semua template berbeda beda jangan salahkan saya jika tips ini tidak berhasil saya pernah menguji blog template yang dulu dan yang sekarang yang dulu bisa berhasil dan template yang ini tidak berlaku

selamat mencoba semoga berhasil

Continue Reading

Cara Merubah BlokQuote Di Blog

Cara Merubah BlokQuote Di Blog
Blockquote merupakan sebuah kotak yang membingkai tulisan tertentu yang menunjukan kalau tulisan itu merupakan sebuah tulisan penting yang perlu mendapat perhatian dari pembaca untuk mendapatkan inti dari bacaan secara keseluruhan. Berbicara mengenai blockquote, kita kadang merasa bosan dengan tampilan blockquote default yang hanya itu-itu saja. So, adakah cara untuk membuat variasi blockquote dalam blog kita ini? Ya, tentu saja ada. Dengan variasi blockquote yang lebih menarik tidak hanya akan memperjelas pembaca dalam menemukan dan memahami inti bacaan kita, tetapi juga akan memberikan daya tarik tersendiri bagi pengunjung yang tidak terbiasa banyak membaca untuk kemudian mengamati dan membacanya.
Cara otomatis.

Cara otomatis dalam membuat blockquote ini memungkinkan kita untuk tidak lagi harus memasukan kode-kode HTML untuk menampilkan blockquote saat kita membuat postingan blog, karena saat kita mengklik ikon blockquote akan secara otomatis muncul model blockquote yang kita inginkan.

Cara membuatnya adalah sebagai berikut ;

Pertama masuk ke akun Blogger kita.
Klik fitur Rancangan.
Klik edit HTML.
Cari kode blockquote dalam kode HTML template blog kita tersebut.

.post-body blockquote {

Hapus kode blockquote tersebut, kemudian ganti dengan memasukan kode HTML blockquote yang kita inginkan.
Klik simpan template.

Keterangan :

1. Untuk mempermudah pencarian kode HTML yang dimaksud, klik tombol Ctrl + F pada keyboard kita.
2. Selalu biasakan untuk download template blog kita terlebih dahulu sebelum melakukan edit, untuk back up sebagai antisipasi saat kita mengalami kegagalan sewaktu proses editing berlangsung.

Beberapa bentuk variasi blockquote beserta kode HTMLnya yang dapat kita pilih untuk kemudian di tampilkan dalam postingan blog kita antara lain sebagai berikut ;

Bentuk 1.

blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }

Contoh hasil tampilannya

Tips Trik Blog | Dan Cara Buat Website

 Bentuk 2.

blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 3.

• blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 4.

• blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 5.

• blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFbdknIlLcXrxhuNbef4Ybo1h7FFv01s-hcF_3CbSHyVP5dcvn2BLij3BBay_1eBktm4KT4tg2SSIAxcQGizxD0HIvijyox0KVm3iPnBUdyzxlP4s-cyKpWOklhqLCC_pymY_J3Gq8eo/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 6.

• .post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6nQmUInBSx50ITBn4ixUhEoh_cpRGEgzChpZlWNlQPoYUWRg9GdanphU70Nf2KTo7wyexpZnVuLJ-poQr8lJzg_vtIkb2PTdUYM4t1nbyJ60HYKdwZC3LK-PAMDrUvsUVP5E-UyDho8s/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Bentuk 7.

• .post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwfzcOZ6f_tytcegd1gIknSuhR9vu-M-SEkGmzuTh6jcgHAY0KrIBFv7HpNAPO_PAx2o5KXre1E7mlKu00x6Yi09hMt7uMVFrNZBBB7zothF-U0rIPN6SEj-ZarteZ1T2ZhCPcRaGj84o/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 8.

• .post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA_yzm5BTRGIK-l88eT72-4wc4Rr4wN5jmIpfq60-lY3n1U5rUW75PvfganEF7AAS-K4YTykJjzMrcwsRuUHA15Y7c5FxCsLprT5L6rURiSnKNRoJWU3epVnYtcooEAw-3U20o3i5tYmk/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 9.

• blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC89Jq1ino_X_gMPLOX3KWsnvyN4_Nqy4sBg2jOVJQ9njHyfkGrXieSiFq_eJCFRBYXBy78pbFFJVZRUi-UGDfjfZrrsRfn3rgDSGucud8yJNUM9totYs7Y5klIduCiYFhVIo219tFzlI/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 10.

• .post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRJ8NssHrH3RDW2kRP-piU9FKFKmuJIcZCQkW4uRnM8znyQAVp9aSsxq1SUGEf48KHMtV9e0How8qFxmSQSxA-Zv9qmFUSGO5Vx095Dw6rjMPOw58jSQFaxnIPk6pXfWGFw2Adycl5mqA/s400/angular-right.gif) no-repeat bottom right; font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif; color : #000; border: 1px solid #DDD; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 11.

• .post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs51LEzKvmEQQxATnWhEpVLN3rTxYO6ltTePpn0WLBmR8WMmidKRDL4ADbRp3H0yAdc0Eh5ZGrwMACKv4ZOZIREyxpS9uNrhyKqkXw2SSYq4QrudtTiFJEH5KI2gyo5iodyimpieXSQrg/s400/comma-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtY8PD_1BFql3F-ysZgadOAoAKhFEAG7r2nYg9zcki2LLkR358jZM_qvSQy6B9waE1csleLLr5_tXsKa7mSUcYIav6DbIDqVqAutFBl0_Icg0bJMEPm7hg-yyTejvXrEJawOODnVf16oI/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 12.

• .post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqPeIJ_23IdeH6Xlj2QqqNcLOTf0XqVm-pIEFQpMn4k_u0Dkr_fzEr6_rFthmwtjx5fHl2rudjrMZdOCx-5Wxitrc5B9Y2mQZ2Hu-cQSflzQHILIM4RCclMxrzafNzWNzJYbbyPyftcvY/s400/comma1-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLX-wZuvTu-JJCESUONygel05-LP-rI77t0oh6_24LMdbtZY-Ohm7pT8w_WBK-AEZZd3A-6w-Bby96y5JqsnhuDgbUD9FZnHNBejHiRnMPIDgwTRYSw5jduOciMEh8Bz2iQMftISoZ00A/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 13.

• .post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrfi8aJH1JumAt-gNCG1aDs00JAYAzHnx-WUGjgr7fH0Arky_h78gVRKQZKXB1OIyl4fIvsoAuqEivEGNT_K5T4JyCQ796UScb3fzQZrsPxj1vKvETk-4nCYOEwQhPkJO_Nd2dE-DBh7s/s1600/block333.gif) no-repeat top; font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; color : #000000; border-bottom : 7px solid #FF0000; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 14.

• .post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_s3yMcq3z8lb4aHElCj1b0pkP3J6PjR-4CmB9V77vgV4UY2ngxe2irD-MvpoxWFGFSaZgJUGbKIDD11MgP_Tk-q67-W3gK5NME1mh2f8XJxr8JJ3ge4S00eA1aQs8-I3Y8XmWYmuV7E/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } .post blockquote div{ background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjHRmYCMUT2m8G-7-iSJpKTDlxr3bRMgb4thrnldURzLkX70MqQ_BBbJbCNFWhaZxX-d848u2_IgNC2qa97oeNNphirPjLHJll3UPSa89piH4kITzM7POJliZXMfBheIeuGELQoov2Mkc/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 15.

• .post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWYLJ7M9QirrQzov__vx3CbruOBGooK-AAbxjQvfd4sjphFtlOMlTA2kwr70N24_vPiS5e7Og4BMUqwt17eJbwo7F7BlU0uEhFwxYDQ5uwBRA5cBAuLZlobOOfspR5NtM61ctoyRLTCA0/s400/head2.gif) no-repeat top; font: normal 1em "comic sans ms", Helvetica, verdana; color : #666; } .post blockquote div{ background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhut7fslHO8aowQ5tuNZ-yRJs_sRb-Fl-3Z3FHsdQfNvIEOSrBcK86zG6ndrgBNPJNVGOdoo_1GptYwHbiTzgWhC7yeIJAHu-l3NzEuS3i0YWBRGSltHshhJtR25oFNY30zkoSd2NiZpmY/s400/head-bottom3.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding: 20px; }
• Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 16.

• blockquote { background-position:-10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 0 20px 0 50px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTGyRjKpotl3W5u0XTJxVCCN3tdltgfeQ00sZeblm9Y42C6HEHW7ite5iy_TxGDL8NPnHbBLVaxDQ6SbdYhzwUcrNIRU2IhtMEJhxN_lI8riGpGcJxx4cQXzKqOdIrRxNmwQOwdjTnNXgK/s1600/quote.png") 5% no-repeat #FFF8DD; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 17.

• blockquote{ background-color: transparent; border-top: 3px double #DC143C; border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique; font-size: 1em; margin-left: 5%; margin-right: 5%; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 18.

• blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 19.

• blockquote {-moz-border-radius-bottomright: 30px; -moz-border-radius-topright: 30px; background-color: #f5f6ce; border: 5px solid rgb(185, 227, 95); padding: 10px;}

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 20.

• blockquote {-moz-border-radius-bottomright: 30px; -moz-border-radius-topleft: 30px; background-color: #f5f6ce; border: 5px solid rgb(56, 97, 11); padding: 10px;}

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 21.

• blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #f5d0a9; border: 5px ridge rgb(230, 141, 58); padding: 10px;}

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 22.

• blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px ridge rgb(224, 213, 130); padding: 10px;}

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 23.

• blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px double rgb(206, 212, 36); padding: 10px;}

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Bentuk 24.

• blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #E0ECF8; border: 5px groove rgb(248, 250, 187); padding: 10px;}

Contoh hasil tampilannya.

Tips Trik Blog | Dan Cara Buat Website

Cara manual.

Cara ini tidak membutuhkan penggantian kode HTML template blog, tetapi kita hanya perlu untuk memasukan kode HTML blockquote yang kita inginkan setiap kali kita membuat sebuah postingan. Caranya adalah saat kita membuat postingan sebuah blog, jangan menuliskan blockquotenya di bagian compose. Akan tetapi, tuliskan blockquote tersebut beserta kode HTML untuk menampilkannya pada bagian edit HTML (letaknya tepat di sebelah kiri bagian compose).

Adapun kode HTML yang perlu kita masukan untuk menampilkan blockquotenya yaitu ;

• <blockquote style=" Masukkan kode HTML blockquote yang ingin kita tampilkan di sini "> Masukkan tulisan yang akan kita jadikan blockquote di sini </blockquote>

Dengan beberapa langkah singkat dan mudah kita akan mendapatkan tampilan blockquote yang lebih menarik dari biasanya.
Semoga Cara Merubah Quote di Blog ini bermanfaat .

sumber: http://www.ada-blog.com

Continue Reading

Cara Membuat Link Bergerak (Bergoyang) DiBlog

Cara Membuat Link Bergerak (Bergoyang) DiBlog
Maksudnya link bergerak/bergoyang adalah ?  link yang disetuh oleh cursor akan bergerak ke kanan, dan kalau dijauhkan akan kembali ke tempat semula. Jadi hampir sama marquee, bedanya link akan bergerak hanya jika disentuh.

Dengan membuat link bergoyang ini, selain untuk membedakan kalau teks itu ada linknya, tentunya juga untuk membuat lebih menarik. bermacam-macam cara untuk memodifikasi link salah satunya yang prnah saya coba
Membuat Tulisan Link Berkedip kedip   
trik blog   Cara Buat Link Di Blog Membesar . Sekarang kita akan belajar membuat link yang bergoyang ;)

Cara Membuat Link Bergerak (Bergoyang)

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Taruh kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});</script>

6. Simpan Template jika sudah selesai.

Bersiaplah untuk melihat link yang ada di blog kita akan bergoyang jika disentuh,
 Semoga berhasil

Continue Reading

Cara Membuat Icon Pada Label Dan Link Sidebar

Cara Membuat Icon Pada Label Dan Link Sidebar

Sekarang kita akan mencoba menambahkan icon pada label dan link sidebar. Yang dimaksud dengan icon link list adalah icon kecil di samping daftar link yang biasa kita tempatkan pada sidebar blog kita. Icon ini bisa bermacam-macam. Pertama sekali anda harus sudah menyimpan icon pada image hosting anda. Misalnya di tiniypic.com, photobucket.com atau tempat tempat hosting gambar lainnya. Contohnya icon panah hijau punya saya dengan alamat penyimpanan seperti ini:

http://i35.tinypic.com/2n03mgz.jpg

Nanti bisa anda ganti dengan icon milik anda. Seperti biasa loggin ke blogger dengan id anda. Cari kode berikut:

.sidebar li {
border-bottom:1px dotted #cccccc;
margin:0;
padding:0 0 .25em 17px;
line-height:1.2em;
}

Mungkin ada perbedaan pada template, fokus saja kode .sidebar li { yang merupakan kode pada daftar link di sidebar. Kemudian tambahkan alamat icon anda di bawahnya. Misalnya dengan alamat icon punya saya tadi. Sehingga hasilnya seperti ini :

.sidebar li {
background:url("http://i35.tinypic.com/2n03mgz.jpg") no-repeat 0px .20em;
border-bottom:1px dotted #cccccc;
margin:0;
padding:0 0 .25em 17px;
line-height:1.2em;
}

Lalu klik tombol Simpan Template dan lihat hasilnya. Jika tidak ada masalah, hasilnya akan seperti gambar di bawah ini :

Di sebelah kiri daftar link dan label akan ada icon panah kecil. Oke selamat menambahkan icon pada label dan link sidebar, mudah-mudahan berhasil ya.

SUMBER: http://www.to-src.com

Continue Reading

Memodifikasi Arrow atau Gambar Panah Pada Arship Blog

Memodifikasi Arrow atau Panah Pada Arship Blog ini pasti akan membuat panah pada arsip kita semakin cantik dan terlihat bagus, panah pada arsip pernah liat kan. . .? biasanya terdapat pada bulan yang ada pada arsip misalnya bulan januari - desember nah di samping bulan2 pada arsip itu kan ada icon kecil yang seperti arah panah, nah itu dia yang akan di modifikasi, caranya mudah.

1. Login ke Blog==>Template==>Edit HTML
2. Cari Kode ]]><b:skin>
3. Tambahkan kode di bawah ini di atas kode ]]><b:skin>

span.zippy {
color:blue;
border:1px solid #666;
padding-left:4px;
margin-right:8px;
text-shadow:0 1px 1px #888;
-webkit-text-shadow:0 1px 1px #888;
-moz-text-shadow:0 1px 1px #888;
box-shadow:0px 1px 1px #888; 
-moz-box-shadow:0px 1px 1px #888;
-webkit-box-shadow:0px 1px 1px #888;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-goog-ms-border-radius:4px;
}
span.zippy:hover {
color:red;
border:1px solid blue;
}

6. Kemudian SIMPAN TEMPLATE dan lihat Arsip di blog anda.
selamat mencoba semoga berhasil

Continue Reading

Cara Membuat Efek Gambar Transparan Di Blog

Cara Membuat Efek Gambar Transparan Di Blog - Kali ini saya akan memberi trik cara membuat efek transparan (opacity) pada gambar. Efek ini akan nampak apabila cursor sahabat berada diatas gambar. Misalnya gambar akan berubah cerah saat cursor diatasnya atau sebaliknya meredup saat cursor tidak berada diatas gambar.
Jika sahabat ingin menampilkan gambar dengan sedikit sentuhan animasi maka trik ini dapat sahabat pasang di blog. sontohnya coba arahkan cursor sahabat pada gambar poto saya di bawah:

Bagus kah???  sudah jelas kan?
Ikuti langkah-langkahnya di bawah:

1. Login ke blogger
2. Buatlah posting pada blog sahabat
3. Masukkan kode berikut ini pada tab Edit HTML bukan Compose di posting.

<img src="Masukkan URL Gambar Anda Disini" style="opacity:0.2;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

4. Masukkan url gambar pada tulisan berwarna merah!! jika sahabat belum tau caranya bisa di lihat pada artikel  Cara Mendaftar Meng-upload Gambar di Photobucket
5. Terbitkan posting sahabat dan lihat hasilnya
Selamat mencoba....!!!

Continue Reading

Cara Membuat Gambar Membesar DiSentuh Mouse

Cara Membuat Gambar Membesar Disentuh Mouse - Banyak sekali cara untuk mempercantik tampilan sebuah Blog yang kita miliki salah satunya dengan Cara Memperbesar Gambar Saat Disorot Mouse, Dimana Tampilan sebuah Gambar atau Foto akan Membesar Saat Disorot Oleh Pointer Mouse. dan masih banyak lagi cara untuk mempercantik blog seperti pada postingan sebelumnya yaitu : Cara Buat Gambar Tersamar Disorot Mouse dan

 Cara Buat Gambar Melayang di Blog

Baiklah untuk lebih jelasnya Cara Memperbesar Gambar Saat Disorot Mouse berikut contohnya, silahkan arahkan pointer mouse pada Gambar dibawah ini :

 
Nah seperti itulah Cara Memperbesar Gambar Saat Disorot Mouse yang akan saya share pada kesempatan kali ini. Apabila sahabat tertarik untuk membuatnya silahkan sahabat copy paste kode dibawah ini dan letakan pada halaman posting atau sidebar milik sahabat :

<style type="text/css">

border: none;

vertical-align: top;

</style>

<script src="http://sundaboy.googlecode.com/files/sundaboyzoom.txt" type="text/javascript"></script><img border="0" class="expando" height="100" src="URL GAMBAR" width="100" />

Keterangan :

• Ganti URL GAMBAR dengan url gambar yang akan diperbesar
• Ukuran Tinggi dan Lebar harus lebih rendah dibanding ukuran aslinya, karena kode ini akan memperbesar sesuai dengan ukuran gambar yang sahabat masukan. misalnya ukuran gambar asli adalah tinggi : 200px dan lebar 300px. Maka sahabat harus merubah kodenya menjadi lebih kecil dari ukuran aslinya, misalnya tinggi 100px dan lebar 200px. Nanti saat disorot oleh mouse maka Gambar akan di zoom menjadi ukuran aslinya yaitu 200px dan 300px..

Bagaimana?! mudah bukan  Cara Memperbesar Gambar Saat Disorot Mouse,

 semoga bermanfaat untuk sahabat. kalau ada kekurangan mohon untuk dimaklumi

Continue Reading

Cara Buat Gambar Tersamar Di Seluruh Postingan

Kalau kemaren saya telah memposting Cara Membuat Efek Gambar Transparan Di Blog kali ini saya akan posting cara membuat efek gambar tersamar/Transparan di seluruh postingan   , memang banyak sekali trik dan tips blog yang berguna untuk menarik para pengunjung blog agar berlama2 di blog itu, salah satunya adalah cara membuat efek gambar tersamar di seluruh postingan  .

cara membuat sebuah efek yang membuat gambar pada blog menjadi transparan ketika tidak tersentuh kursor dan menjadi terlihat jelas ketika tersentuh kursor atau sebaliknya. Efek ini akan bekerja pada seluruh file gambar yang ada di setiap bagian blog, jadi seluruh gambar akan secara otomatis mendapatkan efek ini, dengan dukungan jquery, sehingga efek ini akan terlihat lebih menarik, sebagai contoh blog ini, coba sorot gambar di bawah ini maka akan menjadi terang ketika di sorot.

Untuk membuatnya ikuti langkah-langkah berikut :

• Log In ke Blogger.
• Pilih Template → Edit HTML → Cecklist Expand Template Widget.
• Cari kode </head>, dan masukan script dibawah ini di atas </head> :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;img&#39;).fadeTo(&#39;medium&#39;, 0.5);
$(&#39;img&#39;).hover(function() {
$(this).fadeTo(&#39;medium&#39;, 1.0);
}, function() {
$(this).fadeTo(&#39;medium&#39;, 0.5);
});
});
</script>

• Jika dalam template, telah terdapat file jquery 1.5.2 (teks warna merah), maka script warna merah tidak perlu di pasang kembali.
• Pengaturan :
• Teks warna hijau, merupakan tingkat transparansi gambar sebelum dan setelah tersentuh kursor.
• Teks warna biru, merupakan tingkat transparansi gambar saat tersentuh kursor.
• Simpan dan lihat hasilnya

Lihat
Selamat Mencoba !

Semoga berhasil

Continue Reading

Cara Membuat Tulisan Berkedip Di Blog

Bagaimana Cara Membuat Tulisan Berkedip Di Blog? Tulisan atau huruf  berkedip ini dalam dunia coding disebut 'Blinking'

Namun sayang nya tidak semua browser mendukung tampilan tulisan berkedip ini. Saat saya test, hanya Mozilla firefox dan Opera yg mendukung HTML tulisan berkedip.


Tepatnya Seperti contoh tulisan berkedip di bawah ini :


INI CONTOH TULISAN BERKEDIP

Sekali lagi, untuk melihat tulisan atau text berkedip lewat Browser firefox atau opera yah..

Cara nya sahabat tinggal tambahakan kode HTML seperti berikut

 <blink>tulisan yg akan berkedip</blink>

Penempatan tulisan berkedip Biasananya webmaster menempatkan tulisan kedip ini di bagian bagian blog atau website yang memang disengaja untuk menarik perhatian pengunjung
seperti juga fungsi tulisan berjalan yng tujuan menarik perhatian pengunjung untuk melirik kearah objek bergerak tsb.
Untuk cara membuat tulisan berjalan , silahkan lihat kesini : Cara membuat tulisan berjalan di blog Demikian semoga artikel Cara membuat tulisan berkedip ini adalah yang dimaksud oleh anda
semoga berhasil

Continue Reading

Cara Buat Gambar Melayang di Blog

Setelah kemaren saya posting artikel   Cara Buat Link Di Blog Membesar 
kini saya akan sahre artikel  Cara Buat Gambar Melayang di Blog. Pernah melihat gambar melayang di website atau di blog? nah kali ini saya akan memcoba menulis artikel tentang Cara Membuat Gambar Melayang di Blog. Seperti terlihat di blog saya gambar logo facebook dan twitter yang di sebelah kiri. Langsung saja yuk begini cara membuatnya  :

• Pertama Login ke Akun Blogger anda.

• Lalu masuk ke Tata Letak dan add a gadget Pilih HTML/JavaScript.

• Copy kode dibawah ini diatas kode dan masukkan ke gadget yang tadi di pilih : 

<div style="display:scroll; position:fixed; top:260px; left:-6px;"> <a class="linkopacity" href="http://www.facebook.com/roynardo.decaprio" target="_blank" rel="nofollow" title="Add me your facebook" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i239.photobucket.com/albums/ff304/cxoluvme/facebook_32.png" /></a><br /> <a class="linkopacity" href="http://twitter.com/muhammad_royani" target="_blank" rel="nofollow" title="Add me your Twitter" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i239.photobucket.com/albums/ff304/cxoluvme/twitter.png" /></a><br /> <a class="linkopacity" href="http://roy87.blogspot.com/feeds/posts/default" target="_blank" rel="nofollow" title="Newslater" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i239.photobucket.com/albums/ff304/cxoluvme/feed.png" /></a><br /> </div>

• Untuk kode berwarna biru, itu pengaturan linknya.

• Untuk kode berwarana merah jambu, itu pengaturan source gambarnya.

• Nah setelah semua sudah diatur, tekan Simpan.

selamat mencoba, semoga bermanpa'at !!

Continue Reading

Cara Buat Link Di Blog Membesar

setelah membahas tentang  Bisnis Online Terpercaya Untuk Pemula  kini saya akan share  
Cara Buat Link Di Blog Membesar,
  Banyak hal yang dapat dilakukan dalam memodifikasi tampilan link atau tautan pada blog. Salah satunya adalah dengan membuat link membesar saat disorot oleh mouse. Cara untuk membuat link membesar saat di sorot mouse dapat disimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.
2. Klik Rancangan >> Edit HTML.
3. Carilah kode yang mirip-mirip dengan kode di bawah ini.

a:hover {
color:#5588AA;
text-decoration:underline;
}

     4.  Kemudian tambah kode font-size:20px; sehingga kodenya akan menjadi seperti di bawah ini.

a:hover {
color:#5588AA;
text-decoration:underline;

font-size:20px;
}

20px merupakan ukuran huruf link saat mouse menyorot link tersebut, silakan diganti sesuai dengan keinginan Anda.

   5. Klik tombol SIMPAN TEMPLATE.

Continue Reading

Cara Buat Gambar Membesar Diarahkan Cursor

Cara Buat Gambar Membesar Diarahkan Cursor atau jika diarahkan cursor. Gambar tersebut pasti membesar. Dalam dunia blogging, fitur seperti ini sering disebut dengan nama Image Zoom Effects atau Hover Zoom Smooth Effects.contohnya seperti gambar berikut: 

(jika masih terpasang kode nya,kalau tidak membesar berarti saya sudah menghapus kode nya)

coba arahkan maus atau cursor  sahabat ke gambar berikut:

Memasang Image Zoom Effects di blog, sebenarnya sangat menggangu pengunjung yang sedang membaca postingan kita. bagi sahabat yang tidak suka Tetapi tidak tau kenapa, senang dengan fitur ini
berikut langkah-langkah nya:

• Masuk ke akun blogger sobat.
• Pada menu Drop Down, klik template.
• Backup terlebih dahulu template sobat.
• Klik Edit HTML dan klik Proceed.
• Gunakan CNTRL + F untuk mencari kode ]]></b:skin>
• Kalau sudah ketemu, Copy Paste kode berikut tepat di atas kode ]]></b:skin>

.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

• Simpan template sobat.

Coba buka salah satu postingan blog sobat untuk melihat hasil dari fitur Hover Zoom Smooth Effects
semoga berhasil

Continue Reading

Cara Membuat Banyak Banner Berjalan Ke Samping

Cara Membuat Banyak Banner Berjalan Ke Samping -  Di blog tips trik blog ini Sebelumnya saya sudah pernah mengulas tentang cara membuat Cara Membuat Blog Cepat Diakses Lewat HP 

Pada kesempatan ini saya akan membahas kembali cara membuat efek marquee  untuk bener atau benner berjalan yah tepatnya ....
Bagi sahabat yang punya iklan bener yang tentunya butuh tempat untuk di pasang atau promosi cara ini akan sangat membantu sekali karna bisa di bilang simpel satu lahan untuk banyak benner contohnya seperti yang ada di atas blog ini tips trik blog

ok bagi sahabat yang mau silahkan ikuti langkah-langkah berikut ini
1. login ke blog anda tentunya yah
2.pilih tata letak
3. pilih HTML/javascript     lalu isikan kode di bawah ini ke dalamnya

<marquee scrolldelay="10" direction="right" behavior="scroll" scrollamount="3" width="468" bg height="60"><a href="http://namabloganda.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPAAHDyVLZjPAT1wqNdtiLIqk7QbPsJXMmZ1IPfCrcYLEUCF_ROcOYbkgpBAb8V51Z41HxdPCLCZtpcX45DdQuEZZEd1fVkYhY9OIpCQ6wereEQot32udPjmk9dkRKNKqIKSfMjEMU1Y5/" /></a>
</marquee>

Ganti tulisan yang berwarna hijau dengan url website yang ingin dituju dan tulisan berwarna merah 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://namabloganda.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMveVJpNyjy_FsDBaGmDgdJFLmKy8hhJ_8jBdhva8FI8uJYwqZ97UwhkBOPjIBAmSi21Ay25fI462Ue4EvrCxOu_48nEeCziWaK31ont-ElxDJZmjU-ko_oSBn8dvuvji0drOcnwIDAwjh/" /></a></span> 

Ingat:
Ganti tulisan berwarna hijau dengan url website anda dan tulisan berwarna merah dengan url banner kedua anda.

Jadi susunan kodenya menjadi seperti ini:

Lihat Code

<marquee scrolldelay="10" direction="right" behavior="scroll" scrollamount="3" width="468" height="60"><a href="http://namabloganda.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIPAAHDyVLZjPAT1wqNdtiLIqk7QbPsJXMmZ1IPfCrcYLEUCF_ROcOYbkgpBAb8V51Z41HxdPCLCZtpcX45DdQuEZZEd1fVkYhY9OIpCQ6wereEQot32udPjmk9dkRKNKqIKSfMjEMU1Y5/" /></a>
<span style="padding-left: 10px;"><a href="http://namabloganda.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMveVJpNyjy_FsDBaGmDgdJFLmKy8hhJ_8jBdhva8FI8uJYwqZ97UwhkBOPjIBAmSi21Ay25fI462Ue4EvrCxOu_48nEeCziWaK31ont-ElxDJZmjU-ko_oSBn8dvuvji0drOcnwIDAwjh/" /></a></span>
</marquee>

Nah sekarang tinggal lihat hasilnya deh, seperti di bawah ini





semoga berhasil

Continue Reading

Membuat Tulisan Link Berkedip kedip

Membuat Tulisan Link Berkedip kedip -   stelah membahas tentang cara    Burung Twitter Berterbangan di Blog
 Kini saya mau membahas tentang cara  membuat tulisan berkedap kedip seperti di bawah ini

Perhatikan  (Arahkan kursor mouse anda ke Link berikut ini, ingat hanya arahkan!)

          http://blogzafar.blogspot.com

sepeti itulah contohnya ok, bagus kan ;)

1. Login ke Blogger >> Klik Tata Letak >> Klik Tambah Gadget/Add Gadget >> Pilih HTML/ Java Cript

2. Taruh kode berikut di dalamnya:

<script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/kedip_rainbow.js
' type='text/javascript'/>

3. Simpan hasil kerjaan anda. dan lihat hasilnya
 

Continue Reading

Cara Membuat Efek Daun Berjatuhan Di Blog

postingan kali ini ....sepertinya juga banyak diminati oleh sobat blogger, dan menurut saya efek daun berjatuhan ini loadingnya lebih ringan dan cepat

Trik membuat efek daun berjatuhan ini juga masih menggunakan javascript, cara membuatnya simak lebih lanjut dibawah ini.

Cara Membuat Efek Daun Berjatuhan Di Blog :

1.       Seperti biasa login dulu ke dashboard blogger anda.

2.       Pilih Rancangan > Edit HTML, centang Expand widget template.

3.       Cari kode </head>  pada template dengan menggunakan Ctrl+F.

4.       Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head> .

<script src='http://arti.master.irhamna.googlepages.com/daun.js'/>

5.       Save / simpan template anda dan lihat hasilnya  !!

Nah itu tadi di atas langkah langkah Cara Buat Efek Daun Berjatuhan

semoga bermanfa'at ea :)

Continue Reading

Membuat Kursor Dikelilingi Bintang

kali ini saya mau berbagi tentang cara membuat tanda panah yang di kelilingi oleh bintang,  Membuat Kursor Dikelilingi Bintang
tentunya akan sangat mempercantik blog anda, di mana sebagian orang tentu sangat menginginkannya tetapi ada jg mungkin yang tidak senang yah....
 oke kita langsung aja mari kita ikuti langkah-langkah di bawah ini
 semoga bermanfa'at yah untuk yang suka dan membutuhkan hehe......





1. Ke Dashboard, trus klik Design, klik Add a Gadget

2. Klik 'HTML/JavaScript'

3. Pasang kode HTML dibawah ini dalam 'HTML/JavaScript' (mana sajah)

Untuk Bintang Warna Putih  :

<script src="http://sites.google.com/site/blogfuelblogfuel/widgets-js/bintang.putih.js" type="text/javascript"></script>

Untuk Bintang Warna Ungu  :

<script src="http://sites.google.com/site/blogfuelblogfuel/widgets-js/bintang.ungu.js" type="text/javascript"></script>

Untuk Bintang Warna Biru  :

<script src="http://sites.google.com/site/blogfuelblogfuel/widgets-js/bintang.biru.js" type="text/javascript"></script>

Untuk Bintang Warna Hijau  :

<script src="http://sites.google.com/site/blogfuelblogfuel/widgets-js/bintang.hijau.js" type="text/javascript"></script>

Untuk Bintang Warna Merah  :

<script src="http://sites.google.com/site/blogfuelblogfuel/widgets-js/bintang.merah.js" type="text/javascript"></script>

4. Lalu tekan Save .. dan liat hasilnya :D .. jangan lupa beri komentar kawan :) 

Continue Reading