إضافة نوافذ المفضلات الإجتماية الجانبية لمدونات بلوجر

إضافة نوافذ المفضلات الإجتماية الجانبية لمدونات بلوجر

السلام عليكم ورحمة الله تعالى وبركاته سوف نتطرق في هذه التدوينة إلى كيفية إضافة الأزرار الجانبية للمواقع الإجتماعية : الفيسبوك ،جوجل بلس ، تويتر ،والبريد RSS ,وهي عبارة عن إضافة واحدة تحتوي على 4 إضافات في آن واحد حيث أنها تتميز في كونها لا تأخذ حيزا كبيرا في تنسيق المدونة .
والآن أترككم مع كيفية تطبيق هذه الإضافة على مدونكم .

قم بالبحث عن الكود التالي :

]]></b:skin>

 ثم قم بلصق الكود التالي قبله :

ht 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}#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;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-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;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0px}.submitbutton{background:#F2F2F2;border:1px solid#F66303;-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;-webkit-border-radius:5px;border-radius:5px;cursor:pointer}

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
والآن الصق الكود التالي :

<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/AVvXsEg-nEXNQBjDNRynIXtbYShaiw8vjT2PYehewYDaFzp-3LP05cB74uiUuBSRB1OPRQXH7uDqyvnaQzQcu1ZYyKNEZG3tD4CxxpEVDO5Hcs-oGSLWRMeLdW0vipxuJ4CzzBif1rKqOTxuO1hR/s1600/facebook-icon.png" alt=""/><iframe src="//www.facebook.com/plugins/likebox.php? href=http%3A%2F%2Fwww.facebook.com%2F###########&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;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/AVvXsEjQs7JXcoFT_cAPnN1p466Ofpnbr01Zmv5ke11HkDibabVuX2Dy6WYDZtE6BS44CJbVcgwpdNiZ8vlpZUQRc7yFe0zEbt7AQWudhZOh_1zIDGAz1c3VODYZYu7UoIBjfGQV3Pvj2OjiIVFb/s1600/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/AVvXsEi93imh_Al4hFtSWnXNQs0UIviQuFDY6fMq2L_R05yCoMkryvMG9ONel-64nXmEZoYNgwphXbsWjGoiVgjr5xK8WLAFirH6hMkEuP-aeXcy_ij40vwtJq1ZnIksRIe9nWejsGZtM72Yg4Nc/s1600/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=###########', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="" onblur="if (this.value == &#39;&#39;) {this.value = &#39;أدخل إميلك هنا ...&#39;;}" onfocus="if (this.value == &#39;أدخل إميلك هنا ...&#39;) {this.value = &#39;&#39;;}" type="text"/><input value="###############" 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/AVvXsEiH8V-HWrdyUCc8KdvNAtJck6F66Xy9q0GFey3b-08NelwVdvkYEgnx9RAR9CfKn-xwcHGI0p-fEkn8wKxDqj1gGMZ0e1VoTHju9JORfuQ7ibtT7JkZUt4EAT81KCEgXf0SH74jTuwGdXQ/s1600/rssfeed.png"/></div></div></div></div>

إستبدل ما لون باللون  البرتقالي  بحسابك علي الفيسبوك
إستبدل ما لون باللون الأزرق بحسابك على التويتر
إستبدل ما لون باللون الاحمر بحسابك علي الفيدبيرنر
وأخيرا قم بحفظ القالب ،أتمنى أن تنال هذه الإضافة إعجابكم.

إضافة بنرات إعلانية بتأثيرات jQuery على مدونات بلوجر

إضافة بنرات إعلانية بتأثيرات jQuery على مدونات بلوجر

السلام عليكم إخواني أخواتي الكرام ،متتبعي مدونة أبو إياد ،في هذه الفقرة سوف نتعلم كيفية إضافة  بنرات إعلانية على مدونات بلوجر بتأثيرات jQuery الجميلة ،يكمن إختلاف هذه الإضافة عن باقي الإضافات الأخرى للبنرات الإعلانية في أن الإعلانات تتفاعل مع حركة الماوس ،أي عند وضع الماوس على أحد بنرات الإعلان يتم تكبيرها بطريقة جميلة ,كما هو موضح في هذه الصورة .و يمكن إستعمال هذه الخاصية ليس فقط على البنرات الإعلانية بل يمكن إستعمالها لعرض صور أخرى ,كما وضعتها على قائمة "مدوناتي"

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).

]]></b:skin>

 ثم قم بلصق الكود التالي قبله مباشرة :

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://sites.google.com/site/lightbox007/photo/borderblogger.png) no-repeat center center; 
border: none;
}

الآن قم بالبحث عن هذا الكود :

</head>

ثم قم بلصق الكود التالي قبله :

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;)
.stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;)
.stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });

});

});<font size="0"><a href=" http://www.pergola-aluminium.org"></a></font>
</script>

والآن قم بحفظ القالب

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascriptولآن الصق الكود التالي :

<ul class="thumb">
<li><a href="رابط المعلن"><img src="http://www.m5zn.com/img/?img=57570f59ab6edac.png" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="http://www.m5zn.com/img/?img=57570f59ab6edac.png" alt="" /></a></li>
</ul>

<ul class="thumb">
<li><a href="رابط المعلن"><img src="http://www.m5zn.com/img/?img=57570f59ab6edac.png" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="http://www.m5zn.com/img/?img=57570f59ab6edac.png" alt="" /></a></li>
</ul>

وأخيرا قم بحفظ القالب ،أتمنى أن تنال هذه الإضافة إعجابكم.

إضافة فقاعة أداة التلميح على مدونات بلوجر

إضافة فقاعة أداة التلميح على مدونات بلوجر

 

السلام عليكم ورحمة الله تعالى وبركاته ،في يومنا هذا سوف نتعرف على إضافة جميلة ,ألا وهي  إضافة فقاعة أداة التلميح على مدونات بلوجر ، ،نستعمل هذه الأداة عند الحاجة إلي تلميح أو ملاحظة على صورة أو نص معين .
عند وضع مؤشر الماوس على صورة أو على رابط معين, تظهر الفقاعة  وتضم نص التلميح المراد كتابته لشرح الصورة مثلا .

 يمكنك إختيار الصورة التي تريد وليس شرطا أن يكون بنر.
انتقل إلى لوح تحكم مدونتك، إختر "قالب" ،ثم "تحرير html, ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي :

]]></b:skin>

 ثم قم بلصق الكود التالي فوقه :

/*---------- bubble tooltip -----------*/       

a.tt{        

    position:relative;        

    z-index:24;        

    color:#3CA3FF;        

    font-weight:bold;        

    text-decoration:none;        

}        

a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/       

a.tt:hover{ z-index:25; color: #aaaaff; background:;}        

a.tt:hover span.tooltip{        

 display:block;        

 position:absolute;        

 top:0px; left:0;        

 padding: 15px 0 0 0;        

 width:200px;        

 color: #993300;        

 text-align: center;        

 filter: alpha(opacity:90);        

 KHTMLOpacity: 0.90;        

 MozOpacity: 0.90;        

 opacity: 0.90;        

}        

a.tt:hover span.top{        

 display: block;        

 padding: 30px 8px 0;        

 background: url(http://img132.imageshack.us/img132/4946/bubblethumb.gif)

no-repeat top;        

}        

a.tt:hover span.middle{ /* different middle bg for stretch */        

 display: block;        

 padding: 0 8px; 

 background: url(http://img571.imageshack.us/img571/2558/bubblefillerthumb1.gif)

repeat bottom;        

}        

a.tt:hover span.bottom{        

 display: block;        

 padding:3px 8px 10px;        

 color: #548912;        

 background: url(http://img132.imageshack.us/img132/4946/bubblethumb.gif)

no-repeat bottom;        

}

  ثم قم بحفظ القالب .
 نتحكم في موضع الفقاعة بالتعديل على القيم :top:0px و  left:0
والآن لتطبيق هذه الأداة على صورة ،نقوم بلصق الكود التالي في مشاركة جديدة Html مع التعديل عليه وذلك بإستبدال ما لون باللون الأحمر بالرابط الذي سوف تتوجه إليه عند الضغط على الصورة وإستبدال ما لون باللون الأخضر برابط الصورة ،وما لون بالون الأزرق بنص التلميح :

<a class="tt" href="http://www.bloggeridafat.blogspot.com" target="_blank"><img class="tt" src="http://www.m5zn.com/img/?img=57570f59ab6edac.png" /><span class="tooltip"><span class="top"></span><span class="middle">مرحبا بكم على مدونة إضـافـات الـبـلـوجـر </span><span class="bottom"></span></span></a>

ولتطبيق نفس العملية علي نص (كلمة أو جملة ) نستعمل هذا الكود :

<a class="tt" href="http://www.bloggeridafat.blogspot.com" target="_blank">  مدونة إضـافـات الـبـلـوجـر<span class="tooltip"><span class="top"></span><span class="middle">مرحبا بكم على مدونة إضـافـات الـبـلـوجـر</span><span class="bottom"></span></span></a>

مع إستبدال ما لون بالأحمر و الأخضر والأزرق .
وأخيرا قم بحفظ الأداة ،أتمنى أن تنال هذه الإضافة إعجابكم.

إضافة الإبتسامات Onion Emoticons على مدونات بلوجر

إضافة الإبتسامات Onion Emoticons على مدونات بلوجر

السلام عليكم ورحمة الله تعالى وبركاته، أقدم لكم إضافة جميلة لمدوناتكم تتيح لكم فرصة التعبير عن مشاعركم و أرائكم بواسطة صور معبرة , والتي تعطي نفسا جميلا لمشاركاتكم، فكما نعلم أن الصورة أحيانا تكون أكثر تعبيرا من الكلام، بحيث أن هذه الإضافة تعمل فقط على المتصفح Firefox. من الآن فصاعدا ، عبر كما شئت بهذه الاضافة وكن السباق في تطبيقها والجميل في ذلك هو أن هذه الإبتسامات تصبح مدرجة مع أدوات تأليف الرسائل في مدونتك.

وهذه بعض الأمثلة :

 

ما عليك سوى تتبع المراحل الآتية :

1. قم بفتح المتصفح فاير فوكس ، فإن لم يكن لديك ، حمله من هنا
2. الآن سوف نقوم بتثبيت برنامج Grease monkey على فايرفوكس وذلك بالضغط على add toFirefox .

3.بعد أن ينتهي التحميل و التثبيت وافق على إعادة تشغيل الفايرفوكس,وسوف تظهر أيقونة رأس قرد فوق ساعة الكومبيوتر في الأسفل.

4.أما الآن يجب تثبيت الكود java script في البرنامج Grease monkey بالضغط هنا .

1. انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
   قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F) :

]]></b:skin>

 ثم قم بلصق الكود التالي قبله :

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

قم بحفظ القالب.
والآن لنذهب لمعاينة النتيجة وذلك بالدخول موقع بلوجر وليس بلوجر المسودة و من مشاركة جديدة --> تأليف .سوف تظهر أيقونات الإبتسامات، ولإضافة أحد الابتسامات، ما عليك سوى النقر على الصورة التي تريد إظهارها.

وأخيرا، أتمنى أن تنال هذه الإضافة إعجابكم.

حل مشكلة خطأ فتح صفحة تحريرHtml لمنصة بلوجر الجديدة

حل مشكلة خطأ فتح صفحة تحريرHtml لمنصة بلوجر الجديدة

السلام عليكم ورحمة الله تعالى وبركاته، اليوم سوف أقدم لكم حل حصري لمشكلة عدم فتح صفحة "تحرير Html للمدونة "

تتمثل هذه المشكلة في أن هناك كود جافا سكريبت يقوم بحذف خاصية Ifram  ولذلك يجب حذفها.

الآن لنتوجه لتطبيق الطريقة ،(تعتمد هذه الطريقة أولا على السرعة في عميلة النقر بمؤشر الماوس)

1.توجه على حسابك بموقع بلوجر
2.توجه للمدونة المراد فتح القالب الخاص بها وذلك من خلال الزر "قالب"
3.قبل فتح صفحة القالب بثواني قم بالضغط على الزر "نسخ إحتياطي/إستعادة" بأقصي سرعة ممكنة ثم إختيار "تنزيل النموذج الكامل" وذلك بعدة نقرات لفتحها بسرعة قبل إكتمال فتح صفحة القالب .(من الممكن أن لا تنجح من المحاولة الأولى ،لكن حاول أن تكون سريعا في عملية النقر على الزرين "نسخ إحتياطي/إستعادة" و "تنزيل النموذج الكامل")
4.سوف يتم تحميل نسخة القالب، وهذا لا يهمنا الآن، قم بإغلاق النافذة ثم إضغط على زر "تحرير Html" ثم "متابعة"، وسوف تلاحظ أنك قد تمكنت من فتح تحرير Html الخاصة بقالب مدونتك.
5.الآن  قم بحذف كود الجافا سكريبت المسبب لهذه المشكلة وذلك بالبحث عن هذا الكود وحذفه :

<script language='javascript' type='text/javascript'>

if (top != self) {

top.location.href = location.href;

}

</script>

وأخيرا قم بحفظ القالب، أتمنى أن تنال هذه الإضافة إعجابكم.