Tutorial : Circular Date Header

Wednesday, December 10, 2014





Hey! Assalamualaikum readers :)

Apa khabar ? Harinih Cikk Mira nak share tutorial circular date header.





CIRCULAR DATE HEADER FOR YOUR BLOG POST


1.  Settings > Language and Format > Date Header Format > Tukarkan 00 Month 0000. *Perlu tukar kalau tak tukar ia takkan jadi.





2.  Layout > Blog Post Gadget > Edit > Post Page Options > first option Date > Tukar 00 Month 0000. * seperti tadi


3. Template > Edit html > CTRL +F >  Search code dibawah

<h2 class='date-header'>
 <span>
<data:post.dateHeader/>
</span>
</h2>
4. Tukarkan code diatas dengan code dibawah

<div id='Date'> 
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script> 
</div> 
<b:else/> 
<div id='Date'> 
<script>changeDate(&#39;&#39;);</script> 
</div>

5. Sekarang search code </head>  dan paste code dibawah diatas code tersebut

<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>
6.  Paste code dibawah , diatas code </head>  , betul2 dibawah script tadi

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <style type='text/css'>
        /* Calendar style date */ 
        #Date { 
          position:absolute; 
          background: #ffffff; /* CHANGE BACKGROUND COLOUR - use #HEXVALUE or url("DIRECT-IMAGE-URL")*/
          display: block; 
          width:60px; /* CHANGE WIDTH */
          height:60px; /* CHANGE HEIGHT */
          float: left; /* CHANGE POSITION OF DATE - left none right */
          margin: 0px 2px 0 -60px; /* CHANGE POSITION OF DATE */
          padding: 0px; 
          border: 0; 
          text-transform: uppercase; /* CHANGE TEXT STYLE - lowercase uppercase */
          -webkit-border-radius: 100px; /* CHANGE RADIUS OF CIRCLE */
          -moz-border-radius: 100px; /* CHANGE RADIUS OF CIRCLE */
          border-radius: 100px; /* CHANGE RADIUS OF CIRCLE */
          box-shadow: 2px 1px 7px rgb(102, 102, 102); /* CHANGE SHADOW */
        } 
        .date_day { 
          display: block; 
          color:#333333; /* CHANGE DATE COLOUR*/
font-size: 24px; /* CHANGE FONT SIZE OF DAY */
          font-weight:normal; /* CHANGE TEXT STYLE - bold normal light */ 
          margin-top:-5px; 
          text-align:center; 
          
        } 
        .date_month { 
          display: block; 
          font-size: 15px; /* CHANGE FONT SIZE OF MONTH */
          font-weight:normal; /* CHANGE TEXT STYLE - bold normal light */
         color:#ccc; /* CHANGE MONTH COLOUR */ 
          margin-top:4px; 
          text-align:center; 
        } 
        .date_year { 
          display: block; 
          color:#333333; /* CHANGE YEAR COLOUR */ 
          font-size: 10px; /* CHANGE FONT SIZE OF YEAR */ 
          margin-top:-8px; 
          text-align:center; 
          
        } 
      </style>
    </b:if>

Perhatian

Nota Kaki : #thiscolour > you can change the css
korang boleh tukar background, color, font size , font :)




Selamat mencuba ^^







Latest Instagrams

© CikkMiraDotCom. Design by FCD.