Thursday, June 14, 2012

அழகான BLOGGER SUBSCRIBE BOX 2...


இதற்கு முன் ஒரு பிளாக்கர்(அந்த பதிவை படிக்க கிளிக்...)  SUBSCRIPTION BOX வைப்பதை பார்த்தோம் அதில் கூகிள் பிளஸ் இல்லாமல் வைத்தோம் இந்த முறை கூகிள் பிளஸ் வைத்து மிக அழகான FACEBOOK,TWITTER,EMAIL SUBSCRIPTION மற்றும் FEED BURNER எல்லாம் வைப்பதை பாப்போம்.

முதலில் உங்கள் ப்ளாக் சென்று DESIGN => EDIT HTML CLICK செய்யவும்...


பின்னர் Ctrl + f அழுத்தி </head> என்ற code கண்டுபிடித்து அதற்கு பின் பின்வரும் நிரல் பேஸ்ட் செய்யவும்...



<style type='text/css'>
.sub-box{
width: 270px;
background: #fff;
padding: 2px 5px 7px 7px;
border: 2px solid #000;
border-radius: 15px;
}
.sub-box:hover{
border-style:dashed; 2px solid: #389af2;
}
.followlinks h1{
font-family:Cabin Condensed;
font-weight: bold;
color: #000;
padding: 0px 0px 2px 40px;;
font-size:17px;
}
.followlinks ul{
font-family:Cabin Condensed;
font-weight: bold;
}
.followlinks ul li{
float:left;
width:90px;
padding-left:40px;
margin:0 0 0 5px !important;
line-height:35px !important;
}
.followlinks ul li a{
font-size:20px !important;
text-decoration:none;
font-weight:normal;
}
.followlinks ul li.otrss{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwVHdFBrwmk1kkB-HeQ15g_7i9N9k5FgoJzxdHseO0-PJaYpWK8HczGqKu6lz6tUJdmbSmMsgrYr6_4QFB_TO3DaRAaVvPkcXLlhh92re6dlRAIOjc83FymCAzb4pJuYPVvLBQOw0Ebef3/s1600/rss-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otgoogleplus{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_E1hfEjMtE5frF209nxc2Xvq-jJVejTgAUizxBk7NTscHtIukemMyAyuoidm2K4O-6xF94GixSJ6uST-ipnWDtr12MPK6OgvmS7OtYyO4TiWCIX5Z0xNgjbSk31vXHwb8JO0NkLN2V1Q7/s1600/googleplus-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.ottwitter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDnwIIGTaEaUJouMhazpS0h5c6ME9qtKDCq_ZC3phovmqQxysqyGqMXLtJvSk2t_yEdb3MT9hfsUaN1Y9K4J0kbB3b8j5Uo4o5mRjt5BqYGKt7rXjccWbQW0tv13oT9Afv5-8V-Ebs3DY4/s1600/twitter-ot.png) no-repeat scroll left center transparent;
}
.followlinks ul li.otfacebook{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO5n0hgCJycJyJ6m0xgpCTsxudsqvWK5R_1na4dGxlPuaeoYSYq7qW0fKtygq20wTh7xrBlr90KcUCN8edqp67gcVvsSkXyReAt-ANhRhg7CQpEPT6B7TG-AMlqEr_CjZWKVXGKcrXbXj-/s1600/facebook-ot.png) no-repeat scroll left center transparent;
}
form.emailform{
margin:5px 0 0;
display:block;
clear:both;
}
.emailtext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5p6ebbu6AxqycoyV6nSwOdHZicTdzGgBy0203ZKqBGu-mJ_clb-kEMjPhx-6vzBlMkrR-sBdOhF1KW_N6wdXOMNvXoBC6BMUrRo2HdxupgqsB8nfU58eg8XZIDsWibymQjKIwJCWHzzVE/s1600/ot-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#444;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 142px;
}
.emailtext:focus{
outline: none;
}
.sub-button{
color:#444;
font-weight:bold;
text-decoration:none;
padding:6px 10px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-goog-ms-border-radius: 5px;
border-radius: 5px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
.sub-button:hover{
background: -moz-linear-gradient(top, #e7e7e7 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e7e7e7), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #e7e7e7 0%,#f4f4f4 100%);
}</style>
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Cabin+Condensed::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>


பின்னர் SAVE TEMPLATE அழுத்தவும் அப்படியே EDIT LAYOUT சென்று ADD GADGET HTML/JAVA SCRIPT SELECT செய்யவும் அதில் பின்வரும் நிரல் பேஸ்ட் செய்யவும்...


<div class='sub-box'>
<div class='followlinks'>
<h1>Get Free Email Upadtes</h1>
<ul>
<li class='otrss'><a target='_blank' href='http://feeds.feedburner.com/thalapolvaruma'>RSS</a></li>
<li class='otgoogleplus'><a target='_blank' href='https://plus.google.com/112894119084466377439'>Google+</a></li>
<li class='ottwitter'><a target='_blank' href='http://twitter.com/chinnamalai7'>Twitter</a></li>
<li class='otfacebook'><a target='_blank' href='https://www.facebook.com/chinnamalai7'>Facebook</a></li>
</ul>
</div>
<br />
<div style="text-align: left; display: inline-block;">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=thalapolvaruma', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">

<input type="hidden" value="thalapolvaruma" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="SignUp" title='' alt='' />
</form>
</div>
</div>

பின்னர் நீல வண்ணத்தில் இருப்பதை உங்களின் தகவலை கொடுத்து மாற்றி கொள்ளவும்...
ctrl+f change the address

http://feeds.feedburner.com/ thalapolvaruma  உங்கள் FEED BURNER முகவரி
https://plus.google.com/112894119084466377439 உங்களின் கூகிள் பிளஸ் முகவரி
http://twitter.com/chinnamalai7  TWITTER ADDRESS
https://www.facebook.com/thalapolvaruma  FACEBOOK PAGE ADDRESS
thalapolvaruma இரண்டு இடங்களில் உங்கள் FEED பெயர் கொடுக்கவும்...

11 comments:

  1. நானும் கூடிய சீக்கிரம் வைக்கிறேன், என் வலைபூவுடன் திறடியையும் subscriber box um இணைக்க வேண்டும், தகவலுக்கு நன்றி நண்பா

    ReplyDelete
    Replies
    1. சீக்கிரம் சீனு திரட்டி ஓட்டு பட்டையை முதலில் வையுங்கள்...facebook twitter வையுங்கள்...thanks machi...

      Delete
  2. அழகான Subscribe Box -

    பகிர்வுக்கு நன்றி பாஸ்

    ReplyDelete
    Replies
    1. ரொம்ப நன்றி நண்பா....

      Delete
  3. Replies
    1. தங்கள் வருகைக்கும் கருத்திற்கும் நன்றி...

      Delete
  4. அழகான Subscribe Box நன்றி.

    ReplyDelete
  5. சூப்பர் நண்பா.. உங்களை இன்று தான் பதிவில் கண்டு பிடித்தேன். blog சூப்பராக உள்ளது. எனது E-MAIL ideasofharrypotter@gmail.com

    ReplyDelete
    Replies
    1. சரி நண்பா இனி தொடர்வோம்...

      Delete
  6. உங்கள் பதிவுகள் அருமை.... வினோதங்கள் நிறைந்த எமது தளத்திற்கும் ஒரு முறை விசிட் செய்ய வேண்டுகிறேன்
    http://puthiyaulakam.com

    ReplyDelete
    Replies
    1. நன்றி நண்பா..கண்டிப்பா விசிட் வருகிறேன் அனைத்தையும் சரியாக பார்த்து கொள்ளுங்கள்....

      Delete