كيفية جعل التدوينات تظهر على شكل مجلة وبشكل أنيق

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

كيفية جعل التدوينات تظهر على شكل مجلة:

* اولا وقبل كل شيء يجب عليك معاينة الشكل الذي تريد تركيبه فلا ربما لا يعجبك.

* لان في حال اعجبك الشكل فدعنا نقوم بتركيبه. وذلك باتجه الى لوحة تحكم مدونتك.

* بعدها الى المظهر (القالب).

* ثم اضغط على سهم جنب كلمة تخصيص.

* بعدها اختر تحرير html.

* الان اضغط داخل صندوق اكواد وقم بضغط على Ctrl + F من لوحة مفاتيح كمبيوتر.

* سيظهر لك مربع بحث قم بالبحث عن هذا الكود التالي.

<data:post.body/>

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

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmorebutton' 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:include data='post' name='post'/>

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

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary1" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb1("summary1<data:post.id/>");</script>
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' 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>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

ملاحضة: ايضا يمكنك تغير Read more بكلمة تناسبك مرة أخرى.

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

</head>

قم بضع الكود التالي فوق الكود السابق.

<script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580;
first_thumb_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;
</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 = posts_no_thumb_sum;if(img.length>=1) {imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ = posts_thumb_sum;} var summary = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}function createSummaryAndThumb1(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = first_no_thumb_sum;if(img.length>=1) {imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';summ = first_thumb_sum;}var summary1 = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary1;}//]]></script>

* أعد مرة أخرى البحث عن الوسم التالي.

</b:skin>

عند ايجاده قم بوضع الكود التالي فوقه.

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.first-post-thumb {
margin-right: 10px;}
.summary {
height: 100%;}
#first { /* Styles for the First Post Container */
width: auto;
height: 250px;
float: left;
margin-bottom: 10px;
background-color: #F4F4F4; /* background color for the first post */
border: 1px solid #E5E5E5; /* border for the first post */}
.first-body { /* Style for the First Post summary */
color: #545454;
font-size: 13px;
text-align: justify;
padding: 5px 10px;
line-height: 1.5em;}
#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/
border-bottom: 2px solid #DFDFDF;
color: #515151;
font-size: 20px;
display: block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-weight: bold;
text-align: left;
line-height: 1.4em;
background: none;}
#first h3 a:hover { /* Color on mouseover for the First Post Title */
color: #1061A1;}
.post { /* Styles for the small posts container */
float: left;
margin: 0px 6px 2% 5px;
width: 46%;
height: 230px;
padding: 0px 5px 5px 5px;
background: #FCFCFC; /* background color for the small posts */
border: 1px solid #E5E5E5; /* border for the small posts */
overflow: hidden;}
.posts-thumb { /* Style for the small posts thumbnails */
margin-right: 10px;}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail
img {
background: none;
border: none;
box-shadow: none;
padding: 0;}
h3.post-title a{ /* Style for the small posts titles */
font-size: 14px;
color: #747474;
text-transform: uppercase;}
h2.date-header { /* Hide the post date */
display: none;}
.post-footer {
display: none;}
h3.post-title {
margin: 0px;}
.readmorebutton {
margin-top: 5px;}
.readmorebutton a { /* Styles for the Read More link */
color: #767676;
border: 1px solid #E1E1E1;
background: #EAEAEA; /* Background color for the Read More link */
text-decoration: none;
padding: 3px 5px;
font-weight: bold;
font-size: 11px;
float: right;
position: relative;}
.post-comment-link { /* Style for the comment bubble of posts below */
position: absolute;
top: -35px;
right: -10px;
display: block;
border: 1px solid #E1E1E1; /* border for the comment bubble */
background: #EAEAEA; /* background color for the comment bubble */
font-size: 11px;
position: absolute;}
#first .post-comment-link { /* Style for the comment bubble of first post */
position: absolute;
top: 10px;
right: 0px;}
.post-comment-link a { /* Link color for the comments bubble*/
padding: 10px;
color: #6A6A6A;
text-decoration: none;
font-weight: bold;}
#blog-pager {
clear: both;}
</style></b:if></b:if>

الان قم بحفظ القالب وشاهد النتيجة.

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

مدونة معاون

كيفية جعل التدوينات تظهر على شكل مجلة وبشكل أنيق

كيفية جعل التدوينات تظهر على شكل مجلة: