Using Scroll Box to show Really Large Pictures

Say you need to post a really large picture in you post..perphas the picture’s width and height extends far beyond the boundaries od you blogpost / sidebar..Top avoid gettimg messed up with the layout-presentation of the blog, you would wisely link to the picture and provide the link in your blog.=d>

The Picture that you see here has

WIDTH=972px
HEIGHT=595px.

If I had added this picture directly.. i am sure it would not have been a pleasent experience for me & my readers.;;)

You can see the full-Picture here to get an idea abouts its dimentions.

So I have displayed the picture in a scrollable-area called as the

<iframe></iframe>


To add such a scrollable area to your blog (post or sidebar) all you need to do is insert this one simple line of HTML code :-B

<iframe src=”
URL of the Picture” frameborder=”0″ height=”300″ width=”300″>
</iframe>

Take care that the WIDTH of the iframe is atleast 20px less than that of the post (or) Sidebar..where you want the frame to appear.The reason being, out of the entire width specified in the iFrame some of it is used to display the scrollbar

Liked this.. Start using..A Backlink to this post will be appreciated

Dignity & Decency.. Out-of-Fashion ஆயிடுச்சா :-?

லைபதிவர்களுக்கிடையே நடக்கும் தற்க்கங்கள் பலதும் நான் தொடர்ந்து கவனிச்சுகிட்டு வறேன்..இந்த விவாதங்கள் பலதும் ஸ்வாரஸ்யமா – சிந்தனையை தூண்டக்கூடியதா – உண்மைய்யை ஒட்டி இருக்கும் 😐 விவாதத்தில் என் அபிப்பிறாயத்தையும் சொல்லணும்ன்னு நினைப்பேன்..பின்னூடம் கூட சில நெரத்திலெ தட்டச்சு செய்து..இன்னும்-என்ன Publsih ன்னு மட்டும் தான் குடுக்கணும்..( என் பழக்கம் என்னன்னா..முதல்லே நான் சொல்லவேண்டியதை comment box லெ type பண்ணி வச்சுப்பேன்..அப்புறம் தான் மத்தவங்க comments ஐ படிப்பேன்..so that I dont want my initial thought to be influenced by what others had said.. அப்புறம் தேவைபட்டா பின்னூடத்திலெ மாற்றங்கள் செய்வேன்).செரி publsih பண்ணருதுக்கு முன்னே.. எனக்கு முன்னாடி வந்து பின்னூடம் குடுத்தவங்க்ளோட அபிப்பராயம் என்னன்னு தெரிஞ்சுக்கலாம் ன்னு படிச்சா .. அட-சே .. What ever happend to good-old-fashoned dignity of expression ன்னு தொணிடும்..:(

நாமெல்லோரும் அடிமைத்தனத்திலிருந்து விடுபட்டுவிட்டோம்ங்கிறதை எல்லாரும் ஒத்துபீங்கன்னு நம்பறென். எல்லோருக்கும் கருத்து-ஸுதந்திரம் , (Freedom of Thought) & Freedom of expression (please give me its Tamil equivalant) இருக்கு.. அத்னாலதானே .. கைய்க்கு-வந்ததை தட்டறோம் – வாய்க்கு-வந்ததை பேசறோம் …Each person is entitled to his / her opinion இல்லையா.. ஒரே விஷயத்தை 2 பேர் கிட்டே சொன்னா 3 அபிப்பிராயம் கிடைக்கும்.. இதுலெ எது செரிங்கிறது அவங்க-அவங்க கண்ணோட்டத்தை பொறுத்து இருக்கு..

விவாதத்தின் நோக்கம் என்ன?.. எது செரி – எது தவறு ன்னு முடிவு செய்வதா?. ஹூஹ்ம்…. “விவாதம்”ன்னாலே.. அதுக்கு முடிவே இல்லை.. அப்புறம்.. விவாதம் செவதுக்கு என்ன காரணம் — ஒரே விஷயத்துக்கு பல அபிப்பிராயம் வரும்போது.. we widen our horizon.. things are put in a different prespective [-(

உதாகரணத்துக்கு சொல்லணும் ன்னா

விவாதாவிஷயம் : – சூர்யோதயம்
இதுக்கு சுமாறா இத்தனை அப்பிப்பிராயங்கள் வரலாம் .. depending on who says it

  • சூர்யன் கிழ்க்கில் உதயமாகிறது
  • யோகாசனம் செய்ய எவ்வளவு ரம்யமான சூழல்
  • இந்த க்ஷணத்தை நான் ஓவியமாக தீட்டப்போறேன்
  • என் கவிதைய்யை கேளுங்கள்
  • செ..அதுக்குள்ளே விடிஞ்சிடுச்சா…office க்கு சீக்கிரம் கிளம்பணும்
  • அய்யயோ… இன்னிக்கி பரீக்ஷை..பிள்ளையாரே காப்பத்துப்பா
  • நான் இன்னும் கொஞ்சம் தூங்கறேன்

எந்த ஒரு விவாதத்திலெயும்.. அவங்க-அவங்க அபிப்பிராயத்தை மரியாதைக்குறிய பாணியிலெ ஏன் சொல்ல மெனக்கிடறதில்லை..ங்கிறது தான் என்னோட வருத்தம்.. எல்லாரும் ” பொதுவாவே ” நல்லவங்களும் – பண்புள்ளவங்களும் தான்.. அப்புடி இருக்க…பதிவுக்கு / பின்னோடத்துக்கு எதிரா அபிப்பிராயம் சொல்லும்போது (அனானியாகவே இருக்கட்டுமே )..Is it so difficult to give your opposing views with a little Decency and Dignity.. Or is it more fashionable to be mean and Nasty while expressing yourselves

152 – 800 வருஷம் ஜெயில் தண்டனை :-O

துவும் ஒரு செய்திய்யை சாற்ந்த பதிவு தான்..Crime against children க்காக Silicon Valley நீதிமன்ற்த்தில் தீற்ப்பு விதிகபட்டது

அங்கே law-enforcement எப்படின்னு எனக்கு தெரியாது.. ஆனா..பல நேரத்துலே நாம சொல்லியிருக்கோம்..”அவனை / அவங்களை மாதிரிபட்டவங்களையெல்லாம் ஜென்மத்துக்கும் வெளியே விடகூடாது “..(கோபத்திலெ – ஆத்திரத்திலே – ஆதங்கத்திலெ.. ன்னு பல emotional state லெ சொல்லியிருப்போம்)..மேலே செய்தியில் இருக்கும் குற்றவாளிக்கும் அதே நிலமை தான்..ஜென்மத்துக்கும் வெளியே வர முடியாது..:-S

“Lot of time to reflect on…”

குற்றவாளிகள் திருந்துவதுக்கு இருக்கும் வாய்ப்பை இந்த தண்டனை ஒட்டுமொத்தமாக அழித்துவிடுகிறது ..ன்னு சொல்லரவங்களுக்கு..செய்தியை – படிங்க..உங்க – நெஞ்சை தொட்டு சொல்லுங்க.. இந்த-குற்றவாளி – திருந்த வாய்ப்பிருக்குன்னு .. ஒரு அணுவாவது உங்களுக்கு நம்பிக்கை இருக்கா b-( ?

தமிழ் வாத்தியாரா ..சிங்கபூர்லெ உங்களை தேடறாங்க :-"

மிபத்துல வந்த செய்தி.. சிங்கபூர்லெ இளைஞ்சர்களுக்கிடையே தமிழ் பேசுவது ரொம்ப கம்மியாடுச்சாம்.. >-)

இதுக்கு முக்கியமா.. அங்கே சீனர்கள் தான் அதிகபடியா இருக்காங்களாம்..வெறும் 6% தான் இந்தியர்கள்..அதுலெயும் தமிழ் பேசுபவர்கள் ரொம்ப கம்மியாம்

அதனால Pre-School – junior college லெ எல்லாம் spoken Tamil (spoken-english மாதிரி) க்கு க்ளாஸ் , இணையதளம்.. சொல்-உச்சரிப்புக்கு voice files எல்லாம் பெரிய அளவிலே செய்யப்போறாங்களாம்

உங்க தமிழ் வாத்தியாரை உடனடியா சிங்கபூர் அனுப்பிவையுங்க.. எத்தனை நாள் தான் அதே ஓட்ட-சேர் லெ உக்காந்து பாடம் நடத்துவார்..பாவம்..அவரும் வெளிநாடெல்லாம் சுத்திபாக்கட்டுமே 8->

Organise your comments with numbers

What is the happiest thing that can happen to an average blogger?..8-> yes.. you guessed it right.. to get some comments for the post Imagine how thrilled you were when you got the first comment for your first post..Then came a time you started receving comments (users with names and also anonymous users) and you were trying to reply to the a certain comment and got misunderstood by a different commentor… left you wondery why 😕

How about numbering the comments so that you can say exactly to which (rather whose) comment you are refering to..Still confused with waht I am saying.. I suggest that you click on any of the posts so that the post opens in a diffrent window along with the comments displayed..See any diffrence..The comments are all numbered

Want to know how i did this..Read along

  1. :-B SAVE AND BACKUP YOUR TEMPLATE :-B
  2. LOCATE THE FOLLOWING LINES IN THE TEMPLATE
    STEP-1

    <dl id=’comments-block’>
    <b:loop values=’data:post.comments’ var=’comment’>
    <dt class=’comment-author’ expr:id='”comment-” + data:comment.id’>
  3. You need to add the tags shown in RED so that the final code looks like this
    <dl id=’comments-block’>
    <ol>
    <b:loop values=’data:post.comments’ var=’comment’>
    <li>
    <dt class=’comment-author’ expr:id='”comment-” + data:comment.id’>
  4. LOCATE THE FOLLOWING LINES IN THE TEMPLATE
    STEP: 2

    <span class=’comment-timestamp’>
    <a expr:href='”#comment-” + data:comment.id’ title=’comment permalink’>
    <data:comment.timestamp/>
    <b:include data=’comment’ name=’commentDeleteIcon’/>
    </span>
    </dd>
    </b:loop>
  5. You need to add the tags shown in RED so that the final code looks like this
    <span class=’comment-timestamp’>
    <a expr:href='”#comment-” + data:comment.id’ title=’comment permalink’>
    <data:comment.timestamp/>
    <b:include data=’comment’ name=’commentDeleteIcon’/>
    </span>
    </dd>
    </li>
    </b:loop>
    </ol>

So waht are you waiting for.. Start organising..dont forget to backlink to this post

3-colum Template தேடுபவர்களுக்கு :-B

பெரும்பாலும் blogger ல் இருப்பது 2-colum templates.நிறைய விஷயங்களை ஒரே இத்தில் – ஒரே பார்வையில் காண்பிக்க 2 colum Template டில் முடியாது.ரமணியின் 3 colum template ஐ ஒரு basic skeleton போல் பயன்படுத்தி .. இப்போ நீங்க பார்த்துகிட்டு இருக்கீங்களே.. இது மாதிரி பண்ணியிருக்கேன்

உங்களுக்கு 3 colum template ஐ try பண்ணனும்ன்னா..
கீழெ இருக்கும் சுட்டிய்யை Right-click செய்து SAVE Target என்று கொடுங்கள்..
File ஐ xml ஆக Save செய்யுங்கள்
Template.xml

இந்த Template ஐ உங்களுடைய பிளாகில் இணைக்கைறதுக்கு முன்னால் ஒரு சோதனை பிளாக் செய்து.. Sidebar – widgets , Adsense code , Scripts எல்லாம் சேற்த்து செரி-பார்த்துகொள்ளவும்..எல்லாம் த்ருப்தியா இருந்தா .. Main Blog ல் இணைக்கவும்

Template ல் எந்த வித மாறுதல் செய்யவதுக்கு முன்னாடி.. அதன் நகலை Edit-HTML போய் copy-paste அல்லது Download Full Template டால் பத்திரபடுத்தி வச்சுகோங்க.. அப்புறம்..அய்யோ – அம்மா– ன்னு என்ன கூச்சல் போட்டலும் .. template திரும்பி கிடைக்காது

Add this to your post-template

SETTINGS–FORMATTING–POST-TEMPLATE

<span class=”dropcaps”>*</span>
Type your summary here
<span id=”fullpost”>
Type rest of the post here
</span>

use this for ordered lists only
<ol class=”coloredNumbers”>
<li><span>First point.</span></li>
<li><span>Second point.</span></li>
</ol>

This template has the following hacks

  1. Expandable post summaries
    அதாவது..என்னோட Main Blog Page ஐ பார்தீங்கன்னா..ஒவ்வொரு பதிவிலேயும்.. + மேலும் படிக்க னு ஒரு link இருக்கும்.. அதை க்ளிக்கினா … முழு – பதிவும்..நீங்க படிக்கிற window லெயே (இன்னொரு window க்கு போகாமலெயே) படிக்கலாம்.
    அங்கேயே .. -பதிவுச்சுரூக்கம் னு ஒரு link இருக்கும்.. அதை க்ளிக்கினா …திரும்ப..பழெய நிலைக்கு வருவீங்க..

    இதை அம்ல் படுத்த கொஞ்ச்ம் கவனம் தேவை.

    • முழூ பதிவை (content) எழுதி publish செய்து செரி பார்த்துகொள்ளுங்கள்
    • Main page ல் பதிவில் எது வரை மட்டும் தெரியனும்ன்னு விரும்புரீங்களோ..அந்த வார்த்தைக்கு பிறகு ..
      Immideatly after the line/word where you want the post to be cutoff in the main page..
      <span id=”fullpost”>சேற்த்து..
      பதிவு முற்றும் இடத்தில் ..</span>சேற்க்கவும்

  2. :)Script for Yahoo Smileys to appear as you type the appropriate keys =d> இது தான் உங்களுக்கெல்லாம் தெரியுமே..Blogger Nav-Bar ஐ பத்திர படுத்திட்டேன்..(என்னால் அதை தொலைத்தவர்களுக்கு எப்பாடுபட்டாவது தேடி-கண்டுபிடித்து தருகிறேன்)
  3. Date Header for multiple posts
    ஒரே நாள் 2-3 சொதனை பதிவு போட்டு பாருங்கள்..எல்லா பதிவுக்கும் Date இருக்காது..இப்போ ஒது சாத்தியம்
  4. Drop Cap look for each posts…first letter of the post is large and spans 2 lines
  5. Custom bullets
    • Unordered bulleted lists have arrow shaped icons
    • Ordered bulleted lists–the numbers appear in diffrent color–in the posts
    • Ordered bulleted lists in the sidebar have diamond shaped icons

  6. Profile Pic at the post-header..however for what u see is a sample pic..you need to change the picture url with that of your profile-pic-URL giving a Newspaper look

நிங்கள் விருப்பபட்டால்.. Background color – text color – link color- sidebar title header-படம் – Footer வேரே என்னென்ன முடியுமே எல்லாமே உங்க விருப்பம் போல மாற்றி அமைக்கலாம் ..
ஆ.. ஆப்புறம்.. மறக்காம backlink பண்ணுங்க..

சங்கிலி தொடர் போல் சுட்டிகளை / பட்டியல்களை வரிசை படுத்த

ங்க எல்லாருடைய பிளாக்லெ பல சுட்டிகள் இருக்கும்.. நீங்க அடிக்க்டி சுத்தற வலைபதிவோட சுட்டியெல்லாம் கைய்க்கெட்டின தூரத்துல வைச்சிருப்பீங்க. /:) .Most likely in the sidebar. ஒருவேளே..எக்கசக்கமான சுட்டிகள் இருந்தா.. பட்டியல் ரொம்ப நீளமா இருக்கும்…அதனால் எல்லா சுட்டிகளையும்.. அடக்கமா ஒரு குறிபிட்ட எல்லைக்குளே கட்டுகோப்பா வைச்சோம்னா பார்க்கவும் அழகா இருக்கும்.. Side bar லெ வெறே எதாவது சேர்க்கணும்னாலும் வசதியா இருக்கும்.

நான் எதை குறிப்பிட்டு சொல்லறேன்னு சந்தேகமா.. என்னொட Right-Side Bar ல் “”நன்றி“”ஐ பாருங்க..உங்களுக்கு சாதாரண-பட்டியல் மற்றும் மறைமுக சுட்டிகள் கொண்ட பட்டியல் செய்யும் முறை தெரியும்ன்னா மட்டும் மேலே படிங்க :-w..

  1. உங்கள் Template ஐ Edit-HTML பொய் நகலை பத்திர படுத்தி கொள்ளவும்
  2. Template – Page Elements – Add New Element – HTML-Javascript ஐ தேர்ந்தெடுக்கவும்

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

    *******நீங்கள் சேர்க்க விரும்பும் சுட்டிகளை இங்கே எழுதவும்******

    </marquee>
    <td></tr></table>
  4. இங்கே நிங்க எவள்ளாவு நீளமான பட்டியல் வேணும்னாலும் கொடுக்கலாம்
  5. marquee height=150ஐ மாற்றி அமைத்தால்.. பார்வயில் தெரியும் பட்டியல்களின் எண்ணிக்கைகளை கூட்டவோ – குறைக்கவோ செய்யலாம்

ரொம்பவும் Technical Jargons உபயொக படுத்தாம செய்முறை விளக்கம் குடுக்கணும்ன்னு ந்னினைச்சேன்..சரியா விளக்கம் சொல்லியிருக்கேனான்னு நிங்க தான் சொல்லணும் [-o<

Mystery of the dropping sidebar :-SS

Its common to hear from your blogging friends to say “Hey your sidebar slipped to the bottom.. fixing it will make your blog look great”.. However when you see the blog in the browser everything appears just fine..This will drive you nuts ~x( trying to figure out wahat could be happening.There are two possiblities
POSSIBILITY – 1:-
The problem could be in the visitors screen width and resolution.Not all will be viewing at the same screen widht and resolution.For Eg: A sees with a monitor with 21 inch and B with say 17 inches… so When A sees the blog all the colums are in place (Good.. ok) but when B sees its.. its only natural that the screen cannot accomodate the contents so it drops few items to the bottom.

POSSIBLITY : – 2.
May be you have posted a link that is sooo looong that in an attempt to dispaly in a single line, the rest of the elements are dropped to the bottom.When the link in the main post is loooong, the sidebar is dropped and when vice versa

Take a close look at your template (provided you are able to identify which section represents which colum)This is with refrence to my template

#main-wrapper /*—————Center colum——————-*/
{
color: #666666;
padding: 0px 0px 0px 0px;
border-right: 1px solid maroon;
border-left: 1px solid maroon;
margin-left: 0px;
margin-bottom: 0px;
width: 59%;/* Earlier this used to be 430px*/
float: left;
word-wrap: break-word;/* fix for long text breaking sidebar float in IE */
}

#sidebar-wrapper /*————Right side colum—————–*/
{
font-family: Georgia;
text-decoration: none;
font-weight: regular;
font-size:11px;
margin-top:0px
margin-right: 0px;
text-transform: capitalize;
width: 20%;/* Earlier this used to 160px*/
float: right;
text-align: center;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#newsidebar-wrapper /*—————-Left side colum————-*/
{
font-family: Georgia;
text-decoration: none;
font-weight: regular;
font-size:11px;
margin-right: 0px;
width: 20%;/* Earlier this used to 160px*/
float: left;
text-align:left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

If you are trying to convert the width of the colums from pixels to percentage, i suggest that you have a test-blog with exactly the same template and modify the width , once you are satisfied with the look of the colums, then change the appropriate values.If you are not sure, which block represents which colum,:-? its always wise to color-code them for easy recognition.

Color-coding means you give diffrent backgound color for each cloum so that it get easy on you to identify the cencerned block of code in thetemplate.just add
background-color: pink; for one
background-color: green; for one
background-color: yellow; for one

Now when u see in the browser, you know what is happening to exactly which colum.Remeber do this only in the test blog.>:/

தொழில் சுத்தம்

இந்த ஹெர்பல் பியூடி பார்லர் தொழில்லெ எவ்வளவு கவனமா இருக்காங்கன்னு பாருங்க

ஹெர்பல்ன்னு பேரு போட்டு கண்ட-கண்ட Chemicals உபயோக படுத்தமட்டாங்க..போலயிருக்கே 😕 .. ஏன்னா .. கொஞ்சம் அப்படி chair கிட்டே பாருங்க.. எலுமிச்சம் பழம் தோலெல்லாம் காய வச்சிருக்கங்க..

மதிப்பிர்க்குறிய மகாஜனங்களே :)

ல ஊரிலேயிருந்து வந்து எனகு ஊக்கம் குடுத்த அனைவர்க்கும் நன்றி. இத்தனை ஊரிலிருந்து மக்கள் வந்திருக்காங்க…உபயம் Google Analytics

கொத்து-கொத்தா முத்து இருக்கே.. அதெல்லாம் நீங்க தான்.. :X உன்னிப்பா பார்தீங்கன்னா அதில் ஒரு முத்தில் உங்கள் பேரும் இருக்கும்