Membuat date header/tanggal posting ala Tampilan Dinamis/Dynamic View Blogger Templates.
![](http://1.bp.blogspot.com/-Mp_YAoMLdkM/UC4pucZbd7I/AAAAAAAADEY/IZJ3PYUHbPY/s400/date-header-dynamic-view200-190.jpg)
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
Buka blog dan lihat hasilnya!
berwarna merah . ![](http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg)
Posting » Jemuah PON, August, 17, 2012
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
- Cadangkan/Pulihkan (Backup/Restore)
- Template
- Edit HTML
- Template › Edit HTML
- Lanjutkan/Procced
- Cari kode
]]></b:skin> , kemudian letakkan kode css di atasnya. GunakanCtrl + 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:
Buat kode menjadi seperti berikut:Kode yng harus diganti:
<b:if cond='data:post.isDateStart'> <b:if cond='data:post.isFirstPost == "false"'> </div></div> </b:if> </b:if><b:if cond='data:post.isDateStart'> <div class="date-outer"> </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'>
Kode Baru
<b:if cond='data:post.isDateStart'> <b:if cond='data:post.isFirstPost == "false"'> </div></div> </b:if> </b:if><b:if cond='data:post.isDateStart'> <div class="date-outer"> </b:if> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><script type='text/javascript'> date_replace('<data:post.dateHeader/>'); </script> </h2> </b:if><b:if cond='data:post.isDateStart'> - Simpan Template/Save Template.
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 yangkode 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:
![](http://1.bp.blogspot.com/-m-EegAh0Ii8/TwU4WSMc0NI/AAAAAAAABAE/n1apv8XMEZo/s200/gubhugreyot-blogdetik.jpg)
![](http://2.bp.blogspot.com/-BC_gjkM2GTU/TwU4pEkO5FI/AAAAAAAABAQ/YhK8BQ5CLfI/s200/bloggerstuars-blogspot.jpg)
» Happy Blogging - gubhugreyot «
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.
BalasHapuskiranya mas bisa memberikan urutan kode tsb yang harus dimasukkan.
terimakasih.
Makasih Atas Infonya, Berhasil Dicoba.
BalasHapusTolong kasih masukan buat blogku yang sederhana ini
http://smpialfajar.blogspot.com/
makasih sudah berbagi,blog sahabat wah full css muantep salam kenal
BalasHapusboleh di coba nih...
BalasHapusSitus 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
BalasHapusmejaqq
diskonqq
qiuqiu99
bcaqq
daftar taipanqq
daftar hondaqq
daftar jaguarqq
daftar sahabatpoker
daftar nagaqq
kristalpoker