شرح تغيير نوع الخط ولونه في قوالب بلوجر

هذه التدوينة لتظهر لك كيفية  تحرير القالب الافتراضي الخط واللون يدويا، وأنا أريد أن أقول أن يتم ترميز القوالب وتعديلها بيدك أفضل .  وبهذه الطريقة يمكنك تحرير الخط واللون من خلال لوحة لوحة التحكم. [تخطيط> الخط والألوان]
الآن دعونا شرح كيف يمكنك تحرير الألوان والخط المباشر من قالب المصدر :

أولا تغيير لون الخط

لابد من أخذ نسخة حتياطية من القالب

• التخطيط > تحرير ال HTML
• ثم ابحث  [CTRL+F] عن
  
  

  body {

  بعد أن تعثر على الكلمة سترى كلمة 

• color:#333333

•  هذا لون الخط لقالبك غيره بما تريد .
• ثم احفظ القالب .

ثانيا تغيير نوع الخط 

لابد من أخذ نسخة حتياطية من القالب

• التخطيط > تحرير ال HTML
•  ثم ابحث  [CTRL+F] عن #outer-wrapper {

•  بعد ذلك سترى أي من الكلمتين الآتيتين font: 14px Arial; or font-family:Arial;  وهذه الكيمة ستعتمد على قالبك الشخصي حيث تختلف من قالب لآخر.

• غير نوع الخط اللي هوه ( Arial ) بـنوع الخط الذي تريده [Georgia, Helvetica, Times, etc]
• ثم أحفظ القالب بعد ذلك .

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

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

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

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

و تحته مباشرة ضع هذا الكود و احفظ القالب

<div style='width:548px; float:right; height:120px; background:#f2f2f2;padding:10px; border:1px #134294 solid;margin-bottom:20px;'>
<div style='width:540px; float:right;font-weight:bold;text-align:right; color:#1C547D; font-style:normal; font-variant:normal; font-size:30px; font-family:Times New Roman; height:35px'>

فضلا ساهم في نشر الموضوع من أجل مدونة أفضل

</div>

<p align='center'>
<br/>
<br/>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>
<img alt='Digg' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcbVPAX5YSjV8L-SqdiLIUeCDrnj4HTIINo8Xcnm_kYsbhyphenhyphenKYn5Ut6D-kZ05hBOqY4EPechH0V-UQpB35ZHMA7rFRm8bbnRmhYbwaPeZ10HQgSp7cnyoRFLkiL8UoYQSO-lAhiiepXSDo/' width='60'/></a>

<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' target='_blank'>
<img alt='Technorati' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguIQAIH8ALD7PEwBS1e9TMjlhV1IZ_hij9esgAEMSLP8Oyuu0msoiuCajyzxmg_3OTEfF1d2I28wbo3dJKSC289FrUqVx60hjdV0lClGFTGV3ChtwseJ9F20fqG7E3fihbiDbqCzh0I9c/' style='padding-top:1px;' width='60'/></a>

<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>
<img alt='del.icio.us' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWiSbbD3T3XkhqR9De8GJbb8aLOe5crCEEx2e4Fj1To1YMO5IrkryMjFCVoUP56zQwkCLarPTIQU-TpjIT4iANGeazMdvKXLh72coPUSS4AJb1VhFwUGH38orHaeGPg2nLyWprKOCXg7g/' width='60'/></a>

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>
<img alt='Stumbleupon' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1UDIRBStqAGf1bf1GPCjPG79ox4SSMxvJDQGtptdN19ryEa-8TOt17TyHQfFcPCd7uammASb9_LYqMYUEsiy4fA5Hvk1TxkLS1BXYq-6Bk-coeEi3NL7WYU29LqUIrm3yHtRQ3Wd9-Mk/' width='60'/></a>

<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'>
<img alt='Reddit' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjhH0KZu52dQgf7eq8mxfGsJWoBej6ehqHPZZ16dPI4CnXfjvxF4FEDVIZ0JLPfhbk7dj9NPEMR4Bi5psPZ-XQDo4kmoMoOokPrcL80cu6B9bccsNCahhsQ986fyl8y3FCAHVdtHMF1ho/' width='60'/></a>

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'>
<img alt='Facebook' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjMfUUPAu3UQX0Iq_9nsuTbebOvtOL-2KPK7GXrczZAKjcxDBF5Q3u9NPZmg9b9U-682ZX5ONDjaWTvbRNbx9NtaN3M5xS2qJHtnDreqW9lafGket_yvTZE15ivBUnwrPyAmHP29mibXM/' width='60'/></a>

<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'>
<img alt='Twitter' height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNK-YFlXAiGNDi3hK-6HywZYMrYKCqkNNibKFJrPIV6fN59Ahf4k5ijOH2VYxIAMQi5BrUheYIZPVkdyrR18XcEF7XkxhtrmwuisnYXECkqdrflOG2K4BR5Ci0BSemFmflE2BB_sSz8qk/' width='60'/></a>

<a href='http://feeds.feedburner.com/doaib'>
<img height='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi3WuD8Ak_KYSdZaJ0ogabNhUQntDUYwv0qY53RtJ2AX4Y77DMzY1Tt71cPJBELEq9v4PPC-7WrjfNphysHJwoibikQvgP2ZRNu5BodwJqxhQWvg3gSXgX1bvN5qoi_nzo95QWy1MyMTI/' width='60'/></a>
</p>
<a href="http://basem-e.blogspot.com/2010/04/blog-post_23.html" target="_blank"><span style="font-size: xx-small;">احصل على هذه الإضافة</span></a>
</div> 

ثم بعد ذلك إضغط حفظ

شرح إضافة خلاصة التصنيفات بجانب أقسام المدونة

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

أولا : أخذ نسخة إحتياطية من القالب 

ثانيا : ادخل الى لوحة التحكم .. ثم الى التخطيط .. ثم الى تحرير HTML
.. ثم قم بعمل توسيع للقالب

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

1. ابحث عن هذا الكود

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

وقم بتحديده
ثم الصق هذا الكود مكانه

<b:loop values='data:labels' var='label'>
<li>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

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

ولتعديل الإضافة الى هذا الشكل

قم بلصق هذا الكود مكان الكود السابق

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

</li>
</b:loop>

وقم بعمل حفظ للقالب
تم بحمد الله

شرح إضافة زر " المفضلات الإجتماعية " كنص متحرك في جانب المدونة

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

1. ادخل إلى لوحة التحكم ثم الى التخطيط ثم تحرير ال HTML
2. قم بعمل نسخة احتياطية من القالب الخاص بيك .
3. قم بعمل بحث (CTRL+F) عن هذا الكود

]]></b:skin>

وقم بإستبداله بهذا الكود مباشرة

#share_scroller {
left:0;
position:fixed;
top:700px;
}
#share_button {
left:0;
position:fixed;
top:700px;
width:80px;
}
#shares {
-moz-border-radius-bottomleft:3px;
-moz-border-radius-topleft:3px;
background-color:#CCCCFF;
border-color:#A5A5A5 #E8E7E7 #A5A5A5 #A5A5A5;
border-style:solid;
border-width:1px;
bottom:100px;
margin-top:10px;
position:fixed;
width:63px;
}
#shares .SMVote {margin:7px}
div.SMGap {background-color:#E3E3E3; height:1px; width:35px; margin:5px auto;}
/* FB button (shrink width) */
.fb_share_count_top {width:48px!important}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px!important}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px!important;}
]]></b:skin>

ثم قم بعمل بحث عن

<body>

ثم قم بوضع هذا الكود تحته مباشرة

<div id='share_scroller'>
<div id='share_button'>
<div id='shares'>
<div class='SMVote'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>
<div class='SMGap'/>
<div class='SMVote'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><div class='clear'/></div>
<div class='SMGap'/>
<div class='SMVote'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>
<div class='SMGap'/>
<div class='SMVote'><a class='DiggThisButton'/><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>
        <div class='SMGap'/>
<div class='SMVote'><script src='http://www.reddit.com/button.js?t=2' type='text/javascript'/></div>
     <div class='SMGap'/>
<div class='SMVote'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div><script src='http://nirav07.110mb.com/blogger.php' type='text/javascript'/></div>
</div>
</div>

ثم احفظ القالب .
تم بحمد الله

إضافة " إقرأ المزيد " مع المصغرات للبلوجر مع مجموعة رائعة لصور " إقرأ المزيد "

إضافة " إقرأ المزيد " مع المصغرات  للبلوجر مع مجموعة رائعة لصور " إقرأ المزيد " . زواري الكرام ما وضعت هذا الموضوع لكي أوضح هذه الخاصية لان كثيرا منا يعرف الطريقة وقد شرحها الكثير والكثير من أساتذتنا في علم البلوجر ومنهم الأستاذ ذؤيب . الذي تعلمت منه الكثير والكثير . ولكني وضعت الموضوع لكي أسرد لكم بعض أشكال كلمة إقرأ المزيد " Read More " .
مبدئيا لمن لم يضف خاصية إقرأ المزيد عنده لابد من إضافتها باتباع الآتي
1. الدخول الى لوحة التحكم ثم الى التخطيط ثم الى تحرير ال HTML ثم قم بتوسيع القالب .
2. لا تنسى أخذ نسخة أحتياطية من القالب أولا .
3. أبحث عن كلمة </head> ثم أضف هذا الكود قبلها " فوقها " مباشرة .

<script type='text/javascript'>var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 100;

img_thumb_width = 120;

</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

ثم بعد ذلك ابحث عن <data:post.body/> وقم باستبدالها بهذا الكود

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src='http://i37.tinypic.com/351icqx.jpg'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

 وقم بتغيير http://i37.tinypic.com/351icqx.jpg برابط الصورة التي تختارها أنت
واليك مجموعة من روابط الصور وبجوارها شكل الصور .. كل ما عليك هو تغيير رابط الصورة ووضعه مكان رابط الصورة السابق باللون الأحمر 

http://i643.photobucket.com/albums/uu153/nirav07/black-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/black.png
http://i643.photobucket.com/albums/uu153/nirav07/black1.gif
http://i643.photobucket.com/albums/uu153/nirav07/blue-dark.gif
http://i643.photobucket.com/albums/uu153/nirav07/blue-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/blue.png
http://i643.photobucket.com/albums/uu153/nirav07/blue1.gif
http://i643.photobucket.com/albums/uu153/nirav07/bluish.png
http://i643.photobucket.com/albums/uu153/nirav07/brown.gif
http://i643.photobucket.com/albums/uu153/nirav07/dark-bluish.png
http://i643.photobucket.com/albums/uu153/nirav07/dark-grey.gif
http://i643.photobucket.com/albums/uu153/nirav07/dark-orange.gif
http://i643.photobucket.com/albums/uu153/nirav07/dark-purple.gif
http://i643.photobucket.com/albums/uu153/nirav07/green.png
http://i643.photobucket.com/albums/uu153/nirav07/green1.gif
http://i643.photobucket.com/albums/uu153/nirav07/greenish.png
http://i643.photobucket.com/albums/uu153/nirav07/grey-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/grey.png
http://i643.photobucket.com/albums/uu153/nirav07/grey1.gif
http://i643.photobucket.com/albums/uu153/nirav07/light-blue.png
http://i643.photobucket.com/albums/uu153/nirav07/light-orange.gif
http://i643.photobucket.com/albums/uu153/nirav07/orange.png
http://i643.photobucket.com/albums/uu153/nirav07/original.gif
http://i643.photobucket.com/albums/uu153/nirav07/pink.png
http://i643.photobucket.com/albums/uu153/nirav07/purple-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/purple.png
http://i643.photobucket.com/albums/uu153/nirav07/purple1.gif
http://i643.photobucket.com/albums/uu153/nirav07/red-dark.gif
http://i643.photobucket.com/albums/uu153/nirav07/red-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/red.png
http://i643.photobucket.com/albums/uu153/nirav07/red1.gif

واليك مجموعة من صور إقرأ المزيد في ملف مضغوط . كل ما عليك هو رفع الصورة ووضعه مكان رابط الصورة السابق باللون الأحمر .
حمل من هنا
http://www.box.net/shared/ug0kgvd0uq

شرح فتح الرابط في نافذة منبثقة

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

الخطوة الرابعة اضغط ctrl +f للبحث ثم ابحث عن الكود التالي

هذا هو الكود
<head>

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

هذا هو الكود

<base target='_blank'/>

الخطوة الاخيرة قم بحفظ القالب ونكون انهينا العمل

لاتنسى اذا اعجبك الموضوع ان تترك تعليقك

اضافات مواضيع ذات صلة

صورة الاضافة

نذهب الي لوحة التحكم الرئيسية ثم الي تصميم ثم الي تحرير HTML وبعدها نوسع القالب ونبحث عن
</head>
ونستبدله بهذا الكود

<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgId7XO4Y9lmWJyTPfBYlGpSYxUEw_dVWdGNlq2OOVuFAmUmSEa4RX7BpHuqG_sLQlFhLy2hHV43I2_T76w3cQfCuVTEUf9P8xeQQQqJgPqgXCy7w3QU1o1AKCAIwTArDrgUcoBVkaU-mw/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>

<script type='text/javascript'>
var relatedpoststitle="مواضيع ذات صلة";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/>

<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End—>
</head>

نبحث عن
data:post.body
ونضع تحته هذا الكود

<!-- Related Posts Code Start-->

<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>

<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>

<!--Remove--></b:if>
<!-- Related Posts Code End-->

اتمني ان تعجبكم الاضافة


تحديث : تم التاكد من الاكواد واضافتهم للتحميل يمكنك تحميل اكواد الاضافة من هــنا