Diberdayakan oleh Blogger.

► membuat blog bagi pemula

Blog itu sendiri bisa digunakan sebagai media penghubung, menjembatani antara si penulis dan pembaca, jadi si pembaca blog paham dan mengerti dengan maksud dan tujuan yang ditulis oleh penulis itu sendiri. bisa juga menjadi penghubung antara si penjual dan pembeli (dalam hal ini blog yang digunakan sebagai sebuah ladang usaha menjual produk. sebutan populernya Toko Online).
Membuat blog itu sebenarnya tidak terlalu susah, yang terpenting sobat cermat dalam langkah-langkah awalnya. dan mengenai cara membuat blog gratisan ada banyak layanan yang menyediakan blog gratis, beberapa diantaranya yang paling sering dipakai adalah:
- Blogger.com
- WordPress.com
- Blogdetik.com
- Blog-roll.info
- Wordblog.pl
- dan masih banyak lagi.

Namun kali ini saya akan menerangkan bagaimana Cara membuat blog gratis secara cepat dan mudah. yaitu kita memakai layanan Blogspot di blogger.com.

Langkah awal untuk membuat sebuah blog gratis adalah :

1. Sobat diwajibkan memiliki sebuah alamat email, saran saya pakailah layanan gmail dari google. untuk membuat email dari layanan google tersebut anda bisa langsung menuju ke Gmail, untuk lebih jelasnya perhatikan gambar dibawah ini, (Baca juga artikel mengenai Cara Membuat Email Yahoo)
Klik gambar untuk memperbesar


2. Langkah selanjutnya isi data data diform yang disediakan, jangan lupa paling bawah klik Saya menyetujui persyaratan layanan dan kebijakan privacy google, setelah itu klik Langkah berikutnya lihat gambar dibawah.
Klik gambar untuk memperbesar


3. Selanjutnya, klik kirim kode Verifikasi. lihat lagi gambar dibawah ya :)
Klik gambar untuk memperbesar


4. sekarang cek ponsel anda, jika belum ada kode verifikasi dari google bisa dicoba lagi beberapa menit kemudian, gambar dibawah menggunakan modem, jadi kode verifikasinya langsung bisa di lihat dilayar laptop saya.
Klik gambar untuk memperbesar


5. Masukin deh kode verifikasinya seperti dibawah ini
Klik gambar untuk memperbesar


6. Selamat datang di akun Gmail anda, lalu klik Lanjutkan ke Gmail ya….
Klik gambar untuk memperbesar
Klik gambar untuk memperbesar


7. Sampai disini proses pembuatan akun Gmail sudah berhasil, sekarang ketahap selanjutnya ya…proses pembuatan blog. yaudah tanpa basa basi langsung buka tab baru di browser sobat ya, atau bisa langsung menekan (ctrl + T) buka blogger.com ya…. tinggal isi email dan sandi yang sama seperti di akun Gmail tadi. lalu klik Masuk
Klik gambar untuk memperbesar


8. selanjutnya pilih Opsi profil blogger sobat, jika hanya membuat blogger sebaiknya klik yg sebelah kanan. lalu klik lanjutkan ke blogger.
Klik gambar untuk memperbesar
Klik gambar untuk memperbesar


9. Sampai tahap ini sobat sudah sukses membuat akun blog, tahap selanjutnya silahkan lihat gambar dibawah ini untuk jelasnya. perhatikan baik baik tahap 1, 2, dan 3. sebelum ada tulisan This blog address is available berarti nama blog yang ingin sobat buat sudah ada yang memiliki, silahkan ganti dengan nama lain, atau untuk mudahnya bisa tambahkan angka dibelakang alamat blognya, lihat contoh yang saya lingkari pada nomer 2 dibawah. setelah itu klik create blog.
Klik gambar untuk memperbesar


10. Nah sekarang blog sobat sudah jadi, lihat keterangan dibawah ini, angka 1 adalah Judul blog yang sobat ciptakan pada tahap sebelumnya, lalu angka 2 adalah start posting. alias untuk memulai membuat artikel.
Klik gambar untuk memperbesar


11. Setelah sobat klik start posting, sekarang saatnya sobat membuat sebuah artikel… perhatikan baik baik langkah langkahnya dalam membuat sebuah artikel. tentunya dimulai dari angka 1 ya…hehehe… untuk jelasnya lihat gambar dibawah ini.

Langkah-langkah cara membuat artikel di blog :

Angka 1 : merupakan judul artikel yang nanti akan diterbitkan, boleh apa saja. silahkan berekspresi melalui artikel sobat, narsis juga ga ada yang larang koq :)

Angka 2 : merupakan isi dari artikel, silahkan mengarang bebas, mau curhat, kasih tips, trik, info, atau apa saja yang sobat ketahui, klo artikelnya bermanfaat pasti banyak yang suka dengan blog sobat deh.

Angka 3 : merupakan Label, silahkan isi apa saja. contohnya seperti ini, misalnya judul artikel yang sobat buat adalah Tips melangsingkan tubuh, nah label tersebut bisa di isi dengan Tips sehat, atau yang lainnya. kan ga nyambung seandainya label tsb di isi dengan Ilmu komputer. :p

Angka 4 : Nah tahap ini adalah melihat dulu artikel sebelum diterbitkan, jika ada yang salah bisa dibenarkan dulu sebelum artikel diterbitkan.

Angka 5 : Jika pada tahap 4 sobat sudah yakin, sekarang tinggal klik Publish (Terbitkan)
Klik gambar untuk memperbesar


12. Gambar dibawah ini merupakan contoh artikel yang sudah berhasil diterbitkan. dan untuk melihat artikelnya silahkan klik tombol view. selesai…. nah mudah bukan ?
Klik gambar untuk memperbesar
Klik gambar untuk memperbesar


13. Selamat Berkarya ya sob, oiya bagi sobat yang ingin tulisan hasil karyanya di publikasi di blog ini silahkan kirimkan artikel sobat ke email (condol_kdw@yahoo.co.id) jangan lupa link facebook kamu ya.  dengan catatan artikel merupakan hasil karya sendiri dan bukan hasil copy paste dari blog lain.

► TUTORIAL BIKIN BLOG 1


    

►Memperbaiki Missing Required hCard "Author"

Sama halnya dengan Missing Required Field "Updated", peringatan yang satu ini juga sering di alami para blogger. Missing required hCard "author", Intinya ada kode yang kurang pada blog Sobat yaitu kode author yang tidak ada atau tidak tepat.
Untuk mengatasi Warning yang satu ini Sobat dapat mencoba langkah berikut :
  • Login ke akun blogger anda
  • Klik pada Template. (jangan lupa backup dulu template anda, untuk menghindari sesuatu yang tidak diinginkan).
  • Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
  • Beri tanda centang pada Expand Template Widget.
  • Cari kode <b:if cond='data:post.hasJumpLink'>, dan letakkan kode berikut di atasnya.
    <div class='vcard' id='hcard-Madie Zha'>
    <span class='fn n'>
    <span class='given-name'><data:top.authorLabel/>
    <span class='fn'><data:post.author/></span></span>
    </span></div>
    Yang warna biru ganti dengan nama Sobat.
    *Sebenarnya sobat bisa meletakkan kode tersebut pada Post-header ataupun Post-footer, jadi tidak harus di atas <b:if cond='data:post.hasJumpLink'>.
  • Terakhir Simpan Template dan cek blog sobat di Rich Snippets Testing.
Jika terdapat 2 warning seperti Missing required field "updated" dan Warning: Missing required hCard "author". Sobat dapat menggunakan kode berikut :
<div style='background-color: #F6F6F6; color: auto; border: 0px solid #eee; width:100%; margin: 0px; padding: 0.1px; font-family: Arial,Verdana,Sans-serif; font-size: small; text-align: left;'>
<div class='vcard' id='hcard-NAMA'>
<span class='fn n'> <span class='given-name'><data:top.authorLabel/>
<span class='fn'><data:post.author/></span></span></span></div>
 <a class='updated' href='http://wadahtutorial.blogspot.com/' rel='bookmark'>Nama Blog</a> Updated at: <abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></div>
Letakkan di atas <b:if cond='data:post.hasJumpLink'>. Lalu Simpan Template Anda.

Semoga berhasil memperbaiki Missing required hCard "author".

►Mengatasi Missing Required Field "entry-title"

Warning: Missing required field "entry-title" adalah salah satu pemberitahuan dari Rich snippets testing tools tentang kode title blog Sobat yang kurang tepat. Untuk memperbaikinya ada beberapa cara, tergantung kode template yang sobat gunakan.
Untuk cara pertama, Sobat dapat melakukan langkah berikut :
  • Masuk ke akun blogger anda
  • Klik pada Template. (backup dulu template anda).
  • Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
  • Beri tanda centang pada Expand Template Widget.
  • Tekan Ctrl + F di keyboard lalu cari kode hentry, Sobat akan menemukan kode dibawah ini :
    <div class="post hentry">
    <div class="post hentry uncustomized-post-template">
  • Kalau sudah ketemu hapus kedua hentry pada kode di atas, jadi hasilnya seperti ini :
    <div class="post">
    <div class="post uncustomized-post-template">
  • Terakhir klik Simpan Template, dan cek di Rich snippet tools.
Jika cara diatas tidak berhasil, silakan coba cara kedua :
  • Masih di menu Edit HTML.
  • Tekan Ctrl + F di keyboard lalu cari kode
    <h3 class='post-title.........' ></h3>
    Tergantung pada template blog Anda, blog Anda mungkin menggunakan tag H1 / H2.
  • Ganti kode di atas dengan kode di bawah ini:
    <h3 class='post-title entry-title'>
  • Simpan Template, dan cek di Rich snippet tools.
Hanya itu tips dari saya tentang Mengatasi Missing required field "entry-title".

►Membuat Daftar Isi Label Tertentu

Pada kesempatan kali ini saya akan berbagi tentang tutorial membuat daftar isi berdasarkan salah satu label pada blog. Maksudnya gini, pada sebuah postingan biasanya kita tautkan pada sebuah Label, dan pada postingan yang lain kita menggunakan label yang lain, artinya terdapat beberapa label pada blog kita, dan kita ingin membuat daftar isi yang berisi hanya postingan dari salah satu label tersebut.
Untuk Membuat Daftar Isi Label Tertentu, Sobat dapat mengikuti tutorial berikut :

* Untuk Widget :
  • Login ke dashboard blogger.
  • Klik pada Tata Letak > Tambah Gadget.
  • Pilih HTML/Java Script
    membuat daftar isi
  • Lalu isikan kode berikut :
    <script src='http://html-scripts.googlecode.com/files/feedlabels.js'/></script>
    <script src="http://wadahtutorial.blogspot.com/feeds/posts/summary/-/Blogger Templates?max-results=10&alt=json-in-script&callback=recentpostslist"></script>
    Keterangan :
    wadahtutorial.blogspot.com ganti dengan alamat blog Sobat.
    Blogger Templates ganti dengan Label yang ingin ditampilkan.
    10 ganti dengan jumlah postingan yang ingin di tampilkan.
  • Klik Save dan periksa blog Sobat.
* Untuk Halaman :
  • Login ke blogger Anda, kemudian buat sebuah halaman dengan judul Daftar Isi.
  • Kemudian klik pada tab Edit HTML.
    membuat daftar isi
  • Lalu masukkan kode berikut :
    <div style="overflow:auto;height:450px;padding:10px;border:1px solid #eee">
    <script src='http://html-scripts.googlecode.com/files/feedlabels.js'/></script>
    <script src="http://wadahtutorial.blogspot.com/feeds/posts/summary/-/Blogger Templates?max-results=999&alt=json-in-script&callback=recentpostslist"></script>
    </div>
  • Klik tombol Preview / Pratinjau untuk melihat hasilnya, jika sudah benar klik Publish Page / Tayangkan Laman. Lalu buka Blog Sobat dan lihat hasilnya…
Demikian tutorial kali ini, selamat mencoba dan semoga berhasil Membuat Daftar Isi Label Tertentu.

► Elvetic Blogger Template

Template Features :
Platform TypeBlogger / Blogspot
Nama Template Elvetic Blogger Template
Template Authorhttp://wadahtutorial.blogspot.com/
Instructions URL DOWNLOAD DISINI

Blogger Template

► Cara Mengetahui Duplikat Konten

Duplikat Konten (Duplicate Content) dalam sebuah blog tentu sangat tidak bagus untuk SEO, karena duplikat konten dapat mengurangi kualitas hasil pencarian, akibatnya, kekuatan SERP suatu halaman blog di search engine menjadi lemah, karena itu kita perlu mengetahui apakah pada blog kita terdapat duplikat konten.
Perlu di perjelas bahwa duplikat konten yang saya maksud adalah konten yang ada pada blog kita, bukan duplikat konten dengan blog orang lain, maksudnya kesamaan konten antara postingan kita dengan postingan blog lain, biasanya ini terjadi karena kebiasaan copy paste. Jika ini terjadi tentu akibatnya akan lebih parah lagi, bisa-bisa blog kita di hapus oleh Google. jadi buat Copaser "berhati-hatilah dalam mengcopy artikel orang lain".

Untuk mengetahui duplikat konten yang ada di blog, kita dapat menggunakan Webmasters tools dari Google. Berikut caranya :
  • Login ke Blogger.
  • Masuk ke Webmasters tools
  • Pilih blog yang ingin Sobat periksa.
    mengetahui duplikat konten
  • Klik Pengoptimalan > Penyempurnaan HTML.
    disana akan di beritahu laman yang bermasalah dan jumlahnya, lihat gambar.
    mengetahui duplikat konten
Untuk mengoptimalkan SEO sebaiknya perbaiki kesalahan yang ada pada blog sobat, baik itu duplikat meta tag, duplikat meta deskripsi, ataupun masalah lainnya.

Sekian dulu artikel kali ini, untuk selanjutnya akan kita bahas Cara Mengatasi Duplikat Konten.

► Trik Mempercepat Loading Blog

Untuk Mempercepat Loading Blog ada banyak cara yang dapat dilakukan, antara lain dengan cara mengkompress kode CSS/HTML biar ukurannya jadi lebih kecil, meng-Edit Template Supaya Valid XHTML, mengkompress Image supaya lebih optimize, dan lain-lain.
Untuk kali ini saya share cara yang lain, yaitu dengan menggunakan kode script yang dicoding secara khusus untuk mempercepat loading blog. dengan menggunakan kode script ini maka browser tidak akan membaca image/gambar di blog, sehingga dapat meringankan beban server dan mempercepat loading.

Berikut tutorial penggunaan kode script untuk mempercepat loading blog :
  • Masuk ke akun blogger anda
  • Klik pada Template. (jangan lupa backup dulu template anda, untuk menghindari sesuatu yang tidak diinginkan).
  • Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
  • Beri tanda centang pada Expand Template Widget.
  • Cari kode </head> gunakan CTRL + F pada keyboard.
  • Lalu letakkan kode berikut di atas kode </head>.
    <script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
    <script src='http://wadah-tutorial.googlecode.com/files/superload.js' type='text/javascript'/>
    <script charset='utf-8' type='text/javascript'> $(function() { $(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgotd8gFCXeiFu94qiIUjEwjXz-W9AYlJB0n2_8uOzXJ5wT6qc1Ecw1WyOix03r7r9QMIFVHz2GSdi45cGv2X_iAEr7Ak1O8p1_zSlKQh6qzdogZbGaA84yCUjJdcRGrjtMnUdBdNLW8KE/&quot;,threshold : 200}); }); </script>
  • Terakhir klik Simpan Template.
Sekarang lihat blog Sobat dan rasakan bedanya, semoga bermanfaat...

► Membuat Daftar Isi Blogger

Sebenarnya untuk tutorial Membuat Daftar Isi Blogger sudah pernah saya bikin, cuma kali ini saya buat beberapa macam jadi tinggal sobat pilih mau menggunakan yang mana, Daftar Isi Berdasarkan Tanggal Postingan, berdasarkan artikel terbaru atau berdasarkan label.
Untuk tutorialnya saya bikin jadi dua biar lebih jelas, pertama untuk halaman / page dan kedua untuk widget / gadget.

Yang pertama kita membuat sebuah halaman yang berisi daftar isi, berikut tutorialnya :
  • Login ke blogger.
  • Klik Laman > Laman Baru > Laman Kosong.
  • Beri judul Daftar Isi atau Sitemap atau apalah terserah Anda.
  • Kemudian klik pada tab Edit HTML.
    membuat daftar isi blog
  • Lalu letakkan kode berikut pada area artikel.
    <div style="overflow:auto;width:480px;height:450px;padding:10px;border:1px solid #eee">
    <script src="https://html-scripts.googlecode.com/files/feeds.js"></script>
    <script src="http://wadahtutorial.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
    </script>
    </div>
    Keterangan :
    • Ganti Alamat wadahtutorial.blogspot.com dengan url / alamat blog Sobat.
    • width:480px : Lebar area, ganti dengan ukuran yang sobat inginkan.
    • height:450px : Tinggi area, ganti sesuai keinginan sobat.
    • Untuk tidak menggunakan text area atau scroll hapus tulisan yang saya beri latar kuning.
    • https://html-scripts.googlecode.com/files/feeds.js : ganti dengan alamat daftar isi yang anda inginkan. Berikut beberapa kodenya :
      1. Berdasarkan Label :
        https://html-scripts.googlecode.com/files/feeds-labels.js
      2. Berdasarkan Tanggal :
        https://html-scripts.googlecode.com/files/feed-dates.js
      3. Berdasarkan Artikel terbaru :
        https://html-scripts.googlecode.com/files/feeds.js
  • Klik tombol Preview / Pratinjau untuk melihat hasilnya, jika sudah benar klik Publish Page / Tayangkan Laman. Lalu buka Blog Sobat dan lihat hasilnya…
Yang kedua kita Membuat Widget Daftar Isi, berikut tutorialnya :
  • Pada dashboard blogger, klik Tata Letak.
  • Klik Tambah Gadget.
  • Pilih HTML/Javascript.
  • Silakan beri judul pada widget. Lalu letakkan kode berikut :
    <div style="overflow:auto;height:250px;padding:10px;border:1px solid #eee">
    <script src="https://html-scripts.googlecode.com/files/feeds.js"></script>
    <script src="http://wadahtutorial.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
    </script>
    </div>
    • Ganti Alamat wadahtutorial.blogspot.com dengan url / alamat blog Sobat.
    • Ganti https://html-scripts.googlecode.com/files/feeds.js dengan kode daftar isi dibawah ini :
      1. Berdasarkan Label :
        https://html-scripts.googlecode.com/files/feeds-labels.js
      2. Berdasarkan Tanggal :
        https://html-scripts.googlecode.com/files/feed-dates.js
      3. Berdasarkan Artikel terbaru :
        https://html-scripts.googlecode.com/files/feeds.js
  • Klik tombol SAVE. Lalu lihat hasilnya di Blog Sobat.
Jika sobat ingin menampilkan daftar isi berdasarkan salah satu label di blog sobat silakan baca postingan Membuat Daftar Isi Label Tertentu.

Selamat mencoba dan semoga berhasil

►Mengatasi Duplikasi Deskripsi Meta

Duplikasi deskripsi meta pernah di alami blog ini, hal ini terjadi karena Google menemui deskripsi yang sama pada setiap halaman yg di crawl oleh Google spider pada laman blog ini, contoh :

Duplikasi deskripsi meta

Pada gambar diatas terdapat deskripsi yang sama, baik itu pada Homepage, halaman, maupun postingan, hal ini tentu tidak baik buat SEO, karena deskripsi yg sama dapat merusak relevansi pencarian, dan Google menganggapnya sebagai duplikasi konten, oleh sebab itu hal tersebut perlu kita perbaiki. Jika sobat belum tahu cara mengetahui duplikat konten silakan baca Cara Mengetahui Duplikat Konten.

Untuk memperbaiki masalah tersebut, langkah yang saya lakukan adalah sebagai berikut :
  • Login ke akun blogger
  • Klik pada Template.
  • Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
  • Beri tanda centang pada Expand Template Widget.
  • Pada kode
    <meta content='Deskripsi'  name='description'/>
    <meta content='keyword1, keyword2, keyword3, ...' name='keywords'/>
    Sedikit saya tambah kode menjadi :
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta content='Deskripsi'  name='description'/>
    <meta content='keyword1, keyword2, keyword3, ...' name='keywords'/>
    </b:if>
    Dengan begini meta description & meta keywords di tampilkan hanya untuk halaman utama (homepage).
  • Terakhir klik Simpan Template.
Selain masalah diatas Duplikasi deskripsi meta juga bisa terjadi pada fungsi arsip, karna dalam sebuah arsip terdapat berbagai link dalam satu content , hal ini kadang juga di anggap sebagai duplikat konten oleh google.

Jika Sobat mengalami masalah ini Sobat cukup mematikan fungsi arsip, caranya dengan menambahkan kode berikut dibawah kode <head> :
<b:if cond='data:blog.pageType == &quot;archive&quot;'><meta content='noindex' name='robots'/></b:if>

Sekian dulu postingan kali ini, semoga bisa membantu Sobat yang ingin Mengatasi Duplikasi deskripsi meta.

►Memberi Efek Taburan Hati di Blog

Kali ini saya akan berbagi salah satu cara untuk mempercantik blog, yaitu dengan memberi efek taburan hati pada sebuah blog, sebelumnya saya juga sudah membahas mengenai cara Membuat Efek Daun Berjatuhan di Blog, Memberi Efek Hujan Salju di Blog, dll.
Untuk menerapkan efek ini pada blog ada dua cara, pertama lewat edit template, yang kedua lewat gadget, silakan anda pilih cara mana yang menurut anda lebih nyaman.

Cara yang pertama melalui edit template :
  • Pada dashboard blogger klik Template > Edit html
  • Beri centang pada Expand Template Widget
  • Cari kode </body> lalu letakkan script efek di atas kode </body>, berikut script-nya:
    <script src='http://wadah-tutorial.googlecode.com/files/hearts.js' type='text/javascript'/>
  • Terakhir klik Save Template.
Untuk cara kedua melalui Gadget :
  • Pada dashboard klik Tata Letak > Add a gadget > HTML/JavaScript.
  • Letakkan script dibawah ini pada gadget.
    <script src='http://wadah-tutorial.googlecode.com/files/hearts.js' type='text/javascript'/></script>
  •  Lalu klik Simpan / Save.
Selesai,,, silakan lihat hasilnya pada blog sobat.

►Membuat Link Membesar Saat disentuh Kursor

Tutorial kali ini tentang trik atau cara untuk membuat blog menjadi lebih menarik. "Membuat Link Membesar Saat disentuh Kursor". Maksudnya link yang pada saat dilintasi cursor mouse akan menjadi besar tulisannya, Selain cara ini Anda juga bisa Membuat Gambar Membesar Saat disentuh Cursor, Membuat Link Berkedip Saat Disentuh Cursor, Membuat Link Berwarna Warni, dan lain-lain.

Buat Sobat yang ingin memasang trik ini silakan ikuti tutorial dibawah ini.

Cara Membuat Link Membesar Saat disentuh Kursor :
  • Masuk ke akun blogger sobat.
  • Pilih Template > Edit HTML.
  • Ceklis / Centang Expand Widget Template.
  • Cari kode a:hover { 
  • Ganti kode font-size dengan ukuran yang lebih besar.
    Contoh :
    a:hover {
    color:#d2691e;
    font-size:10px;
    font-style:italic;
    cursor:wait;
    }
    ganti dengan
    a:hover {
    color:#d2691e;
    font-size:19px;
    font-style:italic;
    cursor:wait;
    }
  • Terakhir klik Simpan Template.
Selamat Mencoba dan Semoga Berhasil...

►Membuat Gambar Membesar Saat disentuh Cursor

Mungkin sebagian Blogger sering melihat gambar yang menjadi besar apabila tersentuh cursor. Dalam dunia blogging fitur seperti ini sering disebut dengan nama Image Zoom Effects atau Hover Zoom Smooth Effects. Fitur yang satu ini lumayan banyak di senangi para blogger walaupun sebenarnya dengan memasang Image Zoom Effects ini di blog dapat menggangu pengunjung yang sedang membaca postingan kita.
Postingan ini saya buat untuk melengkapi Tutorial di blog ini, buat sobat yang ingin memasangnya silakan Anda ikuti tutorial dibawah ini.

Cara Membuat Gambar Membesar Saat disentuh Cursor :
  • Masuk ke akun blogger sobat.
  • Pilih Template > Edit HTML.
  • Ceklis / Centang Expand Widget Template.
  • Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
  • Kalau sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>
    .post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
    .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
  • Terakhir klik Simpan Template. Sekarang lihat hasilnya di blog Sobat.
Semoga tutorial singkat ini bisa bermanfaat...

►Cara Menghapus Waktu Komentar

Beberapa hari yang lalu pada postingan Cara Menghapus Waktu Postingan, salah satu Sobat Blogger menanyakan tentang Cara Menghapus Waktu di komentar, mungkin menurutnya waktu atau jam tersebut mengganggu tampilan blognya makanya ingin dia hapus, karenanya pada kesempatan ini saya bikin postingan untuk menjawab pertanyaan tersebut.
Jika Sobat blogger yang lain juga ingin menghilangkan waktu komentar, caranya cukup mudah, anda tinggal hapus kode <data:comment.timestamp/>.

Berikut tutorial Menghapus Waktu Komentar :
  • Login ke akun Blogger Sobat.
  • Pilih Template > Edit HTML.
  • Cari kode
    <span class='comment-timestamp'>
    <a expr:href='data:comment.url' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span>
  • Jika sudah ketemu hapus semua kode tersebut.
  • Selanjutnya Simpan Template Sobat.
Simple kan ?!?, Selamat mencoba...

►Membuat Dua Kolom Widget di Blog

Kadang template yang kita gunakan tidak sesuai dengan keinginan kita, misalnya kolom widget yang disediakan hanya ada satu padahal kita membutuhkan yang dua kolom, Tutorial kali ini saya buat untuk para blogger yang ingin Membuat Dua Kolom Widget di Blognya.
Dua Kolom Widget / Gadget

Untuk mempercantik blog dengan susunan gadget yang sesuai dengan keinginan Sobat, dalam hal ini jumlah kolom widget, Sobat dapat membuatnya sendiri dan terserah mau meletakkannya dimana, bisa di bawah posting, di atas posting, di bawah header, di dalam sidebar, di bagian footer ataupun di lain tempat.

Berikut Cara Membuat dua Buah Elemen Gadget/Widget :
  • Login Blogger Sobat.
  • Pilih Template > Edit HTML.
  • Ceklis / Centang Expand Widget Template.
  • Cari kode ]]></b:skin> dengan menekan tombol CTRL+F pada keyboard.
  • Letakkan script berikut ini diatas ]]></b:skin> :
    #box-main-container {
    clear:both;
    }
    .box-column {
    padding:0px 10px 10px 10px;
    border:1px dotted $bordercolor;
    }
    *Anda dapat mengubah padding ( jarak posisi gadget ) 0px 10px 10px 10px maksudnya adalah Jarak ( Atas, Kanan, Bawah, Kiri ).
    *Anda juga dapat merubah border ( garis tepi widget ) dengan warna, caranya hapus $bordercolor dan ganti dengan kode warna yang Anda inginkan.
  • Kemudian cari kode
    •   <div id='main-wrapper'>
    •   <div id='content-wrapper'>
    •   <div id='header'> atau <div id='header-wrapper'>
    •   <div id='sidebar-wrapper'>
    •   <div id='bottom'>
    Keterangan :
    *<div id='main-wrapper'> adalah posisi halaman utama anda. Biasanya dipakai untuk penempatan menu horizontall atau daftar isi sebuah blog.
    *<div id='content-wrapper'> adalah posisi postingan.
    *<div id='header'> adalah posisi kepala. Biasanya ditempatkan judul blog dan deskripsi blog.
    *<div id='sidebar-wrapper'> adalah posisi sidebar blog.
    *<div id='bottom'> adalah posisi paling bawah. Atau Footer Blog Anda.
    Silakan pilih salah satu, mau menempatkannya dimana.
  • Jika sudah didapat atau hampir sama dengan kode diatas, letakkan kode HTML di bawah ini
    <div id="box-main-container"> <div id="box1" style="float: left; margin: 0; text-align: left; width: 50%;"> <b:section class="box-column" id="col1" preferred="yes" style="float: left;"> </b:section></div> <div id="box2" style="float: right; margin: 0; text-align: left; width: 50%;"> <b:section class="box-column" id="col2" preferred="yes" style="float: right;"> </b:section></div>
    <div style="clear: both;"> </div></div>
    Silakan Anda letakkan di bagian atas atau dibawah salah satu kode tadi.
    *Sebagai contoh saya letakkan dibawah kode <div id='main-wrapper'>
    Dua Kolom Widget / Gadget
    *Hasilnya seperti gambar berikut
    Dua Kolom Widget / Gadget
  • Jika sudah selesai klik Preview / Pratinjau dulu, baru klik Save Template / Simpan Template.
Semoga Tutorial diatas bisa berguna dan bermanfaat...

►Memberi Efek Taburan Bintang di Blog

Sebelumnya saya berbagi salah satu cara untuk mempercantik blog, yaitu Memberi Efek Taburan Hati di Blog, pada postingan kali ini saya akan membahas mengenai cara Memberi Efek Taburan Bintang di Blog. Sebenarnya efek ini sama saja dengan efek taburan hati dan Efek Daun Berjatuhan, hanya tampilannya saja yang berbeda dan juga kode script-nya.
Untuk menerapkan efek ini pada blog bisa melalui edit template, ataupun lewat gadget, silakan anda pilih cara mana yang menurut anda lebih nyaman.

Cara yang pertama melalui edit template :
  • Pada dashboard blogger klik Template > Edit html
  • Beri centang pada Expand Template Widget
  • Cari kode </body> lalu letakkan kode script efek di atas kode </body>, berikut script-nya:
    Efek bintang berwarna kuning,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangkuning.js' type='text/javascript'/>
    Efek bintang berwarna biru,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangbiru.js' type='text/javascript'/>
    Efek bintang berwarna oren,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangoren.js' type='text/javascript'/>
    Efek bintang berwarna pink,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangpink.js' type='text/javascript'/>
  • Terakhir klik Save Template.
Untuk cara kedua melalui Gadget :
  • Pada dashboard klik Tata Letak > Add a gadget > HTML/JavaScript.
  • Letakkan script dibawah ini pada gadget.
    Efek bintang berwarna kuning,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangkuning.js' type='text/javascript'/></script>
    Efek bintang berwarna biru,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangbiru.js' type='text/javascript'/></script>
    Efek bintang berwarna oren,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangoren.js' type='text/javascript'/></script>
    Efek bintang berwarna pink,
    <script src='http://wadah-tutorial.googlecode.com/files/bintangpink.js' type='text/javascript'/></script>
  •  Lalu klik Simpan / Save.
Selesai,,, silakan lihat hasilnya pada blog sobat.
perum kwayangan jl dwarawati 3 no 161 kedungwuni 51173
 

Blogger templates


  • Cara Mengganti Icon Blogger 2014
  • TUTORIAL BIKIN BLOG
  • Memperbaiki Missing Required hCard "Author"
  • Mengatasi Missing Required Field "entry-title"
  • Membuat Daftar Isi Label Tertentu
  • Elvetic Blogger Template
  • Cara Mengetahui Duplikat Konten
  • Trik Mempercepat Loading Blog
  • Membuat Daftar Isi Blogger
  • Mengatasi Duplikasi Deskripsi Meta
  • Memberi Efek Taburan Hati di Blog
  • Membuat Link Membesar Saat disentuh Kursor
  • Membuat Gambar Membesar Saat disentuh Cursor
  • Cara Menghapus Waktu Komentar
  • Membuat Dua Kolom Widget di Blog
  • Memberi Efek Taburan Bintang di Blog ;
  • HomeDesign Blogger Template
  • Mengganti Tampilan Thread Comment
  • Macam Macam Div Style
  • Membuat Tombol di Blog
  • HostingPro Blogger Template
  • SimpleVideoblog Template
  • Membuat Tombol To Page Down di WordPress.com
  • FreeDream Blogger Template
  • Membuat Template Blog Secara Online
  • Menampilkan Smiley Pada Postingan Blogger
  • Outubro Blogger Template
  • Membuat Recent Comments Blogger dengan Avatar
  • MusicBlog Blogger Template
  • Optimasi SEO pada Image
  • Masunurin Blogger Template
  • Menampilkan Tag Clouds di Blogger
  • Web Blog Blogger Template
  • Menu Dropdown dengan Background
  • Memberi Efek Hujan Salju di Blog
  • Membuat Efek Daun Berjatuhan di Blog
  • Membuat Text Area dengan Tombol Highlight All
  • RSS Feeds Dari Google Plus
  • Upgrade Profile Blogger Ke Profile Google Plus
  • Menampilkan Photo Profil di Google Search
  • Menampilkan Postingan Blog di Google Plus
  • Mempublish posting Google+ ke Twitter
  • Cara Mengganti Template
  • Memasang Widget Google Plus
  • Memasang Tombol Share +1
  • Menampilkan Share Buttons Bawaan Blogger
  • Menghapus / Menghilangkan Navbar Blogger
  • Mengatasi Warning: At least one field must be set ...
  • Menampilkan Rich Snippet Rating Bintang 5
  • Memperbaiki Missing Required Field "Updated       

    • Jayesslee in Taiwan

      DOWNLOAD GAME A ************* Z


      ► Download Game A condolkdw ► Download Game B condolkdw ► Download Game C condolkdw ► Download Game D condolkdw ► Download Game E condolkdw ► Download Game F condolkdw ► Download Game G condolkdw ► Download Game H condolkdw ► Download Game I condolkdw ► Download Game J condolkdw ► Download Game K condolkdw ► Download Game L condolkdw ► Download Game M condolkdw ► Download Game N condolkdw ► Download Game O condolkdw ► Download Game P condolkdw ► Download Game R condolkdw ► Download Game S condolkdw ► Download Game T condolkdw ► Download Game U condolkdw ► Download Game V condolkdw ► Download Game Wcondolkdw ► Download Game X condolkdw ► Download Game Z condolkdw ► Download Game 0 condolkdw ► Download Game 9 condolkdw ► Download Game A condolkdw ► Download Game B condolkdw ► Download Game C condolkdw ► Download Game D condolkdw ► Download Game E condolkdw ► Download Game F condolkdw ► Download Game G condolkdw ► Download Game H condolkdw ► Download Game I condolkdw ► Download Game J condolkdw ► Download Game K condolkdw ► Download Game L condolkdw ►Download Game M condolkdw ► Download Game N condolkdw ► Download Game O condolkdw ► Download Game P condolkdw ► Download Game R condolkdw ► Download Game S condolkdw ► Download Game T condolkdw ► Download Game U condolkdw ► Download Game V condolkdw ►Download Game Wcondolkdw ► Download Game X condolkdw ► Download Game Z condolkdw ► Download Game 0 condolkdw ► Download Game 9 condolkdw

      ,