Cara Menciptakan Banner Tanggal Bentuk Bundar 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 menciptakan header tanggal bentuk linkaran untuk postingan blog menyerupai yang ada di gambar di bawah ini. Ini sanggup menjadi embel-embel yang sangat keren untuk blog Anda dan sesuatu yang sanggup diubahsuaikan biar sesuai dengan tata letak dan desain blog Anda. Karena postingan ini sangat ditunggu dan isyarat bervariasi tergantung pada template, script, dll. Saya telah menyertakan dua metode di bawah ini perihal 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! 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'>

 <span>

<data:post.dateHeader/>

</span>

</h2>

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

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

4. Sekarang cari </head> dan paste isyarat 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 isyarat berikut di atas </head> di bawah script yang gres saja Anda tambahkan di langkah nomor 4

    <b: bila 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: karakter besar; / * GANTI GAYA GANTI - karakter kecil karakter 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 biar sesuai dengan blog Anda sendiri.

#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! 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'>
 <span>
<data:post.dateHeader/>
</span>
</h2>

Gantilah isyarat diatas dengan isyarat berikut. Jika Anda menemukan isyarat 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 isyarat </head> di Tema > Edit HTML. Di bawahnya, tempel salah satu dari yang berikut ini. #1. Yang ini bila 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 bila 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 isyarat 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 bila anda berhasil atau bila ada yang error.. :)
Baca juga : Cara Membuat Banner Tanggal Keren Bentuk Kotak di Header Postingan Blogspot.

Berbagi :

Anda mungkin menyukai postingan ini :

• 
  Cara Menciptakan Full Width: Header, Navigasi, Dan Footer Di Blogspot (Ukuran Penuh Browser)
• 
  Blogspot: Cara Memasang Gadget Gambar/Image Tanpa Judul (*Required Title)
• 
  Blogspot: Cara Menciptakan Ukuran Gambar Responsive Berubah Otomatis Sesuai Area Postingan
• 
  Cara Menambahkan Font Google / Jenis Abjad Khusus Ke Blogspot