Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «






6 komentar:

 
GR | Edited by | gubhug reyot