جدول محتوى المقال
كلعادة بدون اطالة اليكم شرح كيفة إضافة أربع نوافذ منبثقة عائمة للشبكات الاجتماعية على جانب المدونة او الموقع بشكل احترافى مثلما ترون ف الصورة السابقة
من مميزات هذه الاضافة الرائعة :
الخصائص :
مكونات هذه الاضافة من :
تتكون الإضافة من أربع نوافذ منبثقة عائمة للمواقع الإجتماعية من :
والان مع طريقة تركيب الاضافة على المدونة :
والان شرح التعديل على هذا الكود :
التعديل على الكود حيث سنقوم بالضغط على Ctrl+F للبحث على مايلي :
ولتعديل الكلمات فى مستطيل تسجيل الإميل الخاص بالزوار (FeedBurner) لاستبدال الكلمات داخل المستطيل من الانجيلزية الى العربية تابع الطريقة
اتبع الخطوات التالية :
داخل الكود بالضغط على Ctrl+F ابحث عن : استبدال كلمة submit
لاستبدال الجملة التالية بالعربية
إشترك ليصلك جديد الموقع يوميا
لاستبدال الجملة داخل مربع كتابة اميل المستخدم بالعربية
ستجد هذه الكلمة مكررة الى ثلاث مرات يجب استبدالها جميعا بنفس الكلمة
تعتبر هذه الإضافة الرائعة الخاصة بالمواقع الإجتماعية مناسبة جدا للمدونات او المواقع التي لا يوجد بها مكان لإضافات أخرى. حيث أنها تساهم في زيادة عدد زوار مدونتك.
تمكنك هذه الإضافة من إظهار صندوق معجبين الفيس بوك, صندوق محادثة تويتر, زر جوجل +1 والإشتراك بالخلاصات, مع إظهارهم بمجرد مرور الماوس على الأزرار
1- صندوق عائم لمعجبي صفحتك على Facebook.
2- صندوق آخر التويتات على twitter.
3- صندوق به زر Google plus +1.
4- صندوق الإشتراك بالقائمة البريدية (خلاصات الموقع) FeedBurner.
1- توجه إلى لوحة تحكم البلوجر.
2- ثم إلى تخطيط أو تصميم.
3- بعد ذلك أدخل إلى عناصر الصفحة. واضغط على إضافة أداة.
4- قم باختار Html/Javascript.
5- ثم قم بنسخ الكود التالي كاملاً وألصقه في المكان المخصص بكود 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/AVvXsEjo0pqy8uTMy6KxnuINbss36-ivGsjTYGwuIHRp0U4tMBlH01MwNB5gm_V_QJzKHms-71RpRtO6aiH-ZpidBi_xGkeMKvPaeT66RFfHCFwGuMsf16pl-0kv57LPyU5IzBesFcDxvraaTOo/s1600/AfkarPro.com-facebook-icon.png" alt=""/>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F1470707066510756&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/AVvXsEgxD6ipOV3BOIuhlGrtB1zduV9inXp8OjqmTt_lkWmrftpYQ_OEJnE9K0e9313_DP1oi5qMP4qvQOiNPRilJVoVQiskWIx7Vv6ATVEe-NXyR4xySdqmLecjeVn_2-mQSwFxd5HdaauN7Tw/s1600/MohsenAbdo9.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('MohsenAbdo9').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/AVvXsEhlJZYEmX47Z9IfrXKE5nMbdW9p5ihP2kzNrHBzsrcYjtBah4yMbhIlQht1JT9jQjb8j7nscwGbIabWvQA18o5K7I24BVcKPvnljVVeTkKuztIEB-n4yQlfMoClB48F4NUgVhqTA1cBDvU/s1600/111123307464385725563.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=mohsenabdo', '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 == '') {this.value = 'enter your email here...';}" onfocus="if (this.value == 'enter your email here...') {this.value = '';}" type="text"/><input value="mohsenabdo" 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/AVvXsEgsQsAZ1SBSTFtnkhWjXUZHAO1JEie4XdYbQX9oMOqUgW5EDo9s1joVwNeQwkW8MJqhzhVmlv5yW5HrxUOlFS3J6Gzr-LuBZ6xCapU8x9yHy5Dba0K4cctHrf_qg0-H3Iw1BVX3pl2zs5c/s1600/mohsenabdo.com-subscribe-icon.png"/>
</div>
</div>
</div>
</div>
واستبدله بإسم المستخدم الخاص بصفحتك على الفيس بوك.
ابحث عن : MohsenAbdo9 وهو اسم المستخدم الخاص بحسابي انا
واستبدله بإسم المستخدم الخاص بحسابك على تويتر.
ابحث عن : mohsenabdo وهو اسم المستخدم الخاص بحسابي انا
واستبدله بإسم المستخدم الخاص بخلاصات مدونتك (على FeedBurner)
ابحث عن : 111123307464385725563 وهو اسم المستخدم الخاص بحسابي انا
واستبدله بإسم المستخدم الخاص بحسابك على جوجل بلاس.
بالبحث عنها داخل الكود (وهى الكلمة الثالثة فى نتائج البحث)
ثم استبدالها بكلمة إرسال او تقديم او إشترك الان او ما الى ذلك
You can also receive Free Email Updates
بالبحث عنها ثم استبدالها باى جملة مثلا بـ
سجل إميلك ليصلك جديد الموقع يوميا
سجل إميلك وتوصل بأخر مواضيعنا
ادخل بريدك الالكتروني
اكتب بريدك ليصلك جديد الموقع
enter your email here
بالبحث عنها واستبدالها مثلا بـ
ادخل بريدك الالكتروني هنا
وملحوظة :
واخير قم بحفظ الاداة ثم عد الى المدونة او الموقع ستجد ظهور الاداة وبشكل جميل واحترافى
الإنشاء
11 أبريل 2016
آخر تحديث
المشاهدات
التعليقات
إرسال تعليق