Blog Optimization | Optimasi Blog | Tips SEO dan Trik Blogger Indonesia

Membuat Amplop + Perangko Dengan CSS3

2011-10-16T19:12:00.000+08:00

Sudah pernah baca tulisan agenda saya di blog RudyAzhar ? Kalau belum coba baca dulu deh, Nah di postingan tersebut ada amplop yang dibuat dengan CSS3 plus perangkonya.

Jadi saya pingin berbagi cara pembuatannya disini. Dan yang saya bagikan hanya kode CSS & HTML saja, saya anggap kalian tahu penempatannya dimana Oke....

Markah HTML

Pertama kita buat dulu markah HTML sebagai berikut :

<div class="amplop">
<span class="perangko triangle"><img src="/wp-content/uploads/2011/10/perangko.jpg" alt="Perangko Sukarno"/></span>
 Dari: Rudy Azhar
<span class="to">Untuk: Keluargaku</span></div>

Satu-satunya gambar yang dipakai adalah gambar Soekarno sebagai perangkonya, tapi sisinya tetap memakai CSS3.

CSS untuk Amplop

Mari kita bentuk CSSnya, pertama sekali kita akan membuat CSS untuk amplopnya dulu.

.amplop {
position:relative; 
width:650px; 
height: 400px; 
margin-bottom:25px; 
border:15px solid transparent;
background: #feb;
}

Hasilnya akan seperti gambar dibawah ini :

Tahap Kedua kita tambahkan garis-garis berwarna biru dan merah pada setiap sisi amplop dengan menggunakan CSS3 linear-gradient.

background-image: -moz-linear-gradient(#feb, #feb), 
-moz-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -ms-linear-gradient(#feb, #feb), 
-ms-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -o-linear-gradient(#feb, #feb), 
-o-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -webkit-linear-gradient(#feb, #feb), 
-webkit-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-clip: padding-box, border-box;
background-origin: border-box;

Maka hasilnya akan berbentuk seperti ini.

Sampai tahap diatas sebenarnya amplop sudah jadi, tapi saya akan menambah sedikit pemanis dengan box-shadow agar amplop ada kesan timbul serta atribut untuk font.

font: italic 100% Georgia, serif;
box-shadow:2px 2px 13px rgba(0,0,0,.5);

CSS Keseluruhan untuk Amplop

.amplop {
position:relative; 
width:650px; 
height: 400px; 
margin-bottom:25px; 
border:15px solid transparent;
background: #feb;
background-image: -moz-linear-gradient(#feb, #feb), 
-moz-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -ms-linear-gradient(#feb, #feb), 
-ms-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -o-linear-gradient(#feb, #feb), 
-o-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-image: -webkit-linear-gradient(#feb, #feb), 
-webkit-repeating-linear-gradient(-45deg, #d50, #d50 15px, transparent 15px, transparent 30px, #15c 30px, #15c 45px, transparent 45px, transparent 60px);
background-clip: padding-box, border-box;
background-origin: border-box;
font: italic 100% Georgia, serif;
box-shadow:2px 2px 13px rgba(0,0,0,.5);
}

Amplopnya sudah jadi, sekarang tinggal kita membuat perangko biar bisa dikirim via Pos...he...he...he... Sebenarnya nggak usah memakai perangko juga bisa, dengan memanfaatkan Kilat Khusus tapi demi menghemat biaya perangko bisa jadi alternatif.

CSS untuk Perangko

Untuk perangko sebaiknya kita cari dulu gambar yang sesuai, kalau sudah ketemu baru kita buat pinggirannya.

.amplop span.perangko {
background: #d8bb9d;
display: block;
float: right;
height: 136px;
margin-left: 20px;
padding: 5px;
width: 101px;
}
.amplop span.triangle {
background-image: -webkit-linear-gradient(45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb), -webkit-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb);
background-position: 0% 0;
background-repeat: repeat;
background-size: 10px 10px;
background-image: -o-linear-gradient(45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb), -o-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb); 
background-image: -moz-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb), -moz-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb); 
background-image: -ms-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb), -ms-linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb); 
background-image: linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb), linear-gradient(-45deg, #feb 25%, transparent 25%, transparent 75%, #feb 75%, #feb);}

.amplop span.perangko img {
background: #d8bb9d;
display: block;
height: 126px;
padding: 5px;
width: 92px;
}

Untuk perangko ini belum sempurna dibuat karena hanya bagus jika dilihat dengan menggunakan brower Chrome, kalau dilihat menggunakan FireFox masih kurang bagus...he..he...he...

Lihat Demo secara Online →

Nah, udah jadi deh Amplop + Perangko yang siap dikirim lewat Pak Pos...he...he...he... Tapi kira-kira Pak Posnya nerima nggak ya karena semuanya dibuat dengan CSS3... wkwkwkwkwkwkwk.....

Trik Membuat Kotak Banner

2011-09-16T22:38:00.001+08:00

Artikel merupakan tanggapan kami terhadap pertanyaan Saudari Sri Wahyuni yang beralamat di sriwahyuni8888@gmail.com dengan menggunakan fasilitas “Contact” tanggal 14 September 2011. Mungkin mba telah membaca artikel sebelumnya yang berjudul “membuat kotak banner”. Tetapi tidak ada demo untuk melihat hasil pengkodean tersebut.

Pada trik blogger kali ini, kita akan mencoba memperbaharui trik sebelumnya dengan menggunakan CSS3. Widget dikustomisasi untuk pemanfaatan banner berukuran 125×125. Setiap kode CSS dapat diletakkan sebelum ]]></b:skin> & HTML dimasukkan ke dalam penambahan gadget atau widget. Mari kita ikuti bersama trik membuat kotak banner yang dimaksud.

Widget Banner I

CSS

/* Area yang akan digunakan untuk memasang Banner */
.kotak-banner {
background:#999;
border:2px solid #c3c3c3;
margin:0 auto 1.7143em;
padding:2% 0 0 3%;
position:relative;
overflow:hidden;
width:300px;
}

/* Tempat untuk memasang Banner di atas kode ini */
.banner {
background:#c3c3c3;
-webkit-box-shadow:0px 2px 5px #666;
-moz-box-shadow:0px 2px 5px #666;
-o-box-shadow:0px 2px 5px #666;
-ms-box-shadow:0px 2px 5px #666;
box-shadow:0px 2px 5px #666;
float:left;
height:135px;
margin-right:3%;
margin-bottom:4%;
position:relative;
width:45.5%;
text-align:center;
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
}

/* Memunculkan title image saat di dekati tetikus (mouse) */
.banner a:hover:after {
background-color:rgba(0,0,0,0.25);
font-size:0.875em;
color:#000;
text-decoration:none;
content:attr(title);
left:4%;
bottom:3%;
width:92%;
position:absolute;
z-index:1;
}

.banner img {
margin-top:4%;
width:125px;
height:125px;
}

.banner:hover {
background:#f1f1f1;
-webkit-box-shadow:0px 0px 5px #fff;
-moz-box-shadow:0px 0px 5px #fff;
-o-box-shadow:0px 0px 5px #fff;
-ms-box-shadow:0px 0px 5px #fff;
box-shadow:0px 0px 5px #fff;
}

<div class="kotak-banner">
  <div class="banner"><a href="###" title="Banner 125x125"><img src="https://lh6.googleusercontent.com/-dX3glMH5tEA/TnFeeAlYpOI/AAAAAAAABOw/odp2gkyQgZg/s800/125x125png.png" alt="Banner"/></a>
  </div>

...

</div>

Catatan:

Copy & paste dimulai kode <div class="banner"> … </div> pada titik, titik,titik (...) untuk menambah banner.
Ganti kode yang dicetak tebal dengan alamat website/halaman blog tujuan banner.
Rubah title (warna biru) sesuai dengan title banner. Nah, title inilah yang akan muncul nantinya dalam banner kita, ketika banner di hover.
Ganti gambar (warna ungu) sesuai dengan alamat gambar (banner) disimpan.
Tambahkan alt seperti yang dicontohkan pada kode yang diberi warna hijau.

Widget Banner II

CSS

cara pengkodean hampir mirip dengan kode CSS pada “Widget Banner I”, cuma merubah background, border, dan ditambah sedikit variasi transform:scale (warna orange). Berikut gambaran kode CSS keseluruhannya.

.kotak-banner {
border:2px solid #444;
margin:0 auto 1.7143em;;
padding:2% 0 0 3%;
position:relative;
overflow:hidden;
width:300px;
}

.banner {
background:#444;
-webkit-box-shadow:0px 2px 5px #666;
-moz-box-shadow:0px 2px 5px #666;
-o-box-shadow:0px 2px 5px #666;
-ms-box-shadow:0px 2px 5px #666;
box-shadow:0px 2px 5px #666;
float:left;
height:135px;
margin-right:3%;
margin-bottom:4%;
text-align:center;
position:relative;
width:45.5%;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

.banner a:hover:after {
background-color:rgba(0,0,0,0.15);
font-size:0.875em;
color:#000;
text-decoration:none;
content:attr(title);
position:absolute;
left:4%;
bottom:3%;
width:92%;
z-index:1;
}

.banner img {
margin-top:4%;
width:125px;
height:125px;
}

.banner:hover {
background:#eee;
-webkit-box-shadow:0px 2px 5px #333;
-moz-box-shadow:0px 2px 5px #333;
-o-box-shadow:0px 2px 5px #333;
-ms-box-shadow:0px 2px 5px #333;
box-shadow:0px 2px 5px #333;
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
z-index:5;
}

HTML

Untuk pengkodean dalam HTML sama persis dengan pengkodean pada “Widget Banner I”.

Widget Banner III (Rotasi Banner Random)

CSS

.kotak-banner {
background:#fff;
border:2px solid #d4d4d4;
margin:0 auto 1.7143em;
padding:2% 0 0 3%;
position:relative;
overflow:hidden;
width:300px;
}

.banner {
background:#fafafa;
-webkit-box-shadow:0px 2px 5px #666;
-moz-box-shadow:0px 2px 5px #666;
-o-box-shadow:0px 2px 5px #666;
-ms-box-shadow:0px 2px 5px #666;
box-shadow:0px 2px 5px #666;
float:left;
height:135px;
margin-right:3%;
margin-bottom:4%;
text-align:center;
position:relative;
width:45.5%;
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-webkit-transform:rotate(-2deg);
-moz-transform:rotate(-2deg);
-o-transform:rotate(-2deg);
-ms-transform:rotate(-2deg);
transform:rotate(-2deg);
}

.banner:nth-child(even) {
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
-o-transform:rotate(4deg);
-ms-transform:rotate(4deg);
transform:rotate(4deg);
}

.banner:nth-child(3n) {
-webkit-transform:none;
-moz-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
position:relative;
}

.banner:nth-child(4n) {
-webkit-transform:rotate(-4deg);
-moz-transform:rotate(-4deg);
-o-transform:rotate(-4deg);
-ms-transform:rotate(-4deg);
transform:rotate(-4deg);
}

.banner a:hover:after {
background-color:rgba(0,0,0,0.25);
font-size:0.875em;
color:#000;
text-decoration:none;
content:attr(title);
position:absolute;
left:4%;
bottom:3%;
width:92%;
z-index:1;
}

.banner img {
margin-top:4%;
width:125px;
height:125px;
}

.banner:hover {
background:#fafafa;
-webkit-box-shadow:2px 4px 5px #333;
-moz-box-shadow:2px 4px 5px #333;
-o-box-shadow:2px 4px 5px #333;
-ms-box-shadow:2px 4px 5px #333;
box-shadow:2px 4px 5px #333;
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
position:relative;
z-index:5;
}

HTML

Untuk pengkodean dalam HTML sama persis dengan pengkodean pada “Widget Banner I”.

Generalisasi

Anda pun dapat menambah, menghilangkan, & memodifikasi widget banner di atas sehingga sesuai dengan yang Anda inginkan. Berhubungan dengan “Widget Banner III” mungkin akan lebih baik jika diterapkan dalam image gallery. Lebih jelas tentang penggunaan CSS3 transform dalam polaroids—termasuk juga image gallery—dapat dipelajari pada website ZURBexpo.Silakan memilih bentuk widget banner yang Anda kehendaki.

Tips SEO pada Blogger.com Bagian Kedua

2011-09-15T06:07:00.004+08:00

Ok! Kita akan lanjut pada ulasan tentang SEO. Perlu menjadi catatan penting bahwa artikel ini merupakan kelanjutan artikel sebelumnya. So, jika Anda terlewat untuk membacanya, saya menyediakan link untuk meloncat ke artikel Tips Search Engine Optimization (SEO) pada Blogger.com sebelumnya.

Men-submit Blog ke Perkakas Webmaster

Tentu kita tidak asing lagi dengan yang namanya perkakas web. Betul, perkakas webmaster merupakan salah satu layanan google yang memungkinkan kita untuk mengoptimalkan blog agar terindeks dengan baik. Bagaimana caranya dapat anda baca pada artikel Submit Sitemap Blogger.com di Google Webmaster Tools dan Solusi Submit Sitemap di Webmaster Tools.

Link Building

Link building merupakan usaha untuk membangun tautan dengan menggunakan kata-kata yang mengandung keyword & sesuai dengan tema blog. Tautan dengan kata atau frase kata yang mengandung kata kunci berarti memperjelas target tema yang telah ditetapkan, sedangkan sesuai dengan tema dapat berati bahwa tautan-tautan tersebut mempertahankan tradisi kata kunci utama blog dalam search engine. Terkadang kita keliru mengartikan link building sebagai mengumpulkan tautan sebanyak-banyaknya tanpa mengindahkan kualitas dari kata kunci maupun web/blog yang kita beri tautan (sumber tautan).

Berikut merupakan daftar yang seharusnya kita lakukan dalam membangun tautan yang baik.

Menautkan kata kunci yang sesuai pada posting satu dengan lainnya dalam blog. Ini sesuai dengan artikel tips SEO sebelumnya pada tahapan “Membuat Posting dengan hati SEO”.
Kata kunci pada tautan seharusnya menggambarkan dengan jelas tentang apa yang ditautkannya dengan sumber tautan. Dalam bahasa sederhana mungkin dapat dikatakan bahwa kata-kata dalam link menggambarkan sumber link tersebut. Contoh:
- Jika Anda ingin membaca tentang SEO, silakan kunjungi artikel [link]Tips Blogging SEO dalam posting[/link] dan [link]SEO dalam Tautan[/link].
- Jika Anda ingin membaca tentang SEO, silakan kunjungi artikel [link]di sini[/link] dan [link]di sana[/link].
Berdasarkan contoh di atas, manakah menurut Anda tautan yang lebih ber-kualitas?
Sesekali buatlah sedikit ulasan (review) tentang sumber tautan yang berasal dari web/blog lain. Hal tersebut terkadang mendapat respon positif dari sang empu-nya tautan. Coba bayangkan, jika sumber tautan tetrtarik dengan review kita & kemudian membalas dengan tautan yang mengarah ke artikel di blog kita. Bukankah hal tersebut lebih positif dibandingkan dengan “meminta” ditautkan?
Berkenaan dengan poin di atas, bagaimana web/blog lain akan tahu tentang isi artikel kita, jika mereka tidak diberitahu. Banyak cara untuk menuju ke sana, salah satu jalan yang cukup ampuh adalah meninggalkan komentar yang relevan serta memiliki bobot dengan artikel yang telah dibaca. Memang tidak akan menimbulkan banyak pengaruh di search engine, tetapi jika komentar kita tersebut berguna, maka secara tidak langsung pemilik web/blog & pengguna lain akan tertarik untuk mengunjungi blog kita.
Sebuah blog akan memiliki nilai tersendiri dalam search engine, jika link yang keluar lebih banyak daripada link yang masuk. Dan akan lebih besar lagi nilainya, jika link yang keluar ditaut oleh web/blog yang memiliki kesamaan tema. Jangan pula karena ingin menghindari link yang masuk, maka artikel yang seharusnya bersumber pada artikel lain, malah tidak mencantumkan tautan sumber tersebut. Ingat! kita telah melakukan repost, sehingga menjadi sebuah keharusan jika kita mencantumkan tautan sumber. Ironisnya lagi, kita telah mencantumkan tautan sumber, tetapi tautan tersebut memiliki properti rel="nofollow". Pernahkan Anda berpikir, seseorang mungkin butuh berhari-hari untuk menyempurnakan artikelnya?
Mana yang lebih dominan, sebuah tautan yang me-link ke web/blog kita atau me-link ke artikel kita? Mari kita diskusikan ini pada kolom komentar.
Tautkan blog & artikel dengan beberapa blog directory, social network dan social bookmarking.
Jangan lupa, tautkan pula blog & artikel ke layanan feed. Tidak jarang narablog menemukan artikel yang dia cari pada layanan ini. Untuk Blogger.com dapat menggunakan fasilitas feedburner, silakan membuka kembali artikel terdahulu tentang Apa itu RSS FEED dan Cara berlangganan.

Tetaplah memposting dengan hasil karya orisinil Anda

Yah, ini merupakan langkah yang pasti dan akurat. Search engine akan lebih menghargai sebuah karya yang original. Bukan saja mesin saya kira, narablog pun pasti menghargainya. Apalagi karya tersebut memiliki alur yang jelas, mudah untuk dipahami & nyaman untuk dibaca. Tentu, karya yang dimaksud adalah tentang tulisan atau catatan kita di blog. Orisinil bukan berarti melakukan modifikasi kata-kata di sana-sini agar artikel yang akan diterbitkan tampak berbeda dengan artikel yang kita ‘contek’. Tetapi lebih kepada asal ide. Anda memiliki sebuah ide yang mungkin berbeda, tuangkanlah ide itu dalam suatu bentuk tulisan (artikel/posting).

Saya mempunyai sebuah ide, tapi ide tersebut melenceng dari tema blog saya. Bagaimana sebaiknya?

Wow, sebuah pertanyaan yang sulit. Terus terang saya sendiri mungkin belum/tidak menemukan jawaban yang tepat untuk masalah ini—ada, tetapi hasil meraba-raba. Bagaimana dengan Anda?

Tips Search Engine Optimization (SEO) pada Blogger.com

2011-09-08T21:57:00.005+08:00

Terlebih dulu saya mengucapkan terima kasih kepada Saudara Indra (arek raos) yang telah memanfaatkan form kontak untuk menanyakan sesuatu kepada kami. Pertanyaan Anda telah sampai kepada kami & semoga artikel ini menjadi penawarnya. Agar lebih mudah dalam pendeskripsian, Search Engine Optimization selanjutnya akan kita sebut “SEO”.

Perlu menjadi catatan bahwa saya bukan pakar SEO atau sejenisnya, namun hanya sebagai perpanjangan tangan informasi yang pernah didapat melalui berbagai sumber. Pokok bahasan ini kita batasi tentang pemanfaatan SEO pada Blogger.com & jika terdapat beberapa kejanggalan atau pendapat yang berbeda, dapat kita diskusikan bersama pada kolom komentar.

Kenali Blog Anda, sebelum Anda ‘menyentuh’ SEO

Sebelum melangkah lebih jauh, sebaiknya kita terlebih dulu kenal dengan blog yang kita kelola. Blog tersebut akan banyak bercerita tentang apa? komputer, internet, tutorial, desain web, cerpen, puisi, atau hal-hal yang lain. Artinya disini kita perlu sebuah tema yang akan kita angkat dalam bentuk catatan di web. Apabila sebuah blog memiliki tema tertentu, maka the next step akan lebih mudah untuk melakukan kustomisasi SEO.

Pemilihan tema yang tepat, akan menghasilkan sasaran yang tepat pula. Dengan syarat, kita selalu mempertimbangkan pesaing (kompetitor) yang memiliki tema serupa. Semakin umum sebuah tema, maka semakin banyak terbuka peluang untuk saling berkompetisi.Yah, tentu saja dengan sasaran yang lebih banyak pula. Sebaliknya, tema yang lebih khusus menyebabkan kompetisi akan berkurang & sasaran akan semakin sedikit.

Jika kita membuat blog untuk jangka waktu yang panjang sebaiknya pemilihan tema bisa lebih khusus, bahkan sangat khusus. Tinggal usaha kita untuk mempopulerkan tema tersebut agar dapat diterima oleh orang lain, terutama insan online. Anda tidak memiliki waktu sepanjang itu, maka bersiap-siaplah dengan tantangan para kompetitor yang sudah barang tentu berusaha untuk tampil menjadi nomor 1 (satu) dalam halaman hasil pencarian pada setiap mesin pencari. It's Your Choice.

Optimalisasi Template agar lebih SEO Friendly

Pada tahap ini, pengetahuan & pemahaman tentang koding sangat dibutuhkan. Bagaimana kalau di “copas” saja? Saya tidak menyalahkan langkah tersebut, tetapi ketika suatu pengkodean dari web/blog sumber ada yang keliru—mungkin disebabkan oleh ke-khilaf-an author ketika menulis—tentu kode kita akan menjadi keliru pula.

Adapun secara garis besar langkah-langkah SEO pada tahap ini, antara lain:

Usahakan kata kunci utama berada pada posisi pembuka & penutup blog. Sebagai pembuka berarti berkenaan dengan kepala (header), sedangkan penutup berkenaan dengan kaki (footer) blog.
Merubah markup title
```
<title><data:blog.pageTitle/></title>
```
menjadi
```
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
```
Arti dari markup di atas lebih kurang seperti ini, jika yang ditampilkan adalah halaman posting, maka title blog adalah judul posting diikuti dengan title blog. Jika tidak, maka title blog adalah title blog itu sendiri.

Menambah meta tag, letakkan saja di bawah title seperti pada point di atas.

<meta content='deskripsi tentang blog Anda' name='description'/>
<meta content='keyword1,keyword2,keyword3,…' name='keywords'/>
<meta content='INDEX, FOLLOW' name='robots'/>

Kustomasi kata kunci pada footer blog, contoh:
```
<p style="font-weight:bold">kata kunci blog Anda</p>
```
Atau Anda dapat berkreasi dengan gaya lain, seperti menambahkan kata kunci pada copyright & sebagainya.
Kustomisasi (X)HTML ((eXtensible) HyperText Markup Language) pada atribut main, widget id Blog1. Custom yang dilakukan pada area ini dapat berupa: pengaturan heading (h1 sampai h6), paragraf, ordered list & unordered list, dan sebagainya. Dengan harapan posting kita akan tampak lebih semantik—bukan hanya sekedar memberikan tanda—namun lebih jauh akan memberikan suatu makna tersendiri bagi pembaca (mendukung keterbacaan).
Mengatur template agar user friendly. Buang widget-widget yang dirasa tidak perlu untuk ditampilkan. Minimal sebuah blog berisikan elemen-elemen identitas blog, posting, alur waktu yang terurut, arsip, & formulir komentar.
Mengatur posisi kode elemen main (bagian posting) di atas kode sidebar. Jika kita pernah melihat posisi sidebar berada di sebelah kiri, bukan berarti kode elemen main (bagian posting) berada di bawah kode sidebar. Nah, ini yang saya maksud bahwa kita perlu mempelajari & memahami pengkodean, baik CSS (Cascading Style Sheets) maupun HTML (HyperText Markup Language).

Membuat Posting dengan hati SEO

Mungkin kedengaran agak asing. Anda telah memiliki suatu tema & usahakan tema tersebut sebagai acuan untuk membuat posting. Ilustrasi, ketika Anda mengikuti upacara bendera, bertepatan pada saat itu bendera merah putih akan dinaikkan. Lagu apa yang Anda dengar? Betul, “Indonesia Raya” & bukan lagu “Balonku Ada Lima”.

Sampai ke tahap ini, Anda sama sekali belum berhadapan langsung dengan yang namanya SEO. Why? Karena kita akan mencoba untuk menyentuhnya terlebih dulu. Aktivitas yang akan kita lakukan pada tahap ini meliputi:

Membuat posting buah karya sendiri yang sesuai dengan tema blog. Setidak-tidaknya blog telah dipersiapkan dengan posting sejumlah 7–10 postingan.
Posting sebaiknya menggunakan bahasa Indonesia yang baik. Tidak ada salahnya, bukan? Pengunjung bukan hanya berasal dari negara asal penulis, sehingga tindakan ini dapat menjadi antisipasi ke-salahtafsir-an berbagai fitur penterjemah. Terkecuali Anda memiliki target pembaca tertentu.
Usahakan posting seakan-akan mengajak pembaca untuk berinteraksi di dalamnya. Tidak mencari pembenaran, tetapi mencari kebenaran atas suatu pokok bahasan yang diuraikan. Sulit? Rajin-rajinlah membaca karya orang lain, bukan untuk di “copas” tetapi untuk dipelajari tata bahasa, irama, dan struktur bacaannya.
Posting bukan hanya dinikmati oleh diri sendiri, namun lebih luas mencakup seluruh aspek, Anda, pembaca, dan mesin. Mesin? Yah, jika mesin tidak dapat membaca, bagaimana halaman blog kita muncul pada hasil pencarian.
Tambahkan alt pada image (gambar) yang include dalam postingan, karena gambar tidak dapat dibaca. Nah, dengan menambahkan alt dalam markup image, kita memberikan alternatif teks yang dapat memaknai arti gambar tersebut.
Tautkan posting dengan posting lain, jika terdapat keterkaitan & hal tersebut dianggap membantu pengunjung untuk memahami bacaannya. Terkadang kita menemui kata atau frase kata yang memiliki tautan tertentu, tetapi seharusnya hal itu tidak perlu dilakukan (dipaksa untuk bertaut). Jangan lakukan tindakan tersebut!
Jangan menerbitkan posting 4–5 postingan dalam sehari (apalagi lebih), karena kemungkinan blog Anda akan dianggap sebagai SPAM. Lakukanlah penskedulan posting, walaupun kita dapat menulis 10 posting dalam sehari. Posting terjadwal dapat berarti mengatur tanggal terbit posting. Anda dapat menemukannya pada saat membuat posting & memilih opsi posting (“Post Options”) tepat berada di bawah form editor (penulisan posting).
Mungkin ada sebagian yang berpendapat, memberikan tanda-tanda tertentu pada teks yang menjadi kata kunci akan meningkatkan SEO, seperti memberi huruf tebal (bold), miring (italic), pewarnaan yang berbeda (color dan/atau background), dan sebagainya.

Mendaftarkan Blog ke beberapa Mesin Pencari

Setelah kita melakukan beberapa tahapan seperti di atas, maka mulailah kita berhadapan dengan SEO. Kita telah memiliki senjata, amunisi yang cukup, dan perangkat pendukung. Bagaimana cara mendaftarkan blog ke beberapa mesin pencari? Anda dapat membaca pada posting sebelumnya, seperti: mendaftar di google, yahoo, dan bing

Generalisasi

Berdasarkan pokok bahasan di atas, mungkin ini hanya merupakan tahap awal untuk mengoptimalkan sebuah blog dalam mesin pencari. Kita pun belum bisa mengetahui secara pasti hasil pencarian setelah melakukan tahapan-tahapan tersebut. Bukan hanya berhubungan dengan kompetitor, tetapi terkait pula pada relevansi sebuah blog yang dikategorikan masuk dalam daftar pencarian serta—mungkin—umur blog. Namun yang pasti, kita telah melakukan usaha SEO pada blog kita. Terlepas dari itu semua, ini merupakan artikel permulaan untuk memperkaya pengetahuan kita tentang langkah demi langkah menuju SEO & tidak menutup kemungkinan akan terbit artkel lain yang menjadi kelanjutannya. Keep your eyes on Optimasi Blog.

Ingat! Tema, deskripsi, dan keyword haruslah sesuai dengan apa terkandung dalam blog kita. Jangan menggunakan manipulasi apapun terhadap unsur-unsur yang saya beri huruf tebal. Pembaca akan senang jika ketiga unsur tersebut sesuai dengan apa yang dia pindai di dalam blog kita. Sebaliknya, ketidak-sesuaian akan mengundang pembaca untuk meninggalkan kesan antipati. Jangan lupa, pembaca bukan hanya orang, tetapi juga mesin.

admin quote

Membuat Style pada Link dengan CSS3

2011-08-22T20:32:00.000+08:00

Sepertinya sudah lama saya tidak membuat postingan disini, kali ini saya memberikan trick menggunakan CSS3 untuk link saat di sorot (hover efek). Sebenarnya sudah ada beberapa yang sempat saya bagikan di blog saya dengan judul Macam Efek Link Dengan CSS3, dan kali ini saya coba memberikan sesuatu yang baru.

Kita buat Mark-up HTML terlebih dahulu :

<ul class="shift">
    <li><a href="#">Sorot ini</a></li>
    <li><a href="#">Sorot tautan ini</a></li>
</ul>

Sesudah itu mari kita buat CSS-nya :

.shift {
    list-style: none;
    display: inline-block;
}

.shift li {
    background: orangered;
    width: 0%;
    display: block;
    -webkit-transition: all 0.125s ease-in-out;
    -moz-transition: all 0.125s ease-in-out;
    transition: all 0.125s ease-in-out;
}

.shift li:hover {
    width: 100%;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.shift li a {
    text-transform: uppercase;
    display: block;
    color: #000;
    font-size: 1em;
    margin: 0.5em;
    padding: 0.5em;
    text-decoration: none;
    white-space: nowrap;
}

Berikut hasilnya yang sudah jadi, coba sorot tulisan 'Sorot ini' lalu lihat efeknya :

Keren kan, cocok untuk membuat efek pada sidebar ataupun footer blog kita. Ada tanggapan ?

Styling menggunakan CSS pseudo-element

2011-08-19T10:13:00.002+08:00

Pada posting terdahulu, kita juga pernah membicarakan tentang CSS pseudo-element ini, namun hanya terbatas pada “styling ordered dan unordered list”. Selain itu, mungkin kita pernah melihat bentuk teks di dalam elemen atau image berbentuk pita (ribbon), kemudian garis (border) yang memiliki efek tenggelam (press), bentuk melipat di sudut sebuah elemen & mirror text effect (efek cermin pada teks). Semua dapat dilakukan juga dengan menggunakan CSS pseudo-element :before dan/atau :after.

Credit

Untuk penggunaan ribbon & border ber-efek tenggelam dapat Anda baca selengkapnya di blog Rudy Azhar. Dan salah satu nilai plus—pada form komentar ditambahkan oleh Ardianzzz—yang di coding dengan demikian menarik menggunakan CSS pseudo-element (demo ribbon).

Sedangkan untuk membuat efek cermin pada teks, penulis lupa (alpa) dengan link kreditnya. Silakan kontak penulis jika Anda mengklaim bahwa tulisan tentang “efek cermin pada teks” diambil dari sumber Anda & penulis akan segera melakukan update pada link kredit ini.

Indeks Konten

Ribbon (membuat pita)
Border/line press effect (membuat border/garis tenggelam)
Folding angle (melipat sudut)
Mirror effect on the text (efek cermin pada teks)

Ribbon

Pada elemen ini Anda melihat sub judul “Ribbon” dalam sebuah pita (ribbon). Adapun CSS yang digunakan seperti yang tampak di bawah ini.

.element {
background:#e1e1e1;
margin-left:.5em;
padding:1.5em 2em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
border-radius:1em
}
.element h2 {
background:#f90;
border-bottom:1px solid #666;
/*-- Rounded corner kiri atas --*/
-moz-border-radius:.25em 0 0 0;
-webkit-border-radius:.25em 0 0 0;
border-radius:.25em 0 0 0;
display:block;
left:-1.75em;
padding:.25em 0 .25em 1.75em;
position:relative;
width:60%
}
/* Mulai membentuk ribbon */
.element h2:after, .element h2:before {
content:" ";
display:block;
position:absolute
}
/* Ribbon kanan */
.element h2:after {
top:0;
right:0;
border-top:.85em solid #f90;
border-right:.75em solid #e1e1e1;
border-bottom:.85em solid #f90;
border-left:.75em solid #f90
}
/* Ribbon kiri */
.element h2:before {
bottom:-.25em;
left:0;
border-top:none;
border-right:none;
border-bottom:.25em solid #666;
border-left:.25em solid #666;
/*-- Rounded corner kiri bawah --*/
-moz-border-radius:0 0 0 .25em;
-webkit-border-radius:0 0 0 .25em;
border-radius:0 0 0 .25empx;
z-index:-1
}

Dan berikut kode HTML yang menyertainya.

<div class="ribbon">
<h2>Ribbon</h2> <p>Pada elemen ini Anda melihat sub judul “Ribbon” dalam sebuah pita (ribbon). Adapun CSS yang digunakan seperti yang tampak di bawah ini…</p>
</div>

—Kembali ke indeks konten—

Border/line press effect

Di bawah sub judul “Border/line press effect”, Anda melihat sebuah border yang tampak seperti ditekan. Untuk membuat border tersebut, kita dapat menggunakan kode CSS sebagai berikut.

.element2 h2 {
padding:0 0 0.25em;
position:relative;
width:100%
}
.element2 h2:after {
content:" ";
position:absolute;
bottom:0;
left:0;
border-top: 1px solid #c3c3c3; /* Warna seharusnya lebih tua dari background */
border-bottom: 1px solid #f1f1f1; /* Warna seharusnya lebih muda dari background */
width:100%
}

Catatan:

Atribut width (warna biru) tidak harus 100%. Artinya jika width bernilai 80% maka left bernilai 10% (letak garis di tengah elemen).
Apabila ingin menambahkan border press di atas h2, tambahkan #element2 h2:before dengan properti yang sama. Kemudian ganti kode yang berwarna merah (bottom:0;) dengan top:0;.

Pada kasus lain, mungkin kita ingin meletakkan border di kanan atau kiri elemen.

Kiri elemen:

top:0;
left:0;
border-left:1px solid #c3c3c3;
border-right:1px solid #f1f1f1;
height:100%;

Kanan elemen:

top:0;
right:0;
border-left:1px solid #c3c3c3;
border-right:1px solid #f1f1f1;
height:100%;

Sedangkan kode HTML pada elemen ini adalah sebagai berikut.

<div class="element2">
<h2>Border/line press effect</h2> <p>Di bawah sub judul “Border/line press effect”, Anda melihat sebuah border yang tampak seperti ditekan. Untuk membuat border tersebut, kita dapat menggunakan kode CSS sebagai berikut…</p>
</div>

—Kembali ke indeks konten—

Folding angle

Anda tentu melihat efek melipat yang tepat berada di sudut kanan atas elemen ini. Adapun pengkodean CSS-nya seperti yang tampak di bawah ini.

.element3 {
background:-webkit-gradient(linear, right top, left center, from(#e1e1e1), to(#fff));
background:-moz-linear-gradient(right, #e1e1e1, #fff);
border:1px solid #c3c3c3;
padding:1.5em 2em;
position:relative
}
.element3:before, .element3:after {
content:" ";
display:block;
position:absolute;
/*-- Memutar elemen 45 derajat (searah jarum jam) --*/
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg)
}
/* Menutup sudut kiri atas elemen berbentuk segitiga */
.element3:after {
top:-2em;
right:-2em;
/*-- Warna border sama dengan warna body (di luar elemen) --*/
border-top:2em solid #eee;
border-right:2em solid #eee;
border-bottom:2em solid #eee;
border-left:2em solid #eee
}
/* Membuat segitiga efek melipat */
.element3:before {
top:0.75em;
right:0.75em;
/*-- Warna border sama dengan warna elemen (kecuali border atas, lebih tua/gelap) --*/
border-top:2em solid #c3c3c3;
border-right:2em solid #e1e1e1;
border-bottom:2em solid #e1e1e1;
border-left:2em solid #e1e1e1;
z-index:1
}

Di bawah ini merupakan kode HTML-nya.

<div class="element3">
<h2>Folding angle</h2> <p>Anda tentu melihat efek melipat yang tepat berada di sudut kanan atas elemen ini. Adapun pengkodean CSS-nya seperti yang tampak di bawah ini…</p>
</div>

—Kembali ke indeks konten—

Mirror Text

Untuk sub judul “Mirror Text” sengaja penulis perbesar agar efek cermin kelihatan jelas. Adapun CSS pseudo-element membuat efek cermin pada teks tersebut adalah sebagai berikut.

.element4 h2 {
font-size:2em;
font-weight:bold;
position: relative
}
.element4 h2:before, .element4 h2:after {
display:block;
position:absolute;
bottom:-0.75em; /* You should change this value to fit your font */
left:0;
right:0
}
.element4 h2:before {
content: "Mirror Text";
opacity:.4;
/* This is how the text is flipped vertically */
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1)
}
.element4 h2:after {
/* Fading using CSS gradient */
/* Don't forget to change the colors to your background color */
background: -webkit-gradient(linear, left top, left center, from(rgba(238,238,238,0)), to(rgba(238,238,238,1)));
background: -moz-linear-gradient(top, rgba(238,238,238,0), rgba(238,238,238,1));
/* I left out the `filter` property,
because IE doesn't know `:before` and `:after` pseudo-elements anyway */
content: " ";
height:0.75em
}

Catatan:
Beberapa kode informasi (antara /*…*/) sengaja tidak dirubah/dihapus untuk memudahkan—pelacakan—klaim link kredit nantinya. Background elemen ini bernilai #eeeeee sama dengan rgb(238,238,238) sama dengan rgba(238,238,238,1).

Adapun kode HTML yang menyertainya adalah sebagai berikut.

<div class="element4">
<h2>Mirror Text</h2> <p>Untuk sub judul “Mirror Text” sengaja penulis perbesar agar efek cermin kelihatan jelas. Adapun CSS pseudo-element membuat efek cermin pada teks tersebut adalah sebagai berikut…</p>
</div>

—Kembali ke indeks konten—

Generalisasi

Styling menggunakan CSS pseudo-element :before dan/atau :after di atas, mungkin hanya sebagian kecil dari gaya-gaya pengkodean lain. Namun tidak ada salahnya jika kita mengenal & mengetahui—gaya seperti apa—yang mampu didukung oleh CSS pseudo-element tersebut. Apalagi penggunaannya bersih dari penambahan elemen baru. Yah, hanya dengan melakukan kustomisasi pada satu elemen, kita seakan-akan membentuk 2–3 elemen.

Note:
Sampai tulisan ini diterbitkan CSS pseudo-element :before dan/atau :after ~~belum~~ didukung oleh peramban IE (Internet Explorer).

Styling Unordered & Ordered lists

2011-07-22T11:29:00.373+08:00

Secara default style daftar urut menggunakan bullent (unordered list) digambarkan dengan satu titik noktah yang cukup besar—lebih besar dari titik (“.”)—terletak didepan teks yang dilingkupinya. Sedangkan ordered List ditampilkan dalam bentuk angka (decimal).

Default List

Kita anggap saja garis vertikal di depan daftar urut berikut merupakan tepi kiri area suatu elemen.

Unordered List:

Pasti suatu masa
Kan bersama lagi
Engkau dan aku pasti jua nikmati

<ul>
  <li></li>
  <li></li>
   …dst…
</ul>

Ordered List:

Satu cinta yang indah
Walau ku tak pasti
Bilakah masanya

<ol>
  <li></li>
  <li></li>
  …dst…
</ol>

Atau kita bisa memberikan style pada CSS (Cascading Style Sheets) seperti ini ul, ol {list-style-position:outside;}.

Unordered List:

Pasti suatu masa
Kan bersama lagi
Engkau dan aku pasti jua nikmati

Ordered List:

Satu cinta yang indah
Walau ku tak pasti
Bilakah masanya

Bentuk tanda daftar urut tidak terbatas hanya pada bullent & angka (decimal), namun lebih banyak variasi yang dapat menjadi alternatif pilihan. Selengkapnya mengenai tipe-tipe lain, dapat dibaca di w3scholl.com.

Image List

Jika kode pemanggilan default style list menggunakan ul {list-style-type:...;} (unordered list) atau ol {list-style-type:...;} (ordered list), maka pemanggilan untuk daftar urut image menggunakan ul {list-style-image:url(...);} atau ol {list-style-image:url(...);}.

ul {
list-type-image:url(...);
}

Terkadang dalam kondisi tertentu (jenis peramban dan sebagainya), penggunaan style image—seperti pada contoh di atas—tidak muncul, sehingga kita membutuhkan ide lain untuk memunculkan image yang kita inginkan tersebut. Dalam arti, dapat didukung oleh tiap peramban, seperti di bawah ini:

ul {
list-style-type:none;
padding:0;
margin:0;
}

ul li {
background:url(...) 0px 5px no-repeat;
padding-left:1.5em;
}

Kau dan aku
Akan bertemu
untuk kita kembalikan keindahan dulu

Catatan:
Image list di atas menggunakan properti sebagai berikut background:url(https://lh3.googleusercontent.com/-zDVeKnycsTc/TbHMCVfkKGI/AAAAAAAAAFQ/vRaTszCrgcI/s800/feed-gray-14x14.png) 0px 5px no-repeat.

Tentang penggunaan image sebagai daftar urut antar berbagai peramban (Crossbrowser Solution), kita kunjungi kembali w3schools.

Special Character List

Styling list dengan menggunakan karakter khusus memiliki keunikan tersendiri & yang jelas ~~belum~~ di support peramban IE (Internet Explorer). Daftar ini menggunakan CSS pseudo-element :before.

pasti suatu masa, kan bersama lagi
Engkau dan aku pasti jua nikmati
Satu cinta yang indah
Walau ku tak pasti bilakah masanya
Kau dan aku akan bertemu
untuk kita kembalikan keindahan dulu

CSS (Cascading Style Sheets)

.listwithchar {
list-style:none;
list-style-position:outside;
}

.listwithchar li {
margin-bottom:0.25em;
margin-left:0;
position:relative
}

.listwithchar li:before {
content:"\25CA";
margin-right:0.75em;
padding:0 0.25em;
position:absolute
text-indent:-0.75em
}

.listwithchar li:hover:before {
content:"\221A";
padding:0 0.25em;
position:absolute
text-indent:-0.75em
}

HTML (HyperText Markup Language)

<ul class="listwithchar">
  <li></li>
  <li></li>
  …dst…
<ul>

Untuk lebih mempermudah pencarian dalam menemukan spesial karakter yang kita inginkan, berikut salah satu alamat web yang melayani kebutuhan tersebut Evotech.net.

Study Kasus: Valid HTML5 di Template Klasik

2011-07-14T19:22:00.004+08:00

Kelihatannya terdengar basi dan sudah dibahas berulang-ulang. Saya mengangkat tema ini bukan untuk berdebat tentang perlukah sebuah web/blog valid X-HTML (Extensible HyperText Markup Language) atau sejenisnya. Namun dititik-beratkan kepada suatu contoh kasus, bahwa Blogger™ ternyata dapat valid di HTML5, baik halaman depan maupun halaman posting.

Saya bukan penganut “harus valid X-HTML (I love validator)”. Bukankah tidak menjadi keliru, jika mencoba sesuatu yang mungkin dapat memberikan sebuah wacana bagi blogosphere (narablog).

Nah, sekarang mari kita melihat salah satu blog (Blogger™) yang melakukan usaha agar menjadi valid XHTML 1.1, seperti Blog milik mas Toto, terbukti valid. Terima kasih kepada Choen yang menjadi inspirasi dari penerbitan posting ini. Dan mungkin masih banyak web/blog lain yang tidak saya sebutkan di atas. :)

Bagi para blogger yang ingin melihat kasus yang saya maksudkan pada paragraf sebelumnya adalah blog yang beralamat di http://ob-template.blogspot.com/. Template tersebut menggunakan template klasik dan disusun (dicoba) menggunakan HTML5. Masih banyak kekurangan pada draft OB template tersebut, terutama pada metadata —antara <head>…</head>—serta struktur HTML5 yang masih ‘amburadul’. Mungkin Anda yang menjadi penyempurna-nya.

Update (July 22, 2011):
Ingin melihat contoh blog lain yang—jika menurut saya “sempurna”—menggunakan template klasik di Blogger™. Silakan melompat ke komentar Amdhas. Jika berkenaan bahasa program, dia merupakan salah satu yang menurut saya dapat dijadikan referensi. Optimasi Blog pun telah beeberapa kali menerbitkan posting yang merujuk ke blog dia di Blogger Admin (Blogger™) dan sekarang lagi asyik berkutat dengan “Drupal”-nya di discrimate.

Redesign: Optimasi Blog dari Masa ke Masa

2011-07-08T18:21:00.005+08:00

Berubah lagi? Betul, mungkin karena perubahan itu diperlukan untuk suatu revolusi. Saya tidak berbicara tentang politik, tapi sedang mengungkapkan narasi mengenai sebuah blog. Apakah karena Blogger^TM sudah merubah tampilannya (redesaign), maka Optimasi Blog ikut-ikutan berubah? Tidak, karena redesaign di blog ini telah lebih dulu dilakukan sebelum Blogger^TM. Kalau tidak salah release tampilan baru site Blogger^TM in draft dimulai pada hari ini (July 8, 2011).

Template yang Optimasi Blog gunakan sekarang (mencoba) menggunakan “liquid layout”—untuk mengetahui sedikit pengertiannya, silakan buka kembali posting sentuhan magic dalam blog—dan masih terkesan minimalis. Font yang digunakan full dari keluarga ‘serif’, berukuran 1em & line-height:1.5em, serta sedikit ditambah bumbu word-spacing & amp; letter-spacing.

Ngga perlu dikupas lebih dalam, ntar malah m’bosenin. Cukup diliat tampilan sekarang aja, gan. :)

‘Emang’ beda dengan yang dulu? Silakan baca sekelumit ulasan tentang ‘bunglonisasi’ template Optimasi Blog dari masa ke masa berikut ini.

Default Template (pixed layout)

Pertama sekali Optimasi Blog menggunakan default template “Minima”, kemudian sedikit demi sedikit di modifikasi, sampai ke bentuk “blogger copy template”. Template tersebut lama digunakan dari 2009–Maret 2011.

Minimalis Template (elastis layout)

Hanya ingin mencoba yang minimalis & hasilnya tidak mengecewakan. Kalau tidak salah digunkan dalam waktu yang sebentar dari Maret 2011–Juli 2011.

Template sekarang digunakan (liquid layout)

Yah, sekedar trial & error dengan layout yang berbeda. Template ini mengadopsi banyak alternatif untuk menanamkan widget/gadget, mungkin di atas, di kanan, atau di bawah.

Seperti kata saya di atas bahwa mungkin perubahan itu diperlukan untuk suatu revolusi. Kira-kira perubahan seperti apa yang dimaksudkan oleh kalimat tersebut? Dan sampai kapan template ini digunakan oleh Optimasi Blog?

Kostumisasi Penomoran pada Komentar Blogger™

2011-06-30T03:31:00.013+08:00

Credits

Posting ini merupakan repost dari penulis Blognya Firdaus | eosBlog 2.0, sedangkan sumber asli berasal dari blog Randomness yang dipostkan oleh Fernandooo1. Namun sayang blog dari penulis asli tersebut tidak dapat lagi diakses, mungkin telah dihapus oleh pemiliknya. Fernandooo1 mengatakan bahwa script penomoran komentar tersebut didapat dari seorang kawannya, yakni JMiur yang memiliki blog Vagabundia berasal dari Buenos Aires, Argentina.

Menambah nomor urut komentar

Anda mungkin sudah tidak asing lagi dengan judul trik blogger di atas. Yah, berita lama (± tahun 2008) yang mungkin terlupakan, tapi tidak ketinggalan zaman. Perbedaan tampilan & tata letak pada trik ini hanya merupakan hasil kostumisasi dari kode/script aslinya.

Tambahkan CSS (Cascading Style Sheets) berikut di atas ]]></b:skin>.

.numberingcomments {
float:right;
text-align:right;
display:block;
width:50px;
margin:0 5px 0 0;
font-size:1em;
font-weight:normal;
}

Untuk merubah letak nomor ke kanan (right) atau ke kiri (left) dapat Anda lihat pada atribut kode yang berwarna biru.
Kode yang diberi background kuning, mungkin bisa Anda hilangkan atau jika Anda memerlukan properti tersebut, silakan dibiarkan apa adanya.
Untuk mengatur letak nomor agar sesuai dengan keinginan Anda, silakan rubah nilai properti kode yang diberi warna merah [dimulai dari 0 (atas), 5px (kanan), 0 (bawah), 0 (kiri)].
Warna hijau menunjukkan nilai properti untuk mengatur ukuran font.

Dan berikut merupakan kode HTML (HyperText markup Language) dari penomoran komentar.

      <div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
             <b:if cond='data:comment.favicon'>
               <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
             </b:if>
               <a expr:name='data:comment.anchorName'/>
             <b:if cond='data:blog.enabledCommentProfileImages'>
               <data:comment.authorAvatarImage/>
             </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>

<span class='numberingcomments'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</span>

            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>

Sisipkan kode yang berwarna merah di antara kode-kode di atas.

HTML di atas hanya akan memberikan nomor urut tidak termasuk permalink komentar. Oleh karena permalink komentar sudah terwakili oleh timestamp komentar.

                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>

Apabila Anda ingin menerapkan nomor urut komentar sebagai permalink komentar, maka cukup mengambil kode yang berwarna merah pada timestamp & letakkan pada script seperti yang tampak di bawah ini.

<span class='numberingcomments'>
<a expr:href='data:comment.url' title='comment permalink'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Kostumisasi nomor urut komentar

Jika Anda telah melakukan kostumisasi avatar komentar dengan meletakkannya di sebelah kanan, mungkin lebih baik meletakkan nomor komentar di sebelah kiri. Anda perlu sedikit merubah & menambah CSS penomoran komentar, seperti:

.numberingcomments {
float:left;
text-align:right;
display:block;
margin-left:-50px;
font-size:1em;
font-weight:normal;
}

.numberingcomments:after {content:"."}

Silakan Anda melakukan trial & error, baik menambah dan/atau mengurangi kode CSS penomoran komentar, sampai Anda menemukan posisi yang tepat untuk meletakkan nomor urut tersebut.

—ς∞ς—

Suka dengan tampilan dan/atau isi artikel ini. Atau mungkin Anda lebih menyukai tampilan & isi artikel disana. Silakan vote 1–2 pilihan tergantung penilaian Anda:

Optimasi Kotak Komentar Blogger™

2011-06-28T04:21:00.010+08:00

Anda tentu sudah baca posting tentang “Kostumisasi Avatar Komentar”, “Tahukah Anda?”, & “Trik Blogger | Mengatur Tataletak Link to This Post”, kalau belum buruan menuju TKP (Tempat Kerjaan Para blogger). Oleh karena posting berikut, mungkin berhubungan dengan tautan judul posting di atas.

Merubah lebar kotak komentar

Tambahkan CSS (Cascading Style Sheets) berikut di atas ]]></b:skin>.

.comment-form {
width:425px;
max-width:425px;
overflow:auto;
clear:both;
}

Catatan: Tambahkan jika CSS tersebut belum include dalam CSS template blog Anda. Kemudian silakan rubah nilai atribut yang berwarna merah, bisa dengan menggunakan satuan px, em, %, atau pt. Atribut width berfungsi untuk mengatur ‘lebar’ suatu elemen, sedangkan max-width digunakan untuk mengatur ‘lebar maksimal’ suatu elemen.

Aksesoris kotak komentar

1. Menambah teks sebelum kotak komentar

Figure 1. Menambah teks sebelum kotak komentar (panah hitam)

      <h2 id='comment-post-message'><data:postCommentMsg/></h2>
<p>Silakan berkomentar, tapi jangan memasukkan SPAM yah…</p>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

Catatan: Kode yang berwarna merah merupakan kode yang dicari, sedangkan yang berwarna hijau merupakan sisipan teks untuk menambah informasi di atas kotak komentar. Default untuk kode yang berwarna merah adalah <h4 id='comment-post-message'><data:postCommentMsg/></h4>.

2. Menambah variasi teks atau gambar di samping kotak komentar

Sebelum Anda mencoba menambah variasi teks maupun gambar di samping kotak komentar, terlebih dahulu Anda perlu meninjau lebar—dengan atribut width—elemen komentar (#comments) & lebar kotak komentar (.comment-form) pada CSS template blog Anda. Jika lebar yang Anda tinjau sudah terasa cukup untuk dapat menampung elemen baru, mari kita lanjut ke langkah berikutnya. Yang perlu di garis-bawahi, bahwa konsep berikut hanya merupakan ‘contoh’ atau tidak bersifat ‘mutlak’.

Coba Anda lihat gambar di atas (Figure 1), perhatikan yang diberi tanda panah berwarna merah. Mungkin seperti itulah penambahan yang saya maksudkan & bentuknya lebih kurang terlihat pada model di bawah ini.

You still on the focus. Enjoy with Blogger™ commenting system. Please, don't include spam. .......

You still on the focus. Enjoy with Blogger™ commenting system. Please don't include spam.......

Untuk membuat aksesoris seperti di atas, maka Anda perlu menambahkan kode CSS maupun HTML dalam template blog Anda.

Kode CSS

.intermezzo {
float:right;
width:32%;
margin-top:8em;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.intermezzo .first-letter {
float:left;
line-height:0.5em;
padding:0.175em 0.15em 0.0175em 0;
font-size:5em;
}
.intermezzo .first-line {
margin-left:-5.75em;
}
.intermezzo .enjoy {
display:block;
font-variant:small-caps;
font-weight:bold;
}
.intermezzo .type-s {
padding:0.175em 0 0;
font-size:6.15em;
vertical-align:-0.35em;
}
.intermezzo .end-letter .hidden-s {
color:#fafafa;
display:block;
position:absolute;
left:-1.75em;
}
.intermezzo .end-letter {
text-transform:uppercase;
font-size:2em;
margin:-0.225em 0 0 2.225em;
display:block;
position:absolute;
}
.intermezzo .dot {
font-size:1.5em;
bottom:-1.5em;
margin-left:6em;
display:block;
position:absolute;
}
.dot .dot-1 {
bottom:-0.5em;
display:block;
position:absolute;
}
.dot .dot-2 {
bottom:-1em;
display:block;
position:absolute;
margin-left:-0.25em;
}
.dot .dot-3 {
bottom:-1.5em;
display:block;
position:absolute;
margin-left:-0.75em;
}
.dot .dot-4 {
bottom:-2em;
display:block;
position:absolute;
margin-left:-1.525em;
}
.dot .dot-5 {
bottom:-2.5em;
display:block;
position:absolute;
margin-left:-2.5em;
}
.dot .dot-6 {
bottom:-3em;
display:block;
position:absolute;
margin-left:-3.75em;
}

Letakkan kode tersebut di atas ]]></b:skin>.
Warna biru menunjukkan bahwa kode CSS tersebut cocok untuk template “Optimasi Blog” & belum tentu balance dengan template blog Anda. Apabila Anda memaksa untuk tetap menggunakan CSS di atas, mungkin Anda perlu pula merubah nilai atribut dari masing-masing ‘markup’-nya, baik sebagian maupun keseluruhan. Dan jika Anda beruntung, berarti Anda tidak perlu merubah kode CSS tersebut.
Warna merah merupakan kode yang mungkin perlu dirubah agar sesuai dengan template blog Anda. width menunjukkan lebar elemen & margin-top menunjukkan jarak margin suatu elemen dengan bidang di atasnya.
Warna hijau merupakan sintaksis dari transformasi memutar suatu elemen dalam CSS3.

Kode HTML

<p class='intermezzo'><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger™ commenting system.</span></span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span></p>

Letakkan kode HTML tersebut di atas kode berikut.

      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>

      </p>
    </b:if>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

Apabila Anda memulai pencarian dengan kode <p class='comment-footer'>, maka Anda akan menemui 2 (dua) kode. Pilihlah yang kedua!
Untuk menjaga format komentar agar tidak berantakan, Anda dapat menambahkan kode <div style='clear:both;'></div> di atas kode HTML <p class='intermezzo'>.

Update (June 29, 2011): Ketika Anda melakukan pengaturan bahwa komentar tidak di-izinkan karena suatu sebab atau lain hal, mungkin aksesoris teks/gambar di samping kotak komentar tidak diperlukan lagi. Tambahkan kode berikut (warna merah) di-antara HTML .intermezzo.

<div style='clear:both;'></div>
<p class='intermezzo'><b:if cond='data:post.allowNewComments'><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger<sup>™</sup> commenting system</span>.</span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span></b:if></p>

Update (June 29, 2011): Di halaman statis kok muncul juga? Tambahkan kode berwarna biru berikut di-antara HTML .intermezzo.

<div style='clear:both;'></div>
<b:if cond='data:blog.pageType != "static_page"'><p class='intermezzo'><b:if cond='data:post.allowNewComments'><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger<sup>™</sup> commenting system</span>.</span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span></b:if></p></b:if>

Kemudian rubah CSS .comment-form menjadi (lihat kode berwarna merah):
```
.comment-form {
width:…;
max-width:…;
overflow:auto;
clear:left;
}
```
dot…dot…dot tergantung isian nilai yang telah Anda masukkan.

Seperti ucapan sebelumnya, Anda pun bisa berkreasi dengan variasi kode dan/atau bentuk lain sesuai dengan keinginan & mungkin dapat merebut simpati pengunjung di blog Anda.

Kostumisasi Avatar Komentar

2011-06-23T19:46:00.006+08:00

Kenapa “gambar avatar komentar” di Blogger™ Anda kelihatan lebih besar? Kenapa juga letaknya berbeda dengan default Blogger™?

Dalam Blogger™ terdapat kode-kode embeded—kode perintah spesifik oleh pihak developer untuk menunjang kinerja mesin blogger—yang berfungsi mengatur secara default tampilan blog. Nah, termasuk didalamnya adalah pengaturan tampilan komentar (red=“bukan formulir komentar”). Silakan Anda koreksi, jika frase kata yang berwarna merah (dalam tanda kutip) keliru.

Apabila Anda ingin mengetahui kode CSS embeded tersebut, coba buka blog Anda & tekan tombol Ctrl + U pada papan ketik. Mungkin Anda akan melihat kode seperti ini:

<link type='text/css' rel='stylesheet' href='http://www.blogger.com/static/v1/widgets/129348724-widget_css_bundle.css' />

Dari bundle CSS di atas akan kita temui kode avatar komentar sebagai berikut.

#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
}

#comments-block .avatar-image-container.avatar-stock img {
border-width:0;
padding:1px;
}

#comments-block avatar-image-container {
height:37px;
left:-45px;
position:absolute;
width:37px;
}

Kode yang berwarna hijau dapat Anda lihat tampilannya pada komentar klasik Blogger™. Sedangkan yang berwarna merah merupakan tampilan avatar komentar di bawah posting.

Memperbesar gambar avatar

Untuk memperbesar gambar avatar pada komentar di bawah posting, maka kita akan menggunakan kode CSS yang berwarna merah & letakkan di atas ]]></b:skin>.

#comments-block avatar-image-container {
height:37px;
left:-45px;
position:absolute;
width:37px;
}

Catatan: Silakan dirubah nilai atribut height & width—ditandai dengan warna merah—sesuai dengan keinginan Anda. Kembali ke ulasan “mengganti gambar blank”

Merubah letak avatar

Lihat kembali kode untuk “memperbesar gambar avatar”, kemudian ganti atribut left—ditandai dengan warna biru—sesuai dengan letak yang Anda inginkan. Nilai minus (-) berarti avatar akan bergeser ke kiri. Sebaliknya jika nilai yang dimasukkan positif, maka avatar akan bergeser ke kanan.

Anda dapat pula menambahkan atribut lainnya, contoh margin:2em 0 -2px 0;. Artinya avatar akan bergeser ke bawah sejauh 2 ems dari tempatnya semula, sedangkan nilai -2px hanya sekedar untuk menyelaraskan kode CSS avatar dengan CSS inline dalam HTML komentar seperti di bawah ini (hanya untuk diketahui saja).

<b:if cond='data:comment.favicon'>
  <img expr:src='data:comment.favicon' height='32px' style='margin-bottom:-2px;' width='32px'/>
</b:if>

Mengganti gambar blank

Tampilan blank pada avatar akan terjadi jika pengomentar menggunakan identitas “Anonymous” atau “Name/URL” atau tidak memiliki gambar avatar pada identitasnya. Untuk mengganti gambar blank dengan gambar yang Anda inginkan, maka kode yang digunakan adalah sebagai berikut:

#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
}

Tambahkan atribut:

background:url('alamat penyimpanan gambar avatar') no-repeat;
height:37px;
width:37px;

Silakan ubah alamat & nilai dari masing-masing atribut yang ditandai dengan warna hijau. Dan agar tampilan gambar lebih bagus, sebaiknya gambar avatar yang Anda upload berukuran sama dengan atribut height & width pada ulasan “memperbesar gambar avatar”.

Hasilnya akan terlihat seperti di bawah ini.

#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
background:url('alamat penyimpanan gambar avatar') no-repeat;
height:37px;
width:37px;
}

Kemudian letakkan di atas kode ]]></b:skin>.

Mempercantik avatar dengan CSS3

Terakhir, untuk mempercantik tampilan avatar komentar dapat menggunakan CSS3, antara lain rounded corner & box shadow.

#comments-block .avatar-image-container img {
-ms-interpolation-mode:bicubic;
border:1px solid #ccc;
float:right;
background:url('alamat penyimpanan gambar avatar') no-repeat;
height:37px;
width:37px;
border-radius:5px;
box-shadow:2px 2px 5px #666666;
}

Catatan:
Atribut CSS yang berwarna biru merupakan penyisipan dari tag “Mengganti gambar blank” di atas.

Anda pun bisa melakukan kostumisasi lain, sehingga tampilan avatar komentar mampu mewakili keinginan dan kebutuhan Anda.

Mengganti Nextprev dengan Judul Posting

2011-06-11T06:35:00.009+08:00

Seperti bunyi paragrap terakhir dalam posting “Tahukah Anda?”, elemen nextprev (blog-pager) dalam Blogger™ dapat diterjemahkan sebagai navigasi yang meliputi ke posting lebih baru, home, & posting lama. Defaultnya, elemen nextprev terletak di akhir seluruh posting pada halaman home & di bawah form komentar pada halaman posting.

Berikut merupakan kode CSS (Cascading Style Sheets) untuk elemen nextprev.

#blog-pager-newer-link {
float:left;
}
#blog-pager-older-link {
float:right;
}
#blog-pager {
text-align:center;
}

Sedangkan markup HTML (HyperText Markup Language) untuk elemen tersebut, dapat ditunjukkan seperti di bawah ini :

    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Nah, sekarang bagaimana cara merubah agar tampilan posting lebih baru, home, & posting lama menjadi judul posting? Silakan Anda simak tutorial berikut yang bersumber pada postingan di blog ETBlue.

Langkah Pertama

Login ke akun blogspot Anda.
Pilih Rancangan → Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template Anda yang ada dengan mengklik tulisan “Download Template Lengkap”. Kemudian simpan dalam hardisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan, Anda sudah memiliki back-up untuk mengembalikannya seperti semula.

Masukkan script berikut di atas </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Tips : Kalau susah mencarinya, coba tekan tombol F3 atau Ctrl + F di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (firefox), sehingga Anda tinggal memasukkan kata yang ingin dicari.

Opsional: Anda dapat menambah CSS blog-pager dengan tag berikut:

#blog-pager-newer-link:before {
content:"\00ab";
}
#blog-pager-older-link:after {
content:"\00bb";
}

Mungkin artinya adalah memasukkan entitas HTML dengan karakter numerik « («) sebelum #blog-pager-newer-link dan karakter » (») sesudah #blog-pager-older-link.

~~Simpan template.~~
~~Pilih Rancangan → Elemen Laman → Tambah gadget (“HTML/Javascript”).~~
~~Masukkan jquery seperti di bawah ini:~~

<script type="text/javascript">
$(document).ready(function(){ 
var newerLink = $("a.blog-pager-newer-link").attr("href"); 
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() { 
var newerLinkTitle = $("a.blog-pager-newer-link").text(); 
$("a.blog-pager-newer-link").text(newerLinkTitle); 
}); 
var olderLink = $("a.blog-pager-older-link").attr("href"); 
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { 
var olderLinkTitle = $("a.blog-pager-older-link").text(); 
$("a.blog-pager-older-link").text(olderLinkTitle);//rgt 
}); 
}); 
</script>

Update (July 01, 2011) jquery di atas dapat juga Anda letakkan di atas </body>, melalui “Edit HTML”.
Simpan template.
Lihat Blog Anda.

Langkah Kedua

Antisipasi Tampilan Navigasi nextprev

Apabila Anda telah melakukan “Langkah Pertama”, maka navigasi nextprev (blog-pager) hanya akan menampilkan link “Home” pada halaman utama, pencarian (halaman pertama), & klik label (halaman pertama). Sebagai alternatif pilihan, mungkin Anda tidak menampilkan navigasi nextprev pada halaman-halaman tersebut. Caranya adalah dengan menambahkan kode optimasi tampilan widget dalam “Edit HTML”, seperti berikut:

  <!-- navigation -->
  <b:if cond='data:mobile'>
    <b:include name='mobile-nextprev'/>
  <b:else/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/>
<b:else/>
</b:if>
<b:else/>
</b:if>

    <!-- feed links -->
    <b:include name='feedLinks'/>
  </b:if>

Kode yang berwarna merah merupakan penambahan kode yang dimaksud.

Kostumisasi nextprev

Ketika menampilkan judul posting yang panjang, maka tampilan navigasi nextprev akan berantakan. Bagaimana cara memperbaikinya? Hal itu telah diulas dalam update 19 Pebruari 2010 di blog ETBlue, yakni dengan menmbahkan beberapa atribut dalam CSS blog-pager.

#blog-pager {
font-size:…em;
}
#blog-pager-older-link, #blog-pager-newer-link {
width:…px;
line-height:…em;
height:…em;
overflow:hidden;
}

Silakan isi dot…dot…dot dengan nilai (angka) yang sesuai dengan struktur blog Anda

Menghilangkan Link “Home”

Hapus kode yang berwarna merah pada mode “Edit HTML”.

    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Opsional: Ditindak-lanjuti mengganti CSS blog-pager.

#blog-pager-newer-link {
float:left;
}
#blog-pager-older-link {
float:right;
}
#blog-pager {
text-align:center;
}

Ganti semua CSS di atas dengan kode di bawah ini.

.blog-pager-newer-link {
margin-right:1.5em;
}
.blog-pager-older-link {
margin-left:1.5em;
}

Catatan

Khusus untuk “Langkah Kedua”, Anda dapat menerapkannya atau tidak sama sekali. Jika Anda melakukan “Langkah Kedua”—dari beberapa alternatif tersebut—maka Anda dapat menerapkan seluruhnya, sebagian (kombinasi), atau salah satu saja. Mungkin Anda dapat juga melakukan kostumisasi navigasi nextprev dengan beberapa variasi lainnya.

Update

Apabila ingin membuat tampilan yang berbeda, Anda bisa melakukan beberapa kostumasi, seperti pada ulasan di bawah ini:

CSS untuk blog-pager.

.blog-pager-newer-link {
margin:0;
}

.blog-pager-older-link {
margin:0;
}

#blog-pager {
font-size:…em;
text-align:left;
margin:0;
padding:0;
}

Silakan diganti nilai untuk … & margin maupun padding, sesuai dengan template blog Anda.

HTML untuk blog-pager.

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <p class='blog-pager-newer-link'>Posting terbaru: 
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </p>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <p class='blog-pager-older-link'>Posting lama: 
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </p>
    </b:if>

Kode yang berwarna merah merupakan markup yang dicari & warna hijau merupakan markup yang telah diganti dengan tag paragraf (<p>).

Peletakkan nextprev

Dimana posisi yang baik untuk meletakkan blog-pager? Kembali kepada selera masing-masing. Sedangkan menurut saya sendiri, peletakkan nextprev sebaiknya seperti default-nya atau di bawah posting. Kode HTML yang perlu Anda cari adalah sebagai berikut.

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/>
<b:else/>
</b:if>
<b:else/>
</b:if>

Kode berwarna merah merupakan markup yang dicari & jika Anda belum menambahkan kode yang menyertainya, silakan ditambah dulu sama dengan seperti tampilan kode di atas. Selanjutnya pindahkan (cut) kode tersebut tepat di atas kode berikut ini.

        <b:if cond='data:blog.pageType == "static_page"'>
          <b:include data='post' name='comments'/>
        </b:if>
        <b:if cond='data:blog.pageType == "item"'>
          <b:include data='post' name='comments'/>
        </b:if>

Simpan template & sekarang blog-pager Anda telah berpindah di bawah posting. Untuk memperbaiki tampilannya, Anda tinggal melakukan improvisasi pada kode CSS blog-pager.

Mohon maaf, posting ini tidak disertai dengan gambar. Versi demo dapat Anda lihat pada navigasi nextprev di Optimasi-Blog.

Tahukah Anda?

2011-06-06T11:08:00.011+08:00

Tahukah Anda, jika tampilan berikut bukan merupakan image (gambar)? Mungkin kita telah melihatnya pada web/blog yang pernah dikunjungi & mengira itu adalah image.

-—♦—ς∞ς—♦—-

O p timasi - Blog

-—♦—ς∞ς—♦—-

Tampilan seperti border merupakan kumpulan beberapa HTML entities, contoh: —ς∞ς—. Sedangkan di tengahnya merupakan terjemahan dari kode CSS dengan menggunakan beberapa atribut, antara lain: font-size, font-style, serta margin-left & vertical-align yang bernilai negatif.

Tahukah Anda, bahwa tampilan blog-pager (nextprev)—diterjemahkan dengan “Newer Post” & “Older Post” (“Posting lebih baru” & “Posting lama”)—dapat diganti dengan title (judul) posting? Jika ingin mencobanya, silakan menuju artikel tentang “Mengganti Nextprev dengan Judul Posring”

Otomatis Update Posting di Facebook dan Twitter

2011-06-01T21:47:00.005+08:00

Hampir semua narablog memiliki akun facebook dan/atau mungkin pula akun twitter. Tidak jarang kita menggunakan website social network tersebut sebagai salah satu aktivitas keseharian, baik hanya sekedar ngobrol maupun kegiatan yang lain. Dalam dunia blog, facebook & twitter mungkin lebih dikenal dengan istilah sebagai “ajang promosi”.

Bagaimana Anda melakukan update di facebook & twitter, jika posting telah diterbitkan di blog Anda? Mungkin Anda akan mengunjungi ke kedua website social network tersebut dan melakukan update secara manual. Salah satu alternatif agar posting yang diterbitkan akan ter-update secara otomatis di akun facebook & twitter Anda adalah dengan menggunakan layanan twitterfeed.

Twitterfeed merupakan web penyedia layanan update posting otomatis, baik di facebook maupun twitter. Update posting itu dilakukan dengan mengirimkan feed—suatu format data yang digunakan untuk menyediakan pembaharuan konten—ke website social network tersebut.

Caranya cukup mudah, Anda tinggal mendaftar di Twitterfeed dan memasukkan feed blog Anda dengan benar. Kemudian Anda perlu melakukan penambahan autority (wewenang) ke akun facebook & twitter, agar feed yang dikirim melalui twitterfeed dapat diterima dengan baik oleh kedua website social network tersebut. Anda pun dapat melakukan kostumisasi feed (update posting), seperti: menampilkan judul posting saja dan/atau disertai dengan ringkasan pendek isi posting.

Berikut ini merupakan “penampakkan” (screenshot) update posting yang dimaksud pada uraian di atas.

Twitterfeed via facebook

Twitterfeed via twitter

Widget Update via Twitter

2011-04-30T05:30:00.009+08:00

Twitter merupakan jejaring sosial yang menawarkan fitur microblog (posting pendek, kurang dari 200 karakter) yang memungkinkan penggunanya untuk mengirim & membaca pesan (tweets). Pengguna dapat menulis pesan berdasarkan topik dengan menggunakan ‘hashtags’ (#). Sedangkan untuk menyebutkan atau membalas pesan dari pengguna lain bisa menggunakan tanda ‘at’ (@).

Sekarang, bagaimana cara memasang widget “update via twitter” dalam blog? Anda dapat melakukannya melalui dua cara, otomatis atau manual. Ketika Anda memilih “otomatis”, maka yang perlu Anda lakukan adalah mengunjungi situs Twitter Resources & dibutuhkan beberapa kostumasi, agar widget yang Anda inginkan tampil maksimal dalam blog.

Apabila Anda memilih “manual”, maka terdapat beberapa langkah yang harus dipenuhi.

Download atau copypaste script blogger.js melalui situs resminya, yang tampak seperti di bawah ini:

function twitterCallback2(c){var a=[];for(var d=0;d<c.length;d++){var e=c[d].user.screen_name;var b=c[d].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,function(f){return'<a href="'+f+'">'+f+"</a>"}).replace(/\B@([_a-z0-9]+)/ig,function(f){return f.charAt(0)+'<a href="http://twitter.com/'+f.substring(1)+'">'+f.substring(1)+"</a>"});a.push('<li><span>'+b+'</span> <a style="font-size:85%;" href="http://twitter.com/'+e+"/statuses/"+c[d].id_str+'">'+relative_time(c[d].created_at)+"</a></li>")}document.getElementById("twitter_update_list").innerHTML=a.join("")}function relative_time(c){var b=c.split(" ");c=b[1]+" "+b[2]+", "+b[5]+" "+b[3];var a=Date.parse(c);var d=(arguments.length>1)?arguments[1]:new Date();var e=parseInt((d.getTime()-a)/1000);e=e+(d.getTimezoneOffset()*60);if(e<60){return"less than a minute ago"}else{if(e<120){return"about a minute ago"}else{if(e<(60*60)){return(parseInt(e/60)).toString()+" minutes ago"}else{if(e<(120*60)){return"about an hour ago"}else{if(e<(24*60*60)){return"about "+(parseInt(e/3600)).toString()+" hours ago"}else{if(e<(48*60*60)){return"1 day ago"}else{return(parseInt(e/86400)).toString()+" days ago"}}}}}}};

Script di atas sudah dikompres melalui Yui Compressor. Anda pun bisa menambah & memodifikasi kode yang berwarna merah, contoh: <span> menjadi <span style="color:#333333; font-size:1em;"> dan sebagainya.

Simpan script tersebut dalam situs layanan penyimpanan file Anda, seperti: Google Code atau simpan dalam media penyimpanan Anda.

Twitter menyediakan beberapa script yang bisa kita manfaatkan menjadi widget, antara lain:

User Timeline
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&amp;count=5"></script>

Public Timeline
<script type="text/javascript" src="http://twitter.com/statuses/public_timeline.json?callback=twitterCallback2&amp;count=5"></script>

User Favorite
<script type="text/javascript" src="http://twitter.com/favorites/username.json?callback=twitterCallback2&amp;count=5"></script>

User Search
<script type="text/javascript" src="http://search.twitter.com/search.json?tag=jython&from=username&rpp=5&callback=twitterCallback2"></script>

Silakan ganti kode yang berwarna merah dengan username Anda.

Misalnya, Anda ingin memasang user timeline maka yang Anda lakukan adalah menambahkan kode berikut dalam “Add/tambah gadget” blogger:

<div id="twitter_div">
<ul id="twitter_update_list">
</ul>
<p>@<a href="###" title="Follow me">username</a> on Twitter</p>
</div>
<script type='text/javascript'>
//<![CDATA[
function twitterCallback2(c){var a=[];for(var d=0;d<c.length;d++){var e=c[d].user.screen_name;var b=c[d].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,function(f){return'<a href="'+f+'">'+f+"</a>"}).replace(/\B@([_a-z0-9]+)/ig,function(f){return f.charAt(0)+'<a href="http://twitter.com/'+f.substring(1)+'">'+f.substring(1)+"</a>"});a.push('<li><span>'+b+'</span> <a style="font-size:85%" href="http://twitter.com/'+e+"/statuses/"+c[d].id_str+'">'+relative_time(c[d].created_at)+"</a></li>")}document.getElementById("twitter_update_list").innerHTML=a.join("")}function relative_time(c){var b=c.split(" ");c=b[1]+" "+b[2]+", "+b[5]+" "+b[3];var a=Date.parse(c);var d=(arguments.length>1)?arguments[1]:new Date();var e=parseInt((d.getTime()-a)/1000);e=e+(d.getTimezoneOffset()*60);if(e<60){return"less than a minute ago"}else{if(e<120){return"about a minute ago"}else{if(e<(60*60)){return(parseInt(e/60)).toString()+" minutes ago"}else{if(e<(120*60)){return"about an hour ago"}else{if(e<(24*60*60)){return"about "+(parseInt(e/3600)).toString()+" hours ago"}else{if(e<(48*60*60)){return"1 day ago"}else{return(parseInt(e/86400)).toString()+" days ago"}}}}}}};
//]]>
</script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&amp;count=5"></script>

atau

<div id="twitter_div">
<ul id="twitter_update_list">
</ul>
<p>@<a href="###" title="Follow me">username</a> on Twitter</p>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&amp;count=5"></script>

Ganti kode yang berwarna merah dengan alamat twitter & username Anda.

Sekarang bandingkan widget timeline Anda tersebut dengan akun profil timeline Anda di Twitter

Demo tampilan widget “timeline via twitter” dapat Anda lihat pada posting widget update.

@Optimasi_Blog on Twitter

Google Web Fonts

2011-04-15T19:47:00.002+08:00

Font yang digunakan dalam blog ini berukuran 120% (setara dengan 1.2em) dan mengadopsi google web fonts yang berbasis keluarga ‘serif’ (font:120% 'Crimson Text', georgia, serif;). Sedangkan pada title blog digunakan google web fonts tangerine, masih termasuk juga ke dalam keluarga ‘serif’.

Dalam template blogspot, google web fonts otomatis dapat di load melalui Rancangan (Design)→“Perancang Template” (baca posting: Font untuk Template Blogger). Untuk dapat menggunakan fitur ini, template blog Anda harus memiliki elemen variable definitions, contoh:

   <Variable name="bodyfont" description="Body Text Font"
             type="font" default="normal normal 80% Georgia, Serif" value="normal normal 80% Georgia, Serif">
   <Variable name="outerfont" description="Outer Text Font"
             type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">

Bagaimana jika tanpa variable definitions?

Silakan kunjungi WebFont Loader di Google Font API (Application Programming Interface) untuk mengetahui keterangan selengkapnya. Selanjutnya, masukkan script berikut di atas </head>.

<script type="text/javascript">
      WebFontConfig = {
        google: { families: [ 'Tangerine', 'Cantarell' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
    </script>

Ganti kode script yang berwarna merah dengan google web fonts yang Anda gunakan.

Kemudian tambahkan CSS (Cascading Style Sheet) seperti yang tampak di bawah ini, bermanfaat apabila koneksi sedang ‘lemot’. Letakkan di atas ]]></b:skin>.

      .wf-loading p {
        font-family: serif;
      }
      .wf-inactive p {
        font-family: serif;
      }
      .wf-active p {
        font-family: 'Tangerine', serif;
      }
      .wf-loading p {
        font-family: serif;
        font-size: 16px;
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px;
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px;
      }

Ganti kode yang berwarna merah dengan google web fonts yang Anda gunakan.
Jika script tidak aktif (koneksi ‘lemot’) maka akan ditampilkan font ‘serif’ dengan ukuran 16px.

Anda pun dapat mengganti nilai dari CSS tersebut, sesuai dengan keinginan Anda.

Dropdown Menu (Navigasi Horizontal) dengan CSS3

2011-04-07T17:53:00.017+08:00

“Salam persahabatan”,
mungkin seperti itulah salam pembuka atau salam penutup dari sang empu tutorial ini. Anda mungkin kenal, bahkan mungkin juga telah menjadi salah satu sahabatnya dalam GFC.

Gambar 1. Screenshot dropdown menu horizontal dengan CSS3.

Trik blogger ini mungkin agak berbeda dengan posting aslinya¹ (sama caranya), karena menu horizontal di sini tidak menggunakan image & ditambahkan form pencarian — mempercantik search button dengan CSS3 oleh Rudy — di kanannya.

Letakkan kode CSS3 berikut di atas ]></b:skin>.

/*-- NAV --*/
nav {
width:100%;
background:#585858;
font:14px Sans-Serif;
letter-spacing:0.03em;
position:relatif;
overflow:hidden;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 2px 4px rgba(0,0,0, .4);
-moz-box-shadow: 0 2px 4px rgba(0,0,0, .4);
}
/* main level */
#menu-nav{
width:500px;
float:left;
margin:0;
padding: 7px 6px 0;
position:absolute;
}
#menu-nav li {
line-height:1.5em;
float:left;
list-style:none;
margin:0 auto;
padding:0 5px 8px;
position:relatif;
}
#menu-nav a, #menu-nav a:visited {
color:#e7e5e5;
text-decoration:none;
padding:  3px 16px;
border:solid 1px transparent;
display:block;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#menu-nav a.current, #menu-nav li:hover > a {
background:#E6E6E6;
color:#444444;
text-decoration:none;
border:outset 1px #f2f2f2;
-webkit-box-shadow: 0 1px 1px #585858;
-moz-box-shadow: 0 1px 1px #585858;
box-shadow: 0 1px 1px #585858;
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#menu-nav ul li:hover a, #menu-nav li:hover li a {
color:#666666;
background:none;
border:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-nav ul a:hover {
background: #0078ff !important;
color: #fafafa !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 0 #dddddd;
}
/* dropdown */
#menu-nav li:hover > ul {
display: block;
z-index:1;
}
/* level 2 list */
#menu-nav ul {
display: none;
margin: 0;
padding: 0;
width: 180px;
position: absolute;
top: 40px;
left:auto;
background:#f2f2f2;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#menu-nav ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-nav ul a {
text-shadow: 0 1px 0 #fafafa;
}
/* level 3+ list */
#menu-nav ul ul {
left: 90px;
top: auto;
position: absolute;
}
/* rounded corners of first and last link */
#menu-nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#menu-nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#menu-nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-nav {
display: inline-block;
}
html[xmlns] #menu-nav {
display: block;
}
* html #menu-nav {
height: 1%;
}

/*-- SEARCH --*/
#search {
width: 240px;
float: right;
margin: 0;
padding: 3px 8px; }

.searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #5e6366;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #71787b;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}

.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}

.searchform .searchfield {
background: #d5d5d5;
padding: 6px 6px 6px 8px;
width: 180px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #555;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}

Sesuaikan kode yang berwarna merah (width) dengan lebar blog Anda. Kemudian silakan mengganti kode - kode yang berhubungan dengan pewarnaan, baik menggunakan hex triplet (ex: #ff0000), color name (ex: red), RGB {ex: rgb(255, 0, 0)}, atau RGBA {ex: rgba(255, 0, 0, 0.5)}.

Kemudian letakkan kode HTML seperti yang tampak di bawah ini, di sekitar elemen header blog Anda (bisa di atas, di dalam, maupun di bawah elemen header tersebut).

<nav>
<ul id='menu-nav'>
<b:if cond='data:blog.url != "#"'>
<li><a href='#' title='Beranda'>Home</a></li>
<b:else/>
<li><a class='current' href='#' title='Anda sekarang berada di halaman Beranda'>Home</a></li>
</b:if>
<b:if cond='data:blog.url != "#"'>
<li><a href='#' title='Tentang Penulis'>About</a></li>
<b:else/>
<li><a class='current' href='#' title='Anda sekarang berada di halaman Tentang Penulis'>About</a></li>
</b:if>
<li><a href='#'>Untuk Percobaan</a>
    <ul>
    <li><a href='#'>kosong</a></li>
    <li><a href='#'>kosong</a>
        <ul>
        <li><a href='#'>kosong</a>
            <ul>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            </ul>
        </li>
        <li><a href='#'>kosong</a></li>
        <li><a href='#'>kosong</a></li>
        <li><a href='#'>kosong</a>
            <ul>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            </ul>
        </li>
        </ul>
    </li>
    <li><a href='#'>kosong</a></li>
    <li><a href='#'>kosong</a></li>
    </ul>
</li>
<b:if cond='data:blog.url != "#"'>
<li><a href='#' title='Daftar Isi'>Sitemap</a></li>
<b:else/>
<li><a class='current' href='#' title='Anda sekarang berada di halaman Daftar Isi'>Sitemap</a></li>
</b:if>
</ul>

<div id='search'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' type='text' value=''/>
<input class='searchbutton' type='submit' value='Go'/>
</form>
</div>

</nav>

Ganti kode yang diberi tanda ‘kres’ (#) dengan alamat tautan yang Anda tuju (ex: http://optimasi-blog.blogspot.com/2005/05/about-optimasi-blog.html).
Mau lihat tampilannya, klik di sini.

Demo Optimasi Blog

1. Prayitno, Hendro. “Blogger admin” blogspot. CSS3 Tutorial: “Membuat dropdown menu menggunakan css3 dan html5 | simple-35 blogger template(part2)”. April 7, 2011

Komentar atau No Comment

2011-04-03T00:27:00.014+08:00

Komentar umumnya merupakan pernyataan lisan atau tertulis sering berkaitan dengan sebuah informasi, atau pengamatan atau pernyataan (Wikipedia). Sedangkan komentar dalam blog (menurut saya) merupakan kalimat tertulis untuk memberikan pendapat, masukan, dan/atau kritik terhadap suatu tema posting yang diterbitkan oleh penulis posting dalam form komentar.

Setidak - tidaknya sebuah komentar seharusnya memberikan nilai tambah terhadap suatu tema yang dibicarakan & bagi pembaca lainnya.

I was very encourage to find this site. I wanted you for this special read. I definitely savored every little bit of it and i have you bookmarked to check out new stuff you post. Don't forget to visit site on the new topic
(link1 | link2 | link3,…).

Nice post.

Saya tertarik sekali dengan tema posting Anda. Tidak jarang narablog memberikan komentar yang hanya…(dan seterusnya).
(link blog/posting komentator)

Saya tidak setuju dengan pendapat Anda yang menyatakan bahwa…(dan seterusnya). Menurut saya…(dan seterusnya).

Saya tertarik sekali dengan tema posting Anda. Tidak jarang narablog memberikan komentar yang hanya…(dan seterusnya). Namun sepengetahuan saya, tema ini bertolak - belakang dengan artikel yang terdapat dalam blog (link artikel)…

Mungkin seperti di atas itulah — atau sejenisnya — yang biasa ditulis oleh komentator dalam suatu blog.

Merah terdeteksi komentar spam.
Kuning terdeteksi komentar ½ spam, tapi tetap masih ada spam - nya. :)
Hijau terdeteksi komentar blog yang sebenarnya.

No Comment

Lebih baik kita menjadi pembaca yang baik daripada mengisi form komentar dengan sesuatu yang tidak berguna & membuang-buang waktu percuma.

Menurut Anda…?

Membuat Menu Navigasi Image

2011-03-29T13:26:00.029+08:00

Navigasi merupakan penentuan posisi & arah tujuan, baik di medan sebenarnya atau di peta (Wikipedia). Dalam blog, kita bersama mengenal istilah sitemap yang mungkin dapat kita hubungkan dengan peta. Navigasi dalam blog bertujuan untuk memberikan kemudahan bagi pengunjung menemukan tujuan konten yang ingin ia cari (baca:red).

Berbagai jenis menu navigasi dapat Anda sematkan dalam blog, seperti: navigasi horizontal, vertikal, dan sebagainya. Termasuk menu navigasi dengan image (gambar) yang akan kita review sekarang ini. Bagaimana bentuk dari navigasi yang saya maksud, silakan klik link ini blog versi demo. Coba perhatikan kumpulan gambar di sebelah kanan blog demo tersebut! Navigasi image akan terus bergeser mengikuti arah scroll mouse ke atas dan ke bawah (fixed).

1. Letakkan kode CSS berikut di atas ]]></b:skin>.

/*-- NAV IMAGE --*/
#nav-image {
right:4%;
position:fixed;
top:33%;
padding:0 6px;
overflow:hidden;
}

.linkopacity img {
filter:alpha(opacity=25);
-moz-opacity:0.3;
opacity:0.3;
border:0;
}

.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
border:0;
}

.to-home, .table-of-content, .back-to-top, .to-subscribe, .to-comment, .back-to-down {border:0; margin:1em 0;}

Catatan:

Kode yang berwarna merah dapat Anda rubah, sesuai dengan karakter blog Anda.
Jika Anda ingin meletakkannya di sebelah kiri, ganti right:4%; menjadi left:4%;.
Semakin kecil nilai opacity atau -moz-opacity (warna hijau) — nilainya berkisar antara 0 – 1 — maka image semakin blur (baca:kabur).

2. Letakkan — atau tidak — jQuery berikut di atas </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$("a[href*=#content], a[href*=#comments-block], a[href*=#footer-content]").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=$(this.hash);a=a.length&&a||$("[name="+this.hash.slice(1)+"]");if(a.length){var b=a.offset().top;$("html,body").animate({scrollTop:b},1000);return false}}})});
//]]>
</script>

JQuery di atas hanya akan menampilkan scrolling yang lembut, ketika link dalam image kita klik. Kemudian untuk kode jQuery yang berwarna merah merupakan link - link tujuan dari navigasi image. Attention! Mungkin template yang satu berbeda dengan lainnya, dimungkinkan pula untuk merubah kode yang berwarna merah (#content, #comments-block, #footer-content).

3. Letakkan kode HTML berikut di atas </body>.

<figure id='nav-image'>
<div class='to-home'>
<a class='linkopacity' href='isi dengan alamat blog Anda…' title='Halaman Utama'><img alt='Home' height='30' src='https://lh6.googleusercontent.com/_sl-hvfgWCfI/TXaFG5_UosI/AAAAAAAAABU/tEReYbtwo4w/home.png' width='30'/></a>
</div>
<div class='table-of-content'>
<a class='linkopacity' href='isi dengan alamat blog Anda…/search?max-results=200' rel='nofollow' title='Daftar Isi'><img alt='Content' height='30' src='https://lh3.googleusercontent.com/_w3vbLlHM5kg/TZEq7s1bzTI/AAAAAAAAA5k/3r2G0Keni6E/s800/arsip.png' width='30'/></a>
</div>
<div class='back-to-top'>
<a class='linkopacity' href='#content' title='Ke Atas'><img alt='Up' height='30' src='https://lh4.googleusercontent.com/_sl-hvfgWCfI/TXaFHPH5nuI/AAAAAAAAABY/UtBQNUtekmA/arrow-up.png' width='30'/></a>
</div>
<b:if cond='data:blog.pageType == "item"'>
<div class='to-comment'>
<a class='linkopacity' href='#comments-block' title='Komentar'><img alt='Comment' height='30' src='https://lh3.googleusercontent.com/_sl-hvfgWCfI/TXaFHgfaC9I/AAAAAAAAABg/0FmVG-_r7p4/comment.png' width='30'/></a>
</div></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='to-subscribe'>
<a class='linkopacity' href='isi dengan alamat RSS blog Anda…' title='Langgan RSS'><img alt='Langgan RSS' height='30' src='https://lh5.googleusercontent.com/_sl-hvfgWCfI/TXaX0fGJIPI/AAAAAAAAABw/aZqTbkdIeQI/RSS.png' width='30'/></a>
</div></b:if>
<div class='back-to-down'>
<a class='linkopacity' href='#footer-content' title='Ke Bawah'><img alt='Down' height='30' src='https://lh4.googleusercontent.com/_sl-hvfgWCfI/TXaFHSoQCxI/AAAAAAAAABc/evR8CjwFCFQ/arrow-down.png' width='30'/></a>
</div>
</figure>

Catatan :

Perhatikan kode yang berwarna merah (HTML = JQuery )!
Silakan rubah — atau tidak — alamat image (warna hijau) sesuai dengan alamat penyimpanan image Anda.
Sesuaikan height & width dengan besar - kecilnya gambar yang Anda inginkan.
Kode yang berwarna biru silakan buka kembali posting tentang “optimasi tampilan widget”.
Jangan dilupakan! Bagi blog yang menggunakan image sebagai media bacanya, sebaiknya selalu menambahkan atribut alt='…' dan title='…'.

Demo Navigasi Image

Semoga bermanfaat trik membuat menu navigasi image ini.

Informasi Update Posting Terdahulu (1)

2011-03-27T05:17:00.008+08:00

Tidak sedikit posting di blog ini yang seharusnya di update. Apalagi kalau posting tersebut berkaitan dengan ‘widget’ atau ‘gadget’. Selanjutnya, secara berkala Optimasi Blog akan berusaha rutin melakukan update terhadap “posting-posting terdahulu”, yang ditengarai mendapat banyak keluhan dari Narablog. Selain itu, kami juga mengupayakan blog demo versi dari setiap posting yang berkaitan dengan trik blogger.

Berikut ini merupakan beberapa update posting terdahulu yang mungkin — sedikit banyak — menimbulkan rasa kecewa di hati teman - teman sekalian, karena gagal diaplikasikan pada blognya masing - masing.

1. Memasang Emoticon dalam Komentar

“Emoticon” tidak muncul dalam komentar, walaupun telah dipasang sesuai dengan step by step dalam posting Optimasi Blog. Atau bisa pula, emoticon hanya muncul jika yang berkomentar adalah pemilik blog (blog-owner : beda tampilan komentar pemilik blog).

2. Trik Membuat Cloud Label

Hal tersebut dikarenakan pemindahan file - file javascript & animasi flash oleh pembuatnya. Sekarang, widget ‘Blogumus’ tersebut sudah dapat dimanfaatkan. Detailnya, silakan klik link point 2 (link sumber sudah termasuk didalamnya).

3. Mengatur Tata Letak “Link to This Post”

Setelah diaplikasikan, ternyata menimbulkan permasalahan baru dalam penyampaian komentar. Permasalahan tersebut adalah ketinggian form komentar tidak memenuhi syarat bagi blog-blog yang memanfaatkan fasilitas “verifikasi”.

Kemudian ada beberapa posting yang tidak direkomendasikan untuk di-ikuti, antara lain:

Demikian beberapa informasi tentang update pertama dari kami. Kritik & saran sangat kami harapkan, agar terjalin hubungan timbal – balik yang positif, baik itu konten dengan Anda; Anda dengan kami; dan kami dengan konten.

Sentuhan ‘Magic’ dalam Blog

2011-03-24T09:53:00.048+08:00

Jangan biarkan tulisan hanya di - intimidasi oleh atribut emosi & ambisi yang berkesan mewah serta modern. Tapi beri ia pijakan yang kuat agar mampu bertahan! Dan biarlah pijakan tersebut bekerja dengan magicnya.

Kasus pertama

BELAJAR
Saya masih belajar dan tulisan inipun saya dapat dari belajar. Kita semua sama-sama belajar_dalam hal apapun_agar tahu tentang sesuatu. So, tidak perlu ada sebutan "lebih pintar".
"Kita tidak akan tahu 'garam itu asin', jika kita tidak mencobanya."
Saya dan Anda adalah sama. Saya belajar kepada Anda, karena Anda tahu lebih dulu. Sebaliknya, jika saya lebih dulu tahu, mungkin Anda akan belajar kepada saya. Yah, hanya sekedar 'puzzle' kata-kata_sudah 30'15" memikirkannya_yang tidak berarti apa-apa...

Kasus kedua

Belajar
Saya masih belajar & tulisan inipun saya dapat dari belajar. Kita semua sama - sama belajar — dalam hal apapun — agar tahu tentang sesuatu. So, tidak perlu ada sebutan “lebih pintar”.
“Kita tidak akan tahu ‘garam itu asin’, jika kita tidak mencobanya.”
Saya & Anda adalah sama. Saya belajar kepada Anda, karena Anda tahu lebih dulu. Sebaliknya, jika saya lebih dulu tahu, mungkin Anda akan belajar kepada saya. Yah, hanya sekedar ‘puzzle’ kata - kata — sudah 30′15″ memikirkannya — yang tidak berarti apa - apa…

Dari kedua kasus bacaan di atas, “mana yang Anda sukai?” Mungkin rata - rata Narablog menyukai bacaan yang kedua, karena lebih legibility & readability (keterbacaan). Selanjutnya, pokok bahasan tulisan ini dibatasi hanya untuk membicarakan dua kasus tersebut.

Analisa Kasus

Dua kasus tulisan di atas sama - sama menggunakan keluarga font ‘Serif’ (font-family:Georgia,Serif;) & ukuran font sebesar 16 pixels (font-size:16px;). Panjang baris yang digunakan berkisar antara 52 – 78 karakter termasuk spasi, atau 2 – 3 alfabet yang disusun secara mendatar (1 alfabet=26 huruf). Selanjutnya, untuk mengerucutkan masalah dalam analisa, mungkin kita lebih menyoroti salah satu kasus. Yah, anggap saja kasus pertama merupakan problematika yang patut kita bicarakan.

Titik sensitif problematika yang terdapat pada kasus pertama, antara lain :

Pemilihan warna font yang kurang ‘matching’ dengan warna latar, sehingga tulisan pun kurang terbaca dengan jelas.
Gaya penulisan rata kanan & rata kiri (text-align:justify;), menyebabkan kurangnya “konsistensi kontrol” per kata. Hal tersebut dapat kita temui pada lebarnya ‘white space’ (ruang kosong), antara kata yang satu dengan kata berikutnya dalam setiap baris tulisan.
Jarak vertikal antar baris terlalu rapat, sehingga kita harus memicingkan mata untuk membaca tulisan tersebut.
Penggunaan tanda baca yang kurang tepat.
Judul kasus “Belajar” ditulis secara manual dengan huruf kapital.

Alternatif Pemecahan

Mudah - mudahan Narablog setuju bahwa salah satu alternatif pemecahan kasus pertama adalah pada kasus kedua. :)

Menurut Harry Roberts, “panjang baris yang ideal untuk legibility berkisar antara 2 – 3 alfabet, atau 52 – 78 karakter termasuk spasi ”. Sedangkan Oliver Reichenstein berpendapat, “panjang baris yang optimal adalah 10 – 15 kata, & untuk liquid layout dengan ukuran font 100%, maka dibutuhkan lebar kolom sebesar 50% (layar windows)”.

“Liquid layout merupakan tata letak yang berdasarkan persentase dari ukuran jendela browser.”
(Definition: Liquid Layout)

Pemilihan warna font (font-color) seharusnya kontras dengan warna latar (background). Background gelap; font-color cerah, begitu pula sebaliknya. Kemudian, gaya perataan tulisan sebaiknya menggunakan “rata kiri” (text-align:left;) untuk menjaga konsistensi per kata & jarak “ruang kosong” yang ideal dalam setiap baris.

Pengaturan jarak vertikal antar baris (ritme vertical) seharusnya menjadi salah satu titik penting untuk meningkatkan kenyamanan dalam membaca suatu tulisan. Hal ini dapat dilakukan dengan menambahkan atribut line-height, yang besarnya disesuaikan dengan ukuran font. Umumnya, pengaturan ini disertai pula dengan pengaturan jarak antar paragraf — paragraf 1, 2, 3,… — yang ber - atribut margin-bottom.

“If you have a 24px baseline, all your line-heights and margin-bottoms must be in multiples of 24. So a font-size of 16px would need a line-height of 1.5em and a margin-bottom of 24px.”
Harry Roberts¹

Secara matematis, mungkin rekomendasi dari Harry Roberts dapat ditulis demikian: font-size:16px; = line-height:1.5em; + margin-bottom:24px;. Artinya font yang berukuran 16 pixels membutuhkan tinggi sebesar 1.5 ems & batas bawah antar paragraf sebesar 24 pixels. Perhatikan juga jarak antar huruf — jika masih kelihatan rapat — kita dapat menambahkan atribut letter-spacing secukupnya. Selain itu, Anda pun bisa menentukan sendiri, besaran (font-size, line-height, & margin) yang sesuai dengan karakter blog Anda.

Alangkah lebih baik, kalau kita selalu memperhatikan tanda baca dalam tulisan kita, sehingga “setiap orang” mampu memaknai tulisan — intonasi, jeda, & sebagainya — sesuai dengan pengamatannya sewaktu pembacaan. Mengenai tanda baca lebih lanjut, Anda dapat mengunjungi sebuah artikel menarik, yang diberi title “Tanda Baca” oleh Ardianzzz.

Akhirnya kita sampai di penghujung alternatif, yakni huruf kapital yang ditulis secara manual. Jika kita ingin menulis kata atau beberapa kata dengan huruf kapital, sebaiknya menggunakan CSS untuk mengubahnya, contoh: {text-transform:uppercase;}. Hal ini tidak berlaku untuk kata - kata yang pada dasarnya memang ditulis dengan huruf kapital, seperti: RI, DPR, PBB, & lain - lain.

Itulah sedikit dari sekian banyak sentuhan magic — CSS & HTML — yang mungkin dapat lebih menata tulisan kita untuk menciptakan kesan tertentu, sehingga pembaca mendapatkan kenyamanan membaca semaksimal mungkin. Mungkinkah ini sebagian kecil dari “Tipografi”?

Sumber Tulisan

Berikut beberapa sumber bacaan yang mungkin dapat menambah wawasan & pengetahuan serta bahan koreksi, atas kesalah – tafsiran penulis dalam menerbitkan posting ini.

Typography quick tips (Harry Roberts of CSS Wizardry)
Quick Tips-A series of quick development tips (Harry Roberts of CSS Wizardry)
Tipografi (Wikipedia)
The 100% Easy – 2 – Read Standard (Information Architects)
Five simple steps to better typography (Mark Boulton)
Tipografi (Ardianzzz)

Serbuan ‘Line Break’ Tag

2011-03-19T07:01:00.023+08:00

Line break merupakan sebuah tag HTML yang memaksa baris karakter atau kata diletakkan pada baris baru—biasanya ditulis dengan <br>. Dalam blogger, tidak jarang ditemukan posting blog yang menggunakan tag <br>—termasuk optimasi blog. Sekarang, coba perhatikan dua contoh posting di bawah ini :

<span class="awal">K</span>etika kita menulis suatu blog yang lumayan panjang, scroll halaman pun akan semakin lama.  Kadang yang membaca ingin pula buru-buru untuk menyelesaikan bacaannya, namun ada kalimat yang harus dipahami sebelumnya.  Kebetulan kalimat tersebut berada di paragrap pertama (atas).  Repot juga muter scroll mouse atau sekedar menggeser bar yang letaknya dikanan halaman browser.  Seandainya ada satu shortcut yang tersedia dalam blog, kemungkinan hal di atas bisa diminimalisasi.  Nah, itu yang namanya fasilitas "Back to Top" atau kembali ke atas.<br />

<br />
Bagaimana <i>trik blogger</i> untuk menambah fasilitas itu, OB?  EGP (emang gue pikirin), mungkin itu jawaban ketus OB ketika ditanya pas sakit gigi atau sariawan 5 biji.  Alhamdulillah, sekarang OB tidak sakit gigi <span class="amp">&</span> sariawan.  Sebenarnya <b>trik blogger</b> membuat "Back to Top" ini merupakan rekomendasi dari mas Rudi (<a href="http://rudyazhar.com/">Blog Rudi Azhar</a>) yang merupakan salah satu admin <a href="http://optimasi-blog.blogspot.com/">optimasi blog</a>.<br />
<br />
<b>Cara I :</b><br />

<p>Beberapa bulan yang lalu, Blogger telah mengumumkan <a href="http://bloggerindraft.blogspot.com/2010/11/more-fonts-means-more-choice.html">beberapa font baru</a> untuk desainer template. Ya, beberapa bulan yang lalu itu hanya dapat diakses dari Draft Blogger. Kemarin, Blogger tidak hanya diluncurkan Font Web untuk SEMUA pengguna Blogger, tetapi juga mengumumkan bahwa mereka telah menambahkan 35 font tambahan untuk campuran, untuk total 77 grand font!</p>
<p>Siap untuk mendapatkan pengalaman dengan pilihan font baru?<br />
Cukup masuk ke tab Advanced Designer Template Blogger untuk blog Anda, pilih jenis teks yang ingin perubahan (Post Title, Judul Blog, dll) dan klik pada salah satu Font Web baru untuk pratinjau. Jangan khawatir, tidak akan ada perubahan di blog Anda sampai Anda memilih "Terapkan ke Blog", dan ini berarti Anda dapat bermain-main dengan semua font dan hanya beralih bila Anda siap.</p>

Kedua contoh di atas diambil dari blog ini—yah, hanya dengan membuka salah satu posting, kemudian tekan Ctrl + u secara bersamaan. Nah, berdasarkan kedua contoh tersebut menurut Anda “mana yang lebih baik?”

Saya tidak membahas tentang semantik & aksesibilitas atau apalah namanya, karena bukan ahli di bidang ilmu itu. Ruang lingkup hanya dibatasi pada kebiasaan dalam melakukan posting di blogger.

Timbulnya Line Break

Pertama, tag <br> akan muncul otomatis saat menekan tombol Enter (↵). Ketika kita ingin membuat baris baru, maka secara naluriah akan menekan 1× enter. Hal ini sebanding dengan saat kita ingin membuat paragrap baru, maka akan menekan 2× enter. That's right?

Ketiklah sebuah postingan, kemudian tekan tombol enter. Apa yang akan terjadi setelah itu? 
-- Enter -- 
Ternyata tercipta baris baru..

Hasil dari penulisan di atas, mungkin akan terlihat seperti di bawah ini :

Ketiklah sebuah postingan, kemudian tekan tombol enter.  Apa yang akan terjadi setelah itu? 
<br/> 
Ternyata tercipta baris baru..

Kedua,—sudah tentu dimasukkan secara sengaja oleh penulis posting sendiri. :)

Minimalisasi Line Break

Biasanya, kita membuat posting dalam metode Compose. Cara ini merupakan cara yang mudah dan aman untuk membuat bentuk postingan sesuai dengan keinginan, tapi tidak dengan tag HTML-nya. So, membiasakan penggunaan metode Edit HTML dalam membuat suatu posting, mungkin lebih baik.

Terkadang kita menyandingkan, bahwa membiasakan dengan memaksa merupakan kata yang sama.

Manfaatnya—selain membuat tulisan di blog, kita juga sedikit belajar tentang penggunaan markup HTML—walaupun hanya sekedar menulis <p>, <br>, & </p>.

Waspada terhadap gerakan refleks untuk menekan tombol Enter (↵), “oops, tidak sengaja”. Bukankah lebih baik membiasakan sesuatu dengan hal-hal yang baik pula?

Tag HTML <p> merupakan awal penulisan yang tidak jelek dalam postingan. Biarkan <p> menguasai aliran kata demi kata sampai membentuk sebuah paragrap yang sempurna—jangan lupa mengakhirinya dengan </p>. Kemudian letakkan kembali <p> & susun kata-kata yang berhubungan dengan paragrap tersebut—akhiri lagi dengan tag </p>. It's beautiful!. Coba rasakan bedanya apabila kita menulis postingan—ketika sebuah paragrap selesai diketik, ditindaklanjuti dengan menekan enter sebanyak 2×. Disisi lain, atribut p dalam CSS template bukan sekedar pajangan, namun mungkin memiliki arti yang mendalam bagi si pembuatnya & bermanfaat bagi pemakainya.

Dengan demikian, sedikit–banyaknya kita telah berusaha meminimalisasi serbuan Line Break tag (<br>) dalam postingan di blog. Selain itu, setiap posting yang bagaimanapun atau seperti apapun mempunyai arti tertentu, selama pembacanya memperoleh manfaat dari posting tersebut. Posting yang memiliki arti mungkin akan lebih berarti, jika kita sedikit meluangkan waktu untuk memperhatikan markah yang terkandung di dalamnya. Kaidah-kaidah markup HTML yang sangat sedikit di atas, mungkin hanya ‘snack’ atau bahkan menohok ke ulu hati kita. It's your choice!.

Inspirasi Tulisan

Berikut ini beberapa artikel menarik yang mendorong penulis menerbitkan posting Serbuan ‘Line Break’ Tag.

Untuk pemberi tutorial di blogspot katanya bisa HTML tapi memposting semantic saja tidak pernah diterapkan (Hendro Prayitno dalam Blogger admin)
Tanda baca (ArdianZzZ dalam ardianzzz.com)

Font untuk Template Blogger

2011-01-31T00:54:00.013+08:00

Beberapa bulan yang lalu, Blogger telah mengumumkan beberapa font baru untuk desainer template. Ya, beberapa bulan yang lalu itu hanya dapat diakses dari Draft Blogger. Kemarin, Blogger tidak hanya diluncurkan Font Web untuk SEMUA pengguna Blogger, tetapi juga mengumumkan bahwa mereka telah menambahkan 35 font tambahan untuk campuran, untuk total 77 grand font!

Siap untuk mendapatkan pengalaman dengan pilihan font baru?
Cukup masuk ke tab Advanced Designer Template Blogger untuk blog Anda, pilih jenis teks yang ingin perubahan (Post Title, Judul Blog, dll) dan klik pada salah satu Font Web baru untuk pratinjau. Jangan khawatir, tidak akan ada perubahan di blog Anda sampai Anda memilih "Terapkan ke Blog", dan ini berarti Anda dapat bermain-main dengan semua font dan hanya beralih bila Anda siap.

Jika Anda menggunakan template yang dikustomisasi, Anda dapat menggunakan berbagai font dari direktori font Google. Baca pengaturan instalasi.

Cara Tambahkan Mode Energy Saving Untuk Blog atau Website

2011-01-28T16:53:00.006+08:00

Ini adalah layanan gratis dan disediakan oleh http://www.onlineleaf.com/. Fitur ini memberikan cara yang berfungsi penuh dan sederhana untuk membantu website yang Anda jalankan menghasilkan energi lebih sedikit. Ia menyembunyikan animasi berat, serta widget-widget yang banyak.

Ketika pengunjung anda tidak aktif, maka fitur akan menampilkan Standby Screen, dengan teks "Energy saving mode".

Hal ini sangat mudah untuk ditambahkan ke situs Web atau blog dalam beberapa detik.

Masuk ke dashboard Blogger Anda -> Desain -> Edit HTML.

Anda tidak perlu untuk mengklik pada "Expand Template Widget".

Gulir ke bawah ke tempat anda melihat tag </head> dari template Anda.

Sekarang salin kode di bawah ini dan paste tepat sebelum tag </head>.

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

Fitur siaga ini menggunakan jQuery Javascript Library, jadi jika Anda menggunakan perpustakaan Javascript atau kode lain, tambahkan kode di bawah dari kode di atas:

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>

<script>jQuery.noConflict();</script>

Waktu tidak aktif

Juga Anda dapat dengan mudah menentukan berapa lama waktu pengunjung Anda harus aktif, untuk mesin untuk membuka layar siaga, dengan menambahkan ?time = X dimana X harus diganti dengan jumlah detik Anda ingin menentukan interval waktu. Contohnya bisa jadi:

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>

.. yang akan mengatur waktu tidak aktif sampai 2 menit (120 detik).

Jika Anda menggunakan WordPress, hanya men-download plugin lalu mengaktifkannya dan segala sesuatu siap bekerja langsung.