Cara Membuat Banner Tanggal Bentuk Lingkaran di Header Post Blogspot

Tutorial Blogspot : Cara Membuat Banner Tanggal Berbentuk Lingkaran di Header Postingan Blog

Blogger.com-Postingan hari ini akan menunjukkan kepada Anda cara membuat header tanggal bentuk linkaran untuk postingan blog seperti yang ada di gambar di bawah ini. Ini bisa menjadi tambahan yang sangat keren untuk blog Anda dan sesuatu yang dapat disesuaikan agar sesuai dengan tata letak dan desain blog Anda. Karena postingan ini sangat dinantikan dan kode bervariasi tergantung pada template, script, dll. Saya telah menyertakan dua metode di bawah ini tentang cara membuatnya. Luangkan waktu Anda dan pastikan untuk mengikuti setiap langkah dengan benar, tidak ada detail terkecil yang akan membuat Anda tidak memperoleh header post dengan latar belakang lingkaran 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 membuat banner tanggal bentuk lingkaran

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.

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

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

    <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>

5. Sekali lagi, tempelkan kode berikut di atas </head> di bawah script yang baru saja Anda tambahkan di langkah nomor 4

    <b: jika cond = 'data: blog.pageType! = & quot; static_page & quot;'>
      <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: huruf besar; / * GANTI GAYA GANTI - huruf kecil huruf 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>

Bereksperimenlah dengan CSS dan ubah gayanya agar sesuai dengan blog Anda sendiri.

#CARA 2 : Alternatif Membuat Banner Header Tanggal Bentuk Lingkaran di Atas Postingan

Langkah-langkah membuat banner tanggal bentuk lingkaran

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 kode diatas dengan kode berikut. Jika Anda menemukan kode di atas dua kali, ganti keduanya.

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

4. Cari kode </head> di Tema > Edit HTML. Di bawahnya, tempel salah satu dari yang berikut ini. #1. Yang ini jika 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 jika 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 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)

</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 bisa berkomentar dibawah jika anda berhasil atau jika ada yang error.. :)
Baca juga : Cara Membuat Banner Tanggal Keren Bentuk Kotak di Header Postingan Blogspot.