بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين
سيدنا محمد وعلى آله وصحبه أجمعين
أقدم لكم إضافة من إضافات بلوجر تهم معظم أصحاب المدونات وهى النوافذ المنزلقة للمواقع الإجتماعية تظهر بجانب الموقع وقد قدمت من قبل هذه الإضافة بتقنية jQuery لأربع شبكات إجتماعية فقط وهى (متابعين الفيس بوك , صندوق تغريدات تويتر, زر +1 لجوجل بلس , الإشتراك عبر البريد الإلكترونى) ولكن اليوم أقدمها بشكل مختلف حيث تحتوى على 5 صناديق منزلقة لمتابعين المواقع الإجتماعية (الفيس بوك,تويتر,يوتيوب,جوجل بلس,خدمة البريد الإلكترونى) تظهر بمرور الماوس على الأيقونة الجانبية بالموقع.
مميزات الإضافة
- هذه الإضافة مفيدة فى زيادة عدد متابعين المدونة على المواقع الإجتماعية.
- تقلل من إزدحام الإضافات بالأعمدة الجانبية.
- تظهر دون مشاكل على أنظمة الأندرويد
- الإضافة تظهر بمظهر رائع للزائر.
- سهلة التركيب إلى موقعك
معاينة الإضافة
كيفية تركيب الإضافة لمدونات بلوجر
- الذهاب إلى لوحة التحكم
- تخطيط
- أضف أداة
- اختار Html/Javascript
<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-right: 5px; margin-top: 1px; } #CONfeedburner_div { width: 300px; height: 120px; overflow: hidden; margin-top: 5px; margin-right: -4px; } #CON_div { width: 300px; height: 97px; overflow: hidden; } /* left side style */ #facebook_right { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 235px; height: 236px; position: fixed; left: -239px; } #facebook_right img { position: absolute; top: -1px; right: -65px; } #facebook_right iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 236px; right: -2px; top: -3px; } #twitter_right { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 250px; height: 240px; position: fixed; left: -254px; } #twitter_right_img { position: absolute; top: -1px; right: -65px; 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-left: 2px solid #0056a0; border-right: 2px solid #0056a0; width: 290px; height: 250px; position: fixed; left: -294px; } #google_plus_right_img { position: absolute; top: -1px; right: -65px; 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; left: -304px; } #feedburner_right_img { position: absolute; top: -1px; right: -65px; border: 0; } #CON_right { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #CON_right img { position: absolute; top: -1px; right: -65px; } /* right side style */ #facebook_left { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 235px; height: 236px; position: fixed; right: -239px; } #facebook_left img { position: absolute; top: -2px; left: -35px; } #facebook_left iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 236px; left: -2px; top: -3px; } #twitter_left { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 240px; position: fixed; right: -254px; } #twitter_left_img { position: absolute; top: -2px; left: -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-right: 2px solid #0056a0; border-left: 2px solid #0056a0; width: 290px; height: 120px; position: fixed; right: -294px; } #google_plus_left_img { position: absolute; top: -2px; left: -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-right: 2px solid #5b5b5b; border-left: hidden; width: 300px; height: 97px; position: fixed; right: -304px; } #feedburner_left_img { position: absolute; top: -2px; left: -33px; border: 0; } #CON_left { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #CON_left img { position: absolute; top: -2px; left: -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; left: -304px; } #youtube_right_img { position: absolute; top: -1px; right: -65px; border: </style> <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( { left: 0 }, 500); }, function () { jQuery("#facebook_right").stop( true, false).animate( { left: -239 }, 500); }); jQuery("#twitter_right").hover( function () { jQuery(this).stop(true, false).animate( { left: 0 }, 500); }, function () { jQuery("#twitter_right").stop( true, false).animate( { left: -254 }, 500); }); jQuery("#google_plus_right").hover( function () { jQuery(this).stop(true, false).animate( { left: 0 }, 500); }, function () { jQuery("#google_plus_right").stop( true, false).animate( { left: -294 }, 500); }); jQuery("#feedburner_right").hover( function () { jQuery(this).stop(true, false).animate( { left: 0 }, 500); }, function () { jQuery("#feedburner_right").stop( true, false).animate( { left: -304 }, 500); }); jQuery("#youtube_right").hover( function () { jQuery(this).stop(true, false).animate( { left: 0 }, 500); }, function () { jQuery("#youtube_right").stop( true, false).animate( { left: -304 }, 500); }); }); </script> <br /> <div id="on"> <div id="facebook_right" style="top: 8%;"> <div id="facebook_div"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1AEe0wHU8tIGeFj8yQLpHVfL2T0YO6mEs9Nus2WFU2lrikbFRqhPKMOsw3qKqkJfom_jrQ0QkgIUlio8XFZEyMaFYqEv7tYPDya68nQ8sUbVee9CbK2DaLHjEZ8iz6joyyvwwkolmuUbu/w80-h102-no/fb.png" /> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fdesignsblog&width=250&height=250&colorscheme=light&show_faces=true&border_color&stream=false&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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJU5SL850xntq0txzoqGG464Z8ksRU32CDz-SI9gqityC1jPgGzS9YJmlR4mNOb7jjSDsCaTCtAD3LiVlHpOwvBi1UUbCdA-zP1ldtXKmaAKwDxC2TFeg_eQU8dkNAFj_CF8gLkaqaNllo/w80-h103-no/twitter.png" /> <div style="width:248px;font-size:8px;text-align:left;"> <div id="twitter-box"></div> <script> var tw_user = 'DrRo2'; var tw_width = 301; var tw_height = 325; var no_face = 9; (function() { var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true; tw_box.src = '//www.twitter-fanbox.com/tw.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box); })(); </script> <a href="http://NewBloggerTips.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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLQfYPGKS_HdLZa5yPpErV9bxTBDQtOJdMZpoP6XhDRkagMJvnsoFuw9emjaUC-rRBCNy8h47D6I_3r4X3FHm5MphHewHyukyP7pCVqiVel9jKD8BjwB4sCEDqOBm6t4m25gT1Qp9I2lA5/w80-h103-no/google%252B1.png" /> <div style="float: right; margin: 10px 10px 10px 0;"> <a href='http://newbloggertips.com'> <img alt='Tips Tricks And Tutorials' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSixbeU9N7EJWAPg99LOeSRNIb1zn_elD93F-flZUqL-ytG8ENKQVkSl1VsjYRLNFal2hwuiWO57X25VMDXpDLkOL6422B71vsvFgEtePPNR4TJwPanz_Cca6tiCJpo6Xqes973u5RErCq/s1600/best+blogger+tips.png' /> </a> <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/+Condaianllkhir" 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="CONfeedburner_div"> <center> <h4 style="color: #f66303;">تابع عبر البريد الإلكترونى:</h4> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=condaianllkhir/DrRO', '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="condaianllkhir/DrRO" /> <input class="submitbutton" type="submit" value="Submit" /> </form> </center> <img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpfLs4E7Pwf5qRQGQNq9bBkUUqlMxyBRF_F_z6vdGraC9-dbUIrofL2bYh6VNek97rYfWbLfKYzOCsSgjdiWs8canaX5UoAXlc2cwjt9WSg_5q_ghj0wSPWvpF36a17yoDvWtqewoCbF55/w80-h103-no/rss.png" /> <div style="float: left; padding: 20px; margin: 0px;"> <span style="font-size:10px;">Widget by <a href="http://www.condaianllkhir.com/"rel="nofollow" target="_blank">condaianllkhir</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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFY1OV7oNwzoaFhF63JiF6LhsMItRgZLgoE9oR0R9he0vIplxo9GpG49GgeL3HbF-_Sz_Rqre6T8HJvhbbXY_sEfTTgmPlgVJ3ynAgNxnhHAS79m1ZuApVFEArzU0AfcE5mSCQYowPIeu/w80-h103-no/youtube.png " /> <div style="float:right;margin:1px 0px 0px 2px;"> <iframe src=http://www.youtube.com/subscribe_widget?p=designs9 style="height:105px;width:300px;border:0;" scrolling="no" frameborder="0"></iframe> </div> </div> </div> </div></div></div>
للتعديل على الكود إستخدم البحث بالكيبورد Ctrl+F
إستبدل designsblog بإسم المستخدم الخاص بصفحتك على الفيس بوك facebook fanpage username
إستبدل DrRo2 بإسم المستخدم الخاص بحسابك على تويتر twitter username
إستبدل +Condaianllkhir بإسم المستخدم الخاص بحسابك على جوجل بلس
إستبدل condaianllkhir/DrRO بإسم المستخدم الخاص بخلاصات مدونتك مع العلم بأنه مكرر أكثر من مرة feedburner username
إستبدل designs9 بإسم المستخدم الخاص بقاتك على اليوتيوب
ثم التعديل على الكود السابق ونسخه الى موقعك كما يلى:
تحديث: بالنسبة لحل مشكلة عدم ظهور صندوق متابعى تويتر
تم تحديث الكود بإنشاء الأداة من خلال هذا الموقع مع العلم بأنه ليس الموقع الرسمى لأدوات تويتر فهو تطبيق من إنشاءMusicPaax
لذلك يستلزم ربط موقعك بالتطبيق وذلك بتسجيل الدخول لحسابك على تويتر عبر التطبيق كما بالصورةإستبدل DrRo2 بإسم المستخدم الخاص بحسابك على تويتر twitter username
0 التعليقات