Tuesday, March 6, 2012

பிளாக்கர் : எந்த விட்ஜெட்-யும் Pop-Up விட்ஜெட்-ஆக எளிதில் மாற்ற



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



இணையதளம் வைத்திருக்கதவர்கள் அதிகம் வர வாய்ப்பு உண்டு .. 

மேலும் இன்று நாம் பார்க்க இருப்பது ... பேஸ் புக் ,ட்விட்டர் ,பிளாக்கர் ,போன்ற எந்த விட்ஜெட்-களாக இருந்தாலும் அந்த விட்ஜெட் வலைப்பதிவின் வலது ஓரத்தில் பாப் அப் (POP-UP)ஆக வைப்பது என்று பார்போம் .. 

மூன்று பின்பற்றுபவர்கள் விட்ஜெட்-யும் இணைக்க : 

DESIGN - HTML & JAVA SCRIPT -ல் கீழே வரும் கோடிங்கை PASTE செய்யவும் .. 

இது ஒரு நிலையான விட்ஜெட் ....பக்கத்தின் எங்கு சென்றாலும் ஒரே 

இடத்தில் இருக்கும்
<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
/* Blogger */

.barrightblogger {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk9wfdUG097Bnn7XpYtLpm-qp-klO0JH7LqAH8yCFG8Lm70e2Mr_mzM0Q6pIunFk-fT24DEcUC5hBhdHFDbrBs94Wgb1pdI15XNPw5uiL-n6kIaPF99CyDGPbzdBsRhUNoW96Qg-cIl1jn/');
background-repeat: no-repeat;
width: 39px;
height: 159px;
position: fixed;
right: 0px;
top: 50px;
z-index: 1000;
}

.barrightbloggerc {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP73c9y6OKrn0YZXX4Pv3NPxKn9pVQyJAPCldJxojvTaeCyig3Ecs-gntICnkogoA-BLzI8U8iVbx7j6BHRtsQZgRSu8e_obqwJRG1bJ-ek41VPYk1BCcMkGSObPty3ZUMbrIbeiA4HNxz/');
background-repeat: no-repeat;
width: 288px;
height: 345px;
position: fixed;
right: 0px;
top: 50px;
z-index: 1100;
}

.barconteblogger {
margin: 5px 0 0 47px
}

/* Twitter */

.barrighttwitter {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTFpqtPPz1aHVmQTzG06j2YvFuMxdY2LjfSK8IX3Wb0NhnXct82qdHoyZB6WQXIsPtzmQxxEcuHQKrZDPPwVoLil-yLQ-XwBT6AA-OBglY6AvCWB88fwPSE-j_eBS25wLtbUVfiAVVswHF/');
background-repeat: no-repeat;
width: 39px;
height: 159px;
position: fixed;
right: 0px;
top: 210px;
z-index: 1000;
}

.barrighttwitterc {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk3lAyVbllUnenhejQTfMWmTA4DSsDrewx7QAW8iso9ay3FYt9I5EfZA6Cd_P2hK4H0jv7htvLBKyHM9sAYNK75C3crUT7XPI98bXnOz38u9CMtVLuPZVsmvWwx-cah1PARN3MvQ26rVvC/');
background-repeat: no-repeat;
width: 288px;
height: 345px;
position: fixed;
right: 0px;
top: 120px;
z-index: 1100;
}

.barcontetwitter {
margin: 5px 0 0 47px
}

/* Facebook */

.barrightfacebook {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFQr2D_gXxRRS4ibJREOl1lINWp_9CQln1Vx53UGV_ZByVQxOrezJGs6zzJTEN3cCd8flcJfzzq8R2MvtWp24IXbUJkzkeXw9SP0zJqD56hNWPFZEgmk8dG6-Kgkxn6r3sddjGr1x7P4p3/');
background-repeat: no-repeat;
width: 39px;
height: 159px;
position: fixed;
right: 0px;
top: 370px;
z-index: 1000;
}

.barrightfacebookc {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm0GhiP6NtQvvOS9y39_MZTShyphenhyphenZ74KuuF74Zc00mvx1_rQyFGDg1nzwLAqL_JgwIuoKlx4VZ4QYf_tX8XmM5-twqAYUo3ua3ovnPZUQRan5p0vF98x5quhVfad5PvLidUOb1DM3zgjRWHc/');
background-repeat: no-repeat;
width: 288px;
height: 345px;
position: fixed;
right: 0px;
top: 185px;
z-index: 1100;
}

.barcontefacebook {
margin: 5px 0 0 47px
}
</style>

<br />
<div class="barrightblogger" onmouseout="this.className='barrightblogger'" onmouseover="this.className='barrightbloggerc'">
<div class="barconteblogger"> 
CONTENT BLOGGER HERE(இங்கே )

</div>
</div>
<div class="barrighttwitter" onmouseout="this.className='barrighttwitter'" onmouseover="this.className='barrighttwitterc'">
<div class="barcontetwitter">
CONTENT TWITTER HERE(இங்கே )

</div>
</div>
<div class="barrightfacebook" onmouseout="this.className='barrightfacebook'" onmouseover="this.className='barrightfacebookc'">
<div class="barcontefacebook">
CONTENT FACEBOOK HERE(இங்கே )

</div>
</div>
</div>

பேஸ் புக்-க்கு மட்டும் இணைக்க :

 <style>
/* Facebook */
.barrightfacebook {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFQr2D_gXxRRS4ibJREOl1lINWp_9CQln1Vx53UGV_ZByVQxOrezJGs6zzJTEN3cCd8flcJfzzq8R2MvtWp24IXbUJkzkeXw9SP0zJqD56hNWPFZEgmk8dG6-Kgkxn6r3sddjGr1x7P4p3/');
background-repeat: no-repeat;
width: 39px;
height: 159px;
position: fixed;
right: 0px;
top: 370px;
z-index: 1000;
}

.barrightfacebookc {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm0GhiP6NtQvvOS9y39_MZTShyphenhyphenZ74KuuF74Zc00mvx1_rQyFGDg1nzwLAqL_JgwIuoKlx4VZ4QYf_tX8XmM5-twqAYUo3ua3ovnPZUQRan5p0vF98x5quhVfad5PvLidUOb1DM3zgjRWHc/');
background-repeat: no-repeat;
width: 288px;
height: 345px;
position: fixed;
right: 0px;
top: 185px;
z-index: 1100;
}

.barcontefacebook {
margin: 5px 0 0 47px
}
</style>
<div class="barrightfacebook" onmouseout="this.className='barrightfacebook'" onmouseover="this.className='barrightfacebookc'">
<div class="barcontefacebook">
CONTENT FACEBOOK HERE(இங்கே )

</div>
</div>
</div>


டுவிட்டர் -க்கு மட்டும் :

<style>
/* Twitter */
.barrighttwitter {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTFpqtPPz1aHVmQTzG06j2YvFuMxdY2LjfSK8IX3Wb0NhnXct82qdHoyZB6WQXIsPtzmQxxEcuHQKrZDPPwVoLil-yLQ-XwBT6AA-OBglY6AvCWB88fwPSE-j_eBS25wLtbUVfiAVVswHF/');
background-repeat: no-repeat;
width: 39px;
height: 159px;
position: fixed;
right: 0px;
top: 210px;
z-index: 1000;
}

.barrighttwitterc {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk3lAyVbllUnenhejQTfMWmTA4DSsDrewx7QAW8iso9ay3FYt9I5EfZA6Cd_P2hK4H0jv7htvLBKyHM9sAYNK75C3crUT7XPI98bXnOz38u9CMtVLuPZVsmvWwx-cah1PARN3MvQ26rVvC/');
background-repeat: no-repeat;
width: 288px;
height: 345px;
position: fixed;
right: 0px;
top: 120px;
z-index: 1100;
}

.barcontetwitter {
margin: 5px 0 0 47px
}
</style> 
<div class="barrighttwitter" onmouseout="this.className='barrighttwitter'" onmouseover="this.className='barrighttwitterc'">
<div class="barcontetwitter">
CONTENT TWITTER HERE(இங்கே )

</div>
</div>

பிளாக்கர் (கூகுள் Follower விட்ஜெட் எந்த விட்ஜெட் -காக இருந்தாலும் )

<style>
/* Blogger */
.barrightblogger {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk9wfdUG097Bnn7XpYtLpm-qp-klO0JH7LqAH8yCFG8Lm70e2Mr_mzM0Q6pIunFk-fT24DEcUC5hBhdHFDbrBs94Wgb1pdI15XNPw5uiL-n6kIaPF99CyDGPbzdBsRhUNoW96Qg-cIl1jn/');
background-repeat: no-repeat;
width: 39px;
height: 159px;
position: fixed;
right: 0px;
top: 50px;
z-index: 1000;
}

.barrightbloggerc {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP73c9y6OKrn0YZXX4Pv3NPxKn9pVQyJAPCldJxojvTaeCyig3Ecs-gntICnkogoA-BLzI8U8iVbx7j6BHRtsQZgRSu8e_obqwJRG1bJ-ek41VPYk1BCcMkGSObPty3ZUMbrIbeiA4HNxz/');
background-repeat: no-repeat;
width: 288px;
height: 345px;
position: fixed;
right: 0px;
top: 50px;
z-index: 1100;
}

.barconteblogger {
margin: 5px 0 0 47px
}
</style>
<div class="barrightblogger" onmouseout="this.className='barrightblogger'" onmouseover="this.className='barrightbloggerc'">
<div class="barconteblogger"> 
CONTENT BLOGGER HERE(இங்கே )

</div>
</div>

கவனிக்க  : எந்த விட்ஜெட்-ஐ இணைத்தாலும் CONTENT BLOGGER HERE(இங்கே ) என்னும் இடத்தில் அந்த விட்ஜெட்-டின் கோடிங்கை NOTE PAD -ல் வைத்து PASTE செய்து விட்டு பின் மொத்தமாக COPY செய்து 

DESIGN - ADD A WIDJET - HTML & JAVA SCRIPT -அங்கு PASTE செய்யவும்


தனியாக   159 px  உயரத்தில் அந்த விட்ஜெட் -க்கு சமந்தமான படத்தை உருவாக்கி அந்த படத்தை பதிவேற்றி (UPLOAD) செய்து அதன் URL -ஐ கீழே உள்ள URL -க்கு பதிலாக போட்டு கொள்ளவும் .. 

மேலும் CONTENT WIDJET  HERE(இங்கே ) என்னும் இடத்தில் அந்த விட்ஜெட்-டின் கோடிங்கை PASTE செய்து அனைத்தையும் COPY செய்து 
DESIGN -ADD A WIDJET - HTML & JAVA SCRIPT -ல் PASTE செய்யவும் ..


<style>
/* anywidjet */
.barrightWD {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTFpqtPPz1aHVmQTzG06j2YvFuMxdY2LjfSK8IX3Wb0NhnXct82qdHoyZB6WQXIsPtzmQxxEcuHQKrZDPPwVoLil-yLQ-XwBT6AA-OBglY6AvCWB88fwPSE-j_eBS25wLtbUVfiAVVswHF/');
background-repeat: no-repeat;
width: 39px;
height: 159px;
position: fixed;
right: 0px;
top: 210px;
z-index: 1000;
}

.barrightWD1 {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk3lAyVbllUnenhejQTfMWmTA4DSsDrewx7QAW8iso9ay3FYt9I5EfZA6Cd_P2hK4H0jv7htvLBKyHM9sAYNK75C3crUT7XPI98bXnOz38u9CMtVLuPZVsmvWwx-cah1PARN3MvQ26rVvC/');
background-repeat: no-repeat;
width: 288px;
height: 345px;
position: fixed;
right: 0px;
top: 120px;
z-index: 1100;
}

.barconteWD2 {
margin: 5px 0 0 47px
}
</style> 
<div class="barrightWD" 
onmouseout="this.className='barrightWD'" onmouseover="this.className='barrightWD1'">
<div class="barconteWD2">
CONTENT WIDJET HERE(இங்கே )

</div>
</div> 

DEMO : வலது ஓரத்தில்

எல்லாமே  எளிமையான படிகள் தான் பார்க்கையில் தான் கொஞ்சம் பெரிதாக தெரியும் .. கொஞ்சம் பொறுமையாக செய்தால் சில நிமிடங்களில் செய்திடலாம் .. 

சந்தேகம் இருந்தால் கேட்கலாம் ..பயனுள்ளதாக இருந்தால்  சமூக தளங்களில் பகிர்ந்து கொள்ளுங்கள் ... 

நன்றி ..

CONTENT BLOGGER HERE இங்கே நண்பர்கள் இணைந்து கொள்ளவும்
CONTENT TWITTER HERE இங்கே நண்பர்கள் இணைந்து கொள்ளவும்
CONTENT FACEBOOK HERE இங்கே நண்பர்கள் இணைந்து கொள்ளவும்

9 comments:

  1. நண்பா விட்ஜெட் பயன் படுத்த நல்ல பகிர்வு

    ReplyDelete
  2. ஆகா நல்ல விடயம் நன்றி

    ReplyDelete
  3. super! thank you!

    ReplyDelete
  4. ஆஹா ! வித்தியாசமா இருக்குங்க ! நன்றி !

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. மிகவும் பயனுள்ள பதிவு. எளிமையான வழிமுறையுடன் உள்ளது. நன்றி.

    ReplyDelete
  7. நன்றி அன்பரே எனது தளத்தில் உபயோகித்துள்ளேன் நன்றி

    ReplyDelete