Membuat
Related Post Dengan Thumbnail Bergeser Di Bawah Postingan
Membuat Related Post Dengan
Thumbnail Bergeser Di Bawah Postingan
sebenarnya cukup mudah. Kenapa demikian? Karena Anda hanya tinggal mengcopy
kode-kodenya dan mengikuti petunjuknya. Kali ini kita akan sedikit
mengobok-obok kode HTML template blog. Seperti biasa Anda silahkan Login ke
blog Anda >> Dashboard >> Template >> Edit HTML >>
Jangan lupa centang Expand Widget Templates. Namun alangkah baiknya sebelumnya
Anda back up dulu template blognya untuk menjaga hal-hal yang tidak diinginkan,
sehingga bilamana terjadi kesalahan bisa dikembalikan ke template semula.
Kemudian cari kode </head>, agar lebih mudah
dalam pencarian, tekan CTRL + F di keyboard kemudian masukan kode </head>
tadi. Setelah ketemu silahkan copy kode di bawah ini dan paste SEBELUM kode
</head> tadi.
<!--Related Posts with thumbnails
Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://kompiajaib.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://kompiajaib.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Kemudian cari kode seperti di bawah
ini
<div class='post-footer-line post-footer-line-1'>
atau kalau enggak ada cari yang seperti di bawah ini
<p class='post-footer-line post-footer-line-1'>
<div class='post-footer-line post-footer-line-1'>
atau kalau enggak ada cari yang seperti di bawah ini
<p class='post-footer-line post-footer-line-1'>
Lalu copy kode di bawah ini dan paste SETELAH salah satu kode di atas yang sobat temukan.
<!-- Marquee Kompiajaib Related
Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<h3><b>Baca Juga Artikel Terkait Lainnya: </b></h3>
<div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=12;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-related-post-dengan-thumbnail.html' target='_blank'>widget</a></div>
</div>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Kompiajaib Related Posts with Thumbnails Code End-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<h3><b>Baca Juga Artikel Terkait Lainnya: </b></h3>
<div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=12;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-related-post-dengan-thumbnail.html' target='_blank'>widget</a></div>
</div>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Kompiajaib Related Posts with Thumbnails Code End-->
Perhatikan tulisan Baca Juga Artikel Terkait Lainnya: bisa Anda ganti
dengan kalimat yang Anda kehendaki.
#444 untuk warna background kotaknya.
Dan angka 12 untuk menunjukan jumlah related post yang ditampilkan.
Silahkan lakukan preview untuk
memastikan widgetnya berjalan atau tidak, setelah itu silahkan simpan
templatenya kemudian lihat hasilnya....menarik bukan...
Demikian sharing Membuat Related
Post Dengan Thumbnail Bergeser Di Bawah Postingan ini mudah-mudahan
bermanfaat. Jangan takut mencoba sesuatu hal yang baru. Setiap orang pasti
mengalami try and error
Menu dropdown
Untuk cara membuatnya, saya akan
jelaskan satu persatu, perhatikan baik-baik ya..........
1. Cari kode berikut ]]></b:skin>
2. Lalu letakkan kode berikut ini.
2. Lalu letakkan kode berikut ini.
#navdropdownmenu{
background:#99C9FF
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNGqEZz_dV7sFlm_jgZzeeW6Blitx_t2_7EmIfYGYVDfpCwh6WJ2JWWfg32d68T39FenW0Iy5gAqcoR4x-Bng8XergQH8t7pc3nWDg5OyhUu-BkdMJCJPkHoghr8s4U5VhktXro3K5EsjV/s800/navbar.gif)
repeat-x top;
width:700px;
height:auto;
margin:0;
padding:0;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a,
#navdropdownmenu li a:link, #navdropdownmenu li a:visited{
color:#000000;
font-weight:bold;
display:block;
text-shadow: 0px 1px 1px #fff;
padding:9px 10px 9px 10px;
font-size: 12px;
font-family: verdana;
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:#9f9f9f;
color:#ffffff;
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px;
visibility:hidden;
}
#navdropdownmenu li ul li a,
#navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:#99C9FF
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNGqEZz_dV7sFlm_jgZzeeW6Blitx_t2_7EmIfYGYVDfpCwh6WJ2JWWfg32d68T39FenW0Iy5gAqcoR4x-Bng8XergQH8t7pc3nWDg5OyhUu-BkdMJCJPkHoghr8s4U5VhktXro3K5EsjV/s800/navbar.gif)
repeat-x top;
width:200px;
border-width:1px;
border-style:solid;
border-color:#575757;
}
#navdropdownmenu li ul li a:hover{
background:#000000;
color:#ffffff;
}
#navdropdownmenu li:hover ul{
left:auto;
visibility:visible;
}
}
Oya,. jika anda telah menggunakan
navigasi menu yang biasa, hapuslah semua kode CSS dari navigasi menu tersebut.
3. Cari kode yang mirip dengan kode dibawah.
<div id='header-wrapper'>
<b:section class='header'
id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1'
locked='true' title='It's a Hardlife' type='Header'/>
</b:section>
</div>
4. Dibawahnya, ketikkan kode
berikut.
<div id='navdropdownmenu'>
<ul id='navdropdownmenu'>
<li><a href='http://chakrabandung.blogspot.com/search?max-results=1000'>Daftar
Isi</a></li>
<li><a
href='http://en.wikipedia.org/wiki/Norah_Jones'>Norah Jones</a>
<ul>
<li><a
href='#'>Don't Know Why</a></li>
<li><a href='#'>Feelin
The Same Way</a></li>
<li><a href='#'>Come
Away With Me</a></li>
</ul>
</li>
<li><a
href='http://en.wikipedia.org/wiki/Norah_Jones'>Sting</a>
<ul>
<li><a
href='#'>Englishman In Newyork</a></li>
<li><a href='#'>Shape Of
My Heart</a></li>
<li><a href='#'>Fields
Of Gold</a></li>
<li><a href='#'>If I
Ever Lose My Faith In You</a></li>
<li><a
href='#'>Fragile</a></li>
<li><a href='#'>Desert
Rose</a></li>
</ul>
</li>
<li><a
href='http://en.wikipedia.org/wiki/Norah_Jones'>Sade</a>
<ul>
<li><a href='#'>Smooth
Operator</a></li>
<li><a href='#'>Kiss Of
Life</a></li>
<li><a href='#'>Your
Love Is King</a></li>
</ul>
</li>
<li><a
href='http://en.wikipedia.org/wiki/Norah_Jones'>Alanis</a>
<ul>
<li><a href='#'>That I
Would Be Good</a></li>
<li><a href='#'>Front
Row</a></li>
<li><a
href='#'>One</a></li>
</ul>
</li>
<li><a
href='http://en.wikipedia.org/wiki/Norah_Jones'>Meja</a>
<ul>
<li><a
href='#'>Dindi</a></li>
<li><a
href='#'>Venus</a></li>
<li><a href='#'>Red
Light</a></li>
<li><a href='#'>The
One</a></li>
<li><a href='#'>Circle
Game</a></li>
<li><a href='#'>Aqua de
Beber</a></li>
</ul>
</li>
</ul>
</div>
</ul>
</div>
Gantilah tulisan http://chakrabandung.blogspot.com dengan link yang
anda inginkan dengan url yang anda inginkan. Anda bisa menambah atau mengurangi
jumlah kode tersebut.
5. Klik Simpan Template.
0 komentar:
Posting Komentar