அட்டகாசமான Social Sharing விட்ஜெட்

அட்டகாசமான Social Sharing விட்ஜெட்

at 10:25 PM Posted by Ungal Nanban

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

உங்களுடைய Blogger இனுள் நுளைந்து >> Template >> Edit HTML >> Proceed சென்று

]]></b:skin>

என்பதை கண்டுபிடித்து அதற்குகீழ் பின்வரும் CSS code ஐ இணைக்கவும்.

.mbl-wrapper{
padding: 0;
width: 535px;
height: 70px;
margin: 80px auto 30px auto;
}
.mbl-wrapper ul{
float: left;
}
.mbl-wrapper ul a{
display: block;
width: 68px;
height: 70px;
margin:  -10 -24 px;
outline: none;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPEwTX6DDDmI_FChWpDZ_5oeqfbj1Q5_jmBN3medpNP81JWtxn-zO9zbiIx0ngnKgpdATxHg9TMzhsOegoNcGXUxomHo_uHvxFO4X0mqmzAWndcwg0TYv_8SonXaZuHVBaRhCRTGedxlt4/s1600/1.png) no-repeat top left;
text-indent: -9000px;
position: relative;
}
.mbl-wrapper ul .mbl-gplus{
    background-position: 0px 0px;
}
.mbl-wrapper ul .mbl-twitter{
    background-position: -68px 0px;
}
.mbl-wrapper ul .mbl-pinterest{
    background-position: -136px 0px;
}
.mbl-wrapper ul .mbl-facebook{
    background-position: -204px 0px;
}
.mbl-wrapper ul .mbl-linkedin{
    background-position: -272px 0px;
}
.mbl-wrapper ul .mbl-rss{
    background-position: -340px 0px;
}
.mbl-wrapper ul a span{
width: 100px;
height: auto;
line-height: 20px;
padding: 10px;
left: 50%;
margin-left: -64px;
font-family: Shanti, Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 14px;
color: #2f6986;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #2f6986;
background: rgba(255,255,255,0.3);
text-indent: 0px;
border-radius: 5px;
position: absolute;
pointer-events: none;
bottom: 100px;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.mbl-wrapper ul a span:before,
.mbl-wrapper ul a span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
.mbl-wrapper ul a span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #2f6986;
}
.mbl-wrapper ul a:hover span{
opacity: 0.9;
bottom: 70px;
}

இப்போது Save Template ஐ கொடுத்து சேமித்து கொள்ளவும்.

பின்னர் Layout >> Add a Gadget >> Edit HTML/JavaScript என்பதை click செய்து பின்வரும் code ஐ இணைத்து கொள்ளுங்கள்,

<div class="mbl-wrapper">
<ul><a class="mbl-gplus " href="https://plus.google.com/u/0/116215118129316828883"><span>Google Plus</span></a></ul>
<ul><a class="mbl-twitter" href="https://twitter.com/Palathum10m"><span>Twitter</span></a></ul>
<ul><a class="mbl-pinterest" href="http://pinterest.com/palathum10m/"><span>Pinterest</span></a></ul>
<ul><a class="mbl-facebook" href="http://www.facebook.com/pages/Palathum10m/499467436733467"><span>Facebook</span></a></ul>
<ul><a class="mbl-linkedin" href="www.linkedin.com"><span>LinkedIn</span></a></ul>
<ul><a class="mbl-rss" href="http://feeds.feedburner.com/blogspot/HhLOC"><span>Feeds</span></a></ul>
</div>

மேலே சிவப்பு நிறத்தில் உள்ள Link களில், உங்களுடைய Link களை மாற்றிக்கொள்ளுங்கள்.

அவ்வளவுதான். இப்போது உங்களுக்கு தேவைப்படும் இடத்தில் இந்த விட்ஜெடை நகர்த்தி வைத்து விடுங்கள்.

எமது பயனுள்ள பதிவுகளை மின்னஞ்சல் மூலம் பெற்றுக்கொள்ள கீழே உள்ள பெட்டியினுள் உங்களுடைய மின்னஞ்சல் முகவரியை கொடுத்து Subscribe என்பதை click செய்யவும்.

palathum10m thanks