Selamat Datang Di AzhokA-RJnet Blog -- Jangan Lupa Follow Yah -- Ini adalah situs bookmark pribadi jadi harap maklum yah :)

23.6.11

CARA PASANG PESAN DIBAWAH POSAN KOMENTAR

Langkah-langkahnya :

1. Masuk ke account Blogger anda sendiri sehinggan masuk ke Dasbor.
2. Pilih Tata Letak/Edit HTML.
3. Jangan lupa beri tanda centang pada kotak kecil "Expand Template Widget"





4. Cari kode dibawah ini :

<p><data:blogCommentMessage/></p>

5. Kemudian taruh pesan anda di bawah kode diatas
6. Simpan Template

maka jadinya seperti gambar dibawah ini :

Source:http://www.cukuhnau.co.cc/2011/01/cara-pasang-pesan-dibawah-poskan.html
Read More : CARA PASANG PESAN DIBAWAH POSAN KOMENTAR

Cara Memasang pesan Terimakasih di bawah komentar



  1. Login blogger
  2. Rancangan, Edit Html, Centang menu  Expand Template Widget
  3. Cari kode ]]></b:skin>
  4. Dan Simpan kode CSS berikut diatasnya :


/*comment messages*/
.visitormessages {
text-align: right;
color: #F90;
padding-right: 3px;
font-style:italic;
}
.visitormessages a:link{
color: #F90;
font-style:italic;
}
.visitormessages a:hover{
color: #F90;
border-bottom: solid 1px
}
.visitormessages a:visited{
color: #F90;
}

5. Cari kode <data:comment.body/> dan simpan kode berikut tepat dibawahnya:
<div class='visitormessages'>
<b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
Terimakasih sudah berkomentar di &#187;
<span><a expr:href='data:post.href'><data:post.title/></a></span>
</div>

Catatan : Untuk kode CSS nya silahkan kawan-kawan sesuaikan dengan template kawan .
6. Simpan Template dan lihat hasilnya pada Artikel blog kawan yang ada komntarnya.. :)

Source:http://www.kangdadang.co.cc/2011/06/cara-memasang-pesan-terimakasih-di.html
Read More : Cara Memasang pesan Terimakasih di bawah komentar

22.6.11

Tutorial Pasang Widget Tombol Twitter, Facebook Share dan Facebook Like (3-in-1) Di Blog/Website

Saat ini situs-situs jejaring sosial terutama Facebook dan Twitter merupakan jenis situs online yang paling banyak diakses oleh pengguna internet di seluruh dunia, dengan salah satu layanan yang banyak digunakan adalah kemudahan bagi penggunanya untuk menyebarkan/membagikan aka share artikel online yang ada di berbagai website/blog.
Bagi pemilik atau pengelola website/blog, tentunya hal tersebut menjadi salah satu peluang untuk memperbesar tingkat kunjungan ke situsnya melalui Facebook dan Twitter ini, dengan memberikan kemudahan bagi pengunjung untuk share artikel yang ada di blog, salah satunya adalah dengan memasang tombol share Facebook dan Twitter.

Tombol Retweet Twitter, Facebook Share / Like (3-in-1)

Sebelumnya pernah disampaikan secara terpisah cara memasang tombol share Twitter dan Facebook, dan juga tombol Facebook Like. Kali ini masih soal cara memasang tombol Facebook dan Twitter, tapi sedikit berbeda dari cara sebelumnya itu. Pemasangan tombol share kali ini menggunakan layanan dari LinksAlpha, yang menyediakan tombol share yang menggabungkan ketiga tombol tersebut (Facebook Share, Facebook Like, dan Share Twitter) untuk ditampilkan menjadi satu baris saja, sehingga terlihat lebih simpel, kompak dan lebih rapi.

Sebenarnya, tombol bernama “1-Click Retweet/Share/Like” yang disediakan oleh LinksAlpha ini bisa anda pasang dengan menggunakan kode yang diberikan di situs tersebut. Tapi sayangnya, kode tombol yang disediakan hanya untuk halaman / URL statis saja (Website), jadi tidak bisa tampil secara otomatis membaca URL/alamat setiap artikel blog. Kecuali anda install plugin untuk blog WordPress (self-hosted), atau blog TypePad.
 
Untuk platform blog/situs lainnya, tenang saja, bisa diakali kok. Berikut ini cara pemasangannya.

1. Pasang di template Blogspot/Blogger
Silahkan login, masuk ke tab Design/Layout, lalu klik Edit Template, centang pilihan Expand Widget Templates. Cari kode <data:post.body/> di template anda, lalu di atas/di bawahnya pasang kode ini :
<b:if cond='data:blog.pageType != &quot;index&quot;'>
 <b:if cond='data:blog.pageType != &quot;archive&quot;'>
 <iframe id='websites_iframe' expr:src='&quot;http://www.linksalpha.com/social?link=&quot; + data:post.url + &quot;&quot;' frameborder='0' height='25px' scrolling='no' width='320px'/>
 </b:if>
</b:if>

Demo: lihat di sini.

2. Pasang di template WordPress.ORG (self hosted)
Anda bisa install plugin ini, atau bila anda seperti saya :) yang tidak suka install terlalu banyak plugins (karena semakin banyak plugins, semakin berat beban server hosting), silahkan pasang kode berikut ini. Silahkan login, masuk ke Appearance, lalu klik Editor (Themes editor). Silahkan buka template Single Post (single.php) atau Page Template (page.php). Carilah kode <?php the_content(); ?>, lalu di atas/di bawahnya tambahkan kode ini :

<iframe id="websites_iframe" src="http://www.linksalpha.com/social?link=<?php the_permalink() ?>" scrolling="no" frameborder="0" height="25px" width="320px"></iframe>

Demo: lihat di sini.

3. Pasang di Sidebar/Widget/Webpage (javascript)
Ini adalah kode generik untuk semua website (tentunya yang membolehkan pemasangan kode javascript) tanpa perlu edit template/theme, seperti pada demo pemasangan di artikel ini.

<script type="text/javascript">
document.write('<ifr'+'ame id="websites_iframe" src="http://www.linksalpha.com/social?link=' + escape(location.href) + '" scrolling="no" frameborder="0" height="25px" width="320px"></ifr'+'ame>');
</script>


Sumber:http://ilmukomputer-online.blogspot.com/2010/12/tutorial-pasang-tombol-twitter-facebook.html
Read More : Tutorial Pasang Widget Tombol Twitter, Facebook Share dan Facebook Like (3-in-1) Di Blog/Website

20.6.11

Cara Membuat Related Post/Artikel Terkait Memakai Scroll

Hallo Sobat informasi maya yang super malam ini kang salman mau  mengulas bagaimana cara mengubah tampilan related post atau bahasa kitanya artikel terkait di bawah posting yang memiliki fungsi scroll? Kita Ssebut saja dengan nama Related Post With Scroll yaitu related post yang ditampilkan dalam bentuk menu scroll. Contohnya seperti gambar di bawah ini :


Bagi anda yang ingin tau bagaimana cara membuat Artikel terkait seperti di atas silakan ikuti langkah-langkah di bawah inii :


1. Login Ke Blogger
2. Pilih Tata Letak
3. Klik Edit HTML
4. Klik kotak kecil  expand . .
5. Cari kode seperti ini <data:post.body/>

    (Biar cepat ketemu, tekan CTRL+F tar masukin aja <data:post.body> ke kotak yang tesedia)

6. Copy kode di bawah ini dan dan simpan di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid
#ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

7.  Cari kode ini : ]]></b:skin>

8.  Copy kode di bawah ini dan paste di atas kode ]]></b:skin>
.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

9. Save template

Selesai, dan lihat hasilnya . . .

Post By : http://asksalman19.blogspot.com
Refrensi : brugkembar.blogspot.com

Source: http://www.kucoba.com/2010/04/cara-memodifikasi-related-post-artikel.html
Read More : Cara Membuat Related Post/Artikel Terkait Memakai Scroll

Menciptakan Headline News di blogspot

Jika anda berkunjung ke blog atau situs laian mungkin anda pernah melihat melihat sebuah bar kecil di bawah, jika di lintasberita.com Headlinenya ada di atas. di dalamnya berisi berita-beruta terbaru dari blog berubah-rubah, sehingga membuatnya menarik perhatian. Nah itulah yang dimaksud dengan Headline News. Tips kali ini kang salman dapatkan dari teman saya Witto
Kang salman ingin membahas sedikit cara bagaimana cara memasang Headline News di blog  Pengertian headline news sendiri  adalah sebuah  widget pihak ke tiga yang dibuat dengan bantuan javascript yang berfungsi untuk menampilkan judul serta link artikel-artike terbaru dari update blog kita.

Nah cara untuk membuat nya pun sangat mudah anda cukup copy paste kode dibawah ini ke dalam elemen widget yang baru, Letakkan widget terserah anda.

1.  Login ke Blogger
2.  Pilih Edit Tata Letak
3.  Pilih Tambah Widget
4.  Pilih HTML/Javascrtpt
5.  Copy Kode di bawah ini :



<script type="text/javascript"> var hn_url_blog = "http://www.kucoba.com"; var hn_jumlah_post = 10; var hn_warna_latar = "#007880"; var hn_warna_garis = "#000000"; var hn_posisi = "top"; var hn_tampilkan_judul = false;var hn_backlink = false;</script><script src="http://copycat91.googlecode.com/svn/trunk/headlinenews.js"></script>
<small><a href="http://www.kucoba.com">make widget </a></span><small>

Catatan :
1.  Warna merah di atas ganti dengan alamat blog anda
2.  Warna hijau di atas adalah warna latar dari widget, b
3.  Wana Biru adalah untuk warna garis yang akan muncul di widget,
4.  Warna orange di atas adalah untuk posisi widget yang akan di tampilakan, bottom = bawah, top=atas dll

Catatan tambahan :
  • hn_url_blog = URL blog anda (ganti dengan url blog anda)
  • hn_jumlah-post = jumlah judul artikel yang di tampilkan
  • hn_warna_latar = kode warna untuk latar belakang headline news
  • hn_warna-garis = kode warna garis bingkai
  • hn-posisi = menentukan posisi letak headline news

6.  Setelah selesai, simpan dan lihat hasilnya.
Selamat mencoba.........

Sumber : http://www.kucoba.com/2010/04/membuat-headline-news-mirip.html
Read More : Menciptakan Headline News di blogspot

Pasang Widget Lintas Berita di Blog


Hampir semua blogger menggunakan fasilitas lintas berita sebagai media untuk promosi blog atau istilah kasarnya menjadi benalu di lintas berita, dengan total ribuan  halaman/pages yang terindex di google. Dengan begitu blog kita jadi ikut terkenal dan setidaknya mendapat  cipratan traffic dari lintas berita. Untuk mempermudah dalam submit berita atau artikel blog, widget lintas berita ini mungkin bisa menjadi alternatif.

image

Cara pasangnya sangat mudah, coba perhatikan langkah-langkahnya berikut ini.

  • Pada Edit HTML, silahkan klik Expand Template Widget.
  • Letakkan kode css berikut ini diatas kode ]]></b:skin>
    #lintas-berita {
    background:#ECE0F8;
    border:1px solid #cccdcd;
    margin:15px 0px 10px 0px;
    padding:10px;
    color:#000;
    font-weight:normal;
    }

    .lintaskiri {
    float:left;
    margin:0px 15px 0px 0px;
    width:380px;
    }

    .lintaskanan {
    text-align:center;
    }
  • Kemudian letakkan kode berikut setelah kode <data:post.body/> atau <p><data:post.body/></p>
    <div class='clearfix' id='lintas-berita'>
    <div class='lintaskiri'>
    Jika menurut sobat artikel ini bermanfaat, silahkan vote ke <strong>Lintas Berita</strong> agar artikel ini bisa di baca oleh orang lain.
    </div>
    <div class='lintaskanan'>
    <script type='text/javascript'>lb_skin = &#39;mode2&#39;; </script>
    <script src='http://www.lintasberita.com/widget_vote/lintasberita.js' type='text/javascript'/>
    <noscript>Powered by www.lintasberita.com visit <a href='http://www.lintasberita.com'>Lintas Berita</a></noscript>
    </div>
    </div>
  • Simpan Template.

Perhatikan kode css yang berwarna Biru, kode tersebut adalah lebar untuk widget sebelah kiri (widget untuk tulisan) harap disesuaikan dengan lebar template. Jika widget lintas berita muncul pada halaman depan blog, maka tambahkan kode

<b:if cond='data:blog.pageType == &quot;item&quot;'>
diantara kode yang berwarna hijau dan tutup dengan kode
</b:if>


Semoga berhasil.

Sumber :http://miscah.blogspot.com/2010/05/pasang-widget-listas-berita-di-blog.html
Read More : Pasang Widget Lintas Berita di Blog

19.6.11

Cara Membuat/Pasang Emoticon Kaskus di Komentar Blog

Pasang Emoticon Kaskus di Kotak Komentar Blog Menjadi alternatif lain untuk menarik pengunjung blog kita agar mendapatkan banyak komentar, begitulah kira-kira menurut aritutorial. karena blog ini masih sepi dan tidak banyak dapat komentar dari visitor akhirnya admin blog seo blogger ini mencoba pasang emoticon kaskus di form komentar, siapa tau setelah dipasang mendapatkan banyak komentar dari sobat-sobat blogger nyasar di blog ini. baiklah langsung saja kita aplikasikan cara pasang emoticon kaskus di kotak komentar

1. Buka LAYOUT >> EDIT HTML >> Klik Expand Widget Template
2. Lalu cari kode class='comment-body'
Pada langkah nomer 2 liat tagnya apakah memakai DIV atau memakai DD, kalau DIV, ganti aja jadi DD, jangan lupa tag penutupnya juga ganti jadi DD. kalau udah menggunakan DD gak perlu diutak atik, langsung aja kelangkah nomer 3 berikut ini
3. Lalu cari kode <p class='comment-footer'> dan tambahkan kode berikut tepat dibawahnya.


<b><img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_sundul.gif' width='40'/>
:a:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/s_big_cendol.gif' width='40'/>
:b:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_shakehand2.gif' width='40'/>
:c:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_ngakak.gif' width='40'/>
:d:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_pertamax.gif' width='40'/>
:e:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_mewek.gif' width='40'/>
:f:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_siul.gif' width='40'/>
:g:
<br/><img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_nosara.gif' width='40'/>
:h:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_takut.gif' width='40'/>
:i:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_tkp.gif' width='40'/>
:j:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_marah.gif' width='40'/>
:k:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_I-Luv-Indonesia.gif' width='40'/>
:l:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_hoax.gif' width='40'/>
:m:
<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_berduka.gif' width='40'/>
:n:
</b>


4. Terkahir cari Kode </body> lalu tambahkan kode berikut tepat diatasnya

<script type='text/javascript'>
//<![CDATA[
a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-body') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_sundul.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/s_big_cendol.gif' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_shakehand2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_ngakak.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_pertamax.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_mewek.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_siul.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_nosara.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_takut.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_tkp.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_marah.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_I-Luv-Indonesia.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_hoax.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_berduka.gif' alt='' width='40' class='smiley'/>");
b.item(i).innerHTML = _str;
}
}
}

a = document.getElementById('comments');
if(a) {
c = a.getElementsByTagName("DD");
for(i=0; i < c.length; i++) {
if (c.item(i).getAttribute('CLASS') == 'comment-body-author') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_sundul.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/s_big_cendol.gif' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_shakehand2.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_ngakak.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_pertamax.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_mewek.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_siul.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_nosara.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_takut.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_tkp.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_marah.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_I-Luv-Indonesia.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_hoax.gif' alt='' width='40' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i939.photobucket.com/albums/ad239/saifulanwar_album/kaskus%20emoticon/th_berduka.gif' alt='' width='40' class='smiley'/>");

c.item(i).innerHTML = _str;
}
}
}
//]]>
</script>



5. Terakhir Jangan lupa save template sobat blogger. dan lihat hasilnya, kalau berhasil tolong komentarnya dunk :)

Sumber :http://www.aritutorial.co.cc/2011/04/pasang-emoticon-kaskus-di-komentar-blog.html
Read More : Cara Membuat/Pasang Emoticon Kaskus di Komentar Blog

Cara Membuat Reply Komentar Dengan Gambar


Membuat reply komentar di blog anda sangat perlu. Karena akan memudahkan komentator terutama anda sebagai pemilik blog untuk menjawab komentar-komentar yang muncul di artikel anda. Reply komentar ini juga berfungsi untuk menjawab komentar secara otomatis sehingga tidak perlu repot menuliskan nama si pemberi komentar terlebih dahulu jika ingin merespon komentarnya itu. Nah lihat gambar berikut di bawah ini untuk lebih jelasnya:

Reply Komentar

Bagaimana? Jika berminat untuk membuat Membuat Reply Komentar silahkan ikuti cara berikut di bawah ini :

1. Login ke akun blogger sobat.
2. Klik menu rancangan, kemudian pilih tab edit HTML.
3. Centang expand template widget.
4. Cari kode seperti di bawah ini:

<b:include data='comment' name='commentDeleteIcon'/> 

5. Jika sudah ketemu, maka copy paste-kan kode di bawah ini persis berada dibawahnya:

<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Blog ID anda&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img alt='Reply To This Comment' src='Url Image Reply Anda'/></a>

Blog ID anda → Silahkan ganti dengan Blog ID (nomor id blog) anda.
Url Image Reply Anda → Silahkan ganti dengan Url gambar reply anda.

6. Klik Simpan Template.

Jika sobat belum mempunyai Url Image Reply, silahkan gunakan Url gambar di bawah ini:

Cara Membuat Reply Comment
Cara Membuat Reply Comment
Cara Membuat Reply Comment

Catatan: Bagi anda yang kesulitan untuk mencari blog ID silahkan pergi ke menu rancangan > edit HTML. Lihat ID Blog anda, atau lebih jelasnya lihat gambar berikut:
Reply Komentar
Selamat Mencoba

Sumber :http://daw-xp.blogspot.com/2011/05/cara-membuat-reply-komentar.html
Read More : Cara Membuat Reply Komentar Dengan Gambar

16.6.11

Membuat Menu Horizontal Dengan Fitur Drop Down Support All Browser

Screenshot :



Untuk Langkah-langkah-nya :
Masuk ke Dasbor
Rancangan
Edit HTML
Beri tanda centang Expand Widget Templates
Copy kode dibawah ini dan pastekan di atas kode ]]></b:skin>

.jqueryslidemenu{
font: bold 12px Trebuchet MS; background: #414141; width: 100%;}


.jqueryslidemenu ul{
margin: 0; padding: 0; list-style-type: none;}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative; display: inline; float: left;}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #151515;
color: #2d2b2b;
text-decoration: none;}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;}

.jqueryslidemenu ul li a:hover{
background: #DF0101; /*tab link background during hover state*/
color: white;}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0; display: block; visibility: hidden;}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item; float: none;}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{top: 0;}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;color: black;}

/* CSS classes applied to down and right arrow images */

.downarrowclass{
position: absolute; top: 12px; right: 7px;}

.rightarrowclass{
position: absolute; top: 6px; right: 5px;}

Copy kode berikut dan pastekan di atas kode </head>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://mastergomaster.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src=' http://emoticmastergomaster.googlecode.com/files/jquery_slide.js ' type='text/javascript'/>

Copy kode di bawah ini kemudian pastekan di atas atau di bawah kode <body>
atau Tambah Gadget => Edit HTML


<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu1</a></li>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
<li><a href='#'>Menu4</a>
<ul>
<li><a href='#'>Sub Menu4</a></li>
<li><a href='#'> Sub Menu4</a></li>
<li><a href='#'> Sub Menu4</a></li>
</ul>
</li>
<li><a href='#'>Menu5</a>
<ul>
<li><a href='#'>Sub Menu5</a></li>
<li><a href='#'>Sub Menu5</a>
<ul>
<li><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a>
<ul>
<li><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a></li>
<li><a href='#'>4</a></li>
</ul>
</li>
<li><a href='#'>4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Menu6</a></li>
<li><a href='#'>Menu7</a></li>
<li><a href='#'>Menu8</a></li>
<li><a href='#'>Menu9</a></li>
<li><a href='#'>Menu10</a></li>
<li><a href='#'>Menu11</a></li>
</ul>
<br style="clear: left" />
</div>

Gantilah kata/kode yang harus diganti
Langkah terakhir adalah menekan tombol save template.




Sumber : zy-web.blogspot.com/2011/03/membuat-menu-horizontal-with-drop-down.html
Read More : Membuat Menu Horizontal Dengan Fitur Drop Down Support All Browser

14.6.11

Cara Membuat Category Cloud Animasi Berputar

Cara Membuat Category Cloud Animasi Berputar 


Langkah-langkah pemasangan~nya :
  1. Masuk Ke Dasbor Blogger
  2. Rancangan
  3. Edit HTML
  4. Beri tanda centang pada Expand Template Widget
  5. Copy Code berikut :
<b:widget id='Label50' locked='false' title='Category' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://h1.ripway.com/ozyw42/tagcloudcumulus-ozy.js' type='text/javascript'/>
<div id='flashcontent'/>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://www.fileden.com/files/2009/11/17/2654961//DADorichalcos.swf&quot;, &quot;tagcloud&quot;, &quot;185&quot;, &quot;185&quot;, &quot;7&quot;, &quot;#000000&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x80ff00&quot;);
so.addVariable(&quot;hicolor&quot;, &quot;0xFFFFFF&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;125&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
     4. Paste~kan kode tadi dibawah kode :
<b:section class='sidebar' id='sidebar' preferred='yes'>

Fokus ajha di warna biru                              

     5. Save Template

Keterangan HTML :
185          = Lebar Widget dalam px
185          = Tinggi Widget dalam px
#000000  = Warna Background (Hitam)
0x80ff00  = Warna Huruf
12            = Ukuran Font
0xFFFFFF  = Warna Link

Sumber : http://ozy-web.blogspot.com/2011/05/cara-membuat-category-cloud-animasi.html
Read More : Cara Membuat Category Cloud Animasi Berputar

13.6.11

Cara Memasang Widget Bertukar Link Secara Otomatis


Setelah memasang widget bertukar link secara otomatis, saya ingin berbagi mengenai cara pemasangan widget mister linky’s. Cara pemasangannya cukup simple. Silahkan disimak bro…
1. Silahkan menuju link mister linky’s
2. Lakukan register dengan mengklik “register”
tukar link register
3. Isi form register secara lengkap
mister linky's registrasi
4. Copy code confirm yang di kirim ke email anda, kemudian klik “confirm”
daftar tukar link
5. Registrasi berhasil di tandai dengan ” Your registration has been confirmed”, kemudian isi user id dan password, lalu klik “login”
tukar link otomatis
6. Setelah login complet.
cara tukar link
7. Pilih ” HTML Only”, Kemudian pilih “original Auto-linkies” dan pilih Friday’s Feast di tombol drop down. Jangan lupa klik ” generate now”
cara tukar link otomatis dengan mister linky's
8. Kemudian muncul kode HTML, lalu copy dan paste di blog anda.
widget tukar link otomatis

9. Hasilnya dapat anda lihat di sini.
Semoga bermanfaat.

SUMBER : http://intuisiblog.com/2010/07/cara-memasang-widget-bertukar-link-secara-otomatis/
Read More : Cara Memasang Widget Bertukar Link Secara Otomatis

jQuery Multi Level Menu Horizontal


jQuery Memang tak ada habis-habis nya membuat tampilan Blog menjadi lebih bagus dan tidak membosankan. ok kali ini saya ingin membahas tentang jQuery Multi Level Menu Horizontal.ok kita langsung ke cara membuatnya aja deh..!! gk usah basa-basi lagi..!! ok let's go!! to TKP


DEMO


langkah pertama yaitu masuk pada bagian Design lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>


<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>
Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>
.jqueryslidemenu{font: bold 13px Verdana;background: #800000;width:100%;float:left}
.jqueryslidemenu ul{margin: 0;padding: 0;list-style-type: none;}
/*Top level list items*/.jqueryslidemenu ul li{position: relative;display: inline;float: left;}
/*Top level menu link items style*/.jqueryslidemenu ul li a{display: block;background: #800000; /*background of tabs (default state)*/color: white;padding: 8px 10px;border-right: 1px solid #778;text-decoration: none;}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/display: inline-block;}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{color: white;}
.jqueryslidemenu ul li a:hover{background:#B30000; /*tab link background during hover state*/color: white;}
/*1st sub level menu*/.jqueryslidemenu ul li ul{position: absolute;left: 0;display: block;visibility: hidden;background:#B30000;}
/*Sub level menu list items (undo style from Top level List Items)*/.jqueryslidemenu ul li ul li{display: list-item;float: none;}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */.jqueryslidemenu ul li ul li ul{top: 0;}
/* Sub level menu links style */.jqueryslidemenu ul li ul li a{font: normal 13px Verdana;width: 160px; /*width of sub menus*/padding: 5px;margin: 0;border-top-width: 0;border-bottom: 1px solid gray;}
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/background: #eff9ff;color: black;}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{position: absolute;top: 12px;right: 7px;}
.rightarrowclass{position: absolute;top: 6px;right: 5px;}#footheader {width: 100%;float:left;margin:0 0 0;padding:0 0 0;position:relative;}
Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.

Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah ini

<div id='header-wrapper'> 
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NSX Blog (Header)' type='Header'/>
</b:section>
</div> 

Perhatikan saja code yang berwarna biru karena code yang berwarna hitam diatas berbeda-beda setiap template
lalu taruh code dibawah ini dibawah code yang diatas tadi
<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>

</div>
 
Kalo sudah klik SIMPAN TEMPLATE


Sekarang kita ke menu Page Elements
nahh.. nanti ada kolom Gadget baru dibawah header, klik aja  Add A Gadget abis itu pilih HTML/Javascript dan masukkan kode dibawah ini
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://nsxcrew.blogspot.com">NSX Blog</a></li>
</ul>
<br style="clear: left" />
</div>
Nah code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah klik SIMPAN
Nah semoga tutorial ini bisa bermanfaat bagi Anda dan silahkan tanyakan pada saya lewat komentar jika ada pertanyaan. 
Read More : jQuery Multi Level Menu Horizontal

Meta tag blogger terbaik ala Kolom Tutorial


Sebenarnya Meta tag blogger yang akan kang Rohman terangkan bukanlah meta tag blogger terbaik karena mungkin saja ada meta tag blogger lainnya yang lebih baik dari ini, namun agar sedikit menarik perhatian, judulnya dibuat terbaca bombastis Peace Sign.
Banyak orang mengatakan bahwa memasang meta tag adalah teknik SEO yang telah kuno dan tidak perlu dilakukan lagi. Mungkin itu benar adanya, tapi mungkin juga tidak. Agar tidak simpang siur, mending kita lihat fakta di lapangan.
Disini kang Rohman menuliskan keyword Blogspot Tutorial di google.com. Berikut screen-shot yang di dapat:
blogspot-tutorial
Hasilnya, blog kang Rohman yang berbahsa inggris berada pada urutan pertama (pada saat artikel ini ditulis). Yang ditunjukan pada hasil pencarian tersebut adalah Judul Blog dan deskripsi blog yang tentunya di pasang dengan meta tag deskripsi. Ini memberikan fakta bahwa pemasangan meta tag masih tetap diperlukan sebagai salah satu penunjang dalam SEO.
Menurut keterangan para pakar SEO yang pernah kang Rohman baca, deskripsi blog ataupun keyword yang baik adalah setiap halaman harus berbeda, karena apabila halaman satu dan yang lainnya bedeskripsi sama, maka akan dianggap sebagai duplikat deskripsi, dan ini konon sangat tidak disukai oleh search Engine, sebut saja Google.
Berangkat dari hal tersebut, kang Rohman mencoba membuat meta tag deskripsi blogger serta keyword agar bisa berbeda pada setiap halaman atau istilah kerennya Dynamic Blogger Meta tag.
Berikut adalah kode dasar Dynamic Blogger Meta tag :

<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<meta expr:content='data:blog.pageTitle + &quot; - deskripsi&quot;' name='description'/> 
<meta expr:content='data:blog.pageTitle + &quot;, keywords&quot;' name='keywords'/> 
<b:else/> 
<meta expr:content='data:blog.pageName + &quot; - deskripsi&quot;' name='description'/> 
<meta expr:content='data:blog.pageName + &quot;, keywords&quot;' name='keywords'/> </b:if>

Contoh nyata penerapan kode tersebut pada blog kang Rohman:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle + &quot; - panduan praktis membuat blog di blogspot&quot;' name='description'/>
<meta expr:content='data:blog.pageTitle + &quot;, blog tutorial,blog template,blog spot,blogspot template,blog gratis,tutorial css,magazine template,panduan membuat blog,free download software,magazine template blogger,tutorial blogspot,blog template free&quot;' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - panduan praktis membuat blog di blogspot&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, blog tutorial,blog template,blog spot,blogspot template,blog gratis,tutorial css,magazine template,panduan membuat blog,free download software,magazine template blogger,tutorial blogspot,blog template free&quot;' name='keywords'/>
</b:if>

Teknik yang dipakai adalah jika dalam kondisi Home page, untuk deskripsi adalah Judul Blog ditambah dengan deskripsi yang terpasang, untuk keyword adalah Judul Blog di tambah dengan keywords yang terpasang, misal :

Deskripsi : Tutorial blog - panduan praktis membuat blog di blogspot
Keywords: Tutorial blog, blog tutorial,blog template,blog spot,blogspot template,blog gratis,tutorial css,magazine template,panduan membuat blog,free download software,magazine template blogger,tutorial blogspot,blog template free

Sedangkan apabila sedang berada pada single post atau halaman posting, deskrisi yang digunakan adalah judul posting di tambah deskripsi yang terpasang, untuk keyword adalah judul posting di tambah keywords yang terpasang.
Misalkan apabila sedang berada pada halaman posting yang berjudul Fresh Revolution Premium template , maka deskripsi dan keywords yang tercipta adalah seperti berikut :

Deskripsi : Fresh Revolution Premium template - panduan praktis membuat blog di blogspot
Keywords: Fresh Revolution Premium template, blog tutorial,blog template,blog spot,blogspot template,blog gratis,tutorial css,magazine template,panduan membuat blog,free download software,magazine template blogger,tutorial blogspot,blog template free

Ingat bahwa setiap judul posting pastinya akan berbeda antara yang satu dengan yang lainnya, sehingga hasil meta deskripsi pun akan menciptakan deskripsi yang berbeda pula secara otomatis., dan inilah kenapa meta tag ini disebut dengan Dynamic Blogger Meta tag alias Meta tag blogger dinamis Cool
Cara pasangnya gimana? aih ko masih nanya cara pasangnya sih Hee hee
Jika anda ingin menggunakan teknik ini, anda tentunya harus menghapus terlebih dahulu meta tag deskripsi atau meta tag keyword yang telah terpasang sebelumnya di blog anda agar tidak terjadi duplikasi.
Berikut langka-langkah pemasangan Dynamic Blogger Meta tag.

  1. Login ke blogger dengan ID anda.
  2. Klik Rancangan.
  3. Klik tab Edit HTML.
  4. Biasakan untuk melakukan backup, klik pada tulisan Download Template Lengkap.
  5. Agar lebih mudah, cari kode berikut : <b:skin><![CDATA[
  6. Copy paste kode berikut persis diatasnya kode yang tadi :
    <b:if cond='data:blog.pageType != &quot;item&quot;'> 
    <meta expr:content='data:blog.pageTitle + &quot; - deskripsi&quot;' name='description'/> 
    <meta expr:content='data:blog.pageTitle + &quot;, keywords&quot;' name='keywords'/> 
    <b:else/> 
    <meta expr:content='data:blog.pageName + &quot; - deskripsi&quot;' name='description'/> 
    <meta expr:content='data:blog.pageName + &quot;, keywords&quot;' name='keywords'/> </b:if>

  7. Ingat, ganti kata deskripsi dengan deskripsi blog anda sendiri, dan kata keywords dengan keyword atau kata kunci blog anda tentunya.
  8. Klik tombol SIMPAN TEMPLATE.
  9. Selesai.
Apakah teknik ini sudah di uji coba sebelumnya? Jawabannya sudah, yaitu blog ini dan blog kang Rohman yang berbahasa inggris selama satu bulan lebih, hasilnya lumayan ada peningkatan jumlah kunjungan.
Namun ingat, teknik diatas hanyalah salah satu dari sekian banyak faktor yang menunjang SEO. Jadi jangan terlalu berharap apabila memasang teknik ini, jumlah kunjungan langsung membludak.


Source : http://kolom-tutorial.blogspot.com/2010/11/meta-tag-blogger-terbaik-ala-kolom.html
Read More : Meta tag blogger terbaik ala Kolom Tutorial

Cara Menampilkan Widget di Halaman Tertentu

Ketika kita menambahkan widget untuk blog seperti profil, blogroll, visitor counter, iklan dan sebagainya, biasanya widget tersebut akan ditampilkan di setiap halaman blog seperti homepage, archive, post, dan sebagainya. Tahukah anda bahwa kita dapat menentukan letak widget tersebut pada halaman-halaman tertentu? Misalnya anda ingin widget shoutbox hanya terlihat di halaman utama (homepage) saja atau blogroll yang hanya terlihat di halaman post saja, maka berikut ini langkah-langkahnya. Sebelum masuk lebih detail mengenai tutorial ini,ada baiknya kita mengetahui tipe dari setiap halaman dan kode id dari tiap widget pada Blogger.

Page Type
1. Home page: Halaman utama
2. Archive page: Halaman arsip
3. Item page: Halaman post
4. Index page: Terdiri dari home page, label page dan search result page

Widget HTML Code
Kode id widget biasanya dimulai dengan kode
1. Contoh kode widget label:
<b:widget id='Label1' locked='false' title='Title' type='Label'>

2. Contoh kode widget html:
<b:widget id='HTML1' locked='false' title='' type='HTML'>

3. Contoh kode widget link list:
<b:widget id='LinkList2' locked='false' title='Title' type='LinkList'>

Cara Meng-Implementasikannya:
Di bawah kode id pada setiap widget, biasanya terdapat kode b:includable seperti ini
<b:includable id='main'>

Jika anda ingin menampilkan widget hanya pada halaman homepage, letakkan kode ini (conditions) setelah kode diatas
<b:if cond='data:blog.url == data:blog.homepageUrl'>

Jangan lupa untuk memberikan tag penutup kode diatas
</b:if>

Lihat screenshot dibawah:



Untuk selanjutnya, langkah-langkahnya sama, anda hanya perlu mengganti kode-kode conditions nya.
1. Menampilkan widget pada seluruh halaman kecuali homepage
<b:if cond='data:blog.url != data:blog.homepageUrl'>

2. Menampilkan widget pada Archives Page
<b:if cond='data:page.type == &quot;archive&quot;'>

3. Menampilkan widget pada seluruh halaman kecuali Archives Page
<b:if cond='data:page.type != &quot;archive&quot;'>

4. Menampilkan widget pada Post Page
<b:if cond='data:page.type == &quot;item&quot;'>

5. Menampilkan widget pada seluruh halaman kecuali Post Page
<b:if cond='data:page.type != &quot;item&quot;'>

6. Menampilkan widget pada sebuah halaman tertentu
<b:if cond='data:blog.url == &quot;URL_HALAMAN_DISINI&quot;'>
*Ganti URL_HALAMAN_DISINI dengan url halaman yang dimaksud

7. Menampilkan widget pada seluruh halaman kecuali sebuah halaman tertentu
<b:if cond='data:blog.url != &quot;URL_HALAMAN_DISINI&quot;'>

8. Menampilkan widget pada dua atau lebih halaman tertentu
<b:if cond='data:blog.url != &quot;URL_HALAMAN_1_DISINI&quot;'>
<b:if cond='data:blog.url != &quot;URL_HALAMAN_2_DISINI&quot;'>

*PENTING! Jangan lupa untuk selalu menambahkan tag penutup kode-kode conditions diatas seperti ini
</b:if>

Kombinasi kode lainnya bisa saja terjadi. Silahkan bereksperimen! :)
Read More : Cara Menampilkan Widget di Halaman Tertentu

Fans Page

Tinggalkan Jejak !


ShoutMix chat widget
Mau kayak Gini? klik ajha !

Followers

  © Free Blogger templates The Robotic by Kang Oemar templates 2009

Kembali Ke : ATAS