Cara Serba Mudah: Cara Memindahkan Judul Posting Ke Sebelah Kanan Thumbnail

Cara Memindahkan Judul Posting Ke Sebelah Kanan Thumbnail

Sebagian Orang pasti bingung atau bertanya tanya, bagaimana sih cara memindahkan judul posting kekanan thumbnail atau gambar, pertama tama saya juga bingung cara memindahkannya dan bagaimana codenya.
Mungkin bila kamu melihat website atau blog orang lain yang menggunakan judul posting disamping thumbail maka web tersebut lebih fleksibel dilihat dan lebih enak untuk dilihat.

Contoh Gambar

Selain memindahkan judul disamping gambar kode ini juga bisa digunakan sebagai readmore otomatis yang tentunya anda tidak usah repot repot mengatur posisi readmore tersebut, jadi jika diantara pembaca ada yang menggunakan readmore otomatis, silahkan kembalikan seperti awal atau menghapus kode - kode readmore otomatis tersebut.

LANGKAH 1 :

silahkan kamu cari kode yang mirip seperti dibawah ini

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

Kemudian ganti dengan kode dibawah ini:

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

<article expr:class='"_post _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='_post-part _post-thumbnail-area'>
<b:if cond='data:post.thumbnailUrl'>
<img class='_post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/>
</b:if>
</div> 
</b:if>
</b:if>

<div class='_post-part _post-body-area'>

<h3 class='_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='_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='_post-footer'>
<div class='_post-footer-line _post-footer-line-1'>
<span class='_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='_post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/> <a class='_post-timestamp-link' expr:href='data:post.url' rel='bookmark' title='Permanent Link'><time class='_post-published published' expr:datetime='data:post.timestampISO8601'><data:post.timestamp/></time></a>
</b:if>
</span> <span class='_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='_post-footer-line _post-footer-line-2'>
<span class='_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>

</span>
</div> 
</footer> 

</div> 

</article> 

</b:includable>

LANGKAH 2 :
Jika sudah melakukan langkah pertama maka selanjutnya adalah kamu cari kode dibawah ini:

]]></b:skin>

setelah itu letakan kede dibawah ini tepat diatas kode ]]></b:skin>

/*!
Thumbnail width: 200
Thumbnail height: 200
*/

._post {
background-color:white;
height:200px; /* Thumbnail height */
margin:0 0 10px;
overflow:hidden;
*zoom:1;
}

._post:after {
content:" ";
display:block;
clear:both;
}

._post-title {
font:normal bold 20px/1.2 Arial,Sans-Serif;
margin:0 0 10px;
padding:0;
}

._post-thumbnail-area {
width:200px; /* Thumbnail width */
height:200px; /* Thumbnail height */
background-color:#2D3957;
float:left;
overflow:hidden;
}

._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;
}

._post-body-area {
padding:20px;
margin-left:200px; /* Thumbnail width */
font-size:11px;
}

._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;
}

/* Item + Static Page */
._post-item,
._post-static_page {height:auto}

._post-item ._post-body-area,
._post-static_page ._post-body-area {
margin:0;
padding:20px;
font-size:13px;
}

._post-item ._post-title,
._post-static_page ._post-title {font-size:40px}

LANGKAH 3 :
untuk langkah ketiga ini gunanya adalah untuk memperbaiki gambar yang buram karna terlalu lebar alias memperbaiki resolusi

silahkan kamu cari kode dibawah ini

<b:section class='main' id='main' showaddelement='no'>...</b:section>

Jika Sudah Maka kamu Letakan kode dibawah ini tepat dibawah kode </b:section diatas

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script>
//<![CDATA[
function resizeThumb(parentID, size) {
var parent = document.getElementById(parentID),
image = parent.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
image[i].width = size;
image[i].height = size;
}
} resizeThumb('Blog1', 200);
//]]>
</script>
</b:if>
</b:if>

setelah itu SIMPAN perubahan.

Jika diantara kalian masih mengalami kesulitan silahkan berkomentar dan bertanya !!
insyaallah saya akan menjawab...