KAFELKOWE BLOGI - JAK WYKONAĆ

Dziś nowe kafelki :D
Jak je wykonać?
Już piszę...

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...
Styl 1, 2 lub 3

Zapisujecie szablon i cieszycie się kafelkami.
Możecie jeszcze wejść w Motyw, Dostosuj i tam zmienić szerokość
waszego bloga. Można też w kodzie zmienić kolory szablonu
jeśli oczywiście potraficie.
Piszcie śmiało. Jakby co, to oczywiście pomogę ;)

Styl 1

<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:left;margin:0 1.1% 2%;padding:0!important}h3.post-title a{font:75% '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 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/AVvXsEgdZvCsX6K86jwE9FJf_WOo4Gq2GvGVFf8EZCicPFi1KwFAw2HtwwUtg1Jb8Mb5CVO9LCY1ndamMN4DGG8JCJCruzIWQ2JGRNKBnz1RchMqwGcwyOYE0HewKphL0d2ae4XdCeCSlQQfVp0_/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/AVvXsEjaddmBVRpoZh_SQCDB74JLqbpFArQQnBSMEnqvTvr8krnz-Xj4_XdzuBpEGl5WVIBbaDvRwu7UU__Tvc6p3Cumqm1lNAjG3irBPBakI-FxocISVQCwY-zSz59Uf6nfua_RjNYjbkMh5Pgr/s1600/heart-active.png);}.post-header,.post-footer{display:none} </style></b:if></b:if> <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/> <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

Styl 2

<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:left;margin:0 1.1% 2%;padding:0!important;}h3.post-title a{font:95% 'Open Sans Condensed',sans-serif;text-transform:uppercase;color:#fff;padding:0;text-shadow:2px 2px 3px #222}h3.post-title{height:22px;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:45px 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> <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/> <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

Styl 3

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType!= "item"'> <style type="text/css"> #blog-pager{clear:both;position:absolute;bottom:0;left:0}.blog-feeds{display:none}.post{height:auto;width:100%;padding:0!important;margin:0 0 30px;display:inline-block;text-decoration:none}h3.post-title a{font:bold 95% 'Open Sans Condensed',sans-serif;text-transform:uppercase;padding:0;color:#fff;text-shadow:3px 2px 2px #222;}h3.post-title,.comments h4{margin:0!important;text-align:center;padding:10px 0;position:absolute;top:10px;width:100%;z-index:200}.post-header{display:none}.date-header{visibility:hidden;height:0!important;width:0!important;padding:0!important;margin:0!important}.posts-thumb{width:100%;height:auto;overflow:hidden;clear:both}.post-body{overflow:hidden;position:relative}.post-body a{text-decoration:none}.post-body img{display:block;width:auto;height:auto;max-width:100%;max-height:none;min-width:100%;min-height:auto;margin:0;padding:0;border:none;outline:none;position:relative}.post-summary-text{cursor:pointer;background-color:rgba(44,77,163,0.8);color:#fff;font:120% 'Open Sans Condensed',sans-serif;padding:84px 10% 0;left:0;position:absolute;text-align:center;vertical-align:bottom;text-shadow:1px 1px 0 rgba(0,0,0,0.1);top:0;opacity:0;z-index:10;height:100%;transition:all 300ms ease-out 0s;}.post-summary-text:hover{opacity:1}.post-footer{display:none}a.comment-bubble{color:#fff;text-decoration:none;font:120% 'Open Sans Condensed',sans-serif;right:5px;z-index:222;position:absolute;top:5px;text-shadow:1px 2px 1px #333;}a.comment-bubble:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaddmBVRpoZh_SQCDB74JLqbpFArQQnBSMEnqvTvr8krnz-Xj4_XdzuBpEGl5WVIBbaDvRwu7UU__Tvc6p3Cumqm1lNAjG3irBPBakI-FxocISVQCwY-zSz59Uf6nfua_RjNYjbkMh5Pgr/s1600/heart-active.png);}.main-inner .column-center-inner{-moz-column-count:3;-moz-column-gap:1px;-webkit-column-count:3;-webkit-column-gap:1px;column-count:3;column-gap:1px;width:100%;padding:0!important} </style></b:if></b:if> <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>