- fahad
- 5:36 م
- أضافات ودروس بلوجر ، الشبكات الاجتماعية
- 4 تعليقات
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اليوم نتطرق لموضوع أضافة الشبكات الأجتماعية الشهيرة قوقل بلس وتويتر وفيسبوك الأضافة التي سوف أضعها لكم هي بتقنية
jequery بحيث تكون ثابت بجانب المدونة فعند تأشير بالماوس عليها تنزلق الأضافة متوافقه مع أغلب المتصفحات
كما أنه مضاف أليها كود الأشتراك بالبريد الألكتروني
صورة للمثال للمشاهدة
هذه الطريقة وضعته لكم بعد وجد العديد من المدونيين قاموا بمراسلتي والأستفسار عن هذه الأضافة
طريقة التركيب
أولا:أتجه للوحة التحكم
تصميم
أضافة أداة
أختار (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/AVvXsEhoxNVvUWHIgSJCPAkRY4ozgxgHUkmFq0QIcRr9zqf58AgHow0tvDrc6OIGu6BMlhrwHIBqlCCsC_YIYBtgJYiFTm9J2eBceiKPCeuUM4aZre76w4Ia-OVzilM4zo2MWTazlUnLz6OcGg/h120/mdonti-n.blogspot.com-facebook-icon.png" alt=""/>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fهنا أسم صفحتك بالفيسبوك&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/AVvXsEgdczy7cNFlO_uO_z14IMzI-gZf6qZ34im85cq9_UFwlr-6yE1REIV-sreadhRoCWY-D8odOvEgqxhWmzvjaiktjvsl2UsC8SSFIlWj1xFrag67IvbcTAGyJ_2Q-hKo34Ce4cYUIVTNHg/h120/mdonti-n.blogspot.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('أسم صفحتك بتويتر').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/AVvXsEhp5DIH4Xy0BcfSCPfo5oFN7ANVYlygFvsRIcNI_BU8fBaqt6DKR1VeouVJC4jJgMAPDFyyrPXi2obsxsDIoSDAHJFn1uXHKb4gr9ELtaJrre_zR1sewwLbqhbHWTIZL1ObcRqOdZA-HA/h120/mdonti-n.blogspot.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;">أضف بريدك الألكتروني ليصلك جديد المواضيع:</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=أسم feedburner', '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="hblogger" 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/AVvXsEijZu2HfI0NkZ4UmPTbFr2Onmon1S9sZGS8ambn0ziu8L83AgGura2ZxQc1qcg9Lpvu_E3NQrq_fzEk2OdAahXUjeFy5UyC7O_H09TkXYMYnnXGz5eycZIjy7dhyphenhyphenNzG3LQnhLEjT2uDNw/h120/mdonti-n.blogspot.com-subscribe-icon.png"/>
</div>
</div>
</div>
</div>
وأخير لاتنسى التعديل على الكتابة المشار لها بلون الأحمر بروابط وأسماء صفحات المدونة بالشبكات الأجتماعية
وسلام عليكم ورحمة الله وبركاته
تسلم أخوي أضافة مهمة
ردحذفوأحلى تقييم للموضوع1+
أنا طبقت الدرس الموجود في مدونة أبو أياد لكن ماضبطت معي فيسبوك وتويتر
ردحذفما أدري وش المشكلة
سعدت بمرورك أخي المهند
ردحذفأخي عبدالله
طبق أنت هذا الشرح الذي وضعته وبأذن الله سوف تضبط معاك بدون مشاكل
أهم حاجه تأكد من وضع أسم صفحاتك في الفيسبوك وتويتر
(أسم المستخدم)
وبأنتظار ردك
شكرا لك تم تطبيق الدرس بنجاح
ردحذفالمشكلة في الكود المعطى في مدونة أبو أياد مافهمت وين أحط أسم الصفحة الخاص بي في تويتر وفيسبوك لخبط في الكود