add grid layouts | اضافة التصميم الشبكي للمواضيع في المواقع او المدونة

السلام عليكم  و رحمة الله 

احييكم احبائي في الله  اليوم درس  مشوق من دروس بلوجر  الا و هو اضافة التصميم الشبكي  لمدونات بلوجر  و المواقع  

و هي اضافة  جد مهمة  و متقنة ففي الاونة الاخيرة  نكاد نلحظ ان استيل الوينداوز يحمل رونقا خاصا مما يجعلنا نتساءل كيف ذلك  و هكذا جاءت هذه الاضافة المميزة  باستعمال 

 JAVA SCRIPT  & CSS

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

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

يمكنكم  ملاحظتها من خلال الرابط الموالي

  ENG QUOTES   

و كما لاحضتم ان المواضيع على شكل  مخطط و تصاميم  مميزة  و مسندلة كما ينبغي الحال  مما تعطي رونقا  خاصا بالاستيل 

الان  ندخل الى الخطوات المتبعة لتحقيق ذلك :

الخطوة الاولى :  ابحث عن

</head>

و فوقها مباشرة ضع الكود الموالي :

<script type='text/javascript'><br /> posts_no_thumb_sum = 100;<br /> posts_thumb_sum = 100;<br /> </script><br /> <br /> <script type='text/javascript'><br /> //<![CDATA[<br /> function removeHtmlTag(strx,chop){<br /> if(strx.indexOf("<")!=-1)<br /> {<br /> var s = strx.split("<");<br /> for(var i=0;i<s.length;i++){<br /> if(s[i].indexOf(">")!=-1){<br /> s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);<br /> }<br /> }<br /> strx = s.join("");<br /> }<br /> chop = (chop < strx.length-1) ? chop : strx.length-2;<br /> while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;<br /> strx = strx.substring(0,chop-1);<br /> return strx+'...';<br /> }<br /> function createSummaryAndThumb(pID, pURL, pTITLE){<br /> var div = document.getElementById(pID);<br /> var imgtag = "";<br /> var img = div.getElementsByTagName("img");<br /> var summ = posts_no_thumb_sum;<br /> if(img.length>=1) {<br /> imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';<br /> summ = posts_thumb_sum;<br /> }<br /> <br /> else {<br /> 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/AVvXsEgwogD_vowbVA8T7axux-RolynenxLmTHme9zS1z1TGuai5kbESUuFePYzTYqYdyYtAfFEHE-fd532rq3xiuMlgTc6VWyzIn9Uygc1JyfwdRiJdg3ayHpGdUQhGCajkBVK_M7p2LsYZAp1t/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';<br /> summ = posts_thumb_sum;<br /> }<br /> <br /> var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text"> ' + removeHtmlTag(div.innerHTML,summ) + '</div> </a>';<br /> div.innerHTML = summary;<br /> }<br /> //]]><br /> </script>

الخطوة الثانية : ابحث عن الوسم التالي

<data:post.body/>

ربما تجد العديد من ذلك الوسم اختر الثاني  او الثالث على الاغلب الثاني  هو الاصح

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

<b:if cond='data:blog.pageType != "static_page"'><br />     <b:if cond='data:blog.pageType != "item"'><br />         <div expr:id='"summary" + data:post.id'> <br />             <data:post.body/><br />         </div> <br />         <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script><br />         <b:if cond='data:post.allowComments'><br />             <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><br />                 <data:post.numComments/><br />             </a><br />         </b:if><br />     </b:if><br /> </b:if><br /> <b:if cond='data:blog.pageType == "item"'><br />     <data:post.body/><br /> </b:if><br /> <b:if cond='data:blog.pageType == "static_page"'><br />     <data:post.body/><br /> </b:if>

الان نعود الى وسمنا المحبوب  

</head>

و فوقه مباشرة اختر احد الاستيلات الموالية  او الاكواد التالية و الصقها هناك :

الاستيل  الاول : مميز

<b:if cond='data:blog.pageType != "static_page"'><br /> <b:if cond='data:blog.pageType!= "item"'><br /> <style><br /> #blog-pager {<br /> clear:both;<br /> }<br /> .post {<br /> height:auto;<br /> width:31%;<br /> display:inline-block;<br /> text-decoration:none;<br /> float:left;<br /> margin:0 1.1% 2%;<br /> padding:0!important;<br /> }<br /> h3.post-title a {<br /> font-size:95%;<br /> font-family: 'Open Sans Condensed', sans-serif;<br /> text-transform:uppercase;<br /> color:#fff;<br /> padding:0;<br /> text-shadow: 2px 2px 3px #222;<br /> }<br /> h3.post-title {<br /> height: 22px;<br /> text-align:center;<br /> position:absolute;<br /> top:1%;<br /> width:100%;<br /> z-index:101;<br /> overflow:hidden;<br /> margin:0!important;<br /> padding:10px 0;<br /> }<br /> .date-header {<br /> visibility:hidden;<br /> height:0!important;<br /> width:0!important;<br /> margin:0!important;<br /> padding:0!important;<br /> }<br /> .posts-thumb {<br /> width:100%!important;<br /> height:190px!important;<br /> overflow:hidden;<br /> clear:both;<br /> }<br /> .post-body {<br /> border-radius:2px;<br /> box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);<br /> position:relative;<br /> overflow: hidden;<br /> }<br /> .post-body a {<br /> text-decoration: none;<br /> }<br /> .post-body img {<br /> display:block;<br /> width:100%!important;<br /> height:auto!important;<br /> max-width:800px!important;<br /> max-height:400px!important;<br /> min-width:190px!important;<br /> min-height:190px!important;<br /> border:none;<br /> outline:none;<br /> position:relative;<br /> margin: 0px;<br /> padding:0;<br /> }<br /> .post-summary-text {<br /> cursor: pointer;<br /> background-color: rgba(44, 77, 163, 0.8);<br /> color:#fff;<br /> font-size:120%!important;<br /> font-family: 'Open Sans Condensed', sans-serif;<br /> clear:both;<br /> overflow:hidden;<br /> padding:25% 10% 0%;<br /> left: 0;<br /> position: absolute;<br /> text-align: center;<br /> vertical-align: bottom;<br /> text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);<br /> top: 0;<br /> transform: scale(1);<br /> opacity: 0;<br /> z-index: 10;<br /> height: 100%;<br /> transition: all 300ms ease-out 0s;<br /> }<br /> .post-summary-text:hover {<br /> opacity: 1;<br /> }<br /> a.comment-bubble {<br /> color:#fff;<br /> text-decoration:none;<br /> font-size:100%;<br /> width: 100%;<br /> text-align: center;<br /> position:absolute;<br /> top:165px;<br /> left: 0px;<br /> text-shadow:1px 2px 1px #333;<br /> font-family: 'Pacifico', cursive;<br /> z-index: 122;<br /> }<br /> a.comment-bubble:before {<br /> content: "Comments: ";<br /> }<br /> .post-header,.post-footer {<br /> display:none;<br /> }<br /> </style></b:if></b:if><br /> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/><br /> <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

او

الاستيل الثاني  : حسن

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

او

الاستيل الثالث  : بسيط 

<b:if cond='data:blog.pageType != "static_page"'><br /> <b:if cond='data:blog.pageType!= "item"'><br /> <style><br /> #blog-pager {<br /> clear:both;<br /> }<br /> .post {<br /> height:auto;<br /> width:31%;<br /> display:inline-block;<br /> text-decoration:none;<br /> float:left;<br /> margin:0 1.1% 2%;<br /> padding:0!important;<br /> }<br /> h3.post-title a {<br /> font-size:75%;<br /> font-family: 'Open Sans Condensed', sans-serif;<br /> text-transform:uppercase;<br /> color:#111;<br /> padding:0;<br /> }<br /> h3.post-title {<br /> text-align:center;<br /> height:22px;<br /> position:absolute;<br /> bottom:23%;<br /> width:100%;<br /> z-index:101;<br /> overflow:hidden;<br /> margin:0!important;<br /> padding:10px 0;<br /> }<br /> .date-header {<br /> visibility:hidden;<br /> height:0!important;<br /> width:0!important;<br /> margin:0!important;<br /> padding:0!important;<br /> }<br /> .posts-thumb {<br /> width:100%!important;<br /> height:190px!important;<br /> overflow:hidden;<br /> clear:both;<br /> border-bottom:3px solid #00C8BD;<br /> border-top:3px solid #558ABB;<br /> }<br /> .posts-thumb:hover {<br /> border-top:3px solid #FF664E;<br /> border-bottom:3px solid #FEBE36;<br /> }<br /> .post-body {<br /> border-radius:2px;<br /> box-shadow:0 0 6px 1px rgba(0,0,0,0.1);<br /> position:relative;<br /> height:auto;<br /> }<br /> .post-body a {<br /> text-decoration: none;<br /> }<br /> .post-body img {<br /> display:block;<br /> width:100%!important;<br /> height:auto!important;<br /> max-width:800px!important;<br /> max-height:400px!important;<br /> min-width:190px!important;<br /> min-height:190px!important;<br /> border:none;<br /> outline:none;<br /> position:relative;<br /> margin: 0px;<br /> padding:0;<br /> }<br /> .post-summary-text {<br /> color:#555;<br /> background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2yv-hnbT8Z2d6vkgQQ0x1mmvR-aOlek6XCDG_9kBqrnhflocXBe-pGvHvQ2tBiiNMyp_DtUwaDshPLOPHrCgaRjt4TsEdpDcs0dIsDJ8JXkC1Gc4mCQnTg6CCWBvPImP0oo8-1Geg5qzk/s1600/blueprint.png);<br /> font-size:100%!important;<br /> font-family: 'Open Sans Condensed', sans-serif;<br /> text-align:center;<br /> clear:both;<br /> overflow:hidden;<br /> margin:5px 0 0;<br /> padding:17% 10% 6%;<br /> }<br /> a.comment-bubble {<br /> color:#fff;<br /> text-decoration:none;<br /> font-size:110%;<br /> right:10px;<br /> position:absolute;<br /> top:165px;<br /> text-shadow:1px 2px 1px #333;<br /> font-family: 'Pacifico', cursive;<br /> }<br /> a.comment-bubble:before {<br /> content: "Comments: " url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioVetEaWMm-It7JPshyGSLYWNIGCT0eUzkiJjcqLuAZLbUVnDE_AFqeU5cUweTX2eFkeKHNkAlzpPSiK6R-bndGntYSfwtTOtJtBzR84Bi-bLf1R_vghIdRciJJ-Ci_ma5a9voA5XVI4ay/s1600/heart-active.png);<br /> }<br /> .post-header,.post-footer {<br /> display:none;<br /> }<br /> </style></b:if></b:if><br /> <br /> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/><br /> <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

الان ما عليك الا تجريب احد هذه الاستيلات و شاهد النتيجة  

الى هنا  نكون قد وصلنا الى الختام  و  كما  جرت العادة  اذا  صادفتك اي مشكلة في تطبيق الشرح  ما عليك الا طرحه علينا  هنا  و سنجيبك ان شاء الله ,