halo guys dalam toturial x ini saya ingin menjelaskan bagai mana caranya membuat auto readmore yang pada blog sebelum itu ketahui lah ada 2 bagian readmore
yang pertama manual readmore seperti ini contoh gambar nya
wakut sedang menulis artikle .
dan ini gambar jika post sudah berada dalam blog
(kurang menarik ya)
manual readmore adalah cara paling simple yang tidak perlu mengedit html atau javascript namun kurang menarik di blog
untuk yang manual kalian hanya perlu menekan ini di bagian blog
dan itu adalah cara untuk manual.
oke dan untuk yang autoreadmore atau seperti ini gambar nya
nah itu autoreadmore keren bukan?
oke langsung aja yah
langkah : pertama login ke blogger
langkah : dua ke "tample" next "edit html
langkah : tiga klik dimana aja di dalam kotak kode area lalu kelik ctrl+f buat buka search box
lalu pastekan kode di bawah ini (di dalam kotak search bar)
</head>
setelah menemukan kode head taruh kode ini di atas nya kode </head>
ini kode nya
<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/AVvXsEizWsaMzvFAkhV7drsU8sNwXtq87ZuqgbsVk_lP-GYIWyaLXPh_UJsDIJXzjKPIKaP1troqp76fnuL-64qGUpWQAaKed_CZCjDiNVIUunU6EeS6YnbO5QXOgMnBEI-OkbhgPSx57AwF06dq/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>
jika sudah terpasang pada kotak html gambar nya seperti ini
jika sudah pastekan kode di bawah ini di kotak searchbox
<data:post.body/>
ingat <data:post.body/> di dalam blog ada 2 bagian pilih yang ke 2 cara nya
setelah di kotak search bar kan kalian pasti mengklik enter nah klik lagi enter nya
ini contoh gambar nya
hapus <data:post.body/> yang ke 2 dan gantikan dengan kode di bawah 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>
dan ini gambar kalo kamu udah ganti <data:post.body/>
pastekan kode dibawah ini di atas kode
</head>
ini tampilan readmore nya
ini kode nya
<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'/>
tolong jangan edit edit kode readmore nya ntar takut nya ga work
mohon maaf bila ada kesalan ^-^ saya hanya menyampaikan
jika ada yang salah silahkan komen di bawah ya
demikian dari saya
cara membuat auto readmore kotak atau grid layout pada blog
