JIKA Anda menggunakan template blog bawaan blogger, maka tampilan depan harus diringkas secara manual agar tampil hanya judul, gambar, dan alinea pertama, yaitu dengan menggunakan (nge-klik) "insert jump break" saat menulis posting.
Supaya auto readmore tampil otomatis, maka ada tiga pilihan tampilan sekaligus tiga cara berikut ini, sebagaimana di-share admin blog Helplog berikut ini.
Cara Auto Readmore atau tampilan halaman depan blog berupa judul posting, gambar thumbnail, dan ringkasan (alinea pertama).
4 Cara Membuat Auto Readmore Halaman Depan Blog
1. Klik "Template" -> "Edit HTML"3 . Cari kode <b:includable id='pos t' var='pos t'>Untuk memudhkan pencarian kode tersebut:
- Klik mouse pada area kode HTML, lalu tekan CTRL + F untuk membuka tools "Search Box"
- Copy & Paste kode tersebut dalam "search box" lalu tekan Enter
4. Ganti kode <b:includable id='post' var='post'>....</b:includable> dengan kode di bawah ini :
<b:includable id='post' var='post'> <article expr:class='"blogger-post blogger-post-" + data:blog.pageType' expr:id='"post-" + data:post.id'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div class='blogger-post-part blogger-post-thumbnail-area'> <b:if cond='data:post.thumbnailUrl'> <a expr:href='data:post.url'><img class='blogger-post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/></a> </b:if> </div> </b:if> </b:if> <div class='blogger-post-part blogger-post-body-area'> <h3 class='blogger-post-title'> <b:if cond='data:post.title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> <b:else/> [Untitled] </b:if> </h3> <div class='blogger-post-body'> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <b:if cond='data:post.snippet'> <data:post.snippet/> <b:else/> No content. </b:if> </b:if> </b:if> </div> <footer class='blogger-post-footer'> <div class='blogger-post-footer-line blogger-post-footer-line-1'> <span class='blogger-post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <span class='fn'> <b:if cond='data:post.authorProfileUrl'> <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'><data:post.author/></a> <b:else/> <span class='g-profile'><data:post.author/></span> </b:if> </span> </b:if> </span> <span class='blogger-post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <a class='blogger-post-timestamp-link' expr:href='data:post.url' rel='bookmark' title='Permanent Link'><time class='blogger-post-published published' expr:datetime='data:post.timestampISO8601'><data:post.timestamp/></time></a> </b:if> </span> <span class='blogger-post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:post.allowComments'> <a expr:href='data:post.url + "#comments"'><data:post.commentLabelFull/></a> </b:if> </b:if> </b:if> </span> </div> <div class='blogger-post-footer-line blogger-post-footer-line-2'> <span class='blogger-post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> <b:include data='post' name='postQuickEdit'/> </span> </div> </footer> </div> </article> </b:includable>
Langkah selanjutnya adalah menambahkan kode CSS, berikut ini ada 3 pilihan gaya kode CSS yang bisa kita terapkan:
GAYA - 1, Post Summaries dengan Thumbnails Lingkaran di Kiri :
Kode CSS Gaya-1 :
.blogger-post {padding: 5px 0px 0px; background: #F6F6F6; border-right: 1px dashed #E3E3E3;height:150px; margin:0 0 20px; overflow:hidden; *zoom:1;} .blogger-post:after { content:" "; display:block;clear:both;} .blogger-post-title { font:normal bold 20px/1.2 Arial,Sans-Serif; margin:0 0 10px;padding:0;} .blogger-post-title a{color: #888;} .blogger-post-thumbnail-area {border-radius: 330px;-webkit-border-radius: 330px; -moz-border-radius: 330px; border: 10px solid #E5E5E5;margin-left: 20px;width:120px;height:120px; background-color:#2D3957;float:left;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE_Ox7vVYnJmLyqBPzqhVd6oA0GKkC9jDe8hpHZMg9uyw-wojNhIlUkIL_WwxFyJtQWBLhMm0pwD1VEDbuW8hXT6RPyldxPOHhJPIekh7qq7amee_-LzMk4eBck-3N1KqyK0zoMGxuZVAA/s1600/no-image-available.png'); background-repeat: no-repeat; background-size: 100%;} .blogger-post-body-area:before {border-bottom:40px solid transparent;border-right:40px solid #E4E4E4;border-top:40px solid transparent; width:0;height:0; content:"";margin: 10px 0px 20px -60px;display:inline-block;float: left;} .blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;} .blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;border-left: 1px solid #E3E3E3;} .blogger-post-footer {margin:10px 0 0;padding:10px 0 0;border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif;text-transform:uppercase;color:#999;} .blogger-post-footer a {color: #888;} .blogger-post-item, .blogger-post-static_page {height:auto} .blogger-post-item .blogger-post-body-area, .blogger-post-static_page .blogger-post-body-area {margin:0;padding:20px;font-size:13px;} .blogger-post-item .blogger-post-title, .blogger-post-static_page .blogger-post-title {font-size:30px} .icon-action {width: 10px;height:10px;}
GAYA - 2, Thumbnails dengan judul dan Post Summary di sisi kanan :
Kode CSS-nya :
.blogger-post {background: #F6F6F6;border-right: 1px dashed #E3E3E3;height:200px; margin:0 0 20px; overflow:hidden; *zoom:1;} .blogger-post:after { content:" "; display:block; clear:both;} .blogger-post-title {font:normal bold 20px/1.2 Arial,Sans-Serif;margin:0 0 10px; padding:0;} .blogger-post-title a{color: #888;} .blogger-post-thumbnail-area {width:200px; height:200px;background-color:#2D3957;float:left;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE_Ox7vVYnJmLyqBPzqhVd6oA0GKkC9jDe8hpHZMg9uyw-wojNhIlUkIL_WwxFyJtQWBLhMm0pwD1VEDbuW8hXT6RPyldxPOHhJPIekh7qq7amee_-LzMk4eBck-3N1KqyK0zoMGxuZVAA/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;} .blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;} .blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;} .blogger-post-footer {margin:10px 0 0;padding:10px 0 0; border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase; color:#999;} .blogger-post-footer a {color: #888;} .blogger-post-item, .blogger-post-static_page {height:auto} .blogger-post-item .blogger-post-body-area, .blogger-post-static_page .blogger-post-body-area { margin:0; padding:20px; font-size:13px;} .blogger-post-item .blogger-post-title, .blogger-post-static_page .blogger-post-title {font-size:30px} .icon-action {width: 10px;height:10px;}
GAYA - 3, Blogger Posts Bersisian/kolom dengan judul dan Summaries dibawah Thumbnail (Tata Letak Bergaya Surat Kabar/Koran/Toko Online/Galeri/Video Blog) :
Kode CSS-nya:
#blog-pager {clear: both;} .blogger-post {background: #F6F6F6; border-right: 1px dashed #E3E3E3; border-left: 1px dashed #E3E3E3; height: 405px; width:200px; margin:0 20px 20px 0; padding: 10px 10px 0px; overflow:hidden; float: left; display:inline-block; *zoom:1;} .blogger-post:after { content:" "; display:block; clear:both;} .blogger-post-title { font:normal bold 16px/1.2 Arial,Sans-Serif; margin:0 0 10px; padding:0;} .blogger-post-title a{color: #777;} .blogger-post-thumbnail-area a img{ width:200px; height:200px; background-color:#fff;overflow:hidden;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE_Ox7vVYnJmLyqBPzqhVd6oA0GKkC9jDe8hpHZMg9uyw-wojNhIlUkIL_WwxFyJtQWBLhMm0pwD1VEDbuW8hXT6RPyldxPOHhJPIekh7qq7amee_-LzMk4eBck-3N1KqyK0zoMGxuZVAA/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;} .blogger-post-thumbnail { display:block; width:100%; height:100%; max-width:none;max-height:none;min-width:0; min-height:0; margin:0; padding:0; border:none; outline:none;position:static;} .blogger-post-body-area { padding:10px 20px 20px; margin:10px 0 0; font-size:11px;} .blogger-post-footer {background: #E9E9E9; margin:10px -20px 0; padding:20px; border-top:1px dotted #ddd; font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase; color:#555;} .blogger-post-footer a{color: #888;} .blogger-post-item, .blogger-post-static_page {width:auto;} .blogger-post-item .blogger-post-body-area, .blogger-post-static_page .blogger-post-body-area { margin:0; padding:20px; font-size:13px;} .blogger-post-item .blogger-post-title, .blogger-post-static_page .blogger-post-title {font-size:30px;} .icon-action {width: 10px;height:10px;}
Demikian 3 Cara Membuat Auto Readmore Halaman Depan Blog.
Gaya berikut ini lebih elegan karena posting paling baru tampil beda tersendiri, berupa "Featured Post" dengan lebar kolom FULL.
Cara membuatnya:
1. Ganti kode <data:post.body/> yang kedua dengan :
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More »</a></span></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>
2. Ganti kode <b:include data='post' name='post'/> dengan:
<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary1" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb1("summary1<data:post.id/>");</script>
<span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read More »</a></span>
</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>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
3. Simpan di atas kode </head> :
<script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580;
first_thumb_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;
</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){
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;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = first_thumb_sum;
}
var summary1 = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}
//]]>
</script>
4. Kode CSS simpan di atas kode CSS:
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.first-post-thumb {
margin-right: 10px;
}
.summary {
height: 100%;
}
#first { /* Styles for the First Post Container */
width: auto;
height: 250px;
float: left;
margin-bottom: 10px;
background-color: #F4F4F4; /* background color for the first post */
border: 1px solid #E5E5E5; /* border for the first post */}
.first-body { /* Style for the First Post summary */
color: #545454;
font-size: 13px;
text-align: justify;
padding: 5px 10px;
line-height: 1.5em;
}
#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/
border-bottom: 2px solid #DFDFDF;
color: #515151;
font-size: 20px;
display: block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-weight: bold;
text-align: left;
line-height: 1.4em;
background: none;
}
#first h3 a:hover { /* Color on mouseover for the First Post Title */
color: #1061A1;
}
.post { /* Styles for the small posts container */
float: left;
margin: 0px 6px 2% 5px;
width: 46%;
height: 230px;
padding: 0px 5px 5px 5px;
background: #FCFCFC; /* background color for the small posts */
border: 1px solid #E5E5E5; /* border for the small posts */
overflow: hidden;
}
.posts-thumb { /* Style for the small posts thumbnails */
margin-right: 10px;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
background: none;
border: none;
box-shadow: none;
padding: 0;
}
h3.post-title a{ /* Style for the small posts titles */
font-size: 14px;
color: #747474;
text-transform: uppercase;
}
h2.date-header { /* Hide the post date */
display: none;
}
.post-footer {
display: none;
}
h3.post-title {
margin: 0px;
}
.readmorebutton {
margin-top: 5px;
}
.readmorebutton a { /* Styles for the Read More link */
color: #767676;
border: 1px solid #E1E1E1;
background: #EAEAEA; /* Background color for the Read More link */
text-decoration: none;
padding: 3px 5px;
font-weight: bold;
font-size: 11px;
float: right;
position: relative;
}
.post-comment-link { /* Style for the comment bubble of posts below */
position: absolute;
top: -35px;
right: -10px;
display: block;
border: 1px solid #E1E1E1; /* border for the comment bubble */
background: #EAEAEA; /* background color for the comment bubble */
font-size: 11px;
position: absolute;
}
#first .post-comment-link { /* Style for the comment bubble of first post */
position: absolute;
top: 10px;
right: 0px;
}
.post-comment-link a { /* Link color for the comments bubble*/
padding: 10px;
color: #6A6A6A;
text-decoration: none;
font-weight: bold;
}
#blog-pager {
clear: both;
}
</style>
</b:if>
</b:if>
Sumber:
http://helplogger.blogspot.co.id/2014/01/create-magazine-style-layout-for-blogger-posts.html
0 Komentar
Penulisan markup di komentar