Category Archives: Blogger

Menambahkan Facebook Like Box untuk Blogger.com/ Blogspot

membuat facebook like box blogger.com atau blogspot

Facebook like box memungkinkan pengguna atau pengunjung blog dapat bergabung dan sama halnya seperti saat like facebook fanpage blog Anda namun dalam versi mini di Blog.

Buka akun Facebook Anda, kemudian masukkan link berikut ke browser Anda:

https://developers.facebook.com/docs/plugins/

Pilih Like Box,

membuat facebook like box blogger.com atau blogspot

atau klik saja link berikut:

https://developers.facebook.com/docs/reference/plugins/like-box/

Muncul prototype facebook like box yang akan tertampil di blog Anda sebagai preview di sebelah kanan Attribut.

membuat facebook like box blogger.com atau blogspot

  • href: atau “Facebook Page URL” adalah URL Facebook Fanpage yang sebelumnya telah Anda buat untuk kotak Like Box ini. Link facebook website fanpage address tersebut bisa Anda temukan saat Anda membuka facebook fanpage Anda. Misalnya; http://www.facebook.com/leafculture
  • width: ukuran lebar dari facebook like box Anda. Sebaiknya disesuaikan dengan batas sidebar ataupun widget dari blog Anda. Ukuran default: 300 px dari facebook.
  • height: ukuran panjang dari facebook like box Anda. Ukuran tinggi default bervariasi tergantung berapa banyak jumlah profile picture fans fanpage facebook Anda dan stream latest post (artikel terakhir yang di publish) jika ditanyangkan.

Catatan: jika Anda ingin menayangkan stream posting terakhir dan juga 10 gambar profile fans di like box maka ukuran defaultnya adalah 556px. Namun, jika tanpa keduanya maka default ukurannya adalah 63px menyesuaikan.

  • colorscheme: pola warna untuk plugin atau widget facebook like box Anda. Terdapat dua jenis yaitu light, warna dasar putih dan dark, untuk hitam atau gelap.
  • show faces: menentukan apakah foto profile di plugin like box ini dimunculkan atau tidak. Centang jika memilih, tidak jika tidak menginginkan foto profil fans blog Anda tertampil di like box ini.
  • border color: warna border atau bingkai untuk facebook like box ini.
  • stream: menentukan apakah stream dari latest post Anda tertampil atau ingin ditampilkan di facebook like box ini.
  • header: menentukan apakah Facebook header yang paling atas dari like box ini ditampilkan atau tidak. Centang jika ya.

Langkah terakhir, pilih “Get Code”. Gunakan kode iframe maupun html5 tergantung dari Anda, keduanya bisa digunakan untuk blogger.com. Copy paste facebook like box code tersebut.

membuat facebook like box blogger.com atau blogspot

Keterangan: untuk menggunakan atau membuat plugins like box ini dianjurkan untuk menggunakan akun facebook Anda, bukan sebagai admin halaman page atau facebook fanspage tersebut.

Login akun blogger.com Anda. Pilih “Layout” lalu “Add a gadget” > “HTML/JavaScript”.

membuat facebook like box blogger.com atau blogspot

Paste code atau script facebook like box tersebut ke “HTML/JavaScript”.

membuat facebook like box blogger.com atau blogspot

Dan blog Anda sudah terdapat facebook like box yang terhubung dengan facebook fanpage. Update terus melalui fanpage ini untuk mendapatkan traffic ke blog Anda.

blog leaf culture all abaout blog tutorial

Advertisements

Cara Menambahkan Meta Description Tag di Blogger

menambahkan meta description tag

Apa itu Meta Tag?

Meta Tag adalah elemen dari HTML yang digunakan untuk menyediakan metadata terstruktur tentang  halaman dari suatu website. Tag tersebut ditempatkan di bagian kepala dari dokumen HTML, tetapi sering secara tidak langsung terlihat oleh pengunjung blog. Dan sangat membantu mesin pencari (search engine) untuk menggunakan data tersebut untuk menampilkan/ mengkategorikan hasil pencarian dengan benar.

Sahabat leafculture!Kebanyakan media jejaring sosial seperti Facebook, Google plus, twitter menggunakan meta description untuk membagikan sedikit informasi yang  akan dibagikan ke jaringan seperti mesin pencari Google.

Menambahkan Meta Description Tag 

Blogger atau Blogspot telah menambahkan fitur SEO, ini membuat seorang blogger pemula dapat menambahkan meta tag menjadi lebih mudah. Kita dapat menambahkan maupun mengatur fitur SEO blogger ini dengan mudah dari User Interface Blogger tanpa melakukan banyak perubahan terhadap HTML Template sampai pusing kepala memikirkan detail penempatan script. Jadi sekarang bagaimana selanjutnya kita memanfaatkannya dengan benar.

Langkah-langkahnya adalah sebagai berikut;

1. Dari “Dashboard” blog Anda, pilih “Setting”.

Kemudian “Search Preference”, mode default dari “Meta Tag” description masih “Disabled”.

menambahkan meta description tag

Pilih “Edit”  dan aktifkan atau Enable “Meta Tag”maka akan mucul Text area. Maksimum 150 karakter yang digunakan oleh Anda untuk mendeskripsikan (menggambarkan) isi blog Anda.

menambahkan meta description tag

Teks yang Sahabat tulis tadi akan digunakan oleh Search engine saat halaman blog Anda tampil di Search engine.

Misalnya pada blog Sahabat Download, “Welcome to Sahabat Download! Quickly find what you’re searching for Download today. Here you can download for free and easy!

menambahkan meta description tag

Langkah terakhir, klik “Save Change”. Dan hasil yang akan muncul di hasil pencarian seperti berikut;

menambahkan meta description tag

Berikut contoh Meta Description dari tiga Social-Media, berturut-turut; Facebook, twitter, dan Google+.

menambahkan meta description tag

menambahkan meta description tag

menambahkan meta description tag

2. Sekarang, pada saat Anda membuat posting artikel terbaru. Sahabat bisa langsung mengatur Meta Description untuk setiap posting artikel terbaru dari kolom “Post Setting” di Sidebar Post editor.

menambahkan meta description tag

Search Description bisa selalu dapat di sunting (edit) untuk setiap posting yang ada atau akan di publish.

Jika template Anda adalah template custom, atau sudah bukan dari blogger.com maka pastikan barisan kode atau script berikut telah ada di template Anda.

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

Untuk memastikan itu, pergi ke “Template” dan pilih “Edit HTML” dan cari dengan fungsi Find (CTRL+F).

Keterangan: Jika tidak ditemukan atau tidak ada, maka tambahkan script kode di atas tepat sebelum kode </ head>

Selesai, dan satu lagi langkah Blog sahabat jadi SEO friendly.

menambahkan meta description tagleaf culture blog tutorial

Cara Modifikasi/Mengubah Page Title SEO Friendly di Blog Blogger

Modifikasi page title

Salah satu alternatif cara agar blog menjadi lebih SEO friendly adalah dengan sedikit memodifikasi “Page Title” blog Sahabat.  Ini dimungkinkan,  sebab Page Title memegang peran penting bagi blog karena sifatnya yang menunjang SEO friendly.

Page Title mestinya akurat, ringkas, dan dapat mendeskripsikan tentang halaman blog agar pengujung sedikitnya bisa sedikit memahami isi blog dan juga memberikan informasi standar bagi mesin pencari.

Modifikasi page title

Biasanya untuk Search Engine lebih menyukai format Page Title, Title Post |Title Blog. Jadi Sahabat leaf culture! disarankan untuk memodifikasi “Page Title” agar lebih SEO friendly.

Modifikasi page Title tidak terlalu sulit untuk blogger pemula, berikut langkah-langkanya:

Dashboard > Template > Edit Template, “Expand Widget Templates”.

  • Opsi I

Temukan script HTML seperti berikut, lebih memudahkan dengan menggunakan CTRL+F:

<title><data:blog.pageTitle/></title>

Gantikan kode HTML di atas dengan yang berikut ini,

<b:if cond='data:blog.pageType == "item"'> 
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Modifikasi page title

Akhiri dengan “Save Template”.

Modifikasi page title

  • Opsi II

Dengan penambahan Keyword atau kata Kunci dari Blog Sahabat.

Kode/script HTML-nya seperti berikut,

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | Nama Keyword | Nama Keyword </title>
</b:if>

Sama halnya dengan Opsi I, gantikan kode HTML berikut dengan kode HTML di atas.

<title><data:blog.pageTitle/></title>

Keterangan: Ubah “Nama Keyword” dengan Kata kunci dari blog Sahabat, dan juga bisa Sahabat tempatkan Kata kunci tambahan dengan pemisah “|” seperti Script di atas. Nama Keyword tidak di batas namun jika terlalu panjang juga tidak kelihatan baik dan tidak SEO juga, jadi minimal Dua saja sudah cukup.

“Save Template”.

Modifikasi page title

Keterangan: Jika <title><data:blog.pageTitle/></title>  tidak sengaja terhapus sehingga tidak di temukan, maka “Copy Paste” atau tempatkan kode HTML dari kedua Opsi di atas tepat atau sebelum <b:skin><![CDATA[/*

Modifikasi page title

Tidak terlalu sulit kan? Jika Sahabat leafculture! Masih memiliki kendala, jangan sungkan untuk bertanya dan berkomentar di kolom komentar ataupun lewat e-mail langsung.

modifikasi page title

Cara Edit Widget LinkWithin Tidak Muncul di Homepage Blog Blogger

Sahabat leafculture! Pernakah Sahabat menambahkan widget LinkWithin di blog Blogger sahabat? Lalu, apakah yang LinkWithin tidak hanya muncul di setiap artikel blog Sahabat tapi di halaman “Home” blog sahabat juga muncul?

Sebagian blogger pasti merasa kurang pas terhadap tata letak di blog yang  terlihat rapih dan Indah-Nya  kini agak berantakan. Widget LinkWithin yang sebelumnya dimaksudkan hanya akan muncul di bbagian bawah tiap blog malah ikut tampil di halaman home.

Apakah Sahabat blogger sebaiknya menghapus widget tersebut lalu Menambahkan Widget LinkWithin tersebut dari awal? Tenang, sahabat janganlah khawatir. Walaupun LinkWithin sudah terpasang, sahabat tetap dapat membuat widget ini hanya muncul di setiap artikel yang Sahabat post sebelumnya.

Berikut langkah-langkah mudahnya:

Login ke akun blogger Sahabat, dari “Dasboard”  lalu pilih “Template” > “Edit HTML”.

Centang “Expand widget template”, Cari “LinkWithin” dengan CTRL+F.

Keterangan: HTML yang dicari akan lebih memudahkan apabila terdapat title sebelumnya untuk widget LinkWithin yang siap untuk di Edit tersebut.

Temukan Script berikut, biasanya tepat di bawah  LinkWithin lalu blok.

<b:includable id="main"><data:content /></b:includable>

Ganti dengan copy paste script berikut:

<b:includable id="main">
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:content/></b:if></b:includable>

Kemudian “Save Template” untuk mengakirinya.

Selesai  dan LinkWithin artikel terkait Sahabat hanya muncul di setiap posting.

Jika Sahabat leafculture! Masih bingung, bisa ajukan pertanyaan langsung melalui kolom komentar maupun alamat email serta saran pun sangatlah diterima.

Cara Menambahkan Widget LinkWithin di Artikel/Postingan Blog Blogger

1. Mengenal LinkWithin

Salah satu cara untuk membuat pengunjung betah berlama-lama di blog kita dan juga dapat meningkatkan traffic pada blog adalah dengan menggunakan artikel terkait. Terdapat beragam upaya yang dapat dilakukan sebagai alat untuk menarik minat pembaca/pengunjung bisa melihat-lihat lebih lama blog Sahabat.

Dengan menggunakan artikel terkait, pengunjung blog bisa saja tertarik dengan artikel serupa maupun lainnya di blog. Sehingga bisa meningkatkan lama waktu pengunjung menelusuri blog.

Salah satu cara membuat artikel halaman terkait adalah dengan menggunakan widget LinkWithin. LinkWithin dapat mengoptimalkan artikel-artikel terkait secara acak namun mengutamakan persamaan konteks melalui judul postingan, tag, maupun label. Sehingga membutuhkan waktu yang lumayan cukup lama saat page loading untuk menampilkan hasil.

Selain itu, LinkWithin menambahkan thumbail yang setidaknya bisa meningkatkan ketertarikan lebih untuk pembaca. Linkwithin terlebih dahulu melakukan  generating terhadap gambar dari artikel atau postingan  yang dimuat. Bila tidak terdapat gambar dalam halaman tersebut, maka LinkWithin secara otomatis akan menampilkan  gambar dasar berwarna abu-abu bertekstur.

Sahabat leafculture! Berminat? Jika iya, maka ikutilah Cara Menambahkan Widget LinkWithin di Artikel/Postingan Blog Blogger berikut. Jika Sahabat telah menambahkan Widget LinkWithin terlebih dahulu, namun widget ini tidak muncul di setiap artikel post tetapi muncul juga di “Homepage” blog. Maka, Sahabat jangan khawatir dan buru-buru menghilangkannya. Ikutilah “Cara Edit Widget LinkWithin Tidak Muncul di Homepage Blog Blogger“.

2. Menambahkan LinkWithin di blog

Mula-mula, Login ke Akun Blogger dan mulailah dengan meluncur ke situs LinkWithin.

Lengkapi data-data yang diminta seperti dibawah ini. Lalu klik tombol  “Get Widget!”

Keterangan: Centang  “My blog has light text on a dark background”, jika blog Sahabat memiliki warna dasar hitam.

Klik “Install Widget”, kemudian pilih blog yang akan dipasangi widget LinkWithin dan beri nama widget tersebut agar mudah dikenali.

Klik “Edit Template”, hapus Script yang tertera dan paste kode berikut:

<b:includable id="main">
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:content/>
</b:if></b:includable>

Tekan tombol  “Add Widget” untuk finishing.

Muncul halaman baru pada browser yaitu antarmuka “Layout”, Geser widget “LinkWithin”menuju ke bawah posting blog/ “Blog Posts”.

Save “Layout”

Cek Kembali ke blog Sahabat, sudahkah seperti gambar berikut? Jika belum berhasil, maka cobalah untuk masuk ke LinkWithin support

Demikian tahapan-tahapan menambahkan LinkWithin di Blog. Jika masih terdapat kendala, maka jangan sungkan untuk bertanya. Blog ini terbuka untuk Sahabat blogger leafculture!

Cara Backup dan Restore Template Blog Blogger

Sahabat leafculture! Kali ini tutorial yang akan dibahas adalah “Back Up” template. Mengapa kita harus melakukan “Back Up” template terlebih dahulu sebelum melakukan “Edit HTML”?

“Back Up” Template diperlukan untuk menghindari sesuatu hal yang tidak diinginkan terhadap blog kita sebelumnya ataupun tidaklah sesuai dengan harapan blogger. Misalnya, terjadi error pada blog, salah penempatan kode HTML, dan lain sebagainya. Jadi, disarankan terlebih dahulu melakukan “Back Up” agar template blog bisa kembali seperti semula sebelum pengeditan HTML dimulai.

Jika kita telah melakukan “Back Up” template sebelumnya, maka bagaimanakah cara untuk mengembalikan Template seperti sedia kala? Mudah, tinggal “Restore” template saja. Daripada terlalu berpanjang lebar dengan teori, lebih baik langsung dipraktikkan saja bagaimana? Ya, ikutilah langkah-langkah berikut:

Dari menu “Dasboard”, klik “Template” .

Lihat pojok kanan atas. Pilih atau Klik “Back Up/Restore” .

Setelah itu maka akan mucul interface “Back Up/Restore”. Pilih kotak “Download full template” untuk melakukan “Back Up” sebelum editing terhadap template blog dan akan tersimpan di hard drive Sahabat ataupun dilokasi yang sahabat hendaki.

Apabila Sahabat ingin “Upload” template ataupun “Restore” template ke keadaan seperti sebelum pengeditan maupun setelah dilakukan “Back Up” terlebih dahulu. Maka pilih “Browse” untuk mengupload sebuah template dari file yang ada atau sudah tersimpan dalam hard drive lalu klik button “Upload” untuk mengakhirinya.

Keterangan: Sahabat bisa “Upload” file template yang sudah di download dari situs penyedia Template gratis maupun pihak ketiga lainnya seperti BTemplates, yang telah di Download sebelumnya. Biasnya file yang yang didapat dari situs penyedia template berbasis “rar.” Ekstrak file “rar.” dan “Upload” untuk dijadikan template blog Sahabat.

Nah, cara “Back Up” maupun “Restore” Template telah Sahabat ketahui, jadi setiap kali melakukan pengeditan HTML disarankan untuk terlebih dahulu melakukan “Back Up” template.

Sampai disini tutorial kali ini, jika masih terdapat pertanyaan dalam benak Sahabat leafculture, tumpahkan lah semua di bilik komentar dan juga bisa lewat e-mail.

 

Cara Menghilangkan Navigation Bar (NavBar) Blogger

How to Hide NavBar

Saat memulai sebuah blog ataupun juga mengunjungi sebuah blog bawaan blogger (blogspot). Sahabat Blogger leaf culture  pasti sudah tak asing lagi dengan persegi  bar panjang yang melintang  di atas atau header blog yang berisi fitur Search, Berbagi, Laporkan, Buat Blog, Masuk, dan lain sebagainya.

Namanya sering disebut Navigation Bar jika disingkat NavBar. NavBar adalah bagian dari halaman blog untuk membantu blogger atupun pengunjung mencari dalam pencarian  artikel atau dokumen dan juga bisa sebagi jalur Log In dan Log out blogger. Navbar  juga sangat membantu blogger dan pengunjung blog karena merupakan salah satu aspek penting dari kegunaan blog.

Namun, jika para blogger kurang senang dengan adanya tampilan Navbar di blog Sahabat maka janganlah khawatir karena Navbar sendiri bisa dihilangkan ataupun di sembunyikan.

Nah, untuk sekarang Saya akan memberikan tutorial ilmu yang didapat secara otodidak ini dengan membahas Cara Menghilangkan Navigation Bar di blog bawaan blogger.com atau Blogspot.

Penting: sebelum mengotak-atik HTML blog Anda, disarankan untuk melakukan “Backup” template terlebih dahulu untuk mengantisipasi kesalahan dalam pengeditan.

Langkah pertama, dari “Dashboard” klik “Template” dan masuk ke “Edit HTML” dan centang “Expand Widget Template”

Cari kode skrip berikut ini.

]]></b:skin>

Tips: untuk lebih memudahkan dalam pencarian script yang dimaksud, pada browser Mozilla Firefox dapat dengan menggunakan fitur pencarian (CTRL + F). Copy Paste script tersebut lalu letakkan di kolom “Search” dan tekan “Enter” untuk memulai pencarian.

Jika sudah ditemukan, letakkan kode berikut ini sebelum atau tepat diatas kode ]]></b:skin>

/* hilangkan navbar
 ----------------------------- */

 #navbar-iframe {
 height:0px;
 visibility:hidden;
 display:none
 }

Untuk desain Template Klasik. Carilah terlebih dahulu script dibawah ini.

</style>

Dan letakkan kode berikut tepat di atasnya atau sebelum </style>

/* hilangkan navbar
 ----------------------------- */

 #navbar-iframe {
 height:0px;
 visibility:hidden;
 display:none
 }

 Klik “Save Template” untuk mengakhirinya.

Adapun cara kedua yang persis sama mudahnya (untuk template baru), lakukan cara seperti diatas. Jika sudah carilah kode seperti di bawah ini.

<body>

Tambahkan kode berikut ini tepat dibawah atau setelah script <body>

<style type=’text/css’>
#navbar-iframe {display:none;}
</style>

Mudahkan? Sekarang kunjungilah blog Sahabat sendiri untuk melihat hasilnya.

Sekian tutorial tentang cara menghilangkan Navbar blogger. Semoga tutorial tadi bermanfaat, silakan tinggalkan komentar Sahabat leaf culture!