Cara Menampilkan Kode HTML pada Posting Blog

Salam blogger untuk rekan-rekan semua, apa kabar? Kali ini saya akan membahas Cara Menampilkan Kode HTML pada Posting Blog. Alasan saya membahas judul ini karena untuk posting-posting saya tentang tips-tips blogging yang berhubungan dengan kode HTML sudah pasti akan menampilkan kode tersebut pada halaman posting. Dan untuk blogger ini jika menuliskan secara langsung kode HTMLnya maka langsung mengeksekusi kode tersebut, misalkan kode src maka akan langsung menampilkan gambarnya, bukan kode-kode HTML kita inginkan.

Continue reading

Dasar-Dasar HTML

Melanjutkan posting sebelumnya tentang Apa HTML Itu?, disini saya akan mencoba menjelaskan tentang tutorial secara singkat membuat HTML bagi pemula dengan menggunakan Notepad. Saya akan mencoba menjelaskan bagaimana blog di bangun menggunakan tag-tag HTML,. Tapi sebelum itu, ada yang perlu diketahui.
tag <>

digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.

Redesign DaniSetiyawan.blogspot.com

Setelah sekian lama saya tidak membuka dan mengupdate blog saya yang berplatfrom Blogger yaitu http://danisetiyawan.blogspot.com/. Kemarin lusa iseng2 saya membukanya dan pengennya mau mencoba menulis disana.

Baru mencari2 ide mau menulis apa, saya agak sedikit kaget melihat sidebar bagian kanan blog tersebut. Pada bagian stats saya pasang widget dari PRchecker untuk menampilan Google Page Rank blog tersebut. Disana menampilkan PR 3/10. Masak blog yang tidak pernah diupdate PRnya tiba-tiba naik dari 1 ke 3. ‚Hal itu juga dialami blog satunya lagi di http://wbcwonogiri.blogspot.com yang naik dari 0 ke 3.

Blog Motivasi Dani Setiyawan

Blog Motivasi Dani Setiyawan

Setelah tanya ke beberapa temen blogger ternyata memang mengalami hal yang serupa. Malah mereka pusing juga blog berbahasa Inggris yang sebelumnya ber-PR 3 turun drastis menjadi 1 bahkan ada juga yang menjadi 0. ‚Mungkin ada cerita lain dari temen-temen?

Alasan

Sebenernya keinginan untuk merombak template blog tersebut sudah lama. Alasan utamanya adalah karena loadnya sangat berat. ‚Template sebelumnya terdiri dari 3 kolom dengan 2 sidebar di bagian kanan. Widget blog tersebut terkesan rame dan berjubel. Apapun yang dulu membuat saya penasaran saya coba untuk memasangnya. Maklum dulu masih baru masuk dan baru belajar ngeblog jadi selalu ingin mencoba-coba hal yang baru. Apalagi memang blogger2 yang membahas tutorial blogspot sangat banyak ditemukan. ‚Bisa dibilang masih mencari jati diri…

Template Baru

Manteb ingin merombak template tersebut maka saya mulai mencari template gratisan. Maklum belum bisa membuat template sendiri. Apalagi saya lama banget tidak bermain coding di blogspot.

Alhasil saya menemukan 2 template blogspot menarik yang disediakan Dzignine. Template itu bernama‚Rƒ-phearsanta dan‚Citrus Square Burst.

Rƒ-phearsanta

Rƒ-phearsanta –> ‚ ‚ Demo | ‚ ‚ ‚Download


Citrus Square Burst

Citrus Square Burst

Citrus Square Burst –> ‚ ‚ Demo | ‚ ‚ ‚Download

Akhirnya saya mencoba template pertama yaitu‚Rƒ-phearsanta. Meskipun saya juga sangat suka dengan komposisi warna dan navbar template kedua, tapi tidak tahu kenapa saat saya coba otak-atik template pertama di blog lain malah keterusan dan langsung saya instal di blog tersebut.

Tidak banyak proses editing yang saya lakukan disana. Hanya background, alignment, font-size, shadow, dan yang terakhir customize comment author. Tentunya tampilannya masih sangat standar, masih jauh dari usability atau mungkin readibility. Untuk background saya meniru background dari deconstructioncode.blogspot.com.

Blog Motivasi | Dani Setiyawan

Blog Motivasi | Dani Setiyawan

Nah oleh karena itu saya meminta masukan dari temen-temen semua untuk perbaikan blog tersebut. Diluar konten tentunya. Terima kasih sebelumnya untuk masukan membangunnya.

Salam

Update Status Facebook via BlackBerry® Bold™ pada Komentar Blog

Komentar Blog via BlackBerry

via BlackBerry Bold

Update Status Facebook via BlackBerry‚ Bold¢€ž pada Komentar Blog

Kalau kemarin saya menulis tentang Plugin Memasang Komentar Facebook pada Blog WordPress. Setelah saya pasang plugin tersebut dan sedikit setting-setting memasukkan application ID aplikasi akhirnya sekarang berhasil tertampil dibawah posting sebelum komentar default wordpress. Jika ingin mencoba silahkan buka tiap posting blog ini dan tinggalkan komentar di kotak komentar facebook. Setelah itu lihat halaman pofil facebookmu pasti akan menampilkan isi komentarmu.

Awalnya saya memasang application ID dari aplikasi Dani Setiyawan [dot] com. Namun sekarang sudah saya ganti application ID-nya dari aplikasi BlackBerry‚ Bold¢€ž dengan tampilan seperti di bawah ini. Continue reading

Fitur Baru Blogger “Blogger Template Designer”

Halo rekan WBC semua, mohon maaf baru hadir kembali setelah lama tidak posting di blog WBC. Posting kali ini saya akan mengangkat judul Fitur Baru Blogger “Blogger Template Designer”. Apakah rekan WBC juga menggunakan Blogger sebagai platform blog rekan? Dan apakah rekan WBC yang memakai Blogger telah memasang Draft Blogger sebagai halaman defaultnya? Jika iya pasti sudah tidak asing dengan fitur-fitur terbaru dari blogger yang akan segera diluncurkan.

Ya. Draft Blogger (http://draft.blogger.com/) merupakan situs uji coba terhadap fitur-fitur baru yang akan diluncurkan ke halaman utama Blogger (http://blogger.com/). Saya sendiri sudah lama memanfaatkan draft blogger ini dan menjadikannya sebagai halaman default dasbor blogger saya. Banyak fitur terbaru disana, ternyata tidak sadar saya baru mengetahui ada fitur baru yaitu Blogger Template Designer. Saya sendiri juga belum tahu kapan fitur ini sudah muncul di halaman draft blogger saya.

Blogger Template Designer merupakan fitur baru yang sangat interaktif. Letaknya dapat kita lihat jika sudah masuk pada halaman Editing Tata Letak > Perancang Template atau Template Designer.
Apa yang kita temukan disana? Ternyata diasana ada 4 pengaturan utama yaitu : 
Templates
Disana kita bisa mengatur dan merubah template blogspot kita dengan melihat langsung tampilan perubahan yang terjadi. Hal ini sangat menguntungkan bagi kita jika ingin mencoba-coba mengganti template blog tanpa harus membuka hasilnya ke halaman baru.Terdapat penambahan sekitar 15 template yang dapat kita pilih sesuai selera kita.
Background
Kita bisa merubah background dengan ratusan pilihan warna.

Layout
Pengaturan layout ini meliputi : Pengaturan Body, Footer maupun pengaturan lebar dari halaman-halaman pada blog kita. Sehingga sangat memudahkan bagi kita yang awam tentang coding. Kita tinggal mengaturnya secara visual.
Advanced
Pengaturan ini berkaitan dengan CSS blog kita. Disini kita sangat dimudahkan dalam mengatur jenis font, warna, style dan lain-lain dari seluruh bagian template stnandar. Jika biasanya kita harus tahu pengaturan codingnya di CSS kita, disini kita hanya tinggal mengaturnya secara visual. Sungguh perbaruan fitur yang luar biasa dari Blogger.

Berikut tampilannya :

Semoga info singkat ini bermanfaat untuk Rekan WBC semua.

Membuat Spoiler (Tombol untuk Menyembunyikan Teks/HTML/Video)

MMenindaklanjuti request dari rekan WBC untuk menshare tips tentang membuat spoiler. Maka pada posting saya kali ini akan membahas tentang tips membuat spoiler ini. Apa itu spoiler? mungkin rekan WBC banyak yang sudah tahu. Spoiler di blog adalah sebuah tombol yang fungsinya menyembunyikan teks atau gambar di bawahnya. Contohnya adalah tombol Rekan WBC pada sidebar blog WBC. Saat diklik tombol tampilkan maka dibawahnya akan muncul kotak yang sebelumnya tersembunyi berisi textarea link-link dari rekan-rekan WBC.
Berminat ingin membuatnya? Berikut tipsnya.

Untuk Blogspot
Seperti biasa login acoount blogger Anda. kemudian masuk Tata Letak > Elemen Laman.
Pada sidebar pilih Tambah Gadget > HTML/Java Script.
Masukkan kode dibawah ini :
<div><div style=”margin: 5px;”>
<div class=”smallfont” style=”margin-bottom: 2px;”><i><span style=”font-weight: bold;”>Judul</span></i><input value=”Show” style=”margin: 0px; padding: 0px; width: 60px; font-size: 10px;” onclick=”if (this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display != ”) { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ”; this.innerText = ”; this.value = ‘Hide‘; } else { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ‘none’; this.innerText = ”; this.value = ‘Show‘; }” type=”button”/>
</div>
<div class=”alt2″ style=”border: 1px inset ; margin: 0px; padding: 6px;”>
<div style=”display: none;”>
isi spoiler
</div></div></div></div>

Hasilnya :

Judul

isi spoiler

Nah tugas rekan WBC mengedit sesuai kebutuhan teks yang saya cetak berwarna biru.Cukup mudah bukan? Jika ada kesulitan silahkan meninggalkan komentar.

Untuk WordPress

Bagi rekan WBC yang ingin memasang spoiler di blog berplatform wordpress, kodenya adalah seperti di bawah ini :
<div>
<input type=”button” value=”Tampilkan” style=”margin:0px;padding:0px;” onClick=”if (this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display != ”) { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ”;this.innerText = ”; this.value = ‘Sembunyikan‘; } else { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ‘none’; this.innerText = ”; this.value = ‘Tampilkan‘; }”>
</div>
<div style=”background: #CCCCCC; margin: 10px auto;
border: 1px solid #000;
padding: 5px;”>
<div style=”display: none;”>
teks/HTML gambar/embed video yang disembunyikan
</div>
</div>

Hasilnya :

teks/HTML gambar/embed video yang disembunyikan

Ganti teks yang bercetak biru sesuai kebutuhan rekan WBC. Silahkan berkreasi sendiri apa saja yang ingin rekan WBC isi dalam sisi spoiler itu, bisa Text, HTML, Image atau Video.

Sekedar narsis, dibawah ini adalah contoh spoiler yang pada isi spoiler saya beri image foto saya beserta link menuju blog saya,hehe.. Kodenya adalah :
<a href=”http://www.danisetiyawan.blogspot.com/” taget=”_blank”><img src=”http://img708.imageshack.us/img708/7436/dhnzmgs116.jpg” border=”0″ alt=”Blog Motivasi | Dani Setiyawan”></a>
Hasilnya seperti ini :

Cah Ngganteng Dewe >

Blog Motivasi | Dani Setiyawan

Semoga bermanfaat n enjoy blogging.