مدونة أسماء || أم نضال || قالب bluefolio: BLOGGER

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

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

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

_________________

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

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

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

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

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

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

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

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

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

<div class="flt-wdt">

<style>#floatingbookmarks {

right:25px;

top:40px;

margin-top:10px;

position:fixed;

width:40px;

}

#floatingbookmarks .float {margin:7px}

.FBConnectButton_Text

{

font-size: 8px;

padding:2px 4px 3px !important;

}

</style>

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

<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/AVvXsEg2oM2SFdb_vqg2IwpXKwRuU6MhZQN9D_AjElDWSwA2y2TmjjvOydx6RrdR8zTjSBcJkkOy6dRKKgykOJ0Jk8jwuuwgpguQMn3jQasCNQTIwLjBO64G92QgJAnXvSUa5z33TStgGkrDS5E/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/AVvXsEiRnG1ZcPRtSNKqpl7OGVl9FnP_AXKo37wzNnqlwunqSNlCcXRXOIgpNfJ7jq9x-b8WK8XO1VD69FOP5vaON-OWHRx1WhndOUz3TbKKpBSbEMxblgWE9aWB25AEjTQSavXbxKqaH7t42Uo/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/AVvXsEiuBVMU9SfjRLA_-jTbx6DAezTJl6erIGQL6_HwmQQKAtpMypnqzYX-p9Xg1DkCiE4ZS2JxMhtvqaQMJid0Hgn9DocVivG0tI88gC_Un5xF8TXXV8QLAwmlsgFr6oMyWW8F_zzVHmCNInM/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/AVvXsEiUTB28_dMFth5YyKoA_QrRvlC_zvX7Go-XaLc34dZXCHpk03p5Ffex-x4se-AX3q5mCXydQiqgepI_I9L0ZkxckY0NJS6s4bT07pKaYv_ZE2Y0iLY4J8BHjbpx4gA7C_3jh1rvqpiCxEw/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/AVvXsEi-eu4c5UQpHaqT-MyAticVZ5zaxfwhX1zIEpDW-2edxShrfQJ0iEBSiVdsCbaefoUBmmTBekvT2QEGqVG3VoeL8v_eNUSFtCjYhFeg1K4be2hCJR0LT_w7mBlMRk8lxpfmMplcOsawkeM/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/AVvXsEgK8ZItU3fuS_Dc88n5q7HW8CnU8MZ8zkQEnWx5eY29S6zQ5b_jYZ9OMdR8Io3xFWMk2yBUXFxezWXdH_J4h0DekuNyXs12BF1apNaUKWxAArWP5bQHK4NfZ65RR1rgdBryAFMzrXQdcaI/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>   <a rel="nofollow" target="_blank" href="هنا رابط المدونة الأولى"> <img src="هنا رابط صورة البنر الخاص بالمدونة الأولى" border="0" alt="" /></a>

  <td nowrap>   <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>   <a rel="nofollow" target="_blank" href="هنا رابط المدونة الثالثة"> <img src="هنا رابط صورة البنر الخاص بالمدونة الثالثة" border="0" alt="" /></a>

_________________

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

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

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

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

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

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

]]></b:skin>

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

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

border:5px solid #89C9E5;

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

border:5px solid #67ABC2;

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

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

_________________

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

_____________

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

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

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

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

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

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

_____________

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

كن من متابعي المدونة

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

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

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

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

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

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

___________________

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

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

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

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

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

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

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

______________

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

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

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

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

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

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

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

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

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

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

_________________

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

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

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

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

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

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

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

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

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

السبت، 10 سبتمبر 2011

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

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

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

_______________________________

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

]]></b:skin>

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

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

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

/* MINIPOST */

.minipost {

    background: #FFF6C7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGgZJHJSVMq7Yvk49WtrSWI84ZkH7nlDvu4tMSqspAlutVLB9KUoI2x3hQ_yOsW-aMBlpzKD69c3_3SYjJL0o-oDNIFn2yBrHmbi22K3b3Gyo1EvMcwKSF2pakNPwV8Xrrr1oTV34-IEc2/s0/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/AVvXsEg8bSZX_8c7Nb_226i-C-lKwM_zGxqncVdBPVTThD79OLeeqe7VeTmAYLfyuOjyV7valHaypTUSuR5h3pdHt3mXg4U70Vi9bbfy6yfi1DQaaWBWLF200zOBSUQvxsb8kDKX5ICD4pM0BcxO/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJljydoMYFsuwrz3vAIMHyzG3XCH2voIP91AFm6Jqr7PYtS5_BFj6nNJfjeWLyj0qeDdw_as1vviu9eRl5V-XQquVTWErx23mXrtLgAlFUsyPRGAXVp2BFmgfxWjLbqLKabzdSy-RBeao/) #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

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

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

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

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

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

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

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

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

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

_______________________________

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

_______________________________

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

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

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

<b:includable id='minipost' var='post'> <b:if cond='data:blog.pageType != "item"'> <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 == "true"'> <b:if cond='data:label.name != "minipost"'> <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 بجانب خانة "التسميات" - كما بالصورة

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

_______________________________

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

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

<b:if cond='data:label.name != "minipost"'>

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

_______________________________

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

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

_______________________________

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

( طريقة التركيب منقولة من مدونة المصنع )

الجمعة، 12 أغسطس 2011

_________________________

طريقة إضافة هذه الأداة الاحترافية تحتاج لتركيز كبير .. فأعيروني انتباهكم قليلا بارك الله فيكم ^_^"

_________________________

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

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

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

_______________________________

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

شرح مفصل | لوحة تحكم احترافية لمدونات بلوجر | لوحة مدونة أبو إياد

_______________________________

( الشرح منقول من مدونة الفضاء التكنلوجي ومدونة أبو إياد )

الاثنين، 8 أغسطس 2011

_____________( كيف أصمم واجهة احترافية لمدونتي )____________

( شاهد واجهة مدونتي كمعاينة )

طريقة عمل واجهة لمدونات بلوجر سهلة جدا

أولا عليك إنشاء مدونة جديدة في بلوجر (حبذا لو كانت بنفس حسابك الذي تستخدمه)

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

تصميم > تحرير html > الرجوع إلى النموذج القديم (تجده أسفل الصفحة)

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

سيظهر لك الآن صندوق أكواد شبيه بالصندوق القديم لكنك ستلاحظ غياب بعض العناصر التي تعودنا عليها

مثل ( توسيع القالب - تنزيل نسخة احتياطية - عناصر الصفحة ... )

___________________________

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

حصريا | صمم واجهة احترافية لمدونتك مثل المواقع

_______________________________

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

( طريقة تركيب الكود منقولة من موضوع الأخ مجتبي سامر من منتدى عرب بلوجر )

الثلاثاء، 2 أغسطس 2011

عادة، جميع الأدوات التي يتم إدراجها في المدونة تظهر على الصفحة الرئيسية وكذلك على جميع صفحات المدونة

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

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

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

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

بدون إطالة .. ننتقل إلى الشرح

_______________________________

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

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

_______________________________