Membuat Masonry dan Grid Style Posts di Blogger
Inilah cara membuat Masonry dan Grid Style Posts di Blogger
Fitur apa yang dapat Anda harapkan dari sebuah pos gaya grid dalam Blogger?
- Semua tulisan akan mengikuti gaya kotak ketika beralih ke tampilan grid.
- Sementara kode sedang disesuaikan, tulisan yang tidak tersentuh. Panjangnya, bagaimanapun, otomatis bisa sesuai.
- Auto Read More akan diterapkan pada semua posting.
- Thumbnail secara otomatis ditambahkan berdasarkan gambar pertama yang ditemukan di setiap posting.
- Kode aman dan digunakan di seluruh papan. Bahkan, 99% dari blogger menggunakan kode yang mirip dengan mengaktifkan posting gaya grid dalam blogger.
1.Login di Blogger dashboard
2.Dari menu "Template" Pilih "Edit HTML"
3.Tekan " CTRL+F " pada keyboard dan cari kode :
4.Tambahkan script dibawah ini sebelum kode </head>
5.Cari kode :
6.Ganti dengan dibawah ini :
7.Tambahkan script dibawah ini (pilih salah satu dari 4 script) sebelum kode :
8.Simpan template dengan klik pada tombol save.
Fitur apa yang dapat Anda harapkan dari sebuah pos gaya grid dalam Blogger?
- Semua tulisan akan mengikuti gaya kotak ketika beralih ke tampilan grid.
- Sementara kode sedang disesuaikan, tulisan yang tidak tersentuh. Panjangnya, bagaimanapun, otomatis bisa sesuai.
- Auto Read More akan diterapkan pada semua posting.
- Thumbnail secara otomatis ditambahkan berdasarkan gambar pertama yang ditemukan di setiap posting.
- Kode aman dan digunakan di seluruh papan. Bahkan, 99% dari blogger menggunakan kode yang mirip dengan mengaktifkan posting gaya grid dalam blogger.
1.Login di Blogger dashboard
2.Dari menu "Template" Pilih "Edit HTML"
3.Tekan " CTRL+F " pada keyboard dan cari kode :
</head>
4.Tambahkan script dibawah ini sebelum kode </head>
<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/AVvXsEgG42WpZEJHfb6GT_cyUnXXBFD_25WetDA7NRNNjwDQD_AhWBbdpHaagPhMXtw3ApphyphenhyphenRuTS8VNSkDoLMbXahaNUUVwHgye-wAk2wpl_W7oJl4uKA-qimTWxKjDYfA6CUKSib0fddpTiqC4/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>
5.Cari kode :
<data:post.body/>
6.Ganti dengan dibawah 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>
7.Tambahkan script dibawah ini (pilih salah satu dari 4 script) sebelum kode :
</head>
Simple Grid Design
<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: '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%!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-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: bold;
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'/>
Grid Layout with Post Summary and Thumbnail
<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/AVvXsEjQeBDKVJhwamQ3Z2NpNlIkL9-UX44yW7eM4gGzR1GcjdEy2ji4JbZnP_z2tTyic8HS4Ib5o9-9IQEVwUQn0dXqK3Zv0T6mHGTDh68TmiPc8YqmemdYJXHN0AEisiAqshRh_OkMDk7Rpakb/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/AVvXsEgwCB83QqLKuyn1RCv-aeaFRW3xF41Kt2w6u3XysAlzhfIxg05Ry1nviWLXAKMYRIkOVABi_myXJSgJ3iTGUopwt6n9lw41Jk6DhjYfsplZZ3yAMJqEypVO2aLeyVJItGSB5_d7y7mkqrk9/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'/>
Grid Layout with Text Snippet on Hover
<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:95%;
font-family: '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%!important;
height:190px!important;
overflow:hidden;
clear:both;
}
.post-body {
border-radius:2px;
box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);
position:relative;
overflow: hidden;
}
.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 {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: 'Open Sans Condensed', sans-serif;
clear:both;
overflow:hidden;
padding:25% 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;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
width: 100%;
text-align: center;
position:absolute;
top:165px;
left: 0px;
text-shadow:1px 2px 1px #333;
font-family: 'Pacifico', cursive;
z-index: 122;
}
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'/>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
Masonry Layout (Pinterest Like Grid)
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style>
#blog-pager {
clear: both;
position: absolute;
bottom: 0px;
left: 0px;
}
.blog-feeds {
display: none;
}
.post {
height: auto;
width: 100%;
padding: 0px !important;
margin: 0px 0px 30px;
display: inline-block;
text-decoration: none;
}
h3.post-title a{
font-size: 95%;
font-family: 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
padding: 0px;
color: #fff;
text-shadow: 3px 2px 2px #222;
font-weight: bold;
}
h3.post-title, .comments h4 {
margin: 0px !important;
text-align: center;
padding: 10px 0px;
position: absolute;
top: 10px;
width: 100%;
z-index: 200;
}
.post-header {
display: none;
}
.date-header {
visibility: hidden;
height: 0px !important;
width: 0px !important;
padding: 0px !important;
margin: 0px !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: 0px;
padding: 0;
border: none;
outline: none;
position: relative;
}
.post-summary-text {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: 'Open Sans Condensed', sans-serif;
clear:both;
overflow:hidden;
padding:25% 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;
transform: scale(1);
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-size: 120%;
right: 5px;
z-index: 222;
position: absolute;
top: 5px;
text-shadow: 1px 2px 1px #333;
font-family: 'Open Sans Condensed', sans-serif;
}
a.comment-bubble:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwCB83QqLKuyn1RCv-aeaFRW3xF41Kt2w6u3XysAlzhfIxg05Ry1nviWLXAKMYRIkOVABi_myXJSgJ3iTGUopwt6n9lw41Jk6DhjYfsplZZ3yAMJqEypVO2aLeyVJItGSB5_d7y7mkqrk9/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: 0px !important;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
8.Simpan template dengan klik pada tombol save.