Category: All

Posted on

Hexadecimal Color Chart for Templates

How do we Arrive at the clor we wish to have , if we donot know its 6-digit code teo be placed in the template…This.. Hexadecimal Color Chart has the color and the code to be used in templates.Use the 6-digit code prefixed with #

You can visually decide on the colors and
Copy the respective 6-digit code to be placed in your template
A Very useful and informative site
Eg:- Use Colors as #00ff60 (Prefix with #)

From Deepa’s Template Tips

Posted on

Using Icons – Images for Bulleted lists in posts & sidebar

When we make a list, we want them to appear a little diffrenly than our regular post content.This is our way of emphasising certain things. For long I have been using the the following tags for list
Appearence of Lists in Posts

Ordered lists
Unordered Lists
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item3</li>
</ol>		 <ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
  1. List Item 1
  2. List Item 2
  3. List Item 3
  • List Item 1
  • List Item 2
  • List Item 3

Arrow Shaped bullets for Unorderd Lists
Earlier I used to get a “dot” in place of the arrows that you now see in the unordered list.I was getting bored by that look. So i did this in my template

  1. SAVE AND BACKUP the template

  2. Locate the .post{}

  3. Add
    .post ul
    {list-style-image: url(http://h1.ripway.com/Deepa/bullet.ico );}

  4. Save and View

Bullet numbers in a diffrent color in Ordered Lists

  1. SAVE AND BACKUP the template

  2. Locate the .post{}

  3. Add
    .post ol.coloredNumbers
    { color:maroon;
    }

    .post ol.coloredNumbers li span
    {
    font-weight: regular;
    color:#375267;
    }

  4. Add following to your post template
    Use this for ordered lists only
    <ol class=”coloredNumbers”>
    <li><span>First </span></li>
    <li><span>Second </span></li>
    </ol>

  5. So that anytime you use ordered list..place the list items between the following tags
    <ol class=”coloredNumbers”>
    <li><span>     —List Item -1— </span></li>
    <li><span> —List Item -2— </span></li>
    <li><span> —List Item -3— </span></li>
    </ol>

Appearence of list in sidebars
The lists in my sidebar have diamond shaped icons as bullets

  1. Locate
    .sidebar li {
    margin-left: -10px;
    padding: 0 0 .03em 0px;
    text-indent: -15px;
    line-height: 15px;
    }

  2. Add
    list-style-image: url(http://h1.ripway.com/Deepa/bullet2.ico );

  3. Here you can substitute the URL with the icon-image that you want to use with the bullets…Till then feel free toshare my link to the bullet icon.

  4. When ever you want a bulleted list in the sidebar..use only
    <ol>
    <li>     —List Item -1— </li>
    <li> —List Item -2— </li>
    <li> —List Item -3— </li>
    <ol/>

I undersntad that this is too much to grasp in one reading..So just take your time…trythis in a test blog. I am sure that withlittle time and perseverance you too can give your posts a cool look with customised bullets.Do drop a word if you are facing any difficulty.I shall be Glad to help

From Deepa’s Template Tips

Posted on

விளையாட்டு வினையாடுச்சே.. இனிமேலாவது இதை தடுக்க யோசனை பண்ணி அமல் படுத்துங்க

இன்னிக்கி Times of India படிக்கலையா..? உங்களுக்கெல்லாம் ஞயாபகம் இருக்கும்ன்னு நினைக்கரேன்.. சில நாட்களுக்கு முன்னாடி நான் “விளையாட்டு வினையாகலாமா” அப்படீங்கர தலைப்புல ஒரு பதிவு எழுதியிருந்தேன். அதாவது Dhoom-II படம் பார்த்து அது போலவே சாஹசம் பண்ண ஆசைபடுகிர பசங்க எப்படி அசம்பாவிதங்களுக்கு ஆளாகுறாங்கன்னு.

இன்னைக்கு Times of india – Dhoom:2 spells doom for 2 teens ங்கிர செய்தி படிச்சதும் shock ஆயிட்டேன். 11 th Std படிக்கிர Mahesh & Shyam படத்துல காட்டுகிர மாதிரி Wheelie ..ie a stunt in which the bikes front wheel is raised in the air( அதாவது கிட்டதட்ட குதிரைவண்டி குடைசாயும் போது இருக்குமே , அதுமாதிரி..) பண்ணலாம்ன்னு முயர்ச்சி செஞ்சு , சமநிலை தவறி மின்-கம்பத்துல மோதி, செத்தே பொயிட்டாங்க…சே..நினைக்கவே கஷ்டமா இருக்கு..


உத்வேகமும் – உற்சாகமும் நிறம்பி இருக்கும் வயது..எவ்வளவெல்லாம் சாதிச்சிருப்பாங்களோ.. இப்படி அல்பாயுசுல போயிடுச்சே… அவங்க ரெண்டுபேர் குடும்பத்திர்க்கும் பிளாகர் சார்பாக என் ஆழந்த அநுதாபங்கள். என்னதான் சமாதானம் சொன்னாலும் அவங்க இழப்புக்கு யாராலையும் ஈடுகட்ட முடியாது.. எல்லம் வல்ல இறைவன் தான் அவங்களுக்கு தெம்பும் தைரியமும் கொடுக்கணும்.

இன்னிக்கி அதே செய்தியிலெ இன்னொன்றும் குறிப்பா சொல்லியிருக்காங்க.. அதாவது Yash Chopra எச்சரிக்கை சொல்லி ஒரு துணுக்கு படத்துல சேர்த்திருக்காராம். .. அட இதை தானே நானும் என்னோட பதிவுல சொன்னேன். ..

இப்பொகூட..இதோ பண்ணறேன்– இப்பொ பண்ணரேன்னு காலம் கடத்தாம கூடிய சீக்கிரத்துல “எச்சரிக்கை -துணுக்கு” ஐ படத்துல சேர்த்தா தான் அதுக்குண்டான பயன் கிடைக்கும். இல்லைன்னா காலம் கடந்த பிறகு சூர்ய-நமஸ்காரம் பண்ணுகிர மாதிரி, எச்சரிக்கை போட்டும் .. பிரயொஜனம் இல்லாம பொயிடும்.

Yash Chopra க்கு தமிழ் படிக்க தெரிஞ்சவங்க யாராவது எங்களைபோல உள்ளவங்க சார்பிலெ இதை எடுத்து சொல்லுங்க…

எழுத்துப்பிழைய்யை மன்னித்து கருத்தில் பிழை இருந்தால் சங்கோசப்படாம சொல்லுங்க,
எதுவானாலும் பேசி தீத்துக்குவோம்.
Posted on

Have Scrolling list and links

All of have lists & links that we would like to share with our readers. Sometimes these lists can run very long. I personally find this very cumbersome and boring.

So I decided to make them appear as scrolling upwards so that all the links are displayed within the space we decide to allot them. You can see this in action here itself.

If you take a look at my Right-side-bar, I have a scrolling list of CREDITS.This gives a neat-and-tidy look .Want to add a similar look to your blog as well.. follow the instructions closely
This is assuming that you know how to add ordinary and linked lists.

  1. SAVE AND BACK UP YOUR TEMPLATE

  2. The logic is to use a marquee within a table..here I am using it in sidebar

  3. Template-Add Page Elements-HTMLJavascript page element

    <table width=”100%” border=”1″ >
    <tr ><td >
    <marquee height=150 width=100% onMouseover=”this.stop()” onMouseout=”this.start()” direction=up scrollamount=”2″>

    *******what ever list you wish to add******

    </marquee>
    <td></tr></table>

  4. If you wish to add an ordinary list then just add them normally

  5. If you wish to add a list with links then add them using the <a href=”URL_of the link” > Text that represents the link </a>

  6. You may add as many number of lists as you wish.

  7. Save and view.

From Deepa’s Template Tips

Posted on

விளையாட்டு வினையாகலாமா ? ? ?

இன்றைக்கு படித்த ஒரு செய்தி ..ஹ்ரித்திக் ரொஷன் நடித்து வெளிவந்த Dhoom-II படத்தை பார்த்து Rohit [6th std], 13 வயது பைய்யன் வீட்டிலெ காசு திருடி (13,000/-) ஹ்ரித்திக் மாதிரி dress ம் கிட்டதட்ட படத்துல வருகிற மாதிரி Baterry openrated பைக் வாங்கி இருக்கான்.Highway ல வேகமா போகணும்ன்னு முயர்ச்சி செஞ்சுருக்கான்..நல்ல வேளை highway Police பாற்த்து Station க்கு கூட்டிட்டு பொயிட்டாங்க.இவன் சிருபிள்ளைத்தனமா ஏதாவது பண்ணி highway ல ஒண்ணு கிடக்க ஒண்ணு ஆச்சுன்னா பெத்தவங்க எப்படி பதறிப்போவாங்க.
முழு விவரம் இங்கே படிங்க.

நீங்க கேக்கிறது புரியுது..என்ன இப்பொ மட்டும் தான் பசங்க வீட்டுல காசு திருடராங்களான்னு.. கொஞ்சம் பொறுங்க. ஓரு கதை படிச்சாலோ – அல்லது சினிமா பார்த்ததுனாலயோ எந்த பிள்ளையும் மொத்தமா கெட்டுப் பொயிடமாட்டாங்க.அதாவது Rohit உதாரணமாய் வைத்து சொன்னால்.. நேத்து படம் பார்த்துட்டு வந்து – இன்னிக்கி அந்த பய்யன் இப்படி ஒரு காரியத்தை கண்டிப்பா பண்ணியிருக்க மாட்டான்–பண்ணி இருக்கவும் முடியாது.

ஹ்ரித்திக்கின் Motor bike சாஹசங்களும் போலீஸ் கண்ணில் மண் தூவுவதும் அவனை ரொம்ப கவர்ந்ததாக சொல்லி தானும் அவ்வாறே செய்ய முயற்ச்சி செஞ்சுருக்கான்.ஒரு கட்டத்தில் நிழல்-சம்பவங்களுக்கும் நிஜ- சம்பவங்களுக்கும் உள்ள வேறுபாட்டை அவன் உணர மறந்துவிட்டான். 6std பய்யன் கிட்டெ எவ்வளவு முன்யொசனையும் தொலைநோக்கு பாற்வையும் எதிர்பார்க்கிறது.

தவறு யார் மேல.. Dhoom-II படம் எடுத்தவங்களா?? படம் பார்த்து.. ” ஹ்ரித்திக்கு எவ்வளவு பேரு-புகழ்-பாராட்டு..எல்லாம் இந்த மாத்திரி சாஹசங்கள் செஞ்சதுநால தானே..நானும் இப்படி செய்தால் என்னையும் எல்லாரும் ஒரு மதிப்போட கவனிப்பாங்க”” ..அப்படி நினைத்த Rohit ஆ
இல்லை வீட்டுல எப்பொ பய்யன் சினிமால வருகிர Hero போல நடை-உடை-பாவனை எல்லாம் பழக ஆரம்பிச்சப்பொ.. அதை கனிவா அணுகி வித்தியாசத்தை உணர்த்தாத பெற்றோர்ரா..இதுல யார் மேல குறை சொல்ல…பாவம் பெத்தவங்க.. அவங்களும் சொல்லாமலா இருப்பாங்க..

Shaktimaan ன்னு ஒரு தொடர் வந்த காலத்துல Shaktimaan போல பறக்க ஆசைப்பட்டு 10th floor லெ இருந்து ஒரு பய்யன் Car க்கு பயன்படுத்தபடும் Plastic coverஐ முதுகில் கட்டிகொண்டு குதித்தது இன்னும் நினைவிருக்கலாம்.

சின்ன பசங்க பண்ணர இந்த மாதிரி குறும்புகள் எல்லாமே பெரும்பாலும் விபரீதத்துல தான் முடியுது. ஆனா அதை உணர்கிற வயசொ அல்லது பக்குவமோ அவங்க கிட்டே இருக்கரதில்லை.இப்படி இருக்க இதை தடுக்க எனக்கு ஒரே ஒரு யொசனை தான் தோணுது.

இது எல்லாமே ஒரு Hero Worship னால நடக்கிற அசம்பாவிதங்க்ள். அதனால இதுக்கு தீர்வும் அதே Hero வால் தான் செய்யமுடியும். இந்த மாதிரி சாஹச படங்கள் செய்யும் Hero க்கள் படம் ஆரம்பிக்கும் முன்னே மற்றும் படம் முடிந்த பிறகும் ஒரு 2 min சின்ன பசங்க கிட்டே இந்த சாஹசங்கள் எல்லம் Done with wires and some camera Trick ன்னு பேசுகிற மாதிரி Vedio Clip வைச்சா, பசங்களும் நம்ம Hero வே சொல்லிட்டாரு இப்படி எல்லாம் பண்ண கூடாதுன்னு , அப்படின்னு ஒழுங்கா நடந்துக்குவாங்க இல்லையா

விளையாட்டு வினையாகாம இருந்தா செரி…

எழுத்துப்பிழைய்யை மன்னித்து கருத்தில் பிழை இருந்தால் சங்கோசப்படாம சொல்லுங்க,
எதுவானாலும் பேசி தீத்துக்குவோம்.
Posted on

To add a Shout Box

Do you see the small chatwindow at my right-sidebar.Its called a Shoutbox.Any person viewing your blog can enter his message there for all the readers to see.It is nice when someone has somekind of announcements.Follow the instructions carefully.

  1. The shoutbox that i am using is from CBox
    • Register with Cbox Go for the Basic (free) version
    • Use the various options and modify them to suit your taste

    • Go to QUICK SETUP and copy the cbox code to a notepad

  2. SAVE AND BACKUP YOUR TEMPLATE
  3. Template–Page Elements–Add a new HTML-JavaScript page element and paste the Cbox code

  4. Save and view

  5. Start posting the latest developments in your Cbox for all to see

From Deepa’s Template Tips

Posted on

To include an Audio clip in your posts

Many would harbour the wish to be able to have an audio clip inserted into their posts.Look no further..mission acomplished.You will be listening to a song in Tamil here.



Do follow the instructions carefully.

  1. SAVE AND BACKUP YOUR TEMPLATE

    2. Assuming that you have the concerned audio clip ready in your computer

  2. Upload the audio file

    • Geocities and Google Pages allow us to create webpages and upload files.

    • So using your yahooID or gmail ID create your website (we will be using the filemanager feature).Eg.I have one-page website with some junk text


      • Why i did this.. please see here..thanks to Rose for telling me

    • Register with FiledenSelect the Free-Account plan

      This is a Free File hostng service provider.Allows us to upload files to put on other websites, communities or to share with friends and family. FileDen.com offers the service absolutely free of charge

    • Upload the audio file using the UPLOAD link
    • if you are presented with IMG tag window select DIRECT LINK ..this will give you the direct link that you can use in the blog

    • Otherwise..Locate the filemanager link

    • Once upload is complete and you are able to see your audio clip in the list provided by the file manager…Rightclik –properties–copy the URL into a notepad and save it

  3. Inserting audio clip into the posts
    • Place this code in the edit html page of your post

    • <embed src=”URL_OF_YOUR_AUDIO_FILE” autostart=false loop=false height=62 width=144 controls=”console”></embed>
      You may vary the height and width to suit your posts

    • You can place this code at any postion of the post content ..just move this code around.,.and see where it fits best

    • The advantage is..the audio clip plays in the same window ..ie.. does not open another annoying pop-up window

Hope you were able to add an audio file of your choice to your post.Do drop in your word so that like minded people can also share your thoughts.b/w Donot forget to mention this post in the CREDITs section of your blog..

From Deepa’s Template Tips

Posted on

வண்ணம் கொண்ட வெண்ணிலவே

ரொம்ப நாளாக எனக்கு இந்த ஆசை.. audio files ஐ எப்படி பதிவேட்டில் இணைக்கசெய்வது..?,..?
Movie :Ninaithale Inikkum

 

வெற்றிகரமாக audioவை பதிவேட்டில் இணைத்துவிட்டேன்.I wanted to avoid the annoying background music , Instead add audio in such a manner that the user chooses to play
இதை எப்படி செய்தேன்..என்பதை.Include Audio Clips in Posts..பதிவேட்டை பாருங்கள்

 
 

எழுத்துப்பிழைய்யை மன்னித்து கருத்தில் பிழை இருந்தால் சங்கோசப்படாம சொல்லுங்க,
எதுவானாலும் பேசி தீத்துக்குவோம்.
Posted on

Profile picture in "Posted by" section

At the end of every post we see the “Posted by.. <authorname>” ..followed by the number of comments, timestamp etc..etc…Some would perefer having their profile pictures instead of the boring “Posted by <authorname>” text.Do follow the instructions closely.

  1. SAVE AND BACK UP YOUR TEMPLATE

  2. IF YOU ALREADY HAVE THE PICTURE IN YOUR PROFILE..go to step 4

  3. UPLOADING PICTURE TO YOUR PROFILE
    • Have a new test post and insert your picture using the ADD-IMAGE
    • Take care that your picture has the right kind of dimentions that you would like to display at the end of each post.I dont think you would prefer, if your picture takes up half as much space as the post itself.
    • Publish the post
    • Copy the URL of the picture from the EDIT-HTML part of the post
    • go to DASHBOARD—EDIT PROFILE–Give the URL in the Photo-URL
    • Save Profile and assure yourself of the picture displayed
    • Once you are satisfied with the picture in the profile.. you can delete the post that you have just now created..this will not affect the picture in the profile

  4. Go to Dashboard..Edit profile
    • Copy the photo URL into a notepad

    • Select LAYOUT of the blog(to which you wish to add the picture at the end of the posts)

    • TEMPLATE–EDIT HTML

    • Expand Widget Templates

    • locate
      <span class=’post-author’>
      <b:if cond=’data:top.showAuthor’>
      <data:top.authorLabel/>
      <data:post.author/>
      </b:if>
      </span>

    • Insert <img src=”URL YOU HAVE COPIED FROM THE PROFILE PAGE as stated above” style=”border:none”/> below the <data:top.authorLabel/>

    • Now your final code should look like this
      <span class=’post-author’>
      <b:if cond=’data:top.showAuthor’>
      <data:top.authorLabel/>
      <img src=”URL YOU HAVE COPIED FROM THE PROFILE PAGE as stated above” style=”border:none”/>
      <data:post.author/>
      </b:if>
      </span>
    • SAVE and view your blog

  5. If you donot want the “POSTED BY…YOUR-NAME” to be displayed then
    • TEMPLATE—PAGE ELEMENTS
    • EDIT–Blog posts (element)
    • Choose accordingly
    • SAVE and view

  6. FOR PIC AT THE TOP OF THE POST..(like in newspapers)
    • look for
      <data:post.timestamp/>
    • Insert the<img src=”URL YOU HAVE COPIED FROM THE PROFILE PAGE as stated above” style=”border:none”/> below
    • The Final code should look like this
      <data:post.timestamp/>
      <img src=”URL YOU HAVE COPIED FROM THE PROFILE PAGE as stated above” style=”border:none”/>This Will put the picture beside the date header of your posts.You would have noticed this on this blog itself
    • Some slight modifications might be needed for certain indiviaulistic templates…Just drop in a word..i shall help you fix it

Hope you were able to successfully add this feature to your blog using the instructions stated above.So drop in your opinion (good & bad) at the comments.Your comments motivate me to perform better…b/w dont forget to mention this link in your credits section..

From Deepa’s Template Tips

Posted on

செருப்பு வாங்கலையோ…செருப்பு..

யானைக்கெல்லாம் செருப்பு போடணும் என்ற ஆசை வந்தால்

இந்த size-ல தான் தைக்கணுமோ..?..?..?
ஒரு காலணி கடையில் நான் கண்ட விளம்பரம். புகப்படத்தை க்ளிக்குங்கள்…Full size ல பார்த்தா வித்தியாசம் தெளிவா தெரியும் .
எழுத்துப்பிழைய்யை மன்னித்து கருத்தில் பிழை இருந்தால் சங்கோசப்படாம சொல்லுங்க,
எதுவானாலும் பேசி தீத்துக்குவோம்.

Privacy Policy - Terms and Conditions