أسرار بلوغر

Poho Blog

2020-03-19T22:40:00.000+01:00

إضافة أيقونات المشاركة أسفل التدوينة

2014-02-01T11:04:00.000+00:00

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

لكي لا أطيل عليك ندخل في صلب الموضوع

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

بعد ذالك قم بلصق الكود التالي تحث الأول مباشرة

<style>

/*--------Flipper Sharing Widget ------*/

.flipper a {

display:block;

height:48px;

width:48px;

padding:0 4px;

float:left;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_v1aWdCcZ_GcWWO26qBeZAPpRuzGKl4BnoDhWtzP0Vd8EDQcZPx-Qp15cad_CRHXzaWlZWSWkDjV73JY7EFehaPv88-jhAQ25sj7rCJQRfRpjtgljzafdiWjlJwcFU0yrLSBm-ft08d5J/s1600/flipper.png) no-repeat;

-webkit-transition: ease-in 0.15s all;

-moz-transition: ease-in 0.15s all;

-o-transition: ease-in 0.15s all;

-ms-transition: ease-in 0.15s all;

transition: ease-in 0.15s all;

cursor:pointer;

}

.flipper a.googleplus {

background-position: 0px -348px;

}

.flipper a.googleplus:hover {

background-position: 0px -406px;

}

.flipper a.pinterest {

background-position: 0px -464px;

}

.flipper a.pinterest:hover {

background-position: 0px -522px;

}

.flipper a.delicious {

background-position: 0px 0px;

}

.flipper a.delicious:hover {

background-position: 0px -58px;

}

.flipper a.digg {

background-position: 0px -116px;

}

.flipper a.digg:hover {

background-position: 0px -174px;

}

.flipper a.stumbleupon {

background-position: 0px -812px;

}

.flipper a.stumbleupon:hover {

background-position: 0px -870px;

}

.flipper a.technorati {

background-position: 0px -928px;

}

.flipper a.technorati:hover {

background-position: 0px -406px;

}

.flipper a.twitter {

background-position: 0px -928px;

}

.flipper a.twitter:hover {

background-position: 0px -986px;

}

.flipper a.facebook {

background-position: 0px -232px;

}

.flipper a.facebook:hover {

background-position: 0px -290px;

}

.flipper a.reddit {

background-position: 0px -580px;

}

.flipper a.reddit:hover {

background-position: 0px -638px;

}

.flipper a.rss {

background-position: 0px -696px;

}

.flipper a.rss:hover {

background-position: 0px -754px;

}

.Pleaseshare{

margin:10px 0px;

color:#333333;

font-weight:bold;

font-size:20px;

font-family:sans-serif;

}

</style>

<b:if cond='data:blog.pageType == "item"'>

إن أعجبك الموضوع قم بنشره) </div>

</b:if></div>

ما هو باللون البرتقالي يمكنك تغيره بما تريد فهو لون النص.
أما الكلام باللون الأحمر يمكنك كتابة ما تريد أو تركه كما هو.
بعد ذالك قم بحفظ القالب و اذهب للمدونة لترى النتيجة.

طريقة إنشاء شريط الشبكات الإجتماعية العائم

2014-01-29T16:18:00.000+00:00

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

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

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

</body> و قم بوضع الكود الموجود بالأسفل فوقه مباشرة.

$(document).ready(function(){

$.mblSocialBar({

items: {

twitter: { url: '#', text: 'تابعني على تويتر' },

facebook: { url: '#', text: 'تابعني على الفيسبوك' },

rss: { url: '#', text: 'الخلاصات' },

google: { url: '#', text: 'تابعني على جوجل +' },

youtube: { url: '#', text: 'قناتي على اليوتيوب' },

orkut: { url: '#', text: 'تابعني على أوركيت' },

myspace: { url: '#', text: 'تابعني على مايسبيس' },

digg: { url: '#', text: 'تابعني على دييغ' },

show: 8,

position: "left",

skin: "clear"

});

</script>

لتعديل على الكود عير ما هو ملون بما يناسب.
اللون الأحمر بروابط الشبكات الإجتماعية
اللون البرتقالي غير رقم 8 لأي رقم أخر لعرض أقل لشبكات الإجتماعية
اللون الأزرق يمكنك تغييره لتحكم بموقع الإضافة
اللون البنفسجي لتغير لون الإضافة فهناك لونان لون فاتح clear و لون غامق dark غيره حسب ذوقك أو لون المدونة.

بعد التغير قم بحفظ القالب و إذهب لمعاينته على مدونتك.

لقد عدنا

2014-01-28T10:07:00.001+00:00

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

لكن إن شاء الله سأعود لتدوين و لوضع الجديد قد لا يكون عطائي كالسابق لكن سأحاول الإستمرار قدر المستطاع.

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

و لمن مارالت تواجهه مشكلة ما فلا يتردد في وضعها في تعليق أو مراسلتي على الخاص و إن شاء الله سأجيبه في أقرب وقت ممكن.

تحياتي للجميع لقد عدنا.

تكبير شعار المدونة بتقنية CSS3

2012-07-18T16:23:00.000+01:00

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

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

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

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

لنفترض أن لدينا صورة بحجم 1024px في العرض و 768px في الإرتفاع و تريد تقليل حجمها دون فقد جودتها. فإذا كنت تريد أن يكون عرض الصورة الجديدة 500px فما هي قيمة إرتفاع الصورة؟؟؟

ولكي نحصل على القيمة الصحيحة سنقوم بإجراء عملية حسابية بسيطة و معروفة، و هي لمعرفة القيمة X نضرب القيمة A في B و نقسمها على Y.

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

نقوم بضرب قيمة عرض الصورة الجديدة و هي 500 في إرتفاع الصورة الأصلية و هو 768 و النتيجة ستكون 384,000px بعد ذالك نقوم بقسمة النتيجة على عرض الصورة الأصلية و هو 1024 و النتيجة المحصل عليها ستكون 375px و هي القيمة لإرتفاع الصورة الجديدة.

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

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

- الأن توجه للوحة التحكم ثم تحرير HTML و ابحث عن الكود التالي ]]></b:skin> و ضع الكود قبله.

#header img
{ width:256px; /* عرض الصورة التي ستظهر عليه أي العرض الجديد */
height:67px; /*إرتفاع الصورة التي ستظهر عليه أي الإرتفاع الجديد */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s; }

#header img:hover
{ width:514px; /*عرض الصورة الأصلي اللذي صممته */
height:134px; /* إرتفاع الصورة الأصلي اللذي صممته */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s; }

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

و إن كنت من الأشخاص اللذين لا يحبون وضع الصور في الشعار و تريد تطبيق هذا التأثير على عنوان مدونتك فالأمر بسيط جدا، ما عليك سوى وضع الكود التالي قبل الوسم ]]></b:skin> و نتهى الأمر

#header h1
{ -moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s; }

#header h1:hover
{ font-size:80px; /*حجم الكتابة بعد مرور زر الفأرة ععليها */
color:#FF00FF; /* لون الكتابة بعد مرور زر الفأرة ععليها */
margin-left:-30px; /* نسبة الإزاحة لليسار */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s; }

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

أتمنى أن تشارك هذا الموضوع مع من تحب.

أفضل طريقة لمشاهدة الفيديو على مدونتك turn off lights

2012-04-07T14:02:00.002+00:00

بسم الله الرحمن الرحيم

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

لذا فالحل ستجده في هذا الموضوع و هو متمثل في سكريت JQuery يسمح لك بأن تحيط الفيديو بظا أسود داكن لتحجب باقي محتوى الموقع و تحصل بذالك على مشاهدة شبيه بالسنما :-) يمكنك مشاهدة مثال بالأسفل و ذالك بالضغط على كلمة “إطفاء الأنوار” .

إطفاء النور

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

1- توجه لتحرير قالب المدونة و ابحث عن الوسم </head> ثم ضع فوقه الكود التالي:

     

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <br /><script type='text/javascript'> <br />//<![CDATA[ <br />$(document).ready(function(){ <br />$("#oscuridad").css("height", $(document).height()).hide(); <br />$(".lightSwitcher").click(function(){ <br />$("#oscuridad").toggle(); <br />if ($("#oscuridad").is(":hidden")) <br />$(this).html("إطفاء النور").removeClass("turnedOff"); <br />else <br />$(this).html("تشغيل النور;).addClass("turnedOff"); <br />}); <br />}); <br />//]]> <br /></script>

2- ثم بعد ذالك إبحث عن الوسم ]]></b:skin> و أضف قبله الكود التالي:

       

   /* turn off lights <br />----------------------------------------------- */ <br />#videoLuces { <br />position:relative; <br />z-index:102; <br />} <br />#apagador { <br />max-width:640px; <br />text-align:left; <br />position:relative; <br />height:25px; <br />display:block; <br />margin: 25px 0 0 60px; <br />} <br />.lightSwitcher { <br />position:absolute; <br />z-index:101; <br />background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH7VqyUzb7I8xFhuEiRd7ER20xUQRTNFBKuyhxbYSTIE8ABdb4Y7MqXMLMBOYGSIii1jWIeZToCCRtjTHDKpHR_ZltNnAsUgXb3QakPMNTfQAEymyQrAcBU0Ey59uLk_Kg_ZyaL9SlY7c/s16/luces-on.png); <br />background-repeat:no-repeat; <br />background-position:left; <br />padding: 0 0 0 20px; <br />outline:none; <br />text-decoration:none; <br />} <br />.lightSwitcher:hover {text-decoration:underline;} <br />.turnedOff { <br />color:#ffff00 !important; <br />background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwDtaoqnnkoW7rsZwNA9Ymccih_vhohPnAPV2D6DUbub5Ev8ptfjv6RoMI53eKm8rlr5rzKnqgFfclitVA3djP6FVqJUqISB3esT8MHpQmR_zGYI4NlyYgvtO4glrcBDgVgPiOuVxmJHo/s16/luces-off.png); <br />} <br />#oscuridad { <br />background:#000; <br />opacity:0.9; <br />filter:alpha(opacity=90); <br />position:absolute; <br />left:0; <br />top:0; <br />width:100%; <br />z-index:100; }

3- و أخيرا ابحث عن الوسك </body> و أضف قبله الكود التالي:

       

  <div id='oscuridad'/>

4- الأن نأتي للخطوة الأخيرة و هي إضافة الفيديو و أعتقد أن الجميع يعرفون الطريقة. الأن بعد أن تضيف الفيديو في موضوع جديد نتجه لتبويب تحرير HTML و نضع الكود التالي بحيث يكون الفيديو بينه.

       

  <center> <div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">إطفاء النور;/a></div> <div id="videoLuces"> ...سيكون الفيديو في هذا المكان... </div> </center>

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

إن أعجبك الموضوع فأرجوا ألا تبخل علينا ب 5 ثوان من وقتك و تقوم بنشر الموضوع بين أصدقائك

إضافة جديدة على بلوغر Google +1 Button و Google+ Badge

2012-04-04T21:02:00.001+00:00

بسم الله الرحمن الرحيم

قام اليوم موقع Blogger بإضافة أداتين جديدتين لقائمة “إضافة أداة” و هي خاصة بموقع +Google و بهذه الخطوة يقوم موقع blogger التابع لشركة google العملاقة بتحسين منصة بلوغر لتتناسب مع احتياجات المستخدمين.

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

يمكنك أن تضيف هذه الأداة في العمود الجانبي للمدونة أو أسفل المدونة. يمكنك زيارة الموضوع الأصلي من هنا

إذا أعجبك الموضوع أرجوا أن تأخد من وقتك 5 ثوان لتشاركه مع أصدقائك.

لعبة السودوكو الشهيرة Sudoku

2012-04-03T13:46:00.001+00:00

بسم الله الرحمن الرحيم

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

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

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

مدونة أسرار بلوغر

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

<div style="text-align: center; margin: -8px 0px; width: 234px; background: #fff"><a style="color: #555; font-size: 60%; text-decoration: none" href="http://widget-blogs.blogspot.com/">مدونة أسرار بلوغر</a></div>

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

إذا أعجبك الموضوع أتمنى أن تمنحني 5 ثوان من وقتك و تشارك الموضوع مع أصدقائك.

قم بإرعاب أصدقائك على ال Facebook

2012-04-01T20:24:00.001+00:00

بسم الله الرحمن الرحيم

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

ملاحظة: لا يجب إستعمال هذه الطريقة مع ضعاف القلوب، ستكون أنت المسؤول عن النتائج فرجاءا إستعملها بحذر.

أثناء الدردشة مع أصدقائك على الشات، أرسل لهم الرابط بالأسفل و أخبرهم بأنها صفحة لشخص من مواليد 1947 و لا يزال على قيد الحياة.
هذا هو رابط الصفحة Alrena Roushe's Facebook Profile
قم بفتح الرابط الأن و سترى شيئ مثير جدا.

إذا أعجبك الموضوع أعطني من وقتك 5 ثوان و شاركه مع أصدقائك.

صندوق Facebook LikeBox منبثق “رائع”

2012-01-08T22:37:00.001+00:00

بسم الله الرحمن الرحيم

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

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

كيف تعمل الإضافة

هذه الإضافة تظهر لمرة واحدة عندما يقوم شخص ما بزيارة مدونك لأنها تقوم بتخزين IP الزائر في ال Cookies الخاص بالمتصفح. و بهذا فلن تزعج زوارك، تخيل أن تظهر لك هذه النافدة المنبثقة في كل صفحة تقوم بزيارتها في المدونة ستكون مزعجة أليس كذالك. لكن هناك خاصية تتحكم في ظهور الإضافة ففي الإضافة هنا ستعاود الظهور بعد مرور 30 يوم من أول زيارة و يمكن التحكمفي هذه القيمة حسب رغبتك. سأقوم بشرحها في الأسفل.

طريقة إضافة صندوق الفيس بوك

1- إدخل للوحة تحكم المدونة / تصميم / إضافة أداة / Html/Javascript

2- الأن قم بوضع الكود بالأسفل في المكان المخصص له.

<style>

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*

   User Style:
   Change the following styles to modify the appearance of ColorBox. They are
   ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
        box-shadow:0 0 15px rgba(0,0,0,0.4);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
        -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
       }
   #cboxTopLeft{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 0;}
   #cboxTopCenter{height:14px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x top left;}
   #cboxTopRight{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px 0;}
   #cboxBottomLeft{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 -32px;}
   #cboxBottomCenter{height:43px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x bottom left;}
   #cboxBottomRight{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px -32px;}
   #cboxMiddleLeft{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -175px 0;}
   #cboxMiddleRight{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -211px 0;}
   #cboxContent{background:#fff; overflow:visible;}
       #cboxLoadedContent{margin-bottom:5px;}
       #cboxLoadingOverlay{background:url(http://imgboot.com/images/cybersidh/loadingbackground.png) no-repeat center center;}
       #cboxLoadingGraphic{background:url(http://imgboot.com/images/cybersidh/loading.gif) no-repeat center center;}
       #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
       #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
       #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
       #cboxPrevious{left:0px; background-position: -51px -25px;}
       #cboxPrevious.hover{background-position:-51px 0px;}
       #cboxNext{left:27px; background-position:-75px -25px;}
       #cboxNext.hover{background-position:-75px 0px;}
       #cboxClose{right:0; background-position:-100px -25px;}
       #cboxClose.hover{background-position:-100px 0px;}
       .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
       .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
       .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
       .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/*   Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
    text-decoration:none;
}
.box-title {
   color: #F66303;
   font-size: 20px !important;
   font-weight: bold;
   margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
   color: #999;
   margin: 0;
   text-align: center;
}
#subs-container {
    padding: 35px 0 30px 0;
    position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://widget-blogs.blogspot.com">Blogger Widgets</a></p>
</div>
</div>

3- الأن قم بتغير username بإسم صفحتك على الفيس بوك. و إن واجهتك مشكلة ما قم بزيارة المواضيع التالية: حل مشكلة صندوق الفيس بوك Like Box و إضافة مربع الفيسبوك بشكل عائم و منزلق Fan Box

4- إذا أردت أن تظهر الإضافة في كل مرة بدل 30 يوم قم بمسح القيمة التالية من الكود *30 أو غيرها بعدد الأيام التي تريدها.

الأن قم بوضع ردك بالأسفل و شارك الموضوع مع أصدقائك.

إضافة صندوق معجبي تويتر Twitter Fan Box

2011-12-01T19:32:00.001+00:00

بسم الله الرحمن الرحيم

اليوم سأقدم تدوينة سريعة عن طريقة وضع صندوق لمعجبي تويتر، و هو شبه بصندوق معجبي الفيس بوك. يمكنك زيارة الموضوع من هنا إضافة مربع الفيسبوك بشكل عائم و منزلق Fan Box .

طريقة الإضافة بسيطة توجه لإضافة أداة Html/JavaScript و ضع بها الكود التالي:

<div class="textwidget">
<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox">
<script type="text/javascript">fanbox_init("إسم صفحتك");</script></div>
</div>
<style>
.FB_SERVER_IFRAME {
width: 290px !important; /* عرض الإضافة*/
height: 250px !important; /* إرتفاع الإضافة*/
}
</style>

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

يوجد صندوق بالأسفل جرب كتابة شيء ما فيه

إضافة لتبادل روابط المقالات و نشرها share links

2011-11-29T21:39:00.001+00:00

بسم الله الرحمن الرحيم

الكل يعرف مذى أهمية نشر روابط المقالات التي تقوم بكتابتها في مدونتك، فهي تقوم بالتعريف عن مدونتك للكثير من الأشخاص. لكن الأهم من ذالك هو تقديم الوسيلة السهلة لقرائك ليقوموا بنشرها.

و هذا ما سنتطرق له في هذه التدوينة إن شاء الله. هذه الإضافة تقدم لقرائك عدة خيارات ليقوموا بنشر المقالات التي يرون أنها مهمة و يجب مشاركتها مع الأخرين. فهي تقدم لهم رابط المقال الأصلي و رابط Html و رابط خاص بالمنتديات.

سيكون الأمر سهل وبسيط كل ما سيفعله القارئ هة نسخ الرابط و نشره.

يمكنك معاينة الأداة بالضغط على الزر و النزول لأسفل التدوينة.

و لتركيب الإضافة توجه إلى تصميم / تحرير Html / توسيع القالب / ثم إبحث عن الوسم <data:post.body/> و ضع الكود الموجود بالأسفل تحته مباشرة.

<b:if cond='data:blog.pageType == "item"'>
<div class='compartir-post'>
<p>إذا وجدت هذا الموضوع مفيد يمكنك مشاركته مع زوار مدونتك، أو نشره في المنتديات.</p>
<p><label for="aa-url">رابط:</label><br /><input size="80" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-url" value="<data:post.url/>" /></p><p><label for="aa-forum">رابط HTML:</label><br /><input size="80" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-forum" value="<a href=&quot;<data:post.url/>&quot;><data:post.title/></a>" /></p><p>
<label for="aa-forum">رابط للمنتديات:</label><br />
<input size="80" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-forum" value="[url=<data:post.url/>]<data:post.title/>[/url]" /></p>
</div>
</b:if>

إبحث الأن عن الوسم التالي ]]></b:skin> و ضع الكود الموجود بالأسفل فوقه تماما

* Share entries

----------------------------------------------- */
.compartir-post {
background:#EFF5FB; /* لون الخلفية*/
margin-top:30px;
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
}
.compartir-post p {
font-size:12px; /* حجم نص الرسالة*/
}
.compartir-post input {
background:#ffffff;
border: 1px solid #A4A4A4; /* حواف الخلفية*/
}

قم بحفظ التغيرات. الأداة لا تظهر إلا في داخل المواضيع.

كما يمكنك التغير في الكود الخاص بالصندوق من حيث اللون و حجم الخط و قد أشرت لذالك باللون الأخضر. و بهذا يصبح لقارئك المبتدء الوسيلة السهل ليقوم بنشر مواضيعك التي نالت إعجابه.

الأن دورك ليس بنشر المقال ولكن بوضع تعليق في السفل.

تحديث إضافة Tabbed Sidebar بمظهر جديد

2011-11-28T21:14:00.001+00:00

بسم الله الرحمن الرحيم

اليوم سنقوم بوضع موضوع أو إضافة مشابهة Tabbed Sidebar إضافة جميلة و سهلة و التي كنت قد وضعتها في أول أيام المدونة و لقد لاقت إعجاب الكثيرين. لكن للأسف، مع عدم خبرة الكثير من القراء لم يستطيعوا إضافة هذه الأداة لمدوناتهم. أخرهم كتنت الأخت “أوراق” و قد وعدتها بإضافة مماثلة و ها أنا أفي بوعدي لها و لجميع قراء مدونتي المتواضعة.

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

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

طريقة إضافة الأداة لمدونتك

1- توجه للوحة تحكم المدونة / تصميم / تحرير Html / قم بتوسيع القالب

2- قم بالبحث عن الوسم التالي ]]></b:skin> و ضع قبله الكود بالأسفل

/*---- Wordpress Style MBT Menu Tabs----*/

.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

3- إن أردت قم بتغير A46F38# باللون الموجود في مدونتك ليتناسب معها.

4- إبحث عن الوسم <div id='sidebar-wrapper'> و ضع تحته الكود بالأسفل

<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>مواضيع جديدة</a></li>
<li><a href='#widget-MBT-id2'>القائمة البريدية</a></li>
<li><a href='#widget-MBT-id3'>أخرالتعليقات</a></li>
</ul>

</div>
<div style='clear:both;'/>

5- قم بتغير كلمات ( مواضيع جديدة ، القائمة البريدية ، أخر التعليقات ) بما يناسبك.

6- الأن قم بحفظ القالب

7- الأن قم بالذهاب لعناصر الصفحة سوف تجد أنه قد ظهرت 3 إضافات قم بسحب الإضافات التي تريد إليها.

8- بعد هذه الخطوة قم بحفظ التعديلات و عاين الأداة في مدونتك.

شرح الفيديو

الأن جاء دورك لتتحفنا و تضع تعليقك في المربع الموجود بالأسفل

مربع إعلان لبلوغر مع خاصية الإغلاق Box warning

2011-11-27T19:02:00.001+00:00

بسم الله الرحمن الرحيم

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

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

و طريقة الإضافة سهلة للغاية ما عليك سوى نسخ الكود الموجود بالأسفل و لصقه في صندوق إضافة أداة الخاصة ب Html/JavaScript و إدخال بعض التعديلات عليه.

font-size:18pt;
font-weight:bold;
color:#B4045F;
text-shadow: 0px 0px 10px #BA55D3;}
</style>

<div id="aviso" style="left:300px; top:100px; padding:0;">
<div align="right" style="margin-bottom:-30px;"><b><a href="javascript:closeit()" ><font face="Arial" size="1">إغلاق</font> <img valign="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifJIUKIZ1KJihyrKttxWal9ghACty-LYJKJfDoYKqut0dpdT-NLa3fKc1vX9C6jdhic_Lve9oMw9P9jE6SBsdeR-feKe9FaQEA74xJfs3EtAJycHDsNpNZMfuBqYD1bXLTkGLLIOFLe22/" style="vertical-align:middle;"/></a></b></div>

<br/>
<fieldset class="caja-aviso">
<legend class="letrero-aviso" align="center">إعلان</legend>
... هنا قم بوضع الكلام أو الرسالة التي تريد إصالها لزوار مدونتك ...
<br/><div align="right"><a href="http://www.facebook.com/إسم صفحتك" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAeYuR9kWxs6M8jFS0jdArajACqX7S-EqSQE07rrNiZJaCZHMu39bnmk9RuNrDP-piiKTQbdJiV7pirzzfjAqWR68lUP6t4R7saWmPsBP6uXNOHfVRzXAredQwj8NTEPTS5X6O2Lw2jGrv/" width="26"/></a>
<a href="http://twitter.com/إسم حسابك" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLEAYhrDZD_llZhM2FMfp7vVaXcga315rx1emOk7vkNDKRScZjHO1wulRKNOhFOCW2Z_JFOeA__L90bs6teBA8IBT9ucZR62fSjDoT_A7FOjn7m4Q8H_dXcPUIcCVI0ghLjtiIcOJy76ht/" width="25"/></a></div>
</fieldset>

</div><div class="clear"/></div>

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

و كأخر خطوة لك في هذا الموضوع، ضع تعليقك بالأسفل.

إخفاء الإضافات عن الزوار gadget administrator

2011-11-26T20:49:00.001+00:00

بسم الله الرحمن الرحيم

كما عودتك و وعدتكم بأن أضع مواضيع حصرية لن تجدوها إلى هنا. أقوم اليوم بوضع بين يديك طريقة تمكنك من إخفاء أي إضافة في مدونتك على الزوار و لن يراها أي شخص ما عداك أنت بإعتبارك المسؤول عن المدونة.

قد تتسائل فيما ستفيدك هذه الإضافة. سأخبر بأن هناك الكثير من المدونين يكون لديهم إستفتاء مثلا و لا يريدون حذفه من المدونة بعد الإنتهاء منه أو أنك تخطط لوضع إستفتاء أو إضافة لكنك لن تنشرها إلى في وقت محدد(بعد أيام أو أسابيع). هذه الطريقة تتيح لك وضع هذه الإضافة في مدونتك دون أن يطلع عليها زوارك حتى تقرر أنت الوقت اللذي ستنشرها فيه. حتى أنت لن تكون قادرا على رأيت الإضافة ما لم تكن قد سجلت دخولك للمدونة.

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

1- تصميم / تحرير Html / توسيع قالب المدونة

2- إبحث عن إسم الإضافة (هو الموجود في Html/JavaScript)

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>

</span>
</b:includable>
</b:widget>

3- ما عليك الأن سوى إضافة السطرين باللون الأحمر لكود الأداة و حفظ القالب

قد لا تتشابه الأكواد مع المثال اللذي قدمته لذا فكل ما عليك فعله هو البحث عن الأوسم الموجودة باللون الأزرق و وضع السطرين بعدها وقبلها مباشرة.

و بهذا ستختفي الأداة عن جميع زوار مدونتك باستثنائك أنت طبعا.

الأن ضع تعليقك و انظر هل سيختفي أم لا!!!!

قائمة جانبية أنيقة و جميلة بتقنية CSS

2011-11-25T23:00:00.001+00:00

بسم الله الرحمن الرحيم

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

تعتمد هذه افضافة على تقنية CSS3 و هي فعلا جميلة يمكنك معاينة الإضافة بالظغط على الأيقونة بالأسفل.

طريقة تركيب الإضافة

1- توجه للوحة التحكم / تصميم / تحرير Html / و لا تنسى أخد نسخة من المدونة لو حدث أي خطأ يمكنك تذاركه.

2- إبحث عن الوسم ]]></b:skin> و ألصق الكود الموجود في الأسفل قبله تماما.

            
  <div dir="ltr" style="text-align: left;">/* CSS Style for Horizontal Menu - info @ http://widget-blogs.blogspot.com*/ <br />#hor { <br />list-style:none; <br />padding:0; <br />margin:0; <br />} </p> <p>#hor li { <br />float:left; <br />padding:5px; <br />} </p> <p>#hor a { <br />display:block; <br />height: 12px; <br />text-indent:-999em; <br />} </p> <p>#hor a.home { <br />width:46px; <br />background:url(vHome.gif) no-repeat 0 0; <br />} </p> <p>#hor a.download { <br />width:94px; <br />background:url(vDownload.gif) no-repeat 0 0; <br />} </p> <p>#hor a.contact { <br />width:74px; <br />background:url(vContact.gif) no-repeat 0 0; <br />} </p> <p>/* CSS Style for Vertical Menu */ </p> <p>#ver { <br />list-style:none; <br />padding:0; <br />margin:0; <br />} </p> <p>#ver li { <br />padding:2px; <br />} </p> <p>#ver li a { <br />display:block; <br />height:12px; <br />text-indent:-999em; <br />} </p> <p>#ver a.home { <br />width:47px; <br />background:url(hHome.gif) no-repeat 0 0; <br />} </p> <p>#ver a.download { <br />width:95px; <br />background:url(hDownload.gif) no-repeat 0 0; <br />} </p> <p>#ver a.contact { <br />width:74px; <br />background:url(hContact.gif) no-repeat 0 0; <br />} </p> <p>.clear { <br />clear:both; <br />} </p> <p>*{ <br />/* A universal CSS reset */ <br />margin:0; <br />padding:0; <br />} </p> <p>#navigationMenu body{ <br />font-size:14px; <br />color:#666; <br />background:#111 no-repeat; </p> <p>/* CSS3 Radial Gradients */ <br />background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); <br />background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); </p> <p>font-family:Arial, Helvetica, sans-serif; <br />} </p> <p>#navigationMenu li{ <br />list-style:none; <br />height:39px; <br />padding:2px; <br />width:40px; <br />} </p> <p>#navigationMenu span{ <br />/* Container properties */ <br />width:0; <br />left:38px; <br />padding:0; <br />position:absolute; <br />overflow:hidden; </p> <p>/* Text properties */ <br />font-family:'Myriad Pro',Arial, Helvetica, sans-serif; <br />font-size:18px; <br />font-weight:bold; <br />letter-spacing:0.6px; <br />white-space:nowrap; <br />line-height:39px; </p> <p>/* CSS3 Transition: */ <br />-webkit-transition: 0.25s; </p> <p>/* Future proofing (these do not work yet): */ <br />-moz-transition: 0.25s; <br />transition: 0.25s; <br />} </p> <p>#navigationMenu a{ <br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXFNjy4QC78lXMRzTeuAfiW4FerXQ5SXSlf2TB-SJsSCHnYt3ptqck2-cUboPwzvZmTHxsVAxfJ3NG-F-CNmCYfWq8neTtXXEWD46a-zgyXbi3JtD6v63k4rdbEtWyPfQ1Khcr3fFwIK4/s1600/navigation.jpg') no-repeat; </p> <p>height:39px; <br />width:38px; <br />display:block; <br />position:relative; <br />} </p> <p>/* General hover styles */ </p> <p>#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } <br />#navigationMenu a:hover{ <br />text-decoration:none; </p> <p>/* CSS outer glow with the box-shadow property */ <br />-moz-box-shadow:0 0 5px #9ddff5; <br />-webkit-box-shadow:0 0 5px #9ddff5; <br />box-shadow:0 0 5px #9ddff5; <br />} </p> <p>/* Green Button */ </p> <p>#navigationMenu .home { background-position:0 0;} <br />#navigationMenu .home:hover { background-position:0 -39px;} <br />#navigationMenu .home span{ <br />background-color:#7da315; <br />color:#3d4f0c; <br />text-shadow:1px 1px 0 #99bf31; <br />} </p> <p>/* Blue Button */ </p> <p>#navigationMenu .about { background-position:-38px 0;} <br />#navigationMenu .about:hover { background-position:-38px -39px;} <br />#navigationMenu .about span{ <br />background-color:#1e8bb4; <br />color:#223a44; <br />text-shadow:1px 1px 0 #44a8d0; <br />} </p> <p>/* Orange Button */ </p> <p>#navigationMenu .services { background-position:-76px 0;} <br />#navigationMenu .services:hover { background-position:-76px -39px;} <br />#navigationMenu .services span{ <br />background-color:#c86c1f; <br />color:#5a3517; <br />text-shadow:1px 1px 0 #d28344; <br />} </p> <p>/* Yellow Button */ </p> <p>#navigationMenu .portfolio { background-position:-114px 0;} <br />#navigationMenu .portfolio:hover{ background-position:-114px -39px;} <br />#navigationMenu .portfolio span{ <br />background-color:#d0a525; <br />color:#604e18; <br />text-shadow:1px 1px 0 #d8b54b; <br />} </p> <p>/* Purple Button */ </p> <p>#navigationMenu .contact { background-position:-152px 0;} <br />#navigationMenu .contact:hover { background-position:-152px -39px;} <br />#navigationMenu .contact span{ <br />background-color:#af1e83; <br />color:#460f35; <br />text-shadow:1px 1px 0 #d244a6; <br />} </p> <p>/*End menu css - info @ http://widget-blogs.blogspot.com */

3- قم بحفظ القالب الأن

4- توجه لإضافة أداة

5- ضع الأن الكود التالي

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://widget-blogs.blogspot.com/">
<span>الرئيسية</span>
</a>
</li>

<li>

<a class="about" href="http://widget-blogs.blogspot.com/p/blog-page_5332.html">
<span>عن المدون</span>
</a>
</li>

<li>
<a class="services" href="http://widget-blogs.blogspot.com/">
<span>خدمات</span>
</a>

</li>

<li>
<a class="portfolio" href="http://widget-blogs.blogspot.com/p/blog-page_6091.html">
<span>فهرس المدونة</span>
</a>
</li>

<span>إتصل بنا</span>
</a>
</li>
</ul>
</div><a href="http://widget-blogs.blogspot.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

6- قم بتغير ما هو باللون الأحمر بروابط مدونتك، و إن أردت قم بتغير ما هو باللون الأخظر بالكلمات التي تريد.

7- الأن إحفظ الأداة و اسحبها لأسفل التصميم، و قم بالمعاينة

و أخيرا قم بوضع تعليقك بالأسفل

حل مشكلة صندوق الفيس بوك Like Box

2011-11-24T23:08:00.001+00:00

بسم الله الرحمن الرحيم

في موضوع سابق كنا قد تطرقنا لإضافة صندوق المعجبين للمدونة ( إضافة مربع الفيسبوك بشكل عائم و منزلق Fan Box ) لكن ظهرة مشكلة لعدد من الإخوة و الأخوات عند تركيب الإضافة و هي عبارة عن رسالة الخطأ التالية : ( Could not retrieve id for the specified page. Please verify correct href was passed in. ) و قد كنت من بين الشخاص اللذين ظهر لهم هذا الخطأ لذالك لم أضع هذا الصندوق المهم بمدونتي.

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

لكن الأن الحل موجود بين يديك وبذون البحث و التجوال المضني بين المواقع و المنتديات الركيكة. و لكي لا أطيل عليك الحل أترككك مع الشرح.

1- إن أردت أن تضع صندوق Like Box بالشكل الجانبي المنزلق إتبع الخطوات الموجودة هنا إضافة مربع الفيسبوك بشكل عائم و منزلق Fan Box و توقف عند أخر كود اللذي ستضيف لصندوق Html/JavaScript و اتبع الخطوة التي سأشرحها في أخر الموضوع.

2- أما إن كنت تريد إضافة صندوق Like Box في القئمة الجانبية للمدونة فتابع الشرح أدناه.

* توجه للعنوان التالي رابط الإضافة

* الأن بعد أن ضغط على زر Get Code سوف تظهر لك نافدة بها كود إضافة Like Box.

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

شرح طريقة حل المشكلة

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

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

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

الأن ضع تعليقك أو إستفسارك حول الإضافة

تحديث جوجل الجديد Google Fresh

2011-11-21T21:26:00.001+00:00

بسم الله الرحمن الرحيم

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

Google Fresh أطلقة 3 نوفمبر 2011 و يتمثل عمله في أنه سيظهر النتائج الحديثة فقط أي أن المواقع التي تحتل مراتب متقدمة في محرك البحث بسبب كلمات بحث قوية و لا تقوم بتحديث محتواها ستصبح في مهب الريح و سيتم إزاحتها عن عرشها لأن مواضيعها أصبحث قديمة.

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

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

قالت جوجل انها ستأثر على %35 من نتائج البحث , هل تظن انه رقم ضئيل ؟
لعلمك ان تحديث جوجل باندا الذي جعل عرش اكبر المواقع تهتز فقط كان تأثيره %12 على النتائج , فما بالك %35 ؟!!

إضافة خاصية إقرأ المزيد Red More

2011-11-18T15:06:00.001+00:00

بسم الله الرحمن الرحيم

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

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

1- توجه إلى لوحة التحكم / تصميم / تحرير HTML / قم بتوسيع القالب و لا تنسى أخد نسخة من مدونتك

2- إبحث عن الوسم </head> و ضع فوقه الكود التالي

var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 100;

img_thumb_width = 120;

</script> <script type='text/javascript' src='http://widget-blogs-red-more.googlecode.com/files/auto_readmore_blogger.js' >

</script>

يمكنك التغير في قيم الكود إن أردت.

summary_noimg = 430; : عدد كلمات الملخص إن لم يحتوي على صورة

summary_img = 340; : عدد كلمات الملخص إذا احتوى على صورة

img_thumb_height = 100; : إرتفاع الصورة

img_thumb_width = 120; : عرض الصورة

3- قم الأن بالبحث عن الوسم <data:post.body/> و استبدله بالكود في الأسفل

<b:if cond='data:blog.pageType == "item"'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == "static_page"'> <data:post.body/>

<b:else/>

</div>

createSummaryAndThumb("summary<data:post.id/>");

</script>

<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >إقرأ المزيد </a></span>

</b:if>

4- قم بحفظ القالب و عاين النتيجة

5- و لكي تغير كلمة إقرأ المزيد بصورة قم بإستبدال الكلمة بالكود التالي

6- قم بوضع تعليقك بالأسفل

إضافة إحصائيات لمدونتك statistics Widget

2011-11-14T23:52:00.001+00:00

بسم الله الرحمن الرحيم

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

طريقة التركيب

توجه للوحة تحكم المدونة / تصميم / عناصر الصفحة / إضافة أداة / Html/JavaScript ثم قم بوضع الكود بالأسفل في المربع المخصص له.

بعد ذالك قم بحفظ القالب و انتهى الأمر.

لا تنسى تغير رابط مدونتي الموجود باللون الأحمر برابط مدونتك.

الأن قم بوضع تعليقاتك و استفساراتك بالأسفل

طريقة إزالة رسالة التسميات Status Message

2011-11-12T13:44:00.001+00:00

بسم الله الرحمن الرحيم

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

طريقة تركيب الإضافة

1- توجه للوحة تحكم المدونة

2- تصميم / تحرير Html

3- قم بتوسيع القالب لتظهر جميع الأكواد

4- قم بالبحث عن الوسم التالي ]]></b:skin> و ألصق الكود بالأسفل فوقه مباشرة

.status-msg-wrap{display:none !important;}

5- قم بحفظ القالب

هذا كل شيء الأمر في غاية البساطة بعد المعاينة ستجد الرسالة قد إختفة.

الأن قم بوضع تعليقك بالأسفل

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

2011-11-09T21:19:00.001+00:00

بسم الله الرحمن الرحيم

اليوم سنتكلم عن إضافة جميلة قد تعجب الكثيرين و هي عبارة عن إضافة “QueryLoader “LazyLoad إذا ما هي هذه الإضافة و ما هو عملها.

QueryLoader هي عبارة عن شاشة سوداء (يمكن تغيرها) فارغة تغطي كل مساحة مدونتك حتى يتم تحميل المحتوى. بمعنى أن زوارك لن يروا التحميل الفعلي للمدونة، و بذل ذالك سيشاهدون صفحة سوداء مع شريك و النبة المئوية لتحميل. و بعد أن يتم تحميل كل محتوى مدونتك تختفي هذه الشاشة.

طريقة تركيب السكريبت

1- توجه للوحة تحكم المدونة / تصميم / تحرير HTML / تم إبحث عن الوسم </head> و قم بإضافة الكود بالأسفل قبله.

2- بعد ذالك قم بالبحث عن الوسم </body> و ألصق الكود بالأسفل قبله.

QueryLoader.selectorPreload = "body"; QueryLoader.init();

</script>

3- الأن قم بالبحث عن الوسم ]]></b:skin> و ضع الكود قبله.

.QOverlay {
background-color: #000000;
z-index: 9999;
}

.QLoader {
background-color: #CCCCCC;
height: 1px;
}

.QAmt {
    color:#FF530D;
    font-size:50px;
    font-weight:bold;
    line-height:50px;
    height:50px;
    width:100px;
    margin:-60px 0 0 -50px;
}

الأن قم بحفظ القالب و تجربة القالب.

4- كما أنه باستطاعتك تغير خصائص الكود كما تريد أو يمكنك أن تتركه كما هو فهذا يرجع لك. إذا أردت أن تغير ألوان الإضافة فيجب تغير القيم في الكود الأخير الخاص بلغة CSS .

تابع الصورة بالأسفل لتستطيع فعل ذالك و تقوم بإنشاء ستايل خاص بك.

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

ضع أكوادك في المدونة بطريقة إحترافية و أنيقة Code Box

2011-11-07T20:37:00.001+00:00

بسم الله الرحمن الرحيم

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

المرحلة الأولى: إدراج صناديق الأكواد في المدونة

الأن يجب عليك إختيار نوع الصندوق اللذي ترغب به من بين هذه الخيارات الأربعة، عندما تجد الشكل اللذي يعجبك قم بلصق الكود الخاص به فوق الوسم التالي ]]></ B: skin> مباشرة.

1- الشكل الأول

الكود الخاص به

.code {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJWxniQKWI0QduK0KbJupS83CMvmr-RJjzUYZuZ0uxmxDByDWiOisco9vFa6dG2b2JPoMDsz0oMR5kv9KM7FIAQ2B2fIsaEOVq4HqOUR1iqwj1q0DDFV9TsFxitQFPw3Bg5R6OmUrJBxI/s1600/codeview1.gif) no-repeat right bottom;
border : 2px solid #eeeeee;
color : #7D7D7D;
}

2- الشكل الثاني

الكود الخاص به

.code{
margin : 15px 15px 15px 15px;
padding : 40px 10px 10px 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpIEiH-XZ3KXw9nH7Aqfoei2XkZJdOEnw0Q_ZmPX62pzqFQXQ3fSW-C6pmOHQQqLaTP4LsXiHUeFecNGklIcDbR3tFScAUCY_eHT0X3HLYqZZ1jrsG3hNhEyN5jKfpAu4SscoPg277xwc/s1600/codeview.png) no-repeat left top;
border : 3px solid #eeeeee;
color : #7D7D7D;
}

3- الشكل الثالث

الكود الخاص به

.code {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUfUYpfvfDig88q6sN6tqungknOsvqQsNCfSDheEg4xAq6odYtLIIDYyYfaExfUU_8nqBqQrwf1pjilMdYYfdP45zo4KZLazDSV3yX5kyCTgkzTWxe_A_tbvWdDod3CSpLdhsZpDgk3J0/s1600/codeview3.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #BFBFBF;
}

4- الشكل الرابع

الكود الخاص به

.code {
margin : 10px;
padding: 0px 25px 5px 20px;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOZw0JfrPAs2avvkUTl4HIWBGt8HTqLcuOGzwpmVVZY6b_1xRBpbdou_1vKyHFRAjX99ILxMGPEMCEYN1U9u8MUZ7vN63JnqIbggETUtcjh3BTcYXT2iEqQAR4mXve7weg3xiSar5e39M/s1600/codeview4.png) no-repeat top left;
font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #767675;
border: 1px solid #767675;
}

المرحلة الثانية: تخصيص صندوك الأكواد الخاص بك

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

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

اللون: خلفية الإطار الرئيسي

اللون: لون النص

اللون: لون الحدود

المرحلة الثالثة: كيف تجعل الصندوق يظهر بالشكل المطلوب

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

و هذا هو الكود الخاص بالإضافة

<div class="code"> كود الإضافات ستقوم بكتابته هنا</div>

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

6 أخطأ يجب على المدون الجديد تجنبها blogging mistakes

2011-11-05T19:55:00.001+00:00

بسم الله الرحمن الحيم

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

1- رفع الراية البيضاء: كثيرا ما يفقد المدونون الجدد صبرهم بسرعة و يتخلون عن مدوناتهم، لذا صدق أو لا تصدق أن أكثر من %80 من المدونين الجدد يتخلون عن مدوناتهم في الأشهر 6 الأولى. لذالك أعطي لنفسك الوقت و تحلى بالصبر لأن المدونة ستأخد وقتا حتى تصبح معروفة.

2- الإضافات: تجد في بعض المدونات الكثير من الإضافات المهمة و الغير مهمة، صحيح أن مدونتك تظهر بشكل جميل بها لكن هذا سيزيد عبئ التحميل عليها خاصة لأصحاب السرعات البطيئة. مما سيزعج زوارك و احتمال أن يغادروا مدونتك بدون رجعة، لذالك تخلص من الإضافات الغير مهمة و اثرك ما تحتاجه و يحتاجه زوارك هكذا ستظهر مدونتك أكثر إحترافية.

3- وضع الكثير من الإعلانات: صحيح أن الكثير منا يرغب في كسب المزيد من المال أو المزيد من الزوار فهذا أمر عادي، لكن الغير عادي أن تكون مدونتك عبارة عن ملصق للإعلانات فكثرة الإعلانات و خاصة المنبثقة منها تقوم بإزعاج زوارك و تعطي إنطباعا أنك لا تهتم بشيء أخر غير أن تقدم لم معلومات يحتاجونها. و قد تكون هذه أخر زيارة لهم لمدونتك.

4- الإنظباط: و هذا هو الأمر الأكثر خطورة على المدونين عامة و هو ما يجعلهم يتخلون عن التدوين. فإن كنت مدون مبتدئ و تنشر موضوع كل أسبوع فلا تتوقع الكثير من الزوار لأنهم لا يحبون قراءة المواضيع القديمة. إذا، على أي وثيرة يجب عليك التدوين؟ إن قمت بذالك يوميا سيكون رائع لكن 3 أو 4 مرات في الأسبوع ستكون جيدة و بهذا ستبني مدونة ناجحة.

5- الإدمان: قد يختلف مع البعض لكن الأمر حقيقي فالتدوين يشبه إدمان المخدرات. قد تجد أشخاص إنعزلوا عن العالم الخارجي بقوا مسمرين أما مدوناتهم بالساعات و الأيام. تذكر أن عليك إلتزامات تجاه أهلك و أصدقائك و صحتك … إلخ. فمن الجيد أن يكون لك هذا الشغف الكبير بالتدوين لكن يجب تحتويه فالتدوين أمر يمكن القيام به على المدى البعيد. لذا تأكد ألا يأثر على روتينك اليومي.

6- الجدال: ستتلقى الكثير من التعليقات في مدونتك و هذا أمر طبيعي، و ظمن هذه التعليقات ستجد تعليقات “غير عادية” لبعض القراء. و أعني “بغير عادية” أنها “غير عادية” فلا تقسوا في الرد عليهم و تجنب الجدال معهم فأنت الخاسر الوحيد. لأنك بذالك تبني سمعة سيئة عنك بدون أن تشعر بذالك.

أتمنى أن تستفيد من هذه الأخطاء، الأن قم بوضع تعليقك أو استفسارك بالأسفل.

إضافة الشبكات الإجتماعية بشكل جميل و جذاب Bookmarking Widget

2011-11-03T22:01:00.001+00:00

بسم الله الرحمن الرحيم

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

الإضافة هي نفسها الموجودة في مدونتي و ستجدها أسفل الموضوع، و هي تشمل أكثر من 80 زر لمواقع إجتماعية مختلفة، و لكي لا أطيل عليك في الكلام أثركك مع طريقة التركيب.

خطوات تركيب الإضافة

1- توجه للوحة تحكم المدونة

2- تصميم / تحرير Html

3- قم بتوسيع القالب لتظهر جميع الأكواد

4- قم بالبحث عن الكود التالي </head> ثم أضف الكود الموجود بالأسفل قبله

5- بعد ذالك إبحث عن الكود التالي <data:post.body/> و ضع الكود بالأسفل بعده مباشرة

<b:if cond='data:blog.pageType == "item"'> <div id='post-width-w2b' style='width:600px;'> <div class='sexy-bookmarks-bg-enjoy sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center '> <ul class='socials'> <li class='sexy-yahoomail'> <a class='external' expr:href='"http://compose.mail.yahoo.com/?Subject= " + data:post.title + "&body=Link:"+ data:post.url' rel='nofollow' title='Email this via Yahoo! Mail'/> </li> <li class='sexy-gmail'> <a class='external' expr:href='"https://mail.google.com/mail/?ui=2&view=cm&fs=1&tf=1&su=" + data:post.title + "&body=Link:" + data:post.url' rel='nofollow' title='Email this via Gmail'/> </li> <li class='sexy-twitter'> <a class='external' expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'/> </li> <li class='sexy-facebook'> <a class='external' expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'/> </li> <li class='sexy-linkedin'> <a class='external' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'/> </li> <li class='sexy-googlebuzz'> <a class='external' expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on Google Buzz'/> </li> <li class='sexy-yahoobuzz'> <a class='external' expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url + "&submitHeadline=" + data:post.title + "&submitSummary=&submitCategory=science&submitAssetType=text"' rel='nofollow' title='Buzz up!'/> </li> <li class='sexy-blogger'> <a class='external' expr:href='"http://www.blogger.com/blog_this.pyra?t&u=" + data:post.url + "&n=" + data:post.title + "&pli=1"' rel='nofollow' title='Blog this on Blogger'/> </li> <li class='sexy-googlebookmarks'> <a class='external' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Add this to Google Bookmarks'/> </li> <li class='sexy-googlereader'> <a class='external' expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcUrl=" + data:post.url + "&srcTitle=" + data:post.title + "&snippet="' rel='nofollow' title='Add this to Google Reader'/> </li> <li class='sexy-stumbleupon'> <a class='external' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'/> </li> <li class='sexy-delicious'> <a class='external' expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'/> </li> <li class='sexy-digg'> <a class='external' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'/> </li> <li class='sexy-comfeed'> <a class='external' expr:href='data:blog.homepageUrl + "feeds/" + data:post.id + "/comments/default?alt=rss"' rel='nofollow' title='Subscribe to the comments for this post?'/> </li> <li class='sexy-orkut'> <a class='external' expr:href='"http://promote.orkut.com/preview?nt=orkut.com&tt=" + data:post.title + "&du=" + data:post.url + "&cn="' rel='nofollow' title='Promote this on Orkut'/> </li> <li class='sexy-designbump'> <a class='external' expr:href='"http://designbump.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&body="' rel='nofollow' title='Bump this on DesignBump'/> </li> <li class='sexy-reddit'> <a class='external' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'/> </li> <li class='sexy-designfloat'> <a class='external' expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit this to DesignFloat'/> </li> <li class='sexy-friendfeed'> <a class='external' expr:href='"http://www.friendfeed.com/share?title=" + data:post.title + "&link=" + data:post.url ' rel='nofollow' title='Share this on FriendFeed'/> </li> <li class='sexy-zabox'> <a class='external' expr:href='"http://www.zabox.net/submit.php?url=" + data:post.url ' rel='nofollow' title='Box this on Zabox'/> </li> <li class='sexy-dzone'> <a class='external' expr:href='"http://www.dzone.com/links/add.html?url=" + data:post.url + "&title=" + data:post.title + "&description="' rel='nofollow' title='Add this to DZone'/> </li> <li class='sexy-webblend'> <a class='external' expr:href='"http://thewebblend.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&body="' rel='nofollow' title='Blend this!'/> </li> <li class='sexy-propeller'> <a class='external' expr:href='"http://www.propeller.com/submit/?url=" + data:post.url ' rel='nofollow' title='Submit this story to Propeller'/> </li> <li class='sexy-tumblr'> <a class='external' expr:href='"http://www.tumblr.com/share?v=3&u=" + data:post.url + "&t=" + data:post.title ' rel='nofollow' title='Share this on Tumblr'/> </li> <li class='sexy-squidoo'> <a class='external' expr:href='"http://www.squidoo.com/lensmaster/bookmark?" + data:post.url ' rel='nofollow' title='Add to a lense on Squidoo'/> </li> <li class='sexy-posterous'> <a class='external' expr:href='"http://posterous.com/share?linkto=" + data:post.url + "&title=" + data:post.title + "&selection="' rel='nofollow' title='Post this to Posterous'/> </li> <li class='sexy-technorati'> <a class='external' expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'/> </li> <li class='sexy-hotmail'> <a class='external' expr:href='"http://mail.live.com/?rru=compose?subject=" + data:post.title + "&body=Link: " + data:post.url ' rel='nofollow' title='Email this via Hotmail'/> </li> <li class='sexy-bebo'> <a class='external' expr:href='"http://www.bebo.com/c/share?Url=" + data:post.url + "&Title=" + data:post.title ' rel='nofollow' title='Share this on Bebo'/> </li> <li class='sexy-bitacoras'> <a class='external' expr:href='"http://bitacoras.com/anotaciones/" + data:post.url ' rel='nofollow' title='Submit this to Bitacoras'/> </li> <li class='sexy-blinklist'> <a class='external' expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=" + data:post.url + "&Title=" + data:post.title ' rel='nofollow' title='Share this on Blinklist'/> </li> <li class='sexy-100zakladok'> <a class='external' expr:href='"http://www.100zakladok.ru/save/?bmurl=" + data:post.url + "&bmtitle=" + data:post.title ' rel='nofollow' title='Add this to 100 bookmarks'/> </li> <li class='sexy-blogengage'> <a class='external' expr:href='"http://www.blogengage.com/submit.php?url=" + data:post.url ' rel='nofollow' title='Engage with this article!'/> </li> <li class='sexy-blogmarks'> <a class='external' expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Mark this on BlogMarks'/> </li> <li class='sexy-bobrdobr'> <a class='external' expr:href='"http://bobrdobr.ru/addext.html?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on BobrDobr'/> </li> <li class='sexy-bonzobox'> <a class='external' expr:href='"http://bonzobox.com/toolbar/add?pop=1&u=" + data:post.url + "&t=" + data:post.title + "&d="' rel='nofollow' title='Add this to BonzoBox'/> </li> <li class='sexy-boxnet'> <a class='external' expr:href='"https://www.box.net/api/1.0/import?url=" + data:post.url + "&name=" + data:post.title + "&description=&import_as=link"' rel='nofollow' title='Add this link to Box.net'/> </li> <li class='sexy-current'> <a class='external' expr:href='"http://current.com/clipper.htm?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Post this to Current'/> </li> <li class='sexy-diigo'> <a class='external' expr:href='"http://www.diigo.com/post?url=" + data:post.url + "&title=" + data:post.title + "&desc="' rel='nofollow' title='Post this on Diigo'/> </li> <li class='sexy-ekudos'> <a class='external' expr:href='"http://www.ekudos.nl/artikel/nieuw?url=" + data:post.url + "&title=" + data:post.title + "&desc="' rel='nofollow' title='Submit this to eKudos'/> </li> <li class='sexy-evernote'> <a class='external' expr:href='"http://www.evernote.com/clip.action?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Clip this to Evernote'/> </li> <li class='sexy-faqpal'> <a class='external' expr:href='"http://www.faqpal.com/submit?url=" + data:post.url ' rel='nofollow' title='Submit this to FAQpal'/> </li> <li class='sexy-fwisp'> <a class='external' expr:href='"http://fwisp.com/submit?url=" + data:post.url ' rel='nofollow' title='Share this on Fwisp'/> </li> <li class='sexy-globalgrind'> <a class='external' expr:href='"http://globalgrind.com/submission/submit.aspx?url=" + data:post.url + "&type=Article&title=" + data:post.title ' rel='nofollow' title='Grind this! on Global Grind'/> </li> <li class='sexy-hackernews'> <a class='external' expr:href='"http://news.ycombinator.com/submitlink?u=" + data:post.url + "&t=" + data:post.title ' rel='nofollow' title='Submit this to Hacker News'/> </li> <li class='sexy-hatena'> <a class='external' expr:href='"http://b.hatena.ne.jp/add?mode=confirm&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Bookmarks this on Hatena Bookmarks'/> </li> <li class='sexy-hyves'> <a class='external' expr:href='"http://www.hyves.nl/profilemanage/add/tips/?name=" + data:post.title + "&text=Text about this site+-+" + data:post.url + "&rating=5"' rel='nofollow' title='Share this on Hyves'/> </li> <li class='sexy-identica'> <a class='external' expr:href='"http://identi.ca//index.php?action=newnotice&status_textarea=Reading:" + data:post.title + "+-+from+" + data:post.url ' rel='nofollow' title='Post this to Identica'/> </li> <li class='sexy-izeby'> <a class='external' expr:href='"http://izeby.com/submit.php?url=" + data:post.url ' rel='nofollow' title='Add this to Izeby'/> </li> <li class='sexy-jumptags'> <a class='external' expr:href='"http://www.jumptags.com/add/?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit this link to JumpTags'/> </li> <li class='sexy-kaevur'> <a class='external' expr:href='"http://kaevur.com/submit.php?url=" + data:post.url ' rel='nofollow' title='Share this on Kaevur'/> </li> <li class='sexy-mail'> <a class='external' expr:href='"mailto:?subject=%22" + data:post.title + "%22&body=Link: " + data:post.url + " (sent via Way2blogging) "' rel='nofollow' title='Email this to a friend?'/> </li> <li class='sexy-memoryru'> <a class='external' expr:href='"http://memori.ru/link/?sm=1&u_data[url]=" + data:post.url + "&u_data[name]=" + data:post.title ' rel='nofollow' title='Add this to Memory.ru'/> </li> <li class='sexy-meneame'> <a class='external' expr:href='"http://meneame.net/submit.php?url=" + data:post.url ' rel='nofollow' title='Submit this to Meneame'/> </li> <li class='sexy-misterwong'> <a class='external' expr:href='"http://www.mister-wong.com/addurl/?bm_url=" + data:post.url + "&bm_description=" + data:post.title + "&plugin=sexybookmarks"' rel='nofollow' title='Add this to Mister Wong'/> </li> <li class='sexy-moemesto'> <a class='external' expr:href='"http://moemesto.ru/post.php?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Add this to MyPlace'/> </li> <li class='sexy-mylinkvault'> <a class='external' expr:href='"http://www.mylinkvault.com/link-page.php?u=" + data:post.url + "&n=" + data:post.title ' rel='nofollow' title='Store this link on MyLinkVault'/> </li> <li class='sexy-myspace'> <a class='external' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=" + data:post.url + "&t=" + data:post.title ' rel='nofollow' title='Post this to MySpace'/> </li> <li class='sexy-n4g'> <a class='external' expr:href='"http://www.n4g.com/tips.aspx?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit tip to N4G'/> </li> <li class='sexy-netvibes'> <a class='external' expr:href='"http://www.netvibes.com/share?title=" + data:post.title + "&url=" + data:post.url ' rel='nofollow' title='Submit this to Netvibes'/> </li> <li class='sexy-netvouz'> <a class='external' expr:href='"http://www.netvouz.com/action/submitBookmark?url=" + data:post.url + "&title=" + data:post.title + "&popup=no"' rel='nofollow' title='Submit this to Netvouz'/> </li> <li class='sexy-newsvine'> <a class='external' expr:href='"http://www.newsvine.com/_tools/seed&save?u=" + data:post.url + "&h=" + data:post.title ' rel='nofollow' title='Seed this on Newsvine'/> </li> <li class='sexy-ning'> <a class='external' expr:href='"http://bookmarks.ning.com/addItem.php?url=" + data:post.url + "&T=" + data:post.title ' rel='nofollow' title='Add this to Ning'/> </li> <li class='sexy-nujij'> <a class='external' expr:href='"http://nujij.nl/jij.lynkx?t=" + data:post.title + "&u=" + data:post.url + "&b="' rel='nofollow' title='Submit this to NUjij'/> </li> <li class='sexy-oknotizie'> <a class='external' expr:href='"http://oknotizie.virgilio.it/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on OkNotizie'/> </li> <li class='sexy-pfbuzz'> <a class='external' expr:href='"http://pfbuzz.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on PFBuzz'/> </li> <li class='sexy-pingfm'> <a class='external' expr:href='"http://ping.fm/ref/?link=" + data:post.url + "&title=" + data:post.title + "&body="' rel='nofollow' title='Ping this on Ping.fm'/> </li> <li class='sexy-plaxo'> <a class='external' expr:href='"http://www.plaxo.com/?share_link=" + data:post.url ' rel='nofollow' title='Share this on Plaxo'/> </li> <li class='sexy-plurk'> <a class='external' expr:href='"http://www.plurk.com/m?content=9+beautiful+web+forms+for+free+download+-+" + data:post.url + "&qualifier=shares"' rel='nofollow' title='Share this on Plurk'/> </li> <li class='sexy-printfriendly'> <a class='external' expr:href='"http://www.printfriendly.com/print?url=" + data:post.url ' rel='nofollow' title='Send this page to Print Friendly'/> </li> <li class='sexy-pusha'> <a class='external' expr:href='"http://www.pusha.se/posta?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Push this on Pusha'/> </li> <li class='sexy-scriptstyle'> <a class='external' expr:href='"http://scriptandstyle.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit this to Script & Style'/> </li> <li class='sexy-slashdot'> <a class='external' expr:href='"http://slashdot.org/bookmark.pl?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit this to SlashDot'/> </li> <li class='sexy-sphinn'> <a class='external' expr:href='"http://sphinn.com/index.php?c=post&m=submit&link=" + data:post.url ' rel='nofollow' title='Sphinn this on Sphinn'/> </li> <li class='sexy-springpad'> <a class='external' expr:href='"http://springpadit.com/clip.action?body=&url=" + data:post.url + "&format=microclip&title=" + data:post.title + "&isselected=true"' rel='nofollow' title='Spring this on SpringPad'/> </li> <li class='sexy-strands'> <a class='external' expr:href='"http://www.strands.com/tools/share/webpage?title=" + data:post.title + "&url=" + data:post.url ' rel='nofollow' title='Submit this to Strands'/> </li> <li class='sexy-stumpedia'> <a class='external' expr:href='"http://www.stumpedia.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Add this to Stumpedia'/> </li> <li class='sexy-techmeme'> <a class='external' expr:href='"http://twitter.com/home/?status=Tip+@Techmeme+" + data:post.url + "--" + data:post.title + "&source=Way2blogging"' rel='nofollow' title='Tip this to TechMeme'/> </li> <li class='sexy-tipd'> <a class='external' expr:href='"http://tipd.com/submit.php?url=" + data:post.url ' rel='nofollow' title='Share this on Tipd'/> </li> <li class='sexy-tomuse'> <a class='external' expr:href='"mailto:tips@tomuse.com?subject=" + data:post.title + "&body=Link: " + data:post.url ' rel='nofollow' title='Suggest this article to ToMuse'/> </li> <li class='sexy-twittley'> <a class='external' expr:href='"http://twittley.com/submit/?title=" + data:post.title + "&url=" + data:post.url + "&desc=&pcat=Technology&tags="' rel='nofollow' title='Submit this to Twittley'/> </li> <li class='sexy-viadeo'> <a class='external' expr:href='"http://www.viadeo.com/shareit/share/?url=" + data:post.url + "&title=" + data:post.title + "&urlaffiliate=31138"' rel='nofollow' title='Share this on Viadeo'/> </li> <li class='sexy-virb'> <a class='external' expr:href='"http://virb.com/share?external&v=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Virb'/> </li> <li class='sexy-wikio'> <a class='external' expr:href='"http://www.wikio.com/sharethis?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Wikio'/> </li> <li class='sexy-wykop'> <a class='external' expr:href='"http://www.wykop.pl/dodaj?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Add this to Wykop!'/> </li> <li class='sexy-xerpi'> <a class='external' expr:href='"http://www.xerpi.com/block/add_link_from_extension?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Save this to Xerpi'/> </li> <li class='sexy-yandex'> <a class='external' expr:href='"http://zakladki.yandex.ru/userarea/links/addfromfav.asp?bAddLink_x=1&lurl=" + data:post.url + "&lname=" + data:post.title ' rel='nofollow' title='Add this to Yandex.Bookmarks'/> </li> <li class='sexy-way2blogging'> <a class='external' href='http://widget-blogs.blogspot.com' rel='follow' title='Grab this Widget'></a> </li> </ul> <div class='sexy-link'> Widget for blogger by <a href='http://widget-blogs.blogspot.com/2010/12/add-sexy-auto-hide-social-bookmarking.html' rel='follow' title='Grab this Widget'>WidgetBlogs</a> </div> </div> </div> </b:if>

6- قم بتغير القيمة التالية حسب عرض مدونتك width:600px

7- قم بحفظ القالب و تمتع بالإضافة

أتمنى أن ينال الموضوع إعجابك، الأن قو بوضع تعليقك بالأسفل