اضافة إقرأ المزيد او اكمل القرائة علة مدونة بلوجر

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

الفائدة من  إقرأ المزيد

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

أشكال إقرأ المزيد

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

اولا:طريقة تركيب إقرأ المزيد النصية

1. لوحة التحكم
2.  إضغط على قالب
3.    ثم تحريرhtml  
4. قم بحفظ نسخة إحتياطية
5.  ثم ضع قبله الكود التالي مباشرةً :

1 - في البداية قم بحفظ نسخة إحتياطية من قالب بلوج

2 - قم بالدخول إلى قالب مدونتك بالضغط على التبويب Template.

3 - قم بفتح أكواد قالبك من خلال الضغط على Edit HTML.

4 - قم بالبحث داخل صندوق الأكواد .. لتقوم بإظهار مربع البحث قم بالضغط على مفاتيح Ctrl و F معاً .. بشرط أن تكون قد ضغطت بزر الفأرة الأيسر ضغطة واحدة داخل صندوق أكواد قالبك أولاً حتى يكون البحث محدد بداخله فقط وليس في صفحة متصفحك بالكامل.

قم بكتابة الكود التالي في مربع البحث   :                  

</head>

<script type='text/javascript'>

posts_no_thumb_sum = 400;

posts_thumb_sum = 300;

img_thumb_height = 160;

img_thumb_width = 180;

</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, pURL, pTITLE){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = posts_no_thumb_sum;

if(img.length>=1) {

imgtag = '<span class="posts-thumb" style="float:right; margin-left: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';

summ = posts_thumb_sum;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

اذا اردت تغيير الصورة المصغرة تظهر على يمين المحتوى الملخص قم بتغيير كلمة float:right; بـ float:lift;

 وتحكم في الصورة من هنا margin-left: 10px; بـ margin-right: 10px;

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

إبحث داخل قالبك عن الكود:

<data:post.body/>

<b:if cond='data:blog.pageType not in {"item","static_page"}'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<a expr:href='data:post.url'>اقرأ المزيد</a>

</b:if>

<b:if cond='data:blog.pageType in {"item","static_page"}'>

<data:post.body/>

</b:if>

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

وفي الاغلب يكون الاخير او ما قبله

طريقة تركيب إقرأ المزيد الصورية

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

و هو جملة إقرأ المزيد

 قم بحذفها ووضع الكود التالي:

<img src="رابط الصورة" title="إقرأ المزيد" alt="إقرأ المزيد"/>

وبالطبع قم بإستبدال جملة رابط الصورة ..بما يناسب القالب الخاص بك :

للحصول على الرابط قم  بالبحث في قوقل و ثم   Copy Image Address.

وقم بحفض القالب و قبل المغدرة اترك تعليق وشكرا

قاسي للمعلومات

أكمل القراءة

اضافة تاتير شريط لتحميل الصفحة تابع الدرس طريقة بسيطة جداا

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

  

السلام عليكم ورحمة الله واسعد الله اوقاتكم بكل خير

اليوم اردت ان اشارك معكم هذا الدرس و هو :   

1. لوحة التحكم
2.  إضغط على قالب
3.    ثم تحريرhtml  
4. إبحث بالضغط على   CTRL+F عن الكود التالي : &lt;/body&gt;
5.  ثم ضع قبله الكود التالي مباشرةً :

<script type='text/javascript'> //<![CDATA[ // http://masquedz.blogspot.com var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"3px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width= a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#df0d0d";this.bars=[];b=this.el=document.createElement("div");c(this.el, k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}(); var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100); //]]> </script>

اترك بصمتك هنا ولو بتعليق حتى تحفزنا

قاسي للمعلومات

أكمل القراءة

تغير أيقونة مدونة بلوجر بطريقة احترافية بعد تحويل الصورة على favicon

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

تغير أيقونة مدونة بلوجر بطريقة احترافية بعد تحويل الصورة على favicon  

مرحبا بك اخي المدون  في درس جديد لمدون قاسي للمعلومات واللتي سنشرح لكم 

فيها كيفية تغيير  اسم المدونة الى صورة logo بطريقة بسيطة جدا لكي يتمكن كل مدون 

 من اعطاء جمالية لمدونته، كما نعرف بداية إنشاء مدونة بلوجر عليك أن تقوم بتغيير بعض الأشياء،

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

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

مثلا

بعد ما تختار الصورة ندخل على  favicon   

 هذا الموقع  يقوم بتغيير صيغة الصورة إلى  صيغة favicon التي تتوافق مع بلوجر

ثم قم بي تحميل الصور على جهازك  Download the generated favico 

والان لي نقم بالخطوة الاخير وهي نذهب الى التخطيط  &gt;&gt;&gt;header&gt;&gt;&gt; رأس الصفحة&gt;&gt;&gt;

ثم نقوم برفع الصورة على المدونة و نحفظ و مبروك عليك 

مساهمة من طرف قاسي للمعلومات

قاسي للمعلومات

أكمل القراءة