Add Calendar Style Date Format in Blogger Posts | IT Sat Blogger
Ad Networks Reviews Ad Posting Adobe Photoshop Adobe Photoshop CS3 Adsense Advertising Definition Affiliate Afganistani Channels Alternate Android App Android Mobile as Webcam for PC – Wi-Fi & USB Mode AntiVirus Any Video Converter Apps Arabsat Argent Global Network Avira Biss Keys Black Friday Blog Design Blogger Templates Blogging Blogging Tools Branch Less Banking Broadband Tips Browsers CCcam Section CD and DVD Channel News Channel Updates Chargi Chrome Cinco De Mayo Comments computer Contact Forms Converter CPA CPC CPL CPM CPT CPV Cryptoworks Keys CSS & HTML CTR Cyber Monday DCW Keys Dictionary Digads Digital Receivers Dish Tv Dish Tv Bazar Djuice DM Digital Add New Channel Paksat IR at 38°East Downloader Dreambox Driver Updates Easypaisa Echolink Encryption Software English to Urdu and Urdu to English Dictionary Entertainment Channels Exchange Rate Facebook Fight Sport Firefox Flash Sale Format Factory 3.0 Free Download Wedding Album Maker Gold Software Frequencies Google Chrome Graphics Hosting Sale Hostings Hotspot Shield How To How to Download YouTube Videos on Android Devices How to Generate Adsense Revenue IDM Imtoo Video Converter Indian Channels Infolinks Internet Internet Download Manager Irdeto Keys IT News IT Tips Labels Language Softwares Live Channels Make Money Mardi Gras Sales Media Players MicroBox Mix Receivers Mobilink 3G Mobilink Offers MoboLive Review – Download (.apk) for Android Mozilla MP3 Cutter Mystery Sales NBA POOL EUROPE 1 Update New Biss Key Neosat Nero Burnning Rom 11 News Channels Offers okpay Online Payment Processors Online Sales Online Services OpenBox Optimization Tools Pakistani Channels Paksat Password Manager Payoneer Payza PC Drivers Perfectmoney Photo Editors Pixillion Image Converter 2.28 Posts PowerVu Keys PPC PPV PTC Ptcl Offers Regional Channels Religious Channels RoboForm RPM Samsung J7 Pro Samsung Mobiles Satellite News Satellite Tips and Tricks SEO Tips Sim Lagao Offers Snappy's Birthday Sales Social Media Social Media Exchange Sites Softcam Keys Softwares Sports Channels Sports News Spring Sale St.Patrick's Day Star Track Starsat System Tools Telecomunication Telenor 3G Telenor Offers TeraCopy Full Version Tiger Sat Tiger T800 Mini HD Digita Satellite Receiever New Software Top 10 Top 5 Highest AdSense Earners in the World Total Video Converter 3.61 Tour De Rouge Sale TP Link u Torrent Ufone Offers Ulead 3d 3.5 UltraISO Premium Edition 9 Uploading Valentine's Day Sales Viaccess Keys Video Marketing Video Monetization VLC media player Warid 3G 4G Packages Warid Offers Web Freer 2013 Web Traffic Widgets Windows Wingle WinRAR 4.02 WinZip Pro 17.0 Withdraw Money in Pakistan Wordpress Xiaomi Yayvo Zam tv On Paksat IR at 38°East Zong 3G and 4G LTE Zong Offers Zong Sim Lagao Offer

Calendar style date format is most popular easily add in WordPress blogs but for the blogger platform its not easy to add but those who tells its impossible to add Calendar Style Date Format in Blogger Posts this tutorial and demo says that everything is not impossible. Calendar Style Date Format gives your blogger blogs posts attractive look. So learn how to add this in blogger.
Add Calendar Style Date Format in Blogger Posts
You may also like this related article:

how to ADD calendar style date format in blogger

  • Go to "Blogger Settings" > "Language and Formatting" > "Date Header Format" and change date style as per showing in below image (Day,Month,Year).
Add Calendar Style Date Format in Blogger Posts
  • Now go in to "Template" section by pressing "Edit Html"
Add Calendar Style Date Format in Blogger Posts
  • Click anywhere in template code area and press CTRL+F for search.
  • Write or Paste below line in search box and press enter.
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
  • Mostly you find above code 2 or 3 times in your blog template so replace it with below code. 
<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>
  • Now search </head> tag in your template by pressing CTRL+F shortkey.
</head>


  • Paste below code just above the </head> tag.
<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:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(http://3.bp.blogspot.com/-8iuBeM55LyY/VopsstE4wDI/AAAAAAAAbIc/oprs2Z9ZW8E/s1600/calendar%2B01%2Bisb.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px -40px -108px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* Month's color */
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Day's color */
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Year's color */
}
</style>
</b:if>

  • Before saving, you can make some changes.....
  1. To change/replace the calendar style change the URL in blue color.
  2. If calendar does not appear as showing, change -108 to 0.
  3. To change the colors of day, month or year replace with your favorite color code, showing in orange color.
  • Now save your template, and preview the Calendar Style Date Format added in your blogger posts.
  • Below there is some samples with url code for calendar date style.
01.   02.   03. 04.   05.
  • http://3.bp.blogspot.com/-8iuBeM55LyY/VopsstE4wDI/AAAAAAAAbIc/oprs2Z9ZW8E/s1600/calendar%2B01%2Bisb.png
  • http://4.bp.blogspot.com/-J7ulbMw0zOQ/VopsslMuDPI/AAAAAAAAbIU/JbVbKSRdJ7c/s1600/calendar02%2Bisb.png
  • http://3.bp.blogspot.com/-GfonMxGzOeU/Vopss-FdQnI/AAAAAAAAbIY/5imdqWo6-sY/s1600/calendar03%2Bisb.jpg
  • http://4.bp.blogspot.com/-dmoErF7fNnk/Vopst5aW0AI/AAAAAAAAbIo/eN1e6WJuCO4/s1600/calendar05%2Bisb.png
  • http://1.bp.blogspot.com/-3BflJHkIo1o/VopstaVxnKI/AAAAAAAAbIg/h1g_Zy1C9JA/s1600/calendar04%2Bisb.jpg

If there is any difficulty or error feel free to comment us, That's all happy blogging.

Labels: ,

Post a Comment

Author Name

{picture#http://1.bp.blogspot.com/-60UhuKBkPJg/VqtduelZhHI/AAAAAAAAdUM/VR5bHxk6PMk/s1600/itsatblogger%2Bauthor.jpg} Hello Friends, My name is Muhammad Ahsan Yousuf founder of ITSATBLOGGER and Nusratcollection.com. I'm not guru in blogging but love it try to deliver good and informative content and news to my readers. {facebook#https://www.facebook.com/ahsan9226} {twitter#} {google#https://plus.google.com/u/0/+MuhammadAhsan871} {pinterest#YOUR_SOCIAL_PROFILE_URL} {youtube#YOUR_SOCIAL_PROFILE_URL} {instagram#YOUR_SOCIAL_PROFILE_URL}

Contact Form

Name

Email *

Message *

Powered by Blogger.

itsatblogger