Membentuk Tampilan Tijdschrift dengan Ringkasan Wetsartikel serta Thumbnail pada Blogger

Template dengan tv-programma atau newspaper style merupakan menampilkan ringkasan atau cuplikan pada homepage dengan block kolom pada atas satu sama lain. Jenis template ini sangat terkenal ketika ini, apakah itu informasi atau blog teknologi, seluruh orang membutuhkan rapikan lokasi tv-programma style buat blog mereka.

Terdapat sebagian trik buat membentuk posting timbul dengan misalnya ilustrasi diatas. Sebuah pilihan bakal memakai script readmore buat menampilkan ringkasan postbode serta menambahkan tag kondisional buat menambahkan gaya yang berbeda dari posting baru atau pertama, sebagai akibatnya bakal mempunyai berukuran width yang lebih besar dari posting lama. 

So, tutorial ini bakal memperlihatkan cara mengolah tv-programma style buat Template blogger. Dengan mengikuti tutorial ini, anda mampu membentuk template Blogger yang membosankan serta sederhana sebagai lebih menarik dengan rapikan lokasi tv-programma style.

Menambahkan Tijdschrift/Newspaper style pada Template Blogger

Langkah 1. Sebelum melangkah lebih jauh, silakan membentuk backup dari template anda ketika ini terlebih dahulu buat memastikan bahwa anda tidak bakal kehilangan sesuatu yang penting dari template sebelumnya, caranya login ke Dashboard blogger, pilih blog serta masuk ke tabulator Template , selanjutnya klik pada tombol Cadangkan/Pulihkan pada sudut sebelah kanan. Sesudah anda menyimpan salinan template .xml, klik pada tombol Edit HTML:

Edit Html

Langkah 2. Klik pada mana saja pada dalam kode area serta buka kotak pencarian dengan memakai tombol CTRL+F, kemudian cari shortcode dibawah ini:

<gegevens:postbode.body/>

Catatan: anda menemukan sebagian atau lebih dari satu buat baris diatas, maka relatif berhenti pada baris yang kedua.

Langkah 3. Hapus baris tadi serta masukkan kode dibawah ini:

<b:if cond='gegevens:blog.pageType != &quot;itemdanamp;quot;'>
<b:if cond='gegevens:blog.pageType != &quot;static_pagedanamp;quot;'>
<span group="post-comment-link">
<b:if cond='gegevens:blog.pageType
!= &quot;itemdanamp;quot;'>
<b:if cond='gegevens:postbode.allowComments'>
<a group="comment-link"
expr:href="http://feedproxy.google.com/~r/duniatutorials/~3/fmp1oiXKQKs/gegevens:postbode.addCommentUrl"
expr:onclick='gegevens:postbode.addCommentOnclick'><gegevens:postbode.numComments/></adangt;
</b:ifdangt;
</b:ifdangt;
</spandangt;
<div expr:id='&quot;summarydanamp;quot; +
gegevens:postbode.id'><gegevens:postbode.body/></divdangt;
<script
type="text/javascript">createSummaryAndThumb(&quot;summarydanlt;gegevens:postbode.id/>&quot;);</scriptdangt;
<span group="readmorebutton" style="float:right"><a expr:href="http://feedproxy.google.com/~r/duniatutorials/~3/fmp1oiXKQKs/gegevens:postbode.url">Read
More &#187;</adangt;
</spandangt;</b:ifdangt;</b:ifdangt;
<b:if cond='gegevens:blog.pageType ==
&quot;itemdanamp;quot;'><gegevens:postbode.body/></b:ifdangt;
<b:if cond='gegevens:blog.pageType ==
&quot;static_pagedanamp;quot;'><gegevens:postbode.body/></b:ifdangt;

Catatan: Sobat mampu mengganti goresan pena Read More, dengan teks lain misalnya 'lebih lanjut', 'lanjutkan membaca', ataupun lainnya. 

Langkah 4. Kini cari (CTRL + F) baris dibawah ini:

<b:include gegevens="postbode" name="postbode"/>

Langkah 5. Hapus baris itu pula serta gantikan dengan menambahkan code dibawah ini:

<b:if cond='gegevens:postbode.isFirstPost'>
<b:if cond='gegevens:blog.homepageUrl == gegevens:blog.url'>
<div id='first'>
<b:if cond='gegevens:postbode.title'>
<h3 group="post-title entry-title">
<b:if cond="http://feedproxy.google.com/~r/duniatutorials/~3/fmp1oiXKQKs/gegevens:postbode.verbinding">
<a expr:href="http://feedproxy.google.com/~r/duniatutorials/~3/fmp1oiXKQKs/gegevens:postbode.verbinding"><gegevens:postbode.title/></adangt;
<b:else/>
<b:if cond="http://feedproxy.google.com/~r/duniatutorials/~3/fmp1oiXKQKs/gegevens:postbode.url">
<a expr:href="http://feedproxy.google.com/~r/duniatutorials/~3/fmp1oiXKQKs/gegevens:postbode.url"><gegevens:postbode.title/></adangt;
<b:else/>
<gegevens:postbode.title/>
</b:ifdangt;
</b:ifdangt;
</h3dangt;
</b:ifdangt;
<div group="first-body">


<b:if cond='gegevens:blog.pageType != &quot;itemdanamp;quot;'>
<b:if cond='gegevens:blog.pageType != &quot;static_pagedanamp;quot;'>
<div expr:id='&quot;summary1danamp;quot; +
gegevens:postbode.id'><gegevens:postbode.body/></divdangt;
  <script
type="text/javascript">createSummaryAndThumb1(&quot;summary1danlt;gegevens:postbode.id/>&quot;);</scriptdangt;
<span group="post-comment-link"><b:if cond='gegevens:blog.pageType !=
&quot;itemdanamp;quot;'><b:if cond='gegevens:postbode.allowComments'><a
group="comment-link" expr:href="http://feedproxy.google.com/~r/duniatutorials/~3/fmp1oiXKQKs/gegevens:postbode.addCommentUrl"
expr:onclick='gegevens:postbode.addCommentOnclick'><gegevens:postbode.numComments/></adangt;</b:ifdangt;</b:ifdangt;</spandangt;
<span group="readmorebutton" style="float:right"><a
expr:href="http://feedproxy.google.com/~r/duniatutorials/~3/fmp1oiXKQKs/gegevens:postbode.url">Read More &#187;</adangt;</spandangt;

</b:ifdangt;</b:ifdangt;
<b:if cond='gegevens:blog.pageType ==
&quot;itemdanamp;quot;'><gegevens:postbode.body/></b:ifdangt;
<b:if cond='gegevens:blog.pageType == &quot;static_pagedanamp;quot;'><gegevens:postbode.body/></b:ifdangt;

</divdangt;
</divdangt;
<b:else/>
<b:include gegevens="postbode" name="postbode"/>
</b:ifdangt;
<b:else/>
<b:include gegevens="postbode" name="postbode"/>
</b:ifdangt;

Catatan: Sobat pula mampu mengganti teks Read More pada sini, dengan teks yang ingin anda tampilkan. 

Langkah 6. Cari tag </ headdangt; serta paste script dibawah diatasnya:

<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;
</scriptdangt;

<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);
terugwedstrijd strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.lengthdangt;=1) {
imgtag = '<span group="posts-thumb"
style="float:left;"><img src="'+img[0].src+'" 
width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></spandangt;';
summ = posts_thumb_sum;
}


  var summary = imgtag + '<div group="summary">' + removeHtmlTag(div.innerHTML,summ)
+ '</divdangt;';
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.lengthdangt;=1) {
imgtag = '<span group="first-post-thumb"
style="float:left;"><img src="'+img[0].src+'" 
width="'+img_thumb_width1+'px"
height="'+img_thumb_height1+'px"/></spandangt;';
summ = first_thumb_sum;
}

var summary1 = imgtag + '<div group="summary">' + removeHtmlTag(div.innerHTML,summ)
+ '</divdangt;';
div.innerHTML = summary1;
}

//]]>
</scriptdangt;

Langkah 7. Serta paste script css dibawah diatas tag </headdangt; pula:

<b:if
cond='gegevens:blog.pageType != &quot;static_pagedanamp;quot;'>
<b:if cond='gegevens:blog.pageType !=
&quot;itemdanamp;quot;'>
<style type="text/css">
.first-post-thumb {
    margin-right: 10px;
}

.summary {
    height: 100%;
}

#first { /* Styles for the First Postbode Container */
    width: wagen;
    height: 250px;
    float: left;
    margin-bottom: 10px;
    background-color: #F4F4F4; /* background color for the first postbode */
    border: 1px solid #E5E5E5; /* border for the first postbode */}

.first-body { /* Style for the First Postbode 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 Postbode Title*/
    border-bottom: 2px solid
#DFDFDF;
    color: #515151;
    font-size: 20px;
    display: block;
    margin: 10px wagen;
    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 Postbode Title */
    color: #1061A1;
}

.postbode { /* 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 postbode date */
    display: none;
}
.post-footer {
    display: none;
}
h3.post-title {
    margin: 0px;
}
.readmorebutton {
    margin-top: 5px;
}

.readmorebutton a { /* Styles for the Read More verbinding */
    color: #767676;
    border: 1px solid #E1E1E1;
    background: #EAEAEA; /* Background color for the Read More verbinding */
    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 postbode */
    position: absolute;
    top: 10px;
    right: 0px;
}
.post-comment-link a { /* Listig color for the comments bubble*/
    padding: 10px;
    color: #6A6A6A;
    text-decoration: none;
    font-weight: bold;
}

#blog-pager {
    clear: both;
}</styledangt;
</b:ifdangt;
</b:ifdangt;

Menyesuaikan Rapikan Lokasi Tijdschrift

1. Pada awal script dari langkah 6, kita mengambil bagian ini:

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;

• Nomor pertama pada baris pertama merupakan jumlah letterteken buat pos-pos singkat saat tidak terdapat gambar yang tersedia


• Nomor kedua atau baris kedua merupakan jumlah letterteken yang bakal timbul jika postbode singkat mempunyai gambar.


• baris 3 serta 4 merupakan buat tinggi serta lebar thumbnail(gambar) pada postbode singkat.


• pada goresan pena yang biru pula mempunyai perlakuan yang sama misalnya diatas, Cuma saja yang berwarna biru buat posting teranyar/pertama.

2. Serta akhirnya, kita mempunyai style CSS. Itu kode yang memilih dengan cara apa posting bakal kelihatan pada homepage serta pula pada halaman arsip, melainkan buat posting pertamanya.

Buat mengganti lebar serta tinggi, masing-masing berukuran buat field posting pertama, ubah pada baris ini:

width: wagen;
height: 250px;

Pada bawah posting pertama nilai-nilai buat posting lainnya, cari bagian ini: 

width: 46%;
height: 230px;

Lebar 46% dari lebar kolom pokok serta tinggi diatur ke 230px. Pada sini Sobat mungkin perlu bereksperimen sedikit dengan berukuran buat membentuk mereka lebih baik, jangan misalnya pada blog demo. 

Akhirnya, atur jumlah posting buat ditampilkan pada homepage, sebagai akibatnya tidak bakal terdapat ruang kosong. Pergi ke Setelan> Pos, komentar serta menyebarkan > Tampilkan sebanyak mungkin serta pilih jumlah posting yang ingin ditampilkan.

Berbagi :