Cara Menambahkan Efek Hover Warna Latar Gradasi Pada List Item Entri Populer Blog

Sobat Blogger, teknik kustomisasi template untuk mempercantik desain tampilan halaman blog yang saya uraikan dalam artikel ini bisa jadi merupakan teknik yang cukup ringan bila dibandingkan dengan beberapa teknik dalam uraian artikel sebelumnya (seperti misalnya: cara membuat tab menu dengan ujung sudut melengkung, cara mengubah desain tampilan halaman beranda blog, dan atau bahkan teknik yang digunakan untuk mengubah tema tampilan halaman versi seluler, serta berbagai teknik dalam uraian artikel sebelumnya), karena teknik yang diuraikan dalam artikel ini hanyalah sebatas memberikan efek khusus terhadap list item untuk widget yang terdapat dalam sidebar blog.

Baca selengkapnya »

Membuat Halaman Arsip tanpa JavaScript

Setiap blogger pasti tahu, apa yang dimaksud dengan halaman arsip? Ya, betul sekali. Halaman itu terdiri dari kumpulan posting yang tersusun secara teratur, baik berdasarkan tahun, bulan, tanggal terbit, kategori, label, atau berisi keseluruhan item — yang telah disebutkan sebelumnya — dan sebagainya. Banyak sekali metode yang dapat dimanfaatkan untuk membuat halaman arsip, antara lain: menggunakan JavaScript & widget.

Trik blogger kali ini “Optimasi Blog” akan berbagi tentang membuat halaman arsip dengan menggunakan widget arsip dan widget label pada Blogger™. Ini didapat dari hasil blog-walking ke “Simple Blogger Tutorial” dalam posting Create a Separate Label or Archive Page in Blogger yang ditulis oleh Raju.

Petama, buatlah terlebih dulu sebuah halaman statis yang akan menampilkan arsip — contoh: Arsip — sehingga akan terbentuk sebuah permalink baru, seperti: h**p://namablog.blogspot.com/p/arsip.html. Isilah halaman itu dengan kalimat pembuka atau lainnya.

Kedua, masuk ke akun Blogger.com & pergi ke “Edit HTML”. Backup terlebih dulu template sebelum melakukan trik blogger ini. Perhatikan pula struktur pengkodean template, karena sangat dimungkinkan akan berbeda. Cari kode berikut, kemudian tambahkan kode yang berwarna merah di bawahnya.

  <b:section class='main' id='main' maxwidgets='1' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
  <b:section class='main' id='main1' maxwidgets='2' showaddelement='yes'/>

Jangan lupa disimpan & sekarang Anda telah memiliki elemen baru di bawah “Posting Blog”, dengan selector class='main' dan id='main1'. Elemen itu dapat Anda tambahkan maksimal 2 gadget — maxwidgets='2' — pada dashboard Blogger™ dalam menu “Tata Letak” (Layout).

Ketiga, tambahkan widget label dan widget arsip dengan mengklik add a gadget, sehingga tidak ada lagi opsi add a gadget pada elemen di bawah “Posting Blog”. Oleh karena kedua widget tersebut akan ditampilkan hanya pada halaman tertentu, yakni h**p://namablog.blogspot.com/p/arsip.html, maka diperlukan kustomisasi dengan memanfaatkan conditional tags.

Keempat, kembali ke “Edit HTML” & centang Expand Widget Templates. Cari kode berikut — dalam widget arsip maupun widget label — kemudian sisipkan dengan kode yang berwarna hijau.

<b:widget … >
<b:includable id='main'>
<b:if cond='data:blog.url == "h**p://namablog.blogspot.com/p/arsip.html"'> <!-- sesuaikan alamat dengan halaman yang dibuat untuk arsip -->
  …code widgets…
</b:if>
</b:includable>
</b:widget>

Conditional tags di atas berarti bahwa, widget akan ditampilkan hanya pada halaman dengan alamat h**p://namablog.blogspot.com/p/arsip.html, selain URL tersebut maka widget tidak akan ditampilkan.

Kelima, apabila menuju halaman lain — selain h**p://namablog.blogspot.com/p/arsip.html — masih terlihat janggal. Yah, mungkin tersisa ruang kosong karena pengaruh pengkodean elemen, seperti margin atau padding. Coba tambahkan CSS berikut di bawah ]]></b:skin>.

<b:if cond='data:blog.url != "h**p://namablog.blogspot.com/p/arsip.html"'>
<style>
#main1 {
  display: none;
}
</style>
</b:if>

CSS (Cascading Style Sheets) di atas dimaksudkan, jika URL bukan h**p://namablog.blogspot.com/p/arsip.html, maka selector id='main' — #main1 — disembunyikan.

Untuk demontrasi trik blogger di atas, silakan klik taut arsip “Optimasi Blog”. Apabila terdapat kekeliruan dalam deskripsi tentang membuat halaman arsip tanpa javascript, mari kita perbaiki bersama melalui kolom komentar. Begitu pula jika terdapat pertanyaan atau kritik dapat kita diskusikan pada media yang sama pula.

Cara Membuat Pull Down Menu Dengan Ujung Sudut Melengkung Atau Rounded Corners Tab

Sobat Blogger, berikut ini adalah versi kedua dari artikel sebelumnya yang berjudul ‘Cara Membuat Tab Menu Horizontal Seperti Navbar Di Atas Header Halaman Blog’. Dalam artikel ini diuraikan secara lebih rinci mengenai teknik serta script atau rangkaian kode yang digunakan untuk membuat bilah navigasi dengan beberapa sub menu di dalamnya. Selain itu rangkaian kode yang digunakan dalam teknik ini juga merupakan pembenahan serta pembaruan atas rangkaian kode yang digunakan dalam teknik sebelumnya, sehingga bilah navigasi maupun sub menu yang dihasilkan pun menjadi tampak lebih rapi dan terkesan lebih profesional.

Baca selengkapnya »

Etika Berkomentar dalam Posting Blog

Ketika Anda mengunjungi sebuah blog, bukan tidak mungkin menemui satu atau lebih posting yang menarik perhatian. Namun Anda tidak memiliki kapasitas untuk meninggalkan komentar relevan, sebaiknya jangan dipaksakan untuk berkomentar. Oleh karena komentar yang Anda tinggalkan boleh jadi tidak merupakan sebuah asupan yang berarti bagi pengelola blog atau penulis posting atau pengunjung lain, bahkan bagi posting itu sendiri. Sehingga tidak jarang dianggap sebagai — eksplisit — komentar spam.

Hal ini pernah terjadi pada penulis, dimana suatu saat pernah memberikan komentar dengan memasukkan nama sebenarnya & email yang original, namun memberikan tautan (URL) pada posting tertentu dalam blog penulis. Meskipun secara de facto itu sah, tetapi secara etika mungkin keliru. Bagaimana etika yang benar? Cobalah selalu memperhatikan tanda-tanda di sekeliling formulir komentar.

Nama

Apakah Anda memiliki identitas? Ya, tentu. Nama saya “Aris Asmara” — bukan “Botol Kecap No.1” — sehingga ketika seseorang memanggil akan lebih memiliki makna, Hei, Aris Asmara. Bandingkan dengan panggilan berikut, Hei, Botol Kecap. Jadi, isi kolom nama dengan nama & bukan produk atau lainnya.

Email

Dimana rumah Anda? Jika seseorang — sesuatu — ingin mengenal Anda dan dapat mem-validitasi tempat tinggal Anda, maka suatu saat dia akan mudah menghubungi Anda kembali. Rumah merupakan tempat tinggal, sudah barang tentu berisi validitas informasi tentang profil Anda, termasuk nama serta foto. Sayangnya, sistem komentar Blogger™ tidak/belum memasukkan input ini sebagai alternatif, kecuali jika blog hanya dikomentari oleh pengguna yang teregistrasi pada akun Google Mail.

URL

Apa brand Anda? “Fortuner SUV Terbaik” atau “Optimasi Blog”. “Fortuner SUV Terbaik” merupakan hasil produk & “Optimasi Blog” adalah brand. Sebuah etika apabila Anda memasukkan alamat blog, bukan alamat posting (post permalink) pada bilah URL (Uniform Resource Locator).

Komentar

Bagaimana komentar Anda tentang isi posting? Komentar bukan merupakan sebuah reaksi praktis atau pemungutan suara, seperti Posting yang menarik, Terima kasih infonya, Boleh dicoba postingannya, dan sebagainya. Komentar merupakan ide yang muncul karena keingintahuan akan kebenaran dari isi posting, mungkin berisi pertanyaan, tanggapan, masukan, atau sanggahan.

Pertanyaan dalam komentar pun bukan hanya sambil lalu, namun memerlukan tindak lanjut. Jika pertanyaan Anda berkategori sambil lalu, sebaiknya tidak perlu berkomentar. Pengelola blog, penulis, dan pengunjung lain akan mengetahui bahwa Anda hanya menjaring trafik.

Tanggapan dapat berarti memberikan balasan pada suatu komentar. Manfaatkan fasilitas ini jika komentar Anda memiliki keterkaitan dengan induk komentar lain. Jangan membuat topik komentar baru, apabila isi dari komentar tersebut sudah memiliki topik yang sama.

Masukan memiliki arti yang mendalam pada komentar. Ia bisa memberikan perbaikan & pembaharuan, bahkan kesempurnaan bagi posting. Apalagi jika disertai dengan referensi yang jelas dan tepat.

Sanggahan dapat timbul, jika isi posting kurang/tidak sesuai dengan pendapat atau opini komentator. Sama halnya dengan “masukan”, sanggahan yang menjurus pada perbedaan nyata (kontradiksi) seharusnya disertai pula dengan referensi yang jelas dan akurat. Bagaimana jika sanggahan tersebut tidak beralasan sama sekali? Berarti komentator hanya menginginkan trafik dengan cara negatif atau komentar sanggahan yang disampaikan hanya akal-akalan agar pengelola blog, penulis, maupun pengunjung lain tertarik untuk mengunjungi situs web atau blog-nya.

Simpulan

Penulis rasa etika berkomentar bukan merupakan sebuah informasi baru yang patut dijadikan berita hangat, namun lebih kepada kesadaran pribadi akan makna komentar itu sendiri. Berikut beberapa poin yang dapat kita ambil dari uraian posting etika berkomentar di atas.

• Anda berkomentar untuk siapa? Anda pribadi karena rasa keingintahuan atau bagi khalayak blogger atau trafik dan backlink untuk kepentingan situs web atau blog Anda. Jika Anda mementingkan trafik dan backlink, sebaiknya jangan berkomentar. Oleh karena isi komentar belum tentu akan berhubungan dengan posting yang Anda komentari. Sebaliknya jika Anda berkomentar karena rasa keingintahuan atau bagi khalayak blogger, berarti Anda telah memberi sebuah arti pada posting & komentar itu sendiri. Secara tidak langsung, trafik dan backlink akan menyusul akibat komentar Anda yang penuh arti.
• Perhatikan tanda-tanda yang dapat menjadi acuan dalam memberikan komentar — tanda baca, tag-tag HTML yang diperbolehkan, dan sebagainya — agar mendukung ‘keterbacaan’.
• Masukkan nama jelas Anda — bukan yang lain —, email (jika dibutuhkan), URL blog dan bukan URL posting Anda. Apabila hal itu tidak terpenuhi, sangat dimungkinkan pengelola blog, penulis, atau pengunjung lain memberikan ‘cap’ sebagai komentar spam.
• Terakhir untuk meluruskan beberapa pemberitaan yang keliru — padahal update telah dilakukan pada beberapa posting sebelumnya — bahwa Optimasi Blog tidak dofollow. Ketika sebuah blog menerapkan sistem komentar bersarang (threaded comments) pada Blogger™, mungkin dapat dipastikan blog tersebut nofollow.

Jadikan diri kita dan situs web atau blog yang kita kelola dapat memberikan makna bagi orang lain. Silakan Anda berkomentar atau tidak perlu berkomentar sama sekali!

Tata Cara Menghubungi Admin ELTELU -:[SEMAR BINGUNG’S WEBLOG]:-

Pengunjung dan atau pembaca yang terhormat, ELTELU -:[SEMAR BINGUNG’S WEBLOG]:- sangat menghargai partisipasi aktif Anda dalam memberikan masukan, saran, dan atau kritik membangun, agar nantinya dapat menjadikan ELTELU -:[SEMAR BINGUNG’S WEBLOG]:- lebih baik dalam menyampaikan informasi yang diuraikan dalam bentuk tutorial dan atau sejenisnya pada setiap artikel yang diterbitkan.

Baca selengkapnya »

Pentingnya Pilihan Penggunaan Warna Yang Tepat Untuk Desain Template Dan Tampilan Blog Terbaik

Sampai kini, entah sudah berapa kali saya melakukan perubahan pada desain tampilan halaman serta tata letak widget yang terapat di blog ini. Perombakan atau pembenahan yang saya lakukan tersebut sebenarnya semata-mata adalah untuk mendapatkan desain tampilan halaman blog terbaik, karena berdasarkan survei kecil-kecilan yang saya lakukan ternyata desain atau tampilan halaman merupakan salah satu faktor yang sangat berpengaruh terhadap sedikit banyaknya jumlah kunjungan dan atau penayangan sebuah blog.

Baca selengkapnya »

Online Tool yang Membantu dalam Blogging

Di samping mengandalkan kemampuan & keterampilan sendiri — diperoleh melalui belajar maupun pengalaman — tidak terlepas pula dengan kebutuhan alat bantu untuk mendukung blogging. Dari sekian banyak situs web yang membantu aktivitas blogging, terdapat beberapa yang menyediakan tool secara online. Nah, berikut sedikit deskripsi dari beberapa online tool yang membantu “Optimasi Blog” dalam menghasilkan karya-karyanya.

CSS with vertical rhythm

Tool ini akan membantu untuk menghitung CSS agar memiliki ritme vertikal yang konsisten. Perhitungan menggunakan pixels (px) dan M (em). Cara penggunaannya tidak sulit, kita tinggal memasukkan jenis font, ukuran font dasar, besar line-height, & ukuran font yang ditargetkan dalam skala pixels. Berikut hasil uji coba vertical rhythm berdasarkan font yang berukuran 12px dan 18px, sedangkan font yang saya gunakan adalah Georgia, Times, "Times New Roman", serif berukuran .9375em atau 15px dan line-height: 1.6em; atau 24px. (red: baca kembali posting yang berjudul Sentuhan Magis dalam Blog).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod, mi ullamcorper ornare aliquet, erat dolor euismod libero, sed bibendum quam nunc quis quam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus euismod, mi ullamcorper ornare aliquet, erat dolor euismod libero.

CSS Font Stack

Penggunaan sangat mudah, kita hanya perlu mengklik “Copy to Clipboard”, kemudian tempel pada kertas aplikasi seperti notepad dan sejenisnya. Tersedia pula beberapa pilihan jenis font yang akan/ingin kita gunakan dalam membangun sebuah situs web atau blog.

font-family: Georgia, Times, "Times New Roman", serif;

Variable Grid System

Sistem variabel grid adalah cara cepat untuk menghasilkan beberapa jaringan (kotak) CSS yang mendasari pembuatan situs web atau blog. File yang dihasilkan CSS didasarkan pada “Sistem Grid 960”. Salah satu manfaat dalam penggunaan tool ini adalah pengguna dapat dengan mudah mengatur responsif desain situs web atau blog-nya. Pun kita dapat melakukan berbagai kustomisasi lebar kolom, jumlah kolom, jarak antar kolom, & lebar konten.

The Responsinator

Bagaimana cara kita agar mengetahui desain situs web atau blog responsif? Tool ini dapat menjadi salah satu alternatif untuk mengamati tampilan situs web atau blog pada beberapa layar yang berbeda. Cukup dengan memasukkan alamat situs atau blog, kemudian klik “Go” atau eksekusi dengan menekan tombol Enter pada papan ketik.

HTML Entities

Sungguh sesuatu hal yang menyenangkan, ketika kita membuat pengkodean atau menulis posting/artikel dengan menggunakan entitas HTML tertentu. Ingat! Lakukan pembaharuan terhadap peramban kesayangan Anda.

Awas! Jangan menggunakan tips ini, karena mengandung ☢. Anda akan terbius atau ketagihan memakainya, apalagi jika berbintang ♈. “Khusus ♂”, harap menggunakan pengaman. Menurut penelitian, ❷ di antara ➉ peristiwa terjadi disebabkan kelalaian. Ketika ✍ perhatikan selalu tanda baca agar posting Anda tidak ter-✄ oleh pindaian para pengunjung — mendengar ♫ akan menimbulkan perasaan ♡ — gunakan ✉ atau ✆, sehingga tiap ✗ dapat diminimalisasi. Atau blog Anda akan di-asing-kan ke planet ♇.

HTML5 Outliner

Online tool ini bermanfaat untuk mengetahui format outline heading pada struktur situs web atau blog dalam HTML5, seperti h1, h2,… ,h6. Alat ini dapat melakukan pengecekan terhadap format outliner, baik melalui berkas file HTML, URL (Uniform Resource Locator), & input kode.

Lipsum Generator

Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf.

Online YUI Compressor

Untuk proses pemampatan sumber kode, baik CSS maupun JavaScript, tool ini dapat diandalkan. Kita dapat memasukkan text, URL, atau file, kemudian klik “Compress” untuk melihat hasilnya. Terdapat pula beberapa opsi pemampatan yang dapat kita pergunakan, sebelum memperoleh hasil yang diinginkan. Lebih detail tentang online tool ini, silakan baca posting berjudul Kompres Kode CSS dan Javascript.

Smush.it™

Smush.it menggunakan teknik optimasi khusus untuk format gambar yang tidak perlu untuk menghapus byte dari file gambar. Ini adalah perangkat “lossless”, yang berarti mengoptimalkan gambar tanpa mengubah tampilan atau kualitas visual. Setelah Smush.it berjalan pada halaman web, akan ada laporan berapa banyak byte akan diselamatkan dengan mengoptimalkan gambar halaman dan menyediakan file zip download dengan file gambar diminimalkan.

robots.txt Checker

Berkas robots.txt (sering keliru disebut robot.txt, dalam bentuk tunggal) yang dibuat oleh webmaster untuk menandai (melarang) file & direktori dari sebuah situs web untuk diakses oleh spider mesin pencari (dan jenis-jenis robot lain). Pengecek robots.txt ini merupakan "validator" yang menganalisis sintaks dari sebuah file robots.txt untuk melihat apakah format berlaku sebagaimana ditetapkan oleh A Standard for Robot Exclusion (silakan baca dokumentasi & tutorial untuk mempelajari dasar-dasar) atau jika mengandung kesalahan dalam pengecekan.

jsFiddle

Online tool ini dapat membantu jika kita ingin membuat suatu pengkodean tertentu, dimana disediakan empat kotak dengan input kode tertentu pula, seperti HTML, CSS, JavaScript, dan Result (hasil). Pun terdapat berbagai opsi pada tab di sebelah kiri layar.

The Readability Test Tool

Alat Uji Keterbacaan menyediakan cara cepat dan mudah untuk menguji pembacaan pekerjaan kita. Ini adalah perangkat lunak pembacaan yang paling fleksibel untuk menilai formula keterbacaan. Kita dapat menguji semua, atau bagian dari suatu halaman web, atau cukup mengetik teks. Taut langsung dari halaman situs web atau blog, kemudian online tool ini akan menghitung hasil untuk halaman tersebut.

GTmetrix

Ketika kita ingin mengecek performa situs web atau blog, perangkat GTmetrix merupakan alternatif yang dapat diandalkan. Selain menilai performa, ia juga memberikan deskripsi tentang cara mengoptimalkan serta beberapa taut rekomendasi yang dapat dimanfaatkan oleh pengguna.

Di antara sekian online tool yang dapat membantu dalam aktivitas blogging di atas, mungkin masih banyak alat atau perangkat lain yang tidak dapat penulis sebutkan. Tinggal bagaimana kita memanfaatkannya, sehingga mampu ‘mendongkrak’ performa situs web atau blog yang kita kelola agar lebih efektif & efesien, berguna, serta memberikan kenyamanan di hati para pembacanya.
So, bagaimana dengan Anda?

Memodifikasi Tanggal Posting (date-header)

Pernah melihat hal yang menarik pada tanggal posting (date-header)? Atau kebanyakan tidak melihat, oleh karena tidak jarang elemen ini dihilangkan? Date Header merupakan kepala (judul) tanggal yang terdiri dari satu atau lebih posting, dimana mereka diterbitkan pada tanggal yang sama. Seandainya hari ini — 21 Oktober 2012 — Anda dapat menerbitkan sebanyak dua posting, maka kedua posting tersebut akan memiliki kepala tanggal 21 Oktober 2012.

Sebenarnya date header pada Blogger™ dapat ditampilkan dengan menarik, seperti sebagai icon kalender atau bentuk-bentuk lain. Mungkin disebabkan kekurang-tahuan kita, sehingga tidak jarang menghilangkan elemen ini. Berikut merupakan gambar pengaturan tanggal posting, baik melalui language and formating atau tata letak (layout) posting blog & kode elemen-nya.

Pengaturan tanggal posting (date-header) melalui language and formating.

Pengaturan tanggal posting (date-header) melalui tata letak (layout) posting blog.

<b:if cond='data:post.isDateStart'>
  &lt;div class=&quot;date-outer&quot;&gt;
</b:if>
<b:if cond='data:post.dateHeader'>
  <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:if cond='data:post.isDateStart'>
  &lt;div class=&quot;date-posts&quot;&gt;
</b:if>

Backup terlebih dulu template sebelum melakukan trik blogger berikut ini. Kemudian akses edit HTML melalui menu Template pada dashboard Blogger™, klik tombol proses & centang “Expand Widget Templates”. Tampilan tanggal posting dapat dibuat sedikit menarik dengan menambahkan script berikut di atas </head>, sehingga nantinya format tanggal mudah untuk dikustomisasi.

<script type='text/javascript'>
//<![CDATA[
function replace_date(b){var a=b.split(' ');month="<span class='month'>"+a[0].slice(0,3)+"</span>";day=" <span class='day'>"+a[1].slice(0,2)+"</span><span class='sep'>, </span>";year="<span class='year'>"+a[2]+"</span>";document.write(month+day+year)};
//]]>
</script>

Cari markah date-header seperti pada kode yang diberi warna merah di atas, kemudian ganti dengan kode berikut. Oleh karena beberapa pengaturan template pada blog penulis, maka <h2> diganti dengan <div>.

<div class='date-header'><span><script> replace_date(&#39;<data:post.dateHeader/>&#39;);</script></span></div>

Format tanggal posting harus sesuai seperti gambar (figure) di atas, letaknya — sampai posting ini diterbitkan — berada pada urutan ketiga dari bawah (third from bottom). Contoh: “Oktober 21, 2012” atau “October 21, 2012“. Selanjutnya, menambahkan CSS berikut di atas ]]></b:skin>.

.date-header {
  background: #666;
  color: #fff;
  float: left;
  position: relative;
  text-align: center;
  width: 44px; /* perhatikan border-width left & right */
}
.date-header:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -20px; /* perhatikan border-width top & bottom */
  left: 0;
  border-color: #666 #666 #fff #666; /* nilai kode yang berwarna biru sama dengan nilai pada warna latar */
  border-style: solid;
  border-width: 8px 22px 12px; /* top=8px, bottom=12px, left & right masing-masing=22px */
}
.date-header .month {
  border-bottom: 1px solid #fff;
  display: block;
}
<!-- Menghilangkan koma & tahun -->
.date-header .sep, 
.date-header .year {
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
}
<!-- Memberikan ruang disebelah kiri untuk ditempati date-header -->
.post {
  padding-left: 58px;
}

Terkadang .post dapat pula diganti dengan .post-outer — sedangkan atribut padding dapat pula diganti dengan margin — tergantung pengkodean dalam tiap-tiap template. Hasilnya dapat dilihat pada tanggal posting di blog ini atau dapat diamati melalui gambar berikut.

Sekarang tampilan tanggal posting lebih menarik bukan? Pun tidak perlu lagi meng-unggah gambar & sebagainya. Selamat mencoba trik blogger “memodifikasi tanggal posting (date-header)”. :)

Cara Menjadikan Setiap Kalimat Atau Paragraf Dalam Artikel Otomatis Rata Kiri Dan Kanan

Sobat Blogger, seperti yang kita ketahui bersama bahwasanya apabila menyusun artikel dengan menuliskannya menggunakan editor Blogger, maka setelan perataan default yang dipakai pada tiap kalimat atau paragraf dalam artikel tersebut adalah teks rata kiri. Sehingga dengan sistem perataan teks rata kiri seperti ini, maka kita harus mengubah setelan perataan (alignment) dari setiap paragraf agar tampak lebih rapi (sebagai contoh misalnya adalah dengan menggunakan sistem perataan justify atau rata kiri dan kanan) sebelum artikel tersebut diterbitkan.

Baca selengkapnya »

Cara Memasang Gambar Logo Atau Ikon Blog Di Sisi Bagian Kanan Header

Sobat Blogger, jika sebelumnya Anda pernah mengunjungi blog ini, maka dapat Anda lihat bahwa sekarang terdapat 1 (satu) buah widget baru yang terpasang di area header. Widget yang dimaksud adalah sebuah logo yang terletak di sisi bagian kanan header, seperti yang ditunjukkan dengan tanda anak panah pada gambar di atas. Perlu diketahui bahwasanya gambar atau logo tersebut bukanlah sekedar gambar yang hanya dipakai sebagai hiasan blog, namun logo yang terdapat pada sisi bagian kanan header ini juga merupakan sebuah link atau tautan bergambar yang merujuk pada homepage, sehingga apabila diklik maka secara otomatis terbukalah halaman beranda. Dan perlu diketahui pula bahwa logo tersebut juga merupakan gambar yang dipakai sebagai favicon untuk blog ini.

Baca selengkapnya »

Cara Menjadikan Status Message Pada Blog Memiliki Desain Tampilan Yang Berbeda

Sobat Blogger, bila dalam posting sebelumnya dengan judul “Cara Mengubah Desain Tampilan Warna Garis Dan Background Status Message Blog” telah saya uraikan cara yang digunakan dalam melakukan modifikasi tampilan status message, maka uraian pembahasan dalam artikel ini masih terkait dengan hal tersebut, yaitu status message pada sebuah blog. Jadi begini, perlu diketahui bahwasanya pesan yang ditampilkan dalam status message adalah terdiri dari 2 (dua) macam pesan. Pesan yang pertama ditampilkan ketika sebuah label artikel diklik, sedangkan pesan yang kedua ditampilkan ketika halaman yang dibuka tidak ditemukan (error page).

Baca selengkapnya »

Cara Menyembunyikan Widget Dari Halaman Dengan Link Atau Tautan Yang Tidak Ditemukan

Setelah melakukan penelusuran tentang cara menampilkan dan atau menyembunyikan widget, saya mendapati bahwa ternyata banyak sekali terbitan artikel yang telah memberikan uraian mengenai hal tersebut. Namun dari sekian banyak artikel yang ada, saya berkesimpulan bahwa terdapat satu hal yang 'terlupakan' mengenai cara menyembunyikan widget pada sebuah blog. Saya berkesimpulan demikian karena dari masing-masing artikel tersebut rata-rata menguraikan hal yang serupa, dalam hal ini adalah memberikan tutorial mengenai cara menampilkan atau menyembunyikan widget pada halaman beranda, konten, atau posting tertentu saja.

Baca selengkapnya »

Cara Mengganti Isi Pesan Yang Ditampilkan Pada Status Message Ketika Sebuah Label Artikel Diklik

Sobat Blogger, setelah sebelumnya saya menerbitkan artikel dengan judul “Cara Mengubah Desain Tampilan Warna Garis Dan Background Status Message Blog” yang menguraikan sebuah teknik untuk ‘mempercantik’ desain tampilan status message,  ternyata ada respon sangat positif dari seorang sahabat yang disampaikan dalam artikel tersebut. Ia menyampaikan bahwa akan menjadi lebih keren lagi jika kustomisasi yang dilakukan pada status message tidak hanya sebatas modifikasi tampilan dengan menambahkan kode CSS tertentu ke dalam template, namun dengan mengubah kata atau kalimat yang ditampilkan dalam pesan status tersebut. Jadi maksudnya adalah yang dimunculkan dalam status message bukan lagi kalimat ‘Showing posts with label Themes. Show all posts’, akan tetapi diganti sesuai dengan kata-kata atau kalimat olahan kita sendiri.

Baca selengkapnya »

Mendaftar dan Mengalihkan Feed via FeedBurner

Ketika kita sedang blog walking atau mengunjungi blog narablog lain, tidak jarang kita menemukan taut langgan (subscribe). Bentuk taut berlangganan pun bermacam-macam, seperti membuat form belangganan melalui email atau hanya menggunakan teks jangkar. Feed memudahkan pengunjung untuk mendapatkan pembaharuan terbaru dari posting dalam blog kita — baik melalui email atau pengumpul feed (umpan) — sehingga layak bagi pemilik blog untuk mengaktifkan layanan tersebut. Ironisnya, tidak jarang kita menemukan taut berlangganan yang masih menggunakan bawaan default blog & ketika di klik oleh pengguna, ia tidak mengarahkan pada suatu layanan — kecuali peramban kesayangan mereka mengakomodasinya — tetapi malah mengunduh isi feed tersebut.

h**p://namablog.blogspot.com/feeds/posts/default

Nah, agar feed dalam blog dapat memenuhi kebutuhan pengunjung untuk berlangganan, baik melalui email atau layanan pengumpul, Optimasi Blog akan mendeskripsikan beberapa langkah aktivasi & pengalihan feed ke layanan FeedBurner.

• Silakan kunjungi alamat FeedBurner. Jika narablog telah memiliki akun Google, sebaiknya login terlebih dulu, kemudian pergi ke layanan FeedBurner. Gambar berikut hanya merupakan contoh, abaikan beberapa feed yang telah lebih dulu Optimasi Blog daftarkan. Masukkan alamat blog Anda, kemudian eksekusi dengan mengklik tombol “Next”.

• Menentukan judul dan alamat feed, isi judul sesuai dengan keinginan Anda & alamat feed — misalnya: MiMspot — maka alamat feed adalah http://feeds.feedburner.com/MiMspot. Klik tombol “Next”.

• Mengidentifikasi sumber daya layanan feed, Anda bisa memilih Atom atau RSS. Klik tombol “Next”.

• Anda akan dibawa kehalaman, “Selamat! Feed Anda via FeedBurner telah aktif”. Kemudian disertakan pula alamat feed Anda, seperti yang terlihat pada tautan dalam kotak hijau. Klik tombol “Next”.

• Beri tanda centang pada checkbox sesuai keperluan Anda atau centang saja semua checkbox. :) Klik tombol “Next”.

• Selanjutnya Anda akan dibawa ke halaman bimbingan dan arahan pengguna dalam memanfaatkan layanan FeedBurner.
  Agar feed Anda mendukung berlangganan melalui email dapat dilihat pada gambar di bawah ini. Ingat eksekusi dengan tombol “Activate”, sedangkan contoh penggunaan fasilitas berlangganan dapat Anda baca pada posting bagaimana cara berlangganan?.

• Langkah di atas tidak akan berarti, apabila Anda tidak memanfaatkannya. Agar feed blog Anda terhubung dengan FeedBurner, maka diperlukan tindakan pengalihan (redirect). Arahkan peramban Anda menuju halaman dashboard Blogger.com → Setting → Other. Kemudian tambahkan alamat feed via FeedBurner — misalnya: http://feeds.feedburner.com/MiMspot — sesuai contoh di atas dan jangan lupa disimpan.

Sekarang mari kita periksa dengan mengklik taut berlangganan (subscribe) pada blog Anda, apakah telah terhubung dengan FeedBurner?

Update (18 Oktober 2012): Jika dalam pendaftaran feed situs web atau blog pada layanan FeedBurner mengalami permasalahan — seperti kapasitasnya yang besar — kita dapat melakukan alternatif dengan menambahkan “?max-results=10” (angka 10 dapat dirubah) untuk membatasi kapasitas feed yang besar tersebut.

h**p://namablog.blogspot.com/feeds/posts/default?max-results=10

Pembaharuan ini sesuai dengan pertanyaan dalam kolom komentar yang disampaikan oleh @Karakter Pendidikan.

Cara Mengubah Desain Tampilan Warna Garis Dan Background Status Message Blog

Apabila melihat bagian yang ditunjukkan dengan tanda anak panah pada gambar di atas, tentunya Anda sudah tidak asing lagi kan dengan bagian tersebut? Ya, bagian tersebut merupakan pesan status yang akan ditampilkan pada sebuah blog ketika artikel dengan kategori atau label tertentu ditampilkan. Jadi, ketika sebuah label diklik maka di atas daftar artikel yang ditampilkan akan dimunculkan pula sebuah kotak berisikan pesan yang menyatakan bahwa artikel yang saat itu ditampilkan merupakan artikel yang termasuk dalam kategori atau label yang sebelumnya telah diklik. Sebagai contoh misalnya adalah seperti yang tampak pada gambar di atas, dapat dilihat bahwa dalam kotak pesan tersebut terdapat tulisan ‘Showing posts with label Themes. Show all posts’, yang berarti bahwa daftar artikel yang ditampilkan di bawahnya merupakan artikel yang memiliki label ‘Themes’.

Baca selengkapnya »

Cara Mengatur Atau Mengubah Jarak Antara Halaman Blog Dengan Tepian Browser

Sobat, seperti yang kita tahu bahwasanya pada beberapa template standar (bawaan) Blogger diberikan jarak yang sama antara halaman utama blog dengan tepian browser. Dimana dalam hal ini jarak yang diberikan untuk beberapa jenis template tersebut adalah 30px auto; yang maksudnya adalah halaman utama blog memiliki jarak 30 piksel dari tepi atas dan bawah serta jarak otomatis untuk tepi kiri dan kanan. Penggunaan margin yang seperti ini memang sangat beralasan, karena penggunaan margin auto untuk tepi kiri dan kanan akan mengakibatkan halaman berada pada posisi tengah browser, sedangkan penggunaan margin 30px dimaksudkan untuk memberi ruang sebagai tempat bilah navbar Blogger.

Baca selengkapnya »

Cara Membuat Tanda Anak Panah Di Sebelah Menu Utama Sebuah Navigasi Pull Down

Pada awalnya saya sempat menyangka bahwa tanda anak panah yang terdapat di sebelah kiri atau kanan sebuah menu utama situs web atau blog yang memiliki sub menu di dalamnya (seperti yang tampak pada gambar di atas), adalah sebuah simbol atau lambang dari karakter (ASCII) tertentu. Namun ternyata prasangka tersebut adalah suatu hal yang keliru, karena sebenarnya tanda anak panah seperti yang tampak pada gambar di atas bukanlah terbentuk dari simbol atau lambang tertentu, melainkan tanda garis yang terbentuk dari penggunaan kode CSS.

Baca selengkapnya »

Menu Navigasi Horizontal dan Dropdown

Untuk memudahkan navigasi pengunjung, sering sekali kita menemui menu yang berbentuk horizontal maupun vertikal berada pada suatu tempat tertentu dalam situs web atau blog. Menu tersebut apabila diklik akan mengarah ke halaman tertentu yang dibentuk dalam suatu Uniform Resource Locator (URL) unik. Pun tidak jarang menu tersebut memiliki ‘anak menu’, selanjutnya akan kita sebut dengan istilah dropdown.

Ketika Anda menggunakan pagelist menu bawaan Blogger™ — akan diperlihatkan suatu hal menarik — yakni jika halaman yang ditampilkan sesuai URL dalam menu (active), maka menu akan tampil berbeda dengan yang lain seperti warna latar, huruf tebal, dan sebagainya. Optimasi blog menamakannya dengan sebutan selected. Mungkin yang menjadi penyebab kurangnya penggunaan pagelist — sampai posting ini diterbitkan — oleh karena belum mendukung dropdown. Entah jika kita memasukkannya secara manual (red: CMIIW). Alternatifnya dengan membuat menu baru yang biasanya menggunakan daftar urut. Bagaimana cara membuatnya?

HTML (HyperText Markup Language)

<nav id='menu-navigation'>
 <ul>
 <b:if cond='data:blog.url != data:blog.homepageUrl'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
 <b:else/>
  <li class='selected'><a expr:href='data:blog.homepageUrl'>Home</a></li>
 </b:if>
 <b:if cond='data:blog.url != "#"'>
  <li><a href='#'>Item 1</a></li>
 <b:else/>
  <li class='selected'><a href='#'>Item 1</a></li>
 </b:if>
 <b:if cond='data:blog.url != "#"'>
  <li><a href='#'>Item 2</a></li>
 <b:else/>
  <li class='selected'><a href='#'>Item 2</a></li>
 </b:if>
  <li><a href='#'>Drop Down</a>
   <ul>
    <li><a href='#'>Down 1</a></li>
    <li><a href='#'>Down 2</a></li>
    <li><a href='#'>Drop 3</a>
     <ul>
      <li><a href='#'>Drop 3.1</a></li>
      <li><a href='#'>Drop 3.2</a></li>
      <li><a href='#'>Drop 3.3</a></li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</nav>

Rubah kode yang diberi warna merah dengan url tujuan (misalnya: h**p://namablog.blogspot.com/p/about), dimana url tersebut harus sama tiap tag kondisional, seperti grup kode yang ditandai dengan warna buram (abu-abu). Sedangkan kode berwarna hijau merupakan teks yang ditampilkan dalam menu.

CSS (Cascading Style Sheets)

#menu-navigation {
 border-bottom: 1px solid #d3d3d3;
 border-top: 1px solid #d3d3d3;
 clear: both;
 display: block;
 float: left;
 margin: 0 auto;
 width: 100%;
}
#menu-navigation ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#menu-navigation li {
 float: left;
 position: relative;
}
#menu-navigation a {
 color: #666;
 display: block;
 line-height: 3em;
 padding: 0 1.5em;
 text-decoration: none;
}
#menu-navigation ul ul {
 box-shadow: 0 3px 3px rgba(0,0,0,.2);
 display: none;
 float: left;
 margin: 0;
 padding: 0;
 position: absolute;
 top: 3em;
 left: 0;
 z-index: 99999;
}
#menu-navigation ul ul ul {
 left: 100%;
 top: 0;
}
#menu-navigation ul ul a {
 background: #f9f9f9;
 border-bottom: 1px dotted #ddd;
 font-weight: normal;
 height: auto;
 line-height: 1.5em;
 padding: .375em .375em .375em 1.5em;
 width: 150px;
}
#menu-navigation ul li:hover > ul {
 display: block;
}
#menu-navigation li:hover > a,
#menu-navigation ul ul :hover > a,
#menu-navigation a:focus,
#menu-navigation a:active,
#menu-navigation .selected  > a {
 background-color: #eee;
 color: #111;
}

Tautan demo dapat Anda simak pada menu navigasi MiMspot. Untuk kode yang berwarna hijau merupakan tampilan menu jika aktif & warna merah merupakan warna latar untuk mengantisipasi penggunaan gambar (icon) pada menu.

Rangkaian Kode CSS Untuk Tema Tampilan Halaman Blog Versi Mobile Dengan Warna Hitam Putih

Melanjutkan artikel sebelumnya yang berjudul “ELTELU BLUE – Kode CSS Untuk Desain Tema Tampilan Halaman Blog Versi Seluler”, berikut ini adalah rangkaian kode CSS baru yang dapat digunakan untuk mengubah desain tema tampilan halaman blog versi seluler dengan kombinasi warna seperti yang tampak pada gambar di atas (klik pada gambar untuk memperbesar tampilan). Maksud dan tujuan dari diterbitkannya artikel ini adalah guna memberikan lebih banyak ragam pilihan tema kepada Anda yang telah dan atau akan melakukan kustomisasi template untuk tampilan halaman versi mobile dengan mengacu pada teknik yang diuraikan dalam artikel dengan judul “Cara Mengedit Template Untuk Mengubah Tema Tampilan Blog Versi Seluler” dan “MOBILE TEMPLATE - Customize Blogger Mobile Templates”.

Baca selengkapnya »

Cara Membuat Sebuah Daftar Artikel Terkait Otomatis Untuk Beberapa Label Dalam Blog

Apabila kita membuka dan kemudian membaca artikel yang terdapat pada sebuah blog, maka hampir dapat dipastikan bahwa di bawah setiap artikel yang dibuka dan dibaca tersebut terdapat beberapa tautan dengan berisikan daftar judul artikel yang memiliki keterkaitan kategori atau label dengan artikel yang dimaksud. Dimana model daftar artikel yang ditampilkan pun sangat bervariasi. Mulai dari yang hanya menampilkan daftar tautan, menampilkan daftar link dengan fungsi scroll, menampilkan daftar tautan disertai dengan gambar, dan bahkan dengan menampilkan kombinasi beberapa model tersebut, yang secara umum daftar semacam ini disebut sebagai daftar artikel terkait.

Baca selengkapnya »