Membuat Tanggal Posting ala Dynamic View Blogger Templates

Membuat date header/tanggal posting ala Tampilan Dinamis/Dynamic View Blogger Templates.

Berbagai macam bentuk tanggal posting dpat kita buat dan tampilkan didalam blog. Jika dibeberapa waktu sebelumnya kita sudah banyak jumpai tutorial blogger tentang "cara membuat tanggal posting dalam bentuk icon calender", maka kali ini kita akan membuat "tanggal posting atau date header ala template blogger Tampilan Dinamis/Dynamic View" seperti yang terlihat pada image/gambar disamping.

Tanggal posting seperti yang ditampilkan Dynamic View Blogger Template mempunyai bentuk yang terlihat berbeda dari bentuk tanggal posting yang lain. Jika kita arahkan cursor di atas tannggal Tanggal posting akan terjadi perubahan warna background (efek hover). Hal seperti ini bisa terjadi karena icon calendar tersebut tidak menggunakan background image namun memanfaatkan border property. Hover efek pada borderlah yang kemudian menciptakan perubahan warna background.

D E M O

Cara membuat:

• Login ke Blogger
• Halaman Dasbor/Dasboard
• Tata Letak/Layout
• Klik "Edit" pada elemen/box "Posting blog/Blog Post".
• Mengonfigurasi Posting Blog
  
  • Setting date-header: Lakukan perubahan setting tanggal posting bila belum berbentuk seperti gambar disebelah. Rubah seperti yang anda lihat!
  • Simpan/SAVE
• Cadangkan/Pulihkan (Backup/Restore)
• Template
• Edit HTML
• Template › Edit HTML
  
  • Lanjutkan/Procced
  • Cari kode ]]></b:skin>, kemudian letakkan kode css di atasnya. Gunakan Ctrl + F untuk mempermudah dan mempercepat pencarian kode.
  • Simpan Template/Save Template
  • Copy dan pastekan javascript di bawah kode ]]></b:skin>
  • Simpan Template/Save Template
  • Expand Template Widget
  • Cari Kode <b:if cond='data:post.isDateStart'>
  • Anda akan temukan kode yang seperti ini:
    

    Kode yng harus diganti:

    <b:if cond='data:post.isDateStart'>
      <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
      &lt;/div&gt;&lt;/div&gt;
      </b:if>
      </b:if>
      <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-outer&quot;&gt;
      </b:if>
      <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'>
      <span><data:post.dateHeader/></span>
      </h2>
      </b:if>
      <b:if cond='data:post.isDateStart'>

    Buat kode menjadi seperti berikut:
    

    Kode Baru

    <b:if cond='data:post.isDateStart'>
    <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
    &lt;/div&gt;&lt;/div&gt;
    </b:if>
    </b:if>
    <b:if cond='data:post.isDateStart'>
    &lt;div class=&quot;date-outer&quot;&gt;
    </b:if>
    <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'>
    <script type='text/javascript'>
    date_replace(&#39;<data:post.dateHeader/>&#39;);
    </script>
    </h2>
    </b:if>
    <b:if cond='data:post.isDateStart'>

  • Simpan Template/Save Template.
• Buka blog dan lihat hasilnya!

Kode CSS

.date-outer h2.date-header{
      float:left;
      width:30px;
      height:50px;
      padding:0;
     margin:65px 0 -200px -32px;
      background:none;
}
#myGRdate{
      text-shadow:1px 0px 1px #000;
      background:red;
      height:30px;
      width:30px;
}
#myGRdate .GRmonth{
      font-family:arial;
      margin:0 auto 2px;
      width:30px;
      height:20px;
      background:#666;
      color:#fff;
      text-align:center;
      font-size:13px;
      font-weight:bold;
      padding-top:2px;
}
#myGRdate .GRdate{
      position:relative;
      width:0;
      margin:0 auto;
      height:0;
      border-top:35px solid #666;
      border-left:15px solid #666;
      border-right:15px solid #666;
      border-bottom:10px solid transparent;
}
span.ohdate{
      position:absolute;
      width:40px;
      height:20px;
      text-align:center;
      font-family:Arial,Sans-serif,Tahoma,Verdana;
      font-weight:bold;
      left:-20px;
      top:-32px;
      color:yellow;
      font-size:2em;
}
#myGRdate .GRmonth,#myGRdate .GRdate{
      transition:border-color 2s,background-color 2s;
      -o-transition:border-color 2s,background-color 2s;
      -ms-transition:border-color 2s,background-color 2s;
      -moz-transition:border-color 2s,background-color 2s;
      -webkit-transition:border-color 2s,background-color 2s;
}
#myGRdate:hover .GRmonth{
      background:#ad3a2b;
}
#myGRdate:hover .GRdate{
      border-color:#ad3a2b;
      border-bottom-color:transparent;
}

Keterangan :

Atur posisi tanggal posting dengan merubah nilai pada kode yang berwarna merah.

kode Pengatur Posisi Tanggal Posting

.date-outer h2.date-header{
      float:left;
      width:30px;
      height:50px;
      padding:0;
     margin:65px 0 -200px -32px;
      background:none;
}

Javascript

<script type="text/javascript">
//<![CDATA[
  function date_replace(c) {
var b = c.split(".");
var a = b[1],
e = b[0],
d = b[2];
var f = ["0", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
document.write("<div id='myGRdate'><div class='GRmonth'>" + f[e] + "</div><div class='GRdate'><span class='ohdate'>" + a + "</span></div></div>")
};
//]]>
</script>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Jemuah PON, August, 17, 2012

» Happy Blogging - gubhugreyot «