Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Thursday, February 17, 2011

Cara Membuat Footer Multi Kolom

Setelah kemarin kita belajar seo dalam postingan kita sebelumnya, maka kali ini saya akan mengajak sobat untuk kembali mengutak-atik template blog sobat supaya lebih kelihatan profesional. Tutorial yang akan saya sajikan kali ini adalah bagaimana cara membuat footer multi kolom seperti pada blog doodey ini.

Apa itu footer multi kolom? Jika sobat melihat bagian bawah dari blog doodey ini, maka sobat akan melihat footer blog (kaki blog) yang terdiri dari multi (banyak) kolom. Nah, tertarik untuk membuat yang sama? Berikut tutorialnya.

1.      Silakan sobat tuju ke bagian Edit HTML, lalu tambahkan kode di bawah ini di atas kode ]]></b:skin>

#footer-column-divide {
background: #444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOMUZJtXRzZIWWq3RV3W-VUth9fokvDU3aAZObhaf1dVDmQfUvcnfIWAlCIfon4WWVOmkk9NF0zPxlMAqDZvxzoJ4laDRVCO515fynB2YaCVQeZLCzS_qOkyhn6IUryj2n5eC2l5jCv8xC/s1600/buttommenu-c.png) no-repeat;
width: 900px;
position: relative;
clear: both;
float: center;
color: #fff;
margin: 0 auto;
}
.footer-column {
padding: 10px;
}

2.      Setelah itu, cari kode di bawah ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

atau

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

3.      Tambahkan kode berikut di bawah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

Catatan:
Jika sobat tidak menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode berikut di bawah <div id='footer'>

Untuk pilihan berapa kolom yang akan sobat gunakan, berikut adalah pilihan jumlah kolomnya :

Jika ingin membuat footer 2 kolom, gunakan kode berikut :

<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left; margin:0; text-align:left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div style='clear:both;'/>
</div>

Membuat footer 3 kolom, gunakan kode berikut :

<div id='footer-column-divide'>

<div id='footer1' style='width: 33%; float:left; margin:0; text-align:left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

Membuat footer menjadi 4 kolom, gunakan kode berikut :

<div id='footer-column-divide'>

<div id='footer1' style='width: 25%; float:left; margin:0; text-align:left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

4.      Jika sudah, klik Save template. Kalau sudah berhasil, maka hasilnya akan menjadi seperti ini :

Footer 2 kolom


Footer 3 kolom


Footer 4 kolom


Nah, jika sobat sudah berhasil mempraktekkan tutorial cara membuat footer multi kolom ini, maka hasilnya bisa kurang lebih seperti tampilan footer multi kolom blog doodey ini. :D Selamat mencoba..

Friday, February 11, 2011

Perlukah Memasang Widget Recent Post di Homepage?

Belajar SEO Blogspot – Untuk membuat blog yang seo friendly dan juga reader friendly, tentunya kita harus mengoptimalkan template dan desain blog kita bukan!? Pengoptimalan template yang saya maksud disini adalah memasang breadcrumb, read more, related post, popular post, recent post, dan masih banyak lagi yang berguna untuk menjadikan template blog kita reader friendly dan juga seo friendly. Berbicara masalah widget recent post, sebenarnya perlukah kita memasangnya di homepage, mengingat itu tidak akan efektif lagi dalam hal seo jika terdapat 2 url yang sama di dalam homepage? Untuk itu saya akan mencoba mengulasnya dalam artikel ini.

Widget recent post merupakan widget yang berisi beberapa postingan artikel terbaru di dalam blog. Widget ini sangatlah berguna agar para pembaca kita dapat terarah dan lebih mudah ‘menavigasi’ mereka untuk membaca kembali artikel-artikel terbaru kita. Namun, widget ini boleh saya katakan tidak akan berguna atau lebih tepatnya efektif lagi jika kita pasang di halaman homepage blog kita. Mengapa? Sebab dalam hal SEO, sebenarnya tidak direkomendasikan terdapat 2 url yang sama dalam homepage sebuah blog. Lantas bagaimana solusinya?

Dulu, saya memasang widget recent post di homepage blog ini. Karena kebetulan saya mendapatkan informasi di luar bahwa widget recent post tidak efektif dipasang di halaman homepage sebuah karena alasan yang saya katakan tadi di atas. Nah, untuk itu saya berpikir untuk memasangnya di halaman artikel saja, jadi tidak di homepage lagi.

Memasang widget homepage di halaman artikel saja sudah sangat banyak menguntungkan. Sebut saja masalah ketentuan jumlah url di halaman homepage. Search engine memiliki ketentuan untuk memaksimalkan jumlah url di homepage hanya sampai 100 url, tidak lebih. Jika ternyata lebih dari 100 url maka boleh dibilang sudah tidak seo lagi. Selain itu, dengan memasang widget recent post di halaman artikel akan membuat loading blog kita paling tidak bisa lebih ringan dibanding dengan memasangnya di homepage. Mengapa? Sebab semakin sedikit url di homepage, maka bisa dikatakan akan semakin cepat kapasitas loading terhadap sebuah blog. Tentu ini akan memberikan 2 poin keuntungan buat kita bukan jika memasangnya di halaman artikel saja.

Itu semua tergantung dari sobat sendiri juga, lebih enak dimana memasangnya. Jika sobat tidak setuju dengan artikel ini sobat boleh tinggalkan dan meloncat ke artikel sebelumnya. Namun ini merupakan bagian dari rekomendasi para seo master di luar sana yang sampai saat ini berbaik hati mau membagikan sejumlah pengetahuan seonya kepada saya.

    Demikian artikel saya yang singkat ini tentang perlukah memasang widget recent post di homepage. Mungkin saja pendapat saya tentang hal ini salah, untuk itu saya sangat berharap pendapat kembali dari sobat pembaca sekalian. Sesuai dengan prinsip saya tentang membangun diskusi di dalam blog, saya yakin sobat akan sama-sama merealisasikannya bersama disini. :)

    Wednesday, November 10, 2010

    Cara Membuat Recent Post Dengan Thumbnails

    Blog Tutorial – Pada tutorial blog kali ini adalah bagaimana cara menampilkan recent post disertai dengan gambar pada postingan. Dengan adanya gambar akan menarik para pembaca untuk membaca postingan tersebut. Tertarik membuatnya? Ikuti langkah berikut!


    Cara membuatnya adalah sebagai berikut.

    Login di Blogger dengan account anda

    Klik Layout pada Dashboard anda

    Klik Add a Gadget lalu pilih HTML/Javascript

    Masukkan kode script di bawah ini, lalu Save

    <script language="JavaScript">
    imgr = new Array();
    imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
    imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
    showRandomImg = true;
    boxwidth = 298;
    cellspacing = 8;
    borderColor = "#ffffff";
    bgTD = "#000000";
    thumbwidth = 40;
    thumbheight = 40;
    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = false;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 5;
    home_page = "http://mediablogseo.blogspot.com/";
    </script>
    <script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

    Letakkan widget ini pada sidebar yang ada inginkan, terserah anda.

    Hal yang perlu diubah adalah :
    • Boxwidth :  lebar widget
    • Cellspacing :  space antara cells (default: 1)
    • borderColor :  warna border
    • thumbwidth & thumbheight :  lebar dan panjang thumbnail (default: 40)
    • fntsize :  ukuran huruf judul postingan
    • acolor :  warna huruf judul postingan
    • aBold :  bla ingin ditebalkan adalah true, jika tidak false
    • numposts :  berapa banyak recent post yang akan ditampilkan
    • home_page :  ganti dengan URL blog anda

    Pastikan juga seetingan site feed anda sudah pada Allow Blog Feed dengan melihat pada Setting > Site Feed > Full > Allow Blog Feeds.

    Selamat mencoba dan semoga bermanfaat!

    Saturday, October 2, 2010

    Cara Mengambil Keuntungan Sebagai Pengikut Blog

    Teknik SEO Blogspot - Menjadi pengikut suatu blog sebenarnya lebih dari sekedar kebanggaan bahwa foto kita sudah tampil dan terpajang rapi pada widget followers suatu blog. Lebih dari itu, mungkin untuk sekedar saling berbagai menjadi pengikut dengan blogger lainnya. Tapi tanpa kita sadari juga, kalau lebih dari itu sebenarnya kita juga bisa memanfaatkannya untuk mencuri ilmu terbaru dan menarik pengunjung ke blog kita. Mau tau caranya?



    Berikut adalah sekelumit isinya.

    1.      Sekarang cobalah masuk ke halaman Dasbor blog anda dan scrollah sedikit ke bawah. Perhatikanlah pada Daftar Bacaan-nya.


    2.      Di sebelah kiri tampak beberapa nama blog yang sudah anda ikuti. Dan disebelah kanan adalah update terbaru dari masing-masing blog tersebut. Susunan tulisan (postingannya) akan diurut berdasarkan waktu updatenya. Yang paling atas adalah update yang terbaru. Dan menyusul di bawahnya update lain sesuai tanggal dan jam yang lebih tua.

    3.      Jika anda ingin melihat beberapa tulisan yang terdapat pada blog tertentu, anda bisa mengklik salah satu nama blog tersebut. Maka disebelah kanan akan muncul beberapa postingan terakhir dari blog tersebut.


    4.      Jika salah satu judul postingan itu anda klik maka anda akan langsung tiba di halaman blog tersebut.


    Lalu apa untungnya bagi anda?

    1.      Anda tidak perlu susah-susah untuk mengakses blog tersebut lewat address bar dan mesin pencari. Karena anda sudah bisa langsung mengunjunginya lewat halaman dasbor anda.

    2.      Dengan membaca update terbaru suatu blog berarti anda sudah mendapatkan tips dan informasi terbaru dari mereka dengan cepat, yang bisa jadi tips itu sangat anda butuhkan.

    3.      Bila anda rajin melihat update terbaru dari setiap blog yang anda ikuti, maka anda berpeluang menjadi pemberi komentar pertama dari tulisan tersebut.

    4.      Apa untungnya menjadi pengunjug yang meninggalkan komentar pertama?

    5.      Karena tulisan terbaru adalah tulisan yang masih segar, maka komentar pertama adalah komentar yang paling ditunggu-tunggu oleh pemiliknya. Dan besar kemungkinan mereka akan segera berkunjung balik dan juga meninggalkan komentar di blog anda.

    6.      Jadi ada 2 keuntungan yang akan anda peroleh: Pertama tips dan informasi terbaru. Dan kedua mendatangkan pengunjung ke blog anda.

    Apakah anda tidak tertarik? Cobalah sekarang untuk menjadi salah satu pengikut suatu blog, dan anda juga bisa melakukannya di blog ini. :) Semoga bermanfaat!

    Terima kasih.


    Wednesday, August 11, 2010

    Cara Mendaftar di Feedburner

    “Apa itu Feedburner?”

    Anda yang belum tahu pasti menanyakan hal seperti itu. Ya iyalah, kita kan masih newbie mas! Hehe.. :)

    Feedburner adalah salah satu situs yang memberikan layanan dalam hal syndikasi atau feed. Menurut berita yang saya baca dari halaman news miliknya feedburner, bahwa sekarang feedburner telah dibeli oleh Google sehingga kita dapat mengalihkan feed blog kita ke feed yang dari feedburner.

    Bagi Anda yang ingin blognya lebih cepat terkenal saya sarankan untuk bergabung dengan feedburner, layanannya ditanggung gratis loh. :) Bagi yang ingin mendaftar tapi belum mengetahui caranya, silahkan ikuti saja langkah-langkah berikut ini! :)

    1. Silahkan kunjungi www.feedburner.com

    1. Klik tulisan Register pada halaman bagian atas

    1. Isi seluruh form yang yang ada
      • Username, isi dengan username yang diinginkan. Contoh: Doodey
      • Password, isi dengan password yang diinginkan. Contoh : doodey
      • Password (again), isikan kembali password yang Anda tulis tadi
      • Email address, isi dengan alamat email Anda
      • Secret Question, isi dengan pertanyaan rahasia yang jawabannya nanti cuma Anda yang tau. Contoh: Siapa nama pacar pertamamu?
      • Secret Answer, isi dengan jawaban yang sesuai dengan pertanyaan di atas. Contoh: Intan

             4.         Klik tombol Sign In

             5.         Jika berhasil, muncul ucapan selamat datang (Welcome) dari feedburner

             6.         Isi kotak di bawah tulisan Burn a feed right this instant dengan alamat blog Anda. Contoh: www.blogdoodey.blogspot.com

             7.         Beri tanda pada radio button yang tersedia, terserah mau pilih yang mana, kemudian klik tombol Next

             8.         Ubah Feed Title dengan Feed Address jika mau diubah, kalo sudah tinggal klik tombol Active Feed

             9.         Ada ucapan Conrats, klik saja langsung tombol Next

           10.       Beri tanda centang pada kotak di samping tulisan Clickthroughs serta I want more! Have FeedBurner stats PRO also track (karena sekarang layanan yang Pro pun sudah gratis karena sudah dibeli oleh Google)

           11.       Klik tombol Next

           12.       Klik tab Optimize

           13.       Silahkan setting yang Anda inginkan, tapi yang paling penting adalah Anda harus mengaftifkan fitur SmartFeed, karena fitur ini berfungsi agar supaya fungsi dari feed kita kompatibel atau klop dengan berbagai feed reader yang ada

           14.       Silahkan klik SmartFeed lalu klik tombol Active

           15.       Klik tab Publicize, silahkan pilih fitur yang Anda inginkan, tapi yang sering di gunakan adalah fitur feedCount, coba klik FeedCount

           16.       Pilih bentuk style dari feedCount, yang biasa atau yang animasi, beri tanda pada radio button di sampingnya

           17.       Klik tombol Active

           18.       Copy kode HTML yang diberikan pada text area, paste pada Notepad untuk nanti dipasang di blog Anda

           19.       Klik Chicklet Chooser untuk memilih berbagai banner atau chicklet

           20.       Beri tanda pada radio button yang terletak di samping chicklet masing-masing, kemudian copy kode HTML yang diberikan yang ada pada text area, kemudian paste pada Notepad. Catatan: Setiap Anda memberi tanda pada radio button masing-masing chicklet, maka secara otomatis kode HTML yang ada di bagian bawah pun akan berubah, jadi kesimpulannya beri tanda radio button lalu copy kode HTML-nya beri tanda lagi lalu copy kodenya lagi

           21.       Klik Pingshot, beri tanda pada kotak di samping Ping-O-matic serta Newsgator, klik menu dropdown yang ada, lalu pilih yang Anda inginkan, klik tombol Add, klik lagi menu dropdownnya bila ingin ditambahkan lagi, klik Add kembali

           22.       Klik tombol Active

           23.       Klik Headline Animator untuk mendapatkan banner animasi

           24.       Klik menu dropdown di bawah tulisan Theme, pilih yang sesuai keinginan (yang paling banyak diminati adalah type classic)

           25.       Klik tombol Active

           26.       Klik menu dropdown di samping tulisan Add to, pilih Blogger blog

           27.       Klik tombol Next

           28.       Setelah muncul window baru, klik tombol Add to Blogger

           29.       Silahkan Sign In dulu ke Blogger

           30.       Pilih blog yang mau dipasang banner animasinya, lalu klik tombol Menambah Widget maka secara otomatis banner animasi akan ditambahkan. Catatan: Cara ini hanya berlaku bagi yang memakai template baru

    31.      Silahkan Sign Out dari situs tersebut

    32.      Selesai.

    Untuk fitur-fitur yang lainnya, silahkan Anda coba-coba saja sendiri karena jika diterangkan semuanya, saya anggap terlalu banyak. Alasan utamanya sich cuma cape ngetiknya aja bro. :)

    Satu yang paling terakhir. Seperti yang saya katakan di atas tadi bahwa sekarang feedburner sudah dibeli sama Google, maka untuk feed blogger bisa dialihkan ke feedburner.

    Caranya seperti ini :

    1. Sig In ke Blogger

    1. Klik menu Pengaturan

    1. Klik Feed Situs

    1. Di sebelah tulisan Ijinkan Feed Blog, pilih yang Penuh

    1. Simpan alamat feed Anda yang dari feedburner tadi pada kotak di samping tulisan Posting URL Pengubahan Arah Feed. Contoh, alamat feed dari feedburner : http://feeds.feedburner.com/Doodey

    1. Bila Anda mempunyai account Google AdSense, Anda bisa menyimpan kode iklan Google AdSense Anda pada kotak di samping tulisan Feed Item Footer

    1. Klik tombol Simpan Pengaturan

    1. Selesai.

    Ok deh, semoga dengan bergabungnya Anda ke feedburner, blog Anda menjadi cepat terkenal dan ramai di kunjungi. Amin! :)

    Selamat mencoba!

    Terima kasih.

    Cara Membuat Label (Kategori Artikel)


    Memang benar, tentu dengan adanya label (kategori artikel) ini dapat mempermudah kita, khususnya pengunjung blog untuk mencari tema artikel mana yang akan dibaca. Di Blogger fasilitas ini memang sudah tersedia dari dulu, akan tetapi jika kita tidak bisa mempergunakan fasilitas tersebut, maka akan menjadi tidak berguna.

    Untuk membuat kategori artikel di Blogger dikenal dengan istilah Label. Dengan failitas ini kita selaku pemilik blog hanya tinggal mengisi kotak label yang disediakan pada setiap postingan artikel kita, sangat simpel dan sederhana sekali.

    Agar tidak membingungkan, silakan coba Anda lihat pada akhir postingan artikel ini! Disana ada tulisan seperti ini, Categories: Tutorial Blogging, Tips dan Trik Blogging. Nah, berarti postingan ini termasuk ke dalam dua kategori, yaitu kategori Tutorial Blogging dan kategori Tips dan Trik Blogging. Untuk melihat fungsi dari label ini, silakan Anda klik label atau category yang bertuliskan Tutorial Blogging, maka secara otomatis seluruh postingan yang saya beri label atau category Tutorial Blogging akan ditampilkan dan siap untuk dibaca oleh pengunjung.

    “Bagaimana cara membuat Label itu?”

    Untuk membuat sebuah label atau kategori itu, Anda tinggal mengisi kotak kosong di samping tulisan Label untuk postingan ini: (karena sekarang sudah ada Blogger yang berbahasa Indonesia) yang berada di bawah kotak tempat membuat artikel. Isi kotak tersebut dengan kategori yang kira-kira cocok untuk postingan yang kita buat. Contoh: liburan musim panas. Satu postingan tidak hanya terpatok pada satu kategori, akan tetapi satu postingan bisa mempunyai beberapa kategori. Untuk membuatnya, Anda tinggal pisahkan dengan tanda koma (,) saja, misalnya, Tutorial Blog, Tips dan Trik Blogging, Tools Blogging.

    “Apakah bisa kategori kita letakkan di sidebar?”
    “Dan bagaimana caranya?”

    Bisa sekali! :) Kategori sangat bisa kita tempatkan atau letakkan di bagian sidebar blog kita. Dan biasanya elemen label ini sudah sudah tersedia ketika kita baru memasang template. Jika mungkin elemen label belum tersedia, maka Anda bisa membuatnya sendiri. Silakan ikuti langkah-langkah berikut ini! :)

    1. Login ke Blogger dulu
    2. Pilih menu Layout
    3. Klik menu Elemen Halaman
    4. Klik tulisan Tambahkan Sebuah Elemen Halaman
    5. Klik tombol yang bertuliskan Tambahkan Ke Blog yang berada di bawah tulisan Label
    6. Tulisan Labels di samping tulisan Judul bisa Anda rubah menjadi Kategori, jika Anda ingin merubahnya
    7. Pilih radio button yang sobat inginkan di samping tulisan Menyortir, Alfabetik : jika kategori ingin di tampilkan sesuai dengan abjad alfabetik (dari A → Z), Berdasarkan Frekuensi : jika kategori ingin ditampilkan sesuai dengan banyaknya label (kategori)
    8. Klik tombol yang bertuliskan Simpan Perubahan
    9. Selesai

    Mudah bukan? :)

    Semoga bermanfaat. Terima kasih.