SIMPLE GRID DESIGN - KAFELKOWY BLOGGER 1

Czy lubicie kafelkowe blogi?

Ja ubóstwiam! :)

A jak wykonać taki powyżej?

Już Wam podpowiadam ;)

Nic trudnego!

Przejdźcie do edycji szablonu...

Wyszukajcie w nim </head>

Nad nim wklejcie kod z poniższej ramki...

<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/AVvXsEiWaBIv-AtcJhgvgs5K1ESVNEJ6s9qyAICgy2Tl5CfU0HW1x3MlS7Q73yDmNjKMDo5hwNem7VJcjkDRRn5c2Ph9Y5LdVVYhU6DcuSqdw936fHi5DYlHI6qc_XOjOSkvHIeCyXzAW3eVzNnI/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>

Następnie w kodzie wyszukajcie <data:post.body/>

Będą trzy takie kody. Drugi i trzeci zastąpcie kodem z poniższej ramki...

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

Następnie w kodzie wyszukajcie </head>

i nad nim wklejcie kod z poniższej ramki...

<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:30.8%;overflow:hidden;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;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><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

Zapiszcie szablon i gotowe! Są kafelki simple ;)

Na koniec możecie wejść w motyw i poszerzyć trochę wasz blog...

W najbliższym czasie zdradzę Wam jak zrobić inne formy moich ulubionych kafelków ;)

Zapraszam! :D