Cara Menciptakan Banner Tanggal Keren Di Header Postingan Blogspot
cara menciptakan header tanggal bentuk bulat untuk postingan blogspot di header bab samping. Posting hari ini akan membawanya sedikit lebih jauh, mengatakan kepada Anda cara menciptakan gaya kalender, gambar Anda sendiri, gaya spanduk atau tajuk tanggal segitiga dan cara menyesuaikannya biar 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! jikalau tidak, itu tidak akan berfungsi.
2. Tata Letak > Gadget Posting Blog > Edit > Opsi Halaman Entri > opsi pertama Tanggal > Ubah ke 00 Bulan 0000. Penting jikalau tidak, itu tidak akan berfungsi.
3. Tema > Edit HTML dan temukan instruksi berikut
<h2 class='date-header'>Gantilah dengan instruksi berikut. Jika Anda menemukan instruksi 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 instruksi 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 instruksi 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 biar sesuai dengan blog Anda sendiri. /* ... */ ialah 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 */
}
