Cara Menciptakan Banner Tanggal Keren Di Header Postingan Blogspot
Dalam postingan terakhir saya, aku menunjukkan kepada Anda cara menciptakan header tanggal bentuk bulat untuk postingan blogspot di header bab samping. Posting hari ini akan membawanya sedikit lebih jauh, menunjukkan kepada Anda cara menciptakan gaya kalender, gambar Anda sendiri, gaya spanduk atau tajuk tanggal segitiga dan cara menyesuaikannya semoga sesuai dengan blog Anda.
Langkah-langkah menciptakan banner tanggal keren di header postingan
1. Kunjungi dashboard blogger.com > Setelan > Bahasa dan pemformatan > Format Header Tanggal> Ubah ke 00 Bulan 0000. Penting! bila tidak, itu tidak akan berfungsi.
2. Tata Letak > Gadget Posting Blog > Edit > Opsi Halaman Entri > opsi pertama Tanggal > Ubah ke 00 Bulan 0000. Penting bila tidak, itu tidak akan berfungsi.
3. Tema > Edit HTML dan temukan isyarat berikut
<h2 class='date-header'>Gantilah dengan isyarat berikut. Jika Anda menemukan isyarat di atas dua kali, ganti semua keduanya.
<span>
<data:post.dateHeader/>
</span>
</h2>
<span class='date-header'><div id='date'> <script>
replace_date('<data:post.dateHeader/>');
</script> </div></span>
4. Sekarang cari </head> dan paste isyarat 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 melaksanakan ini tambahkan isyarat berikut ke Tema > Sesuaikan > Lanjutan > Tambahkan CSS (apa pun yang ditambahkan di sini akan ditempatkan di atas ]]> </ b:skin> di template Anda)
/* Date Style */Bereksperimenlah dengan CSS dan ubah gayanya semoga sesuai dengan blog Anda sendiri. /* ... */ yakni komentar untuk membantu Anda mengidentifikasi setiap bab kode, Anda sanggup membiarkannya. Mereka tidak akan muncul di blog Anda.
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 */
}
