Kerah Ledrek

Beranda » Posts filed under Tutorial Blogger

Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Menampilkan Gadget Di Halaman Tertentu Saja

Terkadang kita ingin mengatur gadget blogger agar tampil pada halaman tertentu saja. Biasanya pada saat kita ingin agar pada halaman tersebut page load nya lebih ringan. Selain itu, dengan mengatur gadget agar hanya tampil pada halaman tertentu juga akan menimbulkan kesan dinamis pada template kita Caranya adalah kita simpan kode HTML di bawah untuk mengapit kode HTML gadget yang dimaksud pada template kita.

Biasanya pada template blogger kode gadget diawali kode seperti ini :

<b:widget id='HTML1' locked='false' title='Judul Gadget' type='HTML'>
<b:includable id='main'>


</b:includable>
</b:widget>

Nah, kita akan menggunakan kode-kode di bawah ini untuk mengapit kode yang berwarna biru di atas. Langsung saja, berikut kode HTML tersebut :

1. Menampilkan gadget hanya di beranda atau homepage saja
<b:if cond='data:blog.url == data:blog.homepageUrl'>

</b:if>

2. Menampilkan gadget hanya di halaman posting saja.
<b:if cond='data:blog.pageType == "item"'>

</b:if>

3. Menampilkan gadget hanya di halaman Asip saja.
<b:if cond='data:blog.pageType == "archive"'>

</b:if>

4. Menampilkan gadget hanya di posting tertentu saja.
<b:if cond='data:blog.pageType == "URL-posting"'>

</b:if>

5. Menampilkan gadget hanya di halaman tertentu (Static Page)
<b:if cond='data:blog.pageType == "static_page"'>

</b:if>

6. Menampilkan gadget di semua halaman kecuali di homepage.
<b:if cond='data:blog.url != data:blog.homepageUrl'>

</b:if>

7. Menampilkan gadget di semua halaman kecuali halaman arsip.
<b:if cond='data:blog.pageType != "archive"'>

</b:if>

8. Menampilkan gadget di semua halaman, kecuali halaman posting.
<b:if cond='data:blog.pageType != "item"'>

</b:if>

9. Menampilkan gadget selain di postingan tertentu.
<b:if cond='data:blog.pageType != "URL-posting"'>

</b:if>

10. Menampilkan gadget di semua halaman, kecuali pada halaman statis.
<b:if cond='data:blog.pageType != "static_page"'>

</b:if>

Sebagai contoh saya menampilkan gadget "GADGET-ANE" hanya di beranda saja, maka kodenya deperti ini :

<b:widget id='HTML2' locked='false' title='GADGET-ANE' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h2 class='title'>
<data:title/>
</h2>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>

Keterangan :

Kode yang berwarna merah adalah kode awal gadget blogger

Kode yang berwarna hijau adalah kode yang kita tambahkan tadi

Kode yang berwarna biru adalah kode gadget yang kita apit oleh kode baru tadi.

Sekian saja semoga bermanfa'at, salam blogger.

*******

selengkapnya » Menampilkan Gadget Di Halaman Tertentu Saja

Menghilangkan tombol tang obeng (quick edit)

Posted by Kerah Ledrek Beri Komentar

Tombol tang obeng sebetulnya merupakan fitur yang disediakan blogger untuk mempermudah user yaitu agar user bisa mengedit gadget langsung di halaman blog tanpa harus masuk ke dashboard blogger, akan tetapi bagi sebagian orang termasuk ane tombol itu sedikit menggangu pemandangan he he, bagi sobat yang ingin menghapus tampilan tombol tersebut caranya sangat mudah, silahkan sobat tempatkan kode CSS ini :
.quickedit{display:none;}
tepat di atas kode :
]]></b:skin>

Mudah sekali bukan? Selamat mencoba, salam blogger.

selengkapnya » Menghilangkan tombol tang obeng (quick edit)

Menggunakan label blogger sebagai navigasi blog

Posted by Kerah Ledrek Beri Komentar

Label atau kategori di blogger jika digunakan dengan benar bisa menjadi cara yang bagus untuk mengkategorikan posting anda. Tanpa kita modifikasi pun memang blogger sudah menyediakan fitur kategori, akan tetapi pada kondisi tertentu cara itu dinilai kurang fleksibel.
Kali ini saya akan menunjukkan bagaimana menggunakannya sebagai navigasi blog. Hal pertama adalah mengetahui atau memilih label yang ingin anda gunakan sebagai navigasi halaman. Hal ini akan sangat berguna saat nanti kita mengubahnya.

Secara default URL kategori atau label di blogger adalah :

http://[NAMABLOG].blogspot.com/search/label/[LABEL]

Biasanya kita akan lihat pada sebuah template tertulis seperti ini :

<ul>
<li><a href="http://[NAMABLOG].blogspot.com/search/label/[LABEL]">LABEL</a></li>
<li><a href="http://[NAMABLOG].blogspot.com/search/label/[LABEL]">LABEL</a></li>
<li><a href="http://[NAMABLOG].blogspot.com/search/label/[LABEL]">LABEL</a></li>
</ul>

Tapi cara ini kurang fleksibel, karena seandainya kita mengubah URL blog maka kita juga harus ikut mengubah URL label-nya. Oleh karena itu cara yang praktis penulisannya adalah sebagai berikut :

<a expr:href='data:blog.homepageUrl + "search/label/ [LABEL] "'>[LABEL]</a>

Sehingga nanti tertulis seperti ini :

<ul>
<li><a expr:href='data:blog.homepageUrl + "search/label/[LABEL]"'>[LABEL]</a></li>
<li><a expr:href='data:blog.homepageUrl + "search/label/[LABEL]"'>[LABEL]</a></li>
<li><a expr:href='data:blog.homepageUrl + "search/label/[LABEL]"'>[LABEL]</a></li>
</ul>

Dengan cara ini, jika suatu saat anda mengubah nama domain atau URL blog, anda tidak perlu ikut mengubah URL label-nya. Mudah-mudahan bermanfa'at. Salam Blogger

Edited from Source.

selengkapnya » Menggunakan label blogger sebagai navigasi blog

Gratis Template Blogger White Simple Fast

Posted by Kerah Ledrek Beri Komentar

Kali ini saya mau share template blogger yang sedang saya pakai tepat pada saat posting ini dibuat. Template ini sangat sederhana dan sudah saya usahakan mengurangi error struktur html-nya sebisa mungkin agar valid html5. Berikut beberapa fitur yang saya klaim sebagai kelebihan dari template ini :

1. Fast Load (No Image Load)

2. Fix & Static Page Ready

3. SEO Heading Tag

4. Relative Valid HTML5

5. Breadcumb Ready

6. Related Article Ready

DEMO | DOWNLOAD

Template ini saya bagikan gratis dengan syarat :

1. Jangan diperjual-belikan termasuk di shrink ke adfly adfoc dan berbagai trik link recehan lainnya.

2. Boleh menghapus credit link apabila nama saya disitu kurang enak dibaca he he

3. Apabila ingin share ulang di posting blog ente wajib masang refference link ke blog ane.

Mudah-mudahan bermanfa'at, salam blogger.

***********

selengkapnya » Gratis Template Blogger White Simple Fast

Membuat Recent Posts Blogger

Posted by Kerah Ledrek 2 Komentar

Rasanya ada yang kurang kalo tidak memposting tutorial yang satu ini

, gadget recent posts atau artikel terbaru sering dipasang di sidebar para blogger, hal ini agar memudahkan para pengunjung untuk mengetahui artikel terbaru di blog kita tanpa mereka harus mengunjungi homepage.

Caranya sangat mudah, seperti biasa :

1. Masuk ke Dashboard blogger >> Page Elements / Tata Letak >> Add Gadget

2. Pilih Feed, lalu di kotak isian masukkan : http://url-blog-anda/feeds/posts/default

3. Simpan, lihat hasilnya.

Secara default blogger hanya mengizinkan 5 artikel yang tampil di gadget recent posts tersebut. Salam Blogger.

selengkapnya » Membuat Recent Posts Blogger

Cara mudah membuat URL redirect di blogger

Posted by Kerah Ledrek 6 Komentar

Ada dua cara yang saya ketahui untuk redirect URL. Pertama dengan menggunakan kode HTML kedua dengan Script. Langsung saja, langkahnya sebagai berikut :

A. HTML Redirect :
1.Log in ke dashboard >> layout >> Edit HTML
2.Scroll ke bawah cari kode <head>
3.Tempatkan kode ini tepat di bawah kode <head>

<meta http-equiv="refresh" content="0;url=http://url-baru-anda.com"/>

Jadinya seperti ini :

<head>
<meta http-equiv="refresh" content="0;url=http://url-baru-anda.com"/>

4.Ganti http://url-baru-anda.com dengan URL yang anda inginkan.
5.Simpan Templates, selesai.
Cara ini bisa digunakan jika sobat ingin menampilkan sejenak halaman URL blog lama, mengapa ditampilkan dulu, karena di halaman tersebut kita bisa memasang teks notifikasi tertentu untuk pengujung contoh : " Halaman yang anda cari sedang di alihkan, mohon tunggu...." atau " Redirecting... Please wait....", dll.

B. Script Redirect :
1. Cari kode </head>
2. Tempatkan kode ini tepat di bawahnya.

<script>
window.location="http://url-baru-anda.com"
</script>

3. Ganti http://url-baru-anda.com dengan URL yang anda inginkan.
4. Simpan Templates, selesai.

Cara kedua ini bisa digunakan jika anda ingin browser meredirect langsung URL lama ke URL baru tanpa jeda halaman.

Tehnik redirect ini sangat berguna jika anda berganti domain lama ke domain baru agar ketika ada pengunjung yang masuk ke blog lama bisa dialihkan ke blog yang baru. Sebagai contoh ini URL redirect ke blog saya. Semoga bermanfa'at

**********

selengkapnya » Cara mudah membuat URL redirect di blogger

Cara mengalihkan domain lama ke domain baru di blogger

Posted by Kerah Ledrek Beri Komentar

Ada kalanya kita harus berganti alamat domain blog karena beberapa alasan. Perubahan domain yang dilakukan dengan tidak hati-hati hanya akan merugikan pemilik situs yang bersangkutan, karena untuk beberapa waktu search engine akan tetap merayapi alamat situs lama akan tetapi setelah halaman itu dibuka yang tampil adalah gambar seperti ini.

Berikut langkah pengalihan alamat atau domain yang benar.

Cara I [Redirect URL]:

Agar pengunjung yang datang ke blog lama kita tidak terlalu bingung dengan tampilan gambar di atas, buatlah sebuah blog baru di blogger. Tidak perlu diisi posting apa-apa. Atur pengalihan URL nya ke domain blog yang lama, kemudian redirect domain URL blog lama tersebut ke URL domain blog yang baru.

Cara meredirect nya silahkan baca disini.

Contoh redirect url yang udah ane buat disini.

Cara 2 [Customize Webmaster]

Walaupun bersifat jangka panjang, cara ini sangat penting agar Search Engine mengarahkan perayapan URL blog lama sobat ke URL dan domain sobat yang baru. Caranya sebagai berikut :

1. Setelah anda mengganti domain, masuklah ke Alat Webmaster Google.

2. Jangan hapus situs lama anda di situ, saya contohkan disini situs lama saya www.kerahledrek.asia dan situs baru saya www.kerahledrek.ml

3. Masuklah ke Domain Lama anda, klik icon Gear sebelah kanan atas tampilan webmaster dan pilih "Perubahan Alamat"

4. Dibawah tulisan " Beritahukan URL dari domain baru Anda " klik box "Pilih situs terverifikasi" kemudian pilih blog baru anda lalu tekan "kirim"

5. Setelah itu akan tampil pemberitahuan seperti ini :

6. Jika cara di atas sudah selesai maka kita tinggal menunggu sampai webmaster bekerja merayapi domain sobat yang baru. Sebagaimana diterangkan disana :

Durasi pengaruh
Pemberitahuan perubahan alamat Anda berlaku selama 180 hari, dan selama waktu tersebut indeks Google akan diperbarui sepenuhnya dengan informasi situs baru Anda. Setelah 180 hari, Anda dapat memperpanjang periode dengan mengirim perubahan alamat sekali lagi.

Semoga bermanfa'at

*********

selengkapnya » Cara mengalihkan domain lama ke domain baru di blogger

Tutorial CSS

Posted by Kerah Ledrek Beri Komentar

CSS atau Cascading Style Sheet merupakan serangkaian aturan untuk mengendalikan beberapa komponen dalam sebuah web dan bukan bahasa pemograman (Wikipedia).

Pada umumnya CSS dipakai untuk mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.

CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D.

Bagi sobat yang ingin belajar CSS silahkan download disini, sebelumnya saya ucapkan terima kasih kepada agan Rosihan Ari yang telah menyusun artikel ini.

Salam Blogger.

selengkapnya » Tutorial CSS

Mengubah Gambar dengan Base64

Posted by Kerah Ledrek Beri Komentar

Tempo hari saya menggunakan sebuah template yang agak unik karya seorang blogger, template-nya bernama Responsive HTML5 desain Kang Kapuk. Yang cukup unik adalah ketika ingin mengubah background template saya kebingungan

, karena dalam template itu tidak ada link yang mengarah ke gambar background, hanya ada serangkaian kode panjang yang entah apa artinya tersimpan tepat pada posisi CSS Gambar. Setelah saya coba confirm sama yang punya, beliau menjawab background templatenya itu menggunakan base64, tujuannya untuk lebih meringankan loading page blog kita. Karena saya masih tetap bingung dengan istilah itu, saya coba cari di Google dan ketemulah maksudnya. Ternyata sebuah gambar bisa dikonversi ke bentuk kode-kode tertentu (base64), akan tetapi tetap bisa dibaca oleh browser seperti yang saya gunakan pada saat posting ini dibuat.

Secara umum, pengetian Base64 adalah sejumlah skema pengkodean serupa yang mengkodekan data biner dan menerjemahkannya ke dalam representasi radix 64. (Wikipedia)

Langsung saja caranya :

Simpan Link atau Upload sebuah gambar ukuran max 1MB disini.
Setelah itu klik Generate Data URI, lalu kopas result URL-nya dan tempatkan pada posisi posting atau template yang sobat inginkan.

*********

selengkapnya » Mengubah Gambar dengan Base64

Membuat kotak pencarian pada menu navbar 2

Posted by Kerah Ledrek 2 Komentar

Sebelumnya saya membuat artikel serupa disini, perbedaannya adalah dalam proses pembuatan dan hasilnya saja. Proses yang ini lebih mudah dibuat dan loading page-nya lebih ringan serta akurat karena langsung men-load konten blog, bukan cache search engine seperti pada artikel sebelumnya.

Langsung saja prosesnya :
1. Pastikan sobat menghapus kode CSS kotak pencarian dari template sebelumnya jika ada, lalu copy CSS di bawah ini di atas kode ]]>

/* SEARCH BAR */
#searchbar {
width: 200px;
float: right;
margin-top: 3px;}
.searchform {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSqF-2fjZFqNu02urME2zI0TmWDRIxiUQFBzbQaQ6ukaCcoo4PGVlBAxeblS05ybsMahyRskdDRg6K3gpHl0E4oiTT4EEjiYrSjqr2uCDQmHTQMbuqf11CramAqctLdozNNRqP0eFcyr9m/s180/searchbar.png) no-repeat scroll center top;Width: 200px;font-size: 10px;padding: 0;margin: 6px 6px 4px 0px;position: relative; height:25px;}
.searchform input { font-size: 10px; position: absolute; }
.center .searchform { float:none; }
#morefoot .searchform{ float:left; }
.searchform .s{
margin:0;
border: none;
margin: 3px 2px 3px 30px;
margin: 2px 2px 3px 28px\9;
height: 14px;
width:140px;
color: #333;
overflow: hidden;}
.searchform .s:focus { outline: 0; border: none; }
.searchform .searchsubmit { display: none; }

2. Tempatkan kode HTML ini pada posisi menu navbar yang sobat inginkan.

<li id='searchbar'> <form action='/search/' class='searchform' method='get'> <input class='s' id='searchsubmit' name='q' onblur='if (this.value == "") {this.value = "Search";}' onfocus='if (this.value == "Search") {this.value = ""}' type='text' value='Search'/> <input class='searchsubmit' type='submit' value=''/> </form> </li>

Note : kode-kode di atas sudah saya cek valid HTML5.

selengkapnya » Membuat kotak pencarian pada menu navbar 2

Membuat meta tag blogger

Posted by Kerah Ledrek 6 Komentar

Setiap blog yang SEO friendly pasti memiliki meta-tag, karena meta tag sengaja dibuat agar mesin pencari mendatangi blog kita dengan keyword atau kata kunci tertentu (SEO). Oleh karena itu maka meta tag juga seharusnya korelatif dengan konten blog kita. Sebagai contoh blog ini diantaranya membahas beberapa hal yang berhubungan dengan blogging. Maka keyword pada meta tag blog juga disarankankan mengandung kata yang berhubungan dengan blogging juga.

Selain untuk mengatur bagaimana mesin pencari nanti mengarah ke blog kita, meta tag juga bisa kita gunakan untuk menampilkan judul atau tulisan tertentu pada tab browser. Caranya sebagai berikut :

Seperti biasa silahkan masuk ke Dashboard >> Setting >> Edit Template
Cari dan hapus semua kode yang terletak di antara <head> dan <b:skin><![CDATA[ lalu ganti dengan kode di bawah ini :

<meta charset='utf-8'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/> | DESKRIPSI BLOG SOBAT </title>
<b:else/>
<title><data:blog.pageName/> « <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESKRIPSI BLOG SOBAT' name='description'/>
<meta content='KEYWORD, BLOG, SOBAT, PISAHKAN, DENGAN, TANDA, KOMA, SEPERTI, INI' name='keywords'/>
<meta content='NAMA SOBAT ATAU JUDUL BLOG SOBAT' name='author'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<meta expr:content='data:blog.pageTitle + " - DESKRIPSI BLOG SOBAT"' name='description'/>
<meta expr:content='data:blog.pageTitle + ", KEYWORD, BLOG, SOBAT, PISAHKAN, DENGAN, TANDA, KOMA, SEPERTI, INI"' name='keywords'/>
<meta content='1 days' name='REVISIT-AFTER'/>
<b:else/>
<meta expr:content='data:blog.pageName + " - DESKRIPSI BLOG SOBAT"' name='description'/>
<meta expr:content='data:blog.pageName + ", NAMA ATAU JUDUL BLOG SOBAT, KEYWORD, BLOG, SOBAT, PISAHKAN, DENGAN, TANDA, KOMA, SEPERTI, INI"' name='keywords'/> </b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Hasilnya sebagai contoh saja, silahkan sobat kunjungi beranda blog ini lalu tekan Ctrl+U. Pada jendela baru akan terlihat keyword-keyword apa saja yang sudah saya buat untuk meta tag blog ini.

Note :

Jika sebelumnya sobat sudah punya kode meta content khusus seperti google site verification, google analytics atau kode-kode lain yang sengaja sobat buat untuk kepentingan tertentu, kode-kode tersebut dibuat back-up nya dulu dan silahkan tempatkan lagi pada posisi meta-tag yang diinginkan. Selamat mencoba.

selengkapnya » Membuat meta tag blogger

Menambahkan plugins komentar facebook di posting blogger

Posted by Kerah Ledrek 19 Komentar

Diantara sekian banyak pengunjung yang datang dan ingin berkomentar di blog kita sangat mungkin diantara mereka ada yang tidak memiliki Open ID. Tentu saja kita bisa memperbolehkan 'anonymous' akan tetapi cara ini sering mengundang spam. Sebagai alternatif kita bisa memasang kolom komentar untuk akun facebook, selain bisa lebih memfilter spam juga bisa lebih mempercantik tampilan blog kita.

Ada beberapa langkah yang bisa kita lakukan untuk menambahkan plugins komentar menggunakan akun facebook kita di postingan blogger, sebagian dari cara-cara tersebut malah membuat blog kita jadi tidak enak dipandang sebab posisinya tidak proporsional. Misalnya, kolom komentar plugins facebook tersebut berada di bawah kolom komentar blogger, praktis jadi ada 2 kolom komentar kosong yang terlihat di bawah postingan kita. Kasus seperti sebetulnya karena penempatan HTML nya saja yang kurang pas. Contoh yang saya gunakan adalah seperti ini :

Dibawah ini langkah-langkah membuatnya :

A. SETTING DI FACEBOOK :
Ketahui terlebih dahulu FACEBOOK_USER_ID dan APPLICATION_ID sobat di facebook, caranya :
1. FACEBOOK_USER_ID bisa dilihat di URL https://graph.facebook.com/usernameFBSobat
2. Untuk APPLICATION_ID sobat harus buat dulu aplikasinya di facebook, caranya :

Masuk ke sini.
Register as Developer >> Centang Box "I accept the dst....." Lanjutkan >> Dibawah "Which types of apps do you plan on building?" Centang Box "Aplikasi untuk halaman" klik Lanjutkan >> Done.
Buat Aplikasi Baru, isi data kurang lebih seperti ini :
Nama Aplikasi : Plugins Komentar Nama Anda
App Name Space : namaandadisatukanaja
App Category pilih : Aplikasi untuk halaman
Lanjutkan >> jika ada capcay isi saja >> lanjutkan.
Catat App ID sobat yang diberikan disana terlebih dahulu, lalu klik simpan perubahan :

Nah, sekarang sobat sudah mengetahui FACEBOOK_USER_ID dan APPLICATION_ID masing-masing.

B. SETTING DI BLOGGER.

Langsung saja langkahnya sebagai berikut, masuk ke Blogger >> Template >> Edit HTML dan masukkan kode-kode di bawah ini :

1. Meta Tag
Copykan kode ini di atas <b:skin><![CDATA[

<meta property="fb:admins" content="{FACEBOOK_USER_ID}"/>
<meta property="fb:app_id" content="{APPLICATION_ID}"/>

2. CSS
Tempatkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

/* komentar facebook */
.comments-page {}
#blogger-comments-page {display: none;}
.comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;}
.comments-tab-icon { height: 16px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

3. Javascript
Letakkan kode di bawah ini tepat di atas kode </head>

<script src='http://connect.facebook.net/id_ID/all.js#xfbml=1&appId=APPLICATION_ID'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='FACEBOOK_USER_ID' property='fb:admins'/>
<script type='text/javascript'> function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}</script>

4. HTML :
Cari kode:
<div class='comments' id='comments'>

Biasanya terdapat lebih dari satu kode di atas pada template blogger, jika sobat ingin agar plugin itu tampil di setiap halaman silahkan simpan kode HTML di bawah ini tepat di bawah kode-kode tersebut.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='4' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Catatan :

Nilai 500 di atas adalah lebar kolom komentar yang bisa sobat sesuaikan sendiri berdasarkan kebutuhan.
Ganti semua tulisan FACEBOOK_USER_ID dan APPLICATION_ID dengan User & App ID sobat sendiri.
Preview terlebih dahulu lalu save.

Sekarang di bawah postingan blog sobat akan terdapat kolom untuk pengunjung berkomentar menggunakan akun facebook mereka. Sedangkan sobat sendiri akan melihat Link "Pandangan Moderator" dan icon pengaturan komentar seperti pada contoh gambar blog saya di atas. Sebagai Moderator, sobat juga bisa mengatur komentar para facebooker di blog disini.
Regards.

selengkapnya » Menambahkan plugins komentar facebook di posting blogger

Mengatasi Error Ketika Edit Template Blogger

Posted by Kerah Ledrek 6 Komentar

Beberapa saat lalu saya menggonta-ganti template blog, akan tetapi entah kenapa tiba-tiba halaman CMS blogger mengalami crash, seperti gambar di bawah ini :

Setelah googling kesana-kemari ternyata masalahnya terletak pada sebuah script yang entah dari mana datangnya ada di template blog yang saya edit itu.

Langsung saja untuk mengatasi masalah tersebut, caranya :

1. Masuk ke Dashboard >> Template

2. Saat browser masih loading dan halaman edit template sudah tampil cepat klik tanda "x" di sudut address bar. Tujuannya agar CMS Blogger tidak sempat men-load script 'break iframe' yang membuat error tampilannya itu.

3. Klik edit HTML, apabila browser melakukan loading lagi cepat klik lagi tanda "x" tadi.

4. Jika halaman edit template sudah tampil klik expand template widget

5. Cari dan hapus kode di bawah ini.

<script language='JavaScript' type='text/javascript'> if (top.location != self.location) top.location.replace(self.location); </script>

Sekarang halaman edit template sobat sudah normal lagi. Dari berbagai sumber.

selengkapnya » Mengatasi Error Ketika Edit Template Blogger

Cara mengatur SEO Heading Tag h1 h2 h3 Blogger

Posted by Kerah Ledrek 86 Komentar

Artikel ini merupakan lanjutan dari artikel Struktur SEO heading tag h1 h2 h3 Blogger. Seperti yang kita ketahui pengaturan struktur tag heading pada template blogger merupakan salah satu dari sekian banyak faktor yang berpengaruh pada SEO. Akan tetapi mungkin karena saya sendiri masih belajar, dari banyak tutorial di internet setelah diterapkan ternyata tidak berfungsi sama sekali, hal ini karena struktur dan kode HTML template blogger itu variatif.

Blogwalking sana-sini tanya para master tidak ada tanggapan akhirnya setelah memaksakan diri mempelajari beberapa template alhamdulillah berhasil juga. Dan ini sudah saya uji coba pada beberapa template. Wah sorry sob prakatanya kelamaan, tapi sebelum mengedit template ane sarankan sebaiknya memahami editing CSS terlebih dahulu walaupun dasar karena modifikasi tag heading ini akan merubah ukuran font judul posting, header dan deskripsi blog. Jangan lupa back up dulu template sebelumnya untuk keamanan.

1. Langkah pertama, merubah tag head Judul Blog menjadi h1 pada homepage dan h3 pada halaman posting.

Cari kode :

<div class='titlewrapper'
dst..dst..
dst..
</div>

Ganti semua kode di atas dengan kode ini :

<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/></h1>
<b:else/>
<h3 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/></h3>
</b:if>
</div>

Pada beberapa template biasanya terdapat lebih dari 1 kode <div class='titlewrapper' , ganti semuanya dengan kode di atas!

2. Merubah tag head Deskripsi Blog menjadi h2 :
Cari kode :

<div class='descriptionwrapper'>
dst...dst..
dst...
</div>

Ganti menjadi :

<div class='descriptionwrapper'>
<h2 class='description'><span><data:description/></span></h2>
</div>

Seperti pada langkah no. 1 jika terdapat lebih dari 1 kode <div class='descriptionwrapper'> ganti semuanya dengan kode di atas!

3. Merubah tag head posting menjadi h3 pada homepage, dan menjadi h1 pada halaman posting (single post)

a. Merubah tag heading posting menjadi h3 pada homepage :
Cari kode :
<div class='post hentry uncustomized-post-template' , pada 4 atau 5 baris di bawah kode ini akan sobat temukan kode seperti ini :

<h? class='post-title entry-title' itemprop='name'>
dst...dst...dst...
dst...dst...
dst...
</h?>

Ganti tag headnya menjadi h3, kalau sudah h3 tidak perlu dirubah.

b. Merubah tag head posting menjadi h1 pada halaman posting (single post)
Cari kode merah tebal yang beberapa baris di atas dan di bawahnya diapit kode berwarna hijau seperti di bawah ini:

<b:includable id='post' var='post'>
kode bla...bla...bla...
kode bla...bla...bla...
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
kode bla...bla...bla...
kode bla...bla...bla...
</h3>
</b:if>
<div class='post-header'>

Ada 2 kode <a expr:name='data:post.id'/> pada template blogger, yang saya maksud itu biasanya ada pada posisi pertama. Setelah ketemu ganti semua kode yang berwarna merah dengan kode di bawah ini :

<a expr:name='data:post.id'/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

4. Preview lalu save template.

Penting :

Seperti yang sudah saya sebutkan di atas setelah berhasil dirubah maka ukuran font Judul Blog, Deskripsi, dan Judul Posting Blog sobat akan berubah. Sengaja saya tidak menyertakan editing CSS nya karena syntax CSS setiap template berbeda-beda, tapi sekedar chloe saja sobat bisa atur nilainya pada elemen h1{ h2{ dan h3{

Untuk menguji hasil perubahan tadi bisa sobat buka melalui browser mozilla firefox, buka blog sobat >> klik kanan >> Inspeksi Elemen. Untuk menguji tingkat SEO bisa di chkme.com. Atau juga sobat bisa menggunakan add-ons seperti Seoquake. Sebagai contoh sobat boleh cek URL homepage blog saya di beberapa situs SEO Checker. Semoga berhasil, semangat dan salam blogger.

selengkapnya » Cara mengatur SEO Heading Tag h1 h2 h3 Blogger

Struktur SEO heading tag h1 h2 h3 Blogger

Posted by Kerah Ledrek 9 Komentar

Rumor mengatakan pengaturan heading tag pada template kita sangat berpengaruh terhadap SEO. Walaupun baru katanya (karena saya tidak menemukan konten ini pada support google), tapi melihat banyaknya situs yang memberikan layanan uji SEO Score di internet saya jadi berfikir jangan-jangan hal itu ada benarnya

,

Menurut Joost de Valk a.k.a Yoast salah seorang webmaster dan designer template terkenal, yang pertama kali di index oleh Search Engine adalah tag h1, kemudian korelasi keyword-nya pada tag h2 dan h3 (optional), oleh karena itu menurutnya struktur heading yang bagus pada homepage adalah :

H1: Judul Blog
H2: Artikel terbaru atau tulisan apapun yang berisi keyword untuk blog kita
H3: Artikel terbaru, atau, jika sudah ditempatkan pada H2, bisa digunakan untuk posting lama tertentu misalnya artikel populer.
H4: related content sidebar
H5: sidebar, footer, dll

Kemudian struktur heading yang bagus untuk halaman posting (single post) adalah :

H1: Judul Artikel
H2's dan H3's: subheading terkait
H4: Judul Blog, dan widget terkait
H5: sama seperti di atas, sidebars dll.

Yoast bahkan mengatakan : " Each heading should contain valuable keywords, if not, it's a wasted heading." Yah terjemahkan saja sendiri ya

.

Sepintas saya sempat merasa ragu, karena saya lihat Yoast sendiri tidak menggunakan struktur ini pada websitenya, akan tetapi saya fikir demi pembelajaran tidak ada salahnya dicoba. Bagi sobat yang ingin mengatur heading tag templatenya silahkan ikuti panduannya di sini.
Semangat dan salam blogger.
Referrence : Here

selengkapnya » Struktur SEO heading tag h1 h2 h3 Blogger

Membuat select all box

Posted by Kerah Ledrek Beri Komentar

Kotak dengan fasilitas select all ini sangat berguna untuk menghemat ruang posting dan meminimalisir kesalahan ketika mengcopy paste kode dari blog kita.

Berikut caranya :
1. Masuk ke halaman Buat Entri Baru
2. Klik mode Edit HTML dan copykan kode ini :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 200px; HEIGHT: 90px" name="txt" rows="100" wrap="VIRTUAL" cols="55">GANTI TULISAN INI</textarea></p></div></form>

3. Ganti tulisan berwarna coklat muda di atas dengan teks yang sobat inginkan, bisa kode HTML, Javascript, CSS atau mau kode buntut terserah agan

4. Preview dulu lalu terbitkan. Jadinya seperti ini :

Salam blogger.

selengkapnya » Membuat select all box

Memasang script auto readmore blogger

Posted by Kerah Ledrek Beri Komentar

Ada banyak pilihan untuk membuat read more di blogger, ada yang menggunakan fitur snippet ada juga yang menggunakan script, kedua caranya memiliki kekurangan dan kelebihan masing-masing.

Membuat read more menggunakan snippet memang lebih ringan untuk loading page tetapi tampilannya bisa jadi kurang menarik, alternatifnya bisa menggunakan script yang dipasang pada template. Kendati lebih berat akan tetapi tampilannya lebih variatif, di bawah ini sudah saya sertakan script yang sudah dikompress sehingga relatif lebih ringan.

Penting !

Bagi yang sudah pernah menggunakan script auto read more lain harap kembalikan terlebih dahulu template widget ke default, skrinsutnya seperti di bawah ini :

Selanjutnya untuk membuat read more otomatis langkahnya sebagai berikut :

1. Masuk ke Dasboard >> Edit HTML >> Expand Widget Template

2. Tempatkan script di bawah ini tepat di atas kode </head> :

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 280;
summary_img = 250;
img_thumb_height = 70;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 2px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
</b:if>
</b:if>

3. Cari kode <data:post.body/> lalu ganti dengan kode di bawah ini :

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>baca selengkapnya » <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
</b:if>

Keterangan:

a. Kode di atas sudah ditambah kode untuk menyelesaikan masalah pada static page karena script auto read more.
b. Keterangan pada kode pertama yang disimpan di atas kode </head> tadi adalah:
var thumbnail_mode = "float"; (thumbnail berada di (float) kiri, jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (jumlah karakter yang akan ditampilkan pada posting tanpa gambar / thumbnail)
summary_img = 250; (jumlah karakter akan ditampilkan pada posting dengan gambar / thumbnail)
img_thumb_height = 120; (tinggi gambar dalam pixel)
img_thumb_width = 120; (lebar gambar dalam pixel)

4. Preview dulu lalu simpan. Selamat mencoba, semangat dan salam blogger

selengkapnya » Memasang script auto readmore blogger

Masalah halaman statis karena auto readmore

Posted by Kerah Ledrek Beri Komentar

Template yang memakai auto readmore memang terkesan rapi dan menarik, namun ada kalanya template tertentu yang menggunakan auto readmore mengalami error ketika membuka halaman statis. Untuk mengatasi masalah tersebut berikut langkah-langkahnya :

1. Masuk ke Dasboard >> Edit HTML >> Expand Widget Template
2.Cari kode readmore yang telah terpasang, kurang lebihnya seperti dibawah ini!

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>Read more...</a></span>
</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

3. Tambahkan kode berikut tepat diatas kode berwarna merah.

    <b:if cond='data:blog.pageType == "static_page"'>
    <data:post.body/>
    <b:else/>

4. Kemudian tambahkan kode penutup berikut tepat dibawah kode berwarna biru

</b:if>

5. Preview dulu, simpan template.

Note :
Pada beberapa template cara ini tidak berfungsi, mungkin kerusakannya parah

, jika hal seperti itu terjadi dan sobat sudah tanggung mencintai template itu, ada baiknya kembalikan template widget ke default terlebih dahulu lalu pasangi auto readmore sendiri

.

Source Article

selengkapnya » Masalah halaman statis karena auto readmore

Membuat breadcrumb blogger

Posted by Kerah Ledrek Beri Komentar

Breadcrumb berguna agar pembaca mengetahui mereka sedang membaca artikel kategori apa pada blog kita. Secara default sebenarnya blogger sudah menyediakan fasilitas label untuk keterangan ini, biasanya terletak di bawah posting (post-footer-line) tapi entah kenapa saya juga ikut-ikutan pengen pasang breadcumb, mungkin untuk pembelajaran saja.

Seperti biasa langsung saja caranya :
1.Login ke akun blogger >> Klik menu Rancangan >> Klik Edit HTML
2.Centang Expand Template Widget >> Cari kode ]]></b:skin>
3.Masukan kode CSS berikut tepat di atas kode ]]></b:skin>

.breadcrumbs{padding:5px 0px 5px 0;margin:0;font-size:95%;line-height:2em;border-bottom:1px dashed #e1e1e1}

4.Kemudian cari kode berikut <b:includable id='main' var='top'> agar lebih cepat gunakan Ctrl+F
5.Ganti kode tersebut dengan kode di bawah ini :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'>
<span>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> »
<span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'>
<a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof='v:Breadcrumb'>
<a expr:href='data:label.url' property='v:title' rel='v:url'>
<data:label.name/></a></span>
</b:if>
</b:loop>»
<span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
</span> » <span>Unlabelled</span> »
<span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> »
<span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> »
<span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> »
<span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Selamat mencoba, salam blogger

.
Dari berbagai sumber.

selengkapnya » Membuat breadcrumb blogger

Mengatur gadget blogger muncul di halaman tertentu

Posted by Kerah Ledrek Beri Komentar

Adakalanya kita ingin membatasi jumlah atau jenis gadget tertentu yang tampil baik itu di homepage ataupun di halaman posting. Sebagai contoh, tidak ada gunanya memasang gadget recent post atau artikel terbaru di home page, bukankah secara default homepage memang tempat artikel terbaru. Tapi jika gadget itu ditempatkan pada halaman posting justru sangat berguna karena pembaca bisa mengetahui artikel apa saja yang baru dibuat tanpa membuka homepage.

Nah itu cuma sekedar contoh saja. Untuk melakukan pengaturan dimana saja gadget itu tampil, sobat harus mengetahui dulu nama ID atau paling tidak nama judul gadget tersebut pada template, baru kemudian mengatur kodenya.

Langkahnya sebagai berikut :
1. Masuk ke akun Blogger.
2. Klik Rancangan > Edit HTML.
3. Klik Download Template Lengkap untuk mem-backup template.
4. Beri tanda centang pada Expand Template Widget.
5. Cari kode widget yang ingin ditampilkan hanya di homepage. Misalnya, untuk widget yang berjudul Recent Comments kode script nya ya kira-kira seperti ini (hanya contoh)

<b:widget id='HTML1' locked='false' title='recent comments' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

6. Kemudian tambahkan kode :
<b:if cond='data:blog.homepageUrl == data:blog.url'>
di bawah kode <b:includable id='main'>
dan kode </b:if> di atas kode </b:includable> sehingga hasil akhirnya menjadi seperti di bawah ini :

<b:widget id='HTML1' locked='false' title='recent comments' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

7. Preview dulu, simpan.

Note :
Cara di atas adalah jika ingin membatasi kemunculan gadget pada homepage saja, jika ingin mengatur pada halaman lain sobat tinggal mengganti kode halamannya saja. Berikut kodenya :
a. Jika ingin ditampilkan di halaman Posting saja :
<b:if cond='data:blog.pageType == "item"'>

b. Jika ingin Di tampilkan di Homepage atau index saja :
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
c. Jika ingin ditampilkan di Arsip page saja :
    <b:if cond='data:blog.pageType == "archive"'>
d. Jika ingin tampil pada URL tertentu :
    <b:if cond='data:blog.pageType == "URL-TERTENTU"'>
e. Jika ingin tampil pada Pages tertentu :
    <b:if cond='data:blog.pageType == "static_page"'>
f. Penting : Jangan Lupa untuk menutup parse tag yang sobat tambahkan tadi yaitu :
    </b:if> sebelum </includable>

Selamat mencoba, semangat dan salam blogger

selengkapnya » Mengatur gadget blogger muncul di halaman tertentu

Just Another Blogger

Menampilkan Gadget Di Halaman Tertentu Saja

Menghilangkan tombol tang obeng (quick edit)

Menggunakan label blogger sebagai navigasi blog

Gratis Template Blogger White Simple Fast

Membuat Recent Posts Blogger

Cara mudah membuat URL redirect di blogger

Cara mengalihkan domain lama ke domain baru di blogger

Tutorial CSS

Mengubah Gambar dengan Base64

Membuat kotak pencarian pada menu navbar 2

Membuat meta tag blogger

Menambahkan plugins komentar facebook di posting blogger

Mengatasi Error Ketika Edit Template Blogger

Cara mengatur SEO Heading Tag h1 h2 h3 Blogger

Struktur SEO heading tag h1 h2 h3 Blogger

Membuat select all box

Memasang script auto readmore blogger

Masalah halaman statis karena auto readmore

Membuat breadcrumb blogger

Mengatur gadget blogger muncul di halaman tertentu

Paling Populer

Arsip Blog

My Blogroll