My Hack- Experiment : Mendaur Ulang Perwajahan dan Desain Layout Comments

Artikel ini telah di update untuk mengetahui lebih lanjut silahkan baca pada tulisan ini “ Upgrade desain halaman komentar 2 kolom “

Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya . - gothe

Berawal dari sebuah pertanyaan :

Bisakah halaman komentar di bagi menjadi dua kolom ?

Mungkin bagi anda yang suka menutak-atik blog-nya, sering juga mengalami pertayaan-pertanyaan yang aneh seperti itu.

Maka saya buka kembali dan perbegang pada postingan sebelumnya “ Tulisan Ala Majalah atau koran “ juga tulisan berikut ini  “ Mempercantik Area Komentar bag 2 “ , kemudian setelah menjalani trial and error – mencoba dan  salah.  akhirnya  saya menemukan sebuah jawaban dan kesimpulan. ternyata halaman komentar bisa di belah atau di bagi menjadi dua kolom.

Selanjutnya, setelah pertanyaan di atas terjawab. timbul juga gagasan berkutnya
“ bagaimana agar dua kolom komentar ini di perhalus desainn-nya ?”

Dengan bantuan tulisan ramani tentang author comment highlighting, kemudian saya daur ulang hacknya untuk di sesuaikan dengan perwajahan atau desain halaman komen ini. hasilnya cukup mengirangkan, walaupun hack-experimen  ini perlu di kembangkan dan di uji-test apakah layak untuk di pakai atau tidak.

Inilah ilustrasi gambar experiment tersebut.

kolom pertama untuk area comment author dan kolom kedua untuk comment body dan comment-footer. Desain perwajahan-nya sendiri tidak baku, artinya bisa di redesain ulang.

Sekarang bagaimana untuk memasang-nya ke dalam template blog. – jika suka mari kita lanjut membacanya.

Pertamaxxxx :

Buka tab Tata Letak – Edit Html.

 

 

Kemudian tandai kotak kecil di samping tulisan Expand Template Widget

 

Keduaxxxxxx :

Kemudia cari Syntax Css untuk Comment yang anda miliki.

* jika template yang baik bisa-nya mengikut sertakan sebuah komentar yang menjelaskan maksud dari script, seperti kode komentar  ini.

/* Comment  */  

/* Comment
-------------------------------------------------- */

 

Nah ganti Syntax Css comment tersebut semuanya dengan yang ini.

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

#comments { background:#F1F5F6; border: solid #cccccc 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: #999999;
  }

#comments-block {margin:.5em 0 1em;  line-height:1.6em;
  padding:10px;
  }
#comments-block .comment-author { display:block; width:100px;
  height:75px;
  background:transparent  url(http://lh3.ggpht.com/jaloee/SL0_1DTNaNI/AAAAAAAACms/sAMO0QXSswM/balon.gif) no-repeat top;  margin:0;  text-align:center;
  padding:15px 0 0;  line-height:1.4em;
  text-transform:capitalize;  font-size:12px;
  }
#comments-block .comment-body {
  background:#fff ;
  border-top:3px double #ccc;  margin:0;
  padding:10px 5px 0 10px;
  }
#comments-block .comment-footer {
  background:#fff ;  border-bottom:3px double #ccc;
  margin:0; padding:50px 5px 5px 10px;  line-height: 1.4em;
  text-transform:normal;  font-size:10px;   letter-spacing:.1em;
  }

#comments-block .comment-body-author p {
  background:#DFD6C3 ;  border-top:3px double #ccc;
  margin:0; padding:10px 5px 0 10px;
  }
#comments-block .comment-footer-author {
  background:#DFD6C3 ; border-bottom:1px solid #ccc;
  margin:0;   padding:50px 5px 5px 10px;
  line-height: 1.4em;  text-transform:normal;
  font-size:10px; letter-spacing:.1em;
  }
#comments-block .comment-body p {
  margin:0;
  }
.comment-form { background:#EFEFEF; border:5px solid #cccccc;
margin:0 10px 20px 10px; padding:10px 0 0 15px; }

.deleted-comment {
  font-style:italic;
  color:gray;
  }

 

Ketigaxxxxx :

Kemudian cari kode Html ini.

 

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

 

 

* Biasanya para pengrajin blog, ada yang menganti kode html-nya seperti tulisan yg diberi tanda merah di atas dengan html- lainnya.. jadi agar pastinya carilah kode pada baris kedua. yang saya pertebal. – saran -  dan lihatlah pada persamaan kode-nya.

 

Kemudian html di atas ganti dengan kode ini.

 

<dl id='comments-block'>
      <b:loop values='data:post.comments' var='comment'> <div style='width: 12%; float: left;'>
        <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 style='width: 78%; float: right;'>
        <b:if cond='data:comment.author == data:post.author'>
          <dd class='comment-body-author'>
            <p><data:comment.body/></p>
          </dd>
          <dd class='comment-footer-author'>      

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

        <dd class='comment-footer'>      

          <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>
        </dd></b:if></div>

<div style='clear: both;'/> 
      </b:loop><div style='text-align:right;padding:10px;'><small>Powered By:<a href='http://www.catalog-tutorial.blogspot.com/'> Catalog-Tutorial</a></small></div>
    </dl>

 

Setelah itu Simpan Perubahan.

 

Trouble-shooting :

Bug pertamaxx :

Seperti judulnya, dalam beberapa template yang saya uji coba ada sedikit masalahnya contonya seperti pada gambar ini. lihat tanda panah berwarna merah.

 

Untuk memperbaikinya masukan saja kode Css ini.

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

di atas kode ini.

body {
  properti:value 
  }

Bug Keduaxxxxx :

Seperti gambar di bawah, background gambarnya pada kolom untuk comment-authornya terlalu besar atau menjorok kesamping kanan.

 

Untuk memperbaikinya ganti saja kode ini.

#comments-block .comment-author { display:block; width:100px;
  height:75px;  background:transparent  url(http://lh3.ggpht.com/jaloee/SL0_1DTNaNI/AAAAAAAACms/.gif) no-repeat top;  margin:0;  text-align:center;
  padding:15px 0 0;  line-height:1.4em;  text-transform:capitalize;  font-size:12px;
  }

Dengan kode ini.

#comments-block .comment-author { display:block;  background:#fff; margin:0;  text-align:center;  padding:15px 0 0;  line-height:1.4em;
  text-transform:capitalize;  font-size:12px;
  }

 

Pertanyaan Berikutnya !!

Bisakah kolom keduanya untuk tempat Gadget atau Widget ?

Oh yach…Seperti saya jelaskan di atas, ini merupakan hack experimen. perlu di uji dan test, sampai sejauh mana fleksibelitas-nya trick ini. Untuk itu sudilah kiranya saudara memberi masukan dan pendapat-nya. apalagi saya sangat bergembira sekali jika anda mengembangkan-nya lebih lanjut.

Page views this post: reader