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

Read More,Blogger, Posts,User Experience, اقرأ المزيد,بلوجر,

إن إضافة ميزة "اقرأ المزيد" إلى منشوراتك على Blogger هو ما تحتاجه تمامًا! سنوضح لك في هذه المقالة كيفية إضافة هذه الوظيفة بسهولة إلى مدونتك باستخدام بعض أكواد HTML الأساسية.

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

الآن، حدد الكود الخاص بمنشور مدونتك، والذي يجب أن يبدو كالتالي:

<data:post.body/>

وبعد ذلك قم باستبدال هذا الكود بالكود التالي:

<!--read more--> <script type='text/javascript'> posts_no_thumb_sum = 290; posts_thumb_sum = 200; img_thumb_height = 140; img_thumb_width = 160; </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:left; margin-right: 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> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <style type='text/css'> .post-footer {display: none;} .post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;} .readmore a {text-decoration: none; } </style> </b:if> </b:if> <!--xml read more--> <b:if cond='data:blog.pageType != "static_page"'> <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/>","<data:post.url/>","<data:post.title/>");</script> <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More»</a></span></b:if></b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if> <!--read more-->

قم بالبحث هذا الكود واحذفه

<b:eval expr='data:blog.jumpLinkMessage'/>

( هذا الكود هو رابط يظهر في شكل ثلاث نقاط يؤدي الى عنوان المدونة )

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

© TechOucha

شارك على :

☷✎