Cara Membuat Banner Tanggal Keren di Header Postingan Blogspot

Blogger.com-Dalam postingan terakhir saya, saya menunjukkan kepada Anda cara membuat header tanggal bentuk lingkaran untuk postingan blogspot di header bagian samping. Posting hari ini akan membawanya sedikit lebih jauh, menunjukkan kepada Anda cara membuat gaya kalender, gambar Anda sendiri, gaya spanduk atau tajuk tanggal segitiga dan cara menyesuaikannya agar sesuai dengan blog Anda.

Langkah-langkah membuat banner tanggal keren di header postingan

1. Kunjungi dashboard blogger.com > Setelan > Bahasa dan pemformatan > Format Header Tanggal> Ubah ke 00 Bulan 0000. Penting! jika tidak, itu tidak akan berfungsi.

2. Tata Letak > Gadget Posting Blog > Edit > Opsi Halaman Entri > opsi pertama Tanggal > Ubah ke 00 Bulan 0000. Penting jika tidak, itu tidak akan berfungsi.

3. Tema > Edit HTML dan temukan kode berikut

<h2 class='date-header'>
 <span>
<data:post.dateHeader/>
</span>
</h2>

Gantilah dengan kode berikut. Jika Anda menemukan kode di atas dua kali, ganti semua keduanya.

<span class='date-header'><div id='date'> <script>
replace_date(&#39;<data:post.dateHeader/>&#39;);
</script> </div></span>

4. Sekarang cari </head> dan paste kode berikut di atasnya

<script> function replace_date(d) { var da = d.split(' '); day = "<div class='day'>"+da[0]+"</div>"; month = "<calendar class='month'>"+da[1].slice(0,3)+"</calendar>";  year = "<div class='year'>"+da[2]+"</div>"; document.write(month+day); } </script>

5. Sekarang kita perlu mengatur tanggal, untuk melakukan ini tambahkan kode berikut ke Tema > Sesuaikan > Lanjutan > Tambahkan CSS (apa pun yang ditambahkan di sini akan ditempatkan di atas ]]> </ b:skin> di template Anda)

/* Date Style */
span.date-header {
margin-left: -60px; /* CHANGE POSITION */
width: 30px; /* CHANGE WIDTH */
height: 30px; /* CHANGE HEIGHT */
padding: 10px; /* CHANGE PADDING SPACE */
word-wrap: break-word;
float: left;
-webkit-border-radius: 10px; /* CHANGE RADIUS OF CIRCLE */
-moz-border-radius: 10px; /* CHANGE RADIUS OF CIRCLE */
-o-border-radius: 10px; /* CHANGE RADIUS OF CIRCLE */
border-radius: 10px; /* CHANGE RADIUS OF CIRCLE */
font-family: 'arvo'; /* CHANGE FONT */
text-align: center;
background-color: #fcfcfc; /* CHANGE BACKGROUND COLOUR */
background: linear-gradient(top, #fcfcfc 0%, #dad8d8 100%); /* CHANGE BACKGROUND GRADIENT */
background: -moz-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%); /* CHANGE BACKGROUND GRADIENT */
background: -webkit-linear-gradient(top, #fcfcfc 0%, #dad8d8 100%); /* CHANGE BACKGROUND GRADIENT */
font-size: 10px; /* CHANGE FONT SIZE */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); /* CHANGE SHADOW */
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); /* CHANGE SHADOW */
border: solid 1px #d2d2d2; /* CHANGE BORDER STYLE, WIDTH AND COLOUR */
}
#date {
display:block;
line-height:1.3em;
text-align:center;
}
calendar {
background: #d10000; /* CHANGE BACKGROUND */
background: linear-gradient(top, #d10000 0%, #7a0909 100%); /* CHANGE BACKGROUND GRADIENT */
background: -moz-linear-gradient(top, #d10000 0%, #7a0909 100%); /* CHANGE BACKGROUND GRADIENT */
background: -webkit-linear-gradient(top, #d10000 0%, #7a0909 100%); /* CHANGE BACKGROUND GRADIENT */
padding: 0px 10px 0px 10px; /* CHANGE PADDING SPACE */
position: absolute;
left: 0px;
top: 0px;
left: -1px;
right: -1px;
border-radius: 10px 10px 0px 0px; /* CHANGE RADIUS OF BORDER BOTTOM */
}
.day {
font-size:20px; /* CHANGE FONT SIZE OF DAY */
padding-bottom:1px; /* CHANGE SPACE UNDERNEATH */
text-shadow: 0px #666666; /* CHANGE TEXT SHADOW */
position: absolute;
top: 30px;
left: 0px;
right: 0px;
padding-top: 1px; /* CHANGE SPACE ON TOP */
letter-spacing:0px; /* CHANGE SPACE BETWEEN LETTERS */
text-align: center !important;
}
.month {
padding-top:2.5px;
letter-spacing:3px; /* CHANGE SPACE BETWEEN LETTERS */
color: #FFFFFF; /* CHANGE FONT COLOUR*/
height:20px; /* CHANGE HEIGHT OF MONTH */
width:32px; /* CHANGE WIDTH OF MONTH */
}

Bereksperimenlah dengan CSS dan ubah gayanya agar sesuai dengan blog Anda sendiri. /* ... */ adalah komentar untuk membantu Anda mengidentifikasi setiap bagian kode, Anda dapat membiarkannya. Mereka tidak akan muncul di blog Anda.