Membuat Blog Semudah Membuat Kopi

Di mana sih tempat belajar blog yang terbaik? Banyak tempat pelatihan yang memberikan pengetahuan untuk belajar blog. Biasanya tempat pelatihan belajar blog mematok tarif yang lumayan tinggi untuk satu kali pertemuan. Oh, belajar blog itu mesti bayar ya?!

Tentu saja, jika kita tidak mau memaksimalkan kemampuan diri sendiri, untuk belajar blog pun harus merogoh kocek yang lumayan. Padahal, seandainya kita tahu kalau belajar blog itu semudah membuat kopi, tentunya untuk mengeluarkan biaya pun menjadi sayang, bukan?

Perlu aku tekankan sekali lagi, belajar blog memang mudah, tak jauh lebih sulit dengan membuat kopi. Namun, sebelum menguraikan betapa mudahnya belajar blog, aku akan memperkenalkan sejarah blogger.com dan mengenal orang-orang hebat di baliknya. 

Sejarah Blogger.com

Kegiatan belajar blog kali ini akan diawali dengan pengenalan sejarah blogger. Blog kependekan dari Web Log. Blog merupakan buku catatan harian online yang bisa dibaca pengguna internet lainnya. Inilah hal yang membedakan blog dengan buku  harian. Blog pertama kali diperkenalkan oleh Pyra Labs pada 23 Agustus 1999 dengan nama blogger.com. 

Pyra Labs merupakan sebuah perusahaan yang didirikan oleh Evan William (sekarang orang lebih mengenal Evan William sebagai CEO Twitter) dan Meg Hourihan. Pada awalnya, mereka menyediakan layanan ini secara gratis karena tidak memiliki ide untuk menghasilkan uang dari layanan tersebut.

Ketika perusahaan kehabisan dana, beberapa staf bekerja tanpa gaji dalam beberapa minggu, bahkan dalam beberapa bulan. Hal ini membuat karyawan Pyra Labs mundur bersama-sama dengan salah satu pendirinya Meg Hourihan. 

Evan Williams akhirnya menjalankan perusahaan ini sendirian sampai ia mendapatkan dukungan investasi dari Dan Bricklin, pendiri Trellix. Sejak saat itu, kelangsungan hidup blogger didukung oleh program dan layanan blogger pro yang berbayar. 

Akuisisi Google.com

Pada 2003, blogger.com diambil alih oleh google.com. Orang-orang Pyra Labs yang ada saat itu ditarik masuk ke dalam google. Mereka terdiri atas Evan William, Jason Shellen, Steve Jenson, Jason Sutter, Jason Goldman, dan Rudy Winnacker.

Pada 2004, Majalah PC Magazine menganugerahkan “People of the Year” kepada Evan Williams bersama dengan teman-teman yang ada di blogger, meskipun pada tahun yang sama Evan Williams keluar dari google dan membuat perusahaan sendiri, yaitu Twitter, layanan jejaring sosial yag saat ini sedang naik daun.

Google menggratiskan beberapa fitur yang semula berbayar. Blogger terus dikembangkan dengan menambahkan beberapa fitur baru, seperti pengaturan label, tampilan pengaturan tata letak dengan fitur drag and drop, HTML, menampilkan gambar, video, dan sebagainya. 

Hal ini memudahkan para pengguna yang tidak memiliki latar belakang pemrograman. Sehingga, belajar membuat blog itu semudah membuat kopi. Tidak perlu keterampilan dan kemampuan khusus tentang teknik pembuatan website, siapa pun bisa melakukannya dengan mudah.

Nah, setelah mengetahui sejarah blogger.com, kegiatan belajar blog akan dilanjutkan pada hal yang sudah lebih mengarah pada proses pembuatan blog. Namun, seseorang tentu memiliki sebuah alasan sehingga memilih suatu produk, bukan? dalam belajar blog pun hampir sama, banyak website yang menyediakan layanan ngeblog, namun belajar blog di blogger.com memiliki sejumlah keunggulan. 

Alasan Penggunaan Blogspot

Bagi seorang yang baru pertama kali belajar Blog, layanan blogspot boleh jadi pilihan terbaik yang layak kita dapatkan. Mengapa aku menyarankan menggunakan blogspot, karena ada beberapa alasan penggunaan blogspot yang sangat membantu kita yang tengah belajar blog. Adapaun alasan tersebut adalah sebagai berikut:

• Blogspot sangat mudah dipelajari dalam hitungan menit. 
• Desain blogspot mudah diganti. 
• Layanan blogspot sangat cepat dan mudah diperbaharui. 
• Blogspot memiliki media pemasaran yang efektif. 

Selain banyaknya alasan yang menuntun seseorang yang tengah belajar blog untuk menggunakan blogspot, masih ada alasan lain yang sangat disayangkan jika kita melewatkan memilih blogspot. 

Alasan Memilih Blogspot

Seperti yang telah disinggung sebelumnya, ada banyak alasan yang menuntut kita memilih blogspot. Adapun beberapa alasannya sebagai berikut.

• Tidak perlu instalasi. 
• Gratis semua fitur. 
• Mudah dimodifikasi. 
• Ada fasilitas drag and drop. 
• Mudah mengganti alamat. 

Buat Sebuah Blog dalam 3 Langkah 

Membuat blog tidaklah susah, kita bisa mulai belajar blog dengan mengikuti beberapa langkah sebagai berikut:

• Ciptakan sebuah akun (account). 
• Beri nama blog. 
• Pilih template. 

Pendaftaran Akun Baru

Kegiatan belajar blog yang selanjutnya telah sampai pada aktivitas membuat blog itu sendiri. Langkah pertama yang harus kita lakukan sebelum membuat blog adalah membuat akun baru. Cara pendaftaran akun baru di blogger.com adalah sebagai berikut:

• Kita buka browser web (internet explorer, Mozila firefox, Opera), selanjutnya ketik www.blogger.com 
• Pilih teks Ciptakan Blog Anda. 
• Selanjutnya, kita diminta untuk mengisi formulir pendaftaran. 
• Penentuan nama blog yang akan kita gunakan. 
• Pilih template. 
• Blog telah tercipta. 

Masuk Sistem (Login)

Setelah blog selesai dibuat, kita dapat masuk ke blog yang telah kita buat dengan langkah-langkah sebagai berikut:

• Akseslah halaman www.blogger.com 
• Masukkan alamat e-mail dan kata sandi. 
• Jika proses login berhasil, akan muncul halaman dashboard. 
• Klik logout untuk keluar dari halaman pengelolaan blog. 

Menambah Video dari Youtube

Langkah-langkah menambah video youtube di blog yang telah kita buat adalah sebagai berikut.

• Klik www.youtube.com, pilih video yang kita sukai. 
• Kita pilih kotak “Embed”, copy dengan Ctrl + C. 
• Masuk ke admin situs blog, pilih tata letak. 
• Tambahkan gadget, klik link HTML/Javascript. 
• Kta letakkan mouse dalam isian kontens, CTRL+V (paste). 
• Simpan. 
• Elemen baru telah ditambahkan, lihat blog. 
• Klik link lihat blog. 
• Pemuatan video akan membuat akses blog lambat. 

Menambah Widget Menu Shoutbox

Adapun langkah-langkah menambah widget menu shoutbox adalah sebagai berikut:

• Klik www.oggix.com, shutmix.com, myshoutbox.com 
• Kita pilih link register. 
• Jika pendaftaran sukses, kita diminta untuk login. 
• Install shoutbox. 
• Kita tentukan tipe dan warna shoutbox. 
• Kita tentukan template shoutbox. 
• Kita salin kode HTML-nya di tata letak, tambah gadget, HTML klik CTRL+V. 
• Lihat blog. 

Cara Meningkatkan Pengunjung Blog

Langkah-langkah untuk meningkatkan pengunjung blog adalah sebagai berikut:

• Update dan posting blog setiap hari. 
• Blog walking dan buat komentar di blog orang lain. 
• Aktif di situs jejaring sosial seperti facebook dan twitter. 

Menghapus Blog

Langkah-langkah dalam menghapus blog adalah sebagai berikut:

• Masuk ke halaman dashboard terlebih dahulu. 
• Klik link setting. 
• Klik link basic. 
• Pada bagian paling bawah akan ditemukan “Delete Your Blog?" 
• Delete This Blog.  

Bagaimana, belajar blog itu sangat mudah semudah membuat kopi, bukan? Hal yang perlu diperdalam dalam belajar blog adalah, bagaimana caranya memanfaatkan blog yang kita miliki mampu menghasilkan $$$, mari kita belajar bersama.

Tips Melakukan Blogwalking Yang Efektif

Untuk membuat blog ramai pengunjung, maka kita harus memperkenalkan blog kita ke para blogger. Salah satunya adalah dengan melakukan blogwalking ke blog-blog sahabat, oleh karena itu kali ini aku akan membahas artikel tentang BLOGWALKING, yang aku beri judul Tips Melakukan Blogwalking Yang Efektif, karena beberapa waktu lalu ada sahabat blogger berkomentar yang menjurus ke spam dan memasang komentar yang sama dengan live link (link hidup) pada beberapa kolom komentar di setiap postingin, sehingga dengan sangat terpaksa aku hapus dari kolom komentar

Apaan tu Blogwalking? 

Blogwalking adalah suatu aktivitas di mana kita mengunjungi blog-blog lainnya dalam rangka silaturahmi. Nah untuk menarik pengunjung biasanya para blogger (termasuk aku) melakukan aktivitas blogwalking. Jadi singkatnya blogwalking adalah jalan-jalan, hehehe...

Apa Manfaat Blogwalking?

Blogwalking memiliki manfaat sebagai berikut;

• Sebagai Media Untuk Membangun Tali Silaturahmi
• Sebagai cara mempromosikan blog gratisan
• Sebagai media, atau cara mendapatkan backlink
• Sebagai media untuk mendapatkan banyak pengunjung
• Sebagai media untuk saling berbagi pengetahuan
• Sumber inspirasi dalam membuat artikel.

Hal-Hal Yang Membuat Blogwalking Menjadi Sia-Sia;

Ternyata blogwalking itu tidak selalu memberikan manfaat seperti di atas bagi kebanyakan blogger. Karena masih banyak sekali blogger yang egois dan mementingkan diri sendiri hanya untuk mengutamakan backlink dengan cara menjadi blog SPAMMER. Padahal jika kita pahami lebih dalam, menjadi spammer itu hanya akan membuat blogwalking kita sia-sia. Kenapa? berikut jawabanya :

• Komentar yang bersifat SPAM akan langsung dihapus oleh admin blog sehingga blog walking kita menjadi sia-sia, yang tadinya ingin mendapatkan backlink, yang ada malah rugi karena kita sudah rela memakai waktu kita untuk berkomentar, ternyata komentar kita tidak disetujui dan malah dihapus.
• Tidak disukai oleh orang lain, blogger tukang nyepam tidak akan disukai banyak orang, karena tujuannya bukan untuk bersilaturahim, tapi hanya untuk sekedar nyebarin link yang belum tentu link tersebut akan bermanfaat.
• Memiliki reputasi buruk di mata mesin pencari seperti google, karena blog yang suka nyepam kurang di sukai oleh google dan blog kita tentunya nanti akan dicap jelek oleh mesin pencari google.

Cara Melakukan Blogwalking Yang Efektif?

Agar kegiatan blogwalking yang kita lakukan tidak sia-sia, ada beberapa hal yang harus dilakukan, diantaranya :

• Berkomentar sesuai topik / tema artikel.
• Tidak mencantumkan live link didalam isi komentar
• Kita gunakan akun "Name/URL" jika kita ingin menanam link, misalnya:
• - Name : Mengisi dengan nama / judul blog / atau keyword (jika diijinkan)
• - URL : Mengisi dengan alamat blog atau alamat postingan
• Setiap kali kita berkunjung ke blog lain kita usahakan untuk meluangkan waktu untuk saling bertukar link (link Exchange) dan saling follow blog.
• Tinggalkan komentar yang bijak dan menarik sehingga dapat menarik perhatian admin blog dan blogger lain untuk berkunjung ke blog kita

Tips Melakukan Blogwalking

• Kita lakukan blogwalking secara rutin tiap hari atau seminggu sekali dengan waktu antara 30 menit sampai 1 jam minimal ke 10 blog terutama yang ber-pagerank tinggi. Jika blog yang dikunjungi itu ber-pagerank tinggi, maka otomatis kita berkomentar di blog yang terpercaya dengan jumlah pengunjung yang banyak dan mempunyai kesempatan mendapatkan trafik lebih banyak dari pembaca lain yang meng-klik link yang kamu pasang di komentar tersebut.
• Kita cari blog yang sesuai dengan minat kita. Hal ini dikarenakan kita akan mendapatkan keasyikan tersendiri dalam berkomentar karena otomatis kita akan tertarik untuk membaca artikel-artikel tersebut.
• Jika sibuk, kita utamakan blog-blog yang wajib dikunjungi. Buat tabel yang berisi blog-blog yang memiliki pagerank yang tinggi dan juga beraliran dofollow agar hasilnya nanti lebih maksimal.
• Berkomentar sesuai isi artikel agar tidak di anggap spam dan supaya nyambung dengan isi artikel. kita hindari komentar ketut seperti "salam kenal", "halo", "info bagus", "mantap" apalagi ditambah dengan permintaan kunjungan balik.
• Berkomentar dengan bahasa dan makna yang bukan negatif atau propokatif.
• Dan juga mengikuti dan mematuhi perarturan-peraturan untuk berkomentar pada blog tersebut agar komentar kita disetujui untuk ditampilkan.

CSS Popup Image Viewer

CSS Popup Image Viewer adalah kode CSS yang berfungsi untuk menampilkan gambar pada jendela baru (popup)dengan ukuran yang berbeda apabila gambar disorot dengan mouse.

Sebagai contoh coba sampeyan sorot gambar dan link dibawah ini;

Dalam bentuk gambar

dalam bentuk link

Contoh Link

Kode dan cara mengaplikasikan di blogger sebagai berikut;

Login dengan akun sampeyan di Blooger

Pasang kode ini pada template blog sampeyan tepatnya diatas kode ]]></b:skin>

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #fff;
padding: 10px;
left: -1000px;
border: 5px solid #ccc;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 5px;
}
.thumbnail:hover span{
visibility: visible;
top: -200px;
left: 20px;
}

Kemudian Pasang kode HTML berikut ini untuk membuat CSS Popup Image Viewer, letakan dimanapun kita ingin menampilkannya,Misalnya saja pada halaman Posting;

Dalam bentuk gambar

<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm7t-9IgcbddpBcVeAhUHgkzS77cBIT-qy-bxwwfvnNR_hZAErm283-o2fJesUSclyLm148K5bhFzfDquoR6TMdwbCzXBpLVrpCo9ASdZDmhqbSbWWpPkzNuD1ZF7yUtLtMvItAPBk16U/s1600/vector.jpg" height="298" width="320" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm7t-9IgcbddpBcVeAhUHgkzS77cBIT-qy-bxwwfvnNR_hZAErm283-o2fJesUSclyLm148K5bhFzfDquoR6TMdwbCzXBpLVrpCo9ASdZDmhqbSbWWpPkzNuD1ZF7yUtLtMvItAPBk16U/s1600/vector.jpg" />
</span></a>

dalam bentuk link

<a class="thumbnail" href="http://belajar-coreldraw.blogspot.com/2014/05/perbedaan-vector-art-dan-vexel-art.html">Contoh Link<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm7t-9IgcbddpBcVeAhUHgkzS77cBIT-qy-bxwwfvnNR_hZAErm283-o2fJesUSclyLm148K5bhFzfDquoR6TMdwbCzXBpLVrpCo9ASdZDmhqbSbWWpPkzNuD1ZF7yUtLtMvItAPBk16U/s1600/vector.jpg"/></span></a>

kalau berkenan dan mau pake, ganti URL link dan URL gambar dengan punya sampeyan

Mengganti Bullet List Image Default Blogger

Untuk mempercantik tampilan blog banyak para blogger menghias blognya dengan berbagai teknik, salah satunya mengganti bullet image di blogspot, memang biasanya secara default bullet blog kurang menarik, maka dari itu tidak jarang para blogger menggantinya agar kelihatan lebih eksis dan menarik. Tapi untuk mengganti bullet dengan bullet image di blogspot ada pertimbangan yang harus kita gunakan agar nantinya malah menjadi kacau jika salah persepsi.

Dalam postingan kali ini aku akan mencoba share cara mengganti bullet default ke bullet yang lebih menarik dengan menggantinya dengan image lain, untuk detail caranya silahkan simak penjelasan berikut :

• Login ke akun www.blogger.com
• Pilih salah satu blog yang akan di edit, lalu pilih menu Template > Sesuaikan dan tunggu beberapa saat hingga muncul Blogger Template Designer
• Lakukan langkah urut nomor. 1. Pilih Tingkat lanjut. 2. Cari menu Tambahkan CSS dengan menggeser schroll bar kebawah. 3. Copy-paste kan kode berikut didalamnya form Tambahkan CSS Khusus di sisi kanannya. 4. Terapkan ke Blog. 5. Kembali ke Blogger

post ul li {
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9mn0h2RubQ3gJBK0D5Mo63AP78bMoHcL64tqUAE8PN68vyqUwjYGu4x8ZoipnyNIR5mIKBD6EnQiPkjMSZw5gw7sghZLryy-pBZAaBupyaJI_94njrBqLif93CiLIo-Y1tiIfWHGNrVs/s1600/check.gif');border-bottom:1px solid #ccc;padding:.5em 0 .3em .5em;
}

• Pada script kode yang berwarna merah diatas, bisa kita ganti linknya sesuai dengan image list bullet yang kita punya

Lihat demo disini...!!

Demikian semoga selamat sampai tujuan...

Membuat Slide Show Gambar di Halaman Posting Blogger

Slide show bisa digunakan untuk menampilkan banyak foto tanpa menyita banyak space, karena foto akan diputar layaknya sebuah video, sehingga lebih menarik dan hemat tempat pada halaman posting blog atau website.

Slide show ini bisa digunakan untuk menampilkan atau memajang foto-foto produk misalnya pada toko online, Sales letter, Mini site dan sejenisnya.

Cara untuk membuat slide show ini sangat mudah, kita tinggal menyiapkan foto yang sudah diupload pada file hosting, seperti Picasa, Photobucket, Flickr, dll. Atau cara yang sederhana kita bisa memanfaatkan posting blogger untuk mengupload dan otomatis gambar kita akan tersimpan pada Picasa.

Langkah membuatnya sebagai berikut;

• Login ke blogger
• Pilih Entri Baru 
• Beri judul halaman dan ketik konten artikel
• Pilih mode HTML
• Masukan kode HTML berikut ini:

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 100%;
   height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</div> 

• Ganti URL Foto 1 dengan URL foto yang sudah di upload
• Kita bisa juga menyesuaikan tinggi foto (height) dan lebarnya.
• Kita bisa menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan kode sama seperti <img src="URL Foto 4" /> dan seterusnya.
• Simpan jika sudah selesai. 

Demikian Cara Membuat Slide Show Gambar di Halaman Posting Blogger..

Monggo di sekecaaken...

Disable Klik Kanan Mouse Dan Proteksi Artikel Blog

Jika kita ingin menonaktifkan (disable) fitur klik kanan mouse pada website atau blog yang kita miliki dengan tujuan ingin menghindari seseorang mengambil atau mengcopy gambar atau data, biasanya script ini digunakan pada website bisnis online.

Kalau kita gunakan pada blog seperti blog tutorial kita ini, maka jangan mengharap kita mendapat simpati dari para blogger lain, justru kita akan dikucilkan.

Untuk disable klik kanan kita dapat menggunakan script sederhana di bawah ini.

<script language=JavaScript>
<!--

//Disable Klik Kanan

var message="";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function("return false")
// -->
</script>

Untuk pasang script diatas, Buka Dasbor > Tata Letak > klik Tambah Gadget > Pilih opsi HTML/Javascript masukkan script didalamnya dan simpan, kemudian untuk proteksi konten atau artikel blog, kita bisa  mengganti kode pada Template > pada Edit HTML cari kode <body> dan ganti dengan kode dibawah ini;

<body onmousedown='return false' oncontexmenu='return false' onselectstart='return false'> 

Untuk melihat contoh blog yang di proteksi,  pencet tombol dibawah ini;

Demikian...

Membuat Tombol Back To Top Melayang

Fitur navigasi back to top ini berfungsi untuk perintah cepat agar pengunjung bisa kembali ke bagian atas halaman blog dengan tidak menggunakan fungsi scroll, tapi hanya cukup satu klik dengan menekan tombol back to top.

Tombol back to top pada template blogger ini berjenis melayang (floating) letak posisinya pada bagian pojok kanan bawah.  Script ini dibuat berdasarkan perintah link menuju ke main wrapper (#), dan kode ini tidak menggunakan javascript/jquery.

Dalam peragaan atau demo kita menggunakan gambar dibawah ini;

Cara memasang tombol back to top melayang sebagai berikut;

1. Copy kode dibawah ini;

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpAwx64dFLYmMhmR4uujsoo3cX_bBrl4VaZcuYnMGz07mvq_qvZ6JSjuBXkHmcPDiSKqZI_enfofc0-wPs3qscS2qU4SvBn87eYgPySM23DNgSsr67LI97GFHxNZlIJaKkZ4vhv9UX8iE/s1600/backtotop.png" /></a>

Ganti kalimat warna merah dengan kata yang diinginkan. Ganti warna biru dengan url gambar back to top yang sampeyan kehendaki.

2. Buka Dasbor > Tata Letak > Klik Tambah Gadget > Pilih  opsi HTML/Javascript.

3. Letakkan kode tersebut didalamnya, lalu simpan.

Lihat Demo...

Menu Vertical Drop Down Dengan CSS

Membuat menu navigasi dropdown vertikal untuk diaplikasikan pada template Blogger caranya cukup mudah, kita hanya tinggal menambah gadget HTML/Javascript kemudian memasukkan kode ke dalam gadget tersebut

Menu vertikal ini cukup unik karena akan bergeser turun saat cursor mouse diarahkan ke menu, bila tertarik monggo digunakan di blognya, untuk penampakan demo bisa klik pada tombol dibawah ini.


Tombol Demo;

Dibawah ini adalah kode untuk membuatnya;

<style type="text/css">
* {
  margin: 0px;
  padding: 0px;
}
nav {
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
  margin: 50px auto; /*for display only*/
  width: 300px;
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
  background: #fff;
  width: 300px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  background: #9DB6D7;
}
.menu-item h4 a {
  color: white;
  display: block;
  text-decoration: none;
  width: 300px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  background: #a90329; /* Old browsers */
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
  background: #cc002c; /* Old browsers */
  background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
  font-size: 13px;
  padding: 8px 12px;
  color: #aaa;
}
/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #0A0A0A;
  display: block;
  width: 250px;
}
/*li Styles*/
.menu-item li {
  border-bottom: 1px solid #eee;
}
.menu-item li:hover {
  background: #eee;
}
/*ul Styles*/
.menu-item ul {
  background: #B2D8E0;
  font-size: 13px;
  line-height: 30px;
  height: 0px; /*Collapses the menu*/
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}
.menu-item:hover ul {
  height: 115px;
}

</style>
<nav>
<div class="menu-item">
<h4><a href="#">Menu 1</a></h4>
<ul>
<li><a href="#">Sub Menu 1.1</a></li>
<li><a href="#">Sub Menu 1.2</a></li>
<li><a href="#">Sub Menu 1.3</a></li>
<li><a href="#">Sub Menu 1.4</a></li>
<li><a href="#">Sub Menu 1.5</a></li>
</ul>
</div>
<div class="menu-item">
<h4><a href="#">Menu 2</a></h4>
<ul>
<li><a href="#">Sub Menu 2.1</a></li>
<li><a href="#">Sub Menu 2.2</a></li>
<li><a href="#">Sub Menu 2.3</a></li>
<li><a href="#">Sub Menu 2.4</a></li>
<li><a href="#">Sub Menu 2.5</a></li>
</ul>
</div>
<div class="menu-item">
<h4><a href="#">Menu 3</a></h4>
<ul>
<li><a href="#">Sub Menu 3.1</a></li>
<li><a href="#">Sub Menu 3.2</a></li>
<li><a href="#">Sub Menu 3.3</a></li>
<li><a href="#">Sub Menu 3.4</a></li>
<li><a href="#">Sub Menu 3.5</a></li>
</ul>
</div>
</nav>

Yang perlu diperhatikan:

1. Ukuran lebar menu adalah 300px, sesuaikan dengan ukuran sidebar blog panjenengan dengan mengurangi atau menambahnya.
2. Untuk menambah navigasi, copy saja kode yang sudah aku beri warna merah, kemudian ganti # dengan link URL.
3. Yang berwarna biru, sebagai judul/anchor text, sesuaikan dengan judul artikel.

Cara memasang pada template blogger:

1. Masuk ke Dasbor Blog > Tata Letak > Tambahkan Gadget > Pilih opsi HTML/Javascript
2. Masukkan kode di atas.
3. klik tombol simpan dan Lihat Blog

Menu diatas hanya cocok dipakai pada sidebar...Demikian,

Menu Drop Down Sederhana Dengan CSS

Cara ini adalah yang paling mudah untuk membuat menu dropdown tanpa kode javascript, kita membuat menu dropdown ini cukup dengan kode CSS, tentunya dengan sedikit ngetrik.

Sekalipun kita tidak mengaktifkan javascript pada browser, dropdown ini sudah pasti tetap berjalan karena yang kita gunakan hanyalah kode CSS dan HTML, dengan cara sederhana ini kapasitasnya akan lebih kecil dan pengaksesannya lebih cepat dibanding menggunakan javascript.

Berikut kode untuk membuat menu Dropdown dengan kode CSS sederhana;

ul#menu, ul#menu ul.sub-menu {
 padding:0;
 margin:0;
 text-align:center;
 opacity:.9;
}

ul#menu li, ul#menu ul.sub-menu li {
 list-style-type:none;
 display:inline-block;
 width:120px;
}

ul#menu li a, ul#menu li ul.sub-menu li a {
 text-decoration:none;
 color:#252585;
 background:#CCCCFF;
 padding:5px;
 display:block;
}

ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
 background:#A4A4FC;
}

ul#menu li {
 position:relative;
}

ul#menu li ul.sub-menu {
 position: absolute;
 top:30px;
 display:none;
}

ul#menu li:hover ul.sub-menu {
 display:block;
}

Jika kita ingin menambahkan kode css di atas pada blogger copy dan pastekan di atas kode ]]></b:skin>

Berikut ini adalah untuk link navigasinya, kodenya seperti dibawah ini;

<ul id="menu">
 <li><a href="#">Menu 1</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 2</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 3</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 4</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
   <li><a href="#">Sub Menu 4</a></li>
  </ul>
 </li>
</ul>

Ganti karakter '#' dengan alamat url yang kita kehendaki, dan untuk mengaplikasikan pada blogger, pilih menu Tata Letak > Tambahkan Gadget > pilih HTML/JavaScript;

Pilih gadget HTML/JavaScript;

Masukkan kode diatas dan klik tombol simpan, kemudian lihat blog, maka hasilnya akan seperti dibawah ini,

Demo :

• Menu 1
  
  • Sub Menu 1
• Menu 2
  
  • Sub Menu 1
  • Sub Menu 2
• Menu 3
  
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
• Menu 4
  
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
  • Sub Menu 4

Monggo silakan dicoba di blog masing-masing, apabila sampeyan tertarik

Menu Navigasi Horizontal dengan Image Rollover CSS

Menanggapi pertanyaan dari saudara Mufid Faisal di Komunitas Pengguna CorelDRAW Indonesia:

Beberapa tahun yang lalu sudah aku bahas tentang menggunakan menu rollover dengan CorelDRAW, pada tutorial kali ini kita menggunakan image rollover CSS sederhana, tentu saja image kita buat dengan CorelDRAW.  Konsep image rollover CSS ini memakai 3 gambar yang berbeda dalam satu file, gambar 1  dibuat untuk default image, gambar 2 aktif jika mouse diarahkan ke object link dan gambar 3 aktif jika mouse di klik ke object link, karena gambar yang dipakai hanya satu (normal, hover, klik) sehingga browser cukup satu kali meload gambar, tinggal menentukan area lokasi untuk tiap-tiap efek rollover yang sampeyan inginkan.

Contoh jika ingin membuat image rollover navigasi menu dengan asumsi link yang dipakai; "Home, Contact, About, Support". Pertama yang harus dilakukan adalah buat dahulu tombol background gambar menggunakan software pengolah gambar dalam hal ini kita memakai CorelDRAW. Contoh lihat gambar di bawah (lebar 75px, tinggi 75px).

Adapun langkah-langkah yang harus diperhatikan dalam membuat image/gambar sebagai berikut;

1. Klik tombol New pada Standard Bar

2. Pada kotak Create a New Document yang perlu di perhatikan adalah kita harus menggunakan ukuran pixels, dan pada Rendering resolution isi dengan 72, apa sebab?.. karena standar image web adalah resolusi 72 dpi, selanjutnya klik OK;

3. Selanjutnya langkah membuat image tombol (button), buat kotak ukuran lebar75px tinggi 25px;

4. Kita desain button sesuai dengan yang dikehendaki, terserah bisa mas bro kreasikan sendiri;

5. Gandakan kebawah 2 kali dan rubah pada warna image, sehingga total ukuran keseluruhan adalah lebar 75px tinggi 75px;

6. Export dengan format PNG, misal kita beri nama file image_navigasi dan jangan lupa atur dengan resolusi 72 dpi;

Selanjutnya upload pada file hosting, atau bisa langsung di Blogger dengan alamat image seperti dibawah ini;

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4q2NAa5wTQ_w3ra33el_DNqHx5LoChlVXYeS3sdpq74HeGNFo-DnoG3_gntxAvUYEQ1gZyR4Qxd8A3KvNHyg3-yfsBjBb1gnp92c8yJoThFKvXcs6QLvLoucc6hGMu8CSCzW2Fmp_Sho/s1600/image_navigasi.png

Selanjutnya kita buat properties css untuk menu navigasi horizontal, dengan ketentuan ukurun gambar 75px lebar, 75px tinggi yang dibagi menjadi tiga segmen masing-masing 25px seperti contoh gambar di atas;

.navigasimbah {
margin: 0px;
padding: 0px;
}

.navigasimbah ul {
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}

.navigasimbah li {
float: left;
}

.navigasimbah a {
display: block;
width: 75px;
height: 22px;
padding-left: 10px;
padding-top: 3px;
font: 13px Arial;
color: #000;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4q2NAa5wTQ_w3ra33el_DNqHx5LoChlVXYeS3sdpq74HeGNFo-DnoG3_gntxAvUYEQ1gZyR4Qxd8A3KvNHyg3-yfsBjBb1gnp92c8yJoThFKvXcs6QLvLoucc6hGMu8CSCzW2Fmp_Sho/s1600/image_navigasi.png") left top no-repeat;
text-decoration: none;
}

.navigasimbah a:hover {
background-position: 0 -25px;
color: #FFF;
}

.navigasimbah a:active {
background-position: left bottom;
color: #333;
}

Jika kita ingin menambahkan kode css di atas pada blogger copy dan pastekan di atas kode ]]></b:skin>

Sekarang tinggal buat link navigasinya, kodenya seperti dibawah ini;

<div class="navigasimbah">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>

Ganti karakter '#' dengan alamat url yang kita kehendaki, dan untuk mengaplikasikan pada blogger, pilih menu Tata Letak > Tambahkan Gadget > pilih HTML/JavaScript;

Pilih gadget HTML/JavaScript;

Masukkan kode diatas dan klik tombol simpan, kemudian lihat blog, maka hasilnya akan seperti dibawah ini, coba sampeyan pencet tombolnya untuk mengetahui menu navigasi horizontal keren pada blog ini...!!! yang warna ijo itu lo... ?!;

Demo :

• Home
• Contact
• About
• Support

CSS menu navigasi diatas yang aku pake pada blog Belajar CorelDRAW ini, Ok. aku harapkan bisa difahami dengan mudah.. semoga berhasil...

Kiat Membuat Blog Jadi Makin Terkenal

Punya blog? Dan ingin blognya terkenal? Pastilah kita semua akan menganggukkan kepala tanda setuju dan menjawab,” Ya!!!” Nah, kemudian pasti pertanyaan yang diajukan berikutnya bagaimana melakukannya?

Kalau benar seperti itu yang ditanyakan, silakan lanjutkan membaca.

Seperti yang aku katakan tadi, aku akan beritahu cara membuat blog cepat terkenal dan meraup sukses besar.  Ini dia kiat-kiatnya…

1. Buat link di blog lainnya pada kolom komentar. Terutama di blog yang trafficnya tinggi dan topiknya sama dengan blog kita, gunakan akun "Name/URL" jika ingin menanam link.
2. Berlombalah jadi yang pertama berkomentar. Karena komentar kita kemungkinan besar pasti akan terbaca oleh pengunjung lainnya.
3. Pancing mereka untuk berkomentar.
4. Berkomentar untuk menjalin hubungan. Jangan selalu berkomentar hanya demi kepentingan bisnis saja. Tapi bicaralah seperti layaknya obrolan antar-manusia.
5. Ijinkan trackback dan link pada tempat berkomentar. Salah satu alasan blogger dalam berkomentar adalah agar bisa membangun jejaring link-nya.
6. Buat review tentang blog lain. Blog yang telah kita buat review-nya minimal pasti akan mengunjungi blog kita.
7. Jawablah komentar yang ditujukan pada blog kita. Punya blog berarti kita harus mau berinteraksi dengan blog lain.
8. Buatlah artikel yang tak lekang dimakan waktu. Maksudnya, yang tidak mudah basi dan dilupakan orang. Tapi yang selalu dibutuhkan orang sampai kapanpun.
9. Pelihara hubungan baik dengan blog lain. Khususnya dengan blog yang ikut menyumbang aliran traffic ke blog kita karena dari sana salah satu sumber datangnya pengunjung ke blog kita.
10. Masukkan posting mereka ke social media. Ini cara lain yang bisa kita perbuat untuk memperkuat hubungan. Mereka pasti senang kalau tahu kita membantu menyebarluaskan posting blog mereka ke social media.

Bagaimana komentar masbro sekalian? Atau sampeyan mau menambahkan kiat-kiat lainnya?

10 Penyebab Blog di Blogspot Dibanned

Bagi yang belum maupun yang sudah merasakan blognya di-delete oleh team blogger tanpa peringatan dan pemberitahuan, berikut aku sampaikan penyebab-penyebabnya.

Penyebab blog di blogspot dibanned kemungkinan besar karena melanggar peraturan konten blogger.com.

Aturan Blogger.com melarang…

1. Perkataan yang Mendorong Kebencian; Kami ingin agar Anda menggunakan Blogger untuk mengungkapkan pendapat, bahkan yang sangat kontroversial sekali pun. Namun, jangan melampaui batas dengan memublikasikan perkataan yang mendorong kebencian. Maksudnya adalah, konten yang mempromosikan kebencian atau kekerasan terhadap kelompok karena ras, etnik, agama, kecacatan, jenis kelamin, umur, status veteran, atau orientasi seksual/identitas gender. Misalnya, jangan menulis blog yang mengatakan bahwa anggota Ras X adalah kriminal atau menganjurkan kekerasan melawan pengikut Agama Y.
2. Konten Kasar; Jangan mengeposkan konten yang bertujuan untuk menimbulkan kehebohan atau kengerian. Misalnya, kumpulan gambar luka tembak atau adegan kecelakaan yang diambil dari jarak dekat tanpa disertai konteks atau penjelasan tambahan akan melanggar kebijakan ini.
3. Kekerasan: Jangan mengancam orang lain di blog. Misalnya, jangan mengeposkan ancaman kematian atau konten yang dapat mendorong pembaca untuk melakukan tindak kekerasan terhadap orang lain atau kelompok tertentu.
4. Pelecehan; Jangan melecehkan atau menindas orang lain. Setiap orang yang menggunakan Blogger untuk melecehkan atau menindas dapat dijatuhi sanksi penghapusan konten yang melanggar atau dicekal secara permanen dari situs. Di mana-mana, pelecehan online juga dapat dianggap sebagai tindak melanggar hukum dan dapat memiliki konsekuensi offline yang serius.
5. Hak cipta; Sudah menjadi kebijakan kami untuk menanggapi pemberitahuan mengenai dugaan pelanggaran hak cipta, *seperti mengkopi paste (copas) konten bisa membuat blog di blogspot dihapus*. Selain itu, harap jangan berikan tautan ke situs yang memungkinkan pembaca untuk memperoleh unduhan tanpa izin dari konten milik orang lain.
6. Informasi pribadi dan rahasia; Tidak sepantasnya memublikasikan informasi pribadi dan rahasia milik orang lain. Misalnya, jangan poskan nomor kartu kredit, nomor Jaminan Sosial, nomor telepon yang tidak terdaftar, dan nomor surat izin mengemudi orang lain. Selain itu, harap diperhatikan bahwa dalam banyak kasus, apabila ada informasi yang tersedia di Internet atau dapat diakses oleh publik, maka menurut kebijakan kami informasi tersebut tidak lagi dianggap bersifat pribadi atau rahasia.
7. Meniru identitas orang lain; Harap jangan menyesatkan atau membingungkan pembaca dengan berpura-pura menjadi orang lain atau berpura-pura mewakili sebuah organisasi bila sebenarnya tidak demikian. Bukannya kami tidak memperbolehkan Anda untuk memublikasikan parodi atau sindiran, namun hindarilah konten yang mungkin dapat menyesatkan pembaca terkait identitas Anda yang sebenarnya.
8. Kegiatan ilegal; Jangan gunakan Blogger untuk terlibat dalam kegiatan ilegal atau mempromosikan kegiatan berbahaya dan ilegal. Misalnya, jangan menulis blog yang menganjurkan pembaca untuk minum minuman keras dan kemudian berkendara. Jangan gunakan Blogger untuk menjual atau mempromosikan obat-obatan baik yang sudah diregulasi maupun yang sifatnya ilegal - misalnya narkoba. Jika melanggar, kami dapat menghapus konten Anda. Selain itu, dalam kasus berat seperti yang melibatkan tindak pelecehan anak, kami dapat melaporkan Anda ke pihak yang berwajib.
9. Spam; Spam memiliki bermacam bentuk di Blogger. Segala bentuk spam dapat mengakibatkan akun atau blog Anda dihapus. Contohnya mencakup pembuatan blog yang dirancang untuk mengarahkan lalu lintas pengunjung ke situs Anda atau menaikkan situs ke deretan atas daftar penelusuran, mengeposkan komentar di blog orang lain hanya untuk mempromosikan situs atau produk Anda, dan menyalin konten yang ada dari sumber lain dengan tujuan utama untuk memperoleh pendapatan atau keuntungan pribadi lainnya.
10. Perangkat lunak perusak dan virus; Jangan buat blog yang mengirimkan virus, menyebabkan munculan, berupaya memasang perangkat lunak tanpa persetujuan pembaca, atau menimbulkan dampak lainnya terhadap pembaca dengan kode berbahaya. Hal ini sangat dilarang di Blogger.

Jauhkan blog blogspot dari 10 hal terlarang di atas. semoga setelah ini panjenengan bisa lebih berhati-hati dengan tidak melakukan pelanggaran-pelanggaran seperti di atas.

Atau kalau sudah telanjur, segera hapus konten tersebut! Daripada blog berharga kita kemudian terhapus berbuah sesal kemudian yang tak ada guna.

Lakukan blogging yang positif, sebar kebaikan dan manfaat buat semua.

Membuat Beberapa Link Dalam Satu Gambar

Script ini aku ambil dari  http://www.w3schools.com yang katanya kang nDop itu adalah web belajarnya sejuta umat... hehehe ada-ada saja kang nDop ini, memang aslinya posting ini bersumber pada blognya kang nDop, nah script ini kalau tidak aku posting di blog ini eman tak rasa, pertama berguna bagiku dan mungkin juga bagi masbro sekalian, fungsinya untuk membuat beberapa link pada satu gambar atau yang umum untuk membuat link pada area gambar yang ditentukan saja, sebagai contoh coba sampeyan sorot mouse pada link gambar indoCCom disamping, disitu area klik hanya pada seputar tulisan "DISINI"

scripnya yang aku comot dari webnya seperti ini

<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

keterangan :

• area shape="rect" = maksudnya area pengeklikan berbentuk kotak
• coords="0,0,82,126" = maksudnya lebar 0 px, tinggi 0 px, (dihitung dari pinggir kiri objek gambar) lebar 82 px, tinggi 126 px (area pengeklikan)
• area shape="circle" = maksudnya area pengeklikan berbentuk bundar
• coords="124,58,8" = maksudnya lebar 124px, tinggi 58 px, (dihitung dari pinggir kiri objek gambar) 8 px adalah jari-jari lingkaran

Udah itu saja yang lainnya sampeyan pasti sudah pada tau;

Gambarnya aku sekrisyut seperti dibawah ini, kalo sampeyan kepingin lihat demo aslinya intip disini!!

Mari kita jlentrehkan bersama penggunaan script ini, misal kita mengetrapkan gambar dibawah ini sebagai gambar yang diberi beberapa link, sekarang coba sorot dengan mouse pada bulatan merah pada ujung tiap-tiap objek yang ada digambar, sampeyan bisa lihat title dari tiga link halaman yang dituju, dengan kata lain satu gambar tersebut ngelink pada tiga sumber gambar yang terpisah;



Nah... setelah dimodifikasi untuk keperluan kita sendiri dan sudah diberi link maka sekripnya menjadi seperti ini;

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDBennmS56HKJVvQPJekmPb0__Cm-Uzag9ZYqV6E_5g3ipJxqR1Q5E-kZElQ_Z8XaXr-3bUCdEj2dJXfjZ7f-GuFDMVawDQMoVd8X7ayM5C5HF8Uf-Ebd1T_31phf74xRp1R36TLKSUtg/s1600/test.png" alt="pentol"
usemap="#pentol">

<map name="pentol">
<area shape="circle" coords="65,20,15" href="http://linksatugambar.blogspot.com/2013/08/tegak.html" target="_blank"alt="tegak" title="tegak">
<area shape="circle" coords="154,83,15" href="http://linksatugambar.blogspot.com/2013/08/nglembreh.html" target="_blank"alt="nglembreh"title="nglembreh">
<area shape="circle" coords="219,273,15" href="http://linksatugambar.blogspot.com/2013/08/loyo.html" target="_blank" alt="loyo" title="loyo">
</map> 

Jlentrehan gamblangnya seperti ini;
Cara mendapatkan angka "65,20,15" Caranya guwampang! *jare kang nDop* Ya tinggal crop aja gambarnya dari pojok kanan atas sampe tepat di pusat lingkaran tulisan GO.! .......upssss... tidak demikian caranya kalau di CorelDRAW, kita hanya tinggal membuat objek kotak dan lingkaran saja sebagai panduan untuk mengetahuinya, gambar aslinya jangan di utek-utek;

penjlentrehan dalam gambar seperti ini;
coords="65,20,15" artinya  lebar=65px, tinggi=20px, (ditarik dari sisi kiri atas)
caranya sebelum memulai membuat desain disaat buka halaman baru, pada kotak dialog rubah jenis ukuran satuan menjadi  Pixels, pada Rendering Resulution isi 72 dpi, seperti terlihat dibawah ini;

Coba sampeyan perhatikan angka di Property Bar menunjukkan "65,20,15"

jari-jari=15px, lo kenapa kok tulisnya 30 px  pada Property Bar?...
rumus jari-jari kan;
r = ½ . d    (r : jari-jari, d : diameter)

jadi jari-jari area pengeklikan adalah

r =  ½ . 30

  =  15

selanjutnya untuk yang ini "154,83,15"

dan yang ini "219,273,15"

Untuk yang area shape="rect" tinggal mengganti dengan kotak dan sesuaikan panjang lebarnya...
Selesai, demikian selanjutnya kreasikan sendiri sesuai dengan kebutuhan pada website sampeyan....

Memasang Kolom Komentar Google Plus di Blogger

Saat ini Google sudah meluncurkan fasilitas komentar Google Plus di Blogger, artinya komentar blog akan terhubung ke Google Plus. Kekurangan komentar G+ hanya terletak pada Profile komentar yang terbatas.

Berbeda dengan komentar blogspot yang menyediakan banyak fitur seperti open ID, Life Journal dan Wordpres.

Contoh komentar Google Plus di blogger;

Cara Mengaktifkan Komentar Google Plus di Blogger;

1. Login ke blogger, pastikan akun blogger anda sudah terhubung ke Google+
2. pada Tab menu di dasboard, pilih Google+
3. Centang " Gunakan Google+ untuk komentar blog ini "
4. Secara otomatis komentar di blog anda akan berubah menjadi komentar Google+

Keterangan;

Jika masbro ingin mengubah kembali ke komentar blogspot, sampeyan tinggal hilangkan centang  pada "Gunakan Google+ untuk komentar blog ini"

Mudah bukan?. sudah banyak blogger yang mulai menggunakan fasilitas ini karena simple dan blog akan terlihat lebih modern. Semoga Bermanfaat.....

Modif Widget Popular Post di Blogger

Sudah lama tidak posting tentang otak-atik template blogger, karena ada sahabat yang tertarik dengan Widget Popular Post di blog ini, maka aku  sempatkan posting tentang Widget Popular Post.

Widget ini berfungsi untuk menampilkan postingan atau artikel yang ada di blog sampeyan yang paling banyak diminati para pengunjung.

Secara default widget Popular Post ini sudah menarik karena sudah ada fitur thumbnail dan summary. Posting kali ini tentang memodifikasi Widget Popular Post, agar tampilannya sedikit beda, kalau disorot pada gambar akan berputar.

Seperti dibawah ini tampilannya;

Masbro tertarik?... simak caranya dibawah ini, aku anggap sampeyan sudah punya widget Popular Post;

• Login ke Blogger dengan akun Blogger sampeyan
• Setelah itu masuk ke template > klik Edit HTML
• Lalu klik panah di depan kode <b:skin>...</b:skin>

• Cari kode yang seperti ini;

• Ganti dengan kode dibawah ini;

.widget .popular-posts ul {
  list-style: none; text-align: right; font-size: 80%; color: #999999; background: #ffff; border: 1px solid #DEDEDE; margin:0 0 0px; padding-right:10px; padding-left:10px; padding-top: 5px; padding-bottom: 5px;
}

.popular-posts  img {
  width:57px;height:60px; padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 1px solid #e6e6e6;
} 

.popular-posts  img:hover {
  border:1px solid #e6e6e6;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);
}

Selesai, Selamat mencoba

Redirect Halaman Blogger dengan Custom Redirect

Blogger Custom Redirect berfungsi untuk mengalihkan (redirect) halaman yang sudah dihapus, tidak ada atau sudah tidak perlu di akses lagi oleh pengunjung blog. Jadi, pengunjung yang berkunjung ke blog sobat tidak kecewa karena link yang diakses telah rusak atau telah di hapus. Kadang kita melihat adanya link rusak (broken link) yang bila dituju akan diarahkan ke halaman error 404. Penyebab utamanya yaitu, link tersebut merupakan suatu halaman yang tidak ada atau tidak ditemukan

Dan pastinya, hal itu berefek buruk bagi Search Engine Optimization (SEO). Link Rusak atau lebih dikenal dengan broken link disebabkan oleh telah terhapusnya suatu halaman atau bisa jadi merupakan kesalahan kita dalam penulisan link di suatu web/blog orang lain (backlink) lalu terdeteksi oleh google, dan tentunya url tersebut otomatis akan di alihkan ke halaman 404 karena google tidak menemukan halaman yang dirujuk. Dalam hal ini kita bisa menggunakan fitur ini untuk mengalihkan halaman yang telah dihapus (atau yang tidak relevan) menuju ke halaman yang sudah diupdate atau lebih baru lagi. Nah, redirect suatu halaman blogger dengan custom redirect sangatlah mudah.

Caranya bisa kita lihat di bawah ini;

• Masuk ke halaman Setelan
• Kemudian, klik pada tab Preferensi penelusuran
• Di bagian kesalahan dan pengalihan, klik Edit pada kolom Pengalihan Khusus

• Maka kita akan diperlihatkan oleh 2 kolom. Yaitu kolom pertama adalah link lama yang akan di redirect (dialihkan), dan yang kedua adalah kolom link baru (yang terupdate), 
• penulisan link alamat halaman dimulai dari ./    Contoh misal http://belajar-coreldraw.blogspot.com/2012/11/menyimpan-shortcut-yang-sudah-kita-buat.html  yang ditulis cukup /2012/11/menyimpan-shortcut-yang-sudah-kita-buat.html

• Periksa kedua kolom, apakah link sudah tertulis dengan benar. Centang kotak permanen apabila kita ingin mensetting redirect untuk selamanya. Jika ingin redirect untuk sementara, jangan centang kotak permanen. Jika sudah, klik Simpan > Simpan perubahan pada kolom tersebut
• Apabila kita ingin menambah redirect lain, kita tinggal tekan Pengalihan Baru. Jika tidak, langsung saja klik Simpan Perubahan
• Tes link tersebut, dengan memasukkan link lama ke kolom address bar browser kita. Apabila halaman lama diarahkan ke halaman baru. Custom redirect pun berhasil

Demikian, semoga bermanfaat.

Cara Menambahkan Meta Deskripsi pada Blogger (Baru)

Meta description merupakan bagian vital blog yang berisi informasi tentang blog dan artikel-artikel yang ditulis. Tanpa meta description maka blog akan sangat sulit dirayapi oleh laba-laba mesin pencari dari mbah google. Jadi, beruntung kita-kita yang telah menggunakan platform blogger telah di beri kemudahan pada pemasangan meta deskripsi nya,

Ada dua macam meta tag deskripsi pada blogger yang pertama adalah menambahkan meta deskripsi blog / homepage dan yang kedua menambahkan meta deskripsi tiap halaman posting.

Menambahkan Meta Deskripsi Blog.

• Masuk ke akun blogger Dasbor > Klik Setelan/Setting > Preferensi Penelusuran > Tag Meta

• Klik "Edit" pilih "Ya" pada "Aktifkan deskripsi penelusuran?"

• Isi meta description dengan karakter maksimum 150 karakter. Setelah di isi klik tombol "Simpan perubahan"

Keterangan

Meta description ini akan digunakan hanya pada halaman utama (halaman index atau halaman beranda) sedangkan untuk masing-masing artikel, kita harus menuliskannya lagi.

Menambahkan Meta Deskripsi Tiap Halaman Postingan Blog

• Masuk ke menu Post > pilih postingan blog yang akan di edit.
• Perhatikan pada sidebar editor, harus sudah bertambah satu widget "Deskripsi Penelusuran"

• Klik "Deskripsi Penelusuran" dan masukan deskripsi artikel pada kotak dibawahnya, setelah itu klik tombol "Selesai"

Keterangan:

Deskripsi Penelusuran ini akan menggantikan deskripsi global dan deskripsi ini akan digunakan mesin pencari untuk mengurai isi artikel kita. Meta Description ibarat ringkasan dari artikel yang kita tulis, oleh karena itu, kita buat deskripsi yang menarik. Deskripsi artikel tidak akan ditampilkan pada browser namun akan diambil oleh mesin pencari (machine-readable metadata) dan situs lain (misal Facebook dan Google Plus).

Yang terakhir kita harus sedikit edit template blogger untuk penyesuian. Langkahnya sebagai berikut

• Masuk ke "Template - Edit HTML - Lanjutkan"
• Scroll hingga di temukan kode dibawah ini:

<meta expr:content='data:blog.metaDescription' name='description'/>

• Jika tidak ditemukan berarti blog belum menggunakan meta description walau sudah diaktifkan, ikuti langkah penyisipan kode berikutnya.
• Jika template belum menerapkan meta description, cari kode dibawah ini:

<b:include data='blog' name='all-head-content'/>

• Masukan (copy paste) kode dibawah ini tepat di bawahnya

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

• Simpan template..

Setelah meta description diaktifkan, dan artikel yang disertai meta descriptioan diterbitkan maka kita lakukan pengecekan untuk memastikan bahwa meta description sudah aktif pada blog kita.
Langkah pengecekan sebagai berikut:

• Kita lihatt artikel yang sudah disertai meta description
• Kita gunakan kombinasi tombol keyboard CTRL + U (pengguna Firefox dan Chrome) atau klik kanan pada area artikel dan pilih "View source" (pengguna Safari) untuk melihat source code blog kita, dan perhatikan meta deskripsi yang baru saja kita buat. Atau kita gunakan kata kunci "name='description'" menggunakan pencarian browser. Jika sudah tampil seperti apa yang kita tuliskan pada artikel berarti meta description pada blog kita sudah aktif, kita tes share pada Facebook atau Google Plus, maka yang akan ditampilkan adalah meta description, bukan penggalan artikel lagi.

Demikian Cara Menambahkan Meta Deskripsi pada Blogger Versi Terbaru, tinggal di praktekkan saja.

Semoga Bermanfaat...