| belajar blogger

Jumat, 10 Januari 2014

Kamis, 01 Juli 2010

About author atau author box atau kolom author biasanya sering kita temukan di blog berbasis Wordpress. Tutorial ini adalah bagaimana memasang author box di bawah postingan. Author box tidak ditampilkan di halaman utama blog. Sebagai contoh, di bawah postingan ini, tapi teksnya saya ganti.
Tertarik dengan hal ini? Ikuti saja langkahnya...

1. Masuk ke Dasbor > Rancangan > Edit HTML, jangan lupa centang "Expand template Widgets".
2. Simpan kode di bawah ini tepat diatas kode ]]></b:skin>

/***** Author Box ********************/

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}

.author-box p {
margin: 0;
padding: 0;
}

.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}

3. Cari kode <div class='post-footer-line post-footer-line-1'>, ganti dengan kode dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU5Ld5-pTGYPgv1lU25Xe5Fi0uYh4Exo4bVtSdLglwjBtSeAqWsXpknN9Dob-zLO76q9tdp5L8wSsz8nE27zKf7XO5u43krLbjbSwy8wpkhF4ny7SDY0BZ-odNfG8b3PoQKIPv70AisIE/s1600/myavatar.png' width='70'/><b>Tentang Penulis</b><br/>
Tulis sesuatu tentang diri anda!<br/></p>
</div>
</b:if>

4. Ganti teks yang berwarna merah dengan url dan keterangan anda.
5. Save.

Berhasil?

Menghilangkan Judul Pada Widget HTML/Javascript Blogger

Kang Ismet

Blogger Tutorial

Selasa, 22 Juni 2010

19 Komentar

Bermula dari komentar seorang rekan, yang lumayan panjang lebar, tentang Widget HTML/Javascript tidak bisa disimpan kecuali dengan Judul. Entah kenapa hal ini terjadi, kemungkinan ada bugs di blogger. Atau mungkin Blogger merubah pengaturan javascript, entahlah.
Setelah saya coba membuat widget HTML/Javascript dan text memang hal itu terjadi, widget tidak bisa disimpan kecuali dengan menggunakan judul/title. Ada peringatan "Harap perbaiki kesalahan pada form ini" dan "Bidang yang dipersyaratkan tidak boleh kosong".
Bagi rekan yang ingin menampilkan widget html/javascript tanpa menampilkan judul, saya akan memberikan solusi alternatif. (Sebenarnya bukan khusus widget HTM/Javascript saja, bisa untuk semua widget).

Langsung langkahnya aja sob:

Buat widget HTML/Javascript, tulis judul terserah anda. misalkan TEST.
Simpan.
Masuk ke Dasbor > Rancangan > Edit HTML. Centang Expand Template Widget.
Cari judul yang anda buat. Supaya lebih memudahkan pencarian (Ctrl+F) kemudian ketik judul.
Perhatikan kode di bawah ini, (yang berwarna biru, adalah judul widget)

</b:includable>
</b:widget>
<b:widget id='HTML3' locked='false' title='test' 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>

Stop dulu sob..... sekarang siap2 menghilangkan judul.., lebih tepat menyembunyikan.
1. Perhatikan kode yang berwarna merah.
2. Ganti dengan kode dibawah ini :

<h2 style='display:none'><data:title/></h2>

3. Simpan dan lihat hasilnya.

Pada preview di dasbor judul tetap ada, tapi di blog akan disembunyikan. Trik di atas hanya salahsatu cara saja, masih banyak cara yang lain. Kalau saya tulis semua takut kepanjangan...
Gimana hasilnya sob? udah coba?

UPDATE

Karena masih ada yang tampil, seperti komentar 'Kyutaroo'. Tips dibawah ini untuk menghilangkan dan bukan lagi menyembunyikan.

1. Perhatikan lagi kode berikut :

</b:includable>
</b:widget>
<b:widget id='HTML3' locked='false' title='test' 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>

2. Hapus kode yang berwarna merah.
3. Simpan.

So, gimana? masih tampil?

membuat Kotak Komentar Facebook untuk Blogger / Blogspot

Kang Ismet

Blogger Tutorial, Facebook

Sabtu, 30 Oktober 2010

12 Komentar

Facebook kini menjembatani para blogger dan web develover dengan membuat berbagai social plugins. Diantaranya adalah Kotak komentar facebook.

Akhir-akhir ini sering kita temui web yang menggunaka aplikasi ini, diantara keuntungannya adalah memberikan komentar yang lebih banyak, karena pengguna facebook lebih banyak tentunya dari blogger.
Diantara kemudahan yang diberikan, pengunjung tidak usah menulis web, email, dll. Mereka cukup login ke facebook dan memberikan komentar.

Dibawah ini adalah tutorial yang sangat mudah tentang cara membuat kolom/kotak komentar facebook untuk pengguna blogspot/blogger.
Namun harap di ingat, menggunakan komentar facebook akan menyembunyikan komentar yang telah ada di blog.

Langkah ke-1: Login ke dasbor anda, kemudian klik Pengaturan>Komentar, pilih sembunyikan.

Langkah ke-2: Kunjungi Halaman Facebook Develover, tulis Nama Situs, URL situs, dan Lokasi kemudian klik Buat Aplikasi

Copy ID Aplikasi ke notepad

Langkah ke-3: Kembali ke Blogger, klik Rancangan>Edit HTML, centang Expand Template Widget. Cari kode <data:post.body/> atau <div class=’post-header-line-1′/> dan paste kode dibawah ini, tepat setelah <data:post.body/> atau <div class=’post-header-line-1′/>.

<b:if cond='data:blog.pageType == "item"'>
<p align='left'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHLKC0NXDMtRPGXAzvzaSVU5tNdKytC4fLb1kARcb0xP45v_M1GFDu7LRRA3R-2Yqnproh99VuMZgu54qP1tWgYN1ZlMoTQITh_ZIOj-tzSiIZgrTxY-9B2gU94hQsgMhsVcxrhUN9LsJ9/s1600/comment.png'/></p>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '164624843561195', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/id_ID/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:comments/>
</b:if>

ganti ID Aplikasi (yang berwarna merah), dengan ID Aplikasi anda .

Contoh Komentar Facebook untuk Blogger

Menghilangkan Navbar Blogger Secara Permanen

Kang Ismet

Blogger Tutorial

Rabu, 19 Mei 2010

5 Komentar

Banyak tutorial yang diberikan oleh rekan blogger tentang cara menghilangkan navbar, sebetulnya itu hanya menyembunyikan dan tidak menghilangkan secara permanen, untuk tutorialnya lihat disini.

Apabila ingin menghilangkan navbar secara permanen, maka langkahnya adalah :

1. Masuk ke Dasbor > Tata Letak > Edit HTML
2. Temukan kode <body>
3. Simpan kode ini di atasnya.

<script type='text/javascript'> 
<![CDATA[ 
<!-- 
/*<body>*/ 
--> 
]]> 
</script>

4. Save template, dan akan muncul konfirmasi penghapusan widget.

Hal yang harus diperhatikan :

1. Tutorial diatas adalah menghapus navbar permanen.
2. Keuntungannya adalah lebih SEO Friendly, karena tidak ada iframe navbar
3. Kode Quick Edit pencil

atau obeng

akan hilang.

Bagaimana cara mengembalikan navbar?

Hapus kode di atas tadi, kemudian Save.

Mau mencoba?

Cara Menghilangkan Navbar (Navigation Bar) Blogger

Kang Ismet

Blogger Tutorial

Rabu, 19 Mei 2010

8 Komentar

Bar Navigasi atau Navigation Bar (Navbar) Blogger adalah untuk mempermudah navigasi di blogspot. Namun beberapa blogger kurang nyaman dengan tampilan Navbar tersebut.

Memang ada beberapa isu yang menyatakan hal ini melanggar aturan main / TOS (Terms of Services) Blogger. Tapi sejauh ini masih aman-aman saja, bahkan template-template baru hampir semuanya melakukan hal ini.

Sebetulnya kita tidak menghilangkan navbar, lebih tepatnya menyembunyikan navbar. Caranya :

1. Masuk ke Dasbor > Tata Letak > Edit HTML
2. Temukan kode :

]]></b:skin>

3. Simpan kode ini di atas nya:

#navbar-iframe { display: none !important; }

4. hasilnya seperti ini :

#navbar-iframe { display: none !important; }
]]></b:skin>

5. Save

Atau bisa juga dilakukan dengan cara dibawah ini:

1. Copy script dibawah ini, dan simpan di tag head :

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

Contoh seperti ini :

-----------------------------------------------
KangISMET.net
Author: Kang Ismet
Website: http://www.kangismet.net/
----------------------------------------------- */

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

2. Save.

Tutorial di atas sebenarnya adalah menyembunyikan Navbar.

Membuat Meta Description Tag Blogger / Blogspot

Kang Ismet

Blogger New Interface, Blogger Tutorial, SEO

Minggu, 06 Mei 2012

15 Komentar

Membuat Meta Description Tag Blogger / Blogspot. Dengan hadirnya tampilan baru Blogger (new interface) banyak kelebihan yang disisipkan oleh fihak Blogger. Diantara kelebihan nya yaitu optimasi SEO pada web utama dan postingan. Hal inilah yang akan coba saya jelaskan sekarang, yaitu membuat meta tag untuk deskripsi (meta description tag).

Meta Tag adalah serangkaian dari kode-kode HTML yang terdapat di halaman (page) sebuah website, dimana kode-kode tersebut mempunyai tujuan untuk memudahkan dan sekaligus mengundang robot mesin pencari (search engine) untuk datang ke website serta menganalisis konten-konten apa saja yang terdapat di website kita ketika spider atau bot atau crawler (nama-nama robot) mesin pencarian ini sedang mengindeks (crawling) website kita.

Cara Menambahkan Meta Tag Description

1. Login ke Blogger Anda.
2. Klik Panah Kecil -> Setelan -> Preferensi Penelusuran

3. Pada 'Meta Tag' klik Edit
5. Tulis deskripsi blog Anda. contoh deskripsi blog saya :

6. Simpan Perubahan

Ketika melakukan pencarian dengan kata kunci 'Blog Kang Ismet' maka hasil penelusuran Google seperti di bawah ini.

Semoga Membuat Meta Description Tag Blogger / Blogspot ini membantu optimisasi SEO Blog Anda

Membuat Kolom Komentar OfflinE

e

Kang Ismet

Komentar

Sabtu, 03 Agustus 2013

117 Komentar

Membuat Kolom Komentar Offline - Beberapa hari ini saya mempunyai kesibukan yang mengakibatkan saya jarang online dan tidak bisa membalas komentar sahabat blogger. Oleh karena itu, saya menon-aktifkan kolom komentar. Saya berfikir dari pada banyak komentar yang tidak terbalas, lebih baik sayanon aktifkan saja kolom komentar.

Rupanya ada sahabat yang tertarik dengan cara saya ini, dan menghubungi saya via email menanyakan bagaimana cara membuat kotak komentar menjadi offline. Bagi sahabat yang mengunjungi blog ini beberapa hari kebelakang, tentu faham bagaimana bentuknya. Bagi yang belum faham, silahkan kunjungi DEMO.

Sebenarnya ini hanya permainan HTML saja. Bagi sobat yang sudah faham, akan lebih mudah mencerna dan memodifikasi tampilan dengan mengedit CSSnya. Mungkin ada cara lain untuk membuat kolom komentar Offline, yang akan saya bagikan adalah versi saya sendiri.

Langkah 1 : Simpan Kode CSS

Simpan kode CSS ini di atas </b:skin>

/* Offline Mode
----------------------------------------------- */
#offline-mode{
background:#dfdede url(http://2.bp.blogspot.com/-R5Ku6QE3eJA/UcB0jk-CZwI/AAAAAAAAEeg/WYWE1iVssOo/s1600/offline-mode.png)no-repeat 3% 50%;padding:20px 20px 20px 175px;border:1px solid #c9c9c9;margin-bottom:10px}
#offline-mode h2{
font-size:220%;
text-transform:uppercase;
color:#fff;
text-shadow: -1px -1px  3px rgba(0,0,0,0.3);
}
#offline-mode p{
font-size: 12px;
color:#888;
line-height:1.8em;
margin-top:-15px;
}

silahkan edit yang diperlukan.

Langkah 2 : Simpan Kode HTML

Untuk menyimpan kode HTML, sobat cari kode <b:includable id='threaded-comment-form' var='post'> kemudian expand (klik panah sebelahnya) maka akan muncul kode seperti ini :

<div class='comment-form'>
...kode panjang....
</div>

tambahkan kode ini sesudahnya atau sebelum </b:includable>

<div id='offline-mode'>
<h2>
Offline mode</h2>
<p>Mohon maaf, form komentar sementara dinon-aktifkan karena ada sesuatu dan lain hal yang menyebabkan saya tidak bisa membalas komentar sobat. Silahkan kunjungi beberapa saat lagi apabila sobat ingin berkomentar .</p>
</div>

setelah itu, nonaktifkan sementara kolom komentar dengan menambahkan kode  pada kode sebelumnya. Maka hasil keseluruhan menjadi seperti ini :

<!-- <div class='comment-form'>
..............
  </div>-->
 <div id='offline-mode'>
<h2>
Offline mode</h2>
<p>Mohon maaf, form komentar sementara dinon-aktifkan karena ada sesuatu dan lain hal yang menyebabkan saya tidak bisa membalas komentar sobat. Silahkan kunjungi beberapa saat lagi apabila sobat ingin berkomentar .</p>
</div>

Simpan Template.

Apabila ingin mengaktifkan kembali kolom komentar, pindahkan tanda  pada HTML Offline-Mode, menjadi seperti ini :

<!--<div id='offline-mode'>
<h2>
Offline mode</h2>
<p>Mohon maaf, form komentar sementara dinon-aktifkan karena ada sesuatu dan lain hal yang menyebabkan saya tidak bisa membalas komentar sobat. Silahkan kunjungi beberapa saat lagi apabila sobat ingin berkomentar .</p>
</div>-->

Simpan kembali template....

Pages

belajar blogger

Labels

Blogger news

Blogroll

Jumat, 10 Januari 2014

Memasang Kolom About Author (dihalaman utama)

Menghilangkan Judul Pada Widget HTML/Javascript Blogger

membuat Kotak Komentar Facebook untuk Blogger / Blogspot

Menghilangkan Navbar Blogger Secara Permanen

Menghilangkan Navbar Blogger Secara Permanen

Cara Menghilangkan Navbar (Navigation Bar) Blogger

Membuat Meta Description Tag Blogger / Blogspot

Cara Menambahkan Meta Tag Description

Membuat Kolom Komentar OfflinE

e

Popular Posts

Blogger templates

Blog Archive