MasdaZine View RSS

Mengenai langkah pembuatannya silakan anda ikuti langkah-langkah di bawah ini.

1. Login seperti biasa ke blogger.com
2. klik Rancangan, kemudian pilih Edit HTML, ada baiknya jika anda download dulu template lengkap anda
3. Beri tanda centang pada Expand Template Widget
4. Cari kode seperti ini
   ]]></b:skin>
5. Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi
   
   

   .breadcrumbs {
   padding: 5px 5px 5px 0;
   margin: 0 0 5px;
   font-size: 95%;
   line-height: 1.4em;
   border-bottom: 1px solid #ccc;
   }

6. Kemudian cari lagi kode seperti ini
   
   <a expr:name='data:post.id'/>
   <b:if cond='data:post.title'>
   <h3 class='post-title entry-title'>
   <b:if cond='data:post.link'>
   <a expr:href='data:post.link'><data:post.title/></a>
7. Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi
   
   

   <b:if cond='data:blog.homepageUrl == data:blog.url'>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='breadcrumbs'>
   You Are Here &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
   <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
   </b:loop>
   </b:if> &#187; <data:post.title/>
   </div>
   </b:if>
   </b:if>

8. klik Simpan

     Sekarang lihat hasilnya, jika anda berhasil maka akan muncul navigasi breadcrumbs di atas judul postingan anda seperti pada blog ini. Selamat mencoba dan semoga bermanfaat.... ^^,

Mengenai bagaimana cara membuatnya silakan ikuti langkah di bawah ini.

1. Login ke blogger.com
2. Klik Rancangan
3. Klik Edit HTML, tidak perlu memberi centang pada Expand Widget Template
4. Cari kode berikut
   
   </head>
   
   
5. Copy kode di bawah ini dan letakkan tepat sebelum (di atas) kode tadi
   
   

   <style type='text/css'>
   #menu-wrapper {
   margin: 0;
   padding: 5px 10px 5px 0;
   background: #b7b7ff;
   font-size: .9em;
   line-height: 22px;
   border-top: 1px solid #a8a8ff;
   border-bottom: 1px solid #a8a8ff;
   }
   .menu {
   margin: 0;
   float: left;
   height: 26px;
   }
   .menu ul {
   margin: 0;
   padding: 6px 0 0 10px;
   font-weight: bold;
   list-style-type: none;
   text-align: left;
   }
   .menu li {
   display: inline;
   margin: 0;
   }
   .menu li a {
   text-decoration: none;
   margin: 0;
   padding: 4px 10px;
   color: #32527a;
   }
   .menu li a:hover {
   background: #c6c6ff;
   color: #64527a;
   }
   .current-cat{
   padding: 5px 10px;
   color: #64527a;
   background:#c6c6ff;
   border: 1px solid #a8a8ff;
   -moz-border-radius: 5px; -webkit-border-radius: 5px;
   border-radius: 5px;
   }
   .actived a {
   color: #64527a !important;
   }
   </style>
   
   <script type='text/javascript'>
   function currentpage (url,current,name) {
   var name = name ;
   var url = url;
   var current = current;
   if (current == url) {
   document.write (&#39;&lt;li class=&quot;current-cat&quot;&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
   }
   else {
   document.write (&#39;&lt;li&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
   }
   }
   </script>

   p
6. Cari lagi kode seperti ini
   
   <div id='header-wrapper'>
7. Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi (langkah ini menentukan letak navigasi anda, apabila diletakkan sebelum kode tadi maka menu anda akan berada di atas header. Dan sebaliknya apabila kode diletakkan setelah end tag kode tadi maka navigasi akan berada di bawah header.)
   
   

   <div id='menu-wrapper'>
   <b:section class='menu' id='menubar' showaddelement='no'>
   <b:widget id='LinkList1' locked='false' title='' type='LinkList'>
   <b:includable id='main'>
   <ul>
   <b:loop values='data:links' var='link'>
   <script type='text/javascript'> currentpage(&quot;<data:link.target/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:link.name/>&quot;); </script>
   </b:loop>
   </ul>
   </b:includable>
   </b:widget>
   </b:section>
   </div>

8. Klik Simpan

     Untuk menambahkan link pada navigasi, silakan masuk Rancangan » Elemen Halaman » pilih Daftar Link. Tambahan Url yang ingin anda pasang pada navigasi. Setelah selesai jangan lupa klik Simpan. Sekarang cek ke blog anda, ^^, semoga bermanfaat dan happy blogging....

Features:

1. Blue and white
2. 3 Columns
3. 3 Footer Columns
4. Bubble Comments
5. Highlight Author Comments
6. Current Navigation
7. Form Search
8. Auto Readmore With Thumbnail
9. Related Posts
10. Avatar On Comments

Tested:

1. Firefox
2. Chrome
3. Opera
4. IE

     Untuk melihat livenya silakan klik DI SINI. bagi yang berminat menggunakan template ini, silakan download DI SINI.

STEP 1

1. Login ke blogger.com
2. Klik Rancangan
3. Klik Edit HTML
4. Cari kode berikut
   
   </head>
   
   Copy kode di bawah ini, lalu letakkan tepat di atas kode tadi.
   
   

   <style type="text/css">
   /* --- button --- */
   .button{
   background:url(http://i46.tinypic.com/2rbz7rt.png) -32px right no-repeat;
   color:#FFFFFF;
   clear:both;
   display:block;
   float:left;
   font-size:13px;
   font-weight:bold;
   height:31px;
   line-height:31px;
   width:auto;
   margin-right:30px;
   }
   a.button {
   text-decoration:none;
   }
   .button span {
   background:url(http://i46.tinypic.com/2rbz7rt.png) left top no-repeat;
   display:block;
   height:31px;
   line-height:31px;
   padding-left:10px;
   padding-right:8px;
   margin-right:20px;
   }
   /* --- vertical menu --- */
   .v-menu{
   border:solid 1px #7F9FBF;
   width:200px;
   clear:both;
   }
   ul.v-menu, .v-menu li{
   padding:0;
   margin:0;
   list-style:none;
   }
   ul.v-menu{
   clear:both;
   margin-top:6px;
   padding:6px 10px;
   }
   .v-menu li a{
   color:#555555;
   font-weight:bold;
   display:block;
   border-top:solid 1px #DEDEDE;
   padding:4px;
   text-decoration:none;
   }
   .v-menu li a:hover{
   color:#999999;
   }
   </style>
   <script type="text/javascript">
   function showElement(layer){
   var myLayer = document.getElementById(layer);
   if(myLayer.style.display=="none"){
   myLayer.style.display="block";
   myLayer.backgroundPosition="top";
   } else {
   myLayer.style.display="none";
   }
   }
   </script>

5. Klik Simpan

STEP 2

1. Setelah template anda tersimpan, Klik Rancangan
2. Pada menu Elemen Halaman, pilih Tambah Widget sesuai dengan letak yang anda inginkan
3. Setelah terbuka halaman tambah widget pilih penambahan HTML/JavaScript
4. Pada halaman Konfigurasi HTML/JavaScript beri judul widget anda, kemudian copy kode berikut dan letakkan pada content.
   
   

   <a href="#" class="button" onclick="javascript:showElement ('v-menu')">
   <span>ClickHere</span></a>
   <ul id="v-menu" class="v-menu" style="display: none;">
   <li><a href="http://URL ANDA">TEXT ANDA</a></li>
   <li><a href="http://URL ANDA">TEXT ANDA</a></li>
   <li><a href="http://URL ANDA">TEXT ANDA</a></li>
   <li><a href="http://URL ANDA">TEXT ANDA</a></li>
   <li><a href="http://URL ANDA">TEXT ANDA</a></li>
   </ul>

   
   Keterangan :
   * Pada list item (<li><a href="http://URL ANDA">TEXT ANDA</a></li>), silakan sesuaikan dengan Url yang anda tuju dan juga text anda.
5. Klik Simpan

     Sekarang lihat blog anda, jika anda berhasil membuatnya maka akan terlihat vertical menu seperti di blog saya yang ini. Selamat mencoba dan semoga bermanfaat ^^,. Saya mau blogwalking dulu, kangen ama temen-temen blogger semua....

1. Login ke blogger.com
2. Klik Rancangan
3. Pilih menu Edit HTML (tidak perlu memberi centang pada 'Expand Template Widget')
4. Cari kode berikut
   
   ]]></b:skin>
5. Copy kode berikut ini lalu letakkan tepat di atas kode tadi.
   
   

   .shadow img {
   background: url(http://i50.tinypic.com/10xyg4w.png) no-repeat right bottom;
   padding: 0 6px 6px 0;
   }
   

6. Klik Simpan

     Untuk menerapkan efek shadow pada image kodenya seperti ini.

<div class="shadow"><img border="0" src="http://URL GAMBAR ANDA"/></div>

     Kekurangan dalam langkah ini anda harus memasukkan kode CSS tersebut setiap anda ingin memposting image. ^^, Solusinya di bawah ini adalah penerapan efek shadow pada image secara otomatis.

1. Login ke blogger.com
2. Klik Rancangan
3. Beri centang pada Expand Template Widget
4. Setelah loadnya selesai, Cari kode berikut
   
   <data:post.body/>
5. Lalu sisipkan kode CSS tadi, perhatikan kode di bawah ini
   
   

   <div class="shadow"><data:post.body/></div>

6. Klik Simpan

     Dengan menerapkan langkah kedua ini, begitu anda memposting image pada blog maka akan secara otomatis terdapat shadow pada image tersebut. Semoga bermanfaat...
^^,

1. Tabel 1 kolom
   
   Kodenya:
   
   

   <table border="1">
   <tr><td>Kolom 1</td></tr>
   </table>

   
   Hasilnya:
   
   

   Kolom 1

2. Tabel 2 kolom
   
   

   <table border="1">
   <tr><td>Kolom 1</td><td>Kolom 2</td></tr>
   </table>

   
   Hasilnya:
   
   

   Kolom 1

   Kolom 2

   
   * Dari kode di atas dapat diambil kesimpulan jika tag td menentukan kolom
3. Tabel 2 baris
   
   

   <table border="1">
   <tr><td>Baris 1</td></tr>
   <tr><td>Baris 2</td></tr>
   </table>

   
   Hasilnya:
   
   

   Baris 1

   Baris 2

   
   * Dari kode di atas dapat diambil kesimpulan jika tag tr menentukan Baris
4. Tabel 1 Kolom 2 Baris
   
   

   <table border="1">
   <tr><td rowspan="2">Kolom 1</td><td>Baris 1</td></tr>
   <tr><td>Baris 2</td></tr>
   </table>

   
   Hasilnya:
   
   

   Kolom 1	Baris 1
   	Baris 2

   
   * Dari kode di atas dapat diambil kesimpulan jika tag rowspan berfungsi untuk penggabungan cell dalam satu kolom dan angka 2 pada rowspan menentukan jumlah cell yang digabung
5. Tabel 1 Baris 2 Kolom
   
   

   <table border="1">
   <tr><td colspan="2">Baris 1</td></tr>
   <tr><td>Kolom 1</td><td>Kolom 2</td></tr>
   </table>

   
   Hasilnya:
   
   

   Baris 1
   Kolom 1	Kolom 2

   
   * Dari kode di atas dapat diambil kesimpulan jika tag colspan berfungsi untuk penggabungan cell dalam satu baris dan angka 2 pada colspan menentukan jumlah cell yang digabung
6. Penggunaan Tag cellpadding dan bgcolor
   
   

   <table border="1" cellpadding="10">
   <tr><td bgcolor="#ff9900">Tabel</tr>
   </table>

   
   Hasilnya:
   
   
   
   
   

   Tabel

   
   * Dari kode di atas dapat diambil kesimpulan jika tag cellpadding berfungsi untuk memberi jarak text dengan border dan angka 10 pada cellpadding menentukan jarak antara text dengan border(dalam satuan px)
   * tag bgcolor berfungsi untuk memberi background warna pada cell




7. Penggunaan tag width, cellspacing, dan align
   
   

   <table border="1" cellspacing="10">
   <tr><td width="200" align="center">Lebar Kolom ini 200px</td>
   <td width="150" align="center">Lebar Kolom ini 150px</td></tr>
   </table>

   
   Hasilnya:
   
   

   Lebar Kolom ini 200px

   Lebar Kolom ini 150px

   
   * Dari kode di atas dapat diambil kesimpulan jika tag cellspacing berfungsi untuk memberi jarak antar cell dan angka 10 pada cellspacing menentukan jaraknya(dalam satuan px)
   * tag align berfungsi untuk mengatur posisi text pada cell pada area horizontal (left,center,right)




8. Penggunaan tag height dan valign
   
   

   <table border="1" valign="middle">
   <tr><td height="100">Tabel</tr>
   </table>

   
   Hasilnya:
   
   
   
   
   

   Tabel

   
   * Dari kode di atas dapat diambil kesimpulan jika tag valign berfungsi untuk mengatur posisi text pada area vertical (top,middle,bottom)
   * tag height berfungsi untuk menentukan tinggi cell (dalam satuan px)

Catatan:
&187; Memberi angka 0 pada border berfungsi untuk mengilangkan border.

     Saya rasa cukup sekian dulu tutorial kali ini. Selanjutnya anda bisa berkreasi sesuai keinginan anda. Semoga bermanfaat.... ^^,

Berikut langkah-langkah untuk membuatnya.

1. Login ke blogger.com
2. Klik Rancangan
3. Klik Edit HTML, kemudian beri centang pada Expand Widget Template
4. Cari kode berikut
   
   ]]></b:skin>
   
   Copy kode di bawah ini lalu letakkan tepat di atas kode tadi.
   
   

   .owner-Body {
   background: #f6f6f6;
   margin-top: -7px;
   padding-left: 10px;
   padding-top: 10px;
   border-right: 1px solid #999;
   border-bottom: 1px solid #999;
   border-left: 1px solid #ccc;
   }
   .owner-Body p {
   margin: 0;
   padding-bottom: 15px;
   }

   
   * pada background, kode warna #f6f6f6 menentukan warna background komentar admin. Anda bisa menggantinya sesuai dengan keinginan anda
   * anda juga bisa menambahkan image pada kotak komentar admin dengan menambahkan kode berikut url(http://image anda) setelah kode warna (beri spasi)
5. Kemudian cari kode berikut
   
   

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

   
   Copy kode di bawah ini kemudian sisipkan pada kode di atas
   
   

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

   
   Penempatannya seperti ini
   
   

   <data:commentPostedByMsg/>
   </dt>
   <b:if cond='data:comment.author == data:post.author'>
   <dd class='owner-Body'>
   <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>

6. Klik Simpan

Sekarang anda buka blog anda dan berikan komentar pada blog anda sendiri dan bedakan dengan tampilan komentar sebelum anda menambahkan kode-kode di atas. Semoga bermanfaat dan happy blogging.... ^^,

1. solid
2. dotted
3. dashed
4. double
5. groove
6. ridge
7. inset
8. outset

     Nah sebagai contoh penjelasannya kita gunakan kode berikut.

<div style="width :200px; padding: 10px; background: #f7f8f8; color: #f00; font-weight: bold; border: 4px solid #000;"> CONTENT ANDA </div>

     Perhatikan kode di atas.

pada kode border, 4px menunjukkan ketebalan border

pada kode yang berwarna merah solid merupakan kode untuk border yang akan berupa garis biasa.

setelah kode solid, terdapat kode warna #000, yang merupakan warna dari border tersebut

     Untuk mengetahui perbedaan bordernya maka kita tinggal mengganti kode solid, dengan kode-kode sesuai dengan kode yang sudah saya tulis diatas.

1. Dari kode di atas maka akan terbentuk sebuah kolom seperti ini
   
   
   CONTENT ANDA
2. Selanjutnya kita ganti kode solid dengan dotted, hasilnya seperti ini.
   
   
   CONTENT ANDA
3. Selanjutnya kita ganti kode dotted dengan dashed, hasilnya seperti ini.
   
   
   CONTENT ANDA
4. Selanjutnya kita ganti kode dashed dengan double, hasilnya seperti ini.
   
   
   CONTENT ANDA
5. Selanjutnya kita ganti kode double dengan groove, hasilnya seperti ini.
   
   
   CONTENT ANDA
6. Selanjutnya kita ganti kode groove dengan ridge, hasilnya seperti ini.
   
   
   CONTENT ANDA
7. Selanjutnya kita ganti kode ridge dengan inset, hasilnya seperti ini.
   
   
   CONTENT ANDA
8. Selanjutnya kita ganti kode inset dengan outset, hasilnya seperti ini.
   
   
   CONTENT ANDA

     Kode diatas hanyalah sebagai contoh saja, pada intinya saya hanya menjelaskan macam-macam border pada CSS3. semoga bermanfaat... ^^,

Tips yang saya maksudkan adalah pemberian nomor pada kotak komentar. Untuk Live demo silakan klik di sini di sini. Untuk membuatnya silakan ikuti langkah-langkah berikut.

1. Login ke blogger.com
2. Klik Rancangan
3. Klik Edit HTML, kemudian beri centang pada Expand Widget Template
4. STEP 1
   Cari kode berikut
   
   ]]></b:skin>
   
   Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.
   
   

   .comments-counter a:link,.comments-counter a:visited {
   color: #000 !important;
   text-decoration: none !important;
   background: url(http://i47.tinypic.com/99m5on.jpg) no-repeat;
   width: 50px;
   height: 48px;
   float: right;
   display: block;
   margin-right: 5px;
   margin-top: -15px;
   text-align: center;
   font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
   font-size: 15px;
   font-weight: normal;
   }
   .comments-counter a:hover,.comments-counter a:active {
   color: #666 !important;
   text-decoration: none !important;
   }

5. STEP 2
   Kemudian cari kode berikut
   
   <b:loop values='data:post.comments' var='comment'>
   
   Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.
   
   

   <script type='text/javascript'>var CommentsCounter=0;</script>

6. STEP 3
   Terakhir cari kode berikut
   
   <data:commentPostedByMsg/>
   
   Copy kode berikut lalu letakkan tepat di bawah (setelah) kode tadi
   
   

   <span class='comments-counter'>
   <a expr:href='data:comment.url' title='Comment Link'>
   <script type='text/javascript'>
   CommentsCounter=CommentsCounter+1;
   document.write(CommentsCounter)
   </script>
   </a>
   </span>

7. klik Simpan

     Sekarang lihat blog anda, buka postingan anda yang memiliki komentar. Perhatikan kotak komentar pada bagian kanan. Anda dapat mengatur posisi angka pada icon bubble dengan menyesuaikan kode yang berwarna merah pada STEP 1. Anda juga bisa mengganti icon bubble sesuai dengan keinginan anda dengan cara mengganti url yang berwarna biru dan jangan lupa sesuaikan juga kode yang berwarna orange dengan ukuran icon bubble anda (STEP 1). Semoga bermanfaat...^^,

Bagi anda yang berminat menggunakan template ini untuk blog anda, silakan klik image di atas untuk mendownloadnya. ^^, happy blogging...

Langsung aja berikut langkah-langkahnya.

1. Login ke blogger.com
2. Klik Rancangan
3. Klik Edit HTML, kemudian beri centang pada Expand Widget Template
4. Cari kode berikut
   
   ]]></b:skin>
   
   Copy kode di bawah ini lalu letakkan tepat di atas kode tadi.
   
   

   .comm-link {
   padding: 9px 0 0 26px;
   margin: 10px 0 0 0;
   font-size: 10px;
   font-family: Arial,Tahoma,Verdana;
   text-transform: capitalize;
   background: transparent url('http://i48.tinypic.com/2u8z29z.png') no-repeat left;
   }

   
   Keterangan :
   *Kode yang berwarna merah adalah kode image (bubble), image pada URL tersebut seperti image pada awal postingan ini (ukuran 24px X 24px). Silakan ganti apabila anda menginginkan image yang laen.
5. Kemudian cari lagi kode berikut
   
   <div class='post-header-line-1'/>
   
   Copy kode berikut lalu letakkan tepat di bawah kode tadi
   
   

   <b:if cond='data:post.allowComments'>
   <a class='comm-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
   <b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:commentLabelPlural/></b:if>
   </a>
   </b:if>

6. klik Simpan

     Terakhir anda tinggal melihat hasilnya, ^^, semoga bermanfaat.

Langsung saja untuk anda yang berminat untuk membuatnya, silakan ikuti langkah-langkah di bawah ini.

1. Login ke blogger.com
2. Klik Rancangan, (berhubung sekarang Blogger.com menyediakan fitur baru (desain template), maka fitur tata letakpun berada dalam fitur Rancangan)
3. Klik Edit HTML, kemudian beri centang pada Expand Widget Template
4. Cari kode berikut
   
   </head>
5. Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.
   
   

   <style type="text/css">
   .comment-bubble {
   float: right;
   background: url(http://i46.tinypic.com/df97c4.jpg) no-repeat;
   width: 55px;
   height: 40px;
   font-size: 18px;
   margin-top: -15px;
   margin-right: 2px;
   text-align: center;
   }
   </style>

   
   Keterangan :
   
6. Kode yang berwarna merah merupakan Url tempat anda menyimpan image bubble. Jika anda menggunakan Url di atas maka image bubble yang anda gunakan seperti ini
   
   
   


7. Kode yang berwarna biru pada width dan height silakan sesuaikan dengan ukuran image anda.
8. Cari lagi kode seperti ini
   
   <h3 class='post-title entry-title'>
9. Copy kode di bawah ini lalu letakkan tepat di bawah kode tadi.
   
   

   <b:if cond='data:post.allowComments'>
   <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
   </b:if>

10. Klik Simpan

     Selanjutnya silakan lihat blog anda. Perhatikan bagian disamping kanan judul postingan anda. Semoga bermanfaat...

Silakan baca lebih lanjut langkah-langkah untuk membuatnya.

1. "Login" seperti biasa di acount blogger anda
2. Klik "Tata Letak", lalu klik "Edit HTML"
3. Cari kode berikut :
   
   </head>
   
   Copy kode di bawah ini lalu letakkan (paste) tepat di atas (sebelum) kode tadi.
   
   
   

   <style type="text/css">
   a.linkopacity img {
   filter: alpha(opacity=50);
   -moz-opacity: 0.5;
   opacity: 0.5;
   -khtml-opacity-: 0.5;
   }
   
   a.linkopacity:hover img {
   filter: alpha(opacity=50);
   -moz-opacity: 1.0;
   opacity: 1.0;
   -khtml-opacity-: 1.0;
   }
   </style>

4. Klik Simpan

     Langkah selanjutnya adalah cara menerapkan efek blur pada image. Seperti umumnya kode yang digunakan untuk membuat link pada image adalah seperti berikut

<a href="URL YANG ANDA TUJU"><img src="HOSTING IMAGE ANDA"></a>

Silakan anda ganti kode di atas menjadi seperti ini

<a class="linkopacity" href="URL YANG ANDA TUJU"><img src="HOSTING IMAGE ANDA"></a>

Namun apabila anda tidak menginginkan image yang berupa link, kodenya sebagai berikut

<a class="linkopacity"><img src="HOSTING IMAGE ANDA"></a>

     Kode yang berwarna merah adalah kode yang harus anda tambahkan. Sekian dulu trik dari saya, semoga bermanfaat, dan happy blogging..... ^^,

<div style="overflow:auto; width:300px; height:150px; padding:10px; border:1px solid #eee">letakkan content anda di sini</div>

Keterangan :

1. pada kode width, angka 300 menunjukkan lebar kotak scroll
2. pada kode width, angka 150 menunjukkan tinggi kotak scroll
3. pada kode border, kode #eee menunjukkan warna border kotak scroll

Misalnya saya ingin membuat daftar nama teman-teman saya.


     Dengan sedikit penambahan kode CSS diatas, efek scrollpun jadi. ^^, Selamat mencoba dan semoga bermanfaat.

Mungkin sudah tidak asing lagi bagi anda yang sering utak atik template. Namun bagi anda yang belum begitu familiar jangan berkecil hati. tidak ada kata terlambat untuk belajar.

     Klik DI SINI untuk men-download tabel kumpulan kode-kode CSS3 secara lengkap (PDF). Info selengkapnya silakan kunjungi veign.com.

#NavbarMenu {
background:#434343; /*-- warna background navigasi --*/
width:900px; /*-- lebar navigasi --*/
height:34px; /*-- tinggi navigasi --*/
color:#ccc; /*-- warna teks navigasi --*/
margin:0 auto;
padding:0;
font:bold 8px Arial,Tahoma,Verdana;
}

#NavbarMenuleft {
width:650px; /*-- lebar menu (biasanya bagian kanan untuk kotak pencarian) --*/
float:left; /*-- posisi menu --*/
margin:0;
padding:0;
}

#nav {
margin:0;
padding-top:3px;
}

#nav ul {
float:left;
list-style:none;
margin:0;
padding:0;
}

#nav li {
list-style:none;
margin:0;
padding:0;
}

#nav li a, #nav li a:link, #nav li a:visited {
color:#ccc; /*-- warna teks menu --*/
display:block;
text-transform:uppercase;
margin:0;
padding:9px 15px 8px;
font:bold 12px Arial,Times New Roman;
}

#nav li a:hover, #nav li a:active {
background:#333; /*-- warna background menu drop down --*/
color:#FFF; /*-- warna teks pada menu drop down --*/
margin:0;
padding:9px 15px 8px;
text-decoration:none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#333; /*-- warna background menu drop down --*/
width:150px; /*-- lebar menu drop down --*/
color:#ccc; /*-- warna teks pada menu drop down --*/
text-transform:lowercase;
float:none;
margin:0;
padding:7px 10px;
border-bottom:1px solid #131313; /*-- warna border bawah pada menu drop down --*/
border-left:1px solid #131313; /*-- warna border kiri pada menu drop down --*/
border-right:1px solid #131313; /*-- warna border kanan pada menu drop down --*/
font:normal 14px Georgia,Times New Roman;
}

#nav li li a:hover, #nav li li a:active {
background:#434343; /*-- warna background aktif menu drop down --*/
color:#fff; /*-- warna teks aktif pada menu drop down --*/
padding:7px 10px;
}


#nav li {
float:left;
padding:0;
}

#nav li ul {
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px; /*-- lebar menu drop down --*/
margin:0;
padding:0;
}


#nav li ul a {
width:140px; /*-- lebar menu drop down --*/
}

#nav li ul ul {
margin:-32px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left:-999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}

#nav li:hover, #nav li.sfhover {
position:static;
}

* Silakan sesuaikan dengan template anda semua kode yang saya beri warna merah.

     Copy kode di atas lalu simpan dulu di note atau editor text lainnya. Kemudian ikuti langkah berikut.

1. Login akun blogger anda.
2. Klik Tata Letak, kemudian klik Edit HTML
3. Expand widget template, setelah prosesnya selesai, cari kode berikut ]]
4. Letakkan kode yang anda copy tadi tepat di atas kode ]]
5. Copy kode di bawah ini
   
   

   <div id='NavbarMenu'>
   <div id='NavbarMenuleft'>
   <ul id='nav'>
   <li><a href='URL'>Menu 1</a></li>
   <li><a href='URL'>Menu 2</a></li>
   <li><a href='#'>More &#187;</a>
   <ul>
   <li><a href='#'>Menu Drop Down 1#1&#187;</a>
   <ul>
   <li><a href='#'>Menu Drop Down 2#1 &#187;</a>
   <ul>
   <li><a href='URL'>Menu Drop Down 3#1</a></li>
   <li><a href='URL'>Menu Drop Down 3#2</a></li>
   </ul>
   </li>
   <li><a href='URL'>Menu Drop Down 2#2</a></li>
   </ul>
   </li>
   <li><a href='URL'>Menu Drop Down 1#2</a></li>
   </ul>
   </li>
   </ul>
   </div>
   </div>

   
   * Ganti URL dengan url yang anda tuju.
6. Lalu cari lagi kode <div id='header-wrapper'>
7. Apabila anda ingin navigasi berada di atas header, letakkan kode tadi (kode kedua) tepat diatas kode <div id='header-wrapper'>
8. Tetapi apabila anda ingin navigasi berada di bawah header, letakkan kode tadi di bawah kode end tag header-wrapper. </div><!-- end header-wrapper -->
9. Setelah selesai klik Simpan

     Cukup panjang kan kodenya?, ^^ Silakan lihat hasilnya, Semoga bermanfaat...

     Kolom di atas di bentuk dari kode ini.

<div style="width:250px;
-moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px; margin:0; padding:10px; background:#eee; border:1px solid #ccc; height:75px;"> ISI CONTENT </div>

Keterangan:

Kode yang berwarna merah ialah kode yang harus ditambahkan

Ukuran 15px merupakan ukuran border yang ingin di buat melengkung. Lihat gambar di bawah ini.

     Berikut ini contoh penerapan rounded corner pada navigasi/menu blog.

/*-- Misalkan kode navigasi/menu anda seperti ini --*/
#Nav {
width: 900px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
height: 34px;
margin: 0px auto;
position:relative;
top: 14px;
text-align: center;
line-height: normal;
}

     Untuk lebih jelasnya, silakan anda baca DI SINI. Semoga bermanfaat...

Langsung aja gan nih caranya.

1. Login ke blog anda.
2. Klik Tata Letak
3. Klik add gadget (Pilih letak sesuai keinginan anda)
4. Pilih/Klik HTML/JavaScript
   
   
5. Beri title widget anda, kemudian Copy paste kode di bawah ini.
   
   

   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
   <script>
   new TWTR.Widget({
   version: 2,
   type: 'profile',
   rpp: 1, //jumlah status terakhir yang ditampilkan
   interval: 6000,
   width: 250, //lebar widget
   height: 300, //tinggi widget
   theme: {
   shell: {
   background: '#0066ff', //warna background profil
   color: '#030303' //warna teks profil
   },
   tweets: {
   background: '#0099ff', //warna background status
   color: '#060606', //warna teks status
   links: '#ff9933' //warna link
   }
   },
   features: {
   scrollbar: false,
   loop: false,
   live: false,
   hashtags: true,
   timestamp: true,
   avatars: false,
   behavior: 'all'
   }
   }).render().setUser('adhityamasda').start();
   </script>

   
   Keterangan:
   * kode berwarna orangemerupakan keterangan kode yang berwarna merah pada masing-masing baris. Silakan sesuaikan dengan warna yang anda inginkan.
   * Pada features, kode yang berwarna merah (false dan true) mewakili ya dan tidaknya sebuah fitur. Misalkan pada fitur scrollbar anda ganti kode false menjadi true, maka tampilan widgetpun akan disertai scroll
   * adhitya silakan ganti dengan username akun anda.
   





6. Klik Simpan

     Setelah semua selesa silakan lihat blog anda, langkah di atas di katakan berhasil apabila di blog anda muncul Update Twitter Widget seperti di bawah ini.      Selamat mencoba dan semoga bermanfaat...

Langsung saja untuk cara membuatnya kurang lebih seperti ini.

1. Copy kode di bawah ini, lalu simpan dulu di notes atau editor text lainnya.
   
   

   
   <script src="http://masda.googlecode.com/files/recentcomments.js">
   </script>
   <script src="http://masdazine.blogspot.com/feeds/comments/default?max-results=5&alt=json-in-script&callback=showrecentcomments">
   </script>

   
   Keterangan:
   * URL yang berwarna merah (http://masdazine.blogspot.com) silakan ganti dengan URL anda.
   * Angka yang berwarna merah (5) merupakan jumlah comments terakhir yang akan ditampilkan.
2. Login akun blog anda
3. Klik Tata Letak, kemudian klik Add Gadget sesuai tempat yang anda inginkan untuk memasang widget recent comments ini
4. Pilih/Klik HTML/JavaScript
5. Beri title untuk widget anda, kemudian paste code yang anda copy tadi
6. Klik Simpan

     Sekarang lihat blog anda, muncul nggak recent commentnya??? Semoga bermanfaat...

Untuk memasangnya silakan ikuti langkah-langkah di bawah ini.

1. Copy kode di bawah ini, lalu simpan dulu di notes atau editor text lainnya.
   
   

   <script language="JavaScript">
   imgr = new Array();
   imgr[0] = "http://i45.tinypic.com/1z70ynn.jpg";
   showRandomImg = true;
   boxwidth = 300; //lebar widget
   cellspacing = 6; //jarak antar post
   borderColor = "#ccc"; //warna border widget
   bgTD = "#fff"; //warna background widget
   thumbwidth = 40; //ukuran lebar thumbnail
   thumbheight = 40; //ukuran tinggi thumbnail
   fntsize = 12; //ukuran font
   acolor = "#333";
   aBold = true;
   icon = " ";
   text = "comments";
   showPostDate = false;
   summaryPost = 40;
   summaryFontsize = 10;
   summaryColor = "#333";
   icon2 = " ";
   numposts = 5; //jumlah postingan yang ditampilkan
   home_page = "http://masdazine.blogspot.com/";
   </script> //ganti dengan URL blog anda
   <script src="http://masda.googlecode.com/files/recentpostswiththumbnail.js"></script>

   
   * text yang berwarna orange merupakan penjelasan kode yang berwarna merah pada masing-masing baris.
   
2. Login akun blog anda
3. Klik Tata Letak, kemudian klik Add Gadget sesuai tempat yang anda inginkan untuk memasang widget recent post ini
4. Pilih/Klik HTML/JavaScript
5. Beri title untuk widget anda, kemudian paste code yang anda copy tadi
6. Klik Simpan

     Sekarang lihat blog anda, sudah muncul atau belum widget Recent posts yang baru saja anda pasang.

dikarenakan pada blogger (blogspot) tidak menyediakan layanan ini, kita harus menggunakan pihak ketiga. Untuk mendaftar silakan anda kunjungi http://mippin.com/web/maker/signUp.jsp. Kekurangan tentu ada pada hasil blog kita yang telah diconvert, antara lain penulisan kode yang tidak terbaca dan tidak adanya form komentar. Untuk lebih jelasnya anda bisa melihat blog saya versi mobile di http://mippin.com/masdazine.

M

Cara membuatnya cukup dengan menambahkan kode seperti ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>

dan

</b:if>

     Penempatannya kode pertama diletakkan sebelum kode elemen yang akan muncul pada halaman selanjutnya, kemudian kode kedua diletakkan setelah end tag kode elemen yang akan muncul di halaman selanjutnya. Misalnya saya ingin elemen sidebar hanya akan muncul pada halaman selanjutnya pada template saya, contohnya seperti ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sidebar'>
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'/>
.....
.....
</div><!--- end sidebar --->
</b:if>

     Ingat penambahan kode sebelum tag pembuka dan setelah tag penutup. Selamat mencoba dan semoga bermanfaat...

     Pada saat posting, tanda anda sadari ketika memasukkan title post yang panjang, secara otomatis title post tersebut akan terpotong menjadi 5 atau 6 kata. Jadi misalkan saya memasukkan title post seperti ini, optimasi title post sebagai keyword yang tangguh maka pada url akan terlihat seperti ini http://masdazine.blogspot.com/2010/05/optimasi-title-post-sebagai-keyword.html. Itulah salah satu hal yang menyebabkan postingan kita tidak terbaca oleh search engine.

     Untuk mengatasi masalah seperti di atas, maka kita usahakan agar tidak menulis title post yang terlalu panjang, yakni mengoptimalkan title post tersebut sebagai keyword. Jadi kita tulis saja seperti ini, title post sebagai keyword tangguh. Kemudian klik publish postingan anda, setelah postingan berhasil dipublish, kita klik lagi edit entri, dan ubahlah title post anda menjadi kalimat utuh. Setelah selesai anda tinggal mempublishnya kembali. Maka di urlnya-pun akan tampak seperti ini http://masdazine.blogspot.com/2010/05/title-post-sebagai-keyword-tangguh.html. hehe...kalimat pertama yang dipublish itulah yang menjadi url. Semoga bermanfaat....

S

Saya yakin anda pasti pernah menjumpai template seperti itu. Untuk membuat tampilan seperti itu cukup mudah, yakni dengan menambahkan kode seperti ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>

dan

</b:if>

     Penempatannya kode pertama diletakkan sebelum kode elemen yang akan dihilangkan pada halaman selanjutnya, kemudian kode kedua diletakkan setelah end tag kode elemen yang akan di hilangkan. Misalnya saya ingin menghilangkan elemen bottom pada halaman selanjutnya pada template saya, contohnya seperti ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='bottom'>
<b:section class='bottom' id='bottom' preferred='yes' showaddelement='yes'/>
.....
.....
</div><!--- end bottom --->
</b:if>

     Cukup mudah kan? Semoga bermanfaat...

Seperti apa yang sudah dijelaskan oleh Mani Khartik, seorang blogger asal India yang sudah melakukan pengujian terhadap template tersebut. Berikut inilah 6 template yang dimaksud.

1. Simple blogger template by Final Sense
2. Blue Square by Template Panic
3. Nyoba 780 by Free Blogger Template
4. Bussines Profesional by Isnaini
5. Eagle by Final Sense
6. Yellow Simple by Final Sense

     Dari 6 template di atas kita harus bangga dengan karya anak Negeri yakni mas Isnaini, yang telah membuat template dan masuk dalam daftar di atas (point 3 dan 4). Semoga bermanfaat...