Membuat author gravatar pada blogspot

Banyak cara membuat modifikasi pada bagian komentar, seperti membuat mybloglog avatar, salah satu triknya suhu Jaloee dan lain-lain. Kali ini saya mencoba memberikan salah satu trik baru untuk modifikasi perwajahan bagian komentar dengan menampilkan author gravatar sehingga memberikan kesan seperti komentar themes wordpress. Trik ini memang ada beberapa kelemahan yaitu hanya owner blog yang bisa tampil beda sedangkan untuk komentar pengunjung gravatarnya sama semua.sedangkan keuntungannya adalah tidak memakai javascript sehingga loading pagenya cukup cepat.

Langkah-langkah yang perlu di siapkan adalah

1. Login ke blogspot kemudian Layout > Edit HTML
2. Taruh kode di bawah ini di atas ]]></b:skin> :
.commentlistdiv { margin-top: 10px;padding:10px; background: #FFF;border: 1px dotted #ddd;font-size: 0.75em;color: #666;} .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;} .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;} .pane_r {display: block;line-height: 1.5em;margin-left: 201px;} .c_author {font-size: 0.9em;font-weight: bold;margin: 0px 0px 7px 0px;} .gravatar {padding: 4px;float:right;border:2px solid #ccc;} .c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 7px 0px;} .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; } .owner-Body {display: block;line-height: 1.5em;margin-left: 201px;} .owner-Body p { font-size:100%; margin:0 0 .2em 0; color:#FF0000; text-decoration:bold; }
3. Kemudian save hasil pekerjaan sobat dan baru centang expand widget template
4. Cari kode  <dl id='comments-block'>  dan cari sampai tag pentupnya </dl>
   
Kemudian ganti dengan kode di bawah ini
<ol class='commentlist'> <b:loop values='data:post.comments' var='comment'> <li> <div class='' expr:id='data:comment.id'> <div class='pane_l'> <p 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=''><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <br/> Said </p> </div> <b:if cond='data:comment.author == data:post.author'> <div class='owner-Body'> <div class='gravatar'> <img alt='gravatar' class='avatar' height='55' src='YOUR URL PIC' width='55'/> </div> <p><data:comment.body/></p> <div class='c_date'><data:comment.timestamp/></div> <div class='c_approved'/> <b:include data='comment' name='commentDeleteIcon'/> </div> <b:else/> <div class='pane_r'> <div class='gravatar'> <img alt='gravatar' class='avatar' height='55' src='YOUR URL NOPIC ' width='55'/> </div> <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> <b:include data='comment' name='commentDeleteIcon'/> </b:if> </div> </b:if></div> <div class=' clear'/></li> </b:loop> </ol>
NB : - ganti YOUR URL PIC dengan alamat images photo sobat ukuran photo width=55px dan height=55px - ganti YOUR URL NOPIC dengan alamat images photo pengunjung ukuran photo width=55px dan height=55px
5. Finally, simpan hasil pekerjaan sobat dan lihat hasilnya
   

Semoga trik sederhana ini bisa mempercantik bagian komentar sobat

Membuat S3slider images show

Tutorial ringan ini akan membahas bagaimana cara membuat s3slider image show yang diaplikasikan ke dalam template blog terutama blogspot, feature ini dapat di gunakan sebagai pelengkap tambahan untuk model template dengan magazine style, proses instalasi ke dalam blog sangat mudah dan simple, untuk melihat sumber s3slider image silahakan ke situs resminya, jika sobat ingin melihat demonya bisa klik di sini atau kalau sudah tidak sabar ingin mengaplikasikan feature ini hal yang pertama siapkan bahan-bahan untuk membuat s3lider, terutama scrpit jquery dan s3slider; bisa sobat download di bawah ini :

• Jquery JS
  
• S3slider JS

Kalau sudah sobat download saya sarankan simpan di tempat hostingan sobat sendiri, jika sudah menyimpan kita mulai langkah-langkahnya :

1. Login ke blogspot terlebih dahulu kemudian masuk ke blog sobat pilih Layout > Edit HTML
2. Kemudian masukan kode CSS di bawah ini sebelum kode ]]></b:skin>
/* Slider Control ----------------------------------------------- */ h2.slider { color: #000000; font-size: 14px; line-height: 14px; text-transform: uppercase; margin: 0px 0px 0px 0px; padding: 0px 0px 6px 0px; border-bottom: 1px solid #C0CCD3; } #s3slider { width: 570px; /* important to be same as image width */ height: 300px; /* important to be same as image height */ position: relative; /* important */ overflow: hidden; /* important */ } html > body #s3sliderContent { width: 570px; /* important to be same as image width or wider */ position: absolute; /* important */ top: 0; /* important */ margin-left: -40px; /* important */ } #s3sliderContent { width: 570px; /* important to be same as image width or wider */ position: absolute; /* important */ top: 0; /* important */ margin-left: 0px; /* important */ margin-top:30px; } .s3sliderImage { float: left; /* important */ position: relative; /* important */ display: none; /* important */ } .s3sliderImage span { position: absolute; /* important */ left: 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 570px;height:50px; background-color: #000; filter: alpha(opacity=70); /* here you can set the opacity of box with text */ -moz-opacity: 0.7; /* here you can set the opacity of box with text */ -khtml-opacity: 0.7; /* here you can set the opacity of box with text */ opacity: 0.7; /* here you can set the opacity of box with text */ color: #fff; display: none; /* important */ bottom: 0; /* if you put top: 0; -> the box with text will be shown at the top of the image if you put bottom: 0; -> the box with text will be shown at the bottom of the image */ }
3. Selanjutnya masukkan kode di bawah ini setelah kode ]]></b:skin>
<script src="http://subagya.googlepages.com/jquery.js" type="text/javascript"> <script src='http://betatemplates.co.cc/wp-content/project/js/s3Slider.js' type='text/javascript'/> <script type='text/javascript'>    $(document).ready(function() {    $(&#39;#s3slider&#39;).s3Slider({       timeOut: 4000    }); }); </script> 
Nb : mohon ganti URL alamat JS dengan punya anda sendiri untuk menghindari bandwith limit
4. Kemudian sobat masuk ke Layout > add page element > HTML/Javascript dan masukkan kode ini :
<h2 class="slider"> My Gallery</h2> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="YOUR IMAGE URL" />YOUR TEXT... </li> <li class="s3sliderImage"> <img src="YOUR IMAGE URL" /> YOUR TEXT... </li> <div class="clear s3sliderImage"> </div> </ul>
5. Simpan dan lihat hasilnya

Contoh di atas adalah hanya 2 images show kalau sobat ingin menambah image slide shownya yang perlu dilakukan adalah menambahkan format ini :

<li class="s3sliderImage"> <img src="YOUR IMAGE URL" />YOUR TEXT... </li>

Semoga tutorial ringan ini bermanfaat buat sobat yang ingin menampilkan gaya magazine di template sobat.

Membuat autoscroll dengan jquery

Membuat auto scroll ada banyak cara, di antaranya adalah dengan cara membuat link ke bagian div yang di inginkan atau juga dengan cara memasukkan script autoscroll dengan javascript, kali ini saya coba membahas bagamaimana cara membuat autoscroll dengan script jquery yang menurut saya auto scroll ini tampak lebih dinamis ketika kita melihat bagian header dari blog kita maka autoscroll tersebut tidak muncul dan ketik kita scroll menuju ke bawah blog baru autoscrollnya muncul (bingung ga sih-red), dan efeknyanya seperti accordion, sangat mulus ketika meluncur ke atas.

Cara membuatnya mudah sekali
1. Pertama masuk ke halamat edit HTML
2. Kemudian masukkan kode ini <a href='#' id='toTop'>^ Scroll to Top</a> sebelum kode </body>
3. Kemudian masukkan kode di bawah ini :
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
di atas kode  ]]></b:skin>
4. Setelah itu masukkan kode jquery ini :
<script src='http://subagya.googlepages.com/jquery-1.3.2.min.js' type='text/javascript'/>
  <script src='http://subagya.googlepages.com/jquery.scroll.pack.js' type='text/javascript'/>
  <script type='text/javascript'>
            $(function() {
                $(&quot;#toTop&quot;).scrollToTop();
            });
        </script>
sebelum kode </head>
5. Simpan dan lihat hasilnya.

Kalau mau lihat lebih detail lagi silahkan meluncur ke sini sekalian lihat demonya biar yakin xixixixi.

Cara mengatur layout kolom di blogspot

Pada pembahasan sebelumnya sudah saya jelaskan bagaimana cara membuat kolom baru di blogspot, dan pada tutorial kali ini saya akan membahas bagaimana cara mengatur layout kolom yang sudah kita buat, dan pada dasarnya ini juga berlaku buat kolom yang sudah ada baik itu template dengan layout 2 kolom ataupun sudah menjadi 3 kolom. Trik ini sebenarnya tidak rumit karena kita hanya memindahkan kode div di bagian section 3 (HTML) dan sedikit mengubah margin dan paddingnya apabila tampilan layoutnya bertabrakan dengan element lainnya dan posisi floatnya. Seperti biasa saya masih menggunakan acuan contoh layout template minima dan pada dasarnya tutorial ini bisa berlaku juga pada template yang lainnya.

Perhatikan screenshoot di bawah ini

• Posisi 2 kolom berada di sebelah kanan main post :

• Posisi main post di tengah-tengah 2 kolom :

• Posisi 2 kolom berada di sebelah kiri main post :

 

Untuk masing-masing posisi saya akan jelaskan satu persatu, dan dalam mengubah layout kolom template, sobat blogger tidak perlu mencentang expand widget.

• Pada posisi 2 kolom di sebelah kanan main post kode pada bagian section 3 (HTML) :


      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
<div id='newsidebar-wrapper'>
        <b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
      </div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>


Perhatikan posisi kode text yang berwarna merah, di mana kode tersebut berada di bawah div main-wrapper dan akan memberikan tampilan 2 kolom berada di sebelah kanan main post.

• Pada posisi main post berada di tengah-tengah 2 kolom maka kode pada section 3 (HTML):


 <div id='newsidebar-wrapper'>
        <b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
      </div>
     <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
   <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div> 

Perhatikan posisi div main-wrapper di apit oleh kode yang berwarna merah dan akan memberikan tampilan main post berada di tengah 2 kolom.

• Pada posisi 2 kolom di sebelah kiri main post kode pada bagian section 3 (HTML) : 
  


<div id='newsidebar-wrapper'>
        <b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
      </div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div> 
<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
      </div>


Perhatikan posisi kode text yang berwarna merah, di mana kode tersebut berada di atas div main-wrapper, tetapi hal ini belum cukup karena pada bagian section 2 (CSS) perlu di rubah posisi floatnya terutama yang kode sidebar-wrapper menjadi posisi float left karena defaultnya right ,baru akan memberikan tampilan 2 kolom berada di sebelah kiri main post.
Konsep dasar cara mengubah layout kolom adalah :

1. Posisi div pada bagian section 3 (HTML)
2. Posisi float, nilai margin dan padding apabila layout kolomnya bertabrakan dengan element lainnya
3. Trial and error

Semoga dengan tutorial cara mengubah layout kolom sobat blogger akan bisa berkreativitas dengan stylenya masing-masing.

Membuat kolom baru di blogspot

Bagaimana cara membuat atau menambahkan kolom baru di blogspot? Pada tutorial ringan ini saya akan coba sedikit memberikan konsep yang sangat sederhana bagaimana cara membuat atau menambahkan kolom baru di blogspot, baik itu membuat 2 kolom menjadi 3 kolom maupun 4 kolom atau bahkan lebih, jadi saya harapkan sobat blogger bisa berkreasi sendiri dengan panduan konsep dasar membuat kolom baru di blogspot. Saya akan berikan contoh dan ilustrasi sederhana dengan template 2 kolom, di mana sobat blogger ingin mengubah layout template 2 kolom ini menjadi 3 kolom. Seperti biasa saya menggunakan contoh dengan template minima.Konsep dasar untuk membuat kolom baru :

1. Mengubah nilai ukuran width main-wrapper, sidebar-wrapper, dan outer-wrapper, biasanya header-wrapper, dan footer-wrapper mengikuti width outer-wrapper
2. Membuat definisi kolom baru pada section 2 (CSS)
   
3. Peletakan tag div baru pada section 3 (HTML)  yang sudah dideklarasikan di bagian section 2 (CSS)
4. Simpan dan lihat hasilnya

Saya akan memberikan penjelasan pada masing-masing poin di atas, saya harapkan sobat blogger dapat mengikuti dengan seksama, baca perlahan-lahan dan pahami setiap petunjuknya.

Mengubah  template 2 kolom menjadi 3 kolom

Poin pertama dilakukan adalah mengubah nilai outer-wrapper, main-wrapper dan sidebar-wrapper, pada contoh ini saya menggunakan template minima standart dengan kode CSS defaultnya :


#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
 float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}


Perhatikan nilai yang di cetak tebal yang nantinya nilai tersebut akan kita rubah. Dapat dilihat pada kode tersebut untuk ukuran outer-wrapper:660px, main-wrapper:410px, dan sidebar-wrapper:220px. Kalau sobat perhatikan jumlah width main dan sidebar adalah 630px, di mana sisa 30px adalah untuk margin dan padding atau istilah sederhananya adalah jarak pembatas antara masing container.

Poin kedua adalah menambahkan elemen kolom baru dengan membuat nilai CSSnya, dan ubah juga nilai width outer-wrapper, main-wrapper dan sidebar-wrappernya sehingga akan seperti ini kode yang baru :


#outer-wrapper {
  width: 750px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

#main-wrapper {
  width: 400px;
  margin-left: 20px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  }

#sidebar-wrapper {
  width: 150px;
 float: $endSide;  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#sidebar-wrapper2 {
  width: 150px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}  


Perhatikan juga nilai width yang di cetak tebal , yang pada umumnya penjumlahan main-wrapper dan sidebar-wrapper tidak melebihi nilai outer-wrapper ( Width Outer > Main + Sidebar), sisa kekurangan nilai widthnya umumnya di gunakan untuk margin dan padding agar nantinya tidak berdempetan masing-masing container. Sedangkan untuk container baru di tandai dengan warna biru. Nilai 750px tidak harus mutlak, sobat bisa mengubah nilai tersebut dan sesuaikan dengan kebutuhan sobat dan jangan lupa juga mengubah nilai width main dan sidebarnya.

NB : Biasanya saya mencopy kode  #sidebar-wrapper dan mengubah id nya menjadi id baru con: #sidebar-wrapper2 kemudian mengubah nilai floatnya menjadi left

Poin yang ketiga membuat tag div sidebar baru di bagian section 3 (HTML), sebelumnya saya akan kasih lihat default kode template  minima 2 kolom (no expand widget templates) :


      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>


Kemudian kita akan memasukkan tag div sidebar baru ke dalam structur templatenya  :


<div id='sidebar-wrapper2'>
      <b:section class='sidebar' id='sidebar2'>
</b:section>
</div>
<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>


Perhatikan text yang berwarna biru yang merupakan tag div sidebar barunya, sedangkan untuk yang di highlight hijau adalah nilai section class yang mempunyai arti  tampillan maupun widget yang di dalam container baru tersebut mengikuti aturan class sidebar seperti nilai background, h2, text dan lain-lain yang di tandai dengan dot [.] con : .sidebar {....} jika sobat ingin memodifikasi tampilan cointainer baru silahkan buat class tersendiri con : .sidebar2 {.....} kemudian ubah section class dengan class yang sobat buat con : <b:section class='sidebar2' id='sidebar2'>, sedangkan untuk text yang di highlight merah merupakan id yang harus unik atau berbeda dengan id lainnya.

Pada poin ini sebenarnya sobat blogger bisa merubah layout template yang nantinya akan saya bahas lebih dalam lagi pada tutorial berikutnya.

Poin yang keempat adalah simpan hasil pekerjaan sobat dan lihat hasilnya jika terdapat kesalahan pada layoutnya seperti misalnya sidebar baru posisinya jatuh ke bawah, yang perlu di lakukan adalah mengatur nilai width ataupun nilai margin dan paddingnya. Gunakan prinsip trial and error! Semoga berhasil mengubah layout 2 kolom template sobat blogger menjadi 3 kolom atau lebih dengan konsep dasar di atas.

NB : Jangan lupa mengubah nilai width header dan footernya umumnya mengikuti nilai width outer

Menampilkan real time di blogspot (2)

Buat sobat blogger yang tertarik dengan menampilkan realtime di blogspot bagian pertama , pasti akan lebih tertarik lagi dengan trik yang kedua ini karena kekurangan di bagian pertama tidak dapat menampilkan jam ketika mengakses blog sobat seperti kebanyakan sobat blogger yang menanyakan bagaimana cara menampilkan jamnya, maka di bagian kedua ini semua dapat di tampilkan dengan format tampilan : Sunday, May 14, 2009 9:22:58 PM yang terus update jamnya, sehingga tampilan blog sobat menjadi lebih dinamis lagi. Kalau mau lihat screenshotnya di bawah ini :

Langkah-langkah membuatnya :

1. Login terlebih dahulu ke blogspot masuk ke Tata Letak > Edit HTML dan jangan lupa untuk membackup template sobat 
2. Jangan centang  Expand Widget Templates, cari kode <body> dan kemudian ganti dengan <body onLoad="goforit()">
3. Setelah itu masukkan kode ini setelah kode <body onLoad="goforit()"> 
4. Kemudian untuk menampilkan tampilan realtime ini taruh kode di bawah ini di bagian yang sobat kehendaki seperti bagian header, footer atau main :   

          <span id="clock"></span> 

     5.  Langkah terakhir adalah tinggal save hasil pekerjaan sobat

Menampilkan real time di blogspot

Trik ini saya dapatkan dari melihat hasil karya template suhu Herro,  sangat menarik sekali menurut saya karena ketika kita membuka blog akan terlihat hari kita mengaksesnya yang saya sebut real time , sehingga tampilan blog menjadi dinamis. Pemakaian real time dapat sobat lihat di blog ini, atau lihat screenshootnya di bawah ini :

Cara menampilkan realtime ini sangat mudah sekali, hanya membutuhkan kode javascript dan penempatan real timenya bisa menurut selera sobat blogger.

Langkah-langkah menampilakan real time di blogspot:

1. Login terlebih dahulu ke blogspot masuk ke Tata Letak > Edit HTML dan jangan lupa untuk membackup template sobat

2.  Jangan centang  Expand Widget Templates,  letakan script ini di bawah </head>

<script src='http://subagya.googlepages.com/tampil_tanggal.js' type='text/javascript'/> 

3. Kemudian untuk penempatan real time ini bisa di sesuaikan dengan keinginan sobat dengan menaruh kode di bawah ini ke dalam struktur template:

Hari ini : <script>tampiltanggal();</script>   

 4. Pada contoh ini saya menaruh kode tersebut di dalam header-wrapper yang sebelumnya saya tulis untuk code cssnya :

.realtime {
margin:10px;
text-align: left;
color:#ffffff;
float:right;
font-weight: bold;
}

Taruh kode tersebut di atas ]]></b:skin>


5. Langkah selanjutnya masukkan kode yang berwarna merah ke dalam struktur header-wrapper :

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Thinking Out Of The Box (Header)' type='Header'/>
</b:section>
<div class='realtime'>
Hari ini : <script>tampiltanggal();</script>   
</div>
</div>

NB : Perhatikan kode header-wraper dan tag penutupnya </div>!!

6. Langkah terakhir adalah save hasil pekerjaan sobat

Modifikasi perwajahan komentar

Kali ini saya hanya sedikit memodifikasi hasil kerja kang jaloee yaitu mengganti perwajahan komentar, di mana saya hanya ingin menambahkan author commentnya beda style atau istilahnya komentar pemilik blog berbeda style dengan komentar pengunjung, seperti yang sobat lihat screenshoot di bawah ini :

Menurut saya perwajahan komentar tersebut sangat menarik dan unik, kalau sobat tertarik ingin membuat perwajahan komentar seperti screenshoot di atas silahkan ikuti langkah-langkah berikut :

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Centang Expand Widget Templates

3. Kemudian cari kode css untuk komentar :

/* 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; }

NB: setiap bagian code css komentar berbeda-beda pada setiap template

4. Ganti semua kode di atas dengan kode di bawah :

/* Comments
----------------------------------------------- */
.commentlistdiv {
margin-top: 10px;padding:10px;
background: #FFF;border:
1px dotted #ddd;font-size: 0.75em;color: #666;}

.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;}

.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;}
.pane_r {display: block;line-height: 1.5em;margin-left: 201px;}

.c_author {font-size: 0.9em;font-weight: bold;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 7px 0px;}
.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; }
.owner-Body {display: block;line-height: 1.5em;margin-left: 201px;}
.owner-Body p {
font-size:100%;
margin:0 0 .2em 0;
color:#FF0000;
text-decoration:bold;
}

5. Setelah itu cari bagian di bawah 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>

Kemudian sobat ganti semua kode di atas dengan kode di bawah ini :

<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'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</div>
<div class='c_avatar'/>
<div class='c_date'><data:comment.timestamp/></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'>
<data:comment.body/>
</div>
</b:if>
<div class=' clear'/></li>
</b:loop>
 </ul>


6. Langkah terakhir adalah save template

Menampilkan kode HTML/Javascript yang unik di postingan (4)

Satu lagi cara menampilkan kode HTML-an / javascript di postingan dengan menggunakan teknik scrollbox yaitu kode HTML-an di dalam kotak yang ada scrollnya, kalau sobat sudah membaca postingan bagaimana caranya menampilkan kode HTML/javascsript versi 1, versi 2, dan versi 3 tidak ada salahnya mencoba versi yang ke-4 ini, contohnya dapat di lihat di bawah ini :

#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}

Mau tahu cara buatnya?

Sobat hanya perlu menaruh kode HTML-an di dalam kode di bawah ini :

<div style="width: 395px; height: 400px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;">Paste what you want to appear in the scroll box here</div>


Perhatikan text warna merah dan biru, untuk width, height, dan color sesuaikan dengan template sobat!!

Sangat simple dan mudah pengaplikasiannya, dan bila sobat terlalu pusing untuk menghapal penulisan kode tersebut, maka saya sarankan untuk ke Setting >> Formatting >> Post Template silahkan paste kode tersebut, agar memudahkan sobat blogger ketika ingin menggunakan kode tersebut. Semoga tutorial ringan ini dapat membantu sobat.

Membuat 2 atau 3 kolom di bawah header

Penutup tutorial blog di bulan puasa ini , saya akan memposting bagaimana cara membuat 2 kolom di bawah header , ini buat sobat blogger yang suka menaruh banyak widget untuk mempercantik blognya, dan sempat di tanyakan juga oleh pembaca blog ini yaitu sobat badot, setelah mencari inspirasi akhirnya ketemu juga bagaimana caranya membuat 2 kolom di bawah header, kalau mau lihat screenshotnya di bawah ini :

Screen shootnya
Dan hasil nyatanya sementara ini saya aplikasikan di blog ini
Mau tahu cara buatnya?

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Simpan hasil pekerjaan sobat
3. Kemudian cari kode <div id='main-wrapper'>, setelah ketemu masukkan kode di bawah ini di atas kode tersebut.

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Simpan kembali hasil pekerjaan sobat
4. Setelah selesai menyimpan, kemudian sobat ke Layout dan lihat hasilnya.

Kode pada tahap 3 bisa sobat modifikasi apabila ingin menambahkan 3 kolom di bawah header yang perlu di perhatikan adalah widht dengan floatnya!!

Tapi kalau sobat bingung saya sudah sediakan kode untuk menambahkan 3 kolom di bawah header, silahkan ikuti langkah 1 dan 2 kemudian ketika tahap 3 masukkan kode ini :


<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>


Semua tergantung kebutuhan sobat dalam menambahkan widget, dan saya sampaikan terimakasih banyak telah menjadi pembaca setia blog ini :p . Happy blogging sobat and be Thinking Out Of The Box!!

Membuat post signature

Everyone knows the signature is also your identity which can tell a little secret about your character - by Mochal
Sekarang lagi bingung mau posting apa ga ada bahan baru ya pakai bahan lama aja deh :p , kebetulan ada yang nanya bagaimana cara membuat post signature ya saya buatkan aja tutorialnya sekalian kalau ada nyasar and yang belum tahu bisa lihat postingan ini wekekeke :p , langsung aja deh bro bagaimana cara membuat post signature seperti screenshoot di bawah ini :
Post signature
Mau tahu cara buatnya?

1. Hal yang pertama sobat lakukan adalah sudah mempunyai url gambar signaturenya banyak cara untuk membuatnya bisa di microsoft paint , atau pengolah gambar lainnnya yang sobat kuasai.

2. Kalau sudah membuat dan menyimpan di file hostingan tinggal memasukkan ke dalam kode di bawah ini :


<p>
<img align="right" alt="post signature" height="34" src="URL IMAGE SIGNATURE" style="" width="96" />
</p>

Ganti URL IMAGE SIGNATURE dengan alamat url image signature sobat

3. Sekarang tinggal menaruhnya di setiap postingan yaitu dengan cara masuk ke Setting > Formating > post template copy kode tersebut dan masukkan di kotak kolom post template kemudian save dan ketika sobat mau memposting kode ini sudah ada di dalam Mode Edit HTML.
Yup simple dan sangat mudah di lakukan bagi siapa saja termasuk anak-anak wekekekekek :p . /lari kabur aaah....

Mengubah nama author jadi icon atau foto

Trik ini cukup bagus buat yang suka sama foto nya sendiri (bukan ngomongin saya lho wekekekek-red), dan biar nambah variatif dalam mendesain blog sobat yaitu mengganti nama authornya menjadi ikon atau foto caranya sangat simple sekali dalam membuat trik ini. Kalau mau tahu hasil triknya lihat screen shoot di bawah ini :

Nih Screen Shootnya
Mau tahu cara buatnya?

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Centang tanda Expand widget, setelah itu cari kode ini <data:post.author/> , setelah ketemu silahkan ganti kode tersebut dengan rumus HTML-an ini :

<a href='URL SOBAT'><img alt='TERSERAH ISINYA' border='1' height='16' src='IMAGE URL SOBAT' style='margin: 0px' title='TITTLE SOBAT' width='16'/></a>


Text yang di cetak tebal di sesuaikan dengan fungsinya masing-masing

Kalau sudah selesai tinggal di save dan lihat hasil pekerjaan sobat, kalau bisa cari foto yang paling bagus biar yang datang dan baca postingannya gak takut lihat foto sobat wekekekekekke :p .

Membuat bingkai foto di blogspot

Karena sekarang lagi momen bagi-bagi award di dunia blogger dan banyak juga sobat blogger yang kebagian award terus bingung mau menaruh di mana awardnya, nah saya punya cara bagaimana membuat bingkai foto , pas banget nih buat sobat blogger yang mau menaruh award ini di bingkai, jadi lebih rapi dan elegan :p . Oke kita lihat contoh di bawah ini :

Mau tahu cara buatnya?

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Tidak perlu centang tanda Expand widget, setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

td {text-align:center;} .fotoatas { border:5px outset gold; background-color:#FFFFFF;} .fotobawah {border: 2px outset gold; background-color:#FFF4EA;}
Jangan lupa save hasil pekerjaan sobat
3. Sekarang tinggal aplikasinya ke dalam blog sobat
Saya sarankan taruh kode ini di dalam postingan sobat sebenarnya bisa saja taruh di sidebar kalau sobat sudah tahu cara mengubah widht dan height nya.

<tr><td><table width="100" align= "center">
<tr><td colspan="2" class="fotoatas"><img src="URL IMAGE" width="278" height="183"></td> </tr>
<tr><td class="fotobawah"><img src="URL IMAGE" width="84" height="87"></td> <td class="fotobawah"><img src="URL IMAGE" width="83" height="91"></td></tr>
<tr><td class="fotobawah"><img src="URL IMAGE" width="104" height="87"></td><td class= "fotobawah"><img src="URL IMAGE" width="98" height="70"></td></tr>
</table>


Ubah URL IMAGE dengan url gambar anda

Ok, selamat menaruh award di bingkai foto sobat yang baru buat, semoga sukses and kalau gagal kasihan deeeh looo wekekekekeke :p .

Another numbering comments

Tentunya sobat blogger pernah mencoba hack numbering comments ala fernadoo , dan yang sudah di alih bahasakan oleh kang firdaus. Nah kali ini saya kan membahas bagaimana memberi nomor urut dengan metode lain atau istilahnya another numbering comments. Sebelum melangkah lebih jauh saya kasih lihat screen shootnya di bawah ini :

Nih Scren Shootnya!!!

Atau bisa di lihat live demonya silahkan klik di sini !!
Tapi trik ini mungkin agak sulit buat sobat blogger karena perlu pemahaman struktur dari template sobat terutama bagian komentarnya, saya sudah menguji cobakan dengan template minima yang menurut saya basic dari template-template yang lain dan berhasil!!!. Kalau memang tertarik silahkan lanjut membacanya.

Berbeda dengan teknik numbering comments ala fernadoo yang hasilnya nomor tersebut mempunyai permalink (atau url menuju ke arah komentar tersebut dan memakai internal javascript, tetapi dengan teknik yang baru ini tidak ada permalinknya, murni pengurutan penomoran komentar dengan teknik css dan kode HTML-an. Saya sarankan sobat blogger untuk mepertimbangkannya, karena ada keuntungan dan kekurangan memakai teknik ini.

Keuntungannya :
1. Tidak perlu kode javascript yang tentunya membebankan loading page blog sobat
2. Sangat simple pembuatannya karena sedikit memakai css - untuk membuat listnya( menurut saya - red)
Kekurangannya :
1. Monoton < karena penomoran ini memakai font body komentar)

Langkah-langkah pembuatan another numbering comments :
1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Centang tanda Expand widget, setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

.commentlist {
margin: 0px 10px;
padding-left: 20px;
line-height: 130%;
font-weight: bold;
font-style: italic;
font-size: 150%;
}
.commentlist li{
margin-bottom: 10px;
padding: 5px 10px;
background: #BDBDBD;
}
.commentlist cite, .commentlist cite a, .commentlist cite a:visited {
font-weight: bold;
font-style: normal;
font-size: 85%;
color: #CC6600;
}

Simpan hasil pekerjaan sobat

3. Langkah ini sedikit memerlukan kejelian sobat saya akan memberikan penjelasannya
, cari kode ini <b:loop values='data:post.comments' var='comment'> kemudian ganti dengan kode di bawah ini :


<ol class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<li>
<cite>

Kemudian perhatikan struktur kode HTML-an ini:

<dl id='comments-block'>
<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>


Kode di atas merupakan pemenggalan dari bagian komentar template minima, kalau struktur template sobat sama dengan struktur di atas silahakan ganti dengan kode di bawah ini :


<dl id='comments-block'>
<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>
</cite>
<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>
</li>
<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>
</ol>
</dl>


Perhatikan kode yang di cetak tebal merah!! Merupakan tag penutup kode <ol>, <cite> dan <li> yang kalau sobat blogger jeli bisa di aplikasikan ke template yang beda struktur dengan template minima!!! Perhatikan strukutur area komentar template lainnya dan silahkan sobat trial and error!!. Silahkan bereksperimen dan thinking out the box. Kalau masih bingung silahkan YM-an dengan saya atau kasih komentar mengenai another numbering comments ini.

Membuat image CSS popup di blogspot

Kali ini saya akan memposting bagaimana cara membuat image atau gambar muncul (popup) di blogspot, yang apabila kita mengarahkan kursor mouse ke gambar tersebut maka akan muncul gambarnya menjadi besar, trick ini sangat bagus buat yang suka menaruh koleksi foto-foto pribadinya di blognya, teknik ini ga perlu javascript hanya sedikit permainan di bagian CSSnya. Kalau mau lihat contohnya bisa lihat di bawah ini :

I'm so Cute

Hi, my name is Cella and you?

Arahkan kursor mouse sobat ke gambar di atas dan lihat efek popupnya

Mau tahu cara buatnya?

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Centang tanda Expand widget, setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

Kalau mau ambil code di atas klik view plain nanti akan muncul popup code silahkan copy dari situ

Kemudian save hasil pekerjaan sobat.
3. Sekarang untuk mengaplikasikannya dengan memakai kode di bawah ini :

<a class="thumbnail" href="#thumb"><img src="Image Url" width="100px" height="66px" border="0" /><span><img src="Image Url" /><br />YOUR TEXT</span></a>

<a class="thumbnail" href="#thumb"><img src="Image Url" width="100px" height="66px" border="0" /><span><img src="Image Url" /><br />YOUR TEXT</span></a>


Ganti Image URL dengan alamat gambar sobat blogger
Ganti YOUR TEXT dengan kalimat yang sobat blogger kehendaki

Teknik image css popup ini bisa di aplikasikan di dalam postingan ataupun di sidebar dengan cara add page elements > HTML/Javascript terus copy paste kode di atas tersebut. Thinking Out The Box sesuaikan dengan imajinasi sobat blogger. Ok sampai di sini aja and happy blogging. Kalau kurang jelas bisa YM saya yang sudah tersedia di sidebar

Mengenal border lengkung

Kali ini saya akan membahas bagaimana membuat border lengkung tapi efek ini hanya bisa di lihat di browser firefox dan google chrome, border lengkung ini bisa di aplikasikan di blog sobat biar ga monoton dengan border-border lainnya biar nambah variatif dalam mendesain blog sobat, nih saya kasih contohnya.

contoh dengan border biasa :

Memakai border biasa

contoh dengan border lengkung :

Memakai border lengkung

Tertarik mau membuatnya?

Kalau sobat sudah mengenal properties CSS untuk mengaplikasikan tag properties border lengkung ini sangat mudah, cukup menambahkan :

-moz-border-radius: npx
Nilai n merupakan nilai kelengkungan bordernya
Turunan properties border lengkung ini ada 4 :

* -moz-border-radius-topleft
* -moz-border-radius-topright
* -moz-border-radius-bottomleft
* -moz-border-radius-bottomright

Saya contohkan mengaplikasikannya menggunakan tag <div>

<div style="-moz-border-radius-topleft:12px;-moz-border-radius-bottomright:12px;border:1px solid black;background-color:#c0c0c0;padding:6px;">Hanya contoh pemakaian border lengkung kiri atas dan border lengkung kanan bawah </div>

Maka akan hasilnya akan seperti :

Hanya contoh pemakaian border lengkung kiri atas dan border lengkung kanan bawah

Di atas hanya sebagian contoh penggunaan dari -moz-border-radius kalau sobat sudah pandai dalam CSS maka bisa di terapkan juga di properties border pada bagian style sheet CSS blog sobat, ok saya contohkan mengaplikaskannya ke dalam properties border blockquote, saya akan mengunakan tag blockquote pada contoh ini :

.post blockquote {
margin : 15px 15px 15px 0px;
padding :30px 10px 10px 10px;
clear : both;
list-style-type : none;
background : transparent url(http://lh4.ggpht.com/jaloee/SJnxszef6II/AAAAAAAACX4/etpucC5BrdM/paku.png) no-repeat 50% 5px;
border-top : 1px solid #cccccc;
border-right : 2px solid #000000;
border-bottom : 3px solid #000000;
border-left : 1px solid #eeeeee;
-moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;
}
.post blockquote p{ margin:.75em 0}

Kalau mau ambil code diatas klik view plain nanti akan keluar popup window copy kodenya dari sana

Maka ketika sobat blogger memakai tag blockquote maka hasilnya akan seperti ini :

Lorem ipsum dolor sit amet, consectetuer jquery rules! elit, sed diam nonummy nibh euismod tincidunt ut laoreLorem ipsum dolor sit amet, consectetuer jquery rules! elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam et dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut jquery rules! ex ea commodo consequat

Sekarang tergantung sobat blogger mau di aplikasikan kemana, "Think Out The BOX", daya kreatif sobat di perlukan untuk bisa memakai properties -moz-border-radius- ini. Kalau pengen mengenal border lengkung ini lebih jauh silahkan ke sini

Efek border lengkung in hanya bia dilihat di firefox dan google chrome

Menampilkan kode HTML/Javascript yang unik di postingan (3)

Sehabis sahur buat posting baru nih sob biar masih refresh ingatan saya, sesuai dengan judulnya "Menampilkan kode HTML/Javascript yang unik di postingan versi 3" (biar lengkap bikin trilogynya-red). Seperti yang sudah saya posting sebelumnya di blog ini,ada banyak cara menampilkan kode HTML/Javascript di dalam postingan, kalau yang belum baca silahkan klik di sini untuk versi 1 dan klik di sini untuk versi 2. Sekarang kita lihat perbedaan masing-masing versinya. Mau tahukan perbedaannya?

Versi 1 :

#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}

Versi 2 :

#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}


Versi 3 :

#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}

Sangat jelas sekali perbedaannyakan, nah sekarang tinggal bagaimana cara membuatnya dan kelebihan dari versi 3 ini.
1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Masukkan kode ini di bawah <!-- end outer-wrapper -->

3. Kemudian simpan hasil pekerjaan sobat, nah sekarang tinggal bagaimana mengaplikasikannya.
Gunakan tag kode ini setiap ingin memposting kode HTML-an atau CSS,dan javascript atau kalau mau lebih jelas mampir ke sini

<pre name="code" class="css">HTML/CSS/javascript </pre>

Kelebihan dengan memakai metode ini kita tidak perlu lagi memparse/encode kode HTML-annya langsung taruh saja sesuai kode mentahnya, dan kalau mau ambil kodenya klik view plain, terus kalau mau ngeprint klik print.

Ok bro, cukup kayaknya postingan kali ini soalnya saya sudah mengantuk berat nih, and btw anyway buzway happy blogging dan selamat menunaikan ibadah puasa.

Saya dapat ilmu ini dari sini.

Refresh otomatis pada blog

Kebetulan kakak saya adalah seorang programmer, disalah satu operator seluler di Indonesia, nah kebetulan juga saya pas ngacak-ngacak kamarnya nemu kumpulan kliping HTML-an ketika kakak saya masih kuliah, salah satunya adalah membuat halaman web refresh otomatis. Kegunaan refresh otomatis ini apabila ada pengunjung yang nongkrong di blog sobat akan selalu update dengan isi blog sobat, jadi bisa tahu kalau blog yang di tongkronginnya akan keluar post terbaru atau update dari sobat. Mau tahu caranya?

Langkah-langkah membuat refresh otomatis pada blog :
1. Seperti biasa, login ke Blogspot, kalau sudah login masuk ke Tata Letak > Edit HTML

Perhatian! Jangan lupa untuk membackup template sobat, klik DownLoad Full Template!

2. Masukkan kode HTML ini di bawah <head> :

<meta CONTENT='120' HTTP-EQUIV='refresh'/>

And then, jangan lupa simpan hasil pekerjaan sobat.

angka yang berwarna merah adalah kurun waktu yang diinginkan untuk merefresh halaman dalam satuan detik, bisa di ubah sesuai kehendak.

Saran saya jangan telalu cepat merefresh halaman sobat karena apabila loadingnya belum selesai akan loading lagi sesuai dengan nilai waktu yang diberikan sobat.

Ok, sampai di sini pembelajaran HTML-annya , kalau memang ada ilmu HTML-an lainnya akan saya sampaikan ke sobat blogger. Happy blogging and tetap menjalankan ibadah puasa jangan sampai kaga soalnya wajib!!! (wew, ko malah dakwah-red).

Membuat read more sesuai dengan judul postingan

Bagi sobat blogger pastinya sudah tidak asing lagi dengan istilah read more atau baca lebih lengkap, bagi yang sudah menerapkan read more di blognya bisa menggunakan blogger trick ini, tapi kalau belum ya pasang dulu bro :p ,banyak tutorial blog yang mengajarkan bagaimana cara membuat readmore ini, contohnya blog ini , itu, dan ini juga. Bagi yang belum menerapkan silahkan ke blog tutor tersebut, tapi kalau sudah pasang read more di blog sobat bisa melanjutkan blogger trick ini. Nih saya kasih screenshot biar sobat tahu maksud postingan ini.

Screenshot:

Tertarik ingin membuatnya?

Langkah-langkah membuat read more sesuai dengan judul postingannya :
1. Seperti biasa, login ke Blogspot, kalau sudah login masuk ke Tata Letak > Edit HTML

Perhatian! Jangan lupa untuk membackup template sobat, klik DownLoad Full Template!

2. Setelah itu centang tanda Expand Template Widget , kalau sudah cari kode di bawah ini :

<a expr:href='data:post.url'>Read more.....</a>


Setelah ketemu ganti dengan kode ini :

<a expr:href='data:post.url'>Read more.....&#8220;<data:post.title/>&#8221;</a>


Perhatian!! membuat readmore banyak sekali tutorial yang beredar, kalau tidak menemukan kode di atas cari dengan menekan Ctrl + F ketikkan keyword "Read more" , atau "Selengkapnya" , atau apabila sudah di modifikasi oleh sobat silahkan cari keyword yang menunjukkan kode read more itu sendiri.

Intinya adalah memasukkan kode ini :
&#8220;<data:post.title/>&#8221;


Di depan kata versi read more yang sobat gunakan.
Kalau masih belum jelas silahkan YM saya, atau tinggalkan komentar insya Allah saya bisa membantu sobat. OK, sobat happy blogging dan selamat menunaikan ibadah puasa.

Membuat dropcap (2)

Sehabis sahur dengan kondisi masih kenyang langsung membuat blogger trik :p , sesuai dengan judulnya kali ini saya akan memposting bagaimana membuar drop cap atau hurup di awal kalimat menjadi besar seperti huruf di majalah/koran, tetapi kali ini berbeda metode dengan versi sebelumnya, jika belum baca versi membuat drop cap sebelumnya silahkan klik di sini, perbedaannya terletak bagaimana cara mempostingnya. Kalau mau lihat syle drop cap seperti di bawah ini :

Versi 1 :
T


Versi 2 :
T




Mau tahu perbedaannya ?

Sebenarnya pada versi sebelumnya, ukuran drop cap nya bisa di ubah baik itu besar font,style ataupun tinggi fontnya. Tetapi cara mempostingnya saja yang berbeda. Untuk mengetahui perbedaannya silahkan masukkan kode di bawah ini sebelum tag ini ]]</b:skin> :

.post caps {
float:left;
color: #3F3F3F;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}

Kalau sudah selesai save hasil pekerjaan sobat.

Sekarang tinggal mempraktekkannya, apabila ingin memakai drop cap versi 2 ini, sobat hanya tinggal masukkan kode ini di dalam Edit HTML/compose mode sebagai contoh penggunaannya:

<caps>L</caps>orem ipsum dolor sit amet, consectetuer jquery rules! elit, sed diam nonummy nibh euismod tincidunt ut laoreLorem ipsum dolor sit amet, consectetuer jquery rules! elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam et dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut jquery rules! ex ea commodo consequat

Maka hasilnya seperti di bawah ini :

Lorem ipsum dolor sit amet, consectetuer jquery rules! elit, sed diam nonummy nibh euismod tincidunt ut laoreLorem ipsum dolor sit amet, consectetuer jquery rules! elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam et dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut jquery rules! ex ea commodo consequat

Yups, perbedaan hanya bagaimana cara mempostingnya, kalau sebelumnya dengan memakai kode ini :

<span class="dropcap"> </span>

Sekarang memakai kode ini :

<caps> </caps>

Kembali ke sobat mau menggunakan metode mana, menurut saya yang simple-simple aja ya gak? Ok, sobat blogger karena sudah masuk adzan subuh saya mau sholat dulu, selamat menunaikan ibadah puasa bagi yang menjalankannya and happy blogging :D .