Sabtu, 30 April 2011

membuat comment yang berbeda

Sering kita temukan disuatu blog terdapat background commentar yang berbeda dengan pengunjung. Perbedaan tampilan komentar sangatlah membantu pengunjung untuk mengetahui siapa pemilik dari blog tersebut. sebenarnya ini article menjawab salah satu pertanyaan teman kita. yang rasa penasaran tentang adanya tampilan komentar admin yang berbeda dengan pengunjung. Semoga dengan ada article ini dapat membantunya dan bagi yang belum mengerti juga tentunya. nah untuk membuat nya ikuti saja langkah-langkah di bawah ini.

  • Pertama-tama Log in dulu ke blogger
  • Tata letak
  • Klik Edit HTML
  • Cari kode ]]</b:skin>
  • Copy paste kode dibawah ini sebelum kode diatas
    .comment-body-author {
    background: #ebebeb;
    border:1px dotted #000000;
    margin:0;
    padding:0 0 0 20px;
    }

    background = untuk warna latar belakang silahkan ganti dengan warna yang cocok dengan background anda
    border = untuk ketebalan garis
  • Kemudian temukan kode berikut atau pokus <dl id='comments-block'>
    <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>

    <b:if cond='data:comment.author == data:post.author'>
    <dd class='comment-body-author'>
    <p><data:comment.body/></p>
    </dd>
    <b:else/>


    <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>

    </b:if> 

    <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>

    Untuk kode yang berwarna merah adalah kode yang harus ditambahkan ke dalam tamplate anda sesuai dengan posisi kode diatas
  • Setelah itu simpan tamplate anda dan lihat hasilnya. semoga berhasil
Selamat mencoba.........

Cara Menambah atau Membuat Aplikasi Zodiak, Shio atau Bintang ke Blog

Cara Menambah atau Membuat Aplikasi Zodiak, Shio atau Bintang ke Blog anda itu lah pembahasan Utama kita hari ini. Zodiak dan shio seringkali menjadi suatu saran untuk menentukan sifat dan karakter seseorang, bahkan beberapa orang menjadikannya sebagai dasar untuk meramal masa depan. Lepas dari akurat atau tidaknya sifat seseorang berdasarkan zodiak dan Shio, pada tip kali ini kita akan membuat sebuah script sederhana untuk menentukan zodiak dan shio berdasarkan tanggal tertentu. Script akan menerima masukan berupa tanggal, bulan dan tahun, kemudian dari masukan tersebut ditampilkan zodiak dan shio-nya.

Berikut langkah-langkah untuk membuatnya:

  • Kode HTML awal untuk script ini adalah:
    <html>
    <head>
    <title>Zodiak</title>
    </head>
  • Script kita letakkan di bawah tag Function pada script untuk mencari zodiak dan shio dijadikan dalam sebuah function bernama function signs. cara penentuan zodiak adalah melalui seleksi tanggal:
    <body>
    <script language="javascript">
    function signs() {
    var start = 1901, birthyear = document.
    zodiac.year.value, date=document.zodiac.date.
    value,
    month=document.zodiac.month.selectedIndex;

    with (document.zodiac.sign){

    if (month == 1 && date >=20 || month == 2 && date <=18) {value = "Aquarius";}
    if (month == 1 && date > 31) {value = "tanggal tidak valid";}
    if (month == 2 && date >=19 || month == 3 && date <=20) {value = "Pisces";}
    if (month == 2 && date > 29) {value = "tanggal tidak valid";}
    if (month == 3 && date >=21 || month == 4 && date <=19) {value = "Aries";}
    if (month == 3 && date > 31) {value = "tanggal tidak valid";}
    if (month == 4 && date >=20 || month == 5 && date <=20) {value = "Taurus";}
    if (month == 4 && date > 30) {value = "tanggal tidak valid";}
    if (month == 5 && date >=21 || month == 6 && date <=21) {value = "Gemini";}
    if (month == 5 && date > 31) {value = "tanggal tidak valid";}
    if (month == 6 && date >=22 || month == 7 && date <=22) {value = "Cancer";}
    if (month == 6 && date > 30) {value = "tanggal tidak valid";}
    if (month == 7 && date >=23 || month == 8 && date <=22) {value = "Leo";}
    if (month == 7 && date > 31) {value = "tanggal tidak valid";}
    if (month == 8 && date >=23 || month == 9 && date <=22) {value = "Virgo";}
    if (month == 8 && date > 31) {value = "tanggal tidak valid";}
    if (month == 9 && date >=23 || month == 10 && date <=22) {value = "Libra";}
    if (month == 9 && date > 30) {value = "tanggal tidak valid";}
    if (month == 10 && date >=23 || month == 11 && date <=21) {value = "Scorpio";}
    if (month == 10 && date > 31) {value = "tanggal tidak valid";}
    if (month == 11 && date >=22 || month == 12 && date <=21) {value = "Sagittarius";}
    if (month == 11 && date > 30) {value = "tanggal tidak valid";}
    if (month == 12 && date >=22 || month == 1 && date <=19) {value = "Capricorn";}
    if (month == 12 && date > 31) {value = "tanggal tidak valid";}
    }
  • Untuk menentukan shio, caranya dengan mendapatkan sisa bagi tahun dengan 12 (karena shio akan berulang setiap 12 tahun sekali). sebenarnya, cara ini tidak terlalu akurat mengingat pergantian tahun dalam penanggalan Cina tidak tepat seperti pergantian tahun masehi:
    x = (start - birthyear) % 12
    with (document.zodiac.csign){

    if (x == 1 || x == -11) {value = "Tikus";}
    if (x == 0) {value = "kerbau";}
    if (x == 11 || x == -1) {value = "Macan";}
    if (x == 10 || x == -2) {value = "Kelinci";}
    if (x == 9 || x == -3) {value = "Naga";}
    if (x == 8 || x == -4) {value = "Ular";}
    if (x == 7 || x == -5) {value = "Kuda";}
    if (x == 6 || x == -6) {value = "Kambing";}
    if (x == 5 || x == -7) {value = "Monyet";}
    if (x == 4 || x == -8) {value = "Ayam";}
    if (x == 3 || x == -9) {value = "Anjing";}
    if (x == 2 || x == -10) {value = "Babi";}
    }
    }
    </script>
  • Langkah terakhir adalah membuat Interface :
    <center><b>Zodiak dan shio</b></center>
    <form name="zodiac">
    <center>
    <table bgcolor="#eeaa00" border="2" bordercolor="#000000" rules="none" cellspacing="0" cellpadding="4">
    <tr><td><b><i>year</i></b></td>
    <td><div align="right"><input type="text" size="10" name="year" value="Birth Year" onClick=value=""></div></td>
    <td><!--This empty field is just for appearance--></td>
    <tr><td><b><i>Month</i></b></td>
    <td><div align="right">
    <select name="month">
    <option value="x">Select Birth Month</option>
    <option value="1">Januari</option>
    <option value="2">Februari</option>
    <option value="3">Maret</option>
    <option value="4">April</option>
    <option value="5">Mei</option>
    <option value="6">Juni</option>
    <option value="7">Juli</option>
    <option value="8">Agustus</option>
    <option value="9">September</option>
    <option value="10">Oktober</option>
    <option value="11">November</option>
    <option value="12">Desember</option>
    </select>
    </div>
    </td>
    <td><!--This empty field is just for appearance--></td></tr>
    <tr><td><b><i>Day</i></b></td>

    <td><div align="right"><input type="text" name="date" value="Day" size="3" onClick=value=""></td>

    <td><input type="button" value="calculate" onClick="signs()"></div></td></tr>

    <tr><td><b><i>Sun Sign:</i></b></td>
    <td><div align="right"><input type="text" name="sign" size="16" value="" align="right"></div></td></tr>
    <td><!--This empty field is just for appearance--></td></tr>
    <tr><td><b><i>Chinese Sign:</i></b></td>
    <td><div align="right"><input type="text" name="csign" size="12"></div></td>
    <td><!--This empty field is just for appearance--></td></tr>

    </table>
    </center>
    </form>

    </body>
    </html>
  • Berikut ini adalah contoh tampilan yang di dapatkan dari script diatas











    year

    Month



    Day
    Sun Sign:
    Chinese Sign:

  • Untuk contoh di atas tidak berfungsi jika blum anda pastekan ke Elemen laman gadget anda.
  • Nah untuk menambah Aplikasi Zodiak ke blog anda, cukup copy paste kode diatas ke dalam Elemen laman Gadget anda:
  • Simpan dan Selesai...
Selamat mencoba.........

cara modikisa komentar blog

Nah di mana nama pengomentar dan isi komentarnya saling berdampingan, tentunya ini sangatlah menghemat tempat, selain itu kelihatan menarik dan simpel. nah mungkin anda juga tertarik untuk membuat nya, silahkan ikuti langkah-langkah yang tertera di bawah ini.

Berikut langkah-langkah cara membuat nama pengomentar dan isi komentar saling berdampingan.

  • Login ke blogger
  • Klik Rancangan
  • Edit HTML
  • Beri tanda centang pada "Expand Template Widget"
  • Kemudian cari kode di bawah ini
    #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 kode tersebut kemudian ganti dengan kode di bawah ini
    .commentlistdiv{margin-top:10px;background:#FFF;border:1px dotted #ddd;font-size:.75em;color:#666;padding:20px}
    .commentlistdiv h1{font-size:1.3em;color:#366799;border-bottom:1px solid #eee;line-height:1.5em}
    .commentlist li{background:#fff;border-bottom:1px dotted #ddd;padding:20px}
    .commentlist li.alt{background:#fff}
    .deleted-comment{font-style:italic;color:gray}
    .feed-links{clear:both;line-height:2.5em}
    .pane_l{float:left;display:inline;width:160px;min-width:160px;max-width:160px;border-right:1px dotted #ddd;padding-right:20px;margin-right:20px}
    .c_author{font-size:.9em;font-weight:700;margin:0 0 7px}
    .c_avatar{display:block;margin:0 0 7px}
    .c_date{color:#aaa;font-size:.9em;margin:0 0 7px}
    .c_approved{color:#aaa;font-size:.9em}
    .comment-form{background:#414141;border:5px solid #ccc;margin:0 10px 20px;padding:10px 0 0 20px}
    .owner-Body p{font-size:100%;color:red;text-decoration:bold;margin:0 0 .2em}
    .pane_r,.owner-Body{display:block;line-height:1.5em;margin-left:201px}
    .comment-link{margin-startside:.6em}
  • Kemudian cari kode di bawah ini
    <b:includable id='comments' var='post'>
    <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
    <h4>
    <b:if cond='data:post.numComments == 1'>
    1<data:commentLabel/>:
    <b:else/>
    <data:post.numComments/> <data:commentLabelPlural/>:
    </b:if>
    </h4>

    <b:if cond='data:post.commentPagingRequired'>
    <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
    &#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
    </span>
    </b:if>

    <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>

    <b:if cond='data:post.commentPagingRequired'>
    <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
    <data:post.oldestLinkText/>
    </a>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
    <data:post.olderLinkText/>
    </a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
    <data:post.newerLinkText/>
    </a>
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
    <data:post.newestLinkText/>
    </a>
    </span>
    </b:if>

    <p class='comment-footer'>

    <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </b:if>

    </p>
    </b:if>
  • Ganti kode tersebut dengan kode di bawah ini
    <b:includable id='comments' var='post'>
    <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
    <h4>
    <b:if cond='data:post.numComments == 1'>
    1 <data:commentLabel/>:
    <b:else/>
    <data:post.numComments/> <data:commentLabelPlural/>:
    </b:if>
    </h4>
    <b:if cond='data:post.commentPagingRequired'>
    <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
    &#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
    </span>
    </b:if>
    <ul class='commentlist'>
    <b:loop values='data:post.comments' var='comment'>
    <li>
    <div class='pane_l'>
    <div class='c_author'>
    <b:if cond='data:comment.authorUrl'>
    <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
    </div>
    <div class='c_avatar'/>
    <div class='c_date'><span class='comment-timestamp'>
    <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
    <data:comment.timestamp/>
    </a>
    <b:include data='comment' name='commentDeleteIcon'/>
    </span></div>
    <div class='c_approved'/>
    </div>
    <b:if cond='data:comment.author == data:post.author'>
    <div class='owner-Body'>
    <p><data:comment.body/></p>
    </div>
    <b:else/>
    <div class='pane_r'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </div>
    </b:if>
    <div class=' clear'/></li>
    </b:loop>
    </ul>
    <b:if cond='data:post.commentPagingRequired'>
    <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
    <data:post.oldestLinkText/>
    </a>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
    <data:post.olderLinkText/>
    </a>
    &#160;
    <data:post.commentRangeText/>
    &#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
    <data:post.newerLinkText/>
    </a>
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
    <data:post.newestLinkText/>
    </a>
    </span>
    </b:if>
    <p class='comment-footer'>
    <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <data:post.noNewCommentsText/>
    </b:if>
    <b:else/>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
    </b:if>
    </p>
    </b:if>
  • Simpan tamplate anda...
  • Sekarang silahkan lihat hasilnya di komentar blog anda
razik jime dagang teraye © 2008 Template by:
SkinCorner