Cara Membuat Halaman Contact Form di Blog / Website

Dalam kesempatan kali ini, saya akan share informasi tentang tata Cara Membuat Contact Form di Blog untuk pengguna blogger pada khusus nya dan website pada umumnya. Dalam hal ini saya akan menggunakan layanan contact form dari 123 Contact Form. Silahkan disimak baik-baik tutorial yang akan saya sampaikan supaya anda tidak keliru dalam mempraktekkannya. Berikut langkah-langkahnya.

Cara Membuat Halaman Contact Form di Blog / Website

1. Silahkan anda menuju situs 123 Contact Form di url ini www.123contactform.com. Nanti anda akan menjumpai halaman seperti gambar dibawah ini. Silahkan Klik Sign Up for Free.

2. Langkah selanjutnya adalah Klik Sign Up seperti contoh pada gambar dibawah ini.

3. Langkah berikutnya silahkan Isi Formulir Pendaftaran pada 123 Contact Form. Contohnya seperti gambar dibawah ini.

Keterangan:

Username diisi dengan username yang anda inginkan

Pasword diisi dengan pasword yang akan digunakan untuk Log In nantinya

Confirm Pasword diisi sama persis dengan Pasword diatas

Email diisi dengan alamat Email anda

Kemudian Klik Create Account

Baca juga Cara Membuat dan Memasang Widget Artikel Terbaru / Recent Post di Blog

4. Langkah nomor empat adalah pilih bentuk form yang anda inginkan. Dalam hal ini kita pilih Contact Form, karena kita akan membuat Contact Form, bukan yang lainnya. Seperti gambar dibawah ini contohnya.

5. Selanjutnya, silahkan isi nama form anda. Diisi dengan nama terserah anda. Boleh Contact Form atau mungkin tidak diisi juga tidak apa-apa. Kemudian Klik OK.

6. Langkah berikutnya adalah Klik Continue seperti pada tampilan gambar dibawah ini. Itu merupakan sampel/contoh bentuk Contact Form yang akan kita buat nantinya.

7. Berikutnya silahkan Cetang Email yang anda gunakan. Email tersebut nantinya akan dikirimi pesan dari 123 Contact Form bahwa anda mendapat pesan dari visitor, atau istilahnya Email notifikasi. Kemudian Klik Save, dan selanjutnya Klik Continue.

8. Langkah selanjutnya silahkan Pilih Blogger, karena Contact Form tersebut akan kita pasang pada blogger. Kemudian Copy seluruh Kodee HTML/JavaSript yang ada di dalam kotak. Contohnya seperti gambar dibawah ini. Jangan lupa, setelah anda Copy, silahkan Klik Ok/Publish pada pojok kanan atas.

9. Kode HTML/JavaScript tersebut bisa anda Paste pada Halaman Posting atau Halaman Page blog. Terserah anda. Jangan lupa, pilih mode HTML apabila anda ingin mem-paste pada Halaman posting. Apabila kode HTML/JavaScript sudah anda paste, dan sudah berhasil, maka tampilan Contact Form akan seperti gambar dibawah ini.

Demikian panduan tentang Cara Membuat Halaman Contact Form di Blog / Website yang dapat saya sampaikan untuk anda sekalian. Semoga dapat bermanfaat untuk anda semuanya. Atas perhatiannya saya sampaikan ucapan terimakasih. Wassalam. Jangan lewatkan posting menarik lainnya di Blog Dicintai.com tentang Cara Membuat Halaman Daftar Isi / Sitemap / Peta Situs di Blogspot.

Cara Membuat Halaman Contact Form di Blog / Website

21.02  SISWONO  No comments

Read More

Cara Membuat Recent Post Berjalan di Blog

ecent post atau dalam bahasa indonesianya posting terakhir atau artikel terkini adalah widget yang bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.
Recent post biasanya menampilkan sejumlah judul artikel yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yang bergerak ( animasi ) ke bawah. Contohnya sobat bisa lihat di sidebar blog ini.

Kali ini saya akan kasih tahu bagaimana cara memasang recent post di blog. Sobat yang berminat silahkan ikuti tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam konten.

<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#ffffff;
    border:solid 1px #000000;}
    #rp_plus_img a{color:#00000;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
   
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
   
</script>
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;
   
</script>     <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>     </ul>
<small><a href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-recent-post-berjalan-di.html" target="_blank">get this widget here</a></small>

4. Klik save dan lihat hasilnya.

00.41  SISWONO  No comments

Read More

Cara Memasang / Membuat Widget Recommended Post Slide Out di Blog

Recommended For You di Pojok/Sudut Kanan Bawah Blog.-  Dalam dunia blog selain pengunjung, ada juga satuh yang tak kalah penting, yaitu pageview. Pageview adalah jumlah halaman yang di kujungi atau di akses satu visitor ( pengunjung ) pada suatu blog dan pada waktu tersebut. Banyak cara untuk meningkatkanya, baik dengan memasang related post di blog, memasang daftar isi di sidebar, memasang recent post dan lain - lain.

Kali ni, saya akan kasih satu widget yang bisa meningkatkan pageview, namanya Recommended Post Slide Out atau tak jarang juga orang menyebutnya Widget Recommended For You. Widget ini menampilkan link artikel acak berupa judul dan gambar yang muncul secara tiba - tiba pada bagian pojok kanan bawah blog.

Fungsinya sebenarnya hampir sama dengan related post, bedanya, yang ini artikelnya di tampilkan secara random ( acak ) sedangkan related post menampilkan artikel se label. Sobat yang berminat memasang widget recommended post slide out di blog ini silahkan iktui tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik rancangan --> Elemen Laman --> Tambah Gadget --> HTML/Javascript.
3. Masukkan kode berikut ke dalam kotak HTML/Javascript yang di sediakan.

<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p><a href="http://christiantatelu.blogspot.com/2012/03/cara-memasang-widget-recommended-post.html" target="_blank">Recommended for you</a></p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://recommended-slide-out-for-blogger.googlecode.com/svn/trunk/bp-out-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://www.bloggerplugins.org/2011/12/recommended-post-slide-out-for-blogger.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjluu0WPaVRdX-00Lk7XM2p_pn3dwT_kXAhCv9B0ZsgT42H-HWqlGlWQRw4JBRI8-_CK2T9IZxQXEBCFbcLrj6EkywRAizg04hI1NFMDPIrLvjVwUP_Df-74lwdQJyxh5HQhBcF9tcbwRY/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a>

4. Klik save dan lihat hasilnya.

Tambahan :
Tak tahu karena sebab apa, sering kali widget ini sulit muncul terutama pada awal baru di pasang namun biasanya muncul pada 1 hingga 2 hari nya, karena itu bagi sobat yang memasang widget ini kemudian tidak langsung muncul, maka menunggu lah...

Selamat Ber-eksperimen.

00.39  SISWONO  3 comments

Read More

Cara Membuat Daftar Isi Otomatis Untuk Label Tertentu

Mengertikah sobat akan maksud dari judul di atas? Sobat mungkin sering menemukan artikel mirip seperti ini dengan kata kunci " Membuat daftar isi per label", atau tak jarang juga dengan keyword cara membuat daftai isi sitemap. tapi satu mungkin yang membedahkan trik ini dari cara membuat daftar isi yang lain, yaitu cara ini yang hanya menampilkan  artikel - artikel dalam 1 kategori atau label tertentu. Masih kurang mengerti juga?

Kali ini kita akan coba membuat daftar isi otomatis pada satu kategori tertentu. Untuk lebih jelasnya, coba sobat lihat daftar isi di sidebar paling atas di blog ini.

Trik seperti ini sebenarnya bisa sobat lakukan secara manual dengan cara memasukkan secara manual link - link artikel sobat , namun seperti biasa, waktu sobat mungkin akan sedikit terkuras. Untunglah jika sobat hanya memiliki sedikit artikel.. bagaimana jika banyak?? wah. bisa pegel ni jarinya.. hehe

Widget ini di lengkapi scroll yang berfungsi menghemat  halaman sobat, jadi jangan perlu takut kalau - kalau tidak muat lamannya karna kebanyakan artikel. Bagi sobat yang tertarik untuk membuat daftar isi otomatis pada label tertentu silahkan ikuti tutorial berikut.

Cara Membuat Daftar Isi Otomatis Untuk Label Tertentu

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Elemen laman --> Tambah Gadget -->HTML/Javascript
3. Masukkan kode berikut kedalam kotak yang di sediakan dan berikan judul sesuka hati sobat.

<div style="overflow:auto; width:auto; height:150px; padding:5px;border:0px solid #000000; font-family:julee; font-size:15px; font-color:#0000FF;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/postlabel%281%29.js'></script><ol>
<script src="http://christiantatelu.blogspot.com/feeds/posts/default/-/SEO%20BLOG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

tambahan :

• width:auto :  menunjukkan bahwa  lebar scroll box akan menyesuaikan dengan lebar sidebar.
• height:100px : tinggi scroll box. silahkan sobat ganti sesuai keinginan.
• border:1px solid #e6e4e3 :  adalah ukuran, jenis dan warna dari border. 1px adalah tebal border, solid adalah jenis border ( jenis - jenis border lihat di sini!) dan #e6e4e3 adalah warna border.( kode warna lihat disini! )
• font-size : adalah ukuran huruf.
• <ol> : adalah Numbered LIst , sobat bisa menggantinya menjadi bullet list dengan kode <ul>
• Ganti http://christiantatelu.blogspot.com dengan Url blog sobat.
• Ganti SEO%20BLOG dengan label yang sobat inginkan. Perhatikan penulisan labelnya. sesuaikan dengan yang terterah, jika satu huruf saja salah penulisannya, makan daftar isinya tak akan muncul. %20 adalah Spasi jadi ganti spasi dengan kode %20.

3. Klik simpan.

Untuk menampilkan daftar isi lebih dari satu label, misalnya untuk label SEO BLOG dan BLOG, maka kode yang harus sobat pakai adalah seperti berikut.

<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #e6e4e3; font-size:15px;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/postlabel%281%29.js'></script>
<h3>BLOG</h3>
<ol>
<script src="http://christiantatelu.blogspot.com/feeds/posts/default/-/BLOG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<br/>
<h3>SEO BLOG</h3>
<ol>
<script src="http://christiantatelu.blogspot.com/feeds/posts/default/-/SEO%20BLOG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

tambahan :

• Sesuaikan tulisan yang berwarna biru dengan label yang sobat gunakan.

Nah.. Bagaimana sob.. gampang kan??  Sampai di sini dulu tutorialnya, tunggu lagi kelanjutan postingan dari Christian Tatelu.

00.37  SISWONO  No comments

Read More

Cara Memasang Artikel Acak di Blog

Widget random post adalah widget yang manampilkan postingan atau artikel secara acak atau random untuk seluruh artikel di blog tanpa terkecuali. Berdasarkan penjelasan ini, berarti kita sudah dapat membedahkan antara related post, recent post ( baca : cara membuat recent post berjalan di blog ), popular post dengan random post.

Dengan memasang widget ini, postingan - postingan lawas yang kemungkina sudah lama tak di lihat pengunjung ( apalagi artikel yang tak memperoleh top 10 google ) akan di tampilkan kembali secara acak bersama postingan - postingan lawas dan postingan terkini lainnya.

Sobat yang tertarik memasang widget random post di blog silahkan ikuti tutorial berikut.

1. Klik Rancangan --> Elemen laman --> Tambah Gadget --> Pilih HTML/Javascript
2. Masukkan kode berikut ke dalam kotak yang di sediakan

<div style="overflow:auto; width:auto; height:250px; padding:5px;border:px solid #000000; font-family:julee; font-size:15px; font-color:#0000FF;">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ol>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ol>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script><span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/cara-memasang-artikel-acak-di-blog.html"> widget! </a></span></div>

catatan :
var numofpost=10 berarti jumlah postingan acak yang akan di tampilkan berjumlah 10, silahkan tambah atau kurangi angkahnya dengan memperhitungkan berat loading blog.

3. Klik save dan lihat hasilnya.

Singkat padat namun di harapkan bisa membantu...

sekian...

00.35  SISWONO  No comments

Read More

Cara Membuat Link Download di Blog

Dalam dunia blog selain artikel ada juga yang di sebut link, link sebagaimana kita ketahui adalah tautan yang menghubungkan antara halaman satu dengan halaman lain, situs dan situs lain termasuk link download yang tentuhnya mengarah ke situs file sharing tertentu. Contoh link adalah seperti berikut ( baca : blogspot template blog ).

Kali ini masih seputar link, saya akan share tentang cara bikin link download gratis di blogspot. Untuk membuat link download yang pertama harus kita miliki adalah file dan tentunya akun di file sharing ( seperti ziddu, googlecode, 4shared dll ). File yang ada di komputer sobat nantinya kan di upload ke salah satu file sharing tadi guna mendapatka url dari file tersebut. Kali ini kita akan membahas di file sharing ziddu saja.

1. Sign up di ziddu.com ( baca : cara membuat akun di ziddu )
2. Silahkan sobat meng-upload file ke ziddu untuk mendapatkan link downloadnya.
3. Link download dari ziddu kira - kira seperti gambar berikut.

Nah, setelah kita mendapatkan lin downloadnya, sekarang waktunya untuk membuat link downloadnya. setahu saya, ada 2 cara untuk membuat link download, yang pertama dengan mengunakan teks biasa dan kedua dengan menggunakan / menyisipkan gambar pada link download. Berikut penjelasannya.

1. Link Download Biasa

<a href="http://www.ziddu.com/download/19044499/tatelustyle.rar.html" target="_blank"><b>DOWNLOAD</b></a>

Hasilnya :

DOWNLOAD


2. Link Download Dengan Gambar

<a href="http://www.ziddu.com/download/19044499/tatelustyle.rar.html" target="_blank"><img alt="Download Button" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO985mXRsL1LHUSVz4hPDTO8F2IPi8DboEaRzK0SB5HD6Rjhce_ZNBDqyqOkE1wqwrWjPD5E-5OfMxKEAVLnHcCsyFlWQQ8EoWFyTOrJoVbEX2DJYHNC-McXcSfZ5sZCe78iuS2Wfqf-Fx/s1600/download-button.jpg" /></a>

Hasilnya :

Tambahan:
Tulisan yang di cetak tebal dan berwarna merah adalah link download ( url file ) yang diambil dari file hasil upload di ziddu.

00.31  SISWONO  2 comments

Read More

Cara Membuat Kotak Komentar Berada di Tengah

Cara Membuat Kotak Komentar Berada di Tengah - Apa kabar sobat blogger!!! sebelumnya saya ucapkan selamat Hari Raya Paskah bagi yang merayakan. Kali ini saya akan kasih sedikit tips seputar blog, bagaimana cara membuat kotak komentar agar berada ditengah. Seperti yang kita ketahui bahwa kotak komentar default blogger letaknya di sisi kiri, kali ini kita akan mencoba memindahkannya ke tengah.

1. Log in ke akun blog sobat
2  Klik rancangan --> edit HTML --> letakkan kode berikut di atas kode ]]></b:skin>

.comment-form{

margin-right: auto;

margin-left: auto;

}

3. Klik save dan lihat hasilnya.

Tambahan :
untuk sekedar memberi jarak antar tepi kiri dengan kotak komentar, sobat tinggal mengganti kode auto dengan angka yang di inginkan. Misalnya sobat ingin memberi jarak antara kotak komentar dengan tepi sisi kiri maka sobat bisa menggunakan kode berikut :

.comment-form{

margin-left:15px;

}

Sekian dan semoga membantu....

00.29  SISWONO  No comments

Read More

Cara Memasang TV di Blog

Cara Memasang Tv Online Streaming di Blog - Selalu ada yang baru di dunia blog, setelah bisa memasang animasi di blog, memasang lagu di blog, kini dengan kecanggihan teknologi sobat bisa memasang TV online di blog ( nonton sambil ngeblog ) entah itu RCTI, SCTV, TRANS TV, TRANS 7, GLOBAL TV, MNC TV, KOMPAS TV, INDOSIAR, ANTV, TV ONE, dan lain - lain. Tutorial yang seperti ini bisa dengan mudah sobat temukan di google dengan kata kunci "cara pasang tv ( televisi ) di blogspot". Berikut tutorial cara pasang TV di blog bagi sobat yang berminat.

A. Untuk memasang TV Online di sidebar blog, sobat ikuti tutorial berikut.

1. Log in ke akun blog sobat
2. Klik Rancangan --> Elemen laman --> Tambah gadget --> pilih HTML/Javascript
3. Masukkan kode berikut ke dalam kotak yang di sediakan.

<div id="NamaTV"></div><div id="TVstyle"></div><div class="tvborder"><iframe id="fsTVframe" scrolling="no" frameborder="0" name="TVPlayerWb" allowtransparency="true"></iframe></div><ul id="fsTVOnline"></ul><div class="clear"></div><span id="TVsource"></span><a id="wb_tvauth" href="http://www.warungbebas.com">Warung Bebas TV Streaming</a><script src="http://javascript-share.googlecode.com/files/wb.js"></script><script type="text/javascript">wb.tv_setting={channel_start:7,player_width:300,player_height:215,icon_width:40,float_icon:true};</script><script src="http://javascript-share.googlecode.com/files/wb_tv_online_indonesia_2_0.js"></script>

4. klik save

B. Untuk cara pemasangan di halaman postingan berikut tutorialnya .

1. Login ke akun blog sobat
2. Klik Entri baru kemudian beri judul sesuai keinginan. Misalnya Nonton TV Online
3. Masukkan kode berikut di Edit HTML di postingan dan jangan di Compose

<div id="NamaTV"></div><div id="TVstyle"></div><div class="tvborder"><iframe id="fsTVframe" scrolling="no" frameborder="0" name="TVPlayerWb" allowtransparency="true"></iframe></div><ul id="fsTVOnline"></ul><div class="clear"></div><span id="TVsource"></span><a id="wb_tvauth" href="http://www.warungbebas.com">Warung Bebas TV Streaming</a><script src="http://javascript-share.googlecode.com/files/wb.js"></script><script type="text/javascript">wb.tv_setting={channel_start:7,player_width:300,player_height:215,icon_width:40,float_icon:true};</script><script src="http://javascript-share.googlecode.com/files/wb_tv_online_indonesia_2_0.js"></script>

4. Klik Terbitkan Entri dan lihat hasilnya..

Tambahan :
Atur ukuran width ( lebar ) dan Height ( tinggi ) TV online sesuai keinginan.

00.27  SISWONO  No comments

Read More

Menampilkan Judul Artikel Saja di Homepage

Menampilkan Judul Artikel / Posting Saja di Homepage - Apa kabar sobat blogger? pada kesempatan kali ini kita akan coba membahas tentang bagaimana cara membuat judul artikel saja yang tampil di halaman depan blog. Tutorial kali ini sebenarnya berfungsi hampir sama dengan readmore ( baca : cara memasang readmore di blog ) namun jika readmore menampilkan judul artikel berserta ringkasan artikel, maka yang ini hanya akan menampilkan judul artikel ( posting ) saja. Bagi sobat yang tertarik, silahkan ikuti tutorial berikut.

1. Login ke akun blogger sobat.
2. Klik rancangan --> edit HTML
3. Letakkan kode berikut di bawah kode ]]</b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>

4. Simpan dan lihat hasilnya.

Tambahan :
Jika setelah menggunakan kode di atas dan masih menyisahkan elemen - elemn seperti tanggal posting, jumlah komentar dll, silahkan gunakan kode berikut menggantikan kode no 3.

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>

Sekian....

00.25  SISWONO  No comments

Read More

Cara Memasang Game Online di Blog

Cara Pasang Game di Blogspot - Kadang kala ada saja faktor yang membuat kita malas ngeblog, ada yang karena bosen, karena nggak mood dan macem - macem deh... Sebenarnya rasa bosen tu terjadi di berbagai kegiatan bukan hanya ngeblog, kali ini saya akan kasih tutorial cara mensiasati kebosanan ngeblog.
Mengawali pagi yang indah ini, saya akan memulai postingan saya yang berjudul Cara Meletakkan Game Onlien di Blog yang nantinya bisa sobat maenkan langsung di blog sobat sendiri. Setelah sebelumnya berhasil memposting cara memasang TV di Blog, Cara Bikin Blog, dan lainnya, kali ini akan saya kasih tutorial lengkap cara pasang permainan di blogspot entah sobat pasang di sidebar ataupun di halaman posting. Sobat yang tertarik, silahkan ikuti tutorial berikut.

1. Silahkan menuju ke http://www.khemer.com, disitu sobat akan melihat tampilan seperti berikut.

2. Pilih game yang di inginkan, kemudian ambil embed kode nya.

Cara Pemasangan :
Cara pemasang di sini terbagi 2 yaitu di pasang di halamn postingan ( artikel ) dan di sidebar sebagai widget. Mari kita lihat tutorialnya.

A. Memasang Game Online di Postingan Blog
1. Log in ke akun blogger sobat
2. Buat entri baru dengan meng-klik tulisan Entri Baru
3. Masukkan Embed Code di Edit HTML di form penulisan artikel. Lihat Gambar

4. Setelah itu, klik tulisan Terbitkan Entri yang menadakan entri sobat sudah terposting.
B. Memasang Game Online di Sidebar Blog
1. Klik Rancangan --> Elemen laman --> Tambah gadget --> Pilih HTML/Javascript
2. Masukkan embed kode kedalam kotak yang di sediakan.
3. Klik Save / Simpan

Tambahan :
Embed Code yang sobat ambil, kira - kira seperti berikut.

<object height="310" width="390"><param name="animation" value="file">
<embed src= "http://www.khemer.com/files/e3c7b5b08485903e.swf" width="390" height="310"></embed></object>

Tambahkan kode <center></center> agar game online ditampilkan di tengah halaman. Hasilnya seperti berikut. 

<center><object height="310" width="390"><param name="animation" value="file">
<embed src= "http://www.khemer.com/files/e3c7b5b08485903e.swf" width="390" height="310"></embed></object></center>

00.23  SISWONO  3 comments

Read More

Cara Membuat Menu Tab View Tanpa Edit HTML (3 tab)

Cara Membuat Menu Tab View Tanpa Edit HTML - Apa kabar sobat blogger?? wah.. jarang - jarang nich christian tatelu posting 2 artikel sehari, mudah- mudahan bisa begitu terus.. heheh. Setelah sebelum telah memposting tentang cara mengetahui blog dofollow atau nofollow, kali ini saya aka kasih tahu pada sobat blogger bagaimana cara membuat memasang menu tab view tanpa harus edit html.

Seperti kita tahu bersama bahwa Tab view adalah salah widget berguna terutama untuk menghemat halaman blog sobat. Widget ini sifatnya seperti menyembunyikan widget yang kemudian bisa tampil kembali jika kita mengkliknya. contohnya bisa sobat lihat di bagian footer sebelah kiri dari blog ini.

Cara ini ini sebenarnya sudah banyak yang posting tapi sembari menunggu hujan berhenti tak apa lah, siapa tahu makin banyak follower blog nya, iya toh???? hehehe. Sobat yang tertarik untuk memasang widget menu tabview tanpa edit HTML silahkan ikuti tutorialnya.

Cara Membuat Menu Tab View Tanpa Edit HTML

1. Log in ke akun blog sobat.
2. Klik Rancangan -->Elemen laman --> Tambah Gadget --> pilih HTML/Javascript
3. Masukkan kode berikut ke dalam konten dan jangan beri nama widgetnya.

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
 -moz-border-radius:5px 5px 0 0;
 border-radius:5px 5px 0 0;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://christiantatelu.blogspot.com/2012/02/cara-membuat-menu-tab-view-tanpa-edit.html" target="_blank">widget</a></p></div>

4. Klik save dan lihat hasilnya

23.42  SISWONO  2 comments

Read More

Cara Membuat Tab Menu di Blog (4 tab)

Cara Membuat Tab Menu di Blog itu yang akan saya bahas sekarang, :y; Kalau ada kawan Blogger yang tidak tahu apa itu Tab Menu dan untuk apa [maaf saya bukannya menggurui kawan] dapat saya sampaikan kurang lebih adalah Kumpulan Elemen yang bisa menhemat tempat pada Blog 

Sepengetahuan saya Tab Menu scriptnya bisa disimpan pada Template dan Widget, yang saat ini akan saya bahas penyimpanan scriptnya pada Template :z;

Cara Membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template
• Copas HTML berikut diatas ]]></b:skin>

div.TabView div.Tabs {height: 30px;overflow: hidden}

div.TabView div.Tabs a {float:left; display:block; width: 73px; /* Lebar Menu Utama Atas */ 

text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */ 

padding-top:5px; vertical-align:middle; border:1px solid #95CAFF; /* Warna border Menu Atas */ 

border-bottom-width:0; text-decoration: none;font-size:12px; font-family: "Arial";/* Font Menu Utama Atas */}

div.TabView div.Tabs {background:#FFF;color:#000;border:1px solid #95CAFF;text-decoration:none;}

div.TabView div.Tabs a:hover{background:#585858;color:#FFF;border:1px solid #95CAFF;text-decoration:none;}

div.TabView div.Tabs a.Active{border:1px solid #00F; background:#95CAFF; color:#00F;font-style: normal;border:1px solid #95CAFF;text-decoration:none;/* Warna background Menu Utama Atas */ } 

div.TabView div.Pages {clear:both; border:1px solid #95CAFF; /* Warna border Kotak Utama */ overflow:hidden; background-color:#95CAFF; /* Warna background Kotak Utama */ } 

div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden} 

div.TabView div.Pages div.Page div.Pad {padding: 5px 5px} 

• Selanjutnya Copas Script berikut dibawah ]]></b:skin>

<script type='text/javascript'>

function tabview_aux(TabViewId, id)

{

var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;

while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;

var i = 0;

do

{

if (Tab.tagName == &quot;A&quot;)

{

i++;

Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;

Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;

Tab.blur();

}

}

while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;

while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;

var i = 0;

do

{

if (Page.className == &#39;Page&#39;)

{

i++;

if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;

Page.style.overflow = &quot;auto&quot;;

Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;

}

}

while (Page = Page.nextSibling);

}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }

</script>

• Simpan Template kawan 
• Selanjutnya pilih Tata Letak - Tambah Gadget - HTML/JavaScript
• Copas Script berikut kedalamnya

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
<a>Judul Tab 4</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1 - SIMPAN FILE KAWAN DISINI </div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2 - SIMPAN FILE KAWAN DISINI </div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3 - SIMPAN FILE KAWAN DISINI </div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 4 - SIMPAN FILE KAWAN DISINI </div>
</div>
</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

• Simpan Blog kawan dan lihat hasilnya

Sedikit penjelasan saya : 

Lebar Tab adalah [width:73px;] sebanyak 4 tab ditambah border:8px [1+2+2+2+1], maka lebar keseluruhannya menjadi 300px;

23.28  SISWONO  No comments

Read More

Cara Membuat Widget Artikel Terbaru dengan Fungsi Previous dan Next

Cara Membuat Widget Artikel Terbaru dengan Fungsi Previous dan Next – Widget artikel terbaru ini sama saja sebenarnya dengan widget recent post dengan thumbnail. Fitur modifikasi yang ditambahkan pada widget ini adalah adanya tombol fungsi previous dan next dibagian bawah widget. Nah inilah yang menjadi keistimewaan widget artikel terbaru ala Creating Website ini. Dengan tambahan tombol previous dan next ini maka pengguna dapat mengetahui artikel terbaru apa saja yang ada di blog anda tanpa harus repot membuka daftar isi blog. Kebetulan saya memang juga suka dengan karya-karya Maskolis terutama template-template buatannya yang keren banget, maka pada tips blogging kali ini saya kepingin share tutorial cara membuat widget artikel terbaru ini.  

                                           

Cara Membuat Artikel Terbaru dengan Fungsi Previous dan Next :

1. Login ke dashboard blogger Anda
2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
3. Masuk ke menu Template >> Edit HTML, dan centang expand widget templates
4. Backup dulu template anda sebelum melakukan editing.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   
   #mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
   #terbaru{margin:0px}
   .mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
   .mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
   .mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
   .mas-elemen:hover{background-color:#c3c3c3}
   .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
   #mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhndP5H7pefefKvgKoTSZU623wLb5fFAB5RhHdo4BSY0_oJ1o3HtZI_yQQGf5x3U-WVFdkPHm2fkZa7zE409W7R5xufxLTeC8oqlTAX9ILeqETrwNTC41Lan5-LfdBda2Djf5oeAa1aDAw/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
   #mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
   #mas-navigasifeed:hover{background-color:#c3c3c3}
   #mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
   #mas-navigasifeed span{padding:5px 10px}
   #mas-navigasifeed .next{float:right}
   #mas-navigasifeed .previous{float:left}
   #mas-navigasifeed .home{text-align:center}
   #mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
   Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   
   
   <script type='text/javascript'>
   //<![CDATA[
   var numfeed = 5;
   var startfeed = 0;
   var urlblog = "http://infoheadline.blogspot.com/";
   var charac = 100;
   var urlprevious, urlnext;
   
   function maskolisfeed(johny,banget){
   var showfeed = johny.split("<");
   for(var i=0;i<showfeed.length;i++){
   if(showfeed[i].indexOf(">")!=-1){
   showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
   }
   }
   showfeed =  showfeed.join("");
   showfeed = showfeed.substring(0,banget-1);
   return showfeed;
   }
   function showterbaru(json) {
   var entry, posttitle, posturl, postimg, postcontent;
   var showblogfeed = "";
   urlprevious = "";
   urlnext = "";
   for (var k = 0; k < json.feed.link.length; k++) {
   if (json.feed.link[k].rel == 'previous') {
   urlprevious = json.feed.link[k].href;
   }
   if (json.feed.link[k].rel == 'next') {
   urlnext = json.feed.link[k].href;
   }
   }
   for (var i = 0; i < numfeed; i++) {
   if (i == json.feed.entry.length) { break; }
   entry = json.feed.entry[i];
   posttitle = entry.title.$t;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   posturl = entry.link[k].href;
   break;
   }
   }
   if ("content" in entry) {
   postcontent = entry.content.$t;
   } else if ("summary" in entry) {
   postcontent = entry.summary.$t;
   } else {
   postcontent = "";
   }
   if ("media$thumbnail" in entry) {
   postimg = entry.media$thumbnail.url;
   } else {
   postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNsXOzhHM0b_RwmJq39tfu4KtfL0JKyaJvDcWTF3an2PP9R2x4eNH44S_i02H_hW0BrM26MOHyAkdltCs661XrfwprtPwzmNUW3snAPSww1xvlVzGiKg7PBihZCfg4IX4jBD8TV3xhADo/s1600/no+image.jpg";
   }
   showblogfeed += "<div class='mas-elemen'>";
   showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
   showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
   showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
   showblogfeed += "</div>";
   }
   document.getElementById("terbaru").innerHTML = showblogfeed;
   showblogfeed = "";
   if(urlprevious) {
   showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
   } else {
   showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
   }
   if(urlnext) {
   showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
   } else {
   showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
   }
   showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
   document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
   }
   
   function navigasifeed(url){
   var p, parameter;
   if(url==-1) {
   p = urlprevious.indexOf("?");
   parameter = urlprevious.substring(p);
   } else if (url==1) {
   p = urlnext.indexOf("?");
   parameter = urlnext.substring(p);
   } else {
   parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
   }
   parameter += "&callback=showterbaru";
   incluirscript(parameter);
   }
   function incluirscript(parameter) {
   if(startfeed==1) {removerscript();}
   document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
   document.getElementById("mas-navigasifeed").innerHTML = "";
   var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
   var terbaru = document.createElement('script');
   terbaru.setAttribute('type', 'text/javascript');
   terbaru.setAttribute('src', archievefeed);
   terbaru.setAttribute('id', 'MASLABEL');
   document.getElementsByTagName('head')[0].appendChild(terbaru);
   startfeed = 1;
   }
   function removerscript() {
   var elemen = document.getElementById("MASLABEL");
   var parent = elemen.parentNode;
   parent.removeChild(elemen);
   }
   onload=function() { navigasifeed(0); }
   //]]>
   </script>

   Keterangan :
   var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget
   var urlblog = "http://infoheadline.blogspot.com/"; >> ganti dengan URL blog Anda
   var charac = 100; >> Jumlah karakter atau huruf pada setiap post.
7. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
   
   

   <div id="terbaru"></div>
   <div id="mas-navigasifeed"></div>

   Terakhir save dan lihat hasilnya.

Lihat D E MO disini

Demikian Cara Membuat Widget Artikel Terbaru dengan Fungsi Previous dan Next ini, kalau anda suka tinggal sedot aja kodenya dan pasang disidebar blog anda. Happy blogging..!!       

Sumber : Creating Website

23.10  SISWONO  3 comments

Read More

Tips Membuat Widget Carousel Related Post Scrolling

Membuat Widget Scrolling Related Post Di Blogspot  – Widget related post atau artikel terkait yang mau saya share kali ini sedikit berbeda dengan widget related post statis (diam) yang sering kita lihat seperti yang ada di blog Share With Irfan ini. Kali ini kita akan belajar membuat widget related post dengan fitur Carousel (Carousel Related Post). Keunikan widget related post ini ada pada scrolling dengan efek marquee dari thumbnail dan judul artikel sesuai label terkait dari posting yang ada. Dan apabila mouse kita sorotkan pada thumbnail atau judul (mouseover), maka secara otomatis akan memunculkan tulisan dari judul artikel. Jadi kalau kita melihat related post ini seperti layaknya kita melihat sebuah tayangan slide. Kalau di platform Wordpress mungkin lebih gampang lagi karena sudah tersedia wordpress related post slider plugin. Sementara untuk blogspot kita masih harus membuatnya secara manual.

Screenshot Carousel Related Post

  

Cara Membuat Carousel Related Post Di Blogspot

1.       Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand widget template.

2.       Cari kode </head>  pada template anda.

3.       Letakkan kode CSS/JS dibawah ini diatas kode </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

#related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}

#related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}

#related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;}

#related-posts a:hover{background-color:#d4eaf2;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;}

.tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left}

.tooltip span.top{padding:20px 5px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFNnUWnXRTFi0ZPUhyphenhyphenbI9gX2IyUtO679RqmX3gh9h87omrYv7MkBg0PlZpe0PMDDJetvvuaR9yG0o6_dmz0B5xLssKQ3uFk6liw2swlU2tjsXrUKQ7JVnpHkVMliKyAnrw4qT3Ig5gJzg/s1600/bt.png) no-repeat top;}

.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFNnUWnXRTFi0ZPUhyphenhyphenbI9gX2IyUtO679RqmX3gh9h87omrYv7MkBg0PlZpe0PMDDJetvvuaR9yG0o6_dmz0B5xLssKQ3uFk6liw2swlU2tjsXrUKQ7JVnpHkVMliKyAnrw4qT3Ig5gJzg/s1600/bt.png) no-repeat bottom;}

</style>

<script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM3ulMEZwNHvc9qsqdBsm-HlRECLy836Wpu6hIc7J_IAgIAsyWBBxxrUQcJKaSsCVj7b_dmu8cGbDw_DHd5hSOR88HxWHsBamd2VZqB9kDHV3KV4Ph1l80Fm5CxYtEgj2EeXPKWw8k2BY/s1600/noimage.jpg';</script>

<script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script>

</b:if>

4.  Kemudian cari kode <div class='post-footer-line post-footer-line-1'> pada template anda. Letakkan kode HTML dibawah ini dibawah kode <div class='post-footer-line post-footer-line-1'>. Jika template anda kodenya ada 2, maka letakkan kode HTML dibawah kode <div class='post-footer-line post-footer-line-1'>  yang pertama.

<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>Related Posts</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>

5.       Preview dulu untuk melihat tampilan hasilnya.

6.      Jumlah maksimum posting yang ditayangkan adalah 20. Silahkan ganti angka 10 yang saya tandai merah jika anda ingin merubahnya.

7.       Save/Simpan template anda.

Selamat mencoba  Membuat Scrolling Related Post / Carousel Related Post ini, semoga bisa mempercantik tampilan blog anda.

Source link: http://www.intert3chmedia.net/2011/11/scrolling-related-post-thumbnail-widget.html

23.07  SISWONO  No comments

Read More