Cara Mudah Menambahkan Link Profil Google+ di Blogger

Google+ semakin berkembang, Blogger kembali menyediakan sebuah fitur baru. Kamu sekarang dapat menambahkan link ke sebuah profil google+ dengan mudah tanpa perlu mengopy alamat linknya. Fitur ini disebut dengan Mention. Sebagai contohnya Facebook dan Twitter, kamu dapat menambahkan link profil orang lain dengan menambahkan tanda @ sebelum nama orang itu.

Untuk menambahkan link profil Google+ dari seseorang, kamu hanya perlu menambahkan tanda + sebelum nama orang itu.

cara menambahkan link profil google+

Contoh dari link yang ditambahkan: +Gemar Html

Satu-satunya keistimewaan dari link ini adalah, ketika mouse berada di atas link ini, akan muncul kartu berisi informasi dari orang tersebut serta tombol Tambahkan ke lingkaran. Cobalah letakkan mousemu di atas link ini: +Gemar Html.
Baca Selengkapnya

Ekstensi Generator Warna Untuk Google Chrome

Ketika saya sedang mencari-cari ekstensi di Toko Web Chrome. Saya menemukan sebuah ekstensi Google Chrome yang baru bernama Chroma dan ekstensi ini langsung menjadi favorit saya.

Chroma adalah sebuah ekstensi generator warna. Sangat bermanfaat untuk para-para web designer untuk mengambil warna, menyimpan warna, terdapat 2 mode HEX dan RGB, dll.

ekstensi generator warna chroma


Mengapa Chroma menjadi favorit saya:

1. Mudah digunakan

Kamu dapat mengopy kode warnanya secara langsung hanya dengan satu klik saja. Inilah yang membuat saya semakin suka ekstensi ini.

2. Dapat menyimpan warna

Dua kali klik pada batang warna akan menyimpan warna tersebut ke bagian atas-kanan halaman.

3. HEX, RGB dan RGBA

Chroma dapat menentukan kode warna HEX dan RGB. Chroma juga dapat memberikan kode warna RGBA bila kamu klik kanan pada batang warna.

4. Tidak mengambil ruang

Chroma hanya sebuah ekstensi yang kecil saja dan tidak akan memperlambatkan komputer anda.

5. Dapat dibuka ketika offline

Kebanyakan ekstensi Google Chrome hanya bisa dibuka ketika kamu terhubung dengan internet. Tapi, Chroma dapat dibuka walaupun sedang offline.

6. Hemat waktu

Tidak perlu ditanyakan kalau browser yang saya gunakan adalah Google Chrome. Dengan adanya Chroma, saya tidak perlu lagi membuka sebuah website untuk mencari kode warna.


Nah, Ini sajalah pengamatan saya dengan Chroma. Kamu dapat menginstall ekstensi ini dengan klik link download diatas. Dengan adanya Chroma, semoga dapat membantu para web designer.
Baca Selengkapnya

13 Alasan Saya Meninggalkan Blog Anda!

Saya mulai penasaran mengapa orang-orang akan menutup sebuah halaman website tanpa melihat isi dari halaman tersebut. Apa yang harus dilakukan untuk mencegah hal ini? Apakah halaman website anda betul-betul mengerikan?
alasan pengunjung meninggalkan blog anda
Sebelum membuat blog ini, kerjaan saya adalah membaca-baca website dan blog. Saya sangat suka mengunjungi situs-situs web dan blog yang artikelnya paten dan akan kuingat urlnya sepanjang masa. Dan tentu saja saya menemukan beberapa situs yang membuat saya ngeri untuk mengunjunginya. Berikut ini beberapa alasan saya meninggalkan situs mereka:

1. Menu Pop-up

Ya, menu pop-up adalah hal yang paling kubenci ketika membuka sebuah blog. Laptop saya yang sudah sangat tua ini menjadi lambat karena menu pop-up tersebut.

2. Loading Lambat (LOLA)

Nah, inilah yang paling dibenci oleh semua orang. Dan lagipula koneksi internet saya termasuk sangat lambat, saya tidak mau menunggu sampai setengah jam hanya untuk melihat halaman utama dari sebuah website.

3. Lagu/Mp3 yang diputar otomatis

Saya tidak suka keributan ketika sedang membaca sesuatu di situs web. Dan saya juga tidak ingin koneksi internet saya habis untuk memutar lagu tersebut. Kamu boleh saja memasang lagu diblog asalkan lagunya tidak diputar secara otomatis. Beberapa pengunjung tidak suka mendengar lagu yang tidak disukai mereka.

alasan saya meninggalkan blog anda 4. Video yang diputar otomatis

Hampir sama dengan lagu/Mp3. Saya tidak suka keributan ketika membaca. Ketika kutemukan sebuah video yang tiba-tiba berputar, saya akan menekan tombol [X]


5. Terlalu banyak animasi

Saya tidak suka blog yang terlalu banyak animasi. Ketika saya melihat blog anda seperti sebuah diskotik, saya akan meninggalkan blog anda. Saya tidak suka blog yang memiliki animasi seperti bintang yang berkedip-kedip, glitter, petir, animasi dari kartun kesukaanmu bergerak, dll karena semua itu membuat blogmu serasa tampak kekanakan. Cobalah mendesain blog anda sesimpel mungkin.

6. Iklan di atas konten

Menambahkan iklan tepat di atas konten adalah sebuah kesalahan besar oleh seorang blogger. Ingat! Blog adalah tempat kita mengekspresikan diri kita, bukan tempat menaruh iklan. Dan tambahan dari saya, iklan juga memperlambatkan proses loading. Situs web yang iklannya lebih dari isi kontennya akan segera saya tutup.

7. Desain yang buruk

Penampilan adalah hal yang pertama kali diperhatikan orang. Bila blog anda memiliki desain/template yang buruk, pengunjung tidak akan ragu menutup situs anda.

8. Blog yang telah mati

Kalau blogmu tidak pernah diupdate sama sekali, blogmu akan sama saja dengan "sudah mati". Bila saya melihat tanggal pembuatan sebuah pos di dalam blog adalah 2004, saya akan meninggalkan blog itu segera. Itu karena pengunjung lebih menyukai artikel yang "baru" daripada yang lama.

9. Register terlebih dahulu

Pernahkah kamu mengunjungi situs web yang harus register terlebih dahulu agar dapat melihat isinya? Saya pernah, dan saya akan menutup situs webnya segera.

10. Pemilihan warna yang tidak cocok

Warna sangat penting untuk membaca. Warna yang terang adalah sebuah pilihan yang bagus untuk latar belakang blog. Jangan menggunakan latar belakang yang gelap sebagai latar belakang dari sebuah blog pos, itu akan membuat saya menangis ketika membaca blog anda.

11. Ejaan/Penataan kalimat yang kurang tepat

Bila blogmu memiliki artikel mengenai tutorial, penataan kalimat di blogmu harus sempurna agar pembaca lebih mudah memahaminya. Kamu tidak usah mengkhawatirkan ejaan bila kamu sering mengeceknya.

12. Navigasi halaman yang kurang sesuai

Navigasi halaman adalah sesuatu yang harus diatur agar pengunjung tetap berada di halaman blog anda. Contohnya: menambahkan widget pos terpopuler ataupun arsip blog, daftar halaman, dll. Pokoknya jangan sampai pengunjung kita kebingungan dengan blog kita.

13. Membosankan

Kalau kamu punya blog, buatlah blogmu lebih menarik. Beberapa blog sangat membosankan, tidak ada aktivitas di dalamnya. Penulisnya juga kebosanan, mereka hanya menulis apa yang ingin mereka tulis dan itu saja, tidak ada halaman "mengenai saya", tidak ada pos terpopuler, tidak ada komentar, dll. Tidak ada orang yang akan menyukai blog-blog membosankan seperti itu. Daripada ngeblog, lebih baik menonton TV saja.


Ini saja deh, daftar alasan yang saya sampaikan. Apakah kamu juga punya alasan yang lain?
Baca Selengkapnya

Cara Mengatur Jadwal Sebuah Pos Di Blogger

mengatur jadwal pos bloggerSetiap blogger pasti berharap bisa mengepos di blog setiap hari. Tapi, waktu luang kita dalam mengupdate blog sangat terbatas. Contohnya saya, yang hanya bisa mengupdate blog seminggu 1 kali. Bahkan, ada orang yang mengupdate blog selama sebulan sekali.

Tapi, kita pasti tidak menginginkan pembaca blog kita kecewa hanya karena kita tidak bisa mengupdate blog lebih sering.

Daripada menunggu sampai harinya kita bisa mengupdate sebuah pos, mengapa kita tidak membuat posnya sekarang? Blogger memiliki sebuah fasilitas yaitu: dapat mengatur jadwal waktu ngepos.

Cara mengatur jadwal:

Langkah 1. Buatlah sebuah pos yang ingin kamu jadwalkan. Untuk tutorial ini, waktu yang kita gunakan adalah tanggal 13 Desember 2012, dan kita akan menjadwalkannya ke tanggal 20 Desember 2012.

Langkah 2. Tetap di halaman pengeditan pos, lihatlah sisi kanan dari halaman. Lalu, klik pada menu "Jadwal".
menu jadwal sebelum diklik

Langkah 3. Pada menu yang muncul, pilih "Setel tanggal dan waktu".
menu jadwal setelah diklik


Sekarang, kamu akan melihat tabel yang menunjukkan waktu saat ini:
Tabel Waktu Pengatur Jadwal Pos

Langkah 4. Untuk mengatur jadwal, kamu hanya perlu klik pada waktu yang diinginkan (cobalah untuk mempraktekkannya diri sendiri). Kamu juga bisa menyetel jam dan menit dari sebuah pos. Setelah menyetel waktu dan tanggal, klik tombol "Selesai".
setelah menyetel jadwal blogger pos

Langkah 5. Sekarang kamu telah mengatur jadwal dari pos, kamu bisa langsung mempublikasikan posmu sekarang juga. Pos yang terjadwal bila dipublikasikan tidak akan segera ditampilkan di dalam blog. Tapi, pos tersebut akan ditampilkan pada waktu yang telah kita tentukan.

Masih tidak mengerti? Dikomentari ya...
Baca Selengkapnya

5 Alasan Pembaca Tidak Menyebarkan Pos Anda

Sebagai seorang blogger, kita pasti mengharapkan artikel di blog kita disebarkan melalui layanan sosial media dan dibicarakan oleh pembaca kita. Karena penyebaran melalui sosial media adalah cara yang tercepat dan lebih praktis untuk mendapatkan pengunjung baru.

alasan pembaca tidak menyebarkan pos

Sekarang, kamu dapat melihat banyak blog yang telah memasang tombol-tombol/widget untuk menyebarkan pos di setiap sisi-sisi blog, ada yang dibawah, diatas ataupun di bagian kiri dari blog. Tapi, walaupun begitu, banyak pembaca yang tidak menyebarkan pos kita. Berikut ini beberapa alasannya:

1. Pembaca tidak suka artikelmu

Ada banyak alasan yang menyebabkan pembaca tidak suka posmu atau benar-benar membenci blogmu, seperti:
  1. Posmu terlalu panjang,
  2. Posmu terlalu pendek,
  3. Ejaan yang tidak sempurna,
  4. Kamu menulis artikel untuk mesin pencari,
  5. Kamu menulis tentang sesuatu yang telah lewat masa,
  6. Desain/Template yang jelek,
  7. Loading blogmu mengambil waktu 1 jam (lola),
  8. Kebanyakan iklan,
  9. Kamu dengan mudah mencuri isi artikel orang lain,
  10. Dll.

2. Pembaca lupa menyebarkan posmu

Kita manusia pasti sering melupakan sesuatu dalam beberapa menit, dan lagipula, kita bukan mesin. Kalau pembacamu lupa menyebarkan posmu, kamu harus menggunakan taktik Panggilan Untuk Beraksi (PUB) yang telah saya ceritakan didalam 5 Cara Menulis Sebuah Pos Yang Menarik, yaitu dengan cara meminta pembaca untuk menyebarkan pos.

3. Pembaca enggan menyebarkan posmu

Kalau kita menyebarkan sebuah pos melalui media sosial seperti Facebook, pasti teman-teman kita mengetahui apa yang kita sebarkan. Bila isi kontenmu terdapat hal-hal negatif yang dapat merusak pertemanan, pembacamu tidak akan menyebarkan posmu.

4. Kamu tidak memiliki tombol penyebar yang benar

Ada begitu banyak widget tombol penyebar yang gratis seperti: Sharethis, Addthis, Addtoany, dll. Tapi, itu bukan berarti kamu harus menggunakan semua widget tersebut. Pilihlah widget yang cocok untuk blogmu saja. Karena kelebihan widget-widget tersebut di blog dapat menyebabkan proses loading yang lambat dan merusak penampilan.

5. Kamu tidak menyebarkan pos orang lain

Sebagai seorang blogger, kamu tidak bisa bangkit sendirian. Kamu harus berinteraksi dengan blogger lainnya dengan menunjukkan ketertarikan terhadap isi konten dari orang lain. Artinya, kamu harus benar-benar aktif menyebarkan artikel dari orang lain agar artikelmu dapat disebarkan.


Dan sekarang, saya memiliki 2 permintaan untukmu:
  1. Sebarkan pos ini,
  2. Dibawah pos ini ada kotak komentar, silahkan dikomentari pendapat anda :D
Baca Selengkapnya

Mengapa Kita Memerlukan Google Plus

mengapa kita memerlukan google plusKalau kamu mengenali internet, pasti kamu kenal dengan Google, sebuah mesin pencari yang telah mendunia dan yang paling sering digunakan untuk mencari informasi.

Google Plus, atau bisa disingkat menjadi G+ adalah situs sosial media yang dimiliki oleh Google dan memiliki fasilitas serta kepopuleran yang hampir sama dengan Facebook dan Twitter. Banyak orang bertanya "apa yang kami dapatkan dengan menggunakan G+". Lihatlah beberapa alasannya di bawah ini:

Mempermudahkan pembaca mengikuti update baru

Google Plus adalah sosial media yang cukup populer, dan lebih mudah dijalankan di Blogger.com. Dengan G+, pembacamu dapat mengikuti update terbaru. Karena, ketika kamu sudah selesai membuat sebuah pos, kamu dapat langsung menyebarkan pos tersebut kedalam profil G+mu.

Menambah Traffic

Mengapa bisa menambah traffic? Nah, G+ itu ada hubungan dengan Google. Bila seseorang menyebarkan posmu lewat Google Plus, misalnya: dengan mengeklik tombol G+, maka Google Plus akan otomatis menyarankan posmu ke Google. Semakin banyak orang mempromosikan blogmu lewat Google+, maka semakin besar kemungkinan posmu muncul di mesin pencari yang terkenal, Google.

Google+ lebih berbeda

Untuk beberapa alasan, Google Plus kelihatan berbeda. Kemungkinan G+ adalah sosial media yang lebih profesional dibandingkan Facebook dan Twitter. Karena, di Facebook dan Twitter bahkan anak-anak saja pun memiliki fan page sendiri. Ada juga yang mengatakan Facebook dan Twitter kebanyakan spam.

Membuat hangout

Hangout adalah fasilitas dari Google+ agar kita dapat berchatting video dengan banyak (sekelompok) orang. Dengan hangout kamu dapat berdiskusi, latihan online, membuat sebuah pertemuan, dll.


...Dengan begini, Google+ adalah sebuah pilihan utama, terutama bagi para pembisnis online. Bila kamu ada beberapa saran silahkan komentari dibawah ini...
Baca Selengkapnya

Bagaimana Menambahkan Menu Opera.com

Pernah mengunjungi Opera.com? Kalau sekarang kita mengunjunginya pasti kita dapat melihat menu navigasi opera yang keren terdiri dari panduan hitam dan merah. Dan tentu saja, pos kali ini akan mengajar kamu bagaimana cara menambahkannya. Terima kasih untuk Lord Html yang menyebarkan widget ini.

menu css3 opera



Fitur dari menu Opera

  • Desain yang simpel
  • Menggunakan CSS3
  • Tidak menggunakan gambar
  • Tidak menggunakan javascript
  • 10 warna
  • 2 gaya (terang & gelap)
  • Dapat bekerja dengan IE 8+

Menambahkannya ke dalam blogger

Langkah 1. Pergi ke Dasbor blogger > Tata letak > Tambahkan gadget.

Langkah 2. Pada pop-up window yang muncul pilih widget "Html/Javascript".

Langkah 3. Masukkan kode di bawah ini:
<link href="http://gemar-html.googlecode.com/svn/svn/trunk/css/menu-opera.css" rel="stylesheet" type="text/css">
<div id='cssmenu'>
<ul>
<li><a href='#Link 1'><span>Menu 1</span></a></li>
<li class='has-sub'><a href='#Link 2'><span>Menu 2</span></a>
<ul>
<li class='has-sub'><a href='#Link 2.1'><span>Menu 2.1</span></a>
<ul>
<li><a href='#Link 2.1.1'><span>Menu 2.1.1</span></a></li>
<li><a href='#Link 2.1.2'><span>Menu 2.1.2</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#Link 2.2'><span>Menu 2.2</span></a>
<ul>
<li><a href='#Link 2.2.1'><span>Menu 2.2.1</span></a></li>
<li><a href='#Link 2.2.2'><span>Menu 2.2.2</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#Link 3'><span>Menu 3</span></a></li>
<li><a href='#Link 4'><span>Menu 4</span></a></li>
</ul>
</div>​

Langkah 4. Sebelum menyimpan widget, ubah dulu:
  • Kode berwarna Hijau menjadi alamat link,
  • Kode berwarna Biru menjadi judul link.

Langkah 4: Nah, setelah selesai klik "Simpan".

Jangan lupa like Facebook kami untuk update berikutnya.
Baca Selengkapnya

5 Cara Menulis Sebuah Pos Yang Menarik

Kamu pasti pernah mengunjungi sebagian besar blog. Beberapa diantaranya hebat, ada yang biasa saja, dan ada lagi yang jauh lebih buruk.
cara menulis pos yang menarik

Ternyata, beberapa blog yang memiliki artikel yang dibuat sendiri memiliki jumlah pengunjung yang rendah. Sedangkan beberapa blog yang artikelnya merupakan hasil dari menjiplak malahan memiliki pengunjung yang lebih banyak.

Satu-satunya faktor perbedaan ini adalah daya pengikat dari pos. Banyak blogger dari seluruh dunia mengatakan "Artikel adalah Raja". Tapi, bila artikelmu sama sekali tidak dapat menarik pengunjung, itu tetap saja tidak berguna.

Dan berikut ini beberapa cara untuk membuat pos menjadi menarik:

1. Judul adalah Raja

Kebanyakan pengunjung blog itu malas. Ketika mereka memasuki blog, mereka tidak akan membaca isi ataupun silsilah singkat dari pos. Sebaliknya, mereka akan membaca judul dari pos.

Karena itu, buatlah judul pos yang lebih menarik. Seperti:
  1. Mengikutkan angka.
  2. Memulai judul dengan kata "Bagaimana".
  3. Persingkatkan Judul Pos dan membuat mereka lebih menarik.

2. Gunakan gambar yang menarik

Gambar lebih berharga daripada seribu kata, itu kenyataan. Bila pengunjung sudah malas/kelelahan membaca kalimat-kalimat, gambar dapat membantu mereka untuk menentukannya.

3. Selalu mengunakan kata "Kamu/Anda"

Kita menulis untuk pembaca, mengapa tidak menggunakan kata yang lebih gaul? Ketika kamu menulis sesuatu seperti berbicara secara langsung kepada pembaca, selain dapat menciptakan lingkungan yang baru, kamu juga mengubah pengunjung biasa menjadi pengunjung setia.

4. Jangan lupa menambahkan PUB

Kebanyakan blogger lupa ataupun tidak menambahkan Panggilan Untuk Beraksi (PUB) kedalam pos mereka.

Untuk menambahkan PUB, cobalah menambah beberapa permintaan, seperti:\
  • menyuruh pembaca untuk menyebarkan pos.
  • Berlangganan dengan blogmu.
  • Mengikuti kamu di Twitter atau Facebook.
  • Meninggalkan komentar, atau
  • Membeli produk.
Pembacamu akan melakukannya bila mereka merasa posmu sangat berguna.

5. Ejaan dan Formatting.

Agar sebuah pos kelihatan menarik dan rapi, kita perlu merapikannya. Gunakan bahasa yang jelas dan ejaan yang tepat. Sedangkan Formatting digunakan untuk mengatur bentuk dari paragraf menjadi menarik & mudah dibaca, misalnya kamu mengubah tulisan menjadi align-right (berada di kanan). itu termasuk cara mengatur formatting.


...Masih ada tips untuk menulis pos? Tuliskan di komentar di bawah ini.
(sumber: We Blog Better)
Baca Selengkapnya

Cara Menambahkan Galeri Pos Terpopuler Di Blog

Baru-baru ini, widget yang paling populer adalah widget Galeri Posting Terpopuler ini yang terkenal dengan sebutan Sliders atau Carousels. Widget ini menampilkan 10 foto dari posting terpopuler di blogmu secara horizontal. Sangat berguna untuk membuat pengunjung tetap tinggal di blog.

galeri pos terpopuler

Sebelum menambahkan widget ini, kamu harus tahu bahwa widget ini tidak sepenuhnya cocok untuk semua template. Maka, buatlah sebuah backup terlebih dahulu sebelum menambahkannya.

galeri post terpopuler

Cara Menambahkan:

Langkah 1. Masuk ke Dasbor Blogger - Template (buat dulu sebuah back-up) - Edit HTML - Lanjutkan - Expand Template Widget.

Langkah 2. Cari kode ]]></b:skin>

Langkah 3. Di atas/Sebelum kode ]]></b:skin>, masukkan kode di bawah ini:
#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxc4cPiI5zVYCGyNWSbACq_wgH38If2HyJ53LGiSe2B5bqme5X6gTysroX1JrgpJkg-1LjX1hCpL_ryyEQC7ATpN7EIM9t8HQbHgFgl_vLLL3C5tw9r45qOml_Wu6sASB3_Tutd_Tx1rsP/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
...Kamu bisa mengubah ukuran widget ini dengan mengubah nilai dari 590 (panjang) dan 126 (lebar). Disarankan untuk tidak mengubah ukuran bagi yang tidak berpengalaman.

Langkah 4. Sekarang, carilah kode </head>

Langkah 5. Di atas/Sebelum kode </head>, masukkan kode di bawah ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://gemar-html.googlecode.com/svn/trunk/js/galeri-posting-populer-diatas-post.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgljamoM29i1JLjZF7uKGdQdYa06tz64kl4QF45zIjJIRCCWewyYK2r7jB7NlXHSp6hBLAGCaM63duQsOreo0Xq9mMRYdlRf-mi3vJLeBJfzcvpcapmtMLFgfua9kkGhLdOXSLcuiU86yS/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5y-2BzXQ1T1Lj0lqzs2GmOLYU4kIMvWItlMKo5NGBQLfMdQFcFwtjTXS1eWaMWcGU8yVi22eyJU9A9G9Xd96lAN827BygSFFGvIb6QlzHkaeH4coV-_jVbKYrjCvRdutXI4aR9supeea5/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Langkah 6. Cari kode di bawah ini:
<b:section class='main' id='main' showaddelement='yes'>
...bila kode di atas tidak ketemu, carilah kode dibawah ini:
<b:section class='main' id='main' showaddelement='no'>

Langkah 7. Tepat di bawah kode di langkah 6, masukkanlah kode di bawah ini:
<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'><div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFYwrgGDx87OnHAiHItk9Go0cj7TrxL0MJ6h45ksgeXPm57Ii-RqLoTOOjqE5MOahWvv0Ba__REtM-AanjdbJUbMZHFs61PtoW8dyEc2QnVo0u1fH0nQwVQXO2AfNMvX_usSIdxt3RyGeB/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if> </b:includable>
</b:widget>
...Hapus kode berwarna biru jika kamu mau menampilkan widget ini di halaman postingan juga.

Langkah 8. Pratinjau dulu templatemu. Bila hasilnya bagus, Simpan templatemu.
Baca Selengkapnya

Widget Komentar Terbaru Dengan Avatar Bulat

Widget Komentar Terbaru adalah widget yang diperlukan agar pengunjung tetap berada di halaman blog. Widget yang saya perkenalkan ini selain menaruh link dan isi komentar juga terdapat avatar yang bulat di sampingnya.
Dan tentu saja, kamu juga dapat mengubah avatar defaultnya.

Contoh widget:

widget komentar terbaru dengan avatar

Cara Menambahkannya:

Langkah 1. Pergi ke Dasbor Blogger - Tata Letak - Tambah Gadget - Html/Javascript.

Langkah 2. Masukkan kode di bawah ini:
<style type="text/css">
ul.w2b_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}
.w2b_recent_comments li {
    background: none !important;
    margin: 0 0 6px !important;
    padding: 0 0 6px 0 !important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}
.w2b_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}
.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.w2b_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}
.w2b_recent_comments li span {
    margin-top: 4px;
    color: #666;
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://gemar-html.googlecode.com/svn/trunk/js/widget-komentar-terbaru-dengan-avatar-bulat.js"></script>
<script type="text/javascript" src="http://blog-kamu.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Langkah 3. Sebelum menyimpan widget, ubah dulu:
  • Tulisan berwarna merah menjadi alamat blog anda.
  • Tulisan berwarna biru untuk mengatur jumlah komentar yang ditampilkan. (ingat! Ada 2 tulisan yang berwarna biru)
  • Tulisan berwarna jingga untuk mengatur besar avatar yang ditampilkan.

Langkah 4. Simpan widget dan nikmati!!
(sumber: Helplogger)
Baca Selengkapnya

Widget Pos Terbaru Yang Menampilkan Judul Saja

widget pos terbaru
Widget posting terbaru adalah widget yang diperlukan oleh setiap blog. Karena membuat pengunjung lebih mudah menjelajahi halaman blognya.

Widget yang akan saya perkenalkan ini adalah widget yang menampilkan posting terbaru secara simpel dengan hanya menampilkan judul postnya. Sangat berguna bagi yang takut blognya keberatan.
widget pos terbaru dengan judul

Cara Menambahkan:

Langkah 1. Masuk ke Dasbor Blogger - Tata Letak - Tambah Gadget - Html/Javascript.

Langkah 2. Masukkan kode dibawah ini:
<div id="hlrpsb">
<script style="text/javascript" src="http://gemar-html.googlecode.com/svn/trunk/js/widget%20posting%20terbaru%20dengan%20judul%20saja.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://blog-kamu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Langkah 3. Sebelum menyimpan widget, ubah dulu:
  • Tulisan berwarna merah menjadi alamat blogmu.
  • Tulisan berwarna biru menjadi jumlah post terbaru yang ditampilkan.

Langkah 4. Simpan widgetmu dan nikmati.

Komentari bila ada masalah atau kepayahan widget ini.
(sumber: Helplogger)
Baca Selengkapnya

Membuat Huruf Pertama Setiap Pos Menjadi Huruf Kapital

Cara lain dalam mendesain blog adalah mengubah huruf pertama menjadi huruf besar / kapital atau yang disebut Drop Caps. Efek ini membuat huruf pertama menjadi diperbesarkan dan mengambil posisi dari barisan kepertama sampai barisan ketiga atau keempat. Bukan cuma memperbesarkan, efek ini juga dapat mengubah font dan warna huruf tersebut. Biasanya kamu dapat melihat efek ini didalam blog bergaya Magazine, dll. Didalam tutorial ini, saya akan mengajari kamu bagaimana membuat efek ini.

Efek Drop Caps

Langkah 1. Masuk ke Dasbor Blogger - Template (buat dulu sebuah back-up) - Edit HTML - Lanjutkan - Expand Template Widget.

Langkah 2. Cari (Ctrl + F) kode ]]></b:skin>

Langkah 3. Diatas/sebelum kode ]]></b:skin>, tambahkan kode di bawah ini:
.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}
Pengaturan:
  • ubahlah kata yang berwarna biru untuk mengubah warna huruf kapitalnya.
  • ubahlah kata yang berwarna ungu untuk mengubah ukuran huruf kapitalnya.

Langkah 4. Carilah kode <data:post.body/>

Langkah 5. Kemudian ganti kode di atas menjadi kode di bawah ini:
<div class='capital'><data:post.body/></div>

Langkah 6. Simpan template anda.


Sekarang, setiap post yang ada di blogmu selalu ada huruf kapital pada huruf pertama. Ingat! kemungkinan efek ini hanya akan kelihatan di dalam halaman post (tidak di halaman utama). Dan menambahkan gambar tepat sebelum huruf pertama dapat membuat efek ini hilang.
Baca Selengkapnya

Kotak Pencarian CSS3 Bergaya Apple.com

Kamu pasti sudah mengenal kotak pencarian yang ada di Apple.com. Itu adalah kotak pencarian keren yang dapat melebar ketika diklik. Banyak orang yang ingin menambahkan kotak pencarian tersebut termasuk saya. Sekarang, akhirnya Bloggermint menyebarkan cara menambahkan kotak pencarian ini. Tersedia 3 macam warna kotak pencarian, yaitu dengan latar belakang gelap, latar belakang terang, dan latar belakang via apple.com yang merupakan campuran dari kedua latar sebelumnya.

kotak pencarian css3 via apple

Fitur

  • Menggunakan CSS3.
  • Memiliki 3 gaya/model.
  • Cepat loading.

Cara Menambahkannya:

Langkah 1: Masuk ke Dasbor Blogger > Tata Letak > Tambah gadget > Html Javascript.

Langkah 2: Masukkan kode dibawah ini dan simpan widget tersebut.
<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

Langkah 3: Pergi ke Template - Edit Html - lanjutkan. masukkan hanya salah satu dari ketiga kode dibawah ini tepat di atas/sebelum kode ]]></b:skin>


Kode 1: Kotak pencarian dengan latar belakang gelap

kotak pencarian latar belakang gelap
#search {
}
#search input[type="text"] {
    background: url(search-dark.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    width: 200px;
    }

Kode 2: Kotak pencarian dengan latar belakang terang

kotak pencarian latar belakang terang
#search {
}
#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    width: 200px;
    }

Kode 3: Kotak pencarian via apple.com

kotak pencarian apple
#search {
}

#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search input[type="text"]:focus {
    background: url(search-dark.png) no-repeat 10px 6px #fcfcfc;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

Langkah 4: Simpan templatemu dan lihat hasilnya.

Bila muncul masalah di kotak pencarian ini silahkan dikomentari. Saya tahu kotak pencarian ini masih belum sempurna :)
Baca Selengkapnya

Widget Berlangganan Dengan Background Melebar Pada Hover

Saya akan menyebarkan sebuah widget keren untuk berlangganan dengan blog kita. Widget CSS3 ini seperti sebuah daftar link berwarna dan dapat memperlebarkan background ketika mouse berada diatasnya. Widget ini tersedia untuk ditambahkan 4 social link termasuk: Facebook, Twitter, Google+, dan Pinterest serta 1 link berlangganan untuk RSS.
widget tombol berlangganan melebar

Cara menambahkan:

Langkah 1. Masuk ke Dasbor Blogger - Tata letak - Tambah gadget - Html/Javascript.

Langkah 2.
Kemudian masukkan kode dibawah ini:
<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMHemICHoKWZphtj7kf_bu7nh-7dskvHlLz9ERhyphenhyphenhVGJJxsrpz8TxrLO82wNiDlTsFGYwL4GMeXueqEO93twpOHZLTw62uwGlGdzyvPFNUghE5mHIM6Jkk-JGttgqmYqhuJTWuv5es4P4/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/halaman fan page facebook/">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="http://twitter.com/username/">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/u/0/alamat profil google+/">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="Alamat profil Pinterest">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/alamat feed rss">Subscribe with RSS</a></li>
</ul>

Langkah 3. Sebelum menyimpan widget, ubahlah warna merah menjadi url.

Langkah 4: Simpan widget ini dan nikmati...
Baca Selengkapnya

Menambah Traffic Dengan Mengatur Gambar

Jangan menganggap sepele dengan gambar yang diupload ke blog. Selain untuk menghiasi ataupun mengimformasikan berita, gambar juga bisa menambahkan traffic bila kita bisa mengaturnya.

Mari saya jelaskan dulu. Kamu pasti biasanya men-upload gambar yang telah didownload dari Google atau gambar yang difotoin dengan kamera untuk diletakkan keblog, kan? Biasanya gambar-gambar itu akan mempunyai nama-nama yang aneh, tapi kita malahan upload tanpa mengatur apapun. Itulah kesalahan kita.

Maka, kamu harus mengikuti 2 langkah di bawah ini sebelum mempublikasikan postmu..

1. Mengubah Nama Gambar Menjadi Kata Kunci

Ketika kita men-download gambar ataupun berfoto. Biasanya gambar itu memiliki nama yang aneh, seperti untitled.png, img6.png, sshot1.jpeg, dll. Jadi, untuk mengubah nama menjadi keyword, Saya akan membuat namanya blog.png atau tentang blog.png, dll.

2. Menambahkan Alt Tag ke dalam gambar

Alt Tag adalah tulisan yang dimasukkan ke gambar agar gambar tersebut bisa dimengerti oleh mesin pencari. Alt Tag juga dapat menambahkan traffic pada blogmu.

Cara menambahkan Alt tag:

Langkah 1: Bikin sebuah blog pos dan upload gambar didalam posting tersebut.
gambar alt tag

Langkah 2: Klik pada gambar sehingga muncul batang tulisan berwarna biru muda. Lalu klik pada "Properties".
batang biru pada gambar

Langkah 3: Pada kotak yang muncul, masukkan deskripsi gambar sesingkat mungkin pada kotak tulisan dibawah "alt text". kemudian klik "OK".
tampilan properties gambar

Sekarang gambarmu sudah memiliki alt tagnya. Alt tag yang ideal biasanya menggunakan 3-5 kata pada satu gambar.
Baca Selengkapnya

Menghilangkan Kotak Komentar Pada Post Tertentu

Kamu tahu kotak komentar yang ada di setiap halaman dan posting blog kita, itu biasanya ditampilkan dengan cara embed. Tapi ada beberapa halaman yang tidak mau ditampilkan kotak komentarnya seperti halaman Forum, Buku Tamu, Site Map, dll. Untuk itu saya akan sebarkan cara menghilangkan kotak komentar berikut ini:
menghilangkan kotak komentar

Cara Menghilangkan Kotak Komentar:

Langkah 1: Bikin dulu 1 posting yang tidak mau ditampilkan kotak komentarnya (bila telah dibikin tinggal diedit kembali)

Langkah 2: Tetap dihalaman edit entri/laman, lihat bagian kanan halaman, temukan dan klik kata "Pilihan" (Options) disamping tanda roda bergerigi.
menu pilihan edit entri

Langkah 3: Dibawah kata "Komentar pembaca", klik pada pilihan "Jangan bolehkan" kemudian klik "Selesai" (bila posting/halaman sudah pernah dipublikasikan, klik pada "Jangan bolehkan, sembunyikan yang ada")
tampilan menu pilihan dientri

Sekarang kamu sudah bisa mempublikasikan postingmu kapan saja.
Baca Selengkapnya

Diberdayakan oleh Blogger.

Followers