Blog Tutorial: Maret 2011

Merubah Background Sidebar Dengan Warna Yang Berbeda-beda

Keuntungan cara ini adalah kita dapat membuat tampilan gadget yang unik, berbeda setiap gadget . Pada cara ini, ada 3 komponen gadget yang harus diketahui yaitu; Kotak Luar Gadget, Judul Gadget, Isi Gadget. Dari ketiga komponen tersebut, masing-masing dapat diberi background, apakah itu backround warna atau background gambar.

Langkah-langkahnya sebagai berikut;

Kenali terlebih dahulu ID gadget yang akan diubah. Caranya,

Login ke Blogger.
Pilih Rancangan.
Pilih Edit HTML
Jangan di centang Expand Template Widget biar tidak muncul kode-code yang bejibun..hehehe.

misal kita akan edit pada Gadget Follower, arahkan mouse pada kode HTML template Anda yang paling bawah, disitu akan tampak ID gadget Anda kira-kira seperti ini;

<b:widget id='HTML4' locked='false' title='Artikel Terkait Lainnya' type='HTML'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>

yang berwarna merah adalah ID gadget-nya.

Misalkan kita edit backgroun untuk Follower, langkah selanjutnya kita buat Kode CSS untuk memasang background gadget. Buatlah kode seperti berikut;

#Followers1 {
Background : #009933;
}

#Followers1 h2{
Background : #0000FF;
}

#Followers1 .widget-content{
Background : #FF0000;
}

Hijau Kode untuk Kotak Luar Gadget
Biru Kode untuk Judul Gadget
Merah Kode untuk Isi Gatget

Ini juga berlaku untuk semua gadget Anda tinggal mengganti ID Gadget.

Jika ingin menggunakan backgroud gambar, silahkan ganti kode warna dengan kode URL gambar, contoh penulisannya seperti di bawah ini:

#Followers1 {
Background : url(http://URLgambarAnda) no-repeat;
}

#Followers1 h2{
Background : url(http://URLgambarAnda) no-repeat;
}

#Followers1 .widget-content{
Background : url(http://URLgambarAnda) no-repeat;
}

Jika Anda sudah selesai membuat kodenya, kemudian tempatkan kode tersebut di atas kode ]]></b:skin>

Langkah Terakhir Klik Simpan Template. dan lihat hasilnya.

NB; Anda bisa berkreasi sesuai dengan keinginan Anda sendiri.

Membuat Artikel Terkait atau Related Post di Sidebar

Untuk membuat artikel terkait atau related posts syarat utamanya adalah postingan Anda harus mempunyai label, karena penampilan otomatis artikel yang berkaitan didasarkan pada label yang sama.

Langkah Cara Membuat Related Post di Sidebar, silahkan ikuti langkah-langkah berikut :

Login ke Blogger.
Pilih Rancangan.
Pilih Edit HTML
Beri tanda centang pada Expand Template Widget.

Letakkan kode berikut diatas </head>

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Cari kode berikut

<b:if cond='data:post.labels'>
  <data:postLabelsLabel/>
  <b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
  </b:loop>
  </b:if>

Ganti dengan kode berikut

<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Simpan template

Keterangan:

Pada yang berwarna biru max-result menunjukkan maksimal artikel terkait yang akan ditampilkan per label. Jadi bisa ditampilkan hanya 5, atau bisa juga hingga 15 jika setiap lebel postingan Anda lebih dari 15.

Penempatan Gadget
Sekarang beralihlah ke bagian Rancangan --> Elemen Laman. Pilih gadget yang akan ditambahkan. Klik Tambah Gadget. Pilih HTML/JavaScript.

Lalu masukkan kode berikut ini di gadget Anda.

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Agar tampilan related post tidak tampil di homepage dan pencarian label Anda harus menambah sedikit kode. caranya sebagai berikut;
Cari kira-kira seperti ini;

<b:widget id='HTML2' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Ganti dengan kode berikut;

<b:widget id='HTML2' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <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>

Warna merah adalah kode yang ditambahkan agar supaya artikel terkait tidak tampil di homepage/pencarian label.

Begitulah tutorial artikel terkait atau related posts di Sidebar. Ini akan membantu meningkatkan page view blog Anda. Semoga bermanfaat.

Membuat Menu Di Samping Judul Gadget

Ada beberapa cara untuk membuat menu di samping judul gadget diantaranya;

1. Cara Pertama;

Ini adalah cara yang paling sederhana yaitu dengan langsung menulis kode disamping judul gadget. Saat Anda menulis judul gadget tinggal tambahkan saja kode html link disampingnya, contohnya kodenya seperti berikut

<a href="http://linkanda.html">kategori</a>

ingat. di tag [ a ] tersebut tidak boleh ada tambahan tag lagi selain tag [ a ].

2. Cara kedua;
Masuk ke Edit Html > Centang Expand Template Widget
Cari kode widget Anda, contohnya seperti berikut

<b:widget id='HTML2' locked='false' title='Sponsor Link' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<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>

kode yang perlu ditambahkan seperti berikut;

<a href='http:/xxxxxx.com'>...</a>

untuk menambahkan kode seperti dibawah ini contohnya;

<b:widget id='HTML2' locked='false' title='Sponsor Link' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/> | <a href='http:/xxxxxx.com'>disini teksnya</a> | <a href='http:/wwwxxxxxx.com'>tambahan link</a> </h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Simpan Template Anda

Link Rata Kanan;
Agar link yang ditambahkan di samping judul gadget bisa rata kanan (judul gadget asli mepet kiri, dan link tambahan mepet kanan) caranya sebagai berikut
Tambahkan kode berikut ini di atas ]]></b:skin>

#linkrata kanan{
float:right;
}

Link yang Anda tambahkan di kanan kode judul gadget menjadi seperti ini:

<h2 class='title'><data:title/><div id='linkratakanan'><a href='http://alamatlink.com/'>namalink</a></div></h2>

Link dengan Gambar
Jika Anda ingin menggunakan icon, cukup Anda ganti kode link di kanan kode judul sehingga seperti ini

<h2 class='title'><data:title/><div id='linkratakanan'><a href='http://alamatlinktujuan.com'><img src='URLgambar'/></a></div></h2>

Selesai, Semoga bermanfaat

Membuat Atau Modifikasi Blockquote Blogger

blockquote berfungsi untuk mempertegas suatu kalimat yang dianggap penting dalam posting. Mungkin Anda pernah melihat variasi atau modifikasi blockquote yang ada di blog rekan lain, sebenarnya ada berbagai cara dalam memodifikasi blockquote, dalam hal ini kita akan bahas cara modifikasi dengan sedikit menambahkan kode CSS pada .post blockquote.

Secara default kode CSS blockquote pada blogger sebagai berikut;

.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

Dengan sedikit menambahkan kode perintah untuk gambar tanda petik, garis tepi dan lain sebagainya maka kode default blogger harus diganti seperti berikut;

.post blockquote {
text-align: justify;
margin:1em 20px; 
padding-left:30px; 
padding-right:5px; 
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR9lakT9TPRLRScieqOIAbbwrPkMwPrAjsZ4OHvT57FGaLhmJuelY8FkGfQuJ7YRehBOgzW4_uePZXLahV3jyS8WhCCwYRcLcopgq1zkgajWKGM6O0HGaAKwRM7Wy0q7TzxWQny3XqN9DE/s1600/qoute-icon.png") no-repeat 0 .0em; color:#666; border:1px dotted #ccc;
}

.post blockquote p {
text-align: justify;
margin:.75em 0; 
padding-right:5px; 
padding-left:5px; 
border:1px dotted #ccc; 
background:#F7F7F7;
}

Hasilnya sebagai berikut;

Seperti ini hasilnya blockquote yang berfungsi untuk mempertegas isi kalimat dalam posting yang diangap penting atau bisa juga untuk mempertegas posting kode HTML dalam blog.

Untuk menerapkan blockquote pada posting blog agar supaya dapat berfungsi, kita harus menambahkan kode sebagai berikut;

<blockquote><p> ..... </p></blockquote>

Jadi untuk contoh diatas penulisanya sebagai berikut;

<blockquote><p> Seperti ini hasilnya b yang berfungsi untuk mempertegas isi kalimat dalam posting yang diangap penting atau bisa juga untuk mempertegas posting kode HTML dalam blog. </p></blockquote>

Catatan :

Anda dapat mengganti latar belakang gambar dengan gambar Anda. Untuk border dan jarak tepi serta posisi teks, bisa Anda sesuaikan dengan template blog Anda.

Mengatur Jarak Form Komentar Dengan Link Navigasi (Newer/OlderPost))

Apabila jarak antara link navigasi posting lama dan posting baru dengan form komentar terlalu jauh Anda dapat memperpendek jarak dengan melakukan trik yang cukup sederhana.

Langkah-langkahnya sebagai berikut;

Login ke Blogger.
Pilih Rancangan.
Pilih Edit HTML
Beri tanda centang pada Expand Template Widget.
Cari kode yang seperti dibawah ini

</b:includable>
<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>

Atur ketinggian pada kode yang ditandai dengan warna merah, berkisar antara 250 sampai 300 jarak akan terlihat bagus, kemudian SIMPAN TEMPLATE dan lihat hasilnya, kalau langkah Anda sudah benar jarak akan berubah.

Horizontal Menu Navigasi

letakan diatas kode ]]></b:skin>

/*-- (Menu/Nav) --*/
#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:600px}
#nav-right{float:right; display:inline; width:100px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Arial,Helvetica,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

/*-- (Search) --*/
#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px 2px no-repeat; -moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right; height:25px; margin:0 0px 0 0; width:180px}
* html #search{margin-right:8px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}

Masih pada halaman Edit HTML kemudian cari kode <div id='outer-wrapper'><div id='wrap2'> biasanya kode ini terletak di bawah html tag <body> kemudian copy-paste semua kode dibawah ini, dan letakan kodenya dibawah kode warna hijau diatas.

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form expr:action='data:blog.homepageUrl + "search"' id='searchform' method='get' name='searchform'>
<b:if cond='data:title'/>
<div id='search'>
<input class='s' id='s' name='q' onblur='if (this.value == '') {this.value = 'Cari artikel disini';}' onfocus='if (this.value == 'Cari artikel disini') {this.value = '';}' type='text' value='Cari artikel disini'/>
<input id='searchsubmit' type='hidden' value='Search'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

sumber ; o-om (http://www.o-om.com/2008/07/horizontal-menu-navigasi.html)

Arsip Blog

Daftar isi»