Slide show Post Image Dengan Jquery pada Blog ...!

Slide Show....? dari kata tersebut kita bisa tahu kalo slide show itu menampilkan gambar atau foto yang bergerak sendiri. coba kalian perhatikan websitenya berita seperti detik.com, Kompas, Okezone, dll, disana banyak sekali fitur slide shownya. Terutama di website yang berisi film, seperti cineplex21 itu pasti suka ada slide show dari gambar film yang akan diputar. Bagi yang penasaran bentuknya kaya gimana kalian bisa lihat DEMO PREVIEW nya DISINI,,,

sekarang yang jadi masalah, gimana caranya memasang gambar slide show itu pada blog kita...? jawabannya sebenarnya mudah dan sangat simple, BELAJAR DAN PRAKTEK(hehehe...). jawaban yang aslinya yaitu dengan bantuan Jquery.

Terus gimana cara masangnya...? ( nanya lagi... )

daripada nanya terus, Mendingan langsung praktek buatnya yukk....! Langkah pertama yaitu Login Ke Bloger kalian, lalu pilih rancangan/tata letak. Sekarang Pilih EDIT HTML dan jangan lupa back up template kalian.

tahap selanjutnya, kalian pasang script berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

/* ------------------------------------------------------------------------
s3Slider

Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
-------------------------------------------------------------------------- */


(function($){

$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);

//]]>
</script>

<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>

Keterangan :
== jika kalian ingin merubah kecepatang bergerak cari kode angka 4000

Setelah selesai lalu Simpan Template.

Pekerjaan kita masih berlanjut, sekarang masuk ke elemen, Pilih Tambah gadget lalu klik HTML/Java Script. masukan script dibawah ini didalamnya.

<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="URL GAMBAR KALIAN" />
<span>BUAT TEMPAT TULISAN KALIAN</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="URL GAMBAR KALIAN" />
<span>BUAT TEMPAT TULISAN KALIAN</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="URL GAMBAR KALIAN" />
<span>PIRATES OF THE C...!</span></a>
</li>

<li class="s3sliderImage">
<a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="URL GAMBAR KALIAN" />
<span>BUAT TEMPAT TULISAN KALIAN</span></a>
</li>

</ul>
</div>

<div class='clear'></div>

Keterangan :
== ganti YOUR-LINK-HERE dengan Link yang kalian kehendaki ( merah )
== ganti Image/gambar dengan gambar kalian ( biru )
== ganti dengan tulisan kalian ( Hijau )

Simpan Template kalian dan lihat hasilnya. Menarik kan...?
semoga bermanfaat dan jangan lupa kasih tau teman yang lain juga ya... oia komentarnya mana...?

Cara Memasang Banner Pasang Iklan 125x125 di Blog ...!

Pas lagi jalan2, mampir dulu ke gramedia, eh dimana2 liat cara meraup dollar dari internet, cara mendapat uang dari ngeBlog,... Pokoknya kata2nya kaya gitu dech. Tapi gimana caranya ...? itulah yang jadi pertanyaan diotak saya.
saya baca tuch buku ( Walau terpaksa nyobek plastik pake acara sembunyi2, tapi kayaknya yang laen juga gitu ya...). ehh... ketemu dech salah satu caranya. Mau tau kan? Jawabannya ya sama persis kaya judul artikel ini, MEMASANG BANNER PASANG IKLAN DI BLOG KITA. mungkin ada situs2 yang menyediakan jasa pemasangan iklan ini. Tapi yang akan kita bahas di artikel ini yaitu gimana cara menempatkan atau menyediakan tempat untuk memasang iklan itu. Oia untuk sample coba lihat banner di sidebar blog saya.

Untuk membuatnya mari kita bahas caranya pada penjelasan dibawah ini :

1. Login Ke Blogger kalian
2. Masuk Ke Rancangan/Tata Letak
3. pilih EDIT HTML ( Selalu biasakan back up template ya )
4. Dikolom script HTML, Copy kode CSS berikut dan simpan di atas kode ]]></skin>

#iklanAzis{
margin:0px;
padding:5px;
text-align:center
}
#iklanAzis img{
margin:0px 4px 4px 0px;
padding:3px;
text-align:center;
border:1px solid #c0c0c0
}
#iklanAzis img:hover{
margin:0px 4px 4px 0px;
padding:3px;
text-align:center;
border:1px solid #333
}

5. SIMPAN TEMPLATE
6. Belum selesai pekerjaan kita, lanjut kalian pilih ELEMEN
7. Kalian pilih TAMBAH GADGET
8. Pilih HTML/Java Script
9. Copy script berikut didalamnya.

<div id="iklanAzis">
<a target="_blank" href="http://www.z33s.co.cc/"><img alt="ads" src="http://i31.tinypic.com/2urtshh.jpg" border="0" /></a>

<a target="_blank" href="http://www.z33s.co.cc/"><img alt="ads" src="http://i31.tinypic.com/2urtshh.jpg" border="0" /></a>

<a target="_blank" href="http://www.z33s.co.cc/"><img alt="ads" src="http://i31.tinypic.com/2urtshh.jpg" border="0" /></a>

<a target="_blank" href="http://www.z33s.co.cc/"><img alt="ads" src="http://i31.tinypic.com/2urtshh.jpg" border="0" /></a>

</div>

10. SIMPAN, dan selesai Dech....

KETERANGAN :
== Ganti kode warna merah dengan URL iklan kalian
== Ganti kode warna Biru dengan URL image kalian.

Baca Juga : Membuat Random Banner Iklan

Sekarang lihat hasilnya , Bagus bukan...? Sekian dulu yach, semoga bermanfaat dan jangan lupa untuk memberikan komentarnya. Kalo kalian suka dengan artikel ini kalian bisa mengKlik button Share dibawah. Terima kasih N Happy Blogging.

Memasang Panel Slide Vertikal ( Vertical Sliding Panel ) di blog

Coba Kalian perhatikan gambar di atas, nah itulah yang namanya panel slide atau ada yang menyebutnya dengan Verical Sliding panel. oia Kalian Bisa lihat DEMO PREVIEW nya DISINI...
Sebenarnya apa sich panel slide vertiKal itu ...? sebuah media atau panel untuk mnyimpan informasi atau apa saja dengan posisi menempel pada bagian samping blog. Jika kalian tertarik untuk membuatnya, mari kita lanjutkan pembahasan trik ini.

Langkah - langkah membuatnya :
1. Login Ke blogger kalian
2. Pilih Rancangan/tata letak
3. kalian pilih EDIT HTML ( jangan lupa back up templatenya ya ..)
4. Sekarang kalian cari kode ]]></skin>
5. copy script berikut diatasnya ( oia disini saya akan berbagi 2 model panel slide vertikalnya ) :

Script Model 1

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

script Model 2

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #0CCB07;width:320px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px 30px 30px 100px}
.panel p{color:#ffffff;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#0CCB07;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:2px solid #0CCB07;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px 35px 10px 10px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border2px solid #0CCB07;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px 40px 10px 10px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
a:focus{outline:none}
.panel img{border:1px solid #FFFFFF;float:right;margin:3px 3px 6px 5px;padding:3px}
.panel h3{border-bottom:1px solid #FFFFFF;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#0CCB07;font-size:13px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

Keterangan :
== DIATAS ADA 2 SCRIPT, PILIH SALAH SATU UNTUK DISIMPAN DIATAS KODE ]]></skin>

6. Sekarang copy script dibawah ini diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

7. masih lanjut ya ... Sekarang cari kode </body> lalu copy Script berikut di atasnya :

<div class='panel'>
<h3>Selamat Datang Di z33s BLOG</h3>

<p style='text-align:justify'>Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...
</p>
<h3>Sekilas tentang penulis</h3>
<img height='73px' src='http://3.bp.blogspot.com/_MvLBi88bM_I/SsWD4cLCTdI/AAAAAAAAAQA/Z6Do8sD4AbA/S45/Q.jpg' width='73px'/>
<p>Nama saya adalah Azis,saya seorang blogger.</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='http://www.z33s.co.cc/' title='home'>Home</a></li>
<li><a href='#' title='about'>About</a></li>

<li><a href='#' title='portfolio'>Portfolio</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='AKUN TWITTER KALIAN' title='twitter'>Twitter</a></li>
<li><a href='AKUN FACEBOOK KALIAN' title='facebook'>Facebook</a></li>
<li><a href='AKUN FRIENDSTER KALIAN' title='friendster'>Friendster</a></li>

<li><a href='ALAMAT BLOG KALIAN' title='plurk'>My Blog 1</a></li>
<li><a href='ALAMAT BLOG KALIAN' title='myspace'>My Blog 2</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>z33s</a>

Catatan : ada beberapa kode script yang harus kalian ganti dengan kata dan URL yang kalian kehendaki. Dalam kode ada kata z33s boleh kalian ganti dengan nama kalian atau apa saja. untuk akun twitter, facebook kalian bisa ganti dengan yang lain. tergantung kalian mau diapakan panel slide vertikal itu ( hehe... hehe... ).

Semoga tips ini bermanfaat bagi kalian dan jangan lupa kasih komentarnya ya .... oia jangan lupa juga membaca sliding login panel with jquery

Aksi Coret Atap Gedung DPR Oleh Selebriti Pong Harjatmo

Sumber : Detiknews

Oleh : ayu/mad


Jakarta - Aktor kawakan Pong Harjatmo terus bersafari. Setelah tampil di stasiun televisi, pencoret atap gedung DPR tersebut kini menjadi pembicara di obrolan langsat (obsat). Dengan bangga, Pong menunjukkan sepatu yang dikenakan saat melakukan aksi nekat tersebut.

Pong tiba di angkringan Wetiga, Jl Langsat Kebayoran Baru, Jakarta Selatan, Jumat (30/1/2010), pukul 19.45 WIB. Dia datang menggunakan mobil sedan biru tua dan langsung menyapa para hadirin.

"Selamat malam," ucapnya. "Saya lagi mikir, mana lagi yang jadi sasaran (aksi coretan)," candanya diikuti tawa dari peserta.

Saat suasana mulai mencair, salah seorang blogger sempat melontarkan pertanyaan apakah Pong masih mengenakan pakaian yang sama ketika melakukan aksi nekat di Gedung DPR. Pemain film 'Bernafas dalam Lumpur' itu pun menjawab dengan santai.

"Belum, ini masih sama semua dari baju, celana dan sepatunya," jawabnya.

Jawaban Pong tersebut dilakukan sambil melepaskan sepatu hitam miliknya. Selain itu, dia juga membanggakan merek sepatu tersebut, yakni Belly.

Pong melakukan aksi nekat ini di atap gedung DPR. Dia menulis kata 'jujur', 'adil', dan 'tegas' dengan cat semprot. Sempat diamankan oleh petugas pamdal, Pong pun dilepaskan dengan syarat tak melakukan lagi perbuatannya.
Baca Selengkapnya disini ....

Menghilangkan Tang / Obeng ( Quick Edit ) pada blog ...!

Coba kalian perhatikan gambar diatas, disana ada bagian yang saya lingkari. itulah yang namanya icon tang/obeng, Tapi Kalo di dunia keBLOGGERan itu namanya Icon Quick Edit Blogger. Tapi kadang pas kita lihat tampilan blog kita icon tersebut kayaknya mengganggu pemandangan mata untuk sebagian para Blogger.

Trik kali ini yaitu gimana caranya supaya blog kita enak dipandang dengan menghilangkan icon tang/obeng tersebut. Mari kita bahas bersama. langkahnya seperti biasa kita melakukan perubahan terhadap blog kita.

1. Login Ke Blogger
2. Masuk Ke Rancangan/tata letak
3. Klik EDIT HTML ( jangan Lupa Back up dulu ya )
4. Coba kalian cari kode ]]></b:skin> lalu simpan kode berikut diatasnya.

.quickedit{
display:none;
}

5. Simpan templatenya dan Lihat Hasilnya apa yang terjadi ...? Cantiknya blog Ini...! :)

Simple dan sangat mudah kan...? coba kalian langsung praktekan, InsyaAllah Blog kalian akan tampil lebih menarik. Semoga bermanfaat ya... jangan lupa komentarya...
See You Next Time ...:)

Memasang Widget Untuk Merubah Ukuran Font Pada Blog

Jumpa lagi sob ... begitu sapaan para blogger ketika ku buka blog kesayanganku.... ( jadi mirip cerpen ). gini aja dech, kali ini saya mau ngasih trik buat para blogger untuk bisa memberikan wewenang kepada para pembaca agar bisa merubah ukuran huruf yang ada di postingan kita. mang bisa...?

Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :


mau tau kan caranya ...? yukkk langsung aja kita masuk ke cara membuatnya. seperti biasa kalian harus Login dulu ke blog kalian. setelah itu baca artikel dibawah tulisan ini :

1. masuk ke Rancangan / tata Letak
2. Kalian pilih EDIT HTML ( jangan lupa di back up )
3. Sekarang Kalian Cari Kode ]]></b:skin>
4. Copy Css berikut dan paste di atas kode tadi

/* Rubahhuruf By azis lamayuda
*/
#Rubahhuruf{
margin-right:10px;
padding-top:17px;
float:right;
}

5. Sekarang kalian cari kode </head>
6. Copy Script berikut dan paste diatas kode tadi

<script src='http://myscriptforme.googlecode.com/files/AzisFont.txt' type='text/javascript'/>
<!-- Mulai Rubahhuruf -->
<script type='text/javascript'>
$(function(){
$('input').click(function(){
var ourText = $('#main-wrapper');
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'large') {
finalNum *= 1.1;
}
else if (this.id == 'small'){
finalNum /=1.1;
}
else if (this.id == 'reset'){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

Keterangan :
== kode var ourText = $('#main-wrapper'); bisa kalian ganti sesuai keinginan kalian huruf pada bagian mana yang akan dirubah ukurannya, misalnya menjadi Content-wrapper atau yang lainnya.

7. Belum selesai, sabar dulu ya. sekarang kalian cari kode <data:post.body/>, dan copy script berikut lalu simpan diatasnya.

<div id='Rubahhuruf'>
<input id='large' type='button' value='+A'/>
<input id='reset' type='button' value='A'/>
<input id='small' type='button' value='A-'/>
</div>

sebagai tambahan jika kalian ingin menampilkannya di halaman posting saja tinggal kalian sisipkan kode diatas diantara kode berikut :

<b:if cond='data:blog.pageType == "item"'>

</b:if>

jadi bentuknya akan seperti ini :

<b:if cond='data:blog.pageType == "item"'>
<div id='Rubahhuruf'>
<input id='large' type='button' value='+A'/>
<input id='reset' type='button' value='A'/>
<input id='small' type='button' value='A-'/>
</div>
</b:if>

8. simpan dech... Selesai juga akhirnya. ( Lihat hasilnya ).

Ok.. semoga bermanfaat dan jangan lupa untuk membiasakan memberi komentar ya....

Membuat Iklan Melayang Dengan Button Close ... !

dari membaca judul ini saja kalian pasti sudah mengerti dan mungkin sudah tidak asing lagi judul ini di dunia blogger, kalo ga percaya coba kalian searching di mbah google cara membuat iklan melayang, pasti ketemu banyak.
namun disini saya hanya ingin berbagi dengan kalian, siapa tahu aja ada diantara ribuan blogger yang belum tahu cara membuatnya.
disini saya akan menjelaskan gimana proses pembuatannya, mau tahu kan ...?
Login dulu ke bloger kalian, setelah itu ikuti langkahnya dibawah ini :
1. masuk ke Rancangan/Tata Letak.
2. klik tambah Gadget atau tambah elemen.
3. Pilih HTML/Java script.
4. Nah Copy kode dibawah ini dan paste disana. jangan lupa simpan templatenya ya...

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</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.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>
Masukan script iklan atau Gambar yang anda inginkan di sini

</center>

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

Keterangan :
== Kode berwarna merah adalah tempat untuk meletakkan script iklan/gambar.

Tutorial simple namun sangat bermanfaat... jangan lupa komentarnya ya...

Apa Itu FriendFeed ...? Apa Manfaatnya ...?

FriendFeed adalah sebuah layanan situs micro-blogging yang bisa kita manfaatkan untuk membantu atikel-artikel terbaru anda bisa cepat terindex oleh search engine.Friendfeed menawarkan cara yang unik untuk mengetahui dan mendiskusikan informasi di antara teman-teman.

Tujuan dari FriendFeed adalah untuk membuat konten di Web lebih relevan dan bermanfaat bagi anda dengan menggunakan jaringan sosial yang ada sebagai alat untuk menemukan informasi menarik. Anda mendapatkan customized feed yang dishare oleh teman-teman Anda - dari berita keluarga hingga foto dan link video yang menarik. Dan teman-teman Anda mendapatkan Customized feed , penuh dengan hal-hal yang keren yang kamu share, intinya saling share di friendfeed ini.

Bagaimana Cara agar blog terindex google lebih cepat dengan Friendfeed ?

1. Login ke Friendfeed, Jika yang belum punya bisa daftar disini
2. Masuk ke Setting
3. Di dalam setting ada beberapa kotak yang harus diisi seperti :

== Name
== Username
== Description
== Service, dll

4. Pilih Service, dan Klik Add/Edit
5. Setelah muncul tampilan Pilih Blog
6. Masukkan Url Blog kita Lalu Blog Klik Import
7. Setelah selesai Klik Save Changes

Mengapa harus menggunakan FriendFeed?

1. Terbuka : FriendFeed akan meng-impor secara otomatis item bersama dari seluruh situs web, membuat semua situs yang Anda gunakan menjadi lebih lebih sosial.

2. Fleksibel : Friendfeed bebas anda gunakan dengan tujuan atau cara apapun, Anda dapat menggunakannya hanya sebagai cara untuk melihat apa yang teman-teman Anda lakukan, atau anda dapat aktif berbagi item Anda sendiri dan meninggalkan Komentar dan diskusi dengan teman-teman Anda. Terdapat juga banyak cara untuk mengakses dan menampilkan FriendFeed.

3. sangat mudah untuk memulai, Anda dapat berbagi hal baru di feed Anda segera setelah Anda mendaftar. percakapan ringan, hingga berbagi item dan Anda bahkan dapat diperkenalkan kepada teman untuk mendapatkan berita menarik dari teman - teman lainnya.

Bagaimana caranya agar foto dan media lain di RSS feed muncul pada FriendFeed?

FriendFeed memiliki dukungan terbatas untuk mengimpor RSS Media imager. Pastikan tinggi dan lebar dari media: thumbnail ditetapkan. Jika anda mensubmit ukuran gambar anda dengan tepat , maka image anda akan ditampilkan.

58 Service Online Friendfeed

Situs Blogging

1. Ameba
2. Blogspot
3. LiveJournal
4. Skyrock
5. Tumblr
6. ????´ (Baidu)

Situs Photo

1. Flickr
2. Fotolog
3. Photobucket
4. Picasa Web Albums
5. SmugMug
6. Zooomr

Situs Video

1. 12seconds
2. Dailymotion
3. Joost
4. Seesmic
5. Smotri.com
6. Vimeo
7. YouTube

Situs Bookmarking

1. delicious
2. Diigo
3. Furl
4. Ma.gnolia
5. Mister Wong
6. StumbleUpon
7. Twine
8. ??? (Hatena)

Situs Status Interface

1. brightkite.com
2. Facebook
3. Gmail/Google Talk
4. identi.ca
5. Plurk
6. Twitter

Situs Buku

1. Goodreads
2. LibraryThing

Situs Berita Headline

1. Digg
2. Google Reader
3. menéame
4. Mixx
5. Reddit

Situs Musik

1. iLike
2. Last.fm
3. Pandora

Situs Menajemen Komentar

1. Backtype
2. Disqus
3. Intense Debate

Various dan Miscellaneous

1. Custom RSS/Atom
2. Amazon.com
3. LinkedIn
4. Netflix
5. Netvibes
6. Polyvore
7. SlideShare
8. tipjoy
9. Upcoming
10. Wakoopa
11. Yelp

itu saja penjelasan saya tentang friendfeed, jangan lupa subscribe friendfeed saya DISINI...

Cara Menghilangkan Lihat Profil Lengkapku Pada Blog

Privasi adalah sesuatu yang mungkin amat sangat penting bagi semua orang termasuk para pengunjung. Nah, pada topik kali ini saya akan memberikan tips supaya kita dapat menyembunyikan privasi kita selaku Blogger dengan menghilangkan profil lengkap kita di blog. dengan ini otomatis orang tidak bisa melihat profil lengkap kita ( kecuali orang yang faham di blog sendiri ).

Didalam template blogger biasanya ada satu elemen halaman yang memuat tentang Profil sang mpunya Blog. Disana biasanya ada tulisan " LIHAT PROFIL LENGKAPKU ". yang sekarang akan kita bahas yaitu gimana cara menyembunyikan atau bahkan menghilangkan tulisan itu.

berikut tahap - tahap yang harus dilakukan :

1. Login ke bloger kalian
2. Masuk ke rancangan / tata letak
3. Pilih EDIT HTML ( Centang Box Expand Widget Template )
4. Sekarang kalian cari kode berikut :

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>

5. Silahkan hapus kode diatas dan Jangan Lupa SIMPAN template. sederhana dan sangat mudah bukan ...?

itulah tips kecil yang mungkin akan sangat bermanfaat bagi para pembaca. Jangan lupa kasih komentarnya ya...

Cara Membuat Balloon Tooltip Pada Link di Blog

Ballon Tooltip adalah informasi atau Penjelasan dari link atau gambar.Biasanya kita menemukan ini pada software ataupun system tray komputer kita. Nah kali ini saya akan menjelaskan cara membuat Ballon Tooltip pada Link yang ada di blog kita. Bisa...?

Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :

pastinya pertanyaan itu bisa dijawab dengan mengikuti langkah langkah dibawah ini:

1. Login ke Blogger Kalian
2. masuk k rancangan / tata letak
3. pilih Edit HTML ( Back Up template dulu )
4. cari kode ]]></b:skin>
5. lalu sisipkan kode berikut diatasny kode tadi

/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzO_UbvEhHgzRHYowwLsaLqEbQvl77cX7wXudijTaLUiSvxx78M6jMYNfw0vK7_y6SThncWGoQuZO674YN2sGfdJid8fV5iUl_F400mS4h-uNKlOVXdtAuWMwhR5gQc89sO7xfPre2A4/) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi68xyiXGLLg-6xzTrCiPOG0XD-Lzdow2zb8GEP0khZvZn0_xEB7Fr7SdBLwrR5f2ryumGlfrBCaXafg6Mi2Nn_iAOgjVtphPBewGmhSyMT9irJtqoJxVNDCgif3Y-6ArLlfgDFRJJ2qe8/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzO_UbvEhHgzRHYowwLsaLqEbQvl77cX7wXudijTaLUiSvxx78M6jMYNfw0vK7_y6SThncWGoQuZO674YN2sGfdJid8fV5iUl_F400mS4h-uNKlOVXdtAuWMwhR5gQc89sO7xfPre2A4/) no-repeat bottom;
}

6. SIMPAN template.

Untuk menampilkan Balloon tooltipnya sendiri silahkan Copy code berikut:

<a href="TUJUAN LINK YANG AKAN DITUJU" class="tt">TEXT UNTUK LINK<span class="tooltip"><span class="top"></span><span class="middle">ISI DARI BALLOON TOOLTIP</span><span class="bottom"></a>

kETERANGAN :
== code warna merah : text yang kalian tulis
== code warna biru : Link yang akan diberi tooltip
== code warna Hijau : keterangan didalam balloon tooltip
== code warna pink : Link tujuan

Contoh hasilnya seperti ini :



Sekian dulu dan semoga bermanfaat... ditunggu komentarnya..
Baca juga :
1. cara membuat balloon tooltip dengan css3
2. cara membuat balloon tooltip dengan jQuery
3. cara membuat balloon tooltip pada semua link blog

Heboh Video Narsis Jojo dan Shinta Dengan lagu Keong Racun ...!

MEMPERSEMBAHKAN SINTA DAN JOJO

Lirik Lagu Keong Racun

Pembuat Lirik : Buy Akur

Dasar kau keong racun

Baru kenal eh ngajak tidur

Ngomong nggak sopan santun

Kau anggap aku ayam kampung

Kau rayu diriku

Kau goda diriku

Kau colek diriku

Eh ku takut sekali

tanpa basa basi kau ngajak happy happy

Eh kau tak tahu malu

Tanpa basa basi kau ngajak happy happy

Mulut kumat kemot

Matanya melotot

Lihat body semok

Pikiranmu jorok

Mentang-mentang kau kaya

Aku dianggap jablay

Dasar koboy kucai

Ngajak check-in dan santai

Sorry sorry sorry jack

Jangan remehkan aku

Sorry sorry sorry bang

Ku bukan cewek murahan

Memang bener2, ini video ga kalah seru sama yang kemarin2 lagi gempar2nya... semoga ada manfaatnya bagi yang mau baca.

Membuat Navigasi Halaman Seperti Punya Google ...!

Setelah sebelumnya saya menjelaskan cara membuat navigasi halaman, akhirnya saya tertarik dan ingin berbagi cara membuat navigasi halaman dalam model berbeda dengan versi menyerupai navigasinya mbah GOOGLE. mau tau cara membuatnya ...?

sebenarnya script ini aslinya dari kang abu farhan cuma saya otak atik lagi jadi dech seperti ini. oia tidak ketinggalan juga kalo kalian mau membuat halaman navigasi dan langsung melihat hasilnya, kalian harus membuat atau memiliki jumlah postingan atau artikel yang lumayan banyak, sehingga navigasi halaman ini akan muncul. Untuk perbandingannya coba perhatikan gambar berikut:

== Punya Mbah GOOGLE


== Punya Blog z33s



seperti biasa untuk membuatnya, kalian harus login ke bloger kalian dan lanjutkan ke tahap-tahap dibawah ini:

1. pilih Rancangan / Tata Letak
2. Pilih Edit HTML ( Jangan Lupa centang Expand widget template / Back up dulu Template)
3. Coba kalian cari Kode ]]></b:skin>
4. Copy script dibawah ini dan paste di atas kode tadi ( yang kalian cari )

#nav a,#nav a:visited,.blk a{color:#000}
#nav a{display:block}
#nav .b a,#nav .b a:visited{color:#20c}
#nav .i{color:#a90a08;font-weight:bold}
.csb,.ss{background:url(http://i25.tinypic.com/fa7jir.jpg) no-repeat 0 0;height:26px;display:block}
.ss{background-position:0 -88px;position:absolute;left:0;top:0}
.cps{height:18px;overflow:hidden;width:114px}
.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
#nav td{padding:0;text-align:center}

5. Sekarang coba cari kode </body>
6. Copy dan letakan script berikut di atasnya ( kode </body> )

<script type='text/javascript'>var home_page_url = location.href; var pageCount=10;var displayPageNum=6;var upPageWord ='Previous';var downPageWord ='Next';function showpageCount(json) {var thisUrl = home_page_url;var htmlMap = new Array();var thisNum = 1;var postNum=1;var itemCount = 0;var fFlag = 0;var eFlag = 0;var html= '';var upPageHtml ='';var downPageHtml ='';htmlMap[htmlMap.length]='/';postNum++;for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } postNum++; htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;}var banyaknomer = htmlMap.length;if (json.feed.entry.length % pageCount == 0){ var banyaknomer = htmlMap.length -1 ; postNum=postNum-1;};for(var p =0;p< banyaknomer;p++){ if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ if(fFlag ==0 && p == thisNum-2){ if(thisNum==2){ upPageHtml = '<a href="/"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>'; }else{ upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>'; } fFlag++; } if(p==(thisNum-1)){ if(p==0){ html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>'; }else{ html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>'; } }else{ if(p==0){ html += '<td><a href="/"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>'; }else{ html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>'; eFlag++; } }}if(thisNum>1){ html = ''+upPageHtml+' '+html +' ';}html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b"> </td><td class="b">';html3 = '</tr></tbody></table>';html = html2+html; if(thisNum<(postNum-1)){ html += downPageHtml; }else{ html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';}if(postNum==1) postNum++;html += html3+ '</div>';var pageArea = document.getElementsByName("pageArea");var blogPager = document.getElementById("blog-pager");if(postNum <= 2){ html ='';}for(var p =0;p< pageArea.length;p++){ pageArea[p].innerHTML = html;}if(pageArea&&pageArea.length>0){ html ='';}if(blogPager){ blogPager.innerHTML = html;}}function showpageCount2(json) {var thisUrl = home_page_url;var htmlMap = new Array();var isLablePage = thisUrl.indexOf("/search/label/")!=-1;var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;var thisNum = 1;var postNum=1;var itemCount = 0;var fFlag = 0;var eFlag = 0;var html= '';var upPageHtml ='';var downPageHtml ='';var labelHtml = '<a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl = home_page_url; htmlMap[htmlMap.length]=labelHtml;postNum++;for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!='') postNum++; htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount; itemCount++;}var banyaknomer = htmlMap.length;if (json.feed.entry.length % pageCount == 0){ var banyaknomer = htmlMap.length -1 ; postNum=postNum-1;};for(var p =0;p< banyaknomer;p++){ if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ if(fFlag ==0 && p == thisNum-2){ if(thisNum==2){ upPageHtml = labelHtml +'<span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>'; }else{ upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>'; } fFlag++; } if(p==(thisNum-1)){ if(p==0){ html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>'; }else{ html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>'; } }else{ if(p==0){ html = '<td>'+labelHtml+'<span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>'; }else{ html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>'; eFlag++; } }}if(thisNum>1){ if(!isLablePage){ html = ''+upPageHtml+' '+html +' '; }else{ html = ''+upPageHtml+' '+html +' '; }} html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b"> </td><td class="b">';html3 = '</tr></tbody></table>';html = html2+html; if(thisNum<(postNum-1)){ html += downPageHtml; }else{ html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';} if(postNum==1) postNum++;html += html3+ '</div>'; var pageArea = document.getElementsByName("pageArea");var blogPager = document.getElementById("blog-pager");if(postNum <= 2){ html ='';}for(var p =0;p< pageArea.length;p++){ pageArea[p].innerHTML = html;}if(pageArea&&pageArea.length>0){ html ='';}if(blogPager){ blogPager.innerHTML = html;}}</script><script type='text/javascript'> var thisUrl = home_page_url; if (thisUrl.indexOf("/search/label/")!=-1){ if (thisUrl.indexOf("?updated-max")!=-1){ var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max")); }else{ var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max")); } } var home_page = "/"; if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){ if (thisUrl.indexOf("/search/label/")==-1){ document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>') }else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}</script>

Keterangan :
== Untuk melihat script aslinya klik disini... ( Biar cepat Copasnya )
== var pageCount=10; / ganti sesuai keinginan kalian
== var displayPageNum=6; / ganti sesuai keinginan kalian
== var upPageWord ='Previous'; / Bisa kalian ganti dengan sebelumnya
== var downPageWord ='Next'; / bisa kalian ganti denga selanjutnya
== Page ('+(postNum-1)+') / Untuk menampilkan kata page(10)/jumlah halaman

7. Jangan Lupa Simpan templatenya dan lihat hasilnya.

Untuk demonya kalian bisa klik disini...

Semoga bermanfaat dan jangan lupa berikan komentarnya apabila ada yang kurang mengerti... oia kalian boleh juga Share Artikel dengan cara klik gambar logo sharing bookmark di bawah... Terima kasih.

Source : Kang Abu Farhan

Link membesar saat disorot mouse ...!

Ok sob... pada tulisan kali ini saya akan berbagi hal kecil tapi bermanfaat. kita tahu bahwa hampir di setiap blog jika mouse kita sorot ke link itu paling cuma ada garis bawah atau yang lainnya. nah kali ini saya akan menjelaskan gimana caranya membuat link itu membesar dan warnanya berubah... penasaran kan ?
pertama kalian harus punya blog dulu ( WAJIB ), kemudian login dech ke blognya...
tahap - tahap yang harus di lakukan setelah login :

1. Pilih Rancangan
2. Pilih Edit HTML ( biasakan untuk mencentang pada box expand widget template )
3. coba kalian cari kode berikut a:link kalo sudah ketemu silahkan ganti dengan kode di bawah ini:

a:link
{
color:#0000ff;
font-size:10px;
cursor:default;
}

4. belum selesai sampai disitu, sekarang kalian cari kode a:hover, lalu ganti dengan kode ini :

a:hover
{
color:#d2691e;
font-size:19px;
font-style:italic;
cursor:wait;
}

kETERANGAN :
== warna biru menunjukkan warna link
== warna merah menunjukkan ukuran
== warna cokelat menunjukkan font miring ketika link disorot
== warna hijau menunjukkan style mouse pointer, Kamu bisa modif menjadi hand, crosshair, wait, move, text, help dll sesuai dengan pilihanmu.

Jika kalian bingung dengan Kode warna HTML nya bisa dilihat disini atau disini .

jangan lupa SIMPAN TEMPLATE... lihat dech hasilnya.



SEMOGA BERMANFAAT...

Membuat Navigasi Halaman ( Page Number ) Blog

Tips kali ini saya akan menjelaskan bagaimana cara membuat navigasi halaman pada blog. seperti yang sering kita lihat pengunjung akan senantiasa betah dengan mencari apa yang mereka inginkan jika di blog kita terdapat page number atau nomor halaman pada saat pencarian artikel.
selain itu navigasi halaman ini juga akan membuat blog tidak lama untuk melakukan loading.
ok... untuk lebih jelasnya ikuti tahap - tahap pembuatannya.

Hal pertama yang harus dilakukan adalah kalian harus login dulu ke blog kalian. selanjutnya ikuti tahap berikut,

1. setelah login, kalian pilih RANCANGAN
2. Kemudian Kalian klik element Halaman ( Page Element )
3. Pilih Add gadget ( Tambah Elemen )
4. Lalu kalian pilih HTML / Javascript
5. setelah muncul, kalian copy script berikut ( klik Open )

<style>
.showpageArea a {
text-decoration:underline;
}

.showpageNum a {
text-decoration:none;
border: 1px solid #bbb;
margin:0 3px;
padding:3px;
}

.showpageNum a:hover {
border: 1px solid #bbb;
background-color:#bbb;
}
.showpagePoint {
color:#fff;
text-decoration:none;
border: 1px solid #fff;
background: #000;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #bbb;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.z33s.co.cc">Navigasi Halaman</a></div>

Catatan : Angka 5 pada "var pageCount" menunjukkan jumlah posting yang akan muncul pada setiap halaman. Silahkan diganti sesuai keinginan anda.

6. setelah selesai kalian SAVE, Letakan gadget / elemen di bawah posting, untuk lebih jelasnya perhatikan gambar berikut:




7. Tahap terakhir simpan blog, dan Lihat hasilnya... Bagus kan...

Semoga artikel ini bermanfaat untuk pembaca sekalian... jika ada kesalahan script atau apapun silahkan berikan komentarnya...

Membuat Table Of Content ( Daftar Isi Berdasarkan Label )

akhirnya bisa posting blog lagi nich... kali ini saya akan menjelaskan penemuan terbaru hasil jalan-jalan di dunia ghaib... eh salah di dunia maya alias internet. disini saya akan membahas tentang cara membuat Table Of Content(TOC) atau kita biasa nyebut membuat daftar isi. soalnya hampir kebanyakan bilangnya begitu. langsung aja ya... dari sekian banyak cara membuat daftar isi, seperti Disini, disana atau disitu, tips kali ini akan menerangkan bagaimana membuat daftar isi berdasarkan label atau kategori. biasanya daftar isi ini disimpan di sidebar ataupun di postingan. Tujuan dasar dari pembuatan daftar isi ini tidak lain agar pengunjung dipermudah mencari artikel yang mereka butuhkan.

Langkah pertama yang dilakukan yaitu kalian loncat, maksudnya kalian login dulu ke blog kalian. selanjutnya pilih entri baru ( karena disini saya akan menjelaskannya langsung di simpan di posting blog ).

setelah itu copy paste script berikut, dan jangan lupa kasih judul biar lebih menarik, seperti Daftar isi berdasarkan label.
Berikut ada 2 script, yang pertama tanpa scroll dan yang kedua menggunakan fasilitas scroll (biar ga kepanjangan)

1. Untuk yang biasa

<script style="text/javascript" src="http://myscriptforme.googlecode.com/files/TOCcategory.js"> </script>
<script src="http://www.z33s.co.cc/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

2. Untuk yang menggunakan scroll

<div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 400px; background-color: none; text-align: left;">
<script style="text/javascript" src="http://myscriptforme.googlecode.com/files/TOCcategory.js"></script>
<script src="http://www.z33s.co.cc/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<p>
</div>

Catatan : Ganti kode warna merah dengan alamat URL kalian.

selanjutnya kalian klik terbitkan entri dan jadi dech.... sekarang tinggal kalian bikin link untuk memanggilnya. biasanya disimpan di menu atau dimana aja terserah kalian yang penting pengunjung bisa tahu.
contoh pemanggilan link nya seperti ini :

<a href='ISI DENGAN LINK DAFTAR ISI KALIAN' target='_blank'>DAFTAR ISI</a>

contoh punya saya:
<a href='http://www.z33s.co.cc/2010/07/daftar-isi.html' target='_blank'>DAFTAR ISI</a>

untuk contoh nya klik disini...

semoga artikel ini bermanfaat buat kalian dan jangan lupa kasih komentarnya apabila ada kesalahan pada penulisannya...

DAFTAR ISI

berikut adalah seluruh daftar isi dari blog ini, untuk itu silahkan pilih artikel yang kalian minati.

Semoga semua artikel ini bermanfaat bagi pembaca. Terima kasih telah berkunjung di www.z33s.co.cc

Untuk cara membuat daftar isi ini silahkan klik Disini ...

Membuat Read More versi 1 Pada Blog

Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan kamu terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut:

1. Buka Rancangan kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :

<p><data:post.body/></p>

4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>
</b:if>

Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:

<span class="fullpost">



</span>

8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

<span class="fullpost">


</span>

10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>

Baca juga :

• Cara membuat automatic readmore
• Cara membuat readmore versi 2

Semoga Bermanfaat...

Free Template Blogger

Awalnya saya hanya iseng - isengan bikin blog, gonta ganti template, sampai acak-acakan dechhh blog punya saya. Tapi pas cari sana cari sini, eh lewat Mbah Google akhirnya saya dapat tempat dimana saya bisa mendapat template yang menarik dan jadilah blog saya yang seperti sekarang ini. untuk teman-teman yang juga pengen ganti template ke yang baru Bisa melihat beberapa template minima berikut ini.

KLIK GAMBAR UNTUK MENDOWNLOAD





















KLIK GAMBAR UNTUK MENDOWNLOAD

Jika kalian mau lebih banyak lagi template yang lebih menarik, mulai dari template minima, magazine, dan lain-lain silahkan kunjungi situs yang memberikan template gratis berikut:

** bTemplates
** zOOmTemplate
** BloggerTemplatesFree
** BlogTemplate4U
** idwebtemplate
** freetemplates
** blogger-templates
** finalsense
** X-Template

Semoga Bermanfaat Buat Kalian.