Templete download: Search results for cara-membuat-auto-read-more-ringkasan

Showing posts sorted by relevance for query cara-membuat-auto-read-more-ringkasan. Sort by date Show all posts

Cara Membuat Auto Read More (Ringkasan Post & Gambar Thumbnail) di Halaman Depan Blog Tanpa Javascript sehingga Fast Loading.

di Halaman Depan Blog Tanpa Javascript sehingga Fast Loading Cara Membuat Auto Read More Ringkasan Post & Gambar Thumbnail

Auto Read More yakni istilah bagi tampilan halaman depan blog berupa ringkasan atau berupa judul dan kutipan alinea pertama plus gambar (image) thumbnail.

Jika Anda memakai template yang disediakan blogger (default), untuk menampilkan Auto Read More Ringkasan Post & Gambar Thumbnail harus klik sajian "Insert jump break" yang ada di atas, di samping icon "Insert a video".

Auto Read More Ringkasan Post & Gambar Thumbnail ini menjadi tampilan umum blog ketika ini biar lebih banyak posting yang tampil di homepage dan banyak pilihan buat pembaca. Template Blog SEO Friendly terbaru umumnya sudah memakai auto read more ini.

Bisa dikatakan, tampilan halaman depan blog berupa Auto Read More Ringkasan Post & Gambar Thumbnail sudah masuk kategori User Experience (UX) sehingga blog kita ramah pembaca (user friendly).

Contoh tampilan Auto Read More Ringkasan Post & Gambar Thumbnail yakni ini, namun tanpa link teks "Read more" atau "Baca Selengkapnya", sebab user sudah paham jikalau ingin membuka tulisan, yaitu dengan klik Judul Posting.

Macam-Macam Tampilan Auto Read More

Berikut ini jenis-jenis tampilan ringkasan posting plus gambar di halaman depan blog menyerupai dishare Help Logger, plus cara menciptakan atau memasangnya, tanpa Javascript sehingga fasy loading (Stylish Post Summaries and Thumbnails for Blogger - No JavaScript Required).

Cara Membuat Auto Read More Ringkasan Post & Gambar

1. Klik Template > Edit HTML

2. Klik mouse di aera aba-aba yang terbuka.
3. Tekan CTRL + F untuk membuka kotak pencarian aba-aba di kanan atas.
4. Copy & paste aba-aba berikut ini di kotak pencarian yang terbuka, kemudian tekan Enter

<b:includable id='post' var='post'>

5. Hapus aba-aba <b:includable id='post' var='post'>...</b:includable> dan ganti dengan aba-aba berikut 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>

6. Cari (CTRL + F) aba-aba ]]></b:skin> dan Copas salah satu aba-aba berikut ini di atasnya:

Ada tiga pilihan tampilan dan aba-aba CSS-nya. Silakan pilih sesuai dengan tampilan Auto Read More Ringkasan Post & Gambar Thumbnail di Halaman Depan Blog yang Anda kehendaki:

Model Auto Read More #1

Kode CSS;

.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/AVvXsEgc5IAg9R1orYGsx-BWawuSP_JLszRODRUBVEHVOulhjYwbEMdYVbKDRzq7KKS3AWSUgymq6tKITYm2uP89ULIamR3lJZMiVtlTKB-IjkdZhdLuGciLcp_I3a0K59L4-nf-37pOh-a5G1m1/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;}

Model Auto Read More Ringkasan Post & Gambar Thumbnail #2

Kode CSS:

.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/AVvXsEgc5IAg9R1orYGsx-BWawuSP_JLszRODRUBVEHVOulhjYwbEMdYVbKDRzq7KKS3AWSUgymq6tKITYm2uP89ULIamR3lJZMiVtlTKB-IjkdZhdLuGciLcp_I3a0K59L4-nf-37pOh-a5G1m1/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;}

Auto Read More Model #3

#blog-pager {clear: both;}
.blogger-post {background: #F6F6F6; border-right: 1px dashed #E3E3E3; border-left: 1px dashed #E3E3E3; 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/AVvXsEgc5IAg9R1orYGsx-BWawuSP_JLszRODRUBVEHVOulhjYwbEMdYVbKDRzq7KKS3AWSUgymq6tKITYm2uP89ULIamR3lJZMiVtlTKB-IjkdZhdLuGciLcp_I3a0K59L4-nf-37pOh-a5G1m1/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;}

7. Kode berikut ini untuk menghindari gambar buram (blur). Copas di atas aba-aba </body>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i<thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("Blog1",210);
</script>
</b:if>
</b:if>

Save template!

Cara MembuatAuto Read More Biasa

Jika Anda ingin menampilkan Auto Read More + Gambar Thumbnail biasa, menyerupai blog aku ini, gunakan aba-aba yang dishare Blogger Central berikut ini.

1. Copas aba-aba berikut ini di atas aba-aba </head>

<script type='text/javascript'> var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail summary_noimg = 430; //summary length when no image summary_img = 340; //summary length when with image img_thumb_height = 200; img_thumb_width = 200; </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 = summary_noimg; if(thumbnail_mode == "yes") { if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>

2. Cari dan Ganti kode <data:post.body/> dengan kode:

<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/> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='more' expr:href='data:post.url'>Read more ...</a> </b:if> </b:if>

3. Save Template!

Jika gambarnya buram, gunakan aba-aba yang ada di posting Mengatasi Gambar Buram Auto Readmore. Wasalam. (blogromeltea.blogspot.com).*

Auto Readmore Blog Gambar Thumbnail di Samping Judul Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul

Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul Halaman Depan Blogger.

Berikut ini cara membuat Auto Readmore blog dengan posisi gambar di samping judul atau judul di kanan gambar thumbnail.

Sebelumnya saya sudah share cara menciptakan auto readmore lainnya, namun semuanya posisi gambar di bawah judul.

Seperti dijelaskan sebelumnya, auto read more yakni istilah di dunia blogging atau kalangan blogger merujuk pada tampilan halaman depan (homepage) blog berupa judul, gambar kecil (thumbnail), dan ringkasan goresan pena (cuplikan aliena pertama postingan).

Dianamakan Auto Read More alasannya yakni biasanya ada link/tulisan Read More atau Baca Selengkapnya di bab akhir. Disebut Auto karena arahan di bawah ini secara otomatis meringkas postingan, tanpa cara manual dengan klik "insert jump break" ketika menulis postingan.

Lebih jelasnya, lihat halaman depan blog ini, atau menyerupai screenshot gambar auto readmore blogger di bawah ini.

Nah, tutorial dengan arahan auto readmore yang sudah saya modifikasi di bawah ini akan menampilkan halaman depan blogger jadi menyerupai gambar di atas.

Cara meringkas goresan pena di halaman depan blog ini khususnya untuk template blog bawaan blogger versi simple (sederhana) yang masih menampilkan goresan pena secara utuh (full post) di halalaman depan.

Pilih Template Blog Bawaan Blogger versi Simple (Sederhana)

Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul

Login ke Blogger Anda. Buat blog gres atau ganti template dengan versi Simple. Lakukan langkah berikut ini:

1. Klik Tema > Edit HTML

1. Klik Tema > Edit HTML
2. Cari (Ctrl+F) arahan </head>
3. Copas/simpan arahan berikut ini di atas arahan </head>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.post-thumbnail{float:left;margin-right:20px;background:#fff;margin-bottom: 5px;}
.post h2{font-size:20px;font-weight:normal;line-height:1.2em;margin-bottom:10px;margin-top:0}
.post h2 a,.post h3 a:visited{color:#0060A6;display:block;text-decoration:none}
.post h2 a:hover{color:#FF0084}
.post-footer,.date-header,.feed-links {display:none}
</style>
</b:if>
</b:if>

4. Cari dan HAPUS arahan berikut ini yang ada di bawah arahan <a expr:name='data:post.id'/> yang kedua.

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

5. Ganti dengan arahan berikut ini:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='140px' width='180px'/>
<b:else/>
<img alt='no image' class='post-thumbnail' height='140px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEEcPmczPI5bjSwkBVk34hVAFvJyOsamWykCcfYtCoYKH9jHGBfWIGQWCs3RMqxgxAcOJmAn3g8520_bMJNXfg3UWGigvV3anNnDxIRobyetzm-oSeU2oSy3cSe-32QmgtXR70XNLmTeo/s200-c/last%2528gr%2529256.jpg' width='180px'/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.title'>
<h2 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>

6. HAPUS dan GANTI kode <data:post.body/> yang kedua dengan arahan berikut ini:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<data:post.snippet/>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

7. HAPUS juga arahan berikut ini yang ada di atas kode <div class='post-footer'>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

8. Simpan arahan javascript berikut ini di atas arahan </body>

Kode ini untuk mengatasi gambar buram jikalau ukuran thumbnail imagenya lebih dari 72 pixel

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("Blog1");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c/gi, "s200-c");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

9. Save! Simpan Tempate Anda.

Itu ia Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul. Semoga berfungsi dengan baik di blog Anda. Wasalam. (blogromeltea.blogspot.com).*

Cara Membuat Auto Readmore Fast Loading Tanpa Javascript di Blog.

Auto Readmore ialah istilah bagi tampilan halaman depan blog berupa judul, gambar thumbnail, dan kutipan (summary, snippet) teks alinea pertama.

Contohnya halaman depan blog ini. Posting tidak tampil penuh.

Disebut Readmore alasannya ialah biasanya ada link bertuliskan "read more" atau "baca selengkapnya", meski belakangan link tersebut jarang dipakai para blogger, alasannya ialah Google juga tidak menampilkannya di halaman hasil pencarian (SERP).

Disebut Auto Readmore alasannya ialah postingan akan otomatis tampil berupa judul, gambar thumbnail, dan ringkasan di halaman depan.

Cara Membuat Auto Readmore Fast Loading Tanpa Javascript di Blog

Bagi Anda yang blognya masih menggunakan template bawaan blogger dan postingan halaman depan masih tampil penuh (semua artikel), gunakan cara dan arahan berikut ini untuk menampilkan auto readmore.

1- Klik Tema > Edit Template
2- Cari arahan ]]></b:skin>
3- Copy arahan CSS Auto Readmore berikut di atas arahan ]]></b:skin>

.thumbnail-post {width:100px !important; height:80px !important; float:left; margin:0px 15px 5px 0px;}

4- Cari dan ganti arahan <data:post.body/> yang kedua dengan arahan berikut ini:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'><img class='thumbnail-post' expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='thumbnail-post' expr:alt='data:post.title' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<div class='rm-button-wrap'>
<a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
</div>
</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>

5- Save Template !

Kode Auto Readmore di atas Fast Loading alasannya ialah tanpa Javascript sekaligus ramah mesin telusur (SEO Friendly) gambar thumbnailnya sudah otomatis menampilkan deskripsi gambar (judul dan alternatif teks) yang diambil dari judul postingan.

Anda dapat mengubah ukuran gambarnya di kode CSS Auto Readmore bab width dan height.

Demikian Cara Membuat Auto Readmore Fast Loading Tanpa Javascript di Blog. Wasalam.*

Cara Membuat Template Blog Sendiri dengan Bootstrap

Cara Membuat Template Blog Sendiri dengan Bootstrap. Responsive 100% dan Fast Loading. Template blogger starter-simple sederhana pisan. Tinggal dipoles di CSS.

Apa Itu Bootstrap?

Sebelum ke teknis cara menciptakan template blogger sendiri dengan bootstrap, kita kenali dulu apa itu bootstrap.

Bootstrap yaitu produk Twitter untuk membangun situs web atau blog berbasis HTML dan CSS.

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates.
Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes. (Get Bootstrap)

Menurut Wikipedia, Twitter Bootstrap yaitu sebuah alat bantu untuk menciptakan sebuah tampilan halaman website yang sanggup mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website.

Sesuai namanya, website yang dibentuk dengan alat bantu ini mempunyai tampilan halaman yang sama / menyerupai dengan tampilan halaman Twitter atau desainer juga sanggup mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang sanggup menciptakan layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun memakai JavaScript.
Template blog yang memakai Bootstrap dijamin Mobile Friendly alias Responsive alasannya orientasi kodenya memang "mobile first".

Cara Membuat Template Blog Sendiri dengan Bootstrap

Berikut ini cara Membuat Template Blog Sendiri dengan Bootstrap yang layak Anda coba. Jika kesannya bagus, sanggup Anda jual tuh templatenya!

Tahapan Membuat Template Blog Sendiri dengan Bootstrap
'
1. Buat Blog Baru di Blogger
2. Klik Template > Edit HTML
3. Hapus SEMUA arahan yang ada, lalu...
4. Copas arahan berikut ini!

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta expr:content='data:blog.metaDescription' name='description'/>

<b:skin><![CDATA[
/*
Name: Nama Template
Author: Nama Desainer
URL: Url Blog Desainer
*/

]]></b:skin> 

</head>

<body>


<div class='bs-example'>

<nav class='navbar navbar-default'>
<div class='container-fluid'>

<div class='navbar-header'>
<button class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand' href='#'>
<img alt='Brand' src='Logo kau / atau sanggup diganti dengan goresan pena disini'/>
</a>
</div>


<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'><a href='#'>Link <span class='sr-only'>(current)</span></a></li>
<li><a href='#'>Link</a></li>
<li class='dropdown'>
<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
<ul class='dropdown-menu' role='menu'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
<li class='divider'/>
<li><a href='#'>One more separated link</a></li>
</ul>
</li>
<li><a href='/?m=1'>Mobile View</a></li>
</ul>
<form class='navbar-form navbar-left' expr:action='data:blog.homepageUrl + "search"' role='search'>
<div class='form-group'>
<input class='form-control' name='q' placeholder='Search' type='text'/>
</div>
<button class='btn btn-default' type='submit'>Submit</button>
</form>
<ul class='nav navbar-nav navbar-right'>
<li><a href='#'>Link</a></li>
<li class='dropdown'>
<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
<ul class='dropdown-menu' role='menu'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div> 

<div class='container outer-wrapper'> 

<div class='blog-header'> 
<div class='container'>
<b:section class='header' id='header1' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
</b:section>
</div>
</div>

<div class='row'>
<div class='col-md-8 blog-main'> 
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<aside class='col-xs-4 blog-sidebar'> 
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'/>
</b:section>
</aside> 
</div> 


<div class='clear'/>

</div> 

<footer class='blog-footer'> 
<p>Copyright © <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All rights reserved.</p>
<p>
<a href='#'>Back to top</a>
</p>
</footer> 

</body> 

</HTML>

5. Pasang Bootstrap

5.1 Pasang di atas arahan </head>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>

5.2 Pasang arahan berikut ini di atas arahan </body>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type='text/javascript'/>

6. Copas arahan berikut ini di atas kode </head>

<style type='text/css'>

/*Navigation*/
.navbar {
    border-radius:0;
}
/*Nav Brand*/
.navbar-brand img {
    width: 32px;
    height: 32px;
}
.navbar-brand {
    padding: 10px 20px;
}
/*Blog Wrapper*/
.blog-header {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: -20px;
}
.blog-main {
    font-size: 18px;
    line-height: 1.5;
}
.blog-sidebar {
    margin:0;
}
/*Headings*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 0;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #333;
}
/*Posts*/
.post .post-title {
    margin-bottom:0;
}
.post-body {
    margin:0 0 .75em;
    line-height:1.6em;
    font-size:15px;
}
/*Post Image*/
.post table.tr-caption-container td {
    border:none;
    padding:8px;
}
.post table.tr-caption-container, .post table.tr-caption-container img, .post img {
    max-width:100%;
    height:auto;
}
.post td.tr-caption {
    color: #333;
    font-size: 80%;
    padding: 8px 8px 8px !important;
    background-color: #eee;
    font-style: italic;
}
img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}
table.tr-caption-container {
    padding:4px;
    margin-bottom:.5em
}
td.tr-caption {
    font-size:80%
}
.post table caption {
    border:none;
    font-style:italic;
}
.post table caption {
    border:1px solid #d8dde1;
    padding:.2em .5em;
    text-align:left;
    vertical-align:top;
}
/*Post Footer*/
.post-footer {
    margin:.75em 0;
    letter-spacing:.1em;
    line-height:1.4em;
    font-size: 12px;
}
/*Post Meta*/
.blog-post-meta {
    margin: 10px 0 5px;
    color: #999;
    font-size: 15px;
}
.blog-post-meta a {
    color: #999;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}
.blog-post-meta a:hover {
    border-bottom: 1px solid #23527c;
}
.timestamp-link {
    cursor:help;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}
.timestamp-link:hover {
    border-bottom: 1px solid #23527c;
}
/*Breadcrumbs and Date Header Font-size*/
.breadcrumb, .date-header {
    font-size: 13px;
}
/*SideBar*/
.sidebar .widget ul, .sidebar .widget ol {
    margin-top:0
}
.sidebar h2, .sidebar h3, .footer h2 {
    color: #333;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    position: relative;
    padding: 8px 15px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
/*Popular Posts*/
.popular-posts ul, .popular-posts li {
    margin:0;
    padding:0;
    list-style:none
}
.popular-posts li {
    margin-bottom:.6em
}
.PopularPosts .item-snippet {
    font-size:12px;
    color:#333;
    max-height:45px;
    overflow:hidden;
}
.PopularPosts .item-thumbnail {
    transition: all 0.15s ease-in-out 0s;
    margin:0 8px 0 0;
    display:inline;
    opacity:10;
}
.PopularPosts .item-thumbnail a img {
    height:69px;
    width:69px;
    display:block;
    margin:0;
    padding:2px;
    border:1px solid #e8e8e8 !important;
}
.PopularPosts .item-thumbnail a img:hover {
    background:#00AFAF;
    border:1px solid #00AFAF !important;
}
.PopularPosts .widget-content ul li {
    padding:3px 0px !important;
    border-bottom:1px solid #e2e2e2;
}
/*Footer*/
.blog-footer {
    padding: 40px 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: 1px solid #e5e5e5;
}
.blog-footer a {
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}
.blog-footer a:hover {
    border-bottom: 1px solid #23527c;
}
/*Comments*/
#comments h4 {
    margin:1em 0;
    font-weight:bold;
    line-height:1.4em;
    text-transform:uppercase;
    letter-spacing:.2em;
}
#comments-block {
    margin:1em 0 1.5em;
    line-height:1.6em;
}
#comments-block .comment-author {
    margin:.5em 0;
}
#comments-block .comment-body {
    margin:.25em 0 0;
}
#comments-block .comment-footer {
    margin:-.25em 0 2em;
    line-height:1.4em;
    text-transform:uppercase;
    letter-spacing:.1em;
}
#comments-block .comment-body p {
    margin:0 0 .75em;
}
.deleted-comment {
    font-style:italic;
    color:gray;
}
.feed-links {
    display:none;
}
/*Responsive*/

/*Override Bootstrap's default container.*/
@media (min-width: 1200px) {
    .container {
        width: 970px;
    }
}
@media screen and (max-width: 960px) {
    .blog-main, .blog-sidebar {
        float: none;
        display: block;
        width: auto;
    }
}
</style>

7. Save Template!

Beres! Anda tinggal lengkapi dengan widget lainnya, seperti: Memasang arahan Auto Read More semoga tampilan goresan pena halaman depan berupa ringkasan, tidak full artikel, dan Menghapus Teks Subscribe to Atom.

Demikian Membuat Template Blog Sendiri dengan Bootstrap. Saya sudah terapkan. Hasilnya: Bootstap fo Blogger. Mau? Nanti kalo sudah beres 100% dibagikan gratis.

Cek ada dulu yang sudah ada: Koleksi Template Boootsrap Gratis. Wasalam. (blogromeltea.blogspot.com).*

Sumber:
http://www.w3schools.com/bootstrap/default.asp
http://templetedownload.blogspot.com//search?q=cara-membuat-auto-read-more-ringkasan
https://startbootstrap.com/bootstrap-resources/3

Templete download

Cara Menciptakan Auto Read More Ringkasan Post & Gambar Thumbnail

Macam-Macam Tampilan Auto Read More

Cara MembuatAuto Read More Biasa

Cara Menciptakan Auto Readmore Blog Gambar Thumbnail Di Samping Judul

Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul

Cara Menciptakan Auto Readmore Fast Loading Tanpa Javascript Di Blog

Cara Membuat Auto Readmore Fast Loading Tanpa Javascript di Blog

Cara Menciptakan Template Blog Sendiri Dengan Bootstrap

Cara Membuat Template Blog Sendiri dengan Bootstrap

Labels

Popular Posts

Templete download

Cara Menciptakan Auto Read More Ringkasan Post & Gambar Thumbnail

Macam-Macam Tampilan Auto Read More

Cara MembuatAuto Read More Biasa

Cara Menciptakan Auto Readmore Blog Gambar Thumbnail Di Samping Judul

Cara Membuat Auto Readmore Blog Gambar Thumbnail di Samping Judul

Cara Menciptakan Auto Readmore Fast Loading Tanpa Javascript Di Blog

Cara Membuat Auto Readmore Fast Loading Tanpa Javascript di Blog

Cara Menciptakan Template Blog Sendiri Dengan Bootstrap

Cara Membuat Template Blog Sendiri dengan Bootstrap

Follow Us

Labels

Popular Posts