ப்ளாக்கர் : பதிவை சுற்றி பார்டர் அமைப்பது எப்படி ? ( Post around borders )

http://anbhudanchellam.blogspot.in/2012/03/post-around-borders.html

ப்ளாக்  எழுதும் நண்பர்கள் அனைவரும் தங்களுக்கு(template) தேர்ந்தெடுத்து பயன்படுத்துவார்கள் ... சிலர் ப்ளாக் கொடுக்கும் சாதாரண வார்ப்புருவை (simple template) பயன் படுத்துவார்கள் ... அப்படி நாம் பயன்படுத்தும் டெம்ப்ளேட் பார்க்க அவ்வளவு ஒன்றும் அழகாக இருக்காது ...
ஓரளவு இருக்கும் .. 

அது போன்ற டெம்ப்ளேட் பயன்படுத்துபவர்கள் தங்கள் வார்ப்புருவை எப்படி மாற்றி அமைக்கலாம் என்று பார்போம் .. 

இன்று நாம் பார்க்க இருப்பது சுற்றி பார்டர் அமைப்பது எப்படி என்று ..அதாவது நம் பதிவை அழகாக காட்ட இது போன்றவற்றை செய்தால் நன்றாய் இருக்கும்(கரண்ட் கட் )

இதற்கு  நம் செய்ய வேண்டியது கீழ காணும் இந்த கோடிங்கை தேடி

அதற்கு  கீழே ஒரு சிறு கோடிங்கை சேர்த்தால் போதும் ...

.post { அல்லது .post

border:2px dashed #E06E1E;

 #E06E1E -வண்ணத்தின் code

2px பார்டரின் அகலம் 3px,4px,5px,6px,....9px,11px இப்படி கூடிக் கொண்டே போனால் பார்டர் கட்டையாகி  கொண்டே செல்லும் ... 

மேலும்  பார்க்க :

HTML பகுதி ஏழு - அழகான பார்டர்கள் உருவாக்க  

HTML பகுதி எட்டு - சி.எஸ்.எஸ். பார்டர்கள் ப்ளாக்-க்கு எளிதில் ஒரே நொடியில் உருவாக்கலாம்


சேர்த்த  பின் இப்படி இருக்க வேண்டும் :

.post {

border:2px dashed #E06E1E; 

 ........

 ....(some codes) ..

...........

}

பிளாக்கரில் இணைக்கும் படங்களுக்கு எளிதில் பார்டர் கொடுக்க :

மேலும் பிளாக்கரில் இடுகை எழுதும் போது படங்களை இணைக்க அந்த ஐக்கானை அழுத்தி இணைப்போம் .....

இணைத்து முடித்தவுடன் ஒரு சின்ன வேலை HTML என்னும் பட்டனை அழுத்தி

<img border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCi4Wmt7fuPfGpyP5kzkWqih1KvuQg000mP4xgmKRJ0EaduLem6YucMtP2SF535-eXPkUtsZ8ddE-WQ4vpXieBlt3xm3BYilXCKoxNM6EVVSStEslvaXvjTq05fEBC04Wa7xKT-VG5/s320/Postbackroundborders.png" width="320" />

 இதில் <img border="0" என்று இருக்கிறதல்லவா .. அதில் ஜீரோ-வுக்கு பதிலாக ஒன்றோ ,இரண்டோ போடுங்கள் மீண்டும் COMPOSE பட்டனை அழுத்தினால் 
பார்டர் வந்திருக்கும் ...


____________________________________________________________


மேலும் கீழே உள்ள இடது பக்கத்தில் படத்தை வைத்து வலது பக்கத்தில்

பதிவுகள் வர

அனைத்து பதிவுகளுக்கும் பயன்படுத்த :

.post{
background:url(http://static1.grsites.com/user/folders/azwolver/r4933529/border49674897.jpg);
border: 5px solid rgb(51, 0, 204);
color: #003366;
font-size: 13px;
line-height: 83px;
margin: 0pt;
padding: 17px 15px 15px 115px;
text-align: justify;}

பதிவுகளின் இடையில் பயன் படுத்த :

<p style=" background:url(http://static1.grsites.com/user/folders/azwolver/r4933529/border49674897.jpg);
border: 5px solid rgb(51, 0, 204);
color: #003366;
font-size: 13px;
line-height: 83px;
margin: 0pt;
padding: 17px 15px 15px 115px;
text-align: justify">YOUR TEXT HERE</p>

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

”இறைவன் மனிதர்களுக்குச் சிறிதும் அநீதி இழைப்பதில்லை.
ஆனால் மனிதர்கள்தான் தங்களுக்குத் தாங்களே அநீதி இழைத்துக் கொள்கிறார்கள்.”
-நபிகள் நாயகம்

அனைத்து பதிவுகளுக்கும் பயன்படுத்த :

.post{ 

background-image: url(http://static1.grsites.com/user/folders/azwolver/r4213012/border41324848.jpg); 

 border: 3px solid rgb(85, 107, 47); 

color: black; 

font-family: verdana; 

font-size: 13px; 

line-height: 40px; 

margin: 0pt; 

padding: 15px 15px 15px 115px; 

text-align: justify;

}

பதிவுகளின் இடையில் பயன் படுத்த :

<p style=" border: solid 10px #ddddff; background-image:url(http://static1.grsites.com/user/folders/azwolver/r4213012/border41324848.jpg); padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 115px; margin: 0; text-align: justify; line-height: 20px; color: black; font-size: 15px; font-family: verdana">YOUR TEXT HERE</p>

எண்ணத்தில் கவனமாய் இருங்கள்;
ஏனெனில் எண்ணங்கள்தான் சொற்களாகின்றன.
சொல்லில் கவனமாய் இருங்கள்;
ஏனெனில் சொற்கள்தான் செயல்களாகின்றன.
செயலில் கவனமாய் இருங்கள்;
ஏனெனில் செயல்கள்தான் பழக்கங்களாகின்றன.
பழக்கத்தில் கவனமாய் இருங்கள்;
ஏனெனில் பழக்கங்கள்தான் ஒழுக்கங்களாகின்றன.
ஒழுக்கத்தில் கவனமாய் இருங்கள்;
ஏனெனில் ஒழுக்கம்தான் உங்கள் வாழ்வை வடிவமைக்கின்றது!”
-அருட்தந்தை வேதாத்திரி மகரிஷி

__________________________________________________________________


அனைத்து பதிவுகளுக்கும் பயன்படுத்த :

.post{

background-image: url(http://static1.grsites.com/user/folders/azwolver/r4213012/border41324848.jpg); 

border: 3px solid rgb(85, 107, 47); 

color: black; 

font-family: verdana; 

font-size: 15px; 

line-height: 20px; 

margin: 0pt; 

padding: 15px 15px 15px 115px; 

text-align: justify;

}

<p style="border: solid 10px #556b2f; background-image:url(http://static1.grsites.com/user/folders/azwolver/r4213012/border41324848.jpg); padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 115px; margin: 0; text-align: justify; line-height: 20px; color: black; font-size: 15px; font-family: verdana">YOUR TEXT HERE</p>

மரம் சும்மா இருந்தாலும் காற்று அதை சும்மா 

இருக்கவிடுவதில்லை

-சீனப்பெரும் தலைவர் மாவோ

சந்தத்தை நம்பி கவிதை இருக்கலாம்,
தந்தத்தை நம்பி யானைஇருக்கலாம்,
சொந்தத்தை நம்பி நீ இருக்காதே,
பந்தத்தை நம்பி மதிப்பை இழக்காதே.

___________________________________________________________________

அனைத்து பதிவுகளுக்கும் பயன்படுத்த :

.post{
background-image: url(http://static1.grsites.com/user/folders/azwolver/r4213292/border46975783.jpg); 
border: 10px solid rgb(85, 107, 47); 
color: black; 
font-family: verdana; 
font-size: 15px; 
line-height: 20px; 
margin: 0pt; 
padding: 15px 15px 15px 115px; 
text-align: justify;
}

குறிப்பிட்ட பதிவுக்கும் மட்டும் :

<p style="border: solid 10px #556b2f; background-image:url(http://static1.grsites.com/user/folders/azwolver/r4213292/border46975783.jpg); padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 115px; margin: 0; text-align: justify; line-height: 20px; color: black; font-size: 15px; font-family: verdana">YOUR TEXT HERE</p>

நண்பனே!

நாளைய மழை அறியும் எறும்பாய் இரு
 
நேற்றைய மழைக்கு இன்று குடை பிடிக்கும்
 
காளானாய் இராதே!

____________________________________________________________________

<p style="border: 10px solid rgb(220, 20, 60); background-image: url(&quot;http://static1.grsites.com/user/folders/azwolver/r4213781/border39405393.jpg&quot;); padding: 15px 15px 15px 115px; margin: 0pt; text-align: justify; line-height: 23px; color: rgb(0, 51, 102); font-size: 18px;">Give your topic a boost with a coordinated <b>HTML background, border, or button</b>.
<b>Keep scrolling for more examples.</b></p>

நம் புத்திக்கு எட்டாத வழிகள் நான்குண்டு.

1.வானத்திலே கழுகினுடைய வழி,

2.பாறைகளின் மேலே பாம்பினுடைய வழி,

3.நடுக்கடலிலே கப்பலினுடைய வழி,

4.ஒரு பெண்ணை காதலித்த மனுஷனுடைய வழி.

______________________________________________________________

<p style="border: 10px solid rgb(51, 0, 204); background-image: url(&quot;http://static1.grsites.com/user/folders/azwolver/r4222399/border84696640.jpg&quot;); padding: 15px 15px 15px 115px; margin: 0pt; text-align: justify; line-height: 23px; color: rgb(0, 51, 102); font-size: 18px;">YOUR TEXT HERE</p>

பொன்மொழிகள்

”புத்தகங்களை யாருக்கும் இரவல் தராதீர்கள்.

அது உங்களுக்குதிரும்ப வராது.

என்னிடம் உள்ள புத்தகங்கள் யாவும்

என் நண்பர்கள் எனக்கு இரவல் தந்தது தான்”

-பிரெஞ்சு நாவலாசிரியர் அனடோல் பிரான்ஸ்.

இவர் சுயசரிதை புத்தகத்தின் பெயர்

 “என் நண்பனின் புத்தகம்”.

கவனிக்க : பார்டரின் அகலத்தை 1px , 2px , 3px , 4px வரை வையுங்கள் .. 
அதிகமாக வைத்தால் பார்டர் மிகவும் கட்டையாக தெரியும் .. 
மேலும் பெரிய பதிவுகளுக்கு line-height என்பதை அதற்கு ஏற்ற படி வைத்து கொள்ளுங்கள் ..