Home / All Post
Tutorial HTML

Tutorial HTML

Add Comment

Tutorial HTML

Melanjutkan posting yang terdahulu setelah terselang oleh beberapa artikel tentang blog tutorial maka kali ini saya akan membahas tentang tutorial HTML kembali.Sebelum menginjak kepada topik bahasan ada baiknya para sobat mengikuti bahasan kali ini dengan langsung memfraktekannya agar lebih cepat mengerti. Caranya siapkan terlebih dahulu program notepadnya lalu tuliskan kode HTML seperti dibawah, kemudian apabila telah selesai mempraktekan simpan file tersebut dengan extensi .htm (dot htm). Contoh file : latihan.htm kemudian jalankan dengan internet explorer. silahkan tulis kode-kode berikut : 

<html>

<head>

<title>latihan</title>

<body>

Tulis apa-apa yang saya terangkan di sini !

</body>

</html>

 

Kita langsung ke topik bahasan aja ya biar ga bosan. 

Elemen dasar HTML 

Ada beberapa elemen dasar HTML yaitu : 

Elemen Blok Level 

Elemen blok level yaitu tingkatan besarnya hurup yang akan di tampilkan pada browser. Elemen blok level yang paling sering di gunakan adalah Heading (h1 sampai h6).Tag heading ini ini berupa <h1>...</h1> sampai dengan <h6>...</h6>. 

Contoh :

<h1>Ini heading 1</h1> 
<h2>Ini heading 2</h2> 
<h3>Ini heading 3</h3> 
<h4>Ini heading 4</h4> 
<h5>Ini heading 5</h5> 
<h6>Ini heading 6</h6> 

Hasilnya akan seperti ini : 

Ini heading 1

Ini heading 2 

Ini heading 3 

Ini heading 4 

Ini heading 5

Ini heading 6


Sebenarnya ada cara lain untuk menampilkan berbagai ukuran hurup, yakni memakai tag <font size="...">.....</font>. 

Contoh : 

<font size="1">Ini font size 1</font> 

<font size="2">Ini font size 2</font> 

<font size="3">Ini font size 3</font> 

<font size="4">Ini font size 4</font> 

<font size="5">Ini font size 5</font> 

<font size="6">Ini font size 6</font> 

<font size="7">Ini font size 7</font> 

Hasil yang akan tampil seperti ini : 

Ini font size 1 

Ini font size 2 

Ini font size 3 

Ini font size 4 

Ini font size 5 

Ini font size 6 

Ini font size 7 

Itu adalah contoh untuk menampilkan huruf dalam berbagai ukuran. 

Untuk kesempatan kali ini, kaya nya udah dulu sobat soalnya belum mandi nih, mo berangkat kerja       hiii.....pantesan dari tadi ada yang bau aneh    

Nantikan seri berikutnya! 

Blogroll Alternatif

Blogroll Alternatif

Add Comment

Blogroll Alternatif

Judulnya lucu ya, kaya pengobatan saja pake kata altenatif segala, pengobatan alternatif kalee.. 

Baiklah para sobat semua, dalam kesempatan kali ini saya akan membicarakan tentang yang namanya Blogroll. 

Apa itu Blogroll? 

Blogroll atau di sebut juga Link Exchange atau kata orang bandung sih tukeran link antar blog atau website adalah menyimpan link address milik orang lain pada blog/website milik kita. 

Apa manfaat dari blogroll? 

Mungkin secara sekilas para sobat berpikir bahwa memasang link address milik orang lain pada blog/website milik kita akan merugikan, sebab dengan itu tentu saja kita memberikan jalan kepada para pengunjung untuk meninggalkan blog kita. Alasan itu mungkin ada benarnya, akan tetapi tidak seutuhnya benar. Dengan adanya blogroll banyak sekali manfaat yang kita dapatkan, antara lain yaitu mempererat tali silaturahmi atau tali persaudaraan diantara pemilik blog/website. selain itu semakin banyak blog kita di link oleh blog lain maka semakin baik pula posisi rangking blog kita pada Search Engine semacam Google, Yahoo, Msn serta teman-temannya. Tentu saja sama-sama kita ketahui bahwa setiap pemilik blog/website berkeinginan bahwa blog/website miliknya mempunyai rangking yang baik pada search engine. Makanya budayakan tukeran link jangan pelit, karena kalau kita pelit memberi link ya tentu saja tidak akan ada yang mau pasang link addres milik kita pada blog mereka. 

Terus apa hubungannya dengan judul di atas? 

Oh iya ke asyikan bercerita jadi lupa pada topik bahasan. OK kita kembali ke lap....top (yeee..ngekor ama tukul) eh topik bahasan. Bagi para sobat yang baru membuat blog dan baru memiliki blogroll hanya beberapa saja mungkin tulisan ini tidak terlalu bermanfaat, tapi mungkin barangkali nanti setelah link sobat jumlahnya sampai ratusan atau bahkan ribuan informasi ini bisa jadi bermanfaat. Memang seperti yang tadi saya katakan di awal bahwa bertukar link atau link Exchange sangat bermanfaat, tapi...ada tapinya nie sobat..kalo link sobat sudah mencapai ratusan atau bahkan ribuan tentu saja akan menemui masalah, yaitu tentu saja link ini akan memakan tempat yang banyak dan jadi tidak enak untuk di pandang mata para pengunjung. Nah jika sobat mempunyai masalah demikian, maka saya akan memberikan beberapa alternatif jalan keluarnya (tuh kan jadi nyambung, keluar juga kata alternatif nya). Yaitu antara lain : 

Blogroll dengan marquee

yang paling banyak di gunakan oleh para blogger untuk menghemat space pada blog adalah dengan menggunakan perintah marquee. 

Contoh membuat blogroll dengan perintah marquee : 

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" > 

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a> 
<br/><br/> 
<a href="http://user-online.blogspot.com" target="_blank">User Online</a> 
<br/><br/> 
<a href="http://rohman-freeblogtemplate.blogspot.com" target="_blank">free Blog Template</a> 
<br/><br/> 
<a href="http://kolom-authorized.blogspot.com" target="_blank">Authorize service</a> 
<br/><br/> 
<a href="http://contoh-blog.blogspot.com/" target="_blank">Blog D'Tree</a> 
<br/><br/> 

</marquee> 

Maka nanti yang akan tampil pada blog kita adalah seperti ini : 

User Online 

free Blog Template 

Authorize service 

Blog D'Tree 

 

Daftar Mybloglog

Daftar Mybloglog

Add Comment

Daftar Mybloglog

Bagi para sobat yang baru membuat blog, pada kesempatan kali ini saya mau menambahkan perbendaharaan blog tools nya, yakni pasang MyBloglog. 

Apa itu Mybloglog ? 

   Bingung kalau harus mendifinisikan apa itu mybloglog            biar kita tidak sama-sama bingung, silahkan alihkan perhatian sobat ke bagian sidebar sebelah kanan layar monitor, di bawah tulisan Tamuterdapat photo yang ganteng-ganteng serta cantik-cantik. Nah itu bukanlah photo saya ataupun my family, tapi itu merupakan tamu yang pernah berkunjung ke blog ini dan beliau-beliau inipun sama-sama anggota dari mybloglog, atau barangkali photo sobat sudah terpampang disana? selamat kalau iya, karena sobat akan mulai jadi orang terkenal. Ko bisa? Ya iiyya...lah, karena tercatat tak kurang dari lima puluh pengunjung setiap harinya yang mampir kemari dan selalu melihat photo sobat, keren kan! makanya sering-sering main kemari biar cepat terkenal..he..he..(wuyyy...udah dong ngelanturnya     ). 

Bagaimana sobat sudah dapat gambaran? saya yakin sudah. Atau belum? kalau belum bolehlah saya yang mendefinisikan, tapi tentunya dengan versi saya sendiri. Mybloglog adalah suatu situs yang menyediakan layanan untuk melacak (tracking) para pengunjung blog/website dimana apabila pengunjung tersebut merupakan anggota situs mybloglog maka dapat secara otomatis terdeteksi dan di cantumkan dalam menu Recent Reader nya (pembaca terbaru). 

Apa manfaat bergabung di mybloglog? 

Ada beberapa manfaat kita bergabung dengan mybloglog yaitu : 

Untuk menambah traffic ke blog kita

Dengan adanya photo kita terpampang di blog orang lain, maka ada kemungkinan banyak yang akan berkunjung ke blog milik kita, sekurang-kurangnya dari pemilik blog itu sendiri. 

Mengetahui link mana yang banyak di klik

Di mybloglog ada fasilitas tracking untuk memberi peringkat terhadap link-link yang kita pasang, link mana yang banyak di klik pengunjung, maka peringkat link itu semakin baik. 

Mempererat tali silaturahmi antar pemilik blog

Tak bisa di pungkiri dengan adanya otomatisasi photo kita terpampang tanpa harus menuliskan pesan seperti halnya buku tamu, ini tentunya akan lebih memungkinkan saling kunjung mengunjungi antar pemilik blog. 

Dan tentu saja masih ada manfaat-manfaat yang lainnya yang bisa di dapat, akan tetapi untuk menghemat pembahasan hanya itu saja dulu. Nah sekarang bagaimana cara bergabung dengan mybloglog, silahkan ikuti langkah-langkah berikut ini : 

Silahkan buka situs http://www.mybloglog.com
Isi form yang telah di sediakan di bawah tulisan Sign Up Now
Screen name --> Isi dengan nama yang ingin di tampilkan. Contoh : Amen24
Email --> Isi dengan email sobat ( yang valid)
Passwor --> Isi dengan password yang di inginkan. Contoh : ranggalawe
Blog/Site URL --> Isi dengan alamat blog sobat. Contoh : http://rubrik-elektronik.blogspot.com
Klik Tombol Register
Terlihat beberapa form yang harus diisi lagi
Blog/Site Title --> Isi dengan judul blog sobat
Blog platporm --> pilih blogspot.com
Dibagian bawah ada dua radio buttun, silahkan pilih yang sobat sukai
Klik tombol yang bertuliskan Complete Registration
Klik tulisan Go to Your page
Klik tombol yang bertuliskan Edit profile yang berada di sebelah kanan atas
Isi semua data diri sobat (tidak saya sebutkan satu2 karena terlalu banyak)
Jika sudah selesai di isi semua, klik tombol bertuliskan Update my profile
Klik tulisam MY HOME untuk kembali ke home
Klik tombol yang bertuliskan Get Widget
Klik kotak di samping tulisan c_color_heading_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna background heading
Klik kotak di samping tulisan c_color_heading kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan heading
Klik kotak di samping tulisan c_color_link_bg kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround link
Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna tulisan link
Klik kotak di samping tulisan c_color_link kemudian pilih warna yg di sukai pada panel warna untuk merubah warna backround bottom
Tulis ukuran lebar yang sesuai dengan sidebar blog sobat (kalau mau di tempatkan di sidebar) contoh : 160
Di samping tulisan Show Screen Names ada dua radio button, sebaiknya pilih yes, pilih No juga boleh
Di samping tulisan Image Size ada dua radio button, sebaiknya pilih Full-Size, pilih half-Size juga boleh
Disamping tulisan Rows, pilih berapa baris yang ingin muncul (terserah)
Disamping tulisan Title, tulis kata yang sobat suka. contoh : pembaca terbaru, yang mampir, tamu blog ini, atau apa saja
Di bagian bawah, ada tulisan Stat Tracking Script, copy kode script yang di berikan lalu paste pada program notepad, silahkan save terlebih dahulu
Kembali ke bagian atas
Klik tombol bertuliskan Preview and Get Code
Copy seluruh kode yang berada di bawah tulisan Recent Readers Widget Display & Code, lalu paste ke dalam notepad
Silahkan klik tulisan Logout yang berada di bagian atas untuk keluar dari account sobat
Silahkan close window situs tersebut.

Langkah selanjutnya adalah memasukan kode yang sudah di copy pada notepad tadi kedalam blog kita, karena kode ini merupakan Java Script, maka cara memasukan kodenya sama dengan memasukan kode HTML, dan ini sudah saya bahas pada postingan terdahulu. Jika sudah lupa silahkan baca lagi di sini. Selesai. 

Selamat menikmati photo-photo ganteng dan cantik dari tamu blog sobat. 

Membuat Penggalan Artikel

Membuat Penggalan Artikel

Add Comment

Membuat Penggalan Artikel

Menanggapi pertanyaan sobat tanggo yang menanyakan perihal penggalan artikel dari rubrik elektronik yang katanya selalu muncul di atas posting artikel, maka dari itu kali ini saya akan membahas cara pembuatannya, barangkali ada dari sobat-sobat lainnya sama-sama tertarik atau kalau tidak tertarik, ya sekedar pengetahuan saja juga tidak ada ruginya kan. 

Sebenarnya penggalan artikel di atas adalah bukanlah suatu tulisan hasil posting, akan tetapi hanya berupa tulisan biasa yang ujung kalimatnya di beri link untuk menuju ke artikel sebenarnya yakni artikel yang terdapat pada blog rubrik elektronik. Maksud pemasangan penggalan kalimat itu sebenarnya untuk membawa para pembaca ke blog saya yang satu lagi yaitu Rubrik Elektronik tadi, soalnya itu blog kan ada iklan google adsense nya, nah barangkali saja ada diantara para sobat sekalian yang mau berbaik hati meng klik iklan google adsense milik saya  cuma hiks.... hiks  masih dikit yang mau klik iklan aku  tapi ga apa-apa berarti belum rezekinya  (berarti ga ikhlas donk bikin tutorialnya kalo gitu / weith..... maaf bukan begitu maksud saya, jadi ga enak hati nih ). 

Untuk membuat penggalan artikel seperti diatas, langkah pertama adalah mengcopy sebagian kalimat yang mau kita link, yang kedua adalah mencatat address dari artikel tersebut, nah ujung dari kalimat tersebut kita buatkan link. Agar tidak terlalu membingungkan saya beri contoh. Misalkan address dari artikel yang mau saya pasang linknya adalah sebagai berikut : 

http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html 

Isi dari penggalan kalimatnya adalah sebagai berikut : 

Electronic Shopping 

Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? 

Maka kode yang kita buat adalah sebagai berikut : 

<span style="color:#FD8403"><font size="6">Electronic Shopping</font></span> 
<hr width="100%" align="left"> 
<br/> 
Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? <a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read more...</b></a> 
<hr width="90%" align="left"> 
<br/> 

Kode tersebut hasilnya akan seperti ini : 

Electronic Shopping
Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? ...Read more...

Biar lebih faham, sedikit saya uraikan : 

<span style="color:#FD8403"> ..... </span> --> ini adalah kode untuk merubah warna text. #FD8403 merupakan kode warna orange. 
<font size="6">.......</font>< --> ini adalah kode untuk menampilkan huruf dalam ukuran font 6 (ukuran besar) 
<hr width="100%" align="left"> --> ini adalah kode untuk membuat garis sebesar 100% dari lebarnya halaman blog yang dimulai dari tepi kiri. 
<br/> --> kode untuk membuat suatu kalimat pindah ke bawah sebesar satu line break. 

Mudah-mudahan keterangan diatas dapat di pahami. Setelah kita membuat kode seperti yang di terangkan diatas, tugas selanjutnya yaitu memasukan kode tersebut kedalam blog. Tentunya ada perbedaan cara memasukan kode antara template klasik dengan template baru. Silahkan ikuti langkah-langkahnya : 

Untuk template klasik : 

Sign in di blogger dengan id sobat
Klik menu Template
Klik menu Edit HTML
Copy seluruh kode HTML yang ada, kemudian save di komputer sobat. Ini untuk backup data apabila terjadi kesalahan dalam proses editting template
Cari kode seperti di bawah ini :

<div class="post"><a name="<$BlogItemNumber$>"></a> 
<BlogItemTitle> 

Tempatkan kode yang telah kita buat tadi persis diatas kode diatas, sehingga kodenya menjadi : 

<span style="color:#FD8403"><font size="6">Electronic Shopping</font></span> 
<hr width="100%" align="left"> 
<br/> 
Many Indonesians were still believing that products that in marketed overseas his quality was far more better than products that in marketed in the country. Around them many that were deliberate went overseas only a to shop. You some among them? <a href="http://rubrik-elektronik.blogspot.com/2007/04/electronic-shopping.html"><b>...Read more...</b></a> 
<hr width="90%" align="left"> 
<br/> 
<div class="post"><a name="<$BlogItemNumber$>"></a> 
<BlogItemTitle> 

Klik tombol Preview untuk melihat perubahan yang baru di lakukan
Apabila sudah OK, klik tombol save Template Changes
Selesai.

Catatan : cara di atas tentunya merujuk kepada template asli buatan blogger.com, bagi pengguna template bukan buatan blogger tentu akan lain, yang perlu di ingat yaitu penempatan kode penggalan artikel adalah persis diatas kode untuk Posting artikel. 

Untuk template baru : 

Sign In di blogger dengan id sobat
Klik menu Layout
Klik menu Page Elements
Klik Add a Page Element
Klik tulisan ADD TO BLOG yang berada di bawah tulisan HTML/JavaScript
Copy paste kode penggalan artikel yang telah kita buat tadi
Klik tombol SAVE CHANGES
Klik kotak element yang baru di buat, tahan kemudian pindahkan di atas kotak yang bertuliskan Blog post(di drag & drop)
Klik tulisan View Blog untuk melihat hasil dari penambahan kode tadi
Bila sudah OK, klik tombol SAVE
Selesai.

Membuat Link Untuk Download

Membuat Link Untuk Download

Add Comment

Membuat Link Untuk Download

Sobat Saiman beberapa waktu yang lalu mengajukan sebuah pertanyaan yang di tulis pada shoutbox, beliau menanyakan tentang cara memasang artikel atau file exe di blog agar bisa di download orang lain. Sepengetahuan saya yang terbatas ini, di dalam blog tidak bisa untuk menyimpan file exe kemudian bisa di download oleh orang lain, akan tetapi walaupun begitu ada cara lain yang bisa kita tempuh yakni menggunakan jasa situs-situs yang ada di internet yang menyediakan space untuk upload file yang kita punyai dan kemudian bisa di download lagi oleh orang lain. 

Secara sederhana saya jabarkan cara kerjanya, pertama tentu saja kita harus mempunyai account pada situs tersebut, kemudian setelah mempunyai account, baru kita upload data yang ingin kita simpan, lalu setelah proses upload berhasil kita akan di beri URL address file yang kita upload. Nah langkah terakhir agar pengunjung dari blog kita bisa mendownload file tersebut adalah memasang tulisan yang mempunyai link terhadap URL address file yang kita upload tadi, jadi tentu saja orang lain bisa mendownload file yang kita pasang melalui blog kita. Kira-kira begitu bos . 

Agar tidak terlalu bingung, penyedia layanan ini salah satunya adalah www.SnapDrive.net. dengan menggunakan situs ini kita bisa upload file kemudian file tersebut bisa di download lagi oleh orang lain. Untuk caranya silahkan ikuti langkah-langkah berikut ini : 

Silahkan buka http://www.SnapDrive.net
Klik tulisan Register
Isi formulir yang disediakan dengan data diri sobat
Username --> isi dengan nama yang ingin sobat gunakan, boleh apa saja yang penting mudah di ingat. contoh : Unyil
Password --> isi dengan password yang di inginkan. contoh : pakraden
Confirm password --> isi kembali dengan password yang tadi di tuliskan.contoh : pakraden
Email address --> isi dengan alamat email sobat, tentunya yang masih valid. contoh : amn_tea@yahoo.co.id
First name -->isi dengan nama depan sobat
Last name --> isi dengan nama belakang sobat
Country --> pilih nama negara dimana sobat tinggal. contoh : indonesia
Postcode --> isi dengan kode post daerah sobat
Gender --> pilih sesuai dengan jenis kelamin sobat. male(pria), female(wanita)
Date of birth --> pilih tanggal kelahiran sobat
Preferances isi dengan tulisan yang tertera di situ
Klik tombol Register
Ada konfirmasi bahwa account yang baru di buat harus di aktifkan melalui email yang kita tulis tadi
Cek email milik sobat yang tadi ditulis, periksa apakah email dari Snapdrive sudah sampai atau belum
Jika email sudah sampai, silahkan buka email tersebut. Isi di dalam email tersebut ada yang berupa link untuk aktifasi, klik saja link tersebut
Secara otomatis sobat akan dibawa kehalaman yang berisi ucapan terima kasih
Klik tombol OK
Silahkan Login dengan username serta password yang tadi di tuliskan saat register
Setelah berada di halaman account sobat, klik tulisan Upload
Klik tombol Add Files
Pilih file yang ada dikomputer sobat yang mau di upload
Klik tombol Upload. tunggu beberapa saat ketika proses upload file sedang berlangsung
Jika proses upload selesai, sobat akan diperlihatkan file yang di upload tadi. Klik tulisan details yang ada disebelahnya
Klik tulisan HTML Code
Copy kode yang di berikan lalu paste pada program notepad
Klik tulisan Logout untuk keluar dari situs tersebut
Silahkan tutup layar browser sobat

Langkah selanjutnya adalah memasukan kode tadi ke dalam blog kita, saya ambil contoh kode yang sudah di upload seperti ini : 

<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">billing internet.zip</a> 

Kode ini merupakan kode link biasa, jadi tentunya tidak mutlak. Kata billing internet.zip, bisa kita ganti dengan kata apa saja sekehendak kita. saya ambil contoh kata billing internet.zip di rubah menjadi kata download, maka kode diatas menjadi seperti di bawah ini : 

<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a> 

Bagaimana cara memasukan kode diatas? tentu saja terserah sobat mau di tempatkan dimana saja, mau di sidebar, footer, atau bahkan di dalam postingan pun bisa. Saya ambil contoh didalam postingan isinya seperti ini : 

Untuk men download program billing internet, silahkan anda klik link di bawah ini : 
<br/><br/> 
<a href="http://www.snapdrive.net/files/452250/billing%20internet.zip">download</a> 

Maka nanti di blog kita akan tampil seperti ini : 

Untuk men download program billing internet, silahkan anda klik link di bawah ini : 

download 

Contoh link yang saya buat diatas adalah link yang benar-benar nyata untuk mendownload program billing internet, silahkan sobat klik untuk membuktikannya! 

Saya kira sudah cukup pembahasan tentang cara membuat link download, mudah-mudahan dapat di mengerti. Selamat mencoba ! 

Pasang Recent Comments

Pasang Recent Comments

Add Comment

Pasang Recent Comments

Kemarin lusa saya iseng-iseng buka email, dan ternyata ada kiriman email dari salah satu sobat saya yaitu sobat Aulia. Sobat Aulia ini menanyakan perihal cara membuat Recent comment atau komentar terbaru untuk new blogger template. Sebenarnya pertanyaan itu sudah saya jawab melalui email juga, akan tetapi saya pikir-pikir ada baiknya kalau topik ini saya bahas di blog ini, barangkali ada di antara sobat sekalian yang sama-sama tertarik ingin memasang Recent comment di sidebar blog sobat. 

Untuk membuat recent comment pada new blogger template tidaklah sulit, karena saat ini sudah ada Recent comments widget creator dari hans serta hackosphere yang bekerja secara otomatis, tugas sobat hanya login di blogger.com, pilih blog yang mau dipasang trus add widget, selesai. Sangat gampang tanpa harus bersusah payah menambahkan berbagai kode kedalam template sobat. Untuk membuatnya silahkan sobat klik tombol di bawah ini :

   Rasanya kurang seru kalau artikelnya cuma begitu ya.
Ok, setelah sobat klik tombol diatas, maka nanti akan muncul gambar seperti ini : 



Agar lebih jelas, silahkan ikuti langkah-langkah berikut ini : 

Silahkan klik kotak di atas
Tulis judul Recent Comments dengan yang sobat inginkan. contoh : "komentar terbaru". atau biarkan saja juga boleh
Ganti nama beautifulbeta di samping tulisan http dengan nama blog sobat. contoh : kolom-tutorial
Tulis angka banyaknya komentar yang diinginkan di samping tulisan Number of comments
Beri tanda centang pada kotak di samping tulisan Show comment date jika komentarnya ingin ada tanggalnya
Beri tanda centang pada kotak di samping tulisan Show posttitle jika komentarnya ingin ada judul postingan
Tulis jumlah karakter hurup yang diinginkan di samping tulisan Summary size
Untuk styling silahkan pilih yang mana saja
Klik tombol bertuliskan Customize
Klik tombol bertuliskan Add Widget To My blog
Silahkan sign in dengan id sobat
Pilih blog sobat yang ingin ada Recent comments nya di samping tulisan select a blog
Klik tombol bertuliskan ADD WIDGET
Secara otomatis Recent comment widget sudah di tambahkan ke blog sobat
Pindahkan elements Recent comment yang baru dibuat pada tempat yang sobat suka
Selesai.

Bagaimana sobat, gampangkan? so pasti gampang donk  

Tapi ada satu lagi kabar gembira nih buat para sobat. Bagi sobat yang blog nya memakai bahasa indonesia tentu saja akan sedikit janggal, karena recent comment diatas memakai bahasa inggris. Apakah recent comments tersebut bisa menjadi bahasa Indonesia? jawaban nya bisa. Jika sobat tertarik silahkan ikuti langkah-langkah berikut ini : 

Sign in di blogger dengan id sobat
Klik menu Layout pada blog yang ingin di rubah
Klik menu Page Elements
Klik tulisan Edit pada element Recent Comments yang tadi dibuat
Akan muncul kode-kode seperti ini :

<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/showrecentcomments2.js">
</script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script> <script src="http://YourBlogName.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script> 

Pada kode yang tercetak biru diatas, silahkan ganti kodenya dengan kode dibawah ini : 

http://amen24.googlepages.com/showrecentcomments.js 

Klik tombol SAVE CHANGES
Selesai.

Text Berjalan di Bar menu

Text Berjalan di Bar menu

Add Comment

Text Berjalan di Bar menu

Sobat Ochim beberapa hari yang lalu mengirimkan email kepada saya yang isinya menanyakan tentang cara membuat text berjalan yang ada pada bar menu bawah seperti halnya pada blog milik saya ini. Pertanyaan tersebut sudah saya jawab langsung melalui email juga dan sekarangpun pada saat artikel ini di buat, sobat Ochim sudah berhasil membuat bar menu blognya ada tulisan berjalan. 

Seperti biasanya, jika ada pertanyaan melalui email maka jawaban dari pertanyaan tersebut akan saya posting melalui blog ini. Nah jika sobat sama-sama tertarik ingin membuat text berjalan tersebut, silahkan baca artikel ini sampai tuntas. 

Karena template blogger terbagi menjadi dua yaitu template klasik dan template baru, maka untuk cara membuat text berjalan tersebutpun akan berbeda, oleh karenanya pembahasannya pun akan saya bagi menjadi dua bagian. Akan tetapi perlu saya sampaikan, contoh yang akan saya berikan kali ini hasilnya tidak persis seperti pada blog ini yaitu text berjalan dari arah kanan kekiri, akan tetapi saya akan memberi contoh text berjalan dari kiri ke arah kanan serta ada jeda waktu antara tulisan yang petama dengan yang kedua dan juga tulisan berikutnya. 

Untuk template klasik silahkan ikuti langkah-langkah berikut ini : 

Sign in di blogger dengan id sobat
Klik menu Template
klik menu Edit HTML
Copy seluruh kode HTMl lalu paste pada program notepad kemudian save. Ini di maksudkan untuk berjaga-jaga apabila terjadi kesalahan dalam proses editting template, sobat masih mempunyai data untuk mengembalikannya ke semula
Copy kode berikut ini lalu paste di atas kode </head>

<script language='javascript'> 
message = "Tulis text pertama yang ingin muncul disini ^" + 
"Tulis text kedua disini ^" + 
"Tulis text ketiga disini ^" + 
"Tulis text keempat disini ^" 

scrollSpeed = 130 
lineDelay = 0 

// Do not change the text below // 

txt = "" 

function scrollText(pos) { 
if (message.charAt(pos) != '^') { 
txt = txt + message.charAt(pos) 
status = txt 
pauze = scrollSpeed 
} 
else { 
pauze = lineDelay 
txt = "" 
if (pos == message.length-1) pos = -1 
} 
pos++ 
setTimeout("scrollText('"+pos+"')",pauze) 
} 
scrollText(0) 
</script> 

Klik tombol Save Template Changes
Selesai.

Untuk template baru silahkan ikuti langkah-langkah berikut ini : 

Sign in di blogger dengan id sobat
Klik menu Layout
Klik menu Edit HTML
Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates
Tunggu beberapa saat sampai proses selesai
Simpan kode berikut di bawah kode </body> , kode ini letaknya berada paling bawah sebelum kode </html>

<script language='javascript'> 
message = "Tulis text pertama yang ingin muncul disini ^" + 
"Tulis text kedua disini ^" + 
"Tulis text ketiga disini ^" + 
"Tulis text keempat disini ^" 

scrollSpeed = 130 
lineDelay = 0 

// Do not change the text below // 

txt = "" 

function scrollText(pos) { 
if (message.charAt(pos) != '^') { 
txt = txt + message.charAt(pos) 
status = txt 
pauze = scrollSpeed 
} 
else { 
pauze = lineDelay 
txt = "" 
if (pos == message.length-1) pos = -1 
} 
pos++ 
setTimeout("scrollText('"+pos+"')",pauze) 
} 
scrollText(0) 
</script> 

Klik tombol SAVE TEMPLATE
Selesai

Cara membuat kategori (label)

Cara membuat kategori (label)

Add Comment

Cara membuat kategori (label)

Menanggapi beberapa pertanyaan dari para sobat yang di ajukan baik melalui shoutbox, kotak komentar dan bahkan ada yang melalui yahoo messenger menyoal tentang bagaimana cara membuat kategori dari artiekl-artikel yang telah di posting. Memang betul, tentu dengan adanya pengkategorian atau pengelompokan artikel yang telah di posting oleh pemilik blog dapat lebih mempermudah bagi para pembaca untuk memilih artikel mana yang ingin dibaca. 

Di blogger.com fasilitas ini sebenarnya sudah di sediakan, akan tetapi walaupun fasilitas tersebut telah tersedia tentu saja jika kita tidak mengetahui cara menggunakannya akan menjadi tidak berguna. Untuk membuat kategori, di blogger.com di kenal dengan istilah Label. Dengan adanya fasilitas ini kita sebagai pemilik blog hanya tinggal mengisi kotak label yang di sedikan pada setiap posting artikel, sangat simpel dan sederhana. 

Agar tidak membingungkan, silahkan sobat lihat pada akhir postingan artikel ini. Disana ada tulisan seperti ini : Labels : Blog tutorial, membuat label. Nah berarti postingan ini termasuk ke dalam dua kategori, yaitu kategori Blog tutorial dan kategori membuat label. Untuk melihat fungsi dari label ini silahkan sobat klik label yang bertuliskan Blog tutorial, maka secara otomatis seluruh postingan yang saya beri label Blog tutorial akan di tampilkan dan siap untuk di baca oleh pengunjung. 

Bagaimana cara membuat label? 

Untuk membuat sebuah kategori atau label, sobat hanya tinggal mengisi kotak kosong di samping tulisan Label untuk postingan ini : (karena sekarang blogger sudah ada yang berbahasa indonesia) yang berada di bawah kotak tempat membuat artikel. Isi kotak tersebut dengan kategori yang kira-kiracocok untuk postingan yang kita buat. Contoh : liburan musim dingin. Satu postingan tidak hanya terpatok hanya pada satu kategori saja, akan tetapi satu postingan bisa mempunyai beberapa kategori. untuk membuatnya tinggal di pisahkan dengan tanda koma ( , )saja, misal untuk postingan artikel blog ini ada yang ber label Blog tutorial, blog tools, aksesori blog, karena postingan tersebut memang cocok dan masuk kedalam ketiga kategori tersebut. 

Apakah kategori (label) bisa di tampilkan di sidebar? 

Untuk sobat para pengguna template baru, Label (kategori) bisa di tampilkan di sidebar, dan biasanya element label ini sudah tersedia ketika baru memasang template. Jika element label belum tersidia, sobat bisa membuatnya sendiri, silahkan ikuti langkah - langkah berikut ini : 

Sig in di blogger dengan id sobat

Klik menu Layout

Klik menu Elemen Halaman

Klik tulisan Tambahkan sebuah Elemen Halaman

Klik tombol yang bertuliskan TAMBAHKAN KE BLOG yang berada di bawah tulisan Label

Tulisan Labels di samping tulisan Judul bisa sobat rubah menjadi Kategori jika sobat mau merubahnya

Pilih radio button yang sobat inginkan di samping tulisan Menyortir, Alfabetik : jika kategori ingin di tampilkan sesuai dengan abjad alfabetik ( dari A --> Z ), Berdasarkan Frekuensi : jika kategori ingin ditampilkan sesuai dengan banyaknya label (kategori)

Klik tombol yang bertuliskan SIMPAN PERUBAHAN

Selesai.

Sangat mudah bukan? 

Sedikit pengumumam, karena blogger sekarang sudah ada yang berbahasa indonesia, maka mulai sekarang dalam memandu mengikuti dengan memakai yang berbahasa indonesia. 

Selamat mencoba ! 

Read More Versi baru

Read More Versi baru

Add Comment

Read More Versi baru

Bagi para sobat yang gemar menyingkat artikel dengan fasilitas Read more atau Baca selengkapnya seperti yang telah saya terangkan pada artikel terdahulu, Sekarang ada cara membuat menu Read more yang saya sebut dengan Read more versi baru. Kenapa demikian? karena menu Read more kali ini sedikit berbeda dengan yang saya terangkan pada artikel yang telah lalu. 

Fasilitas Read more kali ini di buat oleh Ramani dan Hans. Kelebihannya yaitu ketika pembaca mengklik link Read more, maka keseluruhan artikel bisa terbuka tanpa harus me-loading ulang yang terkadang membuat BT pembaca yang koneksi internetnya rada lelet ( jadi malu, padahal blog saya berat banget untuk di loading), selain itu untuk artikel yang pendek, tulisan readmore nya bisa di hapus sehingga tidak mengganggu pemandangan seperti yang di keluhkan sobat yuki beberapa waktu lalu yang merasa terganggu karena tulisan readmore selalu muncul walaupun pada artikel yang pendek. 

Tapi sayang kode-kode berikut ini hanya berlaku bagi sobat yang memakai template baru saja dan untuk yang memakai template klasik saya ucapkan Kaciaaaaaan deeeeehhh (padahal blog ini pun pake template klasik jadi ga bisa pake ini). 

Untuk menyingkat tulisan agar tidak terlalu dipenuhi dengan intermezo yang sedikit membuat bete and ngeselin, langsung saja untuk membuat read more versi baru ini silahkan ikuti langkah-langkah berikut ini : 

Sig in di blogger dengan id sobat

Klik menu layout

Klik menu Edit HTML

Klik tulisan Download Template lengkap, silahkan save dulu template sobat, ini untuk mencegah resiko apabila terjadi kesalahan dalam melakukan kesalahan dalam proses editing template

Klik kotak kecil di samping tulisan Expand Template Widget, sekali lagi jangan lupa untuk memberi tanda centang dulu yah

Tunggu beberapa saat sampai proses selesai

Copy kode berikut, lalu paste tepat di atas kode </head>

<script type='text/javascript' src='http://amen24.googlepages.com/Readmore.js' /> 

Tambahkan kode berikut pada kode template sobat, yang berwarna hitam adalah kode asli dari kode template dan yang berwarna merah adalah kode yang harus di tambahkan :

<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan saja...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
.... rest of template code .... 

Klik tombol SIMPAN TEMPLATE

Langkah selanjutnya :Klik menu Pengaturan

Klik menu Format

Copy kode berikut lalu paste pada kotak kosong yang berada di samping tulisan Template posting

<span id="fullpost"> 

</span> 

Klik tombol Simpan Setting

Selesai.

Cara posting artikel : 

Pada saat berada pada menu posting, pilih tombol yang Edit HTML jangan pilih yang tombol Compose, maka akan secara otomatis terlihat kode tadi di atas yaitu : 

<span id="fullpost"> 

</span> 

Simpan artikel yang mau di tampilkan di muka (ringkasannya) di atas kode <span id="fullpost">, dan sisa keseluruhan artikel di simpan sesudah kode <span id="fullpost"> dan sebelum kode </span>. 

Untuk artikel yang pendek, sobat tinggal menghapus kode tadi dan nanti artikel muncul tanpa ada kode [+/-] Selengkapnya... dan [+/-] Ringkasan saja.... 

Untuk contoh nyata saya sudah membuat blog yang sudah memakai sistem ini, silahkan sobat klik tulisan [+/-] Readmore... untuk membuka keseluruhan artikel, dan klik tulisan [+/-] Summary only... Untuk melihat ringkasan artikel. Silahkan sobat klik di sini !. 

Selamat mencoba ! 

Pasang Link di New Blogger Template

Pasang Link di New Blogger Template

Add Comment

Pasang Link di New Blogger Template

Menilik beberapa pertanyaan yang di ajukan beberapa sobat, rupanya masih ada yang berkeinginan lebih dalam hal membuat link walaupun sudah saya posting sampai dua artikel, terutama bagi yang memakai template baru alias new blogger template. Untuk memenuhi hasrat beliau-beliau ini, sengaja saya posting kembali mengenai membuat link dan mudah-mudahan dengan adanya postingan ini dapat menjawab beberapa keinginan yang belum terjawabkan. 

Ok, saya mulai dengan membuat link yang bisa memunculkan window baru. saya ambil contoh blog yang ingin saya link sebanyak lima buah, yaitu : 

http://rubrik-elektronik.blogspot.comhttp://www.rohman24.co.nrhttp://jaya-example.blogspot.comhttp://user-online.blogspot.comhttp://amen24.googlepages.com/koded%27treemenu

Untuk membuat kode link yang arah vertikal seperti ini : 

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a> 
<br/> 
<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a> 
<br/> 
<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a> 
<br/> 
<a href="http://user-online.blogspot.com" target="_blank">User Online status</a> 
<br/> 
<a href="http://amen24.googlepages.com/koded%27treemenu" target="_blank">Kode menu d tree</a> 

Hasilnya akan seperti ini : 

Rubrik Elektronik 
Free blog template 
Rotating banner blog 
User Online status 
Kode menu d tree 

kode <br/> yang saya tuliskan di atas merupakan kode atau tag untuk memindahkan link ataupun tulisan berpindah satu line break kebawah. Jika sobat tidak memasang kode/tag tersebut, walaupun di tulis berjauhan ke bawah hasilnya akan berdempetan kepinggir. satu kode/tag <br/> adalah satu kali link berpindah kebawah, jika sobat ingin jaraknya lebih lebar, maka tambahkan tag tersebut beberapa kali, misal <br/><br/>, atau <br/><br/><br/>, dan bila ingin lebih jauh lagi ya tambahkan yang banyak. 

Untuk membuat kode link yang arah horizontal seperti ini : 

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a> 
&nbsp; 
<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a> 
&nbsp; 
<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a> 
&nbsp; 
<a href="http://user-online.blogspot.com" target="_blank">User Online status</a> 
&nbsp; 
<a href="http://amen24.googlepages.com/koded%27treemenu" target="_blank">Kode menu d tree</a> 

Maka hasilnya akan seperti ini : 

Rubrik Elektronik   Free blog template   Rotating banner blog   User Online status   Kode menu d tree 

kode &nbsp; yang saya tuliskan di atas merupakan kode untuk memindahkan link ataupun tulisan berpindah satu spasi ke samping. Jika sobat tidak memasang kode tersebut, walaupun di tulis berjauhan ke samping, hasilnya akan tetap berdempetan. satu kode &nbsp; adalah satu kali link berpindah ke samping, jika sobat ingin jaraknya lebih lebar, maka tambahkan kode tersebut beberapa kali, misal &nbsp;&nbsp; , atau &nbsp;&nbsp;&nbsp; , dan bila ingin lebih jauh lagi ya tambahkan yang banyak. 

Mudah-mudahan agak sedikit jelas. Ok, kita lanjut. Sempat ada yang menanyakan juga tentang yang memakai variasi abjad supaya terlihat lebih menarik. Kira-kira jawabannya melalui contoh saja. 

Ambil contoh blog yang ingin di link adalah seperti berikut ini : 

http://sncepuspiritualsciencequantum.blogspot.com --> Abu Aminhttp://adry-fx.blogspot.com --> Adryy-fxhttp://belati.blogspot.com --> Belatihttp://benhardleroy.blogspot.com --> Benhard Journeyhttp://melileagroup.blogspot.com --> Capunkhttp://catatanpojok.blogspot.com --> Catatan pojok

Untuk membuat link yang arah vertikal seperti ini : 

<b>:::A:::</b>
<br/>
<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
<br/>
<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
<br/><br/>

<b>:::B:::</b>
<br/>
<a href="http://belati.blogspot.com" target="_blank">Belati</a>
<br/>
<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
<br/><br/>

<b>:::C:::</b>
<br/>
<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
<br/>
<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Maka hasilnya akan seperti ini : 

:::A::: 
Abu Amin 
Adryy-fx 

:::B::: 
Belati 
Benhard Journey 

:::C::: 
Capunk 
Catatan pojok 

Untuk membuat link yang arah horizontal seperti ini : 

<b>:::A:::</b>
&nbsp;&nbsp;
<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
&nbsp;&nbsp;
<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
&nbsp;&nbsp;

<b>:::B:::</b>
&nbsp;&nbsp;
<a href="http://belati.blogspot.com" target="_blank">Belati</a>
&nbsp;&nbsp;
<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
&nbsp;&nbsp;

<b>:::C:::</b>
&nbsp;&nbsp;
<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
&nbsp;&nbsp;
<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

maka hasilnya akan seperti ini : 

:::A:::    Abu Amin    Adryy-fx    :::B:::    Belati    Benhard Journey    :::C:::    Capunk    Catatan pojok 

Pemakaian tag <b>...</b> adalah agar karakter yang ada diantara tag tersebut menjadi tebal. Pemakaian tulisan :::A::: adalah karakter biasa yang ada di keyboard, jika ingin berbeda tinggal cari karakter lain yang menurut sobat lebih menarik. 

Ada juga variasi lain agar tampak lebih menarik yaitu menambahkan bulatan. 

contoh untuk arah vertikal : 

<b><< A >></b>
<br/>
&bull;&nbsp;<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
<br/>
&bull;&nbsp;<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
<br/><br/>

<b><< B >></b>
<br/>
&bull;&nbsp;<a href="http://belati.blogspot.com" target="_blank">Belati</a>
<br/>
&bull;&nbsp;<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
<br/><br/>

<b><< C >></b>
<br/>
&bull;&nbsp;<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
<br/>
&bull;&nbsp;<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Maka hasilnya akan seperti ini : 

<< A >> 
• Abu Amin 
• Adryy-fx 

<< B >> 
• Belati 
• Benhard Journey 

<< C >> 
• Capunk 
• Catatan pojok 

Untuk arah horizontal : 

<b><< A >></b>
&nbsp;
&bull;&nbsp;<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
&nbsp;&nbsp;
&bull;&nbsp;<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
&nbsp;&nbsp;

<b><< B >></b>
&nbsp;
&bull;&nbsp;<a href="http://belati.blogspot.com" target="_blank">Belati</a>
&nbsp;&nbsp;
&bull;&nbsp;<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
&nbsp;&nbsp;

<b><< C >></b>
&nbsp;
&bull;&nbsp;<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
&nbsp;&nbsp;
&bull;&nbsp;<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Hasilnya akan seperti ini : 

<< A >>   • Abu Amin    • Adryy-fx    << B >>   • Belati    • Benhard Journey    << C >>   • Capunk    • Catatan pojok 

Bagaimana lebih menarik bukan? 

Jika sobat mempunyai icon yang berukuran kecil dan ingin di tambahkan di depan link, ini bisa di lakukan dengan hanya mengganti kode &bull; diatas dengan kode gambar yang sobat miliki. Sebagai contoh saya memiliki gambar dalam bentuk bulatan dan mempunyai alamat gambar sebagai berikut : 

http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif 

Untuk menampilkan gambar ini tentu dengan kode untuk menampilkan gambar, yaitu : 

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif"> 

hasilnya akan seperti ini : 

 

Jika melihat dari bentuknya, sepertinya terlalu besar maka saya akan mengakalinya dengan menambahkan kode untuk lebar dan tinggi gambar, maka kodenya misalkan jadi seperti ini : 

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif" width="12" hight="12" border="0"> 

hasilnya akan seperti ini : 

 

Nah, tugas sobat hanya mengganti kode &bull; diatas dengan kode ini : 

misalkan : 

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif" width="10" hight="10" border="0">&nbsp;<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>

Maka hasilnya akan seperti ini : 

 Abu Amin 

Untuk membuat gambar serta cara upload sudah saya terangkan pada postingan terdahulu, silahkan baca saja ya. 

Ada juga pertanyaan dari mba Ati mengenai cara pembuatan link gambar yang arah horizontal, jawaban saya, mba tinggal buat link untuk gambar dan menaruh kode &nbsp; di antara gambar link tadi. misal saya punya alamat gambar butto seperti ini : 

http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif 

http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif 

Nah mba tinggal buat agar link gambar, bisa link ketulisan yang ada di blog mba atau mau link ke blog lain juga bisa, tinggal menuliskan alamat URL yang du ju oleh link tersebut, contoh jika saya ingin menghubungkan gambar button dengan blog milik saya yang lain : 

<a href="http://rubrik-elektronik.blogspot.com" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif" border="0"></a> 
&nbsp;&nbsp; 
<a href="http://www.rohman24.co.nr" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif" border="0"></a> 

Hasilnya akan seperti ini : 

     

jika ingin gambar buttonnya banyak, tinggal tambahkan saja dan jangan lupa sisipkam kode &nbsp; agar ada jarak antara buttonnya. 

Bagaimana sobat, sudah cape bacanya? pasti cape karena panjang banget, apalagi saya yang waktu ngetik postingan ini ampe lima jam depan komputer dan lebih sedihnya lagi kita belum sampe ke topik bahasan utama yakni memasukan kode link-link yang telah saya contohkan diatas ke dalam blog. 

Yoi...sobat!!! Sekarang tiba waktunya kita memasukan kode-kode link yang telah kita buat kedalam blog. Dan tentunya seperti judul artikel diatas, langkah-langkah berikut berlaku bagi yang memakai template baru alias new blogger template : 

Sig in di blogger dengan id sobatKlik menu LayoutKlik menu Elemen HalamanKlik tulisan Tambahkan sebuah Elemen HalamanKlik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/javaScript, ingat jangan menggunakan yang untuk membuat daftar linkBeri judul link yang sobat kehendaki. contoh : link temanku :Copy kode-kode link yang telah sobat buat lalu paste pada kotak yang tersediaKlik tombol SIMPAN PERUBAHANPindahkan elemen yang baru saja pada tempat yang sobat kehendakiKlik tombol SIMPANSelesai.

Akhirnya selesai juga postingan ini. Mudah-mudahan penjelasan diatas mudah untuk di mengerti. 

Pasang Feed di Blog

Pasang Feed di Blog

Add Comment

Pasang Feed di Blog

Mengutip sebuah permintaan yang saya kutif dari shoutbox yang kira-kira seperti ini : 

"aku mau tiap ada artikel baru di blog ni aku bisa tahu diblog aku" 

Permintaan tersebut melukiskan keinginan untuk selalu mengetahui apakah ada artikel baru atau tidak di blog ini dengan tidak harus bercape ria bolak-balik membuka browser. Bila ada pertanyaan apakah bisa kita memasang sesuatu di blog milik sendiri agar mengetahui perkembangan atau update terbaru dari blog yang kita senangi? jawabannya bisa, bahkan banyak cara yang bisa di tempuh. 

Agar tidak terlalu memakan space, saya akan menerangkan hanya dengan satu cara yaitu memakai RSS feed. Apa itu RSS? RSS singkatan dari Rich Site Summary atau jika dalam bahasa indonesia adalah ringkasan dari isi sebuah situs (blog juga termasuk di dalamnya). Tapi dalam postingan kali ini saya tidak akan menerangkan secara gamblang tentang RSS feed tadi, bagi yang ingin tahu lebih jauh tentang ini sobat bisa baca di wiki indonesia. 

Dari mana kita mengetahui alamat RSS feed blog milik kita? biasanya untuk alamat di blogger ditambah dengan --> atom.xml , jadi alamat feed untuk blog ini adalah : 

http://kolom-tutorial.blogspot.com/atom.xml 

Sekarang bagaimana cara memasang kode feed di blog milik kita? bagi sobat yang menggunakan template baru alias new blogger template cara nya sangat mudah. Silahkan ikuti langkah-langkah berikut ini : 

Sig in di blogger dengan id sobat

Klik menu layout

Klik menu Elemen Halaman

Klik tulisan Tambahkan sebuah Elemen Halaman

Klik tombol TAMBAHKAN KE BLOG di bawah tulisan Feed

Tulis alamat ini pada kotak di samping tulisan URL feed --> http://kolom-tutorial.blogspot.com/atom.xml

Klik tombol SIMPAN PERUBAHAN

Pindahkan elemen yang baru saja di buat pada tempat yang sobat kehendaki

Klik tombol SIMPAN

Klik tulisan Lihat Blog untuk melihat hasil penambahan elemen yang baru di buat

Selesai

Untuk melihat contoh, judul postingan terbaru pada blog ini bisa muncul di blog lain, silahkan klik di sini ! 

Ada satu lagi bagi sobat yang lebih mengutamakan penampilan, spring widget telah membuat suatu panel yang sangat unik sehingga akan bisa di jadikan sebagai aksesori blog. Contoh dari panelnya adalah seperti di bawah ini : 

Bagaimana lebih menarik bukan di banding dengan tadi yang hanya menampilakan judul artikel saja. Bila tertarik memasang ini silahkan ikuti langkah-langkahnya. 

Untuk template klasik : 

Sign in di blogger dengan id sobat

Klik menu Template

Klik menu Edit HTML

Copy kode berikut, lalu paste pada sidebar

<object allowNetworking="all" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" id="" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="180" height="318" align="middle" data="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw"><br>
<param name="movie" value="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw" /><param name="flashvars" value="param=http%3A%2F%2Ffeeds.feedburner.com%2Fblogspot%2Fblogtutorial&amp;param_style_borderColor=000000&amp;param_style_brandUrl=&amp;" /><br>
<param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="bgColor" value="0x000000" /><br>
<embed bgColor="0x000000" allowNetworking="all" allowFullScreen="true" allowScriptAccess="always" src="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw" flashvars="param=http%3A%2F%2Ffeeds.feedburner.com%2Fblogspot%2Fblogtutorial&amp;param_style_borderColor=000000&amp;param_style_brandUrl=&amp;" quality="high" wmode="transparent" width="180" height="318" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed></object><br>
<div style="font:11px/12px georgia;width:180px;margin-top:2px;"></div>

Sedikit clue, untuk bagian sidebar. jika template asli buatan blogger biasanya seperti ini : 

<!-------- Begin#sidebar----------> 
<div id="sidebar"> 

....................... 

....................... 

....................... 

</div> 
<!-------- End#sidebar----------> 

nah pasang kode tadi diantara kode diatas. 

Klik tombol Pratinjau, lihat hasilnya. jika sudah OK klik tombol Simpan Perubahan Template

Selesai.

Untuk yang template baru : 

Sign in di blogger

Klik menu layout

Klik menu Elemen Halaman

Klik tulisan Tambahkan sebuah Elemen Halaman

Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript

Copy kode berikut, lalu paste pada kotak yang ada :

<center>
<object allowNetworking="all" allowScriptAccess="always" allowFullScreen="true" type="application/x-shockwave-flash" id="" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="180" height="318" align="middle" data="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw"><br>
<param name="movie" value="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw" /><param name="flashvars" value="param=http%3A%2F%2Ffeeds.feedburner.com%2Fblogspot%2Fblogtutorial&amp;param_style_borderColor=000000&amp;param_style_brandUrl=&amp;" /><br>
<param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="bgColor" value="0x000000" /><br>
<embed bgColor="0x000000" allowNetworking="all" allowFullScreen="true" allowScriptAccess="always" src="http://downloads.thespringbox.com/web/wrapper.php?file=RSS Reader.sbw" flashvars="param=http%3A%2F%2Ffeeds.feedburner.com%2Fblogspot%2Fblogtutorial&amp;param_style_borderColor=000000&amp;param_style_brandUrl=&amp;" quality="high" wmode="transparent" width="180" height="318" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed></object><br>
<div style="font:11px/12px georgia;width:180px;margin-top:2px;"></div></center>
Klik tombol SIMPAN PERUBAHAN

Pindahkan elemen yang baru saja di buat pada tempat yang sobat kehendaki

Klik tombol SIMPAN

Klik tulisan Lihat Blog untuk melihat hasil penambahan elemen yang baru di buat

Selesai.

Untuk contoh bisa di lihat di sini ! 

Ada satu hal penting yang saya lupa, sobat harus mengatur menu setting agar bisa di menampilkan feed. Langkah-langkahnya yaitu : 

Sig in

Klik menu layout (untuk template baru), atau klik menu Template (untuk template klasik)

Klik menu Pengaturan

Klik menu Feed situs

Klik menu dropdown di samping tulisan Ijinkan Feed blog

Pilih yang Penuh

Klik tombol Simpan Setting

Selesai.

Pasang Banner di Header Blog

Pasang Banner di Header Blog

Add Comment

Pasang Banner di Header Blog

Beberapa hari yang lalu, sempat ada salah seorang sobat meninggalkan pesan Offline pada YM milik saya yang isinya kira-kira seperti ini : 

"Bagaimana caranya menyimpan banner pada header blog" 

Sebuah keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang sangat kita sukai dapat di tempatkan pada blog kebanggan kita. Jika ada pertanyaan lain "apakah kita bisa mengganti atau menambahkan banner sendiri kedalam blog?" jawabannya adalah bisa, akan tetapi tentunya kita harus sedikit bercape ria mengotak-atik kode template. 

Lagi-lagi karena template terbagi dua yaitu template klasik dan template baru, maka saya akan membagi dua bahasan tentang bagaimana caranya menambahkan atau mengganti banner yang ada di header. 

Sebelum menginjak kepada proses editting template, langkah awal tentunya sobat harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner, sobat bisa menggunakan berbagai program desain grafis yang sobat kuasai, apakah itu photoshop, coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner. 

Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan ini tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek segala), saya akan mengambil contoh template Minima yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger. 

Untuk Template Klasik 

Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah membuat banner, gambar banner terserah kepada sobat, mau gambar pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua adalah meng upload banner tersebut, bisa di upload ke blogger sendiri atau ke hosting lain. Untuk cara upload gambar sudah saya terangkan di sini dan di sini. Sebagai contoh, saya sudah upload banner di www.photbucket.com dan mempunyai alamat banner seperti ini : 

http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif 

dan gambar bannernya seperti ini ( gambarnya dalam skala kecil): 

 

Untuk cara penempatannya silahkan ikuti langkah-langkah berikut : 

Sign in di blogger

Klik menu Template

Klim menu Edit HTML

Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template

Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan

/* Header ----------------------------------------------- */
@media all {
#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif) no-repeat top center;
}
}

Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus menghapus kode berikut :

#blog-title {
margin:5px 5px 0;
padding:20px 20px .25em;
border:1px solid #eee; <-- hapus (delete)
border-width:1px 1px 0; <-- hapus (delete)
font-size:200%;
line-height:1.2em;
font-weight:normal;
color:#666;
text-transform:uppercase;
letter-spacing:.2em;
}

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee; <-- hapus (delete)
border-width:0 1px 1px; <-- hapus (delete)
max-width:700px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

Klik tombol Pratinjau untuk melihat perubahan

Jika sudah OK, klik tombol Simpan Perubahan Template

Selesai.

Untuk template baru 

Bagi sobat pengguna template baru, bisa menggunakan dua cara. 

Cara pertama : 

Sign in di blogger

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

Tambahkan kode berikut pada style sheet css sobat.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan

/* Header -----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif)no-repeat top center;
}
}

Klik tombol Pratinjau untuk melihat perubahan yang ada

Bila sudah OK, klik tombol SIMPAN TEMPLATE

Selesai.

Langkahnya diatas sama dengan yang di template klasik. 

Cara kedua : 

Sign in di blogger

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

cari kode berikut pada template sobat :

<b:section class='header' id='header' maxwidgets='1'> 

pada kode maxwidgets='1'. Rubah angka satu menjadi angka 2, sehingga kodenya menjadi seperti ini : 

<b:section class='header' id='header' maxwidgets='2'> 

Klik tombol SIMPAN TEMPLATE

Nah itu langkah pertama, langkah selanjutnya adalah : 

Klik menu Elemen Halaman

KLik tulisan Edit yang ada pada elemen Header

Tunggu beberapa saat

Pilih radio button yang ada di samping tulisan dari komputer Anda

Klik tombol Browse...

Pilih banner yang telah di buat yang ada pada komputer sobat

Tunggu beberapa saat sampai proses selesai.

Gambar banner sobat akan di tampilkan

Klik tombol SIMPAN PERUBAHAN

Selesai.

Nah silahkan sobat lihat hasilnya! 

Navigasi Dengan Css (2)

Add Comment

Navigasi Dengan Css (2)

Lagi-lagi menanggapi keinginan mba Ati dalam hal membuat menu navigasi yang berbentuk horizontal seperti yang terdapat pada header blog ini, kali ini saya akan mencoba menjawabnya dan mudah-mudahan postingan kali ini dapat memenuhi rasa ketidakpuasan terhadap jawaban saya pada postingan yang lalu. Menu navigasi yang akan saya buat adalah dengan menggunakan css agar hasil yang di dapat bersifat flexible dan tidak kaku.

Untuk membuat menu navigasi dengan css, tentunya akan berbeda hasilnya tatkala menggunakan template yang berbeda, akan tetapi agar saya bisa memberi sedikit gambaran maka template yang saya jadikan contoh adalah template minima yang di desain oleh Douglas Bowman (template asli blogger), klik tombol dibawah untuk melihat demo : 

 

Bagaimana menarik bukan? jika tertarik silahkan sobat lanjut bacanya. Sekarang silahkan sobat baca dulu seluruh artikel ini sampai tuntas, karena ada kode-kode tertentu yang harus di sesuaikan, dan nanti pada akhir artikel saya akan menerangkan tentang kode-kode yang harus di rubah. 

Untuk membuat menu tersebut silahkan sobat ikuti langkah-langkah berikut ini. 

Untuk template minima klasik : 

Sig in di blogger

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode template yang ada lalu paste pada notepad kemudian save. ini untuk backup data bila terjadi kesalahan editting

Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode </style>

/* Navigasi buat si juleha
----------------------------------------------- */
#juleha{
height:25px;
text-align: center;
}

#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000; 
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}

#juleha a:hover{
text-decoration:none;
padding:34px 5px 41px 5px;
background-color: #0326FC;
background-repeat: repeat-x;
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
} 

Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna hitam adalah kode aslidan warna merah adalah kode yang harus di tambahkan :

<div id="header">

<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>

<id="description"><$BlogDescription$>
<div id="juleha">
<a href="#" target="_blank">Link 1</a>
<a href="#" target="_blank">Link 2</a>
<a href="#" target="_blank">Link 3</a>
<a href="#" target="_blank">Link 4</a>
<a href="#" target="_blank">Link 5</a>
</div>

</div>

Klik tombol Pratinjau untuk melihat hasil perubahan

Jika sudah OK, klik tombol Simpan Perubahan Template

Selesai.

Untuk template minima baru : 

Sign in

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

Copy kode berikut lalu paste pada style sheet css sobat, atau bila bingung simpan saja di atas kode ]]></b:skin>

/* Navigasi buat si juleha
----------------------------------------------- */
#juleha{
height:25px;
text-align: center;
}

#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000; 
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}

#juleha a:hover{
text-decoration:none;
padding:34px 5px 41px 5px;
background-color: #0326FC;
background-repeat: repeat-x;
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
} 



Copy kode berikut lalu paste pada kode template seperti di bawah ini, yang berwarna hitam adalah kode asli dan warna merah adalah kode yang harus di tambahkan :

<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
<div id="juleha">
<a href="#" target="_blank">Link 1</a>
<a href="#" target="_blank">Link 2</a>
<a href="#" target="_blank">Link 3</a>
<a href="#" target="_blank">Link 4</a>
<a href="#" target="_blank">Link 5</a>
</div>

</div>
</div>
</b:if>


Klik tombol Pratinjau untuk melihat perubahan

Bila sudah OK, klik tombol SIMPAN TEMPLATE

Selesai.

Agar sobat lebih faham, saya akan sedikit memberi keterangan tentang kode-kode yang saya berikan, silahkan simak : 

juleha{
height:25px;
text-align: center;
}

#juleha hanyalah penamaan saja, bisa di ganti dengan apa saja yang penting nyambung dengan kode yang di bawahnya, mau ibro, samson, mau tukul juga boleh kalo sobat penggemarnya.

height:25px; kode ini adalah sebagai pengatur tingginya tombol navigasi, yang saya pakai adalah sebesar 25 pixel, boleh di ganti nilainya dan sesuaikan dengan keinginan sobat.

text-align: center; kode untuk memposisikan tombol-tombol berada di tengah-tengah, jika ingin mepet di sebelah kiri ganti kata Center dengan kata left, jika ingin mepet kanan, ganti dengan right.

#juleha a{
margin:0;
font-size:1.2em;
font-weight:bold;
letter-spacing:-1px;
background-color: #cccccc;
color: #000000;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;
}

#juleha a penamaan agar nyambung dengan kode diatasnya, dan kode-kode di yang di tulis bawahnya adalah yang akan muncul sebelum di sorot oleh mouse pengunjung blog.

font-size:1.2em; ukuran huruf yang di pake sebesar 1.2 . jika ingin lebih besar atau lebih kecil, silahkan ganti saja nilainya.

font-weight:bold; agar link yang di tulis hurufnya di cetak tebal, jika tidak mau ganti saja tulisan bold dengan tulisan normal.

background-color: #cccccc; kode untuk membuat warna latar belakang tombol. kode warna #cccccc adalah kode untuk abu-abu, silahkan sobat ganti dengan warna yang sobat sukai.

color: #000000; kode untuk warna huruf link, #000000 adalah kode warna hitam, silahkan ganti dengan warna yang sobat sukai.

#juleha a:hover{
text-decoration:none;
background-color: #0326FC;
background-repeat: repeat-x;
color:#A7FC03;
padding-top:2px;
padding-bottom:2px;
padding-left:4px;
padding-right:4px;

#juleha a:hover adalah kode yang di harapkan ketika mouse menyorot pada kode tombol yang di definisakan oleh kode-kode yang ada di kode #juleha a.

background-color: #0326FC; kode untuk membuat warna latar belakang tombol ketika mouse menyorot. kode warna #0326FC adalah kode untuk biru, silahkan sobat ganti dengan warna yang sobat sukai.

color:#A7FC03; kode untuk warna huruf link ketika mouse menyorot, #A7FC03 adalah kode warna hijau terang, silahkan ganti dengan warna yang sobat sukai.

<div id="juleha">
<a href="#" target="_blank">Link 1</a>
<a href="#" target="_blank">Link 2</a>
<a href="#" target="_blank">Link 3</a>
<a href="#" target="_blank">Link 4</a>
<a href="#" target="_blank">Link 5</a>
</div> 

<div id="juleha"> kode pembuka juleha. Apa-apa yang di simpan di bawah kode ini, mengacu kepada apa yang di definisikan oleh kode juleha.

<a href="#" target="_blank">Link 1</a> kode untuk membuat link.

href="#" ganti tanda pagar (#) dengan URL atau link yang ingin sobat tuliskan. contoh : jika saya ingin membuat link ke blog ini, maka tanda pagar tadi saya ganti dengan http://kolom-tutorial.blogspot.com

target"_blank" adalah kode untuk memunculkan jendela baru ketika link di klik oleh pengunjung, bila tidak ingin ada jendela baru, maka hilangkan kode ini.

Link 1 ganti tulisan ini dengan tulisan link yang sobat inginkan. contoh : untuk menuliskan blog ini saya ganti dengan kata Kolom Tutorial

jadi kira-kira link yang tadi akan menjadi seperi ini : 

<a href="http://kolom-tutorial.blogspot.com" target="_blank">Kolom Tutorial</a>

</div> adalah kode penutup buat kode si juleha.

Contoh link yang saya berikan diatas adalah sebanyak lima buah link, ini bisa sobat kurangi atau bisa juga di tambah, akan tetapi jika space yang tersedia penuh maka tombol akan secara otomatis berpindah ke bawah, oleh sebab itu sesuaikanlah dengan space yang ada. 

Langganan: Komentar (Atom)