Membuat Efect Marque atau Teks Berjalan

Marquee adalah kode HTML untuk membuat teks bisa bergerak. Efek marquee ini disenangi dan dipakai sebagian besar para blogger di dalam blognya karena sifatnya yang dinamis serta menarik untuk dilihat disamping untuk menghemat tempat pada halaman blog, ada beberapa jenis efek marquee diantaranya adalah efek marquee dari gerakan, bergerak dari kanan ke kiri, perilaku gerakan, dengan variasi teks dan warna latar belakang, dengan gerakan dan berhenti jika disorot mouse, dengan link didalamnya.

Contoh marquee dari gerakan

kode;

<marquee align="center" direction="right" height="200" scrollamount="2" width="30%">
marquee dari kanan ke kiri</marquee>

hasilnya;

marquee dari kanan ke kiri

* Sampeyan bisa ganti kata "left" dengan keinginan, yaitu bisa : left, up, down.

Contoh marquee dari perilaku gerakan

kode;

<marquee align="center" behavior="alternate" height="200" scrollamount="3" width="70%">
marquee menurut perilaku</marquee>

hasilnya;

marquee menurut perilaku

Contoh marquee dengan variasi teks dan warna latar belakang

kode;

<div align="left">
<span style="color: white; font-family: arial;"><b><marquee behavior="alternate" bgcolor="#6C755B" scrollamount="3" width="70%">
marquee dengan variasi teks
</marquee></b></span></div>

hasilnya;

marquee dengan variasi teks

Contoh marquee ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain teks akan bergerak kembali

kode;

<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="50%">
Anda arahkan disini mousenya</marquee>

hasilnya;

Anda arahkan disini mousenya

Contoh marquee yang di dalam nya terdapat link

kode;

<marquee align="center" direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">
<a href="http://lagu-enak-mp3.blogspot.com/" target="new">Lagu Enak</a>
<a href="http://vector-images.blogspot.com/" target="new">Vector Images</a>
<a href="http://freelogo-downloads.blogspot.com/" target="new">Free Logo Download</a></marquee>

hasilnya;

Lagu Enak
Vector Images
Free Logo Download

Begitulah contoh-contoh dari efek marquee, ...

Membuat Background Sidebar Dengan Warna Berbeda

Keuntungan cara ini adalah kita dapat membuat tampilan gadget yang unik, berbeda setiap gadget . Pada cara ini, ada 3 komponen gadget yang harus diketahui yaitu; Kotak Luar Gadget, Judul Gadget, Isi Gadget. Dari ketiga komponen tersebut, masing-masing dapat diberi background, apakah itu backround warna atau background gambar.

Langkah-langkahnya sebagai berikut;

Kenali terlebih dahulu ID gadget yang akan diubah. Caranya,

• Login ke Blogger.
• Pilih Rancangan.
• Pilih Edit HTML
• Jangan di centang Expand Template Widget biar tidak muncul kode-code yang bejibun..hehehe.

misal kita akan edit pada Gadget Follower, arahkan mouse pada kode HTML template Anda yang paling bawah, disitu akan tampak ID gadget Anda kira-kira seperti ini;

<b:widget id='HTML4' locked='false' title='Artikel Terkait Lainnya' type='HTML'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
 

yang berwarna merah adalah ID gadget-nya.

Misalkan kita edit background untuk Follower, langkah selanjutnya kita buat Kode CSS untuk memasang background gadget. Buatlah kode seperti  berikut;

#Followers1 {
Background : #009933;
}

#Followers1 h2{
Background : #0000FF;
}

#Followers1 .widget-content{
Background : #FF0000;
} 

Hijau Kode untuk Kotak Luar Gadget
Biru Kode untuk Judul Gadget
Merah Kode untuk Isi Gatget

Ini juga berlaku untuk semua gadget sampeyan, tinggal mengganti ID Gadget.

Jika ingin menggunakan backgroud gambar, silahkan ganti kode warna dengan  kode URL gambar, contoh penulisannya seperti di bawah ini:

#Followers1 {
Background : url(http://URLgambar) no-repeat;
}

#Followers1 h2{
Background : url(http://URLgambar) no-repeat;
}

#Followers1 .widget-content{
Background : url(http://URLgambar) no-repeat;
} 

Jika sampeyan sudah selesai membuat kodenya, kemudian tempatkan kode tersebut  di atas kode ]]></b:skin>

Langkah Terakhir Klik Simpan Template. dan lihat hasilnya.

NB; Sampeyan bisa berkreasi sesuai dengan keinginan sendiri.

Membuat Link Download tanpa Membuka Web Penyimpanan File

Sering kalau kita download kita harus membuka web tempat penyimpanan file tersebut, bahkan ada pula kita harus menunggu beberapa detik/menit untuk mendapatkan link downloadnya. hal seperti itu kadang membuat kita jenuh atau tak sabar menunggu untuk mendownload file yang kita inginkan, namun di beberapa website ada beberapa yang menyediakan sesuatu untuk di download tanpa menuju tempat penyimpan file tersebut (di klik file langsung akan terdownload secara otomatis ke komputer kita). ternyata untuk membuatnya cukup simple, kita hanya butuh tempat penyimpanannya yaitu dari google caranya :

Masuk saja ke Google Sites :

Berikut langkah-langkahnya :

> Created New Site

> Isi 'Name your site' yang diinginkan

> Isi Code Verifikasi

> Created 

> New Page

> Beri nama : Berkas (Name your page)

> Created Page

>  Tekan tombol Lampiran (0)

> Choose File (Cari file yang akan diupload)

> Open (Tunggu proses uploading)

> Setelah selesai, muncul "Lihat dan Unduh"

> Klik kanan di "Unduh" terus pilih "copy link location atau copy link address"

Silahkan di paste di postingan (menu bar --> Link). Terbitkan Entri... Selesai

Contoh demo silahkan klik link download disini!

beres deh. Semoga berhasil

Cara Membuat Daftar Isi Lengkap

Daftar isi yang kita bahas disini adalah daftar isi yang akan ditampilkan pada satu halaman penuh dan bisa menampilkan seluruh judul postingan yang dikelompokkan sesuai dengan label atau kategori masing-masing judul. Jadi sebelum membuat daftar isi sampeyan harus benar-benar mengelompokkan posting artikel sesuai dengan Label atau Kategori, karena kalau postingan dibuat tanpa menggunakan label judul postingan tidak akan tampil didalam daftar isi ini.

Berikut langkah-langkahnya :

Masuk ke account blogger 

Pilih Posting / Entri Baru. Pilih Edit HTML pada kanan atas halaman

Beri Judul postingan tersebut dengan Daftar Isi Lengkap, atau yang lain sesuai keinginan Mas Bro sekalian.

Copy paste script berikut ini :

<script src="https://sites.google.com/site/mbahdjojos/daftarisi/daftarisi.js?attredirects=0&d=1">
</script><script src="http://alamatbloganda.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Ganti tulisan yang berwarna merah dengan alamat blog sampeyan kemudian klik Terbitkan Entri dan lihat hasilnya, jika langkah sampeyan benar daftar isi akan tampil pada halaman penuh dan dikelompokkan sesuai dengan label atau kategori yang sampeyan buat. Langkah terakhir link halaman Daftar isi lengkap ini tempatkan pada Menu Navigasi supaya gampang kalau sampeyan atau rekan lain menjelajah blog sampeyan.

Untuk contohnya bisa sampeyan intip disini!

Cara membuat link nofollow

Tujuan membuat link nofollow adalah untuk menghindari mesin pengindeks menuju ke link yang terdapat pada blog tersebut, di mana jika ditemukan adanya atribut nofollow maka robot laba-laba mbah google tidak akan melanjutkan pemeriksaan link tersebut. Berikut ini cara membuat link nofollow:

Link aslinya

<a href=”http://www.google.com”>Google</a>  

agar menjadi nofollow kita harus menambahkan atribut rel=”nofollow” (relation=nofollow) atau rel=”external nofollow”.

Setelah ditambahkan rel=”nofollow”, akan terlihat seperti ini:

<a href=”http://www.google.com” rel=”nofollow”>Google</a>

atau

<a rel=”nofollow” href=”http://www.google.com” >Google</a> 

Pada Blogger update terbaru sudah ada fitur link nofollow, letaknya pada Menu Bar > Link > beri tanda Ceklis pada Add 'rel=nofollow' attribute, seperti terlihat pada gambar dibawah ini;

Semoga bermanfaat

Free Download Font - Jellyka Vanpire Street (ttf)

Author: Jellyka Nerevan

Website: http://www.cuttyfruty.com

License: Free for personal use

Download Jellyka Vanpire Street (90 Kb)

Membentuk Foto Menyerupai Shape

Pertama-tama buat sebuah dokumen baru dengan ukuran 750 x 350 pixels . Kamu bisa merubah ukuranya sesuai dengan banyaknya gambar yang akan kamu gunakan nantinya. Agar gambar terlihat lebih menarik beri background nya, disini saya menggunakan gambar seperti yang bisa kamu lihat pada gambar dibawah ini, untuk melihat koleksi pattern yang saya punya kamu bisa klik disini untuk menggunakanya juga. Cara memberikan backgroundnya mudah, kamu buka gambar yang akan kamu gunakan sebagai background dengan Photoshop lalu drag gambar nya dengan menggunakan Move TOol ke dokumen baru yang kita buat tadi, nah jika ukuran backgroudnya tidak dapat menutupi seluruh area dokumen baru kita tadi, kamu bisa menekan ctrl + T pada keyboard lalu ubah ukuran gambar sesuai dengan keinginan kamu

 

Selanjutnya masukkan gambar/foto yang akan dibentuk, caranya sama seperti memasukkan gambar backgroundya, namun biarkan ukuran gambar nya sesuai dengan ukuran backgroundnya tapi gambar/foto yang ingin dibentuk jangan sampai memenuhi dokumen kita

Selanjutnya aktifkan Custom shape Tool (U) lalu klik kanan pada dokumen. nah pilih shape yang kamu sukai dengan melakukan double klik disini saya menggunakan shape daun. lalu drag pada dokumen kita tadi sehingga shape nya muncul jika sudah kamu bisa menggunakan Free Transform (Ctrl + T) untuk mengubah ukuran dan posisinya

selanjutnya tahan tombol ctrl pada keyboard lalu klik yang ditunjuk pada gambar dibawah ini maka akan muncul seleksi pada dokumen kita tadi

Setelah seleksi muncul klik gambar/foto (pada dokumen saya ditandai dengan nama layer 4) yg ingin dibentuk lalu tekan ctrl + J maka akan muncul sebuah layer dari foto tapi berbentuk shape yang kita pilih tadi (didokumen saya ditandai dengan layer 10) lalu hidden atau hilangkan dengan mengklik tanda mata pada layer shape dan foto awal

Lalu klik Layer 10 lalu buka menu Layer - Layer Style - Drop Shadow atur propertis nya seperti gambar dibawah ini lalu klik Okay

maka gambarnya akan terlihat seperti gambar dibawah ini

lalu dengan menggunakan sedikit sentuhan magic maka dengan mengikuti langkah diatas kamu bisa membuat seperti gambar dibawah ini

Tutorial Photoshop