Our Blog! Top News! Be a Web Designer with Joomla! Be a Good Blogger with Blogger Lessons Download Operating Systems FREE!
Topics :

Wednesday, October 16, 2013

Let's Create Slider Social Widget - Blogger Lesson 5

By DJ Niraj  |  4:23 PM No comments

ඔන්න ටික දවසක නිවාඩුවකින් පස්සෙ බ්ලොගර් පාඩමත් අරගෙන ආවා.. ඔයාලට මම කලින් පෝස්ටුවකින් කිව්වා නේද අපේ Forum එක ගැන. ඒකට ගිහින් බැලුවෙ නැති කට්ටිය මෙතනින් ගිහින් බලන්නකෝ..  




එහෙනම් අපි දැන් අද ආපු වැඩේට බහිමුකෝ.. ඔයාලා ඕනි තරම් වෙබ් අඩවි වල දැකලා ඇති Social Widgets තියනවා. Social Widgets කියන්නෙ සමාජ වෙබ් අඩවි වල අපේ වෙබ් අඩවියට අදාල Pages වගේ දේවල් අපේ වෙබ් අඩවියේම පෙන්නලා ඒවාට fansලා අරගන්න පුලුවන් උපක්‍රමයක්. ඔය Facebook Like Box කියන්නෙත් ඒ වගේ සෝෂල් විජෙට්ටුවක් තමයි. මමත් අද කියලා දෙන්න යන්නෙ ඒ වගේ browser එකේ ස්ලයිඩරය ගාව පෙන්න තියන දිගැරෙන සෝෂල් විජෙට්ටුවක් හදන්නෙ කොහොමද කියලා. ඔයාලට එකේ අත්හදාබැලීමක් කරන්න ඕනි නම් අපේ බ්ලොග් එකේ මේ පල්ලෙහා පොටෝ වල පෙන්නලා තියනවා  වගේ එකක් ස්ලයිඩර් එක ගාව පෙන්නනවානේ. ඒක ලගට Mouse Pointer එක අරගෙන ගිහින් බලන්නකෝ ඒක දිගැරෙන හැටි. 




හරි එහෙනම් වැඩි කතා ඕනි නැ. මෙහෙමයි කරන්නෙ. 

ඉස්සෙලාම Blogger Control Panel එකේ Layout කියන tab එකට ගිහින්. බ්ලොග් එකේ ඕනි තැනකට HTML/Javascript Gadget එකක් එකතු කරන්න. Gadgets එකතු කරන හැටි දන්නෙ නැත්නම් මෙතනින් ගිහින් ඉගෙන ගන්නකෝ. 


දැන් මේ පල්ලෙහා තියන Codes ටික ඒ HTML Box එකට copy කරන්න.  

 <style>  img, a {    border: 0;  }  #on {    visibility: visible;  }  #off {    visibility: hidden;  }  #facebook_div {    width: 235px;    height: 236px;    overflow: hidden;  }  #twitter_div {    width: 246px;    height: 240px;    overflow: hidden;  }  #google_plus_div {    width: 290px;    height: 250px;    overflow: hidden;    margin-left: 5px;    margin-top: 1px;  }  #tb911feedburner_div {    width: 300px;    height: 120px;    overflow: hidden;    margin-top: 5px;    margin-left: -4px;  }  #tb911_div {    width: 300px;    height: 97px;    overflow: hidden;  }  /* right side style */   #facebook_right {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    right: -239px;  }  #facebook_right img {    position: absolute;    top: -2px;    left: -35px;  }  #facebook_right iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    left: -2px;    top: -3px;  }  #twitter_right {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 250px;    height: 240px;    position: fixed;    right: -254px;  }  #twitter_right_img {    position: absolute;    top: -2px;    left: -35px;    border: 0;  }  #google_plus_right {    z-index: 10003;    background-color: #F2F2F2;    border: 2px solid #006ec9;    border-top: 2px solid #0056a0;    border-bottom: 2px solid #0056a0;    border-right: 2px solid #0056a0;    border-left: 2px solid #0056a0;    width: 290px;    height: 250px;    position: fixed;    right: -294px;  }  #google_plus_right_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  }  #feedburner_right {    z-index: 10003;    background-color: #fefefe;    border: 2px solid #5b5b5b;    border-top: 2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-right: 2px solid #5b5b5b;    border-left: hidden;    width: 300px;    height: 97px;    position: fixed;    right: -304px;  }  #feedburner_right_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  }  #tb911_right {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #tb911_right img {    position: absolute;    top: -2px;    left: -101px;  }  /* left side style */   #facebook_left {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    left: -239px;  }  #facebook_left img {    position: absolute;    top: -2px;    right: -35px;  }  #facebook_left iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    right: -2px;    top: -3px;  }  #twitter_left {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 246px;    height: 240px;    position: fixed;    left: -254px;  }  #twitter_left_img {    position: absolute;    top: -2px;    right: -35px;    border: 0;  }  #google_plus_left {    z-index: 10003;    background-color: #006ec9;    border: 2px solid #006ec9;    border-top: 2px solid #0056a0;    border-bottom: 2px solid #0056a0;    border-left: 2px solid #0056a0;    border-right: 2px solid #0056a0;    width: 290px;    height: 120px;    position: fixed;    left: -294px;  }  #google_plus_left_img {    position: absolute;    top: -2px;    right: -33px;    border: 0;  }  #feedburner_left {    z-index: 10003;    background-color: #fefefe;    border: 2px solid #5b5b5b;    border-top: 2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-left: 2px solid #5b5b5b;    border-right: hidden;    width: 300px;    height: 97px;    position: fixed;    left: -304px;  }  #feedburner_left_img {    position: absolute;    top: -2px;    right: -33px;    border: 0;  }  #tb911_left {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #tb911_left img {    position: absolute;    top: -2px;    right: -101px;  }  .box-title1 {    border: 1px solid #ddd;    /*border-radius*/    -webkit-border-radius: 6px;    -moz-border-radius: 6px;    border-radius: 6px;    /*box-shadow*/    -webkit-box-shadow: 5px 5px 5px #CCCCCC;    -moz-box-shadow: 5px 5px 5px #CCCCCC;    box-shadow: 5px 5px 5px #CCCCCC;    padding: 10px;    margin: 10px 0;  }  .enteryouremail {    background: #fff !important;    border: 1px solid #d2d2d2;    padding: 0px 8px 0px 8px;    color: #a19999;    font-size: 12px;    height: 25px;    width: 165px;    /*border-radius*/    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;    margin: 0px;  }  .submitbutton {    background: #FF8000;    border: 1px solid #F66303;    /*box-shadow*/    -webkit-box-shadow: 3px 3px 3px #666;    box-shadow: 3px 3px 3px #666;    font: bold 12px Arial, sans-serif;    color: #000000;    height: 25px;    padding: 0 12px 0 12px;    margin: 0 0 0 5px;    /*border-radius*/    -webkit-border-radius: 5px;    border-radius: 5px;    cursor: pointer;  }  #youtube_right {    z-index: 10001;    background-color: #fefefe;    border:2px solid #ff0000;    border-top:2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-right:2px solid #5b5b5b;    border-left: hidden;    width:301px;    height: 106px;    position: fixed;    right: -304px;  }  #youtube_right_img {    position: absolute;    top: -2px;    left: -33px;    border:  </style> <a rel="dofollow" title="blogger widgets" href="http://theblogger911.blogspot.com" target="_blank"><img border="0" src="http://bitly.com/24workpng1" style="margin-right:0px;" alt="widgets"/></a>
 <script src="http://code.jquery.com/jquery-latest.js"></script>  <script src="http://apis.google.com/js/plusone.js"  type="text/javascript"></script>  <script type="text/javascript">  jQuery(document).ready(function ()  {    jQuery("#facebook_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#facebook_right").stop(          true,          false).animate(          {            right: -239          },          500);      });    jQuery("#twitter_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#twitter_right").stop(          true,          false).animate(          {            right: -254          },          500);      });    jQuery("#google_plus_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#google_plus_right").stop(          true,          false).animate(          {            right: -294          },          500);      });    jQuery("#feedburner_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#feedburner_right").stop(          true,          false).animate(          {            right: -304          },          500);      });    jQuery("#youtube_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#youtube_right").stop(          true,          false).animate(          {            right: -304          },          500);      });  });  </script>  </span>  </b>  <br />  <div id="on">    <div id="facebook_right" style="top: 8%;">      <div id="facebook_div">        <img alt="" src="http://3.bp.blogspot.com/-wQUpmiGwynE/UNHJaesfqeI/AAAAAAAAItg/JQlnTuoFRnQ/s1600/NBTfacebook_right.png"        />        <iframe allowtransparency="true" frameborder="0"        scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FFacebook Username&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false"        style="border: none; height: 250px; overflow: hidden; width: 250px;"></iframe>      </div>    </div>  </div>  <div id="on">    <div id="twitter_right" style="top: 24%;">      <div id="twitter_div">        <img id="twitter_right_img" src="http://3.bp.blogspot.com/-UrPbwWyd88E/UNHJhIlDSRI/AAAAAAAAIt4/fmis0qzbcfI/s1600/NBTtwitter_right.png"        />        <div style="width:248px;font-size:8px;text-align:right;">          <script type="text/javascript">          document.write(unescape(            "%3Cscript                                                  src='http://twitterforweb.com/twitterbox.js?username=Twitter Username&settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699'                                                  type='text/javascript'%3E%3C/script%3E"          ));          </script>          <a href="http://theblogger911.blogspot.com"          target="_blank"></a>        </div>      </div>    </div>  </div>  <div id="on">    <div id="google_plus_right" style="top: 41%;">      <div id="google_plus_div">        <img id="google_plus_right_img" src="http://2.bp.blogspot.com/-e2uAzeEjWU4/UTHxwZv6O_I/AAAAAAAAACo/IIkUjVUrtus/s1600/NBTgoogle_plus_right.png"        />        <div style="float: left; margin: 10px 10px 10px 0;">          <a href='http://theblogger911.blogspot.com.com'>            <img alt='Tips Tricks And Tutorials'            src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'            />          </a>          <div class="g-plus" data-action="followers"          data-height="250" data-href="https://plus.google.com/
Google+ User ID"          data-source="blogger:blog:followers"          data-width="270"></div>          <script type="text/javascript">          (function ()          {            window.___gcfg = {              'lang': 'en'            };            var            po =              document.createElement(                'script');            po.type =              'text/javascript';            po.async =              true;            po.src =              'https://apis.google.com/js/plusone.js';            var            s =              document.getElementsByTagName(                'script')[0];            s.parentNode.insertBefore(              po,              s);          })();          </script>        </div>      </div>    </div>    <div id="on">      <div id="feedburner_right" style="top: 75%;">        <div id="tb911feedburner_div">          <center>            <h4 style="color: #f66303;">You can also receive Free Email Updates:</h4>            <form action="http://feedburner.google.com/fb/a/mailverify"            method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Feedburner User ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"            target="popupwindow">              <input class="enteryouremail" gtbfieldid="10"              name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}"              onfocus="if (this.value == 'Enter your email here...') {this.value = '';}"              type="text" value="Enter your email here..."              />              <input name="uri" type="hidden"              value="Freewarehutblogspotcom-" />              <input class="submitbutton" type="submit"              value="Submit" />            </form>          </center>          <img id="feedburner_right_img" src="http://1.bp.blogspot.com/-k_w8nyZNI0I/UNHJcHym1SI/AAAAAAAAIto/UuFo46fEKaA/s1600/NBTfeedburner_right.png"          />          <div style="float: right; padding: 20px; margin: 0px;">    <span style="font-size:10px;">Widget by <a href="http://theblogger911.blogspot.com/">theblogger911</a>                  </span>            <span style="font-size:8px;"></span>          </div>        </div>      </div>      <div id="on">        <div id="youtube_right" style="top:58%;">          <div id="youtube_div">            <img id="youtube_right_img" src="http://2.bp.blogspot.com/-jRtgtewf7DA/UR_Gu5gijpI/AAAAAAAALX8/G_nLKDQxb-w/s1600/NBTyoutube_right.png "            />            <div style="float:left;margin:1px 0px 0px 2px;">              <iframe src=http://www.youtube.com/subscribe_widget?p=Youtube ID              style="height:105px;width:300px;border:0;"              scrolling="no" frameBorder="0"></iframe>            </div>          </div>        </div>      </div>  <style>  img, a {    border: 0;  }  #on {    visibility: visible;  }  #off {    visibility: hidden;  }  #facebook_div {    width: 235px;    height: 236px;    overflow: hidden;  }  #twitter_div {    width: 246px;    height: 240px;    overflow: hidden;  }  #google_plus_div {    width: 290px;    height: 250px;    overflow: hidden;    margin-left: 5px;    margin-top: 1px;  }  #tb911feedburner_div {    width: 300px;    height: 120px;    overflow: hidden;    margin-top: 5px;    margin-left: -4px;  }  #tb911_div {    width: 300px;    height: 97px;    overflow: hidden;  }  /* right side style */   #facebook_right {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    right: -239px;  }  #facebook_right img {    position: absolute;    top: -2px;    left: -35px;  }  #facebook_right iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    left: -2px;    top: -3px;  }  #twitter_right {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 250px;    height: 240px;    position: fixed;    right: -254px;  }  #twitter_right_img {    position: absolute;    top: -2px;    left: -35px;    border: 0;  }  #google_plus_right {    z-index: 10003;    background-color: #F2F2F2;    border: 2px solid #006ec9;    border-top: 2px solid #0056a0;    border-bottom: 2px solid #0056a0;    border-right: 2px solid #0056a0;    border-left: 2px solid #0056a0;    width: 290px;    height: 250px;    position: fixed;    right: -294px;  }  #google_plus_right_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  }  #feedburner_right {    z-index: 10003;    background-color: #fefefe;    border: 2px solid #5b5b5b;    border-top: 2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-right: 2px solid #5b5b5b;    border-left: hidden;    width: 300px;    height: 97px;    position: fixed;    right: -304px;  }  #feedburner_right_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  }  #tb911_right {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #tb911_right img {    position: absolute;    top: -2px;    left: -101px;  }  /* left side style */   #facebook_left {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    left: -239px;  }  #facebook_left img {    position: absolute;    top: -2px;    right: -35px;  }  #facebook_left iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    right: -2px;    top: -3px;  }  #twitter_left {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 246px;    height: 240px;    position: fixed;    left: -254px;  }  #twitter_left_img {    position: absolute;    top: -2px;    right: -35px;    border: 0;  }  #google_plus_left {    z-index: 10003;    background-color: #006ec9;    border: 2px solid #006ec9;    border-top: 2px solid #0056a0;    border-bottom: 2px solid #0056a0;    border-left: 2px solid #0056a0;    border-right: 2px solid #0056a0;    width: 290px;    height: 120px;    position: fixed;    left: -294px;  }  #google_plus_left_img {    position: absolute;    top: -2px;    right: -33px;    border: 0;  }  #feedburner_left {    z-index: 10003;    background-color: #fefefe;    border: 2px solid #5b5b5b;    border-top: 2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-left: 2px solid #5b5b5b;    border-right: hidden;    width: 300px;    height: 97px;    position: fixed;    left: -304px;  }  #feedburner_left_img {    position: absolute;    top: -2px;    right: -33px;    border: 0;  }  #tb911_left {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #tb911_left img {    position: absolute;    top: -2px;    right: -101px;  }  .box-title1 {    border: 1px solid #ddd;    /*border-radius*/    -webkit-border-radius: 6px;    -moz-border-radius: 6px;    border-radius: 6px;    /*box-shadow*/    -webkit-box-shadow: 5px 5px 5px #CCCCCC;    -moz-box-shadow: 5px 5px 5px #CCCCCC;    box-shadow: 5px 5px 5px #CCCCCC;    padding: 10px;    margin: 10px 0;  }  .enteryouremail {    background: #fff !important;    border: 1px solid #d2d2d2;    padding: 0px 8px 0px 8px;    color: #a19999;    font-size: 12px;    height: 25px;    width: 165px;    /*border-radius*/    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;    margin: 0px;  }  .submitbutton {    background: #FF8000;    border: 1px solid #F66303;    /*box-shadow*/    -webkit-box-shadow: 3px 3px 3px #666;    box-shadow: 3px 3px 3px #666;    font: bold 12px Arial, sans-serif;    color: #000000;    height: 25px;    padding: 0 12px 0 12px;    margin: 0 0 0 5px;    /*border-radius*/    -webkit-border-radius: 5px;    border-radius: 5px;    cursor: pointer;  }  #youtube_right {    z-index: 10001;    background-color: #fefefe;    border:2px solid #ff0000;    border-top:2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-right:2px solid #5b5b5b;    border-left: hidden;    width:301px;    height: 106px;    position: fixed;    right: -304px;  }  #youtube_right_img {    position: absolute;    top: -2px;    left: -33px;    border:  </style> <a rel="dofollow" title="blogger widgets" href="http://theblogger911.blogspot.com" target="_blank"><img border="0" src="http://bitly.com/24workpng1" style="margin-right:0px;" alt="widgets"/></a>
 <script src="http://code.jquery.com/jquery-latest.js"></script>  <script src="http://apis.google.com/js/plusone.js"  type="text/javascript"></script>  <script type="text/javascript">  jQuery(document).ready(function ()  {    jQuery("#facebook_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#facebook_right").stop(          true,          false).animate(          {            right: -239          },          500);      });    jQuery("#twitter_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#twitter_right").stop(          true,          false).animate(          {            right: -254          },          500);      });    jQuery("#google_plus_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#google_plus_right").stop(          true,          false).animate(          {            right: -294          },          500);      });    jQuery("#feedburner_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#feedburner_right").stop(          true,          false).animate(          {            right: -304          },          500);      });    jQuery("#youtube_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#youtube_right").stop(          true,          false).animate(          {            right: -304          },          500);      });  });  </script>  </span>  </b>  <br />  <div id="on">    <div id="facebook_right" style="top: 8%;">      <div id="facebook_div">        <img alt="" src="http://3.bp.blogspot.com/-wQUpmiGwynE/UNHJaesfqeI/AAAAAAAAItg/JQlnTuoFRnQ/s1600/NBTfacebook_right.png"        />        <iframe allowtransparency="true" frameborder="0"        scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FFreewarehut.tk&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false"        style="border: none; height: 250px; overflow: hidden; width: 250px;"></iframe>      </div>    </div>  </div>  <div id="on">    <div id="twitter_right" style="top: 24%;">      <div id="twitter_div">        <img id="twitter_right_img" src="http://3.bp.blogspot.com/-UrPbwWyd88E/UNHJhIlDSRI/AAAAAAAAIt4/fmis0qzbcfI/s1600/NBTtwitter_right.png"        />        <div style="width:248px;font-size:8px;text-align:right;">          <script type="text/javascript">          document.write(unescape(            "%3Cscript                                                  src='http://twitterforweb.com/twitterbox.js?username=sandun_isuru&settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699'                                                  type='text/javascript'%3E%3C/script%3E"          ));          </script>          <a href="http://theblogger911.blogspot.com"          target="_blank"></a>        </div>      </div>    </div>  </div>  <div id="on">    <div id="google_plus_right" style="top: 41%;">      <div id="google_plus_div">        <img id="google_plus_right_img" src="http://2.bp.blogspot.com/-e2uAzeEjWU4/UTHxwZv6O_I/AAAAAAAAACo/IIkUjVUrtus/s1600/NBTgoogle_plus_right.png"        />        <div style="float: left; margin: 10px 10px 10px 0;">          <a href='http://theblogger911.blogspot.com.com'>            <img alt='Tips Tricks And Tutorials'            src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'            />          </a>          <div class="g-plus" data-action="followers"          data-height="250" data-href="https://plus.google.com/102884118533923160961"          data-source="blogger:blog:followers"          data-width="270"></div>          <script type="text/javascript">          (function ()          {            window.___gcfg = {              'lang': 'en'            };            var            po =              document.createElement(                'script');            po.type =              'text/javascript';            po.async =              true;            po.src =              'https://apis.google.com/js/plusone.js';            var            s =              document.getElementsByTagName(                'script')[0];            s.parentNode.insertBefore(              po,              s);          })();          </script>        </div>      </div>    </div>    <div id="on">      <div id="feedburner_right" style="top: 75%;">        <div id="tb911feedburner_div">          <center>            <h4 style="color: #f66303;">You can also receive Free Email Updates:</h4>            <form action="http://feedburner.google.com/fb/a/mailverify"            method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Freewarehutblogspotcom-', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"            target="popupwindow">              <input class="enteryouremail" gtbfieldid="10"              name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}"              onfocus="if (this.value == 'Enter your email here...') {this.value = '';}"              type="text" value="Enter your email here..."              />              <input name="uri" type="hidden"              value="Freewarehutblogspotcom-" />              <input class="submitbutton" type="submit"              value="Submit" />            </form>          </center>          <img id="feedburner_right_img" src="http://1.bp.blogspot.com/-k_w8nyZNI0I/UNHJcHym1SI/AAAAAAAAIto/UuFo46fEKaA/s1600/NBTfeedburner_right.png"          />          <div style="float: right; padding: 20px; margin: 0px;">    <span style="font-size:10px;">Widget by <a href="http://theblogger911.blogspot.com/">theblogger911</a>                  </span>            <span style="font-size:8px;"></span>          </div>        </div>      </div>      <div id="on">        <div id="youtube_right" style="top:58%;">          <div id="youtube_div">            <img id="youtube_right_img" src="http://2.bp.blogspot.com/-jRtgtewf7DA/UR_Gu5gijpI/AAAAAAAALX8/G_nLKDQxb-w/s1600/NBTyoutube_right.png "            />            <div style="float:left;margin:1px 0px 0px 2px;">              <iframe src=http://www.youtube.com/subscribe_widget?p=FreewareHut              style="height:105px;width:300px;border:0;"              scrolling="no" frameBorder="0"></iframe>            </div>          </div>        </div>      </div>  <style>  img, a {    border: 0;  }  #on {    visibility: visible;  }  #off {    visibility: hidden;  }  #facebook_div {    width: 235px;    height: 236px;    overflow: hidden;  }  #twitter_div {    width: 246px;    height: 240px;    overflow: hidden;  }  #google_plus_div {    width: 290px;    height: 250px;    overflow: hidden;    margin-left: 5px;    margin-top: 1px;  }  #tb911feedburner_div {    width: 300px;    height: 120px;    overflow: hidden;    margin-top: 5px;    margin-left: -4px;  }  #tb911_div {    width: 300px;    height: 97px;    overflow: hidden;  }  /* right side style */   #facebook_right {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    right: -239px;  }  #facebook_right img {    position: absolute;    top: -2px;    left: -35px;  }  #facebook_right iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    left: -2px;    top: -3px;  }  #twitter_right {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 250px;    height: 240px;    position: fixed;    right: -254px;  }  #twitter_right_img {    position: absolute;    top: -2px;    left: -35px;    border: 0;  }  #google_plus_right {    z-index: 10003;    background-color: #F2F2F2;    border: 2px solid #006ec9;    border-top: 2px solid #0056a0;    border-bottom: 2px solid #0056a0;    border-right: 2px solid #0056a0;    border-left: 2px solid #0056a0;    width: 290px;    height: 250px;    position: fixed;    right: -294px;  }  #google_plus_right_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  }  #feedburner_right {    z-index: 10003;    background-color: #fefefe;    border: 2px solid #5b5b5b;    border-top: 2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-right: 2px solid #5b5b5b;    border-left: hidden;    width: 300px;    height: 97px;    position: fixed;    right: -304px;  }  #feedburner_right_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  }  #tb911_right {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #tb911_right img {    position: absolute;    top: -2px;    left: -101px;  }  /* left side style */   #facebook_left {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    left: -239px;  }  #facebook_left img {    position: absolute;    top: -2px;    right: -35px;  }  #facebook_left iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    right: -2px;    top: -3px;  }  #twitter_left {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 246px;    height: 240px;    position: fixed;    left: -254px;  }  #twitter_left_img {    position: absolute;    top: -2px;    right: -35px;    border: 0;  }  #google_plus_left {    z-index: 10003;    background-color: #006ec9;    border: 2px solid #006ec9;    border-top: 2px solid #0056a0;    border-bottom: 2px solid #0056a0;    border-left: 2px solid #0056a0;    border-right: 2px solid #0056a0;    width: 290px;    height: 120px;    position: fixed;    left: -294px;  }  #google_plus_left_img {    position: absolute;    top: -2px;    right: -33px;    border: 0;  }  #feedburner_left {    z-index: 10003;    background-color: #fefefe;    border: 2px solid #5b5b5b;    border-top: 2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-left: 2px solid #5b5b5b;    border-right: hidden;    width: 300px;    height: 97px;    position: fixed;    left: -304px;  }  #feedburner_left_img {    position: absolute;    top: -2px;    right: -33px;    border: 0;  }  #tb911_left {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #tb911_left img {    position: absolute;    top: -2px;    right: -101px;  }  .box-title1 {    border: 1px solid #ddd;    /*border-radius*/    -webkit-border-radius: 6px;    -moz-border-radius: 6px;    border-radius: 6px;    /*box-shadow*/    -webkit-box-shadow: 5px 5px 5px #CCCCCC;    -moz-box-shadow: 5px 5px 5px #CCCCCC;    box-shadow: 5px 5px 5px #CCCCCC;    padding: 10px;    margin: 10px 0;  }  .enteryouremail {    background: #fff !important;    border: 1px solid #d2d2d2;    padding: 0px 8px 0px 8px;    color: #a19999;    font-size: 12px;    height: 25px;    width: 165px;    /*border-radius*/    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;    margin: 0px;  }  .submitbutton {    background: #FF8000;    border: 1px solid #F66303;    /*box-shadow*/    -webkit-box-shadow: 3px 3px 3px #666;    box-shadow: 3px 3px 3px #666;    font: bold 12px Arial, sans-serif;    color: #000000;    height: 25px;    padding: 0 12px 0 12px;    margin: 0 0 0 5px;    /*border-radius*/    -webkit-border-radius: 5px;    border-radius: 5px;    cursor: pointer;  }  #youtube_right {    z-index: 10001;    background-color: #fefefe;    border:2px solid #ff0000;    border-top:2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-right:2px solid #5b5b5b;    border-left: hidden;    width:301px;    height: 106px;    position: fixed;    right: -304px;  }  #youtube_right_img {    position: absolute;    top: -2px;    left: -33px;    border:  </style> <a rel="dofollow" title="blogger widgets" href="http://theblogger911.blogspot.com" target="_blank"><img border="0" src="http://bitly.com/24workpng1" style="margin-right:0px;" alt="widgets"/></a>
 <script src="http://code.jquery.com/jquery-latest.js"></script>  <script src="http://apis.google.com/js/plusone.js"  type="text/javascript"></script>  <script type="text/javascript">  jQuery(document).ready(function ()  {    jQuery("#facebook_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#facebook_right").stop(          true,          false).animate(          {            right: -239          },          500);      });    jQuery("#twitter_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#twitter_right").stop(          true,          false).animate(          {            right: -254          },          500);      });    jQuery("#google_plus_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#google_plus_right").stop(          true,          false).animate(          {            right: -294          },          500);      });    jQuery("#feedburner_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#feedburner_right").stop(          true,          false).animate(          {            right: -304          },          500);      });    jQuery("#youtube_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#youtube_right").stop(          true,          false).animate(          {            right: -304          },          500);      });  });  </script>  </span>  </b>  <br />  <div id="on">    <div id="facebook_right" style="top: 8%;">      <div id="facebook_div">        <img alt="" src="http://3.bp.blogspot.com/-wQUpmiGwynE/UNHJaesfqeI/AAAAAAAAItg/JQlnTuoFRnQ/s1600/NBTfacebook_right.png"        />        <iframe allowtransparency="true" frameborder="0"        scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FFreewarehut.tk&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false"        style="border: none; height: 250px; overflow: hidden; width: 250px;"></iframe>      </div>    </div>  </div>  <div id="on">    <div id="twitter_right" style="top: 24%;">      <div id="twitter_div">        <img id="twitter_right_img" src="http://3.bp.blogspot.com/-UrPbwWyd88E/UNHJhIlDSRI/AAAAAAAAIt4/fmis0qzbcfI/s1600/NBTtwitter_right.png"        />        <div style="width:248px;font-size:8px;text-align:right;">          <script type="text/javascript">          document.write(unescape(            "%3Cscript                                                  src='http://twitterforweb.com/twitterbox.js?username=sandun_isuru&settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699'                                                  type='text/javascript'%3E%3C/script%3E"          ));          </script>          <a href="http://theblogger911.blogspot.com"          target="_blank"></a>        </div>      </div>    </div>  </div>  <div id="on">    <div id="google_plus_right" style="top: 41%;">      <div id="google_plus_div">        <img id="google_plus_right_img" src="http://2.bp.blogspot.com/-e2uAzeEjWU4/UTHxwZv6O_I/AAAAAAAAACo/IIkUjVUrtus/s1600/NBTgoogle_plus_right.png"        />        <div style="float: left; margin: 10px 10px 10px 0;">          <a href='http://theblogger911.blogspot.com.com'>            <img alt='Tips Tricks And Tutorials'            src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'            />          </a>          <div class="g-plus" data-action="followers"          data-height="250" data-href="https://plus.google.com/102884118533923160961"          data-source="blogger:blog:followers"          data-width="270"></div>          <script type="text/javascript">          (function ()          {            window.___gcfg = {              'lang': 'en'            };            var            po =              document.createElement(                'script');            po.type =              'text/javascript';            po.async =              true;            po.src =              'https://apis.google.com/js/plusone.js';            var            s =              document.getElementsByTagName(                'script')[0];            s.parentNode.insertBefore(              po,              s);          })();          </script>        </div>      </div>    </div>    <div id="on">      <div id="feedburner_right" style="top: 75%;">        <div id="tb911feedburner_div">          <center>            <h4 style="color: #f66303;">You can also receive Free Email Updates:</h4>            <form action="http://feedburner.google.com/fb/a/mailverify"            method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Freewarehutblogspotcom-', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"            target="popupwindow">              <input class="enteryouremail" gtbfieldid="10"              name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}"              onfocus="if (this.value == 'Enter your email here...') {this.value = '';}"              type="text" value="Enter your email here..."              />              <input name="uri" type="hidden"              value="Freewarehutblogspotcom-" />              <input class="submitbutton" type="submit"              value="Submit" />            </form>          </center>          <img id="feedburner_right_img" src="http://1.bp.blogspot.com/-k_w8nyZNI0I/UNHJcHym1SI/AAAAAAAAIto/UuFo46fEKaA/s1600/NBTfeedburner_right.png"          />          <div style="float: right; padding: 20px; margin: 0px;">    <span style="font-size:10px;">Widget by <a href="http://theblogger911.blogspot.com/">theblogger911</a>                  </span>            <span style="font-size:8px;"></span>          </div>        </div>      </div>      <div id="on">        <div id="youtube_right" style="top:58%;">          <div id="youtube_div">            <img id="youtube_right_img" src="http://2.bp.blogspot.com/-jRtgtewf7DA/UR_Gu5gijpI/AAAAAAAALX8/G_nLKDQxb-w/s1600/NBTyoutube_right.png "            />            <div style="float:left;margin:1px 0px 0px 2px;">              <iframe src=http://www.youtube.com/subscribe_widget?p=FreewareHut              style="height:105px;width:300px;border:0;"              scrolling="no" frameBorder="0"></iframe>            </div>          </div>        </div>      </div> 

 දැන් මේවා වල පොඩි වෙනස්කම් ටිකක් කරන්න තියනවා..

  • ඉස්සෙලාම රතු පාටින් Facebook Username කියලා තියන තැනට ඔයාලගේ Facebook Page එකේ Username එක දෙන්න..
  • ඊටපස්සෙ නිල් පාටින් Twitter Username කියලා තියන තැනට ඔයාගේ Twitter ගිණුමේ Username එක දෙන්න.
  • දැන් Google+ User ID කියලා කොල පාටින් තියන තැනට ඔයාගේ Google+ ගිණුමේ User ID එක දෙන්න.
  • දැන් Feedburner User ID කියන එකට ඔයාගේ FeedBurner RSS Account එකේ ID එක දෙන්න.
  • අන්තිමට Youtube ID කියන තැනට ඔයාගේ Youtube Channel එකේ ID එක දෙන්න.
සාමාන්‍යයෙන් ඒ Google+ User ID එක කියන්නෙ ඉලක්කම් ටිකක් පල්ලෙහා තියන Google+ Account එකේ URL එක ගත්තොත් අන්තිමට තියන ඉලක්කම් පේලිය තමයි User ID එක කියන්නෙ.  


උදා: https://plus.google.com/102884118533923160961 කියන Google+ Account URL එකේ 102884118533923160961 කියන එක තමයි Google+ User ID එක.
දැන් වැඩේ කරලා ඉවරයි. දැන් ඒ Gadget Window එකේ පල්ලෙහායින්ම තියන Save Click කරලා Gadget එක Save කරන්න. දැන් ඔයා බ්ලොග් එකේ Preview එකක් බැලුවොත් ඔයාට මේ අපේ බ්ලොග් එකේ තියනවා වගේ සෝෂල් විජෙට්ටුවක් බලාගන්න පුලුවන්. 

මේ Widget එක සාමාන්‍ය වෙබ් අඩවියකට යොදනවානම් මේ Code එක අනිවාර්‍යයෙන්ම <body> හා </body> tag දෙක අතර කැමති තැනකට යොදන්න ඕනි.

එහෙනම් අද බ්ලොගර් පාඩම ඉවරයි. මම තවත් දවසක මේ වගේම බ්ලොගර් පාඩමක් අරගෙන එන්නම්. ඔයාලට මේ පාඩමේදි මොකක් හරි ගැටලුවක් ඇති වුනානම් මට Comment එකෙක් දාලා හරි, ඇඩ්මින්ට කියන්න Page එකට ගිහින් එතනට හරි කියන්න. මම අනිවා උදවු කරනවා. එහෙනම් මම යන්නම්...
ඔබට ජය...!

Author: DJ Niraj

Hello My Name is Sandun Isuru Niraj, And I'm from beautifull island Sri Lanka which is called the pearl of the Indian Ocean. I Love the blogging and web designing. Not only that I love programming much.....

0 කියන කතා:

Facebook Blogger Plugin by FreewareHut.blogspot.com

ඔබගේ අදහසත් එකතු කරන්න. මට ඒක ගොඩාක් වටිනවා..


Connect with Google+

All Rights Reserved

Protected by Copyscape Web Plagiarism Software

Safety First....

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles

TOP