Cara Membuat Auto Readmore Grid Style - Tiga Kolom berupa Thumbnail Image, Judul, dan Ringkasan di Halaman Depan (Homepage) Blogger.
Tips dan kode ini untuk template bawaan Blogger yang akan dimodifikasi menjadi tiga kolom di halaman depannya, seperti gambar ini:
Simpan di atas kode </head>
<script type='text/javascript'> posts_noimage_sum = 100; posts_img_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_noimage_sum; if(img.length>=1) { imgtag = '<span class="post-img" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>'; summ = posts_img_sum; } else { imgtag = '<span class="post-img" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6gZpIG4AAvZjlntjaDW-ACK0KApYUr4VfGJ6SavlkdrVxxJ5gJMtz9dYftwEx_zBZmERm46i9dd_vXgTh8ZRhxYWysYxo3Spg2BVPE8jw-n45cqWcHiRylwaK_nGwkK6u-qbYyNsmn2Z7/s1600/BloggerSpice+no+image.jpg" style="margin-top: -10px;margin-left: -10px;" /></a></span>'; summ = posts_img_sum; } var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-details">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>'; div.innerHTML = summary; } //]]> </script> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType!= "item"'> <style> #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: 0px !important; } h3.post-title a { font-size:75%; font-family: 'Oswald', sans-serif; text-transform:uppercase; padding:0; color:#444; } h3.post-title { height: 24px; text-align:center; width:100%; margin:0!important; padding-bottom: 4%; } .date-header { display: none; } .post-body a { text-decoration: none; } .post-img { width:100%!important; height:190px!important; overflow:hidden; clear:both; } .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-details { color:#777; font-size:100%!important; font-family: 'Oswald', 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: bold; right:10px; position:absolute; top:165px; text-shadow:1px 2px 1px #333; font-family: 'Oswald', 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=Oswald:400,700|Open+Sans:400,700' rel='stylesheet' type='text/css'/>Ganti <data:post.body/> dengan kode berikut ini:
<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>
Save templates!
Source
No comments:
Write commentsNO SPAM, Please...!