سكربت عرض الموضوعات فى البلوجر على شكل شبكة

معظمنا يعلم شكل الشبكة فى البلوجر grid layout اليوم اقدم لكم اسهل طريقة لتركيب شكل الشبكة الى المدونة الخاصة بك ، ليصبح شكلها جميل جدا :

لاضافة هذا الاسكربت :

1-اذهب الى قالب ثم اضغط تعديل القالب 

2-اضغط داخل  مربع الاكواد واضغط ctrl+f ليظهر لك مربع البحث ، قم بالبحث عن الكود التالى 

</head>

3-قم بأضافة الكود التالى قبله مباشرة "فوقة " :

<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/AVvXsEhlO1R0jRx1RgBqiatrHiBxJYKGHzYadcZLar7zXfccxDLFc-UY6ujQvNJfPyqYncZjpEUR0xmiUpsleOgqeK6kdTwGGeYSt3_ybkDZJVa4-53vqRX1pEenZjtmbybasuLlIWifc0VPOVH9/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>

4- " اذا كانت المدونة الخاصة بك تحتوى على سكربت" قراءة المزيد" فلا داعى لعمل الخطوة التالية : "

ابحث عن الكود التالى 

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

5-الان فوق </head> مباشرة قم اضافة الكود التالى :

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType!= "item"'> <style> #blog-pager { clear:both; } .post { height:auto; width:31%; display:inline-block; text-decoration:none; float:left; 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; color:#111; padding:0; } h3.post-title { text-align:center; height:22px; position:absolute; bottom:23%; 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%!important; height:190px!important; 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 { border-radius:2px; box-shadow:0 0 6px 1px rgba(0,0,0,0.1); position:relative; height:auto; } .post-body a { text-decoration: none; } .post-body img { display:block; width:100%!important; height:auto!important; max-width:800px!important; max-height:400px!important; min-width:190px!important; min-height:190px!important; border:none; outline:none; position:relative; margin: 0px; padding:0; } .post-summary-text { color:#555; background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDNaSfDm2Q9d6Ig9tjQ-6GRm1iqFt9dyh9MIL7EbV1bnVbjEBpNagk02MmxUd1wnuP4rbte8JNi9wEOvFt8zQdooN_wIeazOKGDQhrmlqR5Mg-gXvrEJ81MNwkZpivI6B0yVOAfMnC2da3/s1600/blueprint.png); font-size:100%!important; font-family: '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; font-size:110%; right:10px; position:absolute; top:165px; text-shadow:1px 2px 1px #333; font-family: 'Pacifico', cursive; } a.comment-bubble:before { content: "Comments: " url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpbOe4Elon-wivmqSGRPzSnspJtEKfelzpBEMAA6gk6McaRR2rQ79eL3p8AEUzmn_hyphenhyphenZJGg-sxrzvAPbjb6itLopAEtAtuECewK5N2mago8m6QPpCiNm-mRfJ4KNvXyR9Tfe3P9awxVcwz/s1600/heart-active.png); } .post-header,.post-footer { display:none; } </style></b:if></b:if> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

ومبروك عليك الاضافة  :)