Senin, 18 Juli 2011

Manipulasi Tag Heading (Referensi)

Hai Bloggersz,
Hari ini saya akan memposting : Manipulasi Tag Heading (Referensi). Saya hanya memberikan kode referensi saja dan semoga bermanfaat bagi kalian, ok Ke TKP :
1. Login blogger.com
2. Klik Rancangan
3. Ke Edit HTML
4. Checklist Expand Template Widget.
5. Solusi Manipulasi tag heading judul postingan :
a. Cari kode ini :

<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>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
</b:if>
b. Ganti semua tulisan itu dengan kode di bawah ini :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
      <h2 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
</b:if>
<b:else/>
      <h1 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
</b:if>
6. Manipulasi Judul Blog :
a. Cari kode seperti di bawah ini :
<h1 class='title' style='background: transparent; border-width: 0px'>
   <b:include name='title'/>
</h1>
b. Ganti dengan kode ini :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
          <h1 class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
<b:else/>
          <p class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </p>
</b:if>
c. Cari kode di bawah ini :
<h1 class='title'>
  <b:include name='title'/>
</h1>
d. Ganti kode di atas dengan di bawah ini :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
<b:else/>
        <p class='title'>
          <b:include name='title'/>
        </p>
</b:if>
6. Lakukan pengeditan CSS anda :
a. Cari kode yang mirip seperti di bawah ini :
post h3 {
..................................
}

.post h3 a, .post h3 a:visited{
 ..................................................
}

.post h3 a:hover {
....................................
}
b. Ganti kode yang mirip di atas dengan ini :
.post h1, .post h2 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

.post h1 a, .post h1 a:visited, .post h1 strong,  .post h2 a, .post h2 a:visited, .post h2 strong{
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}

.post h1 strong, .post h1 a:hover, .post h2 strong, .post h2 a:hover {
  color:$textcolor;
}
c. Terakhir cari lagi kode seperti di bawah ini :
#header h1 {
............................
}
d. Ganti kode di atas dengan kode di bawah ini :
#header h1, #header p {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}
8. Anda selesai mengerjakan tugas kalian hehehe. CSSnya boleh di sesuaikan dengan masing-masing, maksudnya kode warna, fontnya, tetapi jangan letaknya.
Akhir kata,
Semoga bermanfaat bagi kita semua.

(sumber kode : Mas Doyok )
Disqus Comments