Membuat widget Recent Comment With Thumbnail - 37 komentar

Membuat widget Recent Comment With Thumbnail - Recent Comment kalau diartikan ke dalam bahasa Indonesia yaitu komentar terakhir, naah widget recent comment ini berfungsi agar sobat atau pengunjung blog sobat dapat melihat para readers yang berkomentar di blog sobat. Selain itu, widget ini juga bisa untuk meningkatkan pageview blog sobat. Karena setiap komentar yang telah di publish lalu diklik dan dilihat oleh seseorang. Bisa menambah 1 pageview blog sobat. Hmm, pada waktu sebelumnya juga reggy pernah posting tentang bagaimana cara membuat widget recent comment. Bedanya, yang lalu hanya isi komentar dan namanya.

Kalau yang sekarang ditambah dengan round avatar yang artinya ditambah dengan gambar si comment's writer dengan bentuk lingkaran. Selain itu, script yang digunakan tidak terlalu membuat loading blog menjadi lambat, tampilan yang simpel dan dinamis, anonymous commentator thumbnail dan masih banyak lagi. Untuk penampakannya bisa sobat lihat pada gambar di bawah atau lihat di halaman homepage Blognya Reggy. Nah, untuk membuat widget recent comment with thumbnail bisa sobat copy scriptnya di bawah ini

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 60,
 defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbjmcbWu9rNhBaWMUtap61UOCIZZYfE_2flmLYVgoE0jc99GJEy85HkBv7Oti32LAs8OJM8pbjEDxdgCpORyDdROhoe4-QXgfo-R_ZHriHgxw05Z4togNv4Se2BdxSl0rQK7sqzR5bpYSS/s1600/gravatar.jpg",
 hideCredits = true;
 maxfeeds=20,
 adminBlog='Reggy Zian Purnama';
//]]>
</script>
<script type="text/javascript" src="http://www.geocities.ws/reggy1998/rcomment.js"></script>
<script type="text/javascript" src="http://blognya-reggy.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=20"></script>

Keterangan:

• numComments = 5 adalah jumlah komentar yang ditampilkan pada widget recent comment with thumbnailnya. Bisa ditambah atau dikurang sesuai keinginan
• characters = 60 adalah jumlah isi komentar yang ditampilkan. Bisa sobat tambahkan atau dikurang sesuai keinginan
• adminBlog='Reggy Zian Purnama' adalah nama admin yang ada di blog sobat. Silahkan ganti dengan nama author/admin yang ada di blog sobat
• Tulisan yang berwarna merah ganti dengan url blog sobat

Semua kode script itu tinggal sobat copy lalu sobat pasang di blog sobat. Lalu atur dari jumlah yang sobat tampilkan, isi komentar, admin blog, url blog dan lain lain, simpan widget lalu lihat hasilnya. Oke sob, sekian dulu untuk membuat widget recent comment with thumbnail. Sampai Jumpa ;)

Read More

Cara membuat Iklan melayang (Floating ads) di blog - 17 komentar

Cara membuat Iklan melayang (Floating ads) di blog - Iklan adalah cara untuk mempromosikan barang, produk, ide, kegiatan, jasa dan lain lain dengan tujuan untuk mendorong si pembaca iklan agar tertarik membeli produk atau mengikuti kegiatan yang di iklankan. Seperti apa yang sudah saya jelaskan pada posting Iklan Internet Murah Efektif Berkualitas Indonesia, iklan sudah ada pada zaman yunani kuno. Hanya saja pada waktu itu, iklan yang pertama kali dibuat adalah iklan berupa surat edaran yang isinya tentang pegelaran pertandingan gladiator

Bicara tentang iklan, kali ini reggy akan menerangkan kepada sobat bagaimna cara membuat iklan melayang. Iklan melayang ini akan muncul ketika suatu loading blog telah selesai. Iklan melayang ini terletak di bagian atas blog dan sudah ada fungsi tombol Closenya. Jadi, pengunjung tidak merasa terganggu dengan adanya iklan melayang tersebut. Selain iklan, sobat juga bisa mengisi widget ini dengan chat box atau like box atau lainnya. Nah, untuk Cara membuat Iklan melayang (Floating ads) di blog sobat bisa lihat di bawah ini:

1. Masuk ke blogger.com menggunakan id blog sobat
2. Tata Letak
3. Tambah Gadget
4. Cari HTML/Javascript
5. Copy kode di bawah ini dan pasang di pengeditan html widget

<style type="text/css">
#gb{
position:fixed;

top:50px;

right:300px;

z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:center;
border:2px solid #000000;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript" src="http://www.geocities.ws/reggy/ads.js"></script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
Klik iklan di bawah ini lalu Klik CLOSE </a>
</div>
<center>

<!----Kode iklan / like box / lainnya----->

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

6. Simpan dan lihat hasilnya

Ket:

• Tulisan yang berwarna merah adalah kode iklannya, bisa juga sibat ganti dengan kode lain seperti like box / tombol follow twitter / lainnya
• Tulisan yang berwarna biru adalah posisi floating ads nya
• Sobat bisa merubah warna kotak adsnya. Ganti tulisan yg berwarna hijau

Read More

Memasang Related post with thumbnail (Linkwithin) di blog - 38 komentar

Nah, setelah sekian hari kang reggy istirahat tidak mengurus blog. Akhirnya, kang reggy kembali datang mengurus blog :D. Sekarang, kita akan mempelajari tentang bagaimana cara memasang related post with thumbnail dari Linkwithin. Linkwithin adalah situs penyedia widget related post bergambar untuk beberapa blog atau website. Pada posting sebelumnya juga, kang reggy pernah menjelaskan bagaimana cara memasang related post with scroll di bawah postingan. Fungsi dari related post with thumbnail ini sama dengan related post sebelumnya. Yaitu untuk mempermudah pengunjung blog sobat membaca postingan lainnya dan fungsi lainnya yaitu untuk meningkatkan pageview sobat. Nah, berikut penampakan dari related post with thumbnail (linkwithin)

Linkwithin akan membaca seluruh postingan sobat secara random. Bahkan, postingan yang belum pernah dilihat, akan ditampilkan oleh linkwithin. Jadi fiturnya bagus kan ;). Linkwithin biasanya dipasang di bawah postingan. Tampilan linkwithin, dapat menarik perhatian pengunjung untuk mengkliknya. Linkwithin melakukan generating gambar dari postingan yang dimuat, atau jika tidak ada gambar dalam suatu postingan, LinkWithin akan menampilkan gambar dasar berwarna abu-abu dan sedikit bertekstur. Nah, tertarik untuk memasangnya di blog sobat, so cek this out..

Cara memasang Related post with thumnail (linkwithin) di blog

1. Langsung saja sobat kunjungi situsnya di www.linkwithin.com/learn
2. Di bagian kanan, terdapat kolom pengisian untuk mendapatkan widget linkwithin
3. Isi alamat e-mail sobat dengan benar
4. Di kolom selanjutnya, isi dengan url blog/website sobat
5. Kemudian pilih platform blog sobat. Nah, langkah ini dilakukan jika sobat ingin memasang widget linkwithin secara mudah dan cepat
6. Pilih jumlah postingan/stories yang ingin ditampilkan
7. Jika blog sobat menggunakan tampilan yang gelap, centang saja pada "My blog has light text on a dark background"
8. Lalu klik Get Widget!
9. Dihalaman selanjutnya sobat akan dibimbing untuk memasang widget linkwithin sesuai dengan platform blog
10. Setelah itu di halaman Tata Letak, drag widget link within ke bawah postingan

Cara menghilangkan widget linkwithin di homepage
Bila sobat memasang widget link within menggunakan langkah cepat dan mudah. Hasilnya widget akan muncul di homepage. Jadi aneh terlihatnya, Selain itu, loading di homepage akan menjadi lambat dan berat. Nah, untuk menghilangkan widget linkwithin di homepage silahkan ikuti langkah - langkah di bawah ini:

1. Ikuti langkah-langkah mendapatkan widget linkwithin seperti biasa, namun menggunakan Platform Other
2. Lalu copy kodenya
3. Masuk ke halaman Template
4. Edit HTML lalu Lanjutkan
5. Cari kode </body> gunakan ctrl+f
6. Copy kode di bawah ini dan pastekan di atask kode </body>

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

   Paste kode linkwithin disini

   </b:if>

7. Simpan Template

Cara mengganti tulisan You might also like pada linkwithin
Nah, sekarang saatnya modif widget tersebut. Yaitu dengan mengubah tulisan You might also like dengan tulisan yang sobat inginkan. Berikut langkah-langkahnya:

1. Masuk ke halaman Template
2. Edit HTML lalu Lanjutkan
3. cari kode </head> gunakan ctrl+f
4. pasang kode di bawah ini di atas kode tersebut
   

   <script>linkwithin_text='Artikel Terkait:'</script>

5. Ganti tulisan Artikel Terkait: dengan tulisan yang sobat inginkan
6. Simpan Template

Nah, bagaimana ? sudah jelas ? okedeh kang reggy pamit dulu untuk Memasang Related post with thumbnail (Linkwithin) di blog. Sampai Jumpa ;)

Read More

Cara membuat 3 kolom di atas footer - 44 komentar

Hallo sobat blognya reggy, kita akan membahas lagi tentang tutorial blogspot. Mungkin pemasangan widget di sidebar sobat sudah penuh. Nah, alangkah baiknya untuk memasang 3 kolom di atas footer ini, yaitu seperti saya. Jadi sobat bisa memasang widget di 3 kolom ini. Cara memasangnya cukup mudah kok sobat, ikuti langkah - langkah di bawah ini ok?

1. Login pada blog sobat
2. Langsung ke halaman Template kemudian Edit HTML
3. Expand Template Widget
4. Cari kode ]]></b:skin> letakkan kode di bawah ini di atas kode tersebut

#footer-bottom {
width: 900px;background:#fff;
position: relative;display:inline;
clear:both;
margin:0 auto 0;
color:#000;
float: left;
padding:10px;
}
#left-bottom {
width: 270px;
float: left;display:inline;
margin:10px 5px 0 5px;
padding:5px
}
#center-bottom {
width: 280px;
float: left;
margin:10px 5px 0;
padding:5px
}
#right-bottom{
width: 270px;
float: left;display:inline;
margin:10px 5px 0;
padding:5px
}

5. Lalu cari kode <div id='footer'> dan letakkan kode di bawah ini di atas kode tersebut

<div id='footer-bottom'>
<b:section class='footer-bottom' id='left-bottom' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='footer-bottom' id='center-bottom' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='footer-bottom' id='right-bottom' preferred='yes' showaddelement='yes'>
</b:section>
</div>

6. Simpan dan lihat hasilnya

Keterangan:

• Kode yang berwarna merah adalah ukuran masing - masing kolom, bisa sobat ganti dengan kemauan sobat sendiri
• Kode yang berwarna biru adalah warna background nya bisa sobat ganti dengan kemauan sobat sendiri. Klik Disini untuk mengecek kode warna

Selamat Mencoba!!! :D

Read More

Cara membuat show / hide guest book dari atas - 13 komentar

Ehm..Ehm.. Cek..Cek..1..2..3.. Hai sobat, apa kabar, Setelah lama kebingungan mau update post tutorial blogspot tentang akhirnya ketemu juga, yaitu Cara membuat show / hide guest book dari atas. Tapi yang kali ini beda loh, bukan yang saya share Disini . Kalau yang itu kan show / hide dari kanan. Kalau ini show / hidenya dari atas. Seperti punya saya. Kalau mau lihat Demonya lihat ke bagian kanan blog saya ada gambar Guest Book dan klik itu. Dan chat box pun keluar. Sobat ingin tau bagaimana cara membuatnya? Ikuti langkah - langkah di bawah ini:

1. Pastikan sobat sudah login pada blog sobat
2. Langsung beralih ke halaman Rancangan
3. Selanjutnya klik Tambah Gadget dan pilih HTML / Javascript
4. Kemudian pasang kode di bawah ini

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:autopx;
width:autopx;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #FF0000;
background: #F5F5F5;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:5px;
-moz-box-shadow: 0px 2px 5px 0px #FF0000;
}

</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:#F5F5F5;">

<!-- Taruh kode chat box sobat Disini -->

</div>
</div>

<div align="center"><a href="javascript:void(0);" onclick="showHideAT()"><input type="button" value="Close" class="close" /></a>
</div>

</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<div style='display:scroll; position:fixed; top:80px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://1.bp.blogspot.com/-dsspRx_lf3M/TvvZ4De97aI/AAAAAAAAAAw/PTp1z_YvqJE/s1600/Chat+Book.png"  /></a>
</div> 

5. Simpan dan lihat hasilnya

Keterangan:

• Ganti tulisan  yang berwarna merah dengan kode chat box sobat
• Jika sobat ingin merubah garis pinggirnya ganti kode yang berwarna biru
• Jika sobat ingin merubah tab picturenya ganti kode yang berwarna pink
• Kode yang berwarna hijau adalah kode background nya
• Sobat tiadk tau kode warna? silahkan lihat Disini

Bagaimana? sudah jelas? bila masih ada pertanyaan silahkan berkomentar oke? Selamat Mencoba!!

Read More

Cara menonaktifkan highlight pada blog - 2 komentar

Sudah agak lama niih tidak update post tentang Tutorial Blogspot, pada post kali ini saya akan menerbitkan post tentang Cara Menonaktifkan highlight pada blog. Sedikit penjelasan dari saya, highlight adalah jika sobat ingin mengcopas kata, maka kata tersebut di block terlebih dahulu. Jadi, highlight adalah memblock kata. Cara menonaktifkan highlight pada blog adalah salah satu cara agar blog kita tidak bisa di copas. Artikel tentang disable klik kanan Sebelumnya, yaitu tentang Cara disable klik kanan. Sobat ingin tau bagaimana cara menonaktifkan highlight pada blog? Berikut langkah - langkahnya

1. Login pada blog sobat
2. Rancangan
3. Tambah Gadget
4. HTML / Javascript
5. Copy paste kode dibawah ini

<script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
disableSelection(document.body)
disableSelection(document.getElementById("mydiv"))
//Sample usages
//Disable text selection on entire body
// //Disable text selection on element with id="mydiv"

</script>

<body oncontextmenu="return false;">
<body document.onselectstart="return false">

6. Simpan dan lihat hasilnya

Selamat Mencoba!!!

Read More

Cara memasang widget floating social bookmark efek mouseover - 11 komentar

Di liburan ini saya akan menerbitkan post tentang "Cara memasang widget social bookmark efek mouseover". Di widget ini letaknya di atas dan bila mouse di arahkan ke widget tersebut akan keluar widgetnya itulah yang dimaksud dengan efek mouseover. Kita telah banyak menjumpai widget ini di berbagai situs. Namun designnya yang berbeda - beda. Jika ingin tau lebih jelas lagi silahkan lihat demonya Disini. Sobat ingin tau cara memasang widget ini? Langsung saja kita ke TeeKaaPee:

1. Login pada blog sobat
2. Tata Letak
3. Tambah Gadget
4. Html / Javascript
5. Copy kode di bawah ini dan pasang di blog sobat

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 90px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIdgRWh1JQRwPk6mtXTO0Hs00XqbqiVx3ia47mnD-Yeuow2pV0JOEPbkXqvASd6TkLqVBz94ugmWgFnLDFeoEOoKRZy3kKbXpx673PFwEmkc9PZAnRwP3Z_ucxhoXQmpD9StAwtCnGNNd/s400/rss_64x64.png);
}
ul#navigation .facebook a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMgdf6OoIMaCR9DeJBBA4p7zfgqCbFQRF_6obahcx-RCgOi7ewr4R5sHElgrR1Px1cbPZS0mxnTGX9rLQobZBmALnYd64HqgfkZs2H20mK6JJ2V4BMjQ-LbkpjPZ9xHVRF7TBwUR_LoQCg/s400/facebook_64x64.png);
}
ul#navigation .twitter a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjobc6-v4CrbGAy4bzL_ex1PZrPoNpoS3u4X4QBMnZjjqGu9EVgU2Iv6DoCLhJgzxacyImeffSjyB4L-8qvALf5wNvzHHOAU4uY89-jZ2bSHiO8hkWfgxJY4GW5AAmjTF170GTLzZQE5dzG/s400/twitter_64x64.png);
}
ul#navigation .googlebookmarks a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZqgK1n74a6KOYUSiSxDpQl8EXPCxuLBfHJe1BtwW-Rou5EfT-RNlWaYenfUg_0Dt97maV4M1viwdiS9qflKehvKHikJBcfyb1VqM81eKq-5dIMeDt_iiUndOSuyYj-29TqL4zSGpoxUIm/s400/google_64x64.png);
}
</style>

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

<br />
<ul id="navigation">
<li class="rss"><a href="http://Blog Kamu.blogspot.com/atom.xml">RSS Feed</a></li>
<li class="facebook"><a href="http://Ganti Dengan Url Akun Facebook Kamu">Facebook</a></li>
<li class="twitter"><a href="http://Ganti Dengan Url Akun Twitter Kamu">Twitter</a></li>
<li class="googlebookmarks"><a href="https://www.google.com/bookmarks/">Google</a></li>
</ul>

6. Simpan widget dengan tanpa judul

Selamat Mencoba!!!

Read More

Cara memasang widget follow twitter - 2 komentar

Hallo sobat :D, kali ini kita akan membahas bagaimana cara memasang widget follow twitter. Oh iya, maaf ya bagi semua pengunjung, jika berkomentar keluar kode captha. Mengapa saya memasang demikian? karena agar blog saya aman dari komentar spam. Ya sudah kita kembali ke pembahasan. Ngomong - ngomong sobat punya twitter gak? Pasti punya kan? Ya, ternyata twitter sudah menyediakan widget tombol follow. Mau tau cara memasangnya? Ikuti langkah - langkah di bawah ini:

1. Pilih dan desain tombol twitter sesuka hati sobat DISINI

2. Jika sudah, copy kodenya

3. Pasang di blog sobat

Contoh Widget Tombol Follow Twitter Blognya Reggy Sekalian follow okeh ;)
 
Follow @reggy_70
 
Jika Sobat Ingin Memasangnya Di Bawah Post Ikuti Langkah - Langkah berikut:

1. Rancangan

2. Edit HTML

3. cari kode <data:post.body/> atau <div class='post-footer'>
4. Copy kode <div style='float:right;margin-right:5px;'>Kode Twtter Button</div> dan pastekan di atas kode pada no 3
Ket: ganti tulisan yang berwarna biru dengan kode toblog follow twitter sobat
5. Simpan Template dan lihat hasilnya

Selamat Mencoba!!! :D 

Read More

Cara memasang related post di bawah post - 5 komentar

Blogging..bloggging.. Hhe :D. Lagi semangat blogging nih sobat. DI hari jum'at ini saya akan menerbitkan post tentang " Cara memasang related post di bawah post". Related post ini dilengkapi dengan fitur Scrolling. Fungsi dari widget ini adalah agar pengunjung dapat melihat artikel lainnya dari blog sobat. Berikut langkah-langkah memasang related post di bawah post:

1. login pada blog sobat

2. Rancangan

3. Edit HTML

4. Cari kode ]]</b:skin>

5. Copy kode di bawah ini dan pastekan di atas kode pada no 4

/* Related post
----------------------------------- */
.rbbox{border: 1px solid #D8D8D8;
padding: 5px;
background-color: #E0F8E0;
-moz-border-radius:5px;
margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

6. Cari kode <p><data:post.body/></p>
7. Copy kode di bawah ini dan pastekan di bawah kode pada no 6

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0;
padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/><script type='text/javascript'>var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;var maxNumberOfPostsPerLabel = 4;var maxNumberOfLabels = 10;maxNumberOfPostsPerLabel = 50;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);a.href = alturl;if(a.href!=location.href) {var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}}for (var l = 0; l &lt; json.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);var txt = document.createTextNode(label);var h = document.createElement(&#39;b&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;albri&#39;).appendChild(div1);}}}function search10(query, label) {var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = &quot;<data:label.name/>&quot;;var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel &lt; maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div><script type='text/javascript'>RelPost();</script>
</div>
</b:if> 

Tulisan yang berwarna merah bisa sobat ganti dengan judul related postnya
8. Simpan Template

Selesai dan Lihat hasilnya 

Read More

Cara memasang widget recent comment by Blognya Reggy - 1 komentar

Pada post kali ini kita akan membahas tentang Tutorial BLogspot lagi, yaitu "Cara memasang widget recent comment by Blognya Reggy". Memasang recent comment adalah salah satu cara agar pengunjung tau pengunjung mana yang berkomentar di halaman A atau di halaman B. Oh iya. Saya ambil kode ini dari jayaputrasbloq.blogsspot.com . Cara memasangnya cukuplah mudah ikuti langkah - langkah di bawah ini:

1. Login pada blog sobat

2. Rancangan

3. Tambah Gadget

4. HTML/Javascript

5. Copy kode di bawah ini

<script style="text/javascript" src="http://recent.googlecode.com/files/recent%20comment.txt"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;</script><script src="http://blognya-reggy.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

6. Simpan dan lihat hasilnya

Keterangan:
> showposttitle adalah penampilan judul posting pada widget
> car numcomments adalah jumlah comment yang ingin sobat tampilkan
> sohcommentdate adalah setting penampilan tanggal komentar

Read More

Cara membuat popular post dengan komentar - 8 komentar

Pada kali ini Blognya Reggy akan menerbitkan post tentang "Cara membuat popular post dengan komentar". Ngomong - ngomong sobat tau Popular post kan? Yups.. Popular post adalah widget daftar artikel blog sobat yang paling sering di baca dan di komentari. Cara memasangnya mudah kok. Ikuti langkah - langkah di bawah ini

1. Login pada blog sobat

2. Rancangan

3. Tambah Gadget

4. HTML/Javascript

5. Copy kode di bawah ini

<script language="javascript">
titlebold=false;
numposts=9999;
maxshowresult=5;
explanation="komentar";
home_page="blognya-reggy.blogspot.com";
</script>
<script style="text/javascript" src="http://www.geocities.ws/reggy/popular%20post.js"></script>

Ganti tulisan yang berwarna merah dengan alamat blog atau web sobat. Dan tulisan yang berwarna biru adalah jumlah popular post yang ditampilkan
6. Simpan

Lihat hasilnya... 

Read More

Cara memasang daftar isi sitemap blog - 2 komentar

Ini adalah gambar Daftar isi script 1

Pada hari minggu kuturut Blognya Reggy buat posting..HeHeHe.. :D. Kok malah nyanyi lagu delman tapi tentang Blognya Reggy HeHehE :p. Pada hari minggu yang cerah ini kita akan membahas tentang  "Cara memasang daftar isi sitemap blog". Ngomong - ngomong sobat tau fungsi Daftar isi sitemap gak? Funsinya untuk memudahkan pengunjung blog sobat melihat artikel apa saja yang terdapat di blog sobat. Tetapi widget ini buka buatan saya melainkan buatan http://www.abufarhan.com. Berikut langkah - langkah untuk memasang daftar isi sitemap di blog:

1. Pilih dahulu kode di bawah ini

Script 1:

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>

<script src="http://alamat-blog-sobat.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

<script type="text/javascript">

var accToc=true;

</script>

<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

Script 2:

<script src="http://jarlok.com/Script/Sitemap.js">

</script> <script src="http://alamat-blog-sobat.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc">

</script>

Ganti tulisan yang berwarna merah dengan alamat blog/web sobat
2. Jika sudah memilih, copy kodenya
3. Buat sebuah Post Baru
4. Di pojok kanan atas kotak post ada 2 plihan yaitu Edit HTML dan Compose pilih Edit HTML
5. Paste kodenya dan Terbitkan Entri
6. Jika sobat ingin memasangnya di menubar lihat DISINI caranya

Langkah Membuat Daftar Isi Sitemap Selesai. Dan Selamat Mencoba!!! :D 

Read More

Cara memasang widget feedjit - 5 komentar

Pada post kali ini kita masih membahas tentang tutorial blogspot pemasangan widget. Yaitu cara memasang widget feedjit. ngomong - ngomong sobat tau feedjit gak? Yups :D Benar. Feedjit adalah situs penyedia widget live traffic otomatis dengan tidak dipungut biaya alias gratis!! Pasti sobat langsung masang kalau ada hal gratis hehehe... Caranya mudah kok ikuti saja langkah - langkah di bawah ini:

1. Kunjungi situs Feedjit 
2. Klik kota berwarna hijau bertuliskan Choose your Feedjit 
3. Di halaman baru ada tiga pilihan pilih yang Free di paling kiri. klik Sign Up 
4. Di halaman pengedit feedjitnya
5. Pilih warna, ukuran lebar widget, tinggi dan lain - lain
6. Di kotak Install Feedjit On pilih apakah sobat ingin memasang di Blogger atau yang lain
7. Klik Go!
8. Copy kode HTML nya dan pasang di blog sobat

Selesai deh ... Good Luck :D

Read More

Cara memasang widget headline news - 4 komentar

Pada hari ini kita akan membahas tentang bagaimana cara memasang widget headline news. Maksud headline news bukan berita melainkan menampilkan posting - posting yang baru di terbitkan oleh suatu blog. Jika ingin tahu bagaimana headline news itu bagaimana lihat demonya DISINI. Cara memasangnya tidak terlalu sulit bahkan dapat dikatakan Mudah. Berikut langkah - langkah memasangnya:

1. Login pada blog sobat
2. Tata Letak
3. Tambah Gadget
4. HTML/Javascript
5. copy kode di bawah ini

<script type="text/javascript">
var hn_url_blog = "http://alamatblogsobat.blogspot.com";
var hn_jumlah_post = 8;
var hn_warna_latar = "#F5F5F5";
var hn_warna_garis = "#000000";
var hn_posisi = "bottom";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="http://www.geocities.ws/reggy/postnew.js">
</script>

Ket: ganti tulisan yang berwarna merah dengan alamat blog sobat
6. Simpan dan lihat hasilnya

Selamat Mencoba!!! :D 

Read More

Cara disable klik kanan pada blog - 6 komentar

Semua pengguna blog pasti tidak ingin post pada blognya dicopas terang - terangan oleh Orang - orang tanpa memberi sumber. Nah.. yang akan saya post kali ini adalah "Cara disable klik kanan pada blog". Tutorial ini bisa membantu agar blog sobat tidak di copas dengan keras. Ikuti langkah - langkah di bawah ini:

1. Login pada blog sobat

2. Tata Letak

3. Tambah Gadget

4. HTML / Javascript

5. Copy kode di bawah ini

<script>
var message="Eiitss!!! Mau copas yaa? GAK BOLEH!!!!!";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script>

Tulisan yang berwarna merah bisa sobat ganti dengan tulisan yang sobat inginkan
6. Simpan

Selesai dan lihat hasilnya

Selamat Mencoba!!!

Read More

Cara Memasang Widget Google Translate Bendera (2) - 5 komentar

 

Sebelumnya saya telah update post tentang Cara Memasang Widget Google Translate Bendera. Nah kali ini saya juga akan update post tentang Cara Memasang Widget Google Translate Bendera juga. Namun, kali ini versi keduanya. Beda dengan widget sebelumnya. Jika sebelumnya berbentuk bulat. Kali ini berberntuk Kotak. Berikut kodenya:

<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtmoVrSMylt-XeaX1EWv1zfNFoi0jcZDfaGymBuC9LhLNEcuLgjEBqHUfHX_A-XdzaKLSm__WvCiTsyaJeN1ppcOExM327m7I4yCk-_-Hnv20CGUcFDvW2a2CNfo9FhMnhpLox5pTG0Hc/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW1vR6wHf_IlyQJoIXI2PjTlC1w-zz5W9V8ZqeaWb8UBkAfsvt4JCVGLFHdjNuqLLI8DxAcDTvc-zaqvOPnTzknUqJubIDeMeN7IyFqbl75GMVR1VG6xXZZcgdFEpQjXuwOBHtKPbUI64/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCK3526PRqNPfR7S8JvergR3g5urXXSFlu1N_IxrRvtE3nLfHICCPGaNZ83NkLgS8o2u4W2zLCTvmxAddtXuXkqOEbB-lUPSIfVnEZ04JRgZ9DwceTC4qmACAG3fAFONy6XBnn5ct90A94/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguXmiwOHG_l8c2tr8WesufCnFDpC033d25Uf_IUkm2KJfG8F_QTkjso12588RCUloTnbsp0vnMeUosJnHn8OfbE5AnfmPyX6GCaPGUizlBvbzev1trbj2_xVmCGkD4v7FqWKGDMsTDv2ys/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0knq0eHyylYRXZZWc4AtppXBbf9fJyQu-x0kfEweY0mHQyWI4EFWvN9MWfAuEKqrRtDftIEZ8IlNNMaXVHN3mSDxusdHgze0PGTGCqUingiIK1K_mvjCgDEJQXUh4szcza7yjmiNNXf0/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0VzvsWhPU_T1F-lG20TXOYW769mYZTQOW9O1RjjtUX6Ox6idXDbe-EbUw0kz4aBa4PKAXnFA26-2T2yshsi7g4q2OREKVwPxwqMG0xsY9HpDjty1_FlH-CaoNwjFu56FZBMzU7FvpjHE/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<br /><br />
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjN7zr3esYj0p4WTm0sM0Ou7O_VzACHew0I1nB5ADJb9E3ejm-YLq2gGp-Nm32867ZAivbGRK-Vb1FybpLONLk5TyYewEUsqHLrQs8Ix388i5RVJ0Mngv2D8mB9dE_gp5zqGg3REO4L7w/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgluCvbKSirftPH3071Z3WAI_yRCUWaXatUfpDrLdRX5yfVeRsVivWbI2EmXRwh6gX9Hsjipbwx_VKlYuBNOAIQV2UDMe0uX3Dt68Oy0fM0d8c79vv17Iek3JVuzoa02yJyqHa2vvSo4Wc/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO5GOLdFcM7VhvbFQ66t_dQ6TgZ9SxlwGruc_xe4jdragonykMbDFEWVJmsKqdtvHhRkvzWneZs_RcviAwjF6csPKaATyfVJ7ix4i2e2mtJZh23AGoJWdJhrz2iyKrCgC_hgtk4hx1T2AH/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZQEobXP44mgIm2xzLE1aiA3dUcSYN2GR9hbpa13_qHxp54Clo-L9HOlA9JmUbgO8YdhPTz-YbxNojeDewv2HDrvtC6r545xS-BH1GLiNit0p96sAJEphGT0QV7zWOn-ez-1C0Zgd4v0c/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi578kfDHO0KkWgpwgcWVn6Z6FQ_6k5L4k-Apc9Zo-Jhyphenhyphen9YUJlQDE3LCpaGWn8ioNaX8af1jEE9VArLHc9O5M1SJ5msIys3J0Fg11i4NvN-mJyrwWgxzQV8iKw-pw39HnGzkaLl-A6Fj8M/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRurknDZ_qjtocQ4LZ3TEs5JfYJk_uerqMcfrll53iu5TKRB6fAWtd0I3XameaJKMf2bGPY0oPSUCEdZu4vc6oEleY5lDHzfpftcBbO9GIxCmeOCp1rRNdZRZh6yNvfK2LP-xW_6uGgrQ/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
</div> <div style=”font-size:10px;margin:8px 0px 3px 0px”> by : <a href=http://www.blogspottutorial.com/>BTF</a>
</div>

Copy kode diatas dan pasang pada blog sobat. Bila sobat belum tau cara memasang widgetnya liha DISINI . Selamat Mencoba!!!

Read More

Cara memasang widget My Ip Adress - 0 komentar

Hallo sobat blogger, ketemu lagi di postingan baru Blognya Reggy. Kali ini, kita akan membahas tentang "Cara memasang widget My Ip Adress". Widget ini berasal dari situs 123myip. Fungsinya, agar pengunjung tau apa ip adressnya, osnya, dan browsernya. Cara memasangnya tidaklah sulit. Bahkan dapat dikatakan MUDAH.

Widget 123myip versi kecil

<a href="http://www.123myip.co.uk/cometo/?en"><img src="http://www.123myip.co.uk/ip-address/?size=125x125" border="0" width="125" height="125" alt="IP" /></a>

Widget 123myip versi besar

<a href="http://www.123myip.co.uk/cometo/?en"><img src="http://www.123myip.co.uk/ip-address/?size=468x60" border="0" width="468" height="60" alt="IP" /></a>

Pilih salah satu kode di atas, dan pasang pada Blog sobat, mudah kan?
Selamat Mencoba!!!

Read More

Cara memasang widget live traffic widgeo - 0 komentar

Pada postingan sebelumnya Blognya Reggy menerbitkan entri tentang Cara memasang widget flash message. Namun, pada kali ini kita akan membahas tentang "Cara memasang widget live traffic widgeo". Yaitu sama dengan widget flash message, dari situs widgeo. Caranya mudah sekali sobat. ikuti saja langkah - langkah di bawah ini:

1. Kunjungi web widgeo

2. Untuk widget live traffic, Widgeo langsung menampilkan halaman widget live traffic

3. Pilih salah satu widget yang anda inginkan dan klik widget itu

4. Selanjutnya, atur timezone, kategori blog, email sobat dll form yang ada disana

5. Klik Get Widget

6. Copy kodenya, dan pasang di blog anda

7. Selesai dehh

Mudah kan? Selamat Mencoba!!!

Read More