Cumulus swf - flash

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 «






5 komentar:

  1. Maaf mas, saya bingung untuk memasukkan kode CSS dan JavaScript untuk sesuai urutan yang harus simasukkan, karena masing-masing ada dua kode CSS dan kode JavaScript.
    kiranya mas bisa memberikan urutan kode tsb yang harus dimasukkan.
    terimakasih.

    BalasHapus
  2. Makasih Atas Infonya, Berhasil Dicoba.
    Tolong kasih masukan buat blogku yang sederhana ini
    http://smpialfajar.blogspot.com/

    BalasHapus
  3. makasih sudah berbagi,blog sahabat wah full css muantep salam kenal

    BalasHapus
  4. boleh di coba nih...

    BalasHapus
  5. Situs poker online terpercaya uang asli ini selalu menjadi pusat perhatian para pemain judi online karena, mereka ingin sekali mendapatkan permainan kartu judi online yang lengkap, dengan pelayanan yang sangat baik bukan hanya itu saja para pemain juga ingin bisa mendapatkan berbagai macam bonus juga sehingga, akan menambahkan modal yang dimiliki untuk melakukan permainan dan jangan lupa kunjungi situs judi poker dan domino uang asli resmi terpercaya
    mejaqq
    diskonqq
    qiuqiu99
    bcaqq
    daftar taipanqq
    daftar hondaqq
    daftar jaguarqq
    daftar sahabatpoker
    daftar nagaqq
    kristalpoker

    BalasHapus

 
GR | Edited by | gubhug reyot