 |
| طريقة تغيير شكل عرض المواضيع على مدونات بلوجر |
السلام عليكم ورحمة الله تعالى وبركاته
أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب.
سنتعرف اليوم على كيفية تغيير وتخصيص شكل عرض المواضيع على مدونات بلوجر بطريقة بسيطة وإحترافية
لمشاهدة العرض التوضيحي
كما لاحظنا في المعاينة كيفية ظهور صفحتك الرئيسية عند تثبيت الإضافة.
سيتم تلقائيا جعل صفحتك الرئيسية على شكل الشبكة. وستكون جميع مشاركاتك تعرض الصورة الأولى والعنوان بشكل أكثر من رائع.
لن أطيل عليكم . وأترككم مع الشرح
خطوات جعل الشبكة نمط الصفحة الرئيسية في بلوجر
لن أطيل عليكم . وأترككم مع الشرح
خطوات جعل الشبكة نمط الصفحة الرئيسية في بلوجر
تنبيه : قبل أي تعديل على القالب ترجى تحميل أو أخد نسخة إحتياطية للقالب الخاص بك لتفادي الأخطاء في ما بعد
تابع معي ...
أولا - توجه الى لوحة تحكم مدونتك من هنا
2 - قالب " المظهر " >> " تحرير Html " >>
3 - إبحث عن الوسم التالي عبر الضغط على Ctrl+F
</head>
4 - الآن ألصق هذا الكود مباشرة أعلى </head>
<script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</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 +'"><img src="'+img[0].src+'" /></a></span>';
summ = posts_thumb_sum;
}
else {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizMc1yiMlBxCMzIuj-BZg3vY2wg-_QNSh1FSz4QVAWKxs_Wc_3lxPtWI7yqHQTacFXQOZC3U3p_qY_B7NkWhMgQbh9vt3bASfYn2X-spYvitm3CReCKfWJK8N9BnKxmg6aT35muYZCkA0c/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style>
#blog-pager {
clear: both;
position: absolute;
bottom: 0px;
left: 0px;
}
.blog-feeds {
display: none;
}
.post {
height: auto;
width: 100%;
padding: 0px !important;
margin: 0px 0px 30px;
display: inline-block;
text-decoration: none;
}
h3.post-title a{
font-size: 95%;
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
padding: 0px;
color: #fff;
text-shadow: 3px 2px 2px #222;
font-weight: bold;
}
h3.post-title, .comments h4 {
margin: 0px !important;
text-align: center;
padding: 10px 0px;
position: absolute;
top: 10px;
width: 100%;
z-index: 200;
}
.post-header {
display: none;
}
.date-header {
visibility: hidden;
height: 0px !important;
width: 0px !important;
padding: 0px !important;
margin: 0px !important;
}
.posts-thumb {
width: 100%;
height: auto;
overflow: hidden;
clear: both;
}
.post-body {
overflow: hidden;
position:relative;
}
.post-body a {
text-decoration: none;
}
.post-body img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: none;
min-width: 100%;
min-height: auto;
margin: 0px;
padding: 0;
border: none;
outline: none;
position: relative;
}
.post-summary-text {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: 'Open Sans Condensed', sans-serif;
clear:both;
overflow:hidden;
padding:25% 10% 0%;
left: 0;
position: absolute;
text-align: center;
vertical-align: bottom;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
top: 0;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
.post-footer {
display: none;
}
a.comment-bubble {
color: #fff;
text-decoration: none;
font-size: 120%;
right: 5px;
z-index: 222;
position: absolute;
top: 5px;
text-shadow: 1px 2px 1px #333;
font-family: 'Open Sans Condensed', sans-serif;
}
a.comment-bubble:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlQ8lEmn1XeJYMMq-UFnUoOeoZYFBEI90VtKukiEiiPzJjEST6jMIsNJRqRhLpB_ivBgJPFvnAeeoDyJM5tw2vInfQ_flvOGmdsCO4Z91kw3kLCtm4aM6KDjkWHBRInIU4hQFjBmqBUi1Y/s1600/heart-active.png);
}
.main-inner .column-center-inner {
-moz-column-count: 3;
-moz-column-gap: 1px;
-webkit-column-count: 3;
-webkit-column-gap: 1px;
column-count: 3;
column-gap: 1px;
width: 100%;
padding: 0px !important;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
5 - إبحث الآن عن الوسم التالي
<data:post.body/>
6 - واستبداله بهذا الرمز
ملاحظة : سوف تجد الوسم <data:post.body/> أكثر من مرة إستبدل الثاني والثالث.
<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/>");</script>
<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/>
</a>
</b:if>
</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>
7 - حفظ النموذج
هذا كل شيء، صفحتك الرئيسية الجديدة جاهزة.
الان توجه الى المدونة الخاصة بك وشاهد النتيجة
تم بحمد الله ...
أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع
لا تنسى مشاركة التدوينة من الأصدقاء ليستفيد الجميع
إدعمنا لكي نستمر في تقديم المزيد
لا تنسى مشاركة التدوينة من الأصدقاء ليستفيد الجميع
إدعمنا لكي نستمر في تقديم المزيد
إرسال تعليق