Membuat List Plus Image Dinamis

Jika pada posting sebelumnya lihat Disini daftar/list blog bersifat statis, berikut ini adalah daftar blog yang bersifat dinamis, maksudnya adalah daftar tersebut tidak terdapat penggulung vertikalnya, tetapi berjalan layaknya sebuah animasi, ini adalah penggunaan perintah Marquee, untuk lebih jelasnya seperti pada gambar dibawah ini


atau sobat dapat melihat langsung pada sidebar kanan blog ini yaitu Free Download. Bagaimana menarik bukan ...?


Untuk membuat tampilan seperti itu sobat tinggal meng-copy kode berikut ini

<marquee direction="up" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="3" height="100" align="center">..... teks/image/link ....</marquee>

hasil dari kode diatas :

..... teks/image/link ....

Penjelasan dari kode diatas :
1. <marquee direction="up" adalah kode arah berjalannya teks/image, up artinya keatas, dapat anda ganti “down”, “left”, dan “right”.
2. onmouseover="this.stop()" ini adalah kode jika mouse menunjuk pada isi daftar maka gerakkannya berhenti.
3. onmouseout="this.start()" ini adalah kode jika mouse tidak menunjuk pada isi daftar maka gerakkannya kembali berjalan.
4. scrollamount="3" ini adalah nilai yang menunjukkan cepat atau lambatnya gerakkan yang diberikan. Semakin tinggi nilainya (“4”, “5”, ….dst) maka gerakkannya semakin cepat pula.
5. width="100%" dan height="100" ini adalah lebar dari daftar yang otomatis mengikuti lebar sidebar anda, dan tinggi dari daftar yang anda, dapat anda sesuaikan.
6. Untuk teks/image/link sobat harus modifikasi kode tersebut sesuai dengan isi dari daftar tersebut.
Sebagai contoh dan dapat anda modifikasi kode daftar blog seperti pada gambar diatas, silahkan download kodenya Disini.

Read More >> Membuat List Plus Image Dinamis

Membuat List Plus Image

List atau Daftar pada sebuah blog merupakan tampilan yang dapat berisi image, teks informasi, link, dll. Tampilan ini tentu saja berguna bagi blogger untuk menampilkan sebuah informasi yang dapat dibaca langsung oleh pengunjung. Seperti pada gambar berikut ini.

Bagaimana menarik bukan..? Tampilan ini dapat anda letakkan pada sidebar/widget bahkan pada posting artikel yang anda buat.


Secara default kode untuk membuat daftar pada blog adalah seperti berikut ini :

<div style="overflow:auto;width:320px;height:105px;padding:5px;border:1px solid #FFCC66">..... teks/image/link...</div>

Penjelasan dari kode diatas :
1. overflow:auto adalah kode jika daftar isinya banyak maka penggulung vertikal akan otomatis mengecil.
2. width:320px dan height:105px ini adalah ukuran dari daftar yang anda buat, lebar dan tingginya dapat anda ubah sesuai dengan sidebar/widget blog anda.
3. padding:5px ini adalah jarak antara teks/image dengan border, dapat anda ubah
4. border:1px dan solid#FFCC66 ini adalah lebar border dan warna border, juga dapat anda sesuaikan.

Jika sobat ingin membuat tampilan daftar seperti pada gambar diatas tentu saja ada beberapa kode yang harus anda tambahkan/modifikasi. Untuk hal tersebut sobat dapat men-download kode yang sudah saya modifikasi disini. Oke selamat mencoba.

Read More >> Membuat List Plus Image

Dropdown Menu

Dropdown menu adalah salah satu dari bentuk form yang dapat menampilkan / menyembunyikan isi dari satu atau lebih link teks, jika link teks tersebut di-klik maka akan muncul isi dari link teks tersebut. Dropdown berarti link-link tersebut akan muncul jika pengunjung melakukan klik pada tanda panah pilihan disamping form kecil ini. Seperti pada gambar berikut ini :


Untuk lebih aktualnya seperti pada contoh berikut ini :

tulisan disini yang akan muncul duluan
tulisan di sini yang akan muncul

Bagaimana menarik bukan ...? Untuk membuat dropdown menu ini anda tinggal meng-copy kode berikut, dan menempatkannya pada sidebar/widget, bahkan pada posting sekalipun.

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected>tulisan disini yang akan muncul duluan</OPTION><option value="isi dengan url addres yang ingin di tuju">tulisan di sini yang akan muncul</option> </select></form>

Penjelasan dari kode diatas :
1. size=1 adalah ukuran dari tampilan dropdown menu, silahkan anda ubah dengan angka yang lebih besar jika perlu.
2. tulisan disini yang akan muncul duluan ini adalah tulisan keterangan yang tampil pada dropdown tersebut.
3. tulisan di sini yang akan muncul ini adalah teks dengan url tujuan/link teks, jika dropdown (tanda panah) di klik sebagai pilihan / option pertama yang muncul.
4. Untuk menambahkan pilihan / option kedua dan seterusnya, anda tinggal meng-copy kode
<option value="isi dengan url addres yang ingin di tuju">tulisan di sini yang akan muncul</option>
dan Paste-kan dibawah kode yang anda Copy diatas. Lanjutkan dengan mengedit untuk option kedua, dan seterusnya.

Kode diatas dapat anda download dan modifikasi disini Download Kode
Oke Selamat mencoba...!

Read More >> Dropdown Menu

Text Area With Button

Seperti pada posting kami sebelumnya lihat disini yaitu tentang text area jika sobat lihat hasilnya seperti pada gambar berikut ini


terlihat bahwa text area tersebut tidak memiliki tombol perintah. Tombol perintah disini saya maksudkan adalah sebuah tombol / button yang jika di klik maka semua tulisan pada text area tersebut akan secara otomatis ter-Blok / terpilih semua. (lihat gambar diatas) Dengan adanya tombol tersebut pembaca tidak perlu melakukan blok manual / drag n drop jika ingin meng-Copy tulisan pada text area tadi.


Berikut ini adalah cara untuk membuat text area dengan tombol tersebut :
1. Silahkan sobat Copy kode berikut ini

<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="left"><textarea style="WIDTH: 150px; HEIGHT: 75px" 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>

2. Silahkan Paste-kan pada blog sobat (bagian sidebar / posting)
3. Lihat hasilnya

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 :
1. <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.
2. <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 highlight (di tandai atau di blok), jadi anda jangan merubah tulisan ini.
3. 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. Misalkan Select all, Blok kode.

Element text area :
1. <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. <text style="WIDTH: 150px">-->kata "WIDTH:150px" menunjukan lebar dari text area tersebut sebanyak 150 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"
3. HEIGHT: 75px --> angka "75px" menunjukan bahwa text area akan mempunyai tinggi sebesar 75 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.
Contoh text area yang memakai tombol highlight diatas, memuat script untuk melindungi dari right click para pengunjung. Script ini di pakai apabila anda tidak ingin tulisan-tulisan anda di copy paste oleh pengunjung. bagi yang berminat silahkan copy lalu pasang pada kode HTML anda antara kode <HEAD> dan </HEAD>

Kode diatas dapat anda download disini Download Kode

Ok sobat selamat mencoba....!!

Read More >> Text Area With Button

View Random Post Button

Tips ini adalah sebuah tombol / button dapat juga berupa teks yang memiliki fungsi untuk menampilkan posting pada blog secara acak.

Jika anda memiliki banyak artikel di blog anda, dan berharap setiap artikel tersebut dibaca oleh pengunjung, ada baiknya anda memasang Display Random Post sehingga jika pembaca menekan link Random Post, maka mereka akan dibawa menuju sebuah artikel secara acak pada blog anda.


Caranya adalah masukkan kode di bawah ini pada bagian Template anda. Buka Dashboard kemudian Template dilanjutkan dengan Edit HTML. Letakkan kode ini persis sebelum tag </head>

<script type='text/javascript'>
//<![CDATA[

function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
window.location = entry.link[j].href + "#random";
}
}
}

function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}

//]]>
</script>

Kemudian masukkan kode di bawah ini pada blog anda (bisa pada sidebar)
berikut ini kode berupa teks link :

<a href="javascript:feelingLucky();">View Random Post</a>

hasilnya : View Random Post

berikut ini kode berupa tombol :

<input type="button" onclick="feelingLucky();" value="View Random Post"/>

hasilnya :

Kode utama yang atas dapat anda download disini Download Kode

Oke Selamat mencoba ........!!

Read More >> View Random Post Button

Menempatkan Background Image

Alangkah indahnya jika di posting kita terdapat background gambar yang terletak tepat dibelakang tulisan yang kita buat. Setidaknya semakin menambah indah tampilan posting kita walaupun tulisanya tidak menarik sama sekali
Adakalanya pengunjung kita manjakan dengan tampilan blog yang menarik. Bisa saja page view kita bertambah gara-gara pengunjung hanya cuma ingin melihat background apa saja yang ada di setiap posting kita. Tips ini juga dapat diterapkan pada sidebar / widget blog anda, seperti pada blog saya ini.


Oke sobat berikut ini langkah-langkah untuk membuat tips diatas :
1. Login pada blog sobat
2. Klik Tata Letak / Layout
3. Klik Tambah widget (jika ingin ditempatkan pada sidebar / widget blog)
4. Silahkan Copy-kan kode dibawah ini

<div style="padding: 5px; background-image: url(http://alamat_gambar_anda.jpg); background-repeat: repeat; background-position: center;">Tulis teks disini...</div>

5. Paste-kan pada widget blog anda
6. Klik Simpan
7. Silahkan Lihat blog sobat / Refresh

Berikut ini contoh dari penggunaan kode diatas dengan URL gambar yang saya miliki dan nilai padding: 30px.

Tulis teks disini...

Berikut ini dengan ketentuan yang sama dengan sebelumnya, tetapi pada bagian background-repeat: no-repeat; dan background-position: left; tentu saja dengan URL gambar lainnya.

Tulis teks disini...

Tips:
Gunakan warna huruf yang lebih terang dari gambar backgroundnya agar mudah dibaca.
Teks juga dapat anda gunakan berupa URL / kode HTML lainnya.
Kalau bisa gunakan gambar yang lebih transparan.
Gambar juga dapat berupa image animasi seperti berikut ini

Komentarnya saya tunggu ... atau kalau masih kurang jelas silahkan tinggalkan komentarnya...

Kode diatas dapat anda download dan modifikasi disini Download Kode

Read More >> Menempatkan Background Image

View Random Image Profile

Trik ini saya dapatkan dari salah satu teman yang sangat jago dalam mendesain blog. Alhamdulillah ternyata pada template blog yang saya gunakan kode HTML nya dapat terintegrasi dengan baik. Setelah saya lihat pada template blog umumnya kode yang akan dimodifikasi ini secara umum selalu ada, so untuk sobat yang ingin lihat fungsinya, silahkan sobat REFRESH tampilan blog ini dan lihat tampilan foto profil / About me disamping. Jika belum berubah coba sobat baca salah satu posting saya, kemudian kembali ke tampilan Home ,lihat perubahan foto profil tersebut. Bagaimana menarik bukan ..??


Untuk membuat tampilan profil seperti itu ikuti langkah-langkah berikut ini :
1. Login ke blogger sobat
2. Klik Layout / Tata letak - Edit HTML
3. Klik / ceklist option Expand Widget Templates
4. Cari kode berikut ini

<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>

5. Kemudian ganti kode di atas dengan kode javascript di bawah ini:

<script>
var pic, alt;
pic = new Array;
pic[0] = "PHOTO-URL";
pic[1] = "PHOTO-URL";

alt = new Array;
alt[0] = "My Photo";
alt[1] = "My Photo";

var now = new Date();
var seed = now.getTime() % 0xffffffff;

function rand(n) {
seed = (0x015a4e35 * seed) % 0x7fffffff;
return ( seed >> 16 ) % n;
}

var num = rand(2);

document.write("<a href='http://www.blogger.com/profile/XXX'><img alt='" + alt[num] + "' border='0' class='profile-img' height='80' src='" + pic[num] + "' width='60'/></a>");
</script>

Keterangan
Ganti PHOTO-URL dengan URL foto kamu sendiri, kemudian pada kode var num = rand(2); angka 2 mewakili jumlah array yang kita buat / jumlah foto yang akan dirandom munculnya, Pada contoh di atas berarti ada 2 array, 0 dan 1. Jika ingin lebih dari 2 maka pada tag pic[..], alt[..], dan rand(..) harus anda ubah sesuai dengan jumlah foto yang akan dirandom munculnya (dimulai dari 0,1,2,3 = 4 foto)
Selanjutnya ganti kode XXX dengan 20 angka (untuk New Blogger) yang ada pada profil blogger kalian masing-masing.

6. Jika telah diedit semua klik SIMPAN TEMPLATE
7. Silahkan Lihat Blog sobat

Kode diatas dapat anda download disini Download Kode

Read More >> View Random Image Profile

Membuat Text Area

Apa itu text area.?. Untuk memudahkan anda memahami apa itu text area, silahkan anda lihat seperti pada gambar berikut ini

Jadi text area merupakan form / tempat jika anda ingin menampilkan text kode-kode HTML, pada posting blog atau pun pada salah satu widget blog anda. 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, ikuti langkah-langkah berikut ini :
1. Silahkan anda Copy/Klik tombol Blok Kode di bawah ini : (ini contohnya kode ditampilkan dengan text area dengan tombol)

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

2. Paste-kan pada tempat dimana text area akan ditampilkan.
3. Dari kode diatas hasilnya seperti berikut ini

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

Keterangan :
"center" : posisi dari text area.
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.

Read More >> Membuat Text Area

Widget Status Online Pada Blog

Ada kalanya pada beberapa blog yang saya jumpai terdapat status yang menunjukkan sang empunya blog lagi online dengan akun yahoo messengernya, hal ini tentu saja menarik bukan ..? Anda dapat langsung melakukan chatting kepada sang empunya blog tersebut pada saat itu juga. Untuk membuat tampilan tersebut pada widget blog anda silahkan baca lanjutannya.


langkah-langkah untuk membuat ikon status online/offline pada blog anda sebagai berikut :
1. Login ke blog anda
2. Klik Layout / Tata letak
3. Tambah gadget / widget
4. Copy-kan kode pada form berikut ini (klik tombol Blok kode) Kemudian Ctrl + C

<a href=http://messenger.yahoo.com/edit/send/?.target=excelalfarezi@ymail.com“><img border=“0″ src=http://opi.yahoo.com/online?u=excelalfarezi@ymail.com&m=g&t=9& l=us /></a>

5. Paste-kan kode diatas pada gadget / widget blog anda
6. Pada alamat email diatas (excelalfarezi@ymail.com) ganti dengan email anda
7. Pada kode (t=9) adalah kode angka dari bentuk ikon yang akan digunakan
8. Kode t=... tersebut dapat anda ganti dari 1 - 16 dengan bentuk seperti berikut ini :

Ikon Online

Ikon Offline


9. Terakhir silahkan klik Simpan Gadget / widget dan Lihat blog anda

Oke sobat silahkan dicoba ... mudah bukan ..!!

Read More >> Widget Status Online Pada Blog