tes lagi

Anda tentu sudah tidak asing lagi dengan fitur readmore atau baca

tes

Anda tentu sudah tidak asing lagi dengan fitur readmore atau baca seengkapnya pada blog, biasanya terdapat pada artikel dihalaman home yang jika anda klik maka artikel tersebut akan ditampilkan secara penuh.
berikutnya cara membuatnya di blogger :

Cara Membuat Tabview Di Blogger

Oya sobat siapa yng di blognya punya link banyak or judul posting yang buanyak tapi bingung naruknya, sekarang g' usah repot" deh kan dah ada Tab Menu View dengan kotak yang kecil bisa menampung isi yang banyak lho..... n' Trik kali ini aku dapet dari blognya Mas Kendhin tapi di blognya O-om juga ada so thanks banget buat mas kendhin.

Tab view itu contohnya seperti ini :



Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI

5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.

Menampilkan Posting Terbaru

Kamu ingin menampilkan Posting terbaru (Recent Posting) di sidebar Caranya:

1. Login to Blogger kemuduan pilih "Layout"

2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).

3. Copy kode berikut ini dan taruh dalam kotak "content".

<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>

<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/
default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

4. Ganti YOURBLOGNAME dengan nama blog kamu. k'lo pakek domain ya pakek www.domainkamu.com.

5. Angka "10" menunjukkan jumlah "Recent Post" yang ditampilkan, kamu bisa menggantinya sesuka hatimu.

6. And save.

Cara Pasang Emotion Di Editor Blogger

Tutorial kali ini akan saya coba jelaskan mengenai Cara Pasang Macam-Macam Emoticon Di Editor Blogger.Mudah koq...Terus caranya bagaimana ?






untuk memasang emoticon ini mutlak browser yang Anda pakai harus Mozilla Firefox jangan IE, Safari, Avant ataupun yang lainnya. Oh ya saya kasih nih screen shootnya apabila Anda berhasil memasang emoticon tersebut :






Ok deh langsung aja, ini dia cara-caranya :
1. Pertama Anda harus wajib memakai browser Mozilla Firefox
2. Instal dulu plugin Grease Monkey, klik disini tuk download
3. Apabila minta restart Frefox-nya restart saja dan tunggu Firefox muncul kembali dengan sendirinya
4. Klik script ini apabila Anda ingin memasang emoticon more-smilies milik master Cosa Aranda
5. Klik script ini apabila Anda ingin memasang emoticon yahoo emoticon
6. Klik script ini apabila Anda ingin memasang emoticon onion emoticon
7. Klik instal pada script yang akan dipasang

8. Kalau menurut saya, pasang saja semua script tersebut.Gimana udah pasang semua?, kalau sudah...
9. Sekarang login ke account blogger Anda klik Layout atau Tata Letak, lalu klik tab Edit HTML
10. Cari kode ini ]]></b:skin>
11. Dan pasang kode ini:

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

diatas kode ]]></b:skin>
Klik Simpan Template.

Cara Membuat Artikel Berhubungan

Keuntungan membuat Related Post/ Artikel Yang Berhubungan adalah para pembaca dapat melihat artikel lain di blog kita yang masih sesuai dengan Artikel yang sedang mereka baca saat itu. Ingat dalam Related Post didasarkan pada label suatu post jadi untuk memposting artikel sobat harus mencantumkan Label.
Untuk caranya silahkan lihat:

1. Login ke blogger
2. Pilih menu "Layout-->Edit HTML"
3. Beri tanda centang pada kotak "Expand Widgets Template".
4. Truzz silahkan download "SCRIPT INI"
5. Buka file itu n' copy semua
6. Setelah itu cari kode <data:post.body/> dan letakkan script tadi dibawahnya. Untuk blog yang udah pakek Readmore maka akan terdapat 2 kode <data:post.body/> sobat harus meletakkan di kode yang pertama.
7. K'lo dah kelar silahkan save template


Keterangan:
Jika anda ingin mengganti tulisan "Related Posts by Categories"dengan kata" yang lain cari kata tersebut di HTML/ template.

Membuat Komentar Blogger Seperti Friendster

Lihat Komentar ala friendsternya :


Sebelumnya tutorial ini saya dapet dari kang Jaloe

Pokoknya ikuti deh langkah-langkahnya :

• Buka Blogger.Com
• Klik Tata Letak/Layout
• Klik Edit HTML --> Sebelumnya terlebih dahulu anda backup dulu templatenya dengan mengklik Download Template Lengkap.Supaya bila terjadi kesalahan maka bisa diulang kembali.
• Kemudian Centang Expand Widget Template
• Cari kode berikut:
  

  <b:loop values='data:post.comments' var='comment'>

• Atau secara lengkapnya begini :
  
  

  <dl id='comments-block'>
  <b:loop values='data:post.comments' var='comment'>
  <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
  <a expr:name='data:comment.anchorName'/>
  <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>
  <data:commentPostedByMsg/>
  </dt>
  <dd class='comment-body'>
  <b:if cond='data:comment.isDeleted'>
  <span class='deleted-comment'><data:comment.body/></span>
  <b:else/>
  <p><data:comment.body/></p>
  </b:if>
  </dd>
  <dd class='comment-footer'>
  <span class='comment-timestamp'>
  <a expr:href='data:comment.url' title='comment permalink'>
  <data:comment.timestamp/>
  </a>
  <b:include data='comment' name='commentDeleteIcon'/>
  </span>
  </dd>
  </b:loop>
  </dl>
  

• Sobat hapus semua kode diatas ganti dengan kode dibawah ini:
  
  

  <ul class='commentlist'>
  <script type='text/javascript'>var CommentsCounter=0;</script>
  <b:loop values='data:post.comments' var='comment'><li>
  <div class='' expr:id='data:comment.id'>
  <div class='pane_l'>
  <div class='c_author'>
  <dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
  <a expr:name='&quot;comment-&quot; + data:comment.id'/>
  <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>
  <br/>
  Said
  </dt>
  </div>
  <div class='c_avatar'/>
  <div class='commentphoto' style='margin-top:.5em;'/>
  <a expr:href='&quot;#comment-&quot; + data:comment.id' style='font-size:14px;' title='Comment Link'>
  <script type='text/javascript'>
  CommentsCounter=CommentsCounter+1;
  document.write(CommentsCounter)
  </script>
  </a>
  </div>
  <b:if cond='data:comment.author == data:post.author'>
  <div class='owner-Body'>
  <p><data:comment.body/></p>
  <div class='c_date'><data:comment.timestamp/></div>
  <div class='c_approved'/><br/>
  <b:include data='comment' name='commentDeleteIcon'/>
  </div>
  <b:else/>
  <div class='pane_r'>
  <p><data:comment.body/></p>
  <b:if cond='data:comment.isDeleted'>
  <span class='deleted-comment'><data:comment.body/></span>
  <b:else/>
  <div class='c_date'><data:comment.timestamp/></div>
  <div class='c_approved'/><br/>
  <b:include data='comment' name='commentDeleteIcon'/>
  </b:if>
  </div>
  </b:if></div>
  <div class=' clear'/></li> </b:loop>
  </ul>

• Masukkan Syntax CSS ini :
  
  

  * {
  margin: 0px;
  padding: 0px;
  }

• diatas CSS ini :
  

  body {

  
  
• Terus Sobat cari kode ini :
  
  

  /* Comments
  ----------------------------------------------- */

  
  
• Kode asli Comments di minima template begini :
  
  
  

  /* Comments
  ----------------------------------------------- */
  #comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }
  
  #comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
  #comments-block .comment-author {
  margin:.5em 0;
  }
  #comments-block .comment-body {
  margin:.25em 0 0;
  }
  #comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
  #comments-block .comment-body p {
  margin:0 0 .75em;
  }
  .deleted-comment {
  font-style:italic;
  color:gray;
  }

• Hapus semua kode diatas ganti dengan kode ini :
  

  #comments{background:#EBF3FB; border:solid #ccc 1px; margin-bottom:10px}
  #comments h4{ margin:1em 0; padding:10px; font-weight:bold; line-height:1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor}
  #comment-list {margin-top: 10px;padding:10px;
  background: transparent;border:
  1px dotted #ddd;font-size: 1.75em;color: #666;}
  .commentlistdiv {
  margin-top: 10px;padding:10px;
  background: #FFF;border:
  1px dotted #ddd;font-size: 1.75em;color: #666;}
  .commentlistdiv h1 {font-size: 1.3em;
  color: #366799;border-bottom: 1px solid #eee;
  line-height: 1.5em;}
  .commentlist li {background: transparent;
  border-bottom: 1px dotted #ddd;padding: 20px 10px 5px 10px;}
  .commentlist li.alt {background: #fff;}
  .pane_l {float: left;background:#fff;display: inline;
  width: 110px;min-width: 110px;max-width: 110px;
  border: 1px dotted #ddd;padding-right: 0px;margin-right: 0px;text-align:center;padding:15px 0}
  * html .pane_l{margin-top:15px; }
  .pane_r {display: block;line-height: 1.5em;margin-left: 125px;
  padding:8px 15px 15px 15px;;background:#fff;
  border-left:1px dotted #CCCCCC;
  border-right:1px dotted #CCCCCC;
  border-top:3px double #CCCCCC;border-bottom:3px double #CCCCCC;}
  .c_author {font-size: 13px;font-weight: normal;height:30px;
  overflow:hidden;margin: 0px 0px 7px 0px;}
  .c_avatar {display: block;margin: 0px 0px 7px 0px;}
  .c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 0px 0px;
  padding-top:20px;}
  .c_approved {color: #aaa;font-size: 0.9em;}
  .comment-form { background:#EFEFEF; border:5px solid #cccccc;
  margin:0 10px 20px 10px; padding:10px 0 0 15px;width:92%;}
  * html .comment-form { width:87%; }
  .owner-Body {display: block;line-height: 1.5em;margin-left: 125px;
  background:#EFEBE0;padding:8px 15px 15px 15px;
  border-left:1px dotted #fff;border-right:1px dotted #fff;
  border-top:3px double #fff;border-bottom:3px double #fff;}
  .owner-Body p {
  font-size:100%;margin:0 0 0 0;color:#FF0000;
  text-decoration:bold;
  }
  .deleted-comment {
  font-style:italic; color:gray;
  }

• Bila tidak menemukan kode /* Comments bisa diatasi dengan menaruh kode diatas diatas tag ]]></b:skin>
• Finish!!

NOTE!!: Ngga semua template yang saya coba berhasil...
TIPS: Template klasik biasanya berhasil..