Social Slideout Widget ေလးထည့္နည္း

10:30 AM    No comments



ဒီေကာင္ေလးကေတာ့မိုက္တယ္ေနာ္က်ြန္ေတာ္
လုပ္ထားတာကိုေတြ႕ၾကမွာပါေနာ္

 

ေအာင္ျမင္ပါေစေနာ္

   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5. ေပးထားေသာကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ
   ►6.ကုဒ္ ထဲက အေရာင္ခ်ယ္ေပးထားတာကိုျပင္ေပးလိုက္ပါ
   ►7.Save လိုက္ရင္ရပါျပီ
   ►8.ကြတ္မန္းေလးနဲ႕အားေပးသြားပါေနာ္.... အဆင္ေျပၾကပါေစ
ေအာက္မွာCod ယူပါ အေရာင္ခ်ယ္ေပးထားတဲ့ေနရာမွာ ျပင္ေပး ပါေနာ္ 



<style>
img,a {


    border: 0;
}



#on {



    visibility: visible;
}



#off {



    visibility: hidden;
}



#facebook_div {



    width: 196px;

    height: 340px;

    overflow: hidden;
}



#twitter_div {



    width: 246px;

    height: 353px;

    overflow: hidden;
}



#google_plus_div {



    width: 152px;

    height: 97px;

    overflow: hidden;

    margin-left: 50px;

    margin-top: 10px;
}



#knfeedburner_div {



    width: 300px;

    height: 97px;

    overflow: hidden;

    margin-top: 5px;

    margin-left: -4px;
}



#kakinetwork_div {



    width: 300px;

    height: 97px;

    overflow: hidden;
}/* right side style */#facebook_right {


    z-index: 10005;

    border: 2px solid #3c95d9;

    background-color: #fff;

    width: 196px;

    height: 353px;

    position: fixed;

    right: -200px;
}



#facebook_right img {



    position: absolute;

    top: -2px;

    left: -35px;
}



#facebook_right iframe {



    border: 0px solid #3c95d9;

    overflow: hidden;

    position: static;

    height: 360px;

    left: -2px;

    top: -3px;
}



#twitter_right {



    z-index: 10004;

    border: 2px solid #6CC5FF;

    background-color: #6CC5FF;

    width: 246px;

    height: 353px;

    position: fixed;

    right: -250px;
}



#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: hidden;

    width: 152px;

    height: 97px;

    position: fixed;

    right: -154px;
}



#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: -303px;
}



#feedburner_right_img {



    position: absolute;

    top: -2px;

    left: -33px;

    border: 0;
}



#kakinetwork_right {



    z-index: 10003;

    border: 2px solid #303030;

    background-color: #fff;

    width: 300px;

    height: 97px;

    position: fixed;
}



#kakinetwork_right img {



    position: absolute;

    top: -2px;

    left: -101px;
}/* left side style */#facebook_left {


    z-index: 10005;

    border: 2px solid #3c95d9;

    background-color: #fff;

    width: 196px;

    height: 353px;

    position: fixed;

    left: -200px;
}



#facebook_left img {



    position: absolute;

    top: -2px;

    right: -35px;
}



#facebook_left iframe {



    border: 0px solid #3c95d9;

    overflow: hidden;

    position: static;

    height: 360px;

    right: -2px;

    top: -3px;
}



#twitter_left {



    z-index: 10004;

    border: 2px solid #6CC5FF;

    background-color: #6CC5FF;

    width: 246px;

    height: 353px;

    position: fixed;

    left: -250px;
}



#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: hidden;

    width: 152px;

    height: 97px;

    position: fixed;

    left: -154px;
}



#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: -303px;
}



#feedburner_left_img {



    position: absolute;

    top: -2px;

    right: -33px;

    border: 0;
}



#kakinetwork_left {



    z-index: 10003;

    border: 2px solid #303030;

    background-color: #fff;

    width: 300px;

    height: 97px;

    position: fixed;
}



#kakinetwork_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: #F2F2F2;

    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;
}

</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></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: -200}, 500); 
});    jQuery("#twitter_right").hover(function(){ 
jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ 
jQuery("#twitter_right").stop(true,false).animate({right: -250}, 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: -154}, 
500); });    jQuery("#feedburner_right").hover(function(){ 
jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ 
jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 
500); });    });</script>



<div id="on">



 <div id="facebook_right" style="top: 18%;">

  <div id="facebook_div">

   <img 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYOWoTm_OhqblCdU991YOoZnGssdiFJa6kYPWv0DEjgsY4ovqrBQFc8xYgsC36hA6vLlypa0VgzczM0oI5cW6HOevYzPLWh47JeUDemeuqwgA2SUhDkPepT_yLrQqIxDeH50A_rTf7zsKa/s1600/BloggingeHow.com-facebook-icon.png"
 alt=""/>

   <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FFacebook Fan Page Name&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false"




 scrolling="no" frameborder="0" style="border:none; overflow:hidden; 
width:200px; height:346px;" allowtransparency="true">

   </iframe>

  </div>

 </div>
</div>

<div id="on">


 <div id="twitter_right" style="top: 35%;">

  <div id="twitter_div">

   <img id="twitter_right_img" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHLwETgy2q17kBTZovUK4dk6qxX17TdOQRPaT3sNGY37mrFOJWxJjJ7ItzRIsg1xJc3JVbPfRuDuW_UBwRUbY3liu9xTrbNFCW3QJIdFpEf3akYLJZ_2oZsnWG09NqoIjdrK-zdec1DeYH/s1600/BloggingeHow.com-twitter-icon.png"/>

   <script src="http://widgets.twimg.com/j/2/widget.js"></script>

   <script>new 
TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 
246,height: 265,theme: {shell: {background: '#63BEFD',color: 
'#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: 
'#47a61e'}},features: { loop: false,live: true,scrollbar: 
false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' 
}}).render().setUser('BloggingeHow').start();</script>

  </div>

 </div>
</div>

<div id="on">


 <div id="google_plus_right" style="top: 52%;">

  <div id="google_plus_div">

   <img id="google_plus_right_img" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDZJ-BCbmnTRXsN4yd6bBIw42v-aBROEDadijYdsBN5SSuS-Wxwu1S4QIo1eWD12b-qdMpQWoCSRg3c5K1DoGmuulnYakwMGL57Fk85OvKj6ZkxGQ21C65mlHsOA_8kKTbC7oCLuTFbdrU/s1600/BloggingeHow.com-google-plus-icon.png"/>

   <div style="float:left;margin:10px 10px 10px 0;">

    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>

   </div>

  </div>

 </div>

 <div id="on">

  <div id="feedburner_right" style=" top: 69%;">

   <div id="knfeedburner_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" 
target="popupwindow" 
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feed Burner ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

     <input gtbfieldid="10" 
class="enteryouremail" name="email" value="Enter your email here..." 
onblur="if (this.value == &#39;&#39;) {this.value = 
&#39;Enter your email here...&#39;;}" onfocus="if (this.value ==
 &#39;Enter your email here...&#39;) {this.value = 
&#39;&#39;;}" type="text"/><input value="Your Feed Burner ID" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>

    </form>

    </center><img 
id="feedburner_right_img" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipcBc_8ghDgO04nUZEczZ632MOEL31ckUy0w5S9HLdSdfi0gD1JhfR0jr-S9kl9xnwX3GXrRQhI_sUgkg8OFUdx_3ynb-YBioa5MaCfUMch2WVI9zwCj0nwusELu6WWjjnD3TMja33OHoW/s1600/BloggingeHow.com-subscribe-icon.png"/>

   </div>

  </div>

 </div>
</div>





ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ရဲ့ ဘေလာ့ပိုစ္ကေလးျဖစ္ပါတယ္ဗ်

ျပဳျပင္ရင္းနဲ့ ေရွ့ဆက္ေနမည္ ေန့စဥ္ႏွင့္အမွ် မိမိအၾကိဳက္ကေလးမ်ားကိုသာေရြးခ်ယ္တင္ျပသြားပါမည္ အဆင္မေျပတာေလးမ်ားရွိပါက Chatbox သို႔မဟုတ္ presidentkoko007@gmail.com သို့ အီးေမးလ္ေပးပို့ဆက္သြယ္ႏိုင္ပါေၾကာင္းဗ်.ေရာက္လာသူအားလံုးကိုေက်းဇူးတင္ပါသည္.။

0 comments:

Post a Comment