Cara Menciptakan Banner Tanggal Bentuk Bulat Di Header Post Blogspot
Tutorial Blogspot : Cara Membuat Banner Tanggal Berbentuk Lingkaran di Header Postingan Blog
Postingan hari ini akan mengatakan kepada Anda cara menciptakan header tanggal bentuk linkaran untuk postingan blog menyerupai yang ada di gambar di bawah ini. Ini sanggup menjadi pelengkap yang sangat keren untuk blog Anda dan sesuatu yang sanggup diadaptasi supaya sesuai dengan tata letak dan desain blog Anda. Karena postingan ini sangat ditunggu dan arahan bervariasi tergantung pada template, script, dll. Saya telah menyertakan dua metode di bawah ini wacana cara membuatnya. Luangkan waktu Anda dan pastikan untuk mengikuti setiap langkah dengan benar, tidak ada detail terkecil yang akan menciptakan Anda tidak memperoleh header post dengan latar belakang bulat dan tanpa tanggal. Jika ini terjadi, periksa kembali semuanya atau mulai ulang tutorial dari langkah 1. Jika Anda masih mengalami masalah, tinggalkan saja komentar di bawah ini.
 |
| Banner Header Tanggal Post |
#CARA 1 : Membuat Banner Header Tanggal Bentuk Lingkaran di Atas Postingan
Langkah-langkah menciptakan banner tanggal bentuk lingkaran
1. Kunjungi dashboard blogger.com > Setelan > Bahasa dan pemformatan > Format Header Tanggal> Ubah ke 00 Bulan 0000. Penting! kalau tidak, itu tidak akan berfungsi.
2. Tata Letak > Gadget Posting Blog > Edit > Opsi Halaman Entri > opsi pertama Tanggal > Ubah ke 00 Bulan 0000. Penting kalau tidak, itu tidak akan berfungsi.
3. Tema > Edit HTML dan temukan arahan berikut
Gantilah dengan arahan berikut. Jika Anda menemukan arahan di atas dua kali, ganti semua keduanya.<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
<h2 class='date-header'>
<span>
<data:post.dateHeader/>
</span>
</h2>
4. Sekarang cari </head> dan paste arahan berikut di atasnya
5. Sekali lagi, tempelkan arahan berikut di atas </head> di bawah script yang gres saja Anda tambahkan di langkah nomor 4<script type='text/javascript'>//<![CDATA[var DateCalendar;function changeDate(d){if (d == "") {d = DateCalendar;}var da = d.split(' ');day = "<strong class='date_day'>"+da[0]+"</strong>";month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";year = "<strong class='date_year'>"+da[2]+"</strong>";document.write(month+day+year);DateCalendar = d;}//]]></script>
<b: kalau cond = 'data: blog.pageType! = & quot; static_page & quot;'>Bereksperimenlah dengan CSS dan ubah gayanya supaya sesuai dengan blog Anda sendiri.
<type style = 'text / css'>
/ * Kalender tanggal gaya * /
#Tanggal {
posisi: absolut;
latar belakang: #ffffff; / * MENGUBAH WARNA LATAR BELAKANG - gunakan #HEXVALUE atau url ("DIRECT-IMAGE-URL") * /
display: block;
lebar: 60px; / * GANTI LEBAR * /
tinggi: 60px; / * GANTI HEIGHT * /
float: kiri; / * GANTI POSISI TANGGAL - tidak ada kiri kanan * /
margin: 0px 2px 0 -60px; / * GANTI POSISI TANGGAL * /
padding: 0px;
batas: 0;
text-transform: abjad besar; / * GANTI GAYA GANTI - abjad kecil abjad kecil * /
-webkit-border-radius: 100px; / * GANTI RADIUS OF CIRCLE * /
-moz-border-radius: 100px; / * GANTI RADIUS OF CIRCLE * /
batas radius: 100px; / * GANTI RADIUS OF CIRCLE * /
box-shadow: 2px 1px 7px rgb (102, 102, 102); / * GANTI BAYANGAN * /
}
.tanggal hari {
display: block;
warna: # 333333; / * GANTI WARNA TANGGAL * /
ukuran font: 24px; / * UBAH UKURAN FONT HARI * /
font-weight: normal; / * GANTI GAYA GANTI - lampu normal tebal * /
margin-top: -5px;
text-align: center;
}
.date_month {
display: block;
ukuran font: 15px; / * UBAH UKURAN FONT BULAN * /
font-weight: normal; / * GANTI GAYA GANTI - lampu normal tebal * /
warna: #ccc; / * GANTI BULAN WARNA * /
margin-top: 4px;
text-align: center;
}
.date_year {
display: block;
warna: # 333333; / * GANTI WARNA TAHUN * /
ukuran font: 10px; / * GANTI UKURAN FONT TAHUN * /
margin-top: -8px;
text-align: center;
}
</ style>
</ b: jika>
#CARA 2 : Alternatif Membuat Banner Header Tanggal Bentuk Lingkaran di Atas Postingan
Langkah-langkah menciptakan banner tanggal bentuk lingkaran
1. Kunjungi dashboard blogger.com > Setelan > Bahasa dan pemformatan > Format Header Tanggal> Ubah ke 00 Bulan 0000. Penting! kalau tidak, itu tidak akan berfungsi.2. Tata Letak > Gadget Posting Blog > Edit > Opsi Halaman Entri > opsi pertama Tanggal > Ubah ke 00 Bulan 0000. Penting kalau tidak, itu tidak akan berfungsi.
3. Tema > Edit HTML dan temukan arahan berikut
<h2 class='date-header'>Gantilah arahan diatas dengan arahan berikut. Jika Anda menemukan arahan di atas dua kali, ganti keduanya.
<span>
<data:post.dateHeader/>
</span>
</h2>
<span class='date-header'><div id='date'> <script>
replace_date('<data:post.dateHeader/>');
</script> </div></span>
4. Cari arahan </head> di Tema > Edit HTML. Di bawahnya, tempel salah satu dari yang berikut ini. #1. Yang ini kalau Anda menginginkan format bulan / hari / tahun
<script> function replace_date(d) { var da = d.split(' '); month = "<div class='month'>"+da[1].slice(0,3)+"</div>"; day = "<div class='day'>"+da[0]+"</div>"; year = "<div class='year'>"+da[2]+"</div>"; document.write(month+day+year); } </script>#2. atau ini kalau Anda menginginkan hari / bulan / tahun
<script> function replace_date(d) { var da = d.split(' '); day = "<div class='day'>"+da[0]+"</div>"; month = "<div class='month'>"+da[1].slice(0,3)+"</div>"; year = "<div class='year'>"+da[2]+"</div>"; document.write(day+month+year); } </script>
Sekarang kita perlu menata tanggal, untuk melaksanakan ini tambahkan arahan berikut ke Tema > Sesuaikan > Lanjutan > Tambahkan CSS (apa pun yang ditambahkan di sini akan ditempatkan di atas ]]> </ b:skin> di template Anda)
</b:skin> in your template)
/* Date Style */
span.date-header {
color: #eeeeee; /* CHANGE DATE COLOUR*/
margin-left: -80px; /* CHANGE POSITION */
width: 40px; /* CHANGE WIDTH */
height: 40px; /* CHANGE HEIGHT */
padding: 10px; /* CHANGE PADDING SPACE */
word-wrap: break-word;
float: left;
-webkit-border-radius: 50px; /* CHANGE RADIUS OF CIRCLE */
-moz-border-radius: 50px; /* CHANGE RADIUS OF CIRCLE */
-o-border-radius: 50px; /* CHANGE RADIUS OF CIRCLE */
border-radius: 50px; /* CHANGE RADIUS OF CIRCLE */
font-family: 'arvo'; /* CHANGE FONT */
text-align: center;
background-color: #333; /* CHANGE BACKGROUND COLOUR */
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 3px #ffffff; /* CHANGE BORDER STYLE, WIDTH AND COLOUR */
}
#date {
display:block;
line-height:1.3em;
text-align:center;
}
.day {
font-size:20px; /* CHANGE FONT SIZE OF DAY */
padding-bottom:1px; /* CHANGE SPACE UNDERNEATH */
text-shadow: 0px 0px 2px #666666; /* CHANGE TEXT SHADOW */
padding-top: 1px; /* CHANGE SPACE ON TOP */
letter-spacing:0px;
text-align: center !important;
}
.month {
padding-top:0px;
letter-spacing:3px; /* CHANGE SPACE BETWEEN LETTERS */
color: #FFFFFF; /* CHANGE FONT COLOUR*/
}
.year {
padding-top:0px;
letter-spacing:2px; /* CHANGE SPACE BETWEEN LETTERS*/
padding-bottom: 5px; /* CHANGE SPACE UNDERNEATH */
color: #FFFFFF; /* C
Selesai! Anda sanggup berkomentar dibawah kalau anda berhasil atau kalau ada yang error.. :)
Baca juga : Cara Membuat Banner Tanggal Keren Bentuk Kotak di Header Postingan Blogspot.
