‏إظهار الرسائل ذات التسميات BLOGGER. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات BLOGGER. إظهار كافة الرسائل

الجمعة، 3 فبراير 2012










تم إيجاد حل مشكلة الصور في قالب personalpress الذي سبق الإشارة إليه في التدوينة التالية






إذ كانت المشكلة تتعلق بتداخل الصور مع الكتابة وحاجة المدون الدائمة لإضافة كود معين لإصلاحها


__________




الحل بسيط جدا يتمثل في حذف إحدى الأكواد من القالب، وذلك كالتالي:


من لوحة تحكم مدونتك توجه إلى: تصميم > تحرير HTML > ابحث عن الكود التالي


div.separator { background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkSjLW_Wvm7kROxsGCS_Bec02Zom1fuPEJFf8_F0hIyLnXutTlBrG732pM_AQX68ni1rRKNk4FUPorA5KithxwOguQpgUiE7TTFodDvKnL1bpLZlu8QUysEjeRF3Ng-_x1FfolL2Hngzu8/") repeat-x; height: 2px; }




قم بحذفه بالكامل ،، ثم ابحث مجددا عن الكود التالي واحذفه أيضا







<div class='separator'/>


احفظ التغيرات في قالب مدونتك ثم استعرضها


وستجد أن المشكلة قد حلت بإذن الله    ◕‿◕






الشكر الجزيل للمدون أناس كيو على مساهمته الكبيرة في حل المشكلة





__________





مشكلة أخرى تتعلق بصور قالب personalpress وهي خروج الصور الكبيرة عن إطار التدوينة



وللأسف لا تنفع مع هذا القالب بعض الأكواد الشائعة عن هذه المشكلة ،،



من لوحة تحكم مدونتك توجه إلى: تصميم > تحرير HTML > ابحث عن الوسم التالي


 ]]></b:skin>
 



وأضف بعده مباشرة (أسفل منه - تحته) هذا الكود





<style type='text/css'>

img {

max-width: 500px;

width: expression(this.width &gt; 500 ? 500: true); }



</style>





__________















read more "تحديث | حل مشكلة الصور في قالب personalpress"

الأحد، 27 نوفمبر 2011














في تدوينة سابقة قمنا بشرح كيفية إضافة أدوات من شأنها أن تضفي على المدونات لمسات احترافية


إلا أنه في تدوينتنا لليوم وددت تخصيصها لأدوات وإضافات الفيسبوك فقط ،،


___________________________




 إضافة | أزرار "Like" و"Send" من الفيسبوك 










تعتبر هذه الإضافة من أشهر إضافات الفيسبوك على مدونات بلوجر
لما تتمتع به من خفة وسلاسة وكذلك عملية جدا للذين لا يحبذون التعليق على التدوينات ^_^


توجه من لوحة التحكم لديك إلى :
تصميم > تحرير html > تنزيل نسخة احتياطية > توسيع القالب > ابحث عن الكود التالي
<data:post.body/>
( ستجد هذا الكود مكرر أكثر من مرة في القالب والمقصود هو الكود الثاني )


إذا رغبت أن تظهر الأزرار في بداية التدوينة فأضف الكود التالي قبل الوسم السابق

وإذا رغبت أن تظهر في نهاية التدوينة فأضف الكود بعد الوسم


 إضافة زر "Send" - "أرسل" فقط 


 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='tahoma'/>


</b:if>




 إضافة زر "Like" - "أعجبني" فقط 






 <b:if cond='data:blog.pageType == &quot;item&quot;'>


<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>


 إضافة زر "أرسل - Like" + "Send - أعجبني" معا 




 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like colorscheme='light'  action='like'  layout='standard' expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/></b:if>






 لتخصيص الأزرار اتبع التالي : 


- احذف المكتوب باللون الأخضر إذا أردت أن تظهر الأزرار في التدوينة وأيضا في الصفحة الرئيسية
إذا رغبت أن تظهر في التدوينة فقط فلا تغير شيئا في الكود


- light : هو اللون الفاتح للأزرار (الأزرق)، إذا رغبت في أن تكون الأزرار باللون الغامق فاستبدل
"light" بـ "dark"


- button_count | standard : هو شكل "ستايل" زر "Like" اختر الشكل الذي ترغب به من الخيارات التالية
واستبدل اسمه باسم الزر الذي تريده


 standard 


 button_count 


 box_count 




___________________________




 إضافة | زرّ " Like - أعجبني" الخاص بصفحة مدّونتك في الفيسبوك 






زر جميل جدا يختصر عليك إضافة "صندوق الإعجاب" الخاص بصفحة مدونتك على مدونتك
فهو يشابه زر "أعجبني - Like" الذي يكون بجانب اسم صفحتك على الفيسبوك








لإضافته إلى مدونتك توجه في لوحة التحكم التحكم لديك إلى :
تصميم > عناصر الصفحة > إضافة أداة HTML/JavaScript > ألصق الكود التالي 


<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/Your_Page_URL%2F&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90&amp;appId=Your_ID" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:90px;" allowtransparency="true"></iframe>


- استبدل "Your_Page_URL" برابط صفحة مدونتك على الفيسبوك.


- استبدل "box_count" باسم شكل "ستايل" الزر الذي ترغب به من الخيارات التالية


 button_count 

 box_count 


 standard 


- استبدل "Your_ID" برقم التطبيق الخاص بك على الفيسبوك






___________________________






 إضافة | صندوق " Facebook Live Stream " للمناقشة الحية 








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

















لإضافته إلى مدونتك، يكفي أن تنسخ الكود التالي وتلصقه في أي موضع ترغب به (كأداة html أو تدوينة بذاتها)



<iframe src="http://www.facebook.com/plugins/livefeed.php?app_id=Your_APP_ID&amp;width=500&amp;height=500" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:500px;" allowTransparency="true"></iframe>






استبدل "Your_APP_ID" برقم معرّف التطبيق الخاص بك في الفيسبوك







يمكنك تغيير عرض الصندوق بتغيير القيمة "500" في الكود







___________________________








 إضافة | صندوق تعليقات " Facebook Comments " لتدوينة واحدة 








يستخدم الكثير من مدوني بلوجر صندوق تعليقات الفيسبوك من هذه الإضافة

ويشتكون من كون التعليقات التي تضاف إليه تتكرر في كل تدوينات المدونة ..!!





في الحقيقة هذا أمر طبيعي، فصندوق تعليقات الفيسبوك هذا وظيفته تتعلق بتدوينة واحدة فقط

ولا يمكن أن نضيفه إلى جميع تدوينات المدونة لأن ..!!





أعتقد أن هذه الإضافة من شأنها خلق مفهوم جديد لـ"سجلّ الزوّار" الذي لا تخلو منه الكثير من المدونات

وذلك بإضافة صندوق تعليقات الفيسبوك كتدوينة مستقلة بذاتها إلى المدونة، وذلك باتباع هذه الخطوات :





في لوحة التحكم بمدونتك توجهه إلى : نشر > رسالة جديدة > ألصق الكود التالي في صندوق الكتابة





<div class="fb-comments" data-href="http://a-omnidal.blogspot.com/" data-num-posts="10" data-width="400"></div>




استبدل رابط مدونتي "http://a-omnidal.blogspot.com/" برابط مدونتك
ويمكنك تغيير عرض صندوق التعليق من خلال تغيير القيمة "400" في الكود
وعدد التعليقات التي ستظهر كوضعية افتراضية للصندوق بتغيير القيمة "10"





ولمن يرغب في إضافة صندوق تعليقات الفيسبوك كامل إلى مدونته في بلوجربحيث يكون لكل تدوينة صندوق خاص بها لا تتكرر من خلاله التعليقات .. يمكنه اتباع الدرس التالي 
( شرح كامل | أضف صندوق تعليقات فيسبوك إلى بلوجر بدون مشاكل )



___________________________



 إضافة | صندوق المعجبين " Fun Box " بتقنية الـJQuery  




















يمكنك مشاهدة هذه الإضافة عبر المدونة التالي

 ( أشر بسهم الفأرة على أيقونة "Facebook" يمين صفحة المدونة )





1) لإضافتها توجه إلى: تصميم > تحرير html > أخذ نسخة احتياطية > ابحث عن الوسم التالي



</head>


ثم أضف قبله مباشرة ( فوقه - أعلاه ) الكود التالي

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
2) توجه إلى: تصميم > عناصر الصفحة > إضافة أداة html > ألصق الكود التالي



<script type="text/javascript">

//<!--

$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwEAaLd8EgvGs2yVeSCDQ-NjD9ryLEIJotPA3INaH6okeL4RIa2R_tKb0y7n7ZpqhhuMnTwTc3xZ6ATU7Z1yuvWyQBprzE40XvxslZFsmtFkV77Bp46sibjHM9MyJ5hUWefQ0MUrd2ovAL/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.w2bslikebox div{border:none;position:relative;display:block;}

.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.w2bslikebox span a{color: #808080;text-decoration:none;}

.w2bslikebox span a:hover{text-decoration:underline;}

</style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=Add_Your_Page_URL&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>




استبدل "Add_Your_Page_URL" برابط صفحة مدونتك على الفيسبوك









___________________________







 إضافة | إشعارات صفحتك على الفيسبوك " Notifications " 




تظهر هذه الأداة آخر الإشعارات التي حصلت عليها في صفحتك على الفايسبوك











لإضافتها انقر على الرابط التالي الذي سيقوم بتوجيهك مباشرة إلى إشعارات في صفحتك على الفيسوبك

https://www.facebook.com/notifications


انقر بيمين الفأرة على " RSS " كما في الصورة التالي وانسخ الرابط











في لوحة تحكم مدونتك توجه إلى :

تصميم > عناصر الصفحة > إضافة أداة > التغذية > ألصق الرابط > استمرار > حفظ





___________________________













أتمنى أن تروقكم الإضافات  ◕‿◕

































read more "الجزء الثاني | مجموعة إضافات احترافية (إضافات موقع الفيسبوك لمدونات البلوجر)"

الاثنين، 3 أكتوبر 2011








في وقت سابق، عرضنا تدوينة بعنوان :




لكن للأسف اشتكى بعض المدونين من مشكلة بصندوق تعليقات الفيسبوك الذي بالشرح


والسبب في ذلك خطأ في أحد الأكواد وتحديث موقع الفيسبوك صندوق التعليقات الخاص به


فوجب عليّ التنبيه لذلك وإعادة تعديل الشرح مع تحديثه






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






ولمن لم يقم بتركيب صندوق تعليقات الفيسبوك يمكنه القيام بذلك عبر هذا الموضوع














read more "تحديث | إضافة صندوق تعليقات الفيسبوك إلى مدونات بلوجر مع الإشراف عليها"

الثلاثاء، 13 سبتمبر 2011












في هذه التدوينة سنعرض بعض أكثر الإضافات احترافية لمدونات بلوجر


وسأبدأ بالإضافات التي أستخدمها في مدونتي كجزء أول  ^_^




_________________













  إضافة | أزرار تابعني عبر حساباتي في المواقع الاجتماعية  






هذه الأداة قمت ( بإعادة صياغتها ) إذا صح التعبير



وأضفت لها التأثير الجميل الذي يظهر عند التأشير على إحدى الأزرار بها من أداة أخرى



لتكون أكثر احترافية، كما قمت بإعادة تصميم معظم الأزرار لتناسب مدونتي والمواقع التي أشترك بها  ^_^







ولإضافة هذه الأداة الاحترافية الجميلة في مدونتك اتبع الخطوات التالية :



@ الخطوة الأولى :



توجه في لوحة تحكم مدونتك إلى :



تصميم > عناصر الصفحة > إضافة أداة > أداة HTML/JavaScript


ثم أضف الكود التالي لها






<div class="flt-wdt">

<style>#floatingbookmarks {

right:25px;

top:40px;

margin-top:10px;

position:fixed;

width:40px;

}

#floatingbookmarks .float {margin:7px}

.FBConnectButton_Text

{

font-size: 8px;

padding:2px 4px 3px !important;

}

</style>

<b:if cond='data:blog.pagetype == &quot;item&quot;'>

<div id='floatingbookmarks'>

<a style="text-decoration:none;" href="http://www.facebook.com/omnidal" rel="nofollow" onclick="window.open('http://www.facebook.com/omnidal');return false;" title="تابعيني عبر الفايسبوك (للفتيات فقط)"> <img border="0" id="Facebook" style="padding-bottom:1px;" alt="تابعني عبر الفايسبوك" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGeQ5A5dv_SJ8J2l_QGQ6D-YwweEXeHsZiWBgCSbVfCXlfDDVhsN9Ol4j0oHJfYZ9cDSAPmA47IitJMlDp_twGlAummNc8yfIpcpyXEV8XNL7q7zi2dAsDd9u3ZcKN1lrZwBT3ir3ht_Q/s1600/FB-OMNIDAL.png" name="Facebook"/> </a>

  <a style="text-decoration:none;" href="https://twitter.com/#!/omnidal" target="_Blank" rel="nofollow" onclick=" window.open('https://twitter.com/#!/omnidal'); return false;" title="تابعني على توتير"> <img border="0" id="Twitter" style="padding-bottom:1px;" alt="تابعني عبر تويتر" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEJToDQP4-f2oVmXxdPfZVMLu2jMltvEmA-u4TiMdYgjCfR04UZfn9FfzEWE98HbPdA6kVEJw7GnPCNiGbjEDiKbZZr01XLLBmR8YjYCquDkI72kpuTVJn7iJqfaOKJ4mwzI0b75SVbs4/s1600/twtr-OMNIDAL.png" name="Twitter"/> </a>

<a style="text-decoration:none;" href="http://a-omnidal.blogspot.com/feeds/posts/default" rel="nofollow" onclick="window.open('http://a-omnidal.blogspot.com/feeds/posts/default');return false;" title="تابعني عبر خلاصات المدونة"> <img border="0" id="Facebook" style="padding-bottom:1px;" alt="تابعني عبر فليكر" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewhLct-A-w0SkAQHLBIBq944F4KcAu3YH2jPR16E3FtbSBWZewqA6e6-8XgOq7QG2N-zTGVKiLvxljofkVViHmEpLVpbWX1UCM5UjaPZiAnEj5Ls_lkMJcZilEtgFrBXlYY-OjmtDIb8/s1600/RSS-OMNIDAL.png" name="RSS"/> </a>

<a style="text-decoration:none;" href="http://www.flickr.com/photos/a_omnidal" rel="nofollow" onclick="window.open('http://www.flickr.com/photos/a_omnidal');return false;" title="تابعني عبر فليكر"> <img border="0" id="Facebook" style="padding-bottom:1px;" alt="Bookmark Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiJZcg5ciEoCMP4XW2zlpgg7UgoKJMpljkNviKvej7RX_30iDGjukxQiI0mezIa6A2sbH2OA5v6nm9XVVB88Kh8-EpN36692h-_LGjm5tTxc3-GcRDHjjpC9YVFXCZz6grIOwSctW6C0/s1600/flickr-omnidal.png" name="flickr"/> </a>

<a style="text-decoration:none;" href="https://plus.google.com/109791937662333407989" rel="nofollow" onclick="window.open('https://plus.google.com/109791937662333407989');return false;" title="تابعني عبر جوجل +"> <img border="0" id="Facebook" style="padding-bottom:1px;" alt="تابعني عبر جوجل +" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6w_QkrRzN0I6JC2DcoX6BPqo_AT1_KOIxJ4xgWaeNH5v514NMllQuMwWCp0uYvg3RFQSpCyW9XbhDbiZ0o7kyhZIstdNL-SfQp9RILXgOa2QtJ7DHDF2wua2HvzC_VQzEouMYQAROqw/s1600/google%252Bomnidal.png" name="Google +"/> </a>

<a href="javascript:window.external.AddFavorite('http://a-omnidal.blogspot.com/', 'مدونة أسماء || أم نضال ||');" title=" أضف المدونة لمفضلتك"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii9nsm3XCZINWTDSIIBIbONSIp93bOVYXaqjlgbleJQA23e0pZWgpKLgpkqOs93ZJEt5z9z1tpJ2xeKwqOWipurAXl0PGnBK1wTplRDVgHk6LZaJKuMRicD90bG4KQVKVzIz9w9DYNN34/s1600/a-omnidal.png" /></a>

</div>

</b:if>

 </div>






@ الخطوة الثانية :



غير روابط المواقع الخاصة بي التي في الكود بالروابط الخاصة بك



وبإمكانك حذف وإزالة أي موقع لست مشترك به بحذف الكود الخاص به



فالأمر سهل على ما أعتقد بعدما جعلت أكواد كل موقع منفصلة عن الآخر





@ الخطوة الثالثة : 



توجه الآن إلى :



تصميم > تحرير html > وابحث عن الوسم





]]></b:skin>




ثم أضف الكود التالي قبله مباشرة (فوقه - أعلاه)






   .flt-wdt{

    position:fixed; right:10px; top:40%;

    }

    .flt-wdt img{

    float:right;

    clear:right;

    margin:5px;

    -webkit-transition: all .2s ease-in-out;

    -moz-transition: all .2s ease-in-out;

    -o-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    }

    .flt-wdt img:hover{

    -moz-transform: scale(1.2) rotate(6deg);

    -webkit-transform: scale(1.2) rotate(6deg);

    -o-transform: scale(1.2) rotate(6deg);

    -ms-transform: scale(1.2) rotate(6deg);

    transform: scale(1.2) rotate(6deg);

    }






قم بحفظ التغيرات على قالبك


واستمتع بأزرار المواقع الاجتماعية الخاصة بحساباتك تطفو على سطح مدونتك مع تأثير جميل ^_^




_________________








  إضافة | البنرات المتحركة لمدونات التبادل الإعلاني  









هذه الأداة استقيتها من مدونة زحمة حكي وعدلت عليها لتتناسب مع بنرات المدونات لدي




ولإضافة هذه البنرات المتحركة إلى مدونتك اتبع الخطوات التالية :




@ الخطوة الأولى :


توجه في لوحة تحكم مدونتك إلى :


تصميم > عناصر الصفحة > إضافة أداة > أداة HTML/JavaScript


ثم أضف الكود التالي لها




<!-- إعلانات -->

 <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">

<td> <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="right"> <tr><td class="thead" align="center">

<a href="هنا ضع رابط موضوع التبادل الإعلاني بمدونتك"> تبـآدل إعلاني ..~ </a> </td></tr> <tr><td class="alt1" align="right">

 <marquee onmouseover=this.stop() onmouseout=this.start() scrollamount=3 scrolldelay=20 direction=right> <table width="100%" cellpadding="0" cellspacing="0" border="0" align="right"><tr>



<!-- نهاية إعلان محدد -->  <!-- بداية إعلان محدد --> <td nowrap>&nbsp;&nbsp; <a rel="nofollow" target="_blank" href="هنا رابط المدونة الأولى"> <img src="هنا رابط صورة البنر الخاص بالمدونة الأولى" border="0" alt="" /></a>

<!-- نهاية إعلان محدد -->  <!-- بداية إعلان محدد --> <td nowrap>&nbsp;&nbsp; <a rel="nofollow" target="_blank" href="هنا رابط المدونة الثانية"> <img src="هنا رابط صورة البنر الخاص بالمدونة الثانية" border="0" alt="" /></a>

<!-- نهاية إعلان محدد -->   </td></td></td></td></td></td></td></td></td></td></td></td></td></td></td></tr></table></marquee></td></tr></table></td></table> <td background="$stylevar[imgdir_misc]/bakborleft.gif" width="15"> </td>






@ الخطوة الثانية :


غير كما هو مشار إليه في الكود ( روابط المدونات وروابط صور البنرات الخاصة بها )


إذا رغبت في إضافة بنرات أخرى أضف هذا الكود أسفل الكود المشابه له


<!-- نهاية إعلان محدد -->  <!-- بداية إعلان محدد --> <td nowrap>&nbsp;&nbsp; <a rel="nofollow" target="_blank" href="هنا رابط المدونة الثالثة"> <img src="هنا رابط صورة البنر الخاص بالمدونة الثالثة" border="0" alt="" /></a>






_________________






  إضافة | المشاركات الشائعة بشكل جميل وتأثير رائع  









هذه الإضافة الجميلة دلتني عليها صاحبة مدونة زحمة حكي من تطبيق مدونة تقارب


لإضافة هذه الأداة الجميلة إلى مدونتك اتبع الخطوات التالية :




@ الخطوة الأولى :


توجه في لوحة تحكم مدونتك إلى :


تصميم > تحرير html > ابحث عن الوسم التالي


]]></b:skin>




ثم أضف بعده مباشرة ( أسفله - أدناه ) الكود التالي




<style type='text/css'> .PopularPosts .item-title{display:none} .PopularPosts .widget-content ul li{background:none repeat scroll 0 0 transparent; float: right; list-style:none outside none; margin:10px 0 0 !important; padding:0 !important} .PopularPosts .item-thumbnail{margin:0 8px !important} .item-thumbnail img{-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease; border:5px solid #89C9E5; height:40px; padding:3px; width:40px} .item-thumbnail img:hover{border:5px solid #67ABC2; -moz-transform:scale(1.3) rotate(-5deg); -webkit-transform:scale(1.3) rotate(-5deg); -o-transform:scale(1.3) rotate(-5deg); -ms-transform:scale(1.3) rotate(-5deg); transform:scale(1.3) rotate(-5deg)} </style>




يمكنك تغيير ألوان الأداة بما يناسب ألوان مدونتك عبر تغيير كود اللونين التاليين


border:5px solid #89C9E5;




( خاص بلون الأداة وهي بالوضع العادي ( بدون التأشير عليها )


border:5px solid #67ABC2;


( خاص بلون الأداة عند التأشير عليها )




ويجب مراعاة أن يكون اللون الثاني أفتح من الأول ( حتى تكون الأداة أكثر تنسيقا )




_________________






  إضافة | كن من متابعي المدونة على شكل صورة  













تمتلك مدونات بلوجر أداة ( المتابعون ) التي تسهّل على الزوار متابعة إحدى المدونات بعينها


عبرعرض آخر التدوينات في لوحة التحكم




أداتنا اليوم تسمح لأصحاب المدونات التحكم أكثر بشكل هذه الأداة وتخصيصها بجمالية بسيطة ورائعة


بإزالة صور المتابعين أولا وربط الأداة بصورة خاصة ثانيا ( كشعار المدونة مثل التي أضعها في فوتر مدونتي مثلا )






وهناك عدة أشكال وطرق لإضافة هذه الأداة سأتناول الطريقة الأولى نقلا من مدونة تقارب






( الشكل الأول )


undefined
 
 لإضافة هذه الأداة إلى مدونتك قم باتباع الخطوات البسيطة التالية :




@ الخطوة الأولى :


توجه في لوحة تحكم مدونتك إلى :


تصميم > عناصر الصفحة > إضافة أداة > أداة HTML/JavaScript


ثم أضف الكود التالي لها


                <a href="http://www.blogger.com/follow-blog.g?blogID=xxxxxxxx" target="_blank" title="كن من متابعي المدونة"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM9UUhh1CbS94yN4LVWoYWpWl5EQhG8lkLWZX8s3ZwAFgTg7YJCu4zRBLBpz6-JmqBSH59xi9FU11GlcfvZMrGr-xYXniVp5p34tygoecnGwSCmMhgkyAA1IkOP7OaTE-cMEQ6o9Uuenug/s1600/follow-with-google-friend-connect-button.jpg" /></a>




@ الخطوة الثانية :


غيّر xxxxxxxx برقم المعرف ( ID ) الخاص بمدونتك



ولتجده شاهد رابط الصفحة في صفحة عناصر الصفحة ( في شريط المتصفح )


ستشاهد أن الرابط يشبه هذا


http://www.blogger.com/rearrange?blogID=6185981115845043616


الأرقام الأخيرة من الرابط هي المعرف ( الـID ) الخاص بمدونتك




انسخها وألصقها بدل xxxxxxxx في الكود السابق



_____________




الشكل الثاني للإضافة هو التالي ( صورة فقط )








 
@ الخطوة الأولى :


توجه في لوحة تحكم مدونتك إلى :


تصميم > عناصر الصفحة > إضافة أداة > أداة HTML/JavaScript


ثم أضف الكود التالي لها


        <a href="http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxx" target="_blank" title="كن من متابعي مدونتي"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA2OO-c0H53U3907OyJqZSHIinnYCgFUAudyXvlOZQcCQnxh3C6L1yq1vhE0_tR7HhzcLBjYqBbTrgL_qqr4RJ4AwqC0W-WAvncfu-hkyzk6gM_VdStMpQRaeK9Q-QugHkbA8SVE4ZRr4T/s1600/google-followers-button.png" /></a>




@ الخطوة الثانية : غيّر xxxxxxxx برقم المعرف ( ID ) الخاص بمدونتك



_____________




الشكل الثالث وهو عبارة عن عبارة نصية مكتوبة كالتالي






@ الخطوة الأولى :


توجه في لوحة تحكم مدونتك إلى :


تصميم > عناصر الصفحة > إضافة أداة > أداة HTML/JavaScript


ثم أضف الكود التالي لها


<a href="http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxx" target="_blank" title="من متابعي مدونتي">من متابعي مدونتي</a>


@ الخطوة الثانية : غيّر xxxxxxxx برقم المعرف ( ID ) الخاص بمدونتك





___________________




وكما تناول الأخ أحمد صاحب مدونة تقارب في موضوعه الذي أشرت إليه أعلاه


يمكن إضافة هذه الأداة أسفل التدوينات عبر الطريقة التالية :






@ الخطوة الأولى : 


توجه في لوحة تحكم مدونتك إلى :


تصميم > تحرير html > وابحث عن الوسم


<div class='post-footer-line post-footer-line-1'>


@ الخطوة الثانية :


أضف بعد الوسم تماما ( أسفله - أدناه ) أحد الأكواد الثلاث السابقة




______________






أما الطريقة الثانية والتي اعتمدتها في مدونتي، وهي أبسط بكثير ولست بحاجة فيها لأي كود




 فقط اتبع الخطوات البسيطة التالية :




@ الخطوة الأولى :




توجه في لوحة تحكم مدونتك إلى :


تصميم > عناصر الصفحة > إضافة أداة > صورة > ثم اختر الصورة التي تود عرضها


( أزل علامة صح من خيار "احتوء مناسب" )




@ الخطوة الثانية : 


في خانة " وصل " ألصق الرابط التالي


http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxxx




@ الخطوة الثالثة :


غيّر xxxxxxxx برقم المعرف ( ID ) الخاص بمدونتك







_________________






  إضافة | قطعة " ابحث في مدونتي " بألوان واحترافية رائعة  









هذه الأداة من منتدى بلوجر بالعربي بواسطة الأخ محمد نجد


ولإضافتها في مدونتك اتبع الخطوات التالية :




@ الخطوة الأولى :


توجه في لوحة تحكم مدونتك إلى :


تصميم > تحرير html > وابحث عن الوسم


]]></b:skin>


وأضف أحد الأكواد التالية حسب ألوان مدونتك


الشكل الأول ( قطعة بحث بلون فاتح )




أضف الكود التالي قبل الوسم السابق تماما ( فوقه - أعلاه )


#search {

}

#search input[type="text"] {

    background: url(search-white.png) no-repeat 10px 6px #fcfcfc;

    border: 1px solid #d1d1d1;

    font: bold 12px Arial,Helvetica,Sans-serif;

    color: #bebebe;

    width: 150px;

    padding: 6px 15px 6px 35px;

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    border-radius: 20px;

    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;

    -webkit-transition: all 0.7s ease 0s;

    -moz-transition: all 0.7s ease 0s;

    -o-transition: all 0.7s ease 0s;

    transition: all 0.7s ease 0s;

    }

#search input[type="text"]:focus {

    width: 200px;

    }






الشكل الثاني ( قطعة بلون غامق عند التمدد تتغير إلى الأبيض )




أضف الكود التالي قبل الوسم السابق تماما ( فوقه - أعلاه )


#search {

}

#search input[type="text"] {

    background: url(search-white.png) no-repeat 10px 6px #444;

    border: 0 none;

    font: bold 12px Arial,Helvetica,Sans-serif;

    color: #d7d7d7;

    width:150px;

    padding: 6px 15px 6px 35px;

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    border-radius: 20px;

    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);

    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

    -webkit-transition: all 0.7s ease 0s;

    -moz-transition: all 0.7s ease 0s;

    -o-transition: all 0.7s ease 0s;

    transition: all 0.7s ease 0s;

    }

#search input[type="text"]:focus {

    background: url(search-dark.png) no-repeat 10px 6px #fcfcfc;

    color: #6a6f75;

    width: 200px;

    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;

    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;

    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;

    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

    }








الشكل الثالث ( قطعة بلون غامق كليا قبل وبعد التمدد )




أضف الكود التالي قبل الوسم السابق تماما ( فوقه - أعلاه )


#search {

}

#search input[type="text"] {

    background: url(search-dark.png) no-repeat 10px 6px #444;

    border: 0 none;

    font: bold 12px Arial,Helvetica,Sans-serif;

    color: #777;

    width: 150px;

    padding: 6px 15px 6px 35px;

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    border-radius: 20px;

    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);

    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

    -webkit-transition: all 0.7s ease 0s;

    -moz-transition: all 0.7s ease 0s;

    -o-transition: all 0.7s ease 0s;

    transition: all 0.7s ease 0s;

    }

#search input[type="text"]:focus {

    width: 200px;

    }




@ الخطوة الثانية :


توجه في لوحة تحكم مدونتك إلى :


تصميم > عناصر الصفحة > إضافة أداة > أداة HTML/JavaScript


ثم أضف الكود التالي لها


<form method="get" action="/search" id="search">

  <input name="q" type="text" size="40" placeholder="ابحث في هذه المدونة" />

</form>






_________________






  إضافة | أحاديث الحبيب عليه الصلاة والسلام متغيرة بتغير الصفحة  













هذه الأداة الجميلة من مدونة العازمي ، وتضم الأحاديث المشهورة للحبيب عليه الصلاة والسلام


وتتغير الأحاديث بتحديث أو تغيير الصفحة في المدونة


والأداة خفيفة جدا على المتصفح وثقيلة جدا في ميزانك يوم الحساب بإذن الله






خطوات إضافة هذه الأداة في مدونتك عبر خطوة واحدة بسيطة وهي كالتالي :




توجه في لوحة تحكم مدونتك إلى :


تصميم > عناصر الصفحة > إضافة أداة > أداة HTML/JavaScript


ثم أضف الكود التالي لها


<script language="JavaScript">

/*****************************************

* Visit our site at http://www.star28.com/ for more code

******************************************/

<!-- Begin

var ALAA = 36;

now = new Date();

var rd = now.getSeconds();

var ra = rd % ALAA;

var re = ++ra;

var sori = "";

if (re == 1) {

sori = "قَالَ رَسُولُ اللهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ مَنْ كَانَ يُؤْمِنُ بِاللَّهِ وَالْيَوْمِ الْآخِرِ فَلْيُكْرِمْ جَارَهُ";

}

if (re == 2) {

sori = "عن أنس بن مالك رضي الله عنه، قال: كان النبي صلى الله عليه وسلم يقول: ( اللهم { ربنا آتنا في الدنيا حسنة وفي الآخرة حسنة وقنا عذاب النار } ) رواه البخاري ";

}

if (re == 3) {

sori = " قَالَ رَسُولُ اللهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ: من أحب لقاء الله أحب الله لقاءه ومن كره لقاء الله كره الله لقاءه ";

}

if (re == 4) {

sori = "عَنْ أَبِي هُرَيْرَةَ رَضِيَ اللَّهُ عَنْهُ أَنَّ رَسُولَ اللَّهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ قَالَ:مَنْ صَلَّى عَلَيَّ وَاحِدَةً صَلَّى اللَّهُ عَلَيْهِ عَشْرًا";

}

if (re == 5) {

sori = "عَنْ أَبِي هُرَيْرَةَ : أَنَّ رَسُولَ اللَّهِ  صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ  قَالَ : أَقْرَبُ مَا يَكُونُ الْعَبْدُ مِنْ رَبِّهِ وَهُوَ سَاجِدٌ فَأَكْثِرُوا الدُّعَاءَ";

}

if (re == 6) {

sori = "عَنْ أَبِي هُرَيْرَةَ قَالَ: قَالَ رَسُولُ اللَّهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ:إِنَّ اللَّهَ لَا يَنْظُرُ إِلَى صُوَرِكُمْ وَأَمْوَالِكُمْ، وَلَكِنْ يَنْظُرُ إِلَى قُلُوبِكُمْ وَأَعْمَالِكُمْ";

}

if (re == 7) {

sori = "قال النبي صلى الله عليه وسلم «مَنْ أَحَبُّ عِبَادِ اللَّهِ إلَى اللَّهِ ؟ قَالَ أَحْسَنُهُمْ خُلُقًا»";

}

if (re == 8) {

sori = "قَالَ رَسُولُ اللهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ:مِنْ حُسْنِ إِسْلَامِ الْمَرْءِ تَرْكُهُ مَا لَا يَعْنِيهِ ";

}

if (re == 9) {

sori = "ََقَالَ رَسُولُ اللهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ:لاَيُؤْمِنُ أَحَدُكُمْ حَتىَّ يُحِبَّ لِأخِيهِ مَا يُحِبُّ لِنَفْسِهِ";

}

if (re == 10) {

sori = "قَالَ رَسُولُ اللهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ: «مَنْ حدَّثَ عنِّي بحديث يُرى أنه كذب ، فهو أحد الكاذِبَيْن» أخرجه مسلم والترمذي";

}

if (re == 11) {

sori = "قَالَ رَسُولُ اللهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ  إِذَا الرَّجُلُ دَعَا زَوْجَتَهُ لِحَاجَتِهِ فَلْتَأْتِهِ وَإِنْ كَانَتْ عَلَى التَّنُّورِ ";

}

if (re == 12) {

sori = "عن ابن مسعود رضي الله عنه قال: قال رسول الله صلى الله عليه وسلم:ليس المؤمن بالطعان ولا اللعان ولا الفاحش ولا البذيء رواه الترمذي، وقال هذا حديث حسن غريب";

}

if (re == 13) {

sori = " قال صلى الله عليه وسلم : أكمل المؤمنين إيمانا أحاسنهم أخلاقا الموطنون أكنافا الذين يألفون ويؤلفون ، ولا خير فيمن لايألف ولا يؤلف رواه الترمذي ";

}

if (re == 14) {

sori = "قَالَ رَسُولُ اللَّهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ:الْمَرْءُ عَلَى دِينِ خَلِيلِهِ فَلْيَنْظُرْ أَحَدُكُمْ مَنْ يُخَالِلُ";

}

if (re == 15) {

sori = "عَنْ عَلِيِّ بْنِ أَبِي طَالِبٍ  قَالَ: قَالَ رَسُولُ اللهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ:انْتِظَارُ الْفَرَجِ بِالصَّبْرِ عِبَادَةٌ";

}

if (re == 16) {

sori = "قال النبي صلى الله عليه وسلم  وَالسَّعِيدُ مَنْ وُعِظَ بِغَيْرِهِ";

}

if (re == 17) {

sori = "قَالَ رَسُولُ اللهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ: كَادَ الْفَقْرُ أَنْ يَكُونَ كُفْرًا، وَكَادَ الْحَسَدُ أَنْ يَغْلِبَ الْقَدَرَ";

}

if (re == 18) {

sori = "قَالَ رَسُولُ اللهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ الْوِحْدَةُ خَيْرٌ مِنْ جَلِيسِ السُّوءِ ، وَالْجَلِيسُ الصَّالِحُ خَيْرٌ مِنْ الْوِحْدَةِ ، وَإِمْلَاءُ الْخَيْرِ خَيْرٌ مِنْ الصَّمْتِ ، وَالصَّمْتُ خَيْرٌ مِنْ إمْلَاءِ الشَّرِّ";

}

if (re == 19) {

sori = "قَالَ رَسُولُ اللهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ مَنْ غَشَّنَا فَلَيْسَ مِنَّا";

}

if (re == 20) {

sori = "قال النبي صلى الله عليه وسلم اتَّقُوا فِراسَةَ المؤمن ، فإِنه يَنظُرُ بنورِ الله";

}

if (re == 21) {

sori = "قال النبي صلى الله عليه وسلم إِنَّمَا بُعِثْتُ لِأُتَمِّمَ مَكَارِمَ الْأَخْلَاقِ";

}

if (re == 22) {

sori = "قال النبي صلى الله عليه وسلم  اتَّقُوا دَعْوَةَ الْمَظْلُومِ، وَإِنْ كَانَ كَافِرًا، فَإِنَّهُ لَيْسَ دُونَهَا حِجَابٌ";

}

if (re == 23) {

sori = "قال النبي صلى الله عليه وسلم   الدَّالُّ عَلَى الْخَيْرِ كَفَاعِلِهِ";

}

if (re == 24) {

sori = " قال النبي صلى الله عليه وسلم دَاوَوْا مَرَضَاكُمْ بِالصَّدَقَةِ وَحَصِّنُوا أَمْوَالَكُمْ بِالزَّكَاةِ وَأَعِدُّوا لِلْبَلَاءِ الدُّعَاءَ";

}

if (re == 25) {

sori = "قال النبي صلى الله عليه وسلم الْمُسْلِمُ مَنْ سَلِمَ الْمُسْلِمُونَ مِنْ لِسَانِهِ وَيَدِهِ";

}

if (re == 26) {

sori = "قال النبي صلى الله عليه وسلم لَا يُلْدَغُ الْمُؤْمِنُ مِنْ جُحْرٍ مَرَّتَيْنِ";

}

if (re == 27) {

sori = "قال النبي صلى الله عليه وسلم الْمُؤْمِنُونَ كَالْبُنْيَانِ يَشُدُّ بَعْضُهُمْ بَعْضًا";

}

if (re == 28) {

sori = "قال النبي صلى الله عليه وسلم آيَةُ الْمُنَافِقِ ثَلَاثٌ  إِذَا حَدَّثَ كَذَبَ وَإِذَا وَعَدَ أَخْلَفَ  وَإِذَا اؤْتُمِنَ خَانَ";

}

if (re == 29) {

sori = "قال النبي صلى الله عليه وسلم والذي نفسي بيده لا يسمع بي أحد من هذه الأمة يهودي أو نصراني ثم يموت ولا يؤمن بالذي أرسلت به إلا كان من أصحاب النار";

}

if (re == 30) {

sori = "قال النبي صلى الله عليه وسلم اتقوا دعوة المظلوم وإن كان كافرا فإنها ليس دونها حجاب";

}

if (re == 31) {

sori = "قال النبي صلى الله عليه وسلم أَحَبُّ الْأَعْمَالِ إِلَى اللَّهِ تَعَالَى أَدْوَمُهَا وَإِنْ قَلَّ";

}

if (re == 32) {

sori = "قال النبي صلى الله عليه وسلم  إذا جاء رمضان فتحت أبواب الرحمة وغلقت أبواب النار وصفدت الشياطين";

}

if (re == 33) {

sori = "قال النبي صلى الله عليه وسلم من قال إذا أصبح رضيتُ بالله رباً وبالإسلام ديناً وبمحمدٍ صلَّى الله عليه وسلَّم نبياً فأنا الزعيم لآخذنَّ بيده حتى أُدخِلَهُ الجنَّةَ ";

}

if (re == 34) {

sori = "قال النبي صلى الله عليه وسلم أَحَبُِّ الجِهَادِ إِلَى اللهِ كَلِمَةُ حَقٍّ تُقَالُ لإِمَامٍ جَائِرٍ";

}

if (re == 35) {

sori = "قال النبي صلى الله عليه وسلم  أخاف على أمتي ثلاثا‏‏ زلة عالم وجدال منافق بالقرآن والتكذيب بالقدر";

}

if (re == 36) {

sori = " قَالَ رَسُولُ اللهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ: إِنَّ أَخْوَفَ مَا أَخَافُ عَلَيْكُمْ بَعْدِي مُنَافِقٌ عَليِمُ اللِّسَانِ";

}

var ALAA=""+sori+"";

document.write(ALAA);

// End -->

               </script>
















تم بحمد الله وعونه ◕‿◕






read more "الجزء الأول | مجموعة إضافات احترافية لمدونات بلوجر"
 

me | twitter