حصريا | قالب مدونتي " BlueFolio " معرّب ومطوّر بجميع إضافاته

الجمعة، 30 سبتمبر 2011
10 التعليقات










 
أخيرا وبعد العديد من طلبات قالب مدونتي الحالي أقدم اليوم قالب bluefolio المعرّب والمطوّر


بجميع إضافاته وتعديلاته، وهو من أجمل قوالب بلوجر بمميزاته الرائعة وألوانه الهادئة وخفته وسلاسته



تم تصميمه من طرف Biyan | Dzignine وتم تعريبه وتطويره خصيصا للمميزين من المدونين العرب










مميزات قالب bluefolio المعرّب والمطوّر :




- قالب أنيق ومميز وخفيف جدا وسلس بألوان هادئة جميلة.



- طريقة عرض مميزة للمواضيع في الصفحة الرئيسية.



- ذو أرشفة قوية وممتازة وصديق لمحركات البحث.



- عرض الصور بتقنية الـ lightbox المتطورة.



- عرض الصفحات الخارجية في صفحات جديدة بطريقة ذكية.



- مواضيع ذات صلة بشكل جديد واحترافي مميز.



- زر (أعجبني - like) و (إرسال - send) من الفيسبوك للتدوينات.



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



- عرض المشاركات الشائعة للمدونة بطريقة مثيرة.



- قطعة ( البحث في المدونة ) رائعة واحترافية.



- منطقة تعليقات التدوينة مميزة وأنيقة جدا.



- تمييز تعليقات صاحب المدونة عن بقية التعليقات.



















______________________(  صور لقالب bluefolio   )_____________________








فضلا اضغط على الصورة لمشاهدتها بحجمها الطبيعي





فضلا اضغط على الصورة لمشاهدتها بحجمها الطبيعي





فضلا اضغط على الصورة لمشاهدتها بحجمها الطبيعي
















__________________( التعليمات وطرق تركيب الإضافات مرفقة مع ملف القالب )______________________

































لا أبيح ولا أسامح من يزيل حقوق التعريب والتطوير من القالب وأبرئ ذمتي من كل استخدام للقالب فيما لا يرضي الله





مزيد من المعلومات »

تعديلات جديدة على قالب " White Magic " المعرّب والمطوّر

4 التعليقات
 








لمستخدمي قالب  White Magic  المعرّب والمطوّر والذي تم عرضه في تدوينة سابقة بعنوان








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


كما قمت بتعديل حجم الخط في القالب والذي اشتكى منه الكثير
















مزيد من المعلومات »

حصريا | قـالب personalpress الأنيق معرّب ومطوّر بـ 5 ألوان مختلفة مع إضافات احترافيـة

الجمعة، 23 سبتمبر 2011
16 التعليقات
 








قالب personalpress الأنيق والمميز من أجمل قوالب الووردبريس المحولة إلى بلوجر


تم تحويله بواسطة صاحب مدونة bloggerzbible وتم تعريبه وتطويره ليلائم المدونين الممزين العرب








مميزات قالب personalpress المعرب والمطور :






- قالب أنيق ومميز للمدونين الباحثين عن الأناقة والتفرّد.


- متوفر بخمسة ألوان رائعة وجميلة 




- متوافق مع جميع المتصفحات
( Firefox - Google Chrome - Opera - Safari - IE8 + IE7 + IE6 - Netscape  )


- ذو أرشفة قوية وممتازة وصديق لمحركات البحث.


- خاصية تأطير الصور المصغرة في التدوينات.




- عرض الصور بتقنية الـ lightbox المتطورة.



- عرض الصفحات الخارجية في صفحات جديدة بطريقة ذكية.





- أزرار المتابعة للمواقع المفضلة ( facebook - twitter - flickr - RSS ).





- زر الانتقال إلى الأعلى بتقنية الـjquery ,





- منطقة تعليقات التدوينة مميزة وأنيقة.





- تمييز تعليقات صاحب المدونة عن بقية التعليقات.





- تخصيص صورة لأصحاب التعليقات المجهولة (غير المعرفين).












فضلا اضغط على الصورة لمشاهدتها بحجمها الطبيعي




(  منطقة التعليقات )







فضلا اضغط على الصورة لمشاهدتها بحجمها الطبيعي












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



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






<meta content='هنا ضع الكلمات الدلالية التي تخص مجال موقعك' name='keywords'/>

<meta content=' اكتب وصفا لمدونتك' name='description'/>










_____________________________





 

1- لتطبيق أحدى الألوان الخمسة المتوفر مع القالب، قم بنسخ الكود من ملف اللون الذي ترغب به



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



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



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



]]></b:skin>



ثم ألصق الكود فوقه مباشرة (أعلاه - فوقه).









_____________________________

 





2- لاستخدام خاصية (اقرأ المزيد) في تدوينات مدونتك



الخاصية متوفرة مع سكريبت بلوجر في لوحة الكتابة فقط قم بتطبيقها







_____________________________





3- لاستخدام الميزة الجميلة الخاصة بالصور وإضافة الإطار إليها




يجب أن تكون الصور المستخدمة بمقاس 175X175



ولإضافتها في تدوينتك استخدم الكود التالي من تبويب ( تحرير html ) في لوحة الكتابة بمدونتك





    <div class="thumb">

    <img src="ضع رابط الصورة المصغرة هنا" />

    <a href="ضع رابط الموضوع أو رابط الصورة المكبرة هنا"><span class="overlay"></span></a>

    </div>




_____________________________





4- لتغيير اللوجو، ستجد في ملف تحميل القالب PSD الشعار (ملف فوتوشوب قابل للتعديل عليه)




قم بتعديله أو إعادة تصميمه واحفظ العمل الخاص بك بصيغة png (لا تحفظه بصيغة jpg)



ثم قم بتحميل الصورة على إحدى مراكز تحميل الصور وانسخ رابطها



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



تصميم > تحرير html > ابحث عن الكود التالي :







 <img alt='logo' id='logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4cGvkG3qaRmlmXh4UjrvVaw8c6Xmy5e4giQJxO-3ICEDxAvnCkMHCiyPt5pBYEvZpTYvJmmwsTIjohQ0PoCfmREXFL-k__VHLyMa2s0jpmzlne7tl0u9IjgyD8WiKNCmGvVTzMQRjpjU/s1600/logo.png'/></a>





 


وغير رابط الصورة المستخدمة برابط الصورة الخاصة بك



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4cGvkG3qaRmlmXh4UjrvVaw8c6Xmy5e4giQJxO-3ICEDxAvnCkMHCiyPt5pBYEvZpTYvJmmwsTIjohQ0PoCfmREXFL-k__VHLyMa2s0jpmzlne7tl0u9IjgyD8WiKNCmGvVTzMQRjpjU/s1600/logo.png










 

_____________________________





5- لتغيير حسابات المواقع الاجتماعية في القالب توجه في مدونتك إلى :




تصميم > تحرير html > ابحث عن الكود التالي :





<a href='https://twitter.com/omnidal' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXhmcPykmBYx1DSY7bxTmjotGbDoFm5A8lbUyrW7Q75GNf_zFpOF0FQvHubo-B8Y8sYWk8lenmLD2dYwbLnBj-NU9xTO4PaMCmWJ_kqxaRM0S2hhGCFE0Mmsx3W7TfTVrcYv4l4IdODfM/s1600/twtr-OMNIDAL.png'/></a>

            <a href='https://www.facebook.com/omnidal' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkkytP3ohgAqvslklrL0EYRAG5YPXmAA3OSn4RKnXRC9nKdk5rFrgiH5EwiL_mYS2xYX-VerUQsaiA9b9ZASO-ONpFAA23drXECVRPwP4H0bEBFZoZjU9AEkOKlP2yp6-rR7WSJz0Rbm0/s1600/FB-OMNIDAL.png'/></a>

            <a href='http://www.flickr.com/photos/a_omnidal' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia33fwUQoyPtVMULtLeX3KfDz6bGdRUf1bI2HxrCI9N8eeTfArdNqCfjpYnToSSxWH0df9UnXpfRZdY1pR06uQwK4Jxpv092oJDgciGP99pLIIYl0FH2z20ziAH-lGDT2sVlvQIsRIOTg/s1600/flickr-omnidal.png'/></a>

                        <a href='https://www.blogger.com/profile/04653522387469624122' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-FHbc68hyphenhyphenwWtQDu-3N4BytwR21LPzVoLIu9h6LNQ0fGQHhUxIPtIerJpD1xhWrJ2E4Ek3Hw28sutpkYdQJHKa6wXw9E3Ng5YB4qbaLeeCkIvGDw8bOLrVcsxKEitWLVU2IUKut-43GWY/s1600/RSS-OMNIDAL.png'/></a>










وغير روابط حساباتي بروابطك الخاصة ( لفيسبوك - تويتر - فليكر - خلاصة المدونة ) .





 

_____________________________





6- لتغيير القائمة العلوية في المدونة بما يناسبك مدونتك، قم بالبحث عن الكود السابق في تحرير html القالب :








<a href='http://a-omnidal.blogspot.com/2005/08/blog-post.html'><strong>للتواصل</strong><span>للتواصل عبر البريد الإلكتروني</span></a>

</li>



<li><a href='http://a-omnidal.blogspot.com/2002/06/blog-post.html'><strong>الفهرس</strong><span>تصفح جميع احتوت المدونة</span></a>

</li>





<li><a href='http://a-omnidal.blogspot.com/2001/06/picasa.html'><strong>أعمالي</strong><span>شاهد معرض أعمالي البسيط</span></a>

</li>



<li><a href='http://a-omnidal.blogspot.com/'><strong>الأقسام</strong><span>تصفح أقسام المدونة ومواضيعها </span></a>

</li>



<li><a href='http://omnidal-personalpress.blogspot.com/'><strong>الرئيسية</strong><span>العودة إلى الصفحة الرئيسية</span></a>

</li>



<li><a href='http://omnidal-blog.blogspot.com/'><strong>الواجهة</strong><span>العودة إلى واجهة دخول المدونة</span></a></li>










وغير الكلمات العربية بما ترغب به، واستبدل الروابط الخاصة بمدونتي برابط القسم المناسب للتسمية















_____________________________







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




<div class='clear'/>


لأن القالب الأصلي يواجه مشكلة تداخل الصور في التدوينة وجب التنويه لهذه الطريقة





وهذه تدوينة كتجربة تضم عددا من الصور ( تجربة الصور المتعددة في قالب personalpress )









تنبيه آخر: بالنسبة للتاريخ الظاهر يسار كل تدوينة فيلزم ضبط الإعدادات الخاصة به كالتالي :


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


إعدادات > التنسيق > تنسيق الطابع الزمني > الاثنين، سبتمبر، 26، 2011


















______________( إضافات القالب تجدها مرفقة في ملف القالب مع طريقة التركيب )______________















الشكر الجزيل والوافر  للأخ محمد سامي | مدونة سامكو والأخ سفيان المغربي | مدونة علمني






















لا أبيح ولا أسمح إزالة حقوق التعريب والتطوير من القالب سواء الحقوق النصية أو الشعار



وأبرئ ذمتي من كل استخدام للقالب فيما لا يرضي الله








( تم تحديث رابط تحميل القالب في : 26-09-2011 )




مزيد من المعلومات »

تنويه هام | اختراق مدونة سامكو | إخلاء مسؤولية

الجمعة، 16 سبتمبر 2011
2 التعليقات






تم اختراق الايميل الخاص بـمدونة سامكو والاستيلاء على كل الحسابات المتعلقة بالحساب


ومنها مدونة سامكو وأدسنس والبريد الخاص به


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



فصاحب المدونة الأخ محمد سامي يخلي مسؤوليته عن كل ما تقدمه مدونة سامكو فى الوقت الحالى 


وحتى تاريخ اخر لا يعمله الا الله






أقر بذلك صاحب مدونة سامكو / محمد سامى



www.samco-b.com




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


samco_group2@hotmail.com




مزيد من المعلومات »

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

الثلاثاء، 13 سبتمبر 2011
4 التعليقات










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


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




_________________


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






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



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



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







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



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



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



تصميم > عناصر الصفحة > إضافة أداة > أداة 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/AVvXsEgkkytP3ohgAqvslklrL0EYRAG5YPXmAA3OSn4RKnXRC9nKdk5rFrgiH5EwiL_mYS2xYX-VerUQsaiA9b9ZASO-ONpFAA23drXECVRPwP4H0bEBFZoZjU9AEkOKlP2yp6-rR7WSJz0Rbm0/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/AVvXsEhXhmcPykmBYx1DSY7bxTmjotGbDoFm5A8lbUyrW7Q75GNf_zFpOF0FQvHubo-B8Y8sYWk8lenmLD2dYwbLnBj-NU9xTO4PaMCmWJ_kqxaRM0S2hhGCFE0Mmsx3W7TfTVrcYv4l4IdODfM/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/AVvXsEi-FHbc68hyphenhyphenwWtQDu-3N4BytwR21LPzVoLIu9h6LNQ0fGQHhUxIPtIerJpD1xhWrJ2E4Ek3Hw28sutpkYdQJHKa6wXw9E3Ng5YB4qbaLeeCkIvGDw8bOLrVcsxKEitWLVU2IUKut-43GWY/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/AVvXsEjoHREHGz3cHKCAyctgzeeVcuxY3qNvO0rAv40M6cDXyqZZscifljgsnd6yVf6FetGm9D90nf1hxEREXtpNMMGuos7NaC7QapRI84nObB1o9-qTmZh4OGh2dtiEXaybk0F6Yx8_MYC3nUw/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/AVvXsEgHU4a4rHnqNyqK4Us3JXY4AHZl1ZPG8211gvuYtLlDq91pRyo5vLd3Wxv3ldNjIma__KWajoWPV3wagXXycVZfpsvOS2FaujQ6O9QQ7CFSxf8WH2oAjMVzM2ci16QUYGSPyvVJcLM_1xU/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/AVvXsEiUqttC_FU49K1GinKBlKMQaawonOs8LvOtHsxTzdPrYuCwO-rjwj4ExgnF0-8F2IqX4Tn5sHP88F8UAOxWuyAZzFKt8bPgupbSUSl4ujQJ8a5kqKn0h0iY87LWCYHJtCZuwpHYtU7AoVM/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/AVvXsEggV6NJEIYgMeolKUntwct9s3fbh5XiSugcI5grgWxVbtOyyu5nSNMzvd1K1IwcdOBe8s4JH6ty_3qB4sZxArH8d_BQKFox1Hv9JASfYA-ElbMQ-ZaELORpzwWboFtNwdymmBfK-0p-Qx4l/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/AVvXsEhuUm4S1IjGNEKiclKdyiFmBYcxtFSiwIDD6ABL877b1oy3_LwzRjaC3tvNZot1bPXnJfEi3YTO__TLObXbXdwl2X7DoHvOewrVfCbs_VxFK6d8l0eHpRTCBbwbG0oUIo1pE2CYzR3f1jw3/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>
















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







مزيد من المعلومات »

أتُوقْ لِصبآحْ يجِعُلنَيْ ألتِقِ بكِ ،، مِنْ غيرِ ميعآدِ

2 التعليقات








أتُوقْ لِصبآحْ يجِعُلنَيْ التِقِ بكِ..



مِنْ غيرِ ميعآدِ..



وكآنهُ الِلقآءْ الِاولَ









نقآء ء.ء








مزيد من المعلومات »

التدوينـات المصغرة بأشكال مخصصة | تصغيرات مدونة أبو إياد ومدونة ذؤيب

السبت، 10 سبتمبر 2011
0 التعليقات








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





نقدم اليوم أكواد مصغرات أشهر المدونات العربية وهي مدونة المصنع ومدونة أبو إياد ومدونة ذؤيب


_______________________________




قم بالبحث عن الوسم التالي


]]></b:skin>
 

(إذا رغبت في أن تظهر التدوينات المصغرة لديك مثل مصغرات مدونة المصنع)



للمعاينة الحية للتدوينات المصغرة التي بهذه الصورة اضغط هنا


أضف قبل الوسم السابق مباشرة هذا الكود




/* MINIPOST */

.minipost {

    background: #FFF6C7 url(http://lh4.ggpht.com/_dInhsEHH_98/S9XNkXGx8rI/AAAAAAAAACY/EtZcz9T63Cw/s00/bg-minipost.gif) no-repeat 100% 2px;

    padding: 15px 95px 15px 15px;

    border:1px solid #FFF6C7;

    margin-bottom:20px;

    position:relative;

}

.minipost .entry {

    -webkit-text-shadow: #FFFBD8 0 1px 0px;

    text-shadow: #FFFBD8 0 1px 0px;

    text-align:justify;

    font: bold 15px/1.2 Arial, sans-serif;

    color:#515151;

}

.minipost .entry a { color:#B40000; }

.minipost .entry a:hover { color:#3A3A3A; }

.minipost .entry, .minipost .entry p { margin-bottom: 15px; }

.minipost p.meta {

    margin:-10px 0 0;

    font-weight:normal;

    font-size: 12px;

    color:#B9B197;

}

.minipost p.meta a { color:#B9B197;}

.minipost p.meta a:hover { color:#807970;}




(أما إذا رغبت في أن تظهر التدوينات المصغرة لديك مثل مصغرات مدونة أبو إياد )



للمعاينة الحية للتدوينات المصغرة التي بهذه الصورة اضغط هنا


فأضف هذا الكود قبل الوسم السابق مباشرة




.minipost {

-moz-border-radius: 5px 5px 5px 5px;

   background: #CFE1ED url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh3-z9KAuAXGOLinculSLochb3wP9kH6XVg_DCgkHQDXAJ6BLUxeXDE47BPzeYcl5mOqilj20lxjDKCSRA6XigVwVE0VxFd7kDgF3tf6bQY_jXWrHuLCe9ji3aiF4pvkbDCpfkd_CYdFRJ/s1600/lam7a.png") ;

    height: 1%;

    padding: 20px;

border-left:1px solid #1D5C88;

    border-top:1px solid #1D5C88;

        border-right: 1px solid #1D5C88;

        border-bottom: 1px solid #1D5C88;

margin:.5em 0 1.5em;

border-bottom:0px dotted $bordercolor;

padding-bottom:1.5em;

padding-right:7px;

padding-left:7px;

}





.minipost .entry {

    -webkit-text-shadow: #FFFFFF 0 1px 0px;

    text-shadow: #FFFFFF 0 1px 0px;

    text-align: right;

    font: 15px Tahoma, Arial, sans-serif;

    color:#4C4C4C;

}





.minipost img {

    border: 1px solid #245CAA;

    float: right;

    margin-left: 1em;

}

.minipost h3 {

    color: #666;

    font-size: 1.2em;

    margin-bottom: 5px;

    margin-top: 2;

}

.minipost p {

    color: #54524F;

    font-size: 15px;

    margin-bottom: 10px;

    margin-top: 0;

}

.minipost blockquote {

  background: url(http://lh6.ggpht.com/_4_wf1DKMvX4/TMWm472NmPI/AAAAAAAABmw/aioU52gp7Zw/box-bgr.gif) #ffffff repeat-x top;

    border-left:1px solid #CFCFCF;

    border-top:1px solid #CFCFCF;

        border-right: 1px solid #CFCFCF;

        border-bottom: 1px solid #CFCFCF;

    margin:10px;

    padding:10px

}


(وإذا رغبت في أن تظهر التدوينات المصغرة لديك مثل مصغرات مدونة ذؤيب )


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







/* blogger minipost */

.minipost {

background: #F5F5F5;

padding: 15px;

border: 1px solid #DDDDDD;

margin-bottom: 20px;

padding-bottom: 30px;

font: 12px tahoma;

text-align: justify;

line-height:1.5em;

}

.minipost img {

    float: right;

    margin-left: 1em;

}

.minipost div.title2 {

font:1.3em arial;

font-weight:bold;

letter-spacing:0em;

display:block;

padding-bottom:5px;

text-shadow: 0px 2pt 0px #ECECEC;

}

.minipost div.entry {color:#333333;}

.minipost p.meta {

font: 12px tahoma;

}
















_______________________________


قم بحفظ التغييرات على قالبك واستمتع بتطبيق المصغرات التدوينية الجديدة بمدونتك  ◕‿◕

_______________________________




















مزيد من المعلومات »

شرح مفصل | التدوين السريع المصغر | اجعل بلوجر ينافس تويتر

الأربعاء، 17 أغسطس 2011
9 التعليقات




نعرف جميعاً ما هو التدوين المصغر المنتشر حالياً والذى عُرف مع إنطلاق خدمة تويتر رسمياً



وهو عبارة عن تحديثات كتابية تصف الأحداث التي تعاصرها في يومك علي مدار الساعة





فإذا كان التدوين من خلال تويتر هو للإجابة على السؤال ’’ماذا تفعل الان؟‘‘ فالتدوين المصغر داخل blogger



هو لكتابة أفكار صغيرة وتلميحات وأسئلة لا تحتمل كتابة مواضيع طويلة ونقاشات لنفس التخصص



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





يبقى القول أن التدوين المصغر داخل blogger ليست ميزة جاهزة مضافة داخل القالب



بل هي طريقة جديدة نتعلمها سوياً عن طريق تخصيص القالب بطريقة احترافية





وبالإعتماد على أدوات الشرط المختلفة لتحديد تصنيف معين " Label "



تظهر داخله تلك التدوينات دون غيره









_______________________________



خطوات تطبيق هذه الميزة الاحترافية في مدونتك

_______________________________







توجه إلى : تصميم > تحرير HTML > أخذ نسخة احتياطية > توسيع القالب > ابحث عن التالي





<b:includable id='post' var='post'>




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



<b:includable id='minipost' var='post'> <b:if cond='data:blog.pageType != &quot;item&quot;'>  <div class='minipost'><a expr:name='data:post.id'/>     <div class='entry'><data:post.body/></div>     <p class='meta'><a expr:href='data:post.url'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a><b:if cond='data:post.allowComments'> /<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'> أضف تعليق<b:else/><b:if cond='data:post.numComments == 1'> تعليق واحد<b:else/><b:if cond='data:post.numComments == 2'> تعليقان<b:else/><b><data:post.numComments/></b> تعليق</b:if></b:if></b:if>…</a><b:else/></b:if><b:include data='post' name='postQuickEdit'/></p> </div>  <b:else/>  <div class='minipost'><a expr:name='data:post.id'/>     <h2 class='title'><a expr:href='data:post.url'><data:post.title/></a></h2>     <div class='entry'><data:post.body/></div>     <p class='meta'><a expr:href='data:post.url'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a><b:if cond='data:post.allowComments'> /<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'> أضف تعليق<b:else/><b:if cond='data:post.numComments == 1'> تعليق واحد<b:else/><b:if cond='data:post.numComments == 2'> تعليقان<b:else/><b><data:post.numComments/></b> تعليق</b:if></b:if></b:if>…</a><b:else/></b:if><b:include data='post' name='postQuickEdit'/></p> </div>  </b:if> </b:includable>


_______________________________



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



<b:include data='post' name='post'/>




واستبدله بالكود التالي



<b:if cond='data:post.labels'>  <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == &quot;true&quot;'> <b:if cond='data:label.name != &quot;minipost&quot;'>  <b:include data='post' name='post'/>  <b:else/>  <b:include data='post' name='minipost'/>  </b:if> </b:if> </b:loop>  <b:else/>  <b:include data='post' name='post'/>  </b:if>




_______________________________



الآن قم بالبحث عن الوسم التالي



]]></b:skin>


(إذا رغبت في أن تظهر التدوينات المصغرة لديك مثل هذه الصور)






للمعاينة الحية للتدوينات المصغرة التي بهذه الصورة اضغط هنا




أضف قبل الوسم السابق مباشرة هذا الكود



/* MINIPOST */

.minipost {

    background: #FFF6C7 url(http://lh4.ggpht.com/_dInhsEHH_98/S9XNkXGx8rI/AAAAAAAAACY/EtZcz9T63Cw/s00/bg-minipost.gif) no-repeat 100% 2px;

    padding: 15px 95px 15px 15px;

    border:1px solid #FFF6C7;

    margin-bottom:20px;

    position:relative;

}

.minipost .entry {

    -webkit-text-shadow: #FFFBD8 0 1px 0px;

    text-shadow: #FFFBD8 0 1px 0px;

    text-align:justify;

    font: bold 15px/1.2 Arial, sans-serif;

    color:#515151;

}

.minipost .entry a { color:#B40000; }

.minipost .entry a:hover { color:#3A3A3A; }

.minipost .entry, .minipost .entry p { margin-bottom: 15px; }

.minipost p.meta {

    margin:-10px 0 0;

    font-weight:normal;

    font-size: 12px;

    color:#B9B197;

}

.minipost p.meta a { color:#B9B197;}

.minipost p.meta a:hover { color:#807970;}








(أما إذا رغبت في أن تظهر التدوينات المصغرة لديك مثل هذه الصورة - مصغرات مدونة أبو إياد )




للمعاينة الحية للتدوينات المصغرة التي بهذه الصورة اضغط هنا




فأضف هذا الكود قبل الوسم السابق مباشرة



.minipost {

-moz-border-radius: 5px 5px 5px 5px;

   background: #CFE1ED url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh3-z9KAuAXGOLinculSLochb3wP9kH6XVg_DCgkHQDXAJ6BLUxeXDE47BPzeYcl5mOqilj20lxjDKCSRA6XigVwVE0VxFd7kDgF3tf6bQY_jXWrHuLCe9ji3aiF4pvkbDCpfkd_CYdFRJ/s1600/lam7a.png") ;

    height: 1%;

    padding: 20px;

border-left:1px solid #1D5C88;

    border-top:1px solid #1D5C88;

        border-right: 1px solid #1D5C88;

        border-bottom: 1px solid #1D5C88;

margin:.5em 0 1.5em;

border-bottom:0px dotted $bordercolor;

padding-bottom:1.5em;

padding-right:7px;

padding-left:7px;

}



.minipost .entry {

    -webkit-text-shadow: #FFFFFF 0 1px 0px;

    text-shadow: #FFFFFF 0 1px 0px;

    text-align: right;

    font: 15px Tahoma, Arial, sans-serif;

    color:#4C4C4C;

}



.minipost img {

    border: 1px solid #245CAA;

    float: right;

    margin-left: 1em;

}

.minipost h3 {

    color: #666;

    font-size: 1.2em;

    margin-bottom: 5px;

    margin-top: 2;

}

.minipost p {

    color: #54524F;

    font-size: 15px;

    margin-bottom: 10px;

    margin-top: 0;

}

.minipost blockquote {

  background: url(http://lh6.ggpht.com/_4_wf1DKMvX4/TMWm472NmPI/AAAAAAAABmw/aioU52gp7Zw/box-bgr.gif) #ffffff repeat-x top;

    border-left:1px solid #CFCFCF;

    border-top:1px solid #CFCFCF;

        border-right: 1px solid #CFCFCF;

        border-bottom: 1px solid #CFCFCF;

    margin:10px;

    padding:10px

}


(أو إذا رغبت في أن تظهر التدوينات المصغرة لديك مثل هذه الصورة - مصغرات مدونة ذؤيب )



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







/* blogger minipost */

.minipost {

background: #F5F5F5;

padding: 15px;

border: 1px solid #DDDDDD;

margin-bottom: 20px;

padding-bottom: 30px;

font: 12px tahoma;

text-align: justify;

line-height:1.5em;

}

.minipost img {

    float: right;

    margin-left: 1em;

}

.minipost div.title2 {

font:1.3em arial;

font-weight:bold;

letter-spacing:0em;

display:block;

padding-bottom:5px;

text-shadow: 0px 2pt 0px #ECECEC;

}

.minipost div.entry {color:#333333;}

.minipost p.meta {

font: 12px tahoma;

}








_______________________________



قم بحفظ التغييرات التي أحدثتها على قالبك

_______________________________







جرّب كتابة تدوينة سريعة مصغرة بطريقة عادية جدا كما تكتب أي تدوينة في بلوجر



لكن قبل نشر هذه التدوينة قم بإضافة هذه التسمية "
minipost" في المكان المخصص لذلك





أي أنك قبل نشر التدوينة المصغرة يجب عليك كتابة minipost بجانب خانة "التسميات" - كما بالصورة







انشر تدوينك المصغرة الآن وعاينها في مدونتك ..!!




_______________________________





الآن ليس عليك سوى تخصيص هذه الميزة الاحترافية بما يناسب مدونتك



وذلك بالعودة إلى : تصميم > تحرير html > توسيع القالب > ابحث عن التالي (لتغيير التسمية
minipost بما يناسبك)



<b:if cond='data:label.name != &quot;minipost&quot;'>




ثم غّير " minipost " في الكود بالتسمية التي تريدها







_______________________________



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






_______________________________
















تم بحمد الله  ◕‿◕





مزيد من المعلومات »
 

لتحميل هذا القالب ..~

يمكنك تحميل قالب Focus Point المعرب والمطور مع إضافاته الاحترافية عبر مدونة أسماء || أم نضال ||