]]></b:skin>
.social-buttons {
position: fixed;
top: 130px;
width: 45px;
z-index: 9999;}
.button-left {
left: 0;}
.button-right {
right: 0;}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
background-color: #33353B;}
.button-left #facebook-btn span {
background-position: right 10px;}
.button-left #twitter-btn span {
background-position: right -35px;}
.button-left #google-btn span {
background-position: right -127px;}
.button-left #rss-btn span {
background-position: right -80px;}
.button-left #pinterest-btn span {
background-position: 11px -177px;}
.button-left #youtube-btn span {
background-position: 11px -223px;}
.button-right #facebook-btn span {
background-position: 12px 10px;}
.button-right #twitter-btn span {
background-position: 11px -35px;}
.button-right #google-btn span {
background-position: 10px -127px;}
.button-right #rss-btn span {
background-position: 11px -80px;}
.button-right #pinterest-btn span {
background-position: 11px -177px;}
.button-right #youtube-btn span {
background-position: 11px -223px;}
.social-buttons #facebook-btn:hover .social-icon {
background-color: #3B5998;}
.social-buttons #twitter-btn:hover .social-icon {
background-color: #62BDB2;}
.social-buttons #google-btn:hover .social-icon {
background-color: #DB4A39;}
.social-buttons #rss-btn:hover .social-icon {
background-color: #FF8B0F;}
.social-buttons #pinterest-btn:hover .social-icon {
background-color: #D43638;}
.social-buttons #youtube-btn:hover .social-icon {
background-color: #C4302B;}
.social-buttons a:hover .social-text {
display: block;}
.button-left .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: left;
height: 43px;
margin-bottom: 2px;
width: 43px;}
.button-left .social-text {
display: none;
float: right;
font-size: 1em;
font-weight: bold;
margin: 11px 40px 11px 0px;
white-space: nowrap;}
.button-right .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: right;
height: 43px;
margin-bottom: 2px;
width: 43px;}
.button-right .social-text {
display: none;
float: left;
font-size: 80%;
font-weight: bold;
margin: 11px 0 11px 40px;
white-space: nowrap;}
.social-buttons .social-text {
color: #FFFFFF;}
</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
$(window).load(function(){
$('.social-buttons .social-icon').mouseenter(function(){
$(this).stop();
$(this).animate({width:'160'}, 500, 'easeOutBounce',function(){});
});
$('.social-buttons .social-icon').mouseleave(function(){
$(this).stop();
$(this).animate({width:'43'}, 500, 'easeOutBounce',function(){});
});
});
</script>
<div class='social-buttons button-right hidden-phone hidden-tablet'> <a class='itemsocial' href='https://www.facebook.com/monta.ibda3' id='facebook-btn' target='_blank><span class='social-icon'><span class='social-text'> تابعنا على الفايسبوك </span></span></a> <a class='itemsocial' href='https://twitter.com/ProgrammesPC' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'> تابعنا على تويتر </span></span></a> <a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'> تابعنا على جوجل + </span></span></a> <a class='itemsocial' href='https://www.youtube.com/user/ProgrammesPC' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'> تابعنا على يوتيوب </span></span></a> <a class='itemsocial' href='http://feeds.feedburner.com/blogspot/rRhHj' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'> تابعنا بالبريد RSS </span></span></a> </div> <center> <span style="color: orange; font-size: x-small;"> <a href='http://bit.ly/1bFPFv5' title='Get Widgets to my Blog' alt='Widgets Blogger'>Widgets Blogger</a> </span> </center> </div>
موضوع اليوم :
الحصول 4 نوافذ منبثقة صندوق معجبين الفيس بوك مع صندوق محادثة تويتر
وزر جوجل + والإشتراك القائمة البريدية لمدونات بلوجر
إضافة رائعة لمدونتك خصوصاً إذا كان لا يوجد مكان بمدونتك لإضافات
المواقع الإجتماعية الهامة التى تزيد عدد الزوار للموقع
يمكنك إخفاؤهم وإظهارهم بمرور الماوس عليهم بتقنية
jQuery slide out hover effect
وقد تطرقت من قبل لطريقة وضع صندوق الإعجاب الثابت للفيس بوك
وزر الإعجاب تتكون الإضافة من 4 نوافذ منبثقة للمواقع الإجتماعية
4×1 وهي صندوق الفيس بوك العائم Popup facebook like box
آخر التويتات على موقع تويتر recent tweets
زر جوجل بلس +1 Google +1 button
الإشتراك بالقائمة البريدية لمتابعة خلاصات الموقع
feedburner email subscription
خطوات تركيب السكريبت بمدونات بلوجر:
1- الذهاب إلى لوحة التحكم
2- تخطيط
3- إضافة أداة
4-اختار Html/Javascript
أنسخ الكود التالى وألصقه
<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/AVvXsEiby8W50-6WUEbwxs49BU5VtP5La2q_BXb9x8tcGdqFL1G5sjZxDUJ4TAyinX95vyK3VpiZsW0XPDoxtZw6HXZlvD0AWrzWryUpm4kUIjCAQrGU5FjDwu4iV2roS_xTogNVjGsBDT2F1_0/s1600/DrRo2.com-facebook-icon.png" alt=""/>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmontada.ibda3&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&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/AVvXsEhsJYCN6-sWBcjdWhgYr0QY-0H_uYJbZu3pwAfYhTRRyMOOXaFL-iDxtCJan98-9Ierh0GIzgsn748hqxfeflbTm4coyT9LeKh2VCWMfgYQ7c_skXOg-up70BKhBD_9R_XxlORm4bjhlxk/s1600/DrRo2.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('ProgrammesPC').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/AVvXsEgXOn70IAYXPFhWm6ARsXvDk8-S7JLpQmyUTeXRWvtgJkjCm3y4jn9eG1zPVx3O6UOayqx4fC68i9a7ie1xGO0HX5DTNbAYYbb6IHr8fZUh26St8dxAnrHLrSRpujKBhz_P-PUfhxPXtuk/s1600/DrRo2.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;">إشترك في القائمة البريدية RSS</h4>
<br/>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/rRhHj', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="enteryouremail" name="email" value="أكتب بريدك الإلكتروني ..." onblur="if (this.value == '') {this.value = 'أكتب بريدك الإلكتروني ...';}" onfocus="if (this.value == 'أكتب بريدك الإلكتروني ...') {this.value = '';}" type="text"/><input value="blogspot/rRhHj" name="uri" type="hidden"/><input value="الإشتراك" class="submitbutton" type="submit"/>
</form>
</center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkHr0KuO9hPdQCdnx5RUwPujhR7tw1_GebXvmtZ3A9T8JSDChU5zPyHiajOHQXr8Lu1EvsIYj-wvExVK9Ukqw2IBKDggc1jsj7sHi4Ne60ynjODG6X36NCHxhp-n-kGBkpiyO4Ege3KVM/s1600/DrRo2.com-subscribe-icon.png"/>
</div>
</div>
</div>
</div>
<center/>
<a href="http://bit.ly/1bFPFv5"><img alt="Blogger widget" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHQE9EP_lLT77tl7CdDehxIVkssaVTnBKO2OZtoSxkmlFGgVE2qKHWK0GE_iNXYnOP-h3GBTO8fHhAgg37okIuL4nsxuzSAcHIQxbdQmsYV_cXZqw_tsT06ScZAOrUQIaoMMfFqCWJ5HZN/s89/%25D8%25A8%25D8%25A7%25D8%25AF%25D8%25AC%2520%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9%2520%25D9%2584%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1.png" title="Blogger widget" /></a>
<center/></center></center>
<div class="fb-like-box" data-href="http://www.facebook.com/montada.ibda3" data-width="280" data-height="300" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="true"></div>
جميع الحقوق محفوظة واحةالمعرفة ©2013-2014 | ،
