اضافة نوافذ منبثة وعائمة لمواقع التواصل الاجتماعى
مرحبا بزوار موستا تك
اليوم اقدم لكم اضافة رائعة ويبحث عنها الكثير ولكنها فى اغلب الاحيان فيها مشاكل وخاصة فى تويتر
لكن الكود تم تعديله من قبلى وتشغيله والاضافة تعمل 100% والدليل فى الموقع الذى تتصفحه الان
تتكون الاضافة من صندوق معجبين فيس بوك و تايم لاين تويتر وزر المشاركة فى جوجل بلس
لتركيب الاضافة فى بلوجر اتبع الاتى
- الدخول الى لوحة تحكم بلوجر الخاصة بك
- ثم الى تخطيط
- بعد ذلك أدخل إلى عناصر الصفحة. واضغط على أضف أداة
- قم باختيار اداة HTML / Javascript
- ثم قم بنسخ الكود التالى ولصقه فى المكان المخصص فى ادارة 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: scroll;
}
#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/AVvXsEhW0jR98Sfv3Lrs9CT2zz-HxMdUkgTMw544U2NFtN4xAgmaUXPUc_eZ_LRhbCXR5i4sok9Ql7lP_hPtjHMHDNi7cfPvXNII4RiKoHBKa0IL4gEneqPN1pbXCj2xGYzarlSCzSyUiWGuGo0/s1600/MustaTech.ga-facebook-icon.png" alt=""/>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FMustaTech&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/AVvXsEgInD-_CRyxQJgmAI2tWKA-Xe3hRQ8sQc9pP_oSKlRkmVp9gxFCTL7HzXiSR7PabSjIpOgeIEJ5XlvJgE10Fa35SmYPmU4VC07O7gFAtemlOciy2YqzT1voB4Nv2ccH8ZPWBpURh4yEHck/s1600/MustaTech.ga-twitter-icon.pngg"/>
<a class="twitter-timeline" href="https://twitter.com/Musta_Tech">Tweets by Musta_Tech</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></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/AVvXsEieRXo08cJIwreeIbPerXfxPNwmoapWep_qOoby4T824VxlSIzVYA-Jw-2R_CerP-ka7wwFQ6WF3rACCSHK0tTNEUXsokSwZ3eSU3tVjD03xQ-_Mw8hU09fqDfB1FASJC7UeWr1kQtiKQY/s1600/MustaTech.ga-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>
<center/>
<a href="http://www.mustatech.ga"><img alt="Blogger Widget MustaTech" src="" title="Blogger widget MustaTech" /></a>
<center/></center></center>
بعد ذلك سنقوم بالتعديل على الكود حيث سنقوم بالضغط على Ctrl+F للبحث على مايلي :
ابحث عن MustaTech واستبدله بإسم المستخدم الخاص بصفحتك على الفيس بوك.
ابحث عن Musta_Tech واستبدله بإسم المستخدم الخاص بحسابك على تويتر.
الكلمات الدلالية :
إضافة نوافذ المواقع الإجتماعية عائمة على جانب مدونات بلوجر , اضافات شبكات التواصل Social Media للووردبريس ,إضافة مواقع التواصل الاجتماعي بطريقة منزلقة , إضافة كود مواقع التواصل الاجتماعي في سايدبار بلوجر , اضافة تابعنا على مواقع التواصل الاجتماعي لمدونات بلوجر,اضافات بلوجر,اضافة بلوجر,كود,كود بلوجر,blogger code,Add Floating Social Media Sharing Buttons To Blogger
مصطفى سعيد (موستا) : مصمم و مطور مواقع ويب ومنتديات وفنى صيانة الكمبيوتر , اعشق التقنية والبرامج والتصميم طالب بكلية الاداب جامعة الاسكندرية - قسم الجغرافيا ونظم المعلومات الجغرافية
ليست هناك تعليقات:
إرسال تعليق