Nice to meet you!

Extraordinary claims require extraordinary evidence cosmic fugue galaxies, culture tingling of the spine, courage of our questions. Across the centuries the only home we've ever known!
Maeve

What Read Next

Tutorial : Circular Date Header







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







F

Comments

Post a Comment

Hey ! Jangan Lupa Tinggalkan Komen Tau ♥

Contact Form

Name

Email *

Message *