Membuat Artikel Terkait Bergambar Berjalan

Sebenaranya denganjudul yang kayak diatas itu binggung gak? Ingin membuat tulisan yang terkait atau artikel terkait yang ada gambar (thumbnail). Jika yang biasanya hanya judul yang terkait dengan yang kita buka (baca) tapi kali ini kita akan membuat tulisan terkait dengan diseratai thumbnail yang ada di postingan yang terkait dengan tulisan (artikel) yang kita baca.

Artikel terkait yang disertai thumbnail (gambar kecil) tidak hanya diam, tetapi berjalan kesamping, menampilkan thumbnail disertai dengan judul tulisan (artikel). Thumbnail Related Posts (artikel terkait bergambar) ini akan menghemat banyak temaptdi blog kita, ya memang karena artikel terkait bergambarnya dibuat berjalan sehingga kita juga bisa membuat lebih banyak artikel terkait bergambar yang ditampilkan.

Cara Membuat Artikel Terkait Bergambar Berjalan
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini di atasnya

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

7. Cari kode di bawah ini

<div class='post-footer-line post-footer-line-1'>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas (no.7)

<!-- Marquee Serbablog Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://kurniasepta.blogspot.com/2010/01/membuat-artikel-terkait-dengan-disertai.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

9. Kita juga dapat menganti beberapa kode css, seperti berikut ini

var maxresults=10;

Berarti artikel terkait yang akan kita tampilkan adalah 10

var relatedpoststitle="Thumbnail Related Post";

credit:kurnia septa

READ MORE - Membuat Artikel Terkait Bergambar Berjalan

Membuat Buku Tamu yang Buka Tutup

 
Kali ini rasanya saya membuat judul yang unik dech Membuat Buku Tamu yang Buka Tutup Namanya juga buku ya bisa dibuka dan ditutup donk. Yang sudah berkunjung mengisi buku tamu menuliskan namanya, alamatnya dan pesannya. Buku tamu ini dipasang di blog kita. Buku tamu ini lebih populer dengan sebutan shoutbox

Yang banyak diguanakan untuk buku tamu yang kita buat ini akan bisa di buka dan ditutup, jadi terus tampil di halaman blog secara tidak utuh, jika ingin buka tinggal ngeklik dan jika ingin tutup buku tamunya juga diklik aja. Ada tulisan BUKU TAMU yang nempel dipinggir halaman dan tinggal klik untuk buka tutupnya. Untuk membuat buku tamu yang bisa buka tutup ini, silahkan Anda buat widget shoutbox yang bisa didapatkan di shoutmix atau cbox. Di sana kita registrasi dan buat widgetnya lalu ambil kodenya.

Cara Membuat Buku Tamu yang Buka Tutup
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode script berikut ini:

<style type="text/css">
#gb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:2px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

TARUH KODE WIDGET SHOUTOXMU DI SINI

</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Kita taruh kode yang sudah peroleh dari shoutmix atau cbox ditempatnya (TARUH KODE WIDGET SHOUTOXMU DI SINI). Dan Simpan jika sudah selesai.

credit:kurnia septa

READ MORE - Membuat Buku Tamu yang Buka Tutup

Maintenance blog

maaf all step2 blog sedang under maintenance jadi tunggu aja ya maintenance dan selesai nya

READ MORE - Maintenance blog

Welcome

selamat datang di blog saya dan saya akan melakukan update/maintenance jadi tunggu tanggal main nya hhehehehehe......

READ MORE - Welcome