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

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

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

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

1- تقوم بدخول للبلوجر > قالب > تحرير html.

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

</head>

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

<script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){for(var c=a.split("<"),d=0;d<c.length;d++)c[d].indexOf(">")!=-1&&(c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length));a=c.join("")}for(b=b<a.length-1?b:a.length-2;" "!=a.charAt(b-1)&&a.indexOf("",b)!=-1;)b++;return a=a.substring(0,b-1),a+"…"}function createSummaryAndThumb(a,b,c){var d=document.getElementById(a),e="",f=d.getElementsByTagName("img"),g=posts_no_thumb_sum;f.length>=1?(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'"><img src="'+f[0].src+'" /></a></div>',g=posts_thumb_sum):(e='<div class="posts-thumb" style="float:left;"><a href="'+b+'" title="'+c+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfM6zsEegXBf8wN2nJ1c6k2oK8Xjb-uE-eeGH9t_nbfPzEbwapPq6zUDJAA7IihURmQ_auj7QareGxUzEPHSArDl_WYAJGBar_Mnx-a7kWgwtkl9JEIifeHRZGH94XIqNw2nYQ2lG8MNOr/s1600/sorry-image-not-available.png" /></a></div>',g=posts_thumb_sum);var h=e+'<div class="post-summary-text">'+removeHtmlTag(d.innerHTML,g)+"</div>";d.innerHTML=h}
//]]></script>

3- أعد البحث عن هذا الكود التالي.

<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>

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

</head>

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

* الشكل الاول (1 Grid Style):

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style type='text/css'>
#blog-pager{clear:both}
.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:right;margin:0 1.1% 2%;padding:0!important;position: relative;}
.post-title a{font:75% 'Open Sans Condensed',sans-serif;text-transform:uppercase;color:#111;padding:0;font-weight:600;}
.post-title{text-align:center;height:20px;position:absolute;bottom:35%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0 13px}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important}.posts-thumb{width:100%;height:190px;position:relative;overflow:hidden;clear:both;border-bottom:3px solid #00C8BD;border-top:3px solid #558ABB}.posts-thumb:hover{border-top:3px solid #FF664E;border-bottom:3px solid #FEBE36}.post-body{position:relative;height:auto}.post-body a{text-decoration:none}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none}.post-summary-text{color:#555;background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI-yML1xXhNG4ue4LHN9rhCCFp2x0KJAcmqmTS34LFs3oHzLbUGmGE8_-DzIVy_5WYAZYg8f1l9w25r3DNuPBmHZ5a7rclDJFHGttWFRs4YJt8FFRfLNfX2G5ohHPBJvU67AzFFLw4IlkO/s1600/blueprint.png);font:100% 'Open Sans Condensed',sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:17% 10% 6%}a.comment-bubble{color:#fff;text-decoration:none;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font:110% 'Pacifico',cursive;}a.comment-bubble:before{content:"Comments: " url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA7aaDLRwk5W-6kC08OdBH2TnmPqYOOfqL9Haev10_xseZtQXsP3pWHRGTgPfyhe5E7QbLBGa1sGfWT1a6i2UUS9igYZJaczNKnjPmdJcp6mOhLRNcH8sEoW3aH4EQaOsE2N6gvxp3Ko_S/s1600/heart-active.png);}.post-header,.post-footer{display:none}
</style></b:if></b:if>

* الشكل الثاني (2 Grid Style):

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style type='text/css'>
#blog-pager{clear:both}
.post{height:auto;width:31%;display:inline-block;text-decoration:none;float:right;margin:0 1.1% 2%;padding:0!important;position:relative;}
.post-title a{font:85% sans-serif;color:#fff;padding:0;text-shadow:2px 2px 3px #222}
.post-title{height:53px;text-align:center;position:absolute;top:1%;width:100%;z-index:101;overflow:hidden;margin:0!important;padding:10px 0}.date-header{visibility:hidden;height:0!important;width:0!important;margin:0!important;padding:0!important;}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative;}.post-body{position:relative;overflow:hidden}.post-body a{text-decoration:none;}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}
.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:108% 'Open Sans Condensed',sans-serif;overflow:hidden;padding:66px 10px 0;left:0;position:absolute;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1;z-index:10;}a.comment-bubble{color:#fff;text-decoration:none;font:104% 'Pacifico',cursive;width:100%;text-align:center;position:absolute;top:160px;left:0;text-shadow:1px 2px 1px #333;z-index:11;}a.comment-bubble:before{content:"Comments: "}.post-header,.post-footer{display:none}
</style></b:if></b:if>

* الشكل الثالث (Masonry Layout):

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style type='text/css'>
#blog-pager{clear:both}.post{background: #f2f2f2;height:auto;width:30.8%;overflow:hidden;display:inline-block;text-decoration:none;float:right;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font-size:75%;font-family:'Open Sans Condensed',sans-serif;text-transform:uppercase;padding:0;color:#444}h3.post-title{height:26px;text-align:center;width:100%;margin:0!important;padding-bottom:4%}.date-header{display:none}.post-body a{text-decoration:none}.posts-thumb{width:100%;height:190px;overflow:hidden;position:relative}.posts-thumb img{position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;width:auto;max-width:340px;height:auto;padding:0;border:none;outline:none;}.post-summary-text{color:#777;font-size:100%!important;font-family:'Open Sans Condensed',sans-serif;text-align:center;clear:both;overflow:hidden;margin:5px 0 0;padding:7% 10%}a.comment-bubble{color:#fff;text-decoration:none;font-size:100%;font-weight:700;right:10px;position:absolute;top:165px;text-shadow:1px 2px 1px #333;font-family:'Open Sans Condensed',sans-serif;}a.comment-bubble:before{content:"Comments: ";}.post-header,.post-footer{display:none}
</style></b:if></b:if>

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

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

مدونة معاون

اخفاء الرقم عند الاتصال بأي شخص كود الماسكي

كود الماسكي لإخفاء رقم الهاتف عند الاتصال بأي شخص