Jari Rindu Blog: Tutorial Blog

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Membuat Daftar Link Text Unik (Modif)

Pada postingan ini, saya memberikan alternatif kode Daftar Link Text sesuai abjad dengan scrool. Mulai dari A, B, C, D,..., dan seterusnya sampai Z. Daftar ini bisa di pasang pada sidebar dan juga bisa langsung memasangnya pada postingan Anda. Untuk demonya, bisa di lihat DI SINI. Langsung saja ke kodenya, oke!!!

Seperti biasa, silahkan login ke akun Anda.
Klik Rancangan dan Tambah Gadget jika ingin memasangnya pada sidebar blog Anda.
Copy kode berikut ke dalamnya.

<style type="text/css"> #ir211208{background:#F2F2F2;color:#000;margin:0;border:3px double #000;width:95%;height:263px;padding:5px;overflow:auto;font-family:trebuchet ms;font-size:13px;box-shadow: 0px 0px 5px #000;-webkit-box-shadow: 0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;margin-top:5px} #exchange{width:100%;height:234px;overflow:auto;border:1px inset #fff} #judul{padding:3px 0 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmvN3wrc3IYYiZyxYZB0GCNfHxrFao4AONFSXBtS8RHhl2MJjA7QqW-6POK3A_MODC8FpzEchodNSilbG-znE26i-sUDKhy_eNg3El6cBETw-P_nN426y6dnbKBk97Pz1DpfJb7-PZXP2Z/) maroon;height:25px;color:#fff;font-size:14px;font-weight:bold} .area{border:none;margin:10px 0 0;padding:5px 0 5px;} .bottom{padding:0;margin:0} .bottom1{text-align:left;font-size:11px;padding:7px 0px 0px 0px;border:none;float:left} .bottom2{text-align:right;font-size:11px;padding:7px 0px 0px 0px;border:none;float:right} </style> <div id="ir211208"> <div id="exchange"><center><div class="area"><div id="judul"><marquee scrollamount="2">>> A <<</marquee></div> <a href="http://www.ilmublog.co.cc" target="new" title="Anak Pesisir">Anak Pesisir</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> B <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> C <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> D <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> E <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> F <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> G <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> H <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> I <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> J <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> K <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> L <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> M <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> N <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> O <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> P <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> Q <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> R <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> S <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> T <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> U <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> V <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> W <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> X <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> Y <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center> <center><div class="area"><div id="judul"><marquee scrollamount="2">>> Z <<</marquee></div> <a href="http://ALAMAT BLOG.com" target="new" title="JUDULNYA">Nama Blog/Nama Pemilik Blog</a> </div></center></div> <div class="bottom"> <div class="bottom1">Mau widget ini? Klik <a href="https://jaririndu.blogspot.com/2011/08/membuat-daftar-link-text-unik-modif.html" target="_blank">di sini >></a></div> <div class="bottom2">Desain by: <a href="https://ian-konjo.blogspot.com/" target="_blank">Ian Konjo</a></div> </div></div>

Silahkan beri judul dan klik Save.

Catatan:
- Tolong jangan menghapus link Blog saya (Anak Pesisir).
- Ganti tulisan berwarna MERAH TERANG dengan URL Blog teman Anda.
- Tulisan berwarna KUNING ganti dengan nama blog teman Anda.
- Warna HIJAU Anda ganti dengan Nama Blog/Nama Pemilik Blog teman.

Ok!! Sekian artikel Membuat Daftar Link Text Unik (Modif) sesuai Abjad dengan scrool.

Baca Lengkap....

Link-Link Penting Untuk para Blogger

Bagi Anda para blogger yang ingin mengecek keadaan blog/website, Anda bisa memanfaatkan link-link di bawah ini.

Feed Validator (http://www.feedvalidator.org). Ini bisa Anda gunakan untuk melakukan cek pada RSS blog Anda atau pada feed atom blog Anda.
About Us (http://www.aboutus.org). About Us secara dinamis menciptakan halaman dari informasi yang dapat diakses publik pada situs web/blog, seperti Meta Tag dan Informasi Who is.
Copy Scape (http://www.copyscape.com). Copy Scape didedikasikan untuk membantu melindungi konten blog Anda dan dapat digunakan untuk mencari duplikat konten Anda di web/blog lain.
Pre Checker (http://www.prchecker.info). Pre Checker ini dapat digunakan untuk mengecek Pagerank web/blog Anda.
Alexa (http://www.alexa.com). Yang satu ini, pasti Anda sudah tahu, yaitu untuk mengecek informasi Alexa Ranking web/blog Anda.
Backlink Watch (http://www.backlinkwatch.com). Untuk mengecek jumlah backlink pada web/blog Anda.
Website Outlook (http://www.websiteoutlook.com) berguna untuk mengecek harga jual web/blog Anda.
Validator (http://validator.w3.org). Untuk memeriksa validitas dokumen web/blog dalam HTML, XHTML, SMIL, MathML, dan sebagainya.
Whois (http://www.whois.net), Untuk mengecek pemilik suatu web/blog.

Selamat mencoba dan semoga sukses!!!

Baca Lengkap....

Membuat Buku Tamu Menarik

Tutorial ini masih berhubungan dengan postingan saya Membuat Garis Tepi Gambar Berdisko. Buku tamu menarik yang saya maksud adalah buku tamu melayang yang merupakan widget shoutmix atau cbox tersembunyi di sisi kiri blog dan ditampil jika diklik. Contohnya bisa Anda lihat di sebelah kiri blog kesayangan saya ini.

Cara membuatnya adalah sebagai berikut:

Login ke akun blogger Anda.
Pilih Rancangan, lalu Tambah gadget HTML/Javascript.
Masukkan script berikut ke dalam gadget HTML/javascript tersebut:

<style type="text/css">
#gb{
position:fixed;
right:450px;
z-index:+1000;
}
#tabGb {
position:fixed;_position:relative;top:35px; left:0;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollright+ document.documentElement.clientWidth - offsetWidth); }
* html #gb{position:relative;}

.gbcontent{
float:left;
border:4px solid #fff;
background:#666;
-moz-border-radius:8px;
-webkit-border-radius:8px;
padding:3px;
}

</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 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="gbcontent">



<center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Tutup Buku Tamu" class="close" /></a>

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

<div id="tabGb"><a href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoTBdcqBcii0KgOW76fNKc446m4p2lGe4oMbnH-iEL1iRMXsnkiNn4owTckxMzB3BmWdaqM21bHx7YYimPRziq8-uheMb-9CE2FdWCSp5WM4GdHF9vnAmAyN1BrjvhyphenhypheniobgEHsg4zozs4/" id="flash0" class="flashgroup" /></a></div>

<style type='text/css'>
img.flashgroup {border:5px solid white;}
</style>

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

/*
Script By http://www.javascriptkit.com/script/script2/flashimage.shtml
*/

//Warna garis yang berkelap-kelip
var flashcolor="#00FF00"
//Kecepatan garis berkelap-kelip (semakin rendah, semakin cepat)
var speed=150

/////No need to edit below here////
var curborder=new Array()
var increment=0
var flashobject=new Array()

if (document.all||document.getElementById){
while (document.getElementById("flash"+increment)!=null){
flashobject[increment]=document.getElementById? document.getElementById("flash"+increment).style : eval("document.all.flash"+increment+".style")
curborder[increment]=0
increment++
}
}

function flash(which){
if (curborder[which]==1){
flashobject[which].borderLeftColor=flashcolor
flashobject[which].borderBottomColor=flashobject[which].borderRightColor
}
else if (curborder[which]==2){
flashobject[which].borderTopColor=flashcolor
flashobject[which].borderLeftColor=flashobject[which].borderBottomColor
}
else if (curborder[which]==3){
flashobject[which].borderRightColor=flashcolor
flashobject[which].borderTopColor=flashobject[which].borderLeftColor
}
else if (curborder[which]==4){
flashobject[which].borderBottomColor=flashcolor
flashobject[which].borderRightColor=flashobject[which].borderTopColor
}

if (curborder[which]<=3)
curborder[which]++
else
curborder[which]=1
}

if (document.all||document.getElementById){
for (z=0;z<flashobject.length;z++){
var temp='setInterval("flash('+z+')",'+speed+')'
eval(temp)
}
}

//]]>
</script>
Simpan Gadgetnya dan selesai.

Penting: Perhatikan script yang saya beri warna. Tulisan berwarna kuning harus Anda ganti dengan kode shoutbox/chatbox Anda. Yang berwarna merah ganti dengan URL gambar yang terletak di sisi blog Anda. Tulisan yang berwarna hijau ganti dengan warna kelap-kelip gambar di samping blog Anda dan angka 150 ganti sesuai selera Anda.

Baca Lengkap....

Membuat Garis Tepi Gambar Berdisko

Untuk postingan kali ini, DEMOnya bisa dilihat di bagian kiri blog ini (buku tamu IKB).

Gimana? Sudah dilihat? Kalau tertarik, saya akan memberikan langkah-langkah membuatnya.

Ini dia langkah-langkahnya:

Login ke akun blog Anda.
Cari kode ]]></b:skin> dan letakkan kode berikut tepat di atasnya.

img.flashgroup{border:3px solid #000}

Cari lagi kode dan letakkan script berikut di atasnya.

<script type='text/javascript'> //<![CDATA[ /* Script By http://www.javascriptkit.com/script/script2/flashimage.shtml */ //Warna kelap-kelip var flashcolor="#00FF00" //Kecepatan kelap-kelip (semakin rendah, semakin cepat) var speed=150 /////No need to edit below here//// var curborder=new Array() var increment=0 var flashobject=new Array() if (document.all||document.getElementById){ while (document.getElementById("flash"+increment)!=null){ flashobject[increment]=document.getElementById? document.getElementById("flash"+increment).style : eval("document.all.flash"+increment+".style") curborder[increment]=0 increment++ } } function flash(which){ if (curborder[which]==1){ flashobject[which].borderLeftColor=flashcolor flashobject[which].borderBottomColor=flashobject[which].borderRightColor } else if (curborder[which]==2){ flashobject[which].borderTopColor=flashcolor flashobject[which].borderLeftColor=flashobject[which].borderBottomColor } else if (curborder[which]==3){ flashobject[which].borderRightColor=flashcolor flashobject[which].borderTopColor=flashobject[which].borderLeftColor } else if (curborder[which]==4){ flashobject[which].borderBottomColor=flashcolor flashobject[which].borderRightColor=flashobject[which].borderTopColor } if (curborder[which]<=3) curborder[which]++ else curborder[which]=1 } if (document.all||document.getElementById){ for (z=0;z<flashobject.length;z++){ var temp='setInterval("flash('+z+')",'+speed+')' eval(temp) } } //]]> </script>

Save template Anda.

Keterangan: Ganti tulisan berwarna biru (langkah kedua) adalah garis tepi gambar sesuai warna kesukaan Anda. Warna kuning adalah warna disko gambar dan warna hijau adalah kecepatan disko.

Langkah selanjutnya yang harus di lakukan adalah memasang kodenya pada gambar yang ingin diberi efek garis tepi berdisko. Perhatikan kode berikut.

Setiap memasang gambar di blog Anda, tambahkan id dan class seperti di atas. Jika gambar lebih dari satu, id jangan sampai sama. Tambahkan angka 1, 2, ..... dst. Lihat tulisan berwarna biru pada contoh berikut:

Sampai di sini tutorial membuat garis tepi gambar berdisko.....!!!

Baca Lengkap....