1. Copy Paste Script Berikut:
<!-- begin Smooth Gallery scripts -->
<link rel="stylesheet" type="text/css" href="http://www.geocities.com/adeha_182/jd2.gallery.css" />
<script src='http://www.geocities.com/adeha_182/mootools2.v1.11.js' type='text/javascript'/>
<script src='http://www.geocities.com/adeha_182/jd2.gallery.js' type='text/javascript'/>
<!-- end Smooth Gallery scripts -->
+ Login ke Blogger kemudian pilih "Layout"
+ Klik pada "Edit HTML" dan paste kode diatas dibawah
2. Masih di "Edit HTML", Copy kode dibawah ini:
<div id='isismoothgallery'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 500px;
height: 400px;
z-index:5;
border: 1px solid #000;
margin: 0px 0px 0px 30px;
}
.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 85px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);
</script>
<div id='myGallery'>
<div class='imageElement'>
<h2>Featured Article #1</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-1.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
</div>
<div class='imageElement'>
<h2>Featured Article #2</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-2.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
</div>
</div>
</b:if>
</div>
Paste kode diatas, persis diatas kode ini :
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
+ Ganti tulisan Featured Article #1, Featured Article #2, Featured Article #3 yang bercetak tebal dengan Judul artikelmu.
+ Ganti tulisan yang berwarna Merah sesuai ukuran lay out mu.
- width: 500px; (lebar Smooth Gallery)
- height: 400px; (tinggi Smooth Gallery)
- margin: 0px 0px 0px 30px; (jarak atas,kanan,bawah,kiri Smooth Gallery)
+ Ganti tulisan yang berwarna Biru dengan Ringkasan artikelmu.
+ Ganti tulisan yang berwarna Hijau dengan Link artikelmu.
+ Ganti tulisan yang berwarna Ungu dengan Link Gambarmu.
+ Untuk menambah elemen slideshow, copy kode yang
dan paste dibawahnya kode tersebut.
3. Simpan dan Lihat Hasilnya. 'Trust Me It's Work'
4. Posisi kode-kode semuanya :
<html>
<head>
<!-- begin Smooth Gallery scripts -->
<link rel="stylesheet" type="text/css" href="http://www.geocities.com/adeha_182/jd2.gallery.css" />
<script src='http://www.geocities.com/adeha_182/mootools2.v1.11.js' type='text/javascript'/>
<script src='http://www.geocities.com/adeha_182/jd2.gallery.js' type='text/javascript'/>
<!-- end Smooth Gallery scripts -->
<b:skin><![CDATA[/*
DISINI TEMPAT KODE2 CSS
]]></b:skin>
</head>
<body>
<div id='main-wrapper'>
<div id='isismoothgallery'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 400px;
height: 300px;
z-index:5;
border: 1px solid #000;
margin: 0 0 30px;
}
.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 85px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready',startGallery);
</script>
<div id='myGallery'>
<div class='imageElement'>
<h2>Featured Article #1</h2>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-1.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
</div>
<div class='imageElement'>
<h2>Featured Article #2</h2>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-2.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
</div>
<div class='imageElement'>
<h2>Featured Article #3</h2>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-3.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
</div>
</div>
</b:if>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
</body>
</html>
5. Contoh silahkan klik disini samplesmoothgallery.blogspot.com/
0 komentar:
Posting Komentar