Incoming Search :
Rabu, 31 Agustus 2011
Bicara Makna Hari Lebaran
Incoming Search :
Sabtu, 27 Agustus 2011
Cara Membuat Menu Horizontal Tabs Sederhana di Blogger
Tips Trik Blogger: Buka Rahasia Blogspot kembali lagi dengan persembahan Menu Horizontal untuk Blogger/Blogspot. Seperti menu-menu horizontal sebelumnya, menu horizontal ini masih berkutat dengan CSS dan HTML tanpa Javascript/Jquery, bahkan tanpa menggunakan gambar, berbasis tab individual, dan tidak menggunakan list (HTML unordered list). Posting menu horizontal ini juga dibuat untuk memenuhi
Jumat, 26 Agustus 2011
Cara Menambahkan Icon/Gambar di Depan Judul Posting Blogger
Senin, 22 Agustus 2011
Membuat Style pada Link dengan CSS3
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 ?
Minggu, 21 Agustus 2011
Cara Mengganti "Post a Comment" Blogger Dengan Teks Lain/Gambar
Teks "Post a Comment" atau "Tambahkan Komentar" yang muncul sebelum/di bagian atas kotak komentar mungkin nampak kurang elegan. Pertanyaannya, apakah bisa mengganti teks "Post a Comment / Tambahkan Komentar" seperti yg terlihat di kotak komentar di bawah ini?
Setelah sekian waktu mengeksplor template XML Blogger, saya menemukan bahwa ada banyak tag yang merupakan perintah kepada host (dalam hal
Kamis, 18 Agustus 2011
Styling menggunakan CSS pseudo-element
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;
padding:1.5em 2em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
border-radius:1em
}
.element h2 {
background:#f90;
border-bottom:.05em 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:.80em solid #f90;
border-left:.75em solid #f90
box-shadow:0 .05em 0 #666;
}
/* Ribbon kiri */
.element h2:before {
bottom:-.25em;
left:0;
border-top:none;
border-right:none;
border-bottom:.25em solid #666;
border-left:.40em 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="element">
<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>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:beforedengan properti yang sama. Kemudian ganti kode yang berwarna merah (bottom:0;) dengantop: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%;
- Kiri elemen:
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>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 #fff;
border-right:2em solid #fff;
border-bottom:2em solid #fff;
border-left:2em solid #fff
}
/* 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>
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(255,255,255,0)), to(rgba(255,255,255,1)));
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,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>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).
Cara Membuat Fitur Reply Comment (Balas Komentar) di Blogger
Selasa, 16 Agustus 2011
Salah Kaprah Seputar Jilbab
Cara Modifikasi Tampilan Header Sidebar Blogger
Mungkin sobat merasa kurang puas dengan tampilan judul header sidebar blog sobat. Kurang inilah, kurang itulah, terlalu gelaplah, atau warnanya kurang menarik. Atau, mungkin pula background pada title sidebar terlalu mengganggu dan
Minggu, 14 Agustus 2011
Google Scribe: FItur Baru Blogger & Cara Menggunakan
Jumat, 12 Agustus 2011
Tips To Get Back To Blogging
Ini adalah metode yang paling memotivasi saya. Setelah vakum dalam waktu yang lumayan lama dari dunia blogging, cukup sulit untuk membuat kickstart lagi. Jadi saya mencoba untuk memulainya lagi melalui mengunjungi blog lain ( blogwalking ) sehingga saya bisa melihat adanya perubahan, entah itu dari bahasan topik hingga desain-desain baru template blog. Jelasnya adalah update, dan kedua, desain. Hal sepertin ini membuat saya punya perasaan ditinggalkan dan perasaan ini memotivasi saya untuk menulis lagi. By the way, membaca blog orang lain bisa memberikan ide-ide dan pemikiran juga.
2. Membaca Koran / Majalah
Saya mengakui bahwa jeda dalam blogging, membuat saya kekurangan ide-ide baru tentang apa yang harus saya tulis sehingga saya kehilangan minat dalam blogging. Dalam rangka untuk mendapatkan ide-ide baru, saya biasanya akan membeli koran dan majalah terbaru untuk mencari beberapa info terbaru dan menarik. Itu saja ! Lewat hal ini, saya bisa menemukan beberapa berita menarik, menganalisis dan kemudian mendukung mereka dengan semacam informasi tambahan dari sumber yang relevan.
3. Memeriksa Arsip Anda
Ini adalah hal yang jarang dilakukan tetapi saya kira metode ini efektif ketika saya mencoba untuk mendapatkan ide-ide yang berhubungan dengan posting yang lebih lama. Kadang-kadang Anda mungkin menyadari bahwa ada posting yang tidak lengkap atau perlu penjelasan lebih lanjut. Beberapa posting Anda yang lebih tua mungkin memberi Anda ide-ide baru juga. Misalnya, Anda menulis tentang bagaimana memilih laptop. Mungkin Anda ingin menulis tentang menjaga laptop Anda di luar ruangan. Setelah jeda yang panjang dari blogging, biasanya seperti kehilangan koneksi dengan posting sebelumnya jadi saya coba memeriksa arsip untuk melanjutkan ide-ide dari posting sebelumnya atau menciptakan ide-ide baru dari arsip-arsip lama saya.
4. Ide dari Jaringan Sosial ( Social Network )
Kadang-kadang jaringan sosial seperti Facebook, Friendster, MySpace dan Twitter juga membantu saya untuk terlibat dalam berbagai diskusi dan topik. Update membaca atau diskusi dari jaringan sosial memberi saya beberapa ide bagus dan meningkatkan semangat saya sampai menulis lagi !
5. Pen & Kertas
Seperti yang saya sudah disebutkan di atas, berhenti blogging untuk sementara, entah bagaimana membuat saya kekurangan menciptakan ide-ide baru jadi saya mencoba satu metode lagi yaitu pena & kertas. Saya membeli sebuah notebook kecil dan setiap kali saya punya ide menarik, saya akan memasukkannya dalam daftar. Nah, metode ini sebenarnya adalah kebiasaan yang harus kita lakukan untuk menghindari hilangnya ide menarik yang datang dalam pikiran kita sewaktu-waktu. Kembali ke tujuan blog [ baca : Pentingnya Menentukan Tujuan Blog ] juga bisa menambah motivasi anda dalam ber-blogging ria...
Rabu, 10 Agustus 2011
Strategi Meningkatkan Traffic Blog & Penjualan dengan Facebook
Sabtu, 06 Agustus 2011
Google Adsense : Hasilkan Uang Lewat Blog
Update Pagerank Google (Minor Update - Agustus 2011)
SEO dalam Era Social Media
- SEO sangatlah penting ketika kita memasarkan produk kita secara online. Dengan teknik-teknik SEO yang ciamik akan memastikan web maupun blog anda bisa tampil di internet. Ingat, tujuan SEO adalah mengejar keuntungan, bukan mencari popularitas.
- Pada hasil pencarian search engine, halaman jejaring sosial berada pada prioritas kedua setelah halaman web maupun blog. Jadi maksimalkan website maupun blog anda untuk meningkatkan peringkat di search engine.
- Fitur dan layanan social media belum dilengkapi dengan kemampuan untuk menangani e-commerce, database, formulir online, dan masih banyak lagi yang belum mampu dilakukan seperti halnya halaman website.
- Tidak semua target customer atau pelanggan mempunyai account jejaring social, meskipun banyak juga dari mereka yang mempunyai account di jejaring sosial misalnya saja Facebook dan Twitter.
- Tools dan teknik untuk menemukan kata kunci dan mengoptimalkan sebuah halaman memang sudah bisa digunakan pada social media, tapi baru bisa berjalan dengan baik di blogs.















