WIDGET KATA-KATA MUTIARA

Mosting iseng-iseng ah tentang widget kata-kata mutiara. Kayaknya postingan kali ini masih berkisar tentang bermain dengan kata-kata nih. Variasi kata-kata disekitar kotak komentar, yang sebelumnya ini juga tentang kata-kata unik. Kalau dari sobat ada yang memperhatikan diatas kotak komentar di blog aku ini ada kata² yang setiap di reload pasti berubah. Nah itu yang akan aku bahas kali ini. Menggunakan Javascript yang simpel guna bisa menggunakannya kok. Dapatkan scriptnya di Kata-kata mutiara script.

kopi dan paste script yang tadi sudah didapatkan di Layout--->Page Elements--->Add a Gadget--->pilih yang HTML/Javascript.

Kalau dari sobat bisa berkreasi dikit, sebenarnya script tersebut bisa di-add didalam html template sobat. Tinggal diatur-atur saja kok...hehehehe!!!

Default script:

<script language="JavaScript">
//store the quotations in arrays
quotes = new Array(6);
quotes[0] = "Assalamu'alaikum Wr wb.";
quotes[1] = "Selamat datang di blog aku yang adem ayem ini...";
quotes[2] = "Jangan lupa komen-komen juga yah.";
quotes[3] = "oh kopinya dong jangan lupa.";
quotes[4] = "Paling enak baca postingannya sambil ngopi.";
quotes[5] = "Selamat pagi, siang, sore dan malam.";
//calculate a random index
index = Math.floor(Math.random() * quotes.length);
//display the quotation
document.write("\n");
document.write(quotes[index]);
//done
</script>

Rubahlah tulisan yang berwarna biru, sesuai dengan keinginan sobat. Kalau mau menambah tulisannya tinggal menambahkan kode : quotes[X] = "bla-bla bla-bla bla-bla";. Isikan [X], X dengan nomor selanjutnya. Terus perhatikan tulisan yang berwarna merah pada script tersebut apabila sobat menambahkan tulisan. Kalau menambahkan jadi quotes[6], rubahlah new Array(X), menjadi new Array(7). Begitu juga seterusnya.

Selamat berkreasi...^_^

VARIASI SEPUTAR KOTAK KOMENTAR

BeBeN sang bloglang kembali lagih ahaiiiiiiiii. Pasti dari sobat blogger, sudah pada pernah melihat seutas kata-kata yang tertulis diatas kotak komentar toh. Nah kalau di blog aku yang ini tulisannya bertuliskan "Jangan SPAM yaa !!! Jadilah komentar yang baik". Kalau yang di Ben-Tools, bertuliskan "Komentar di Blog BeBeN ini tidak memberlakukan verifikasi dalam pengisiannya. Kalau ada apa-apa, tinggal kontak gue di Contact Us. Terima kasih ^_^."

Masuk ke halaman Layout--->Edit HTML---> Expand Widget Templates--->Cari kode <div class='comment-form'>--->Isilah kata-kata sesuai keinginan teman-teman dibawah kode tersebut ^_^--->SAVE--->Beres.

Itu lah cara bikinnyah...huehuehuehue. Kalau ada yang tertarik mengganti tulisan pada poskan komentar silahkan kunjungi blog master doyok pada link berikut ini DOYOK. Okelah kalau begitu...lanjut kang...

Ternyata eh ternyata ada cara yang praktis dan sudah tersedia dari bloggernya untuk meng-add kata-kata diatas kotak komentar, tanpa masuk ke edit HTML dan mencentang-centang expand widgetnya.

1. Pergi ke halaman dashboard sobat.
2. Pilih Setting dari blog yang akan di-add kata-kata mutiaranya.
3. Lalu pilih pada Comments.
4. Scroll ke bawah cari tulisan Comment Form Message.
5. Isi deh dengan kata-kata di kotak sebelahnya.

6. SAVE dan lihat deh hasilnya diatas kotak komentar teman-teman sudah ada kata-kata mutiaranya
7. Cek juga yang satu ini Old Comment.

Sebenarnya mah cuma mau kasih tahu informasi ini saja kok. Tapi malah panjang melebar kemana-mana....wakakakakkkkkk. WassaLam Be a creative.

DRAGABLE WIDGET LIKE MAC

Kembali lagi dengan BeBeN si bloglang sejatih. Dalam perjalanan kali ini aku mendapatkan hack yang bagus sekali guna bergaya-gaya dengan widget blog kita. Apa itu widget??? Kasih intermezzo dolo dikit ah, widget itu adalah ketika kita melakukan penambahan (Add), yang biasa kita lakukan dihalaman Page Elements dan meng-add Add a Gadget...nah itulah widget...wekekekekkkk!!!

Pokoknya itu lah, masa tidak paham mah...huehuehheuhue. Oke kita lanjut pada pokok permasalahan apa yang akan BeBeN pilih tentang hack kali ini. Lihat demonya disini Demo Drag. Lihat pada samping kanan ada beberapa widget, coba sobat drag dengan menggunakan mouse dengan menahan klik kiri...gerak/pindahkan (DRAG) widget tersebut!!! Tertarik...lanjut!!!

Full Download Template dolo yah, Log in pada account blog sobat ---> Expand your template ---> Tekan CTRL + F ---> temukan kode </BODY>.

Kalau sudah ketemu, masukkan script berikut ini (tenang...scriptnya sudah menggunakan jasa dari directorynya si embah gOOgle), kita tinggal memakainya dengan memanggilnya saja..LoL.

<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1");
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".widget.HTML").draggable();
$(".widget.Label").draggable();
$(".widget.BlogArchive").draggable();

});
</script>


Penjelasan (3) script diatas :

1. Javascript ajax yang ada di directorynya Ajax library dari google server.
2. Javascript jquery yang ada di Jquery library dari google server.
3. Script pemanggil yang ada di directory dragable function dari jquery server.

Penjelasan dalam mengaplikasikannya :

• $(".widget.HTML") : script ini akan berfungsi memanggil semua widget yang berjenis HTML untuk di drag.
• $(".widget.Label") : script ini fungsinya memanggil semua widget yang berjenis Label.
• $(".widget.BlogArchive") : kalau yang ini jenis BlogArchive yang akan bisa di dragnya.

Save dan lihat hasilnya.
Kalau dari sobat ada yang ingin bereksperimen lebih dengan hack ini, tinggal menambahkan dan mengganti unique ID guna mengaplikasikannya. Perhatikan script $(".widget.unique ID") ganti deh unique ID-nya dengan apa yang mau di drag. Kalau ada pertanyaan silahkan kunjungi blog yang punya hacknya...namanya juga bloglang, hanya bisa menjelaskan enggak bisa menjawab solusinya...wakakakakkkkk.

HAPPY BLOGGING DAN WASSALAM ^_^.

This tutorial hack by : Fun With Blogger. He's Ihsan owner from blog Fun With Blogger.

SIDE BAR MENU

Kembali lagi dengan si BeBeN si bloglang sejati dari tanah pasundan yang banyak ceweknya yang bohay-bohay Booo!!! Yang kalau jalan bagian dashboardnya lenggak-lenggok kayak ular kobra...wakakakakkkk. Tahu slide menu yang keberadaannya selalu ada disisi kiri atau kanan monitor??? Oke deh ini contoh-contohnya

1. Slide-In Menu Bar I.
Lihat pada bagian kiri monitor sobat.
2. Fold-out external menu.
Masih lihat ke bagian kiri monitor.
3. Omni Slide Menu.
Lihat di bagian kiri, atas dan kanan monitor sobat...wekekekekkkk.
4. Dynamic-FX Slide-In Menu (v 6.5).
Ini mah masih di kiri, lihat!!!.
5. Slide-In Links.
Ini berupa tulisan, dan adanya di kiri juga. Simpel dan keyen.

Silahkan kunjungi link yang sudah aku kasih itu jika ada yang tertarik dengan slide menu bikinan dynamicDrive yang edan banget. Nah sekarang tujuan aku bikin postingan ini!!! Lihat demonya disini Ben-Tools, lihat pada bagian pojok kiri atas (dekat header). Tertarik!!!

Kenapa aku memilih slide menu yang ini??? Karena eh karena, custome (terserah kita) mau diapa-apain jujah. Oke langsung saja pada caranya gimana.
Dapatkan terlebih dahulu scriptnya dengan memasuki link berikut Mulai Floating Sidebar Menu. Setelah masuk ke web tersebut, isilah sesuai dengan keperluan sobat blogger. Oke pada gambar berikut, tunggu beres loading blog aku soalnya ini trik lightbox.

Kolom Tab Caption isi dengan nama menu (terserah). Kolom Initial State, ini yang harus tahu nih. Disana ada dua pilihan :

1. Initially Collapsed.
Kalau kawan memilih yang ini artinya menu side bar ini akan tertutup keadaannya ketika memasuki halaman web/blog kawan. Contohnya yaa kayak yang di blog ben-tools itu Bos.
2. Initially Expanded
Kalau sobat memilih yang ini berarti, side bar menu akan terbuka lebar ketika memasuki web/blog sobat.

Pasti akan memilih yang nomor satu deh...wekekekekkk. Default script yang didapatkan dari web tersebut.

<!-- flooble sidebar menu start -->
<script language="javascript">
// Floating Sidebar Menu Script from Flooble.com
// For more information, visit
// http://www.flooble.com/scripts/sidebar.php
// Copyright 2003 Animus Pactum Consulting inc.
//---------------------------------------------------------
var ie = false;
var open = true;
var oldwidth = -1;
if (document.all) { ie = true; }

function getObj(id) {
if (ie) { return document.all[id]; }
else { return document.getElementById(id); }
}

function toggleSidebar() {
var sidebar = getObj('sidebarcontents');
var menu = getObj('sidebarmenu');
var arrow = getObj('sidearrow');
if (open) {
var sidec = getObj('sidebar');
var h = sidec.scrollHeight;
if (oldwidth < 0) {
oldwidth = sidebar.scrollWidth;
}
sidebar.style.display = 'none';
td = getObj('sidebartd');
td.style.width = 0;
arrow.innerHTML = '>';
//alert(h + ' - ' + sidec.scrollHeight);
sidec.style.height = h;
open = false;
} else {
sidebar.style.display = 'block';
sidebar.style.width = oldwidth;
arrow.innerHTML = '<';
open = true;
}
getObj('focuser').focus();

}

function setSidebarTop() {
//alert('hoy');
var sidec = getObj('sidebar');
sidec.style.top = 10 + document.body.scrollTop;
setTimeout('setSidebarTop()', 10);
}

setTimeout('setSidebarTop();', 2000);

</script>


<table border="0" cellspacing="0" cellpadding="3" id="sidebar" bgcolor="#FFFFFF"
style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; position:absolute; z-index:100; left:0px; top:10px; font-family:Verdana;">
<tr>
<td valign="top" id="sidebartd">
<div id="sidebarcontents" style="padding: 5px;">

<A HREF="/" TARGET="_BLANK"><B>Flooble.com</B></A>
<LI><A HREF="/perplexus/" TARGET="_BLANK">Logic Puzzles</A>
<LI><A HREF="/fun/" TARGET="_BLANK">Fun Stuff</A>
<LI><B>Web Scripts</B>
<LI><A HREF="http://chater.flooble.com/" TARGET="_BLANK">Free Chatterbox</A>
<LI><A HREF="http://webster.flooble.com/" TARGET="_BLANK">Make Money with a Site</A>
<P>
As many more links as you need.
</div>
</td>
<td valign="top" align="center" bgcolor="#000000" id="menucontainer">
<a href="javascript:void(0);" id="sidebarmenu" onClick="toggleSidebar();"
style="color:#FFFFFF; text-decoration:none;font-weight:bold; font-family:Helvetica;"><span
id="sidearrow">&lt;</span><br>M<BR>y<BR> <BR>M<BR>e<BR>n<BR>u</a><br>
<a href="javascript:void(0);" style="color: #000000; heigh:1px;"
id="focuser"> </a>
</td>
</tr>
</table><SCRIPT LANGUAGE="Javascript">toggleSidebar();</SCRIPT>
<noscript><a href="http://www.flooble.com/scripts/sidebar.php>free javascript sidebar menu by flooble</a> | <a href="http://www.blackjack-primer.com">Blackjack Tutorial</a>
</noscript>
<!-- flooble sidebar menu end -->

Letakkan script (tulisan yang berwarna biru) dibawah atau setelah kode <HEAD> Nah kalau ada error dengan scriptnya, harap sobat prase terlebih dahulu script tersebut di Centricle Prase.

Untuk script/kode (tulisan yang berwarna kuning tai) masukkan didalam tag
<BODY>

.......


</BODY>
Usahakan memasukkan kodenya, jangan didalam sebuah tag <DIV>. Usahakan cari di penutup kode tag </DIV>, dan letakkan sesudahnya. Hmmm...kode bawaan yang berwarna kuning tersebut default hasil web ada beberapa tag yang tidak terkunci. Perhatikan pada bagian tag <LI>, tambahkanlah tag penutup bagi kode tersebut dengan menambahkan </LI> disetiap kode tag <LI> tadi yang bawaan webnya.

Ada juga tag <P> pada default kode dan tag <BR>, tambahkanlah garis miring disetiap masing-masing kode tersebut. <P> ----> <P/> dan <BR> ----> <BR/>.

<table border="0" cellspacing="0" cellpadding="3" id="sidebar" bgcolor="#FFFFFF"
style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; position:absolute; z-index:100; left:0px; top:10px; font-family:Verdana;">
<tr>
<td valign="top" id="sidebartd">
<div id="sidebarcontents" style="padding: 5px;">

<A HREF="/" TARGET="_BLANK"><B>Flooble.com</B></A>
<LI><A HREF="/perplexus/" TARGET="_BLANK">Logic Puzzles</A></LI>
<LI><A HREF="/fun/" TARGET="_BLANK">Fun Stuff</A></LI>
<LI><B>Web Scripts</B></LI>
<LI><A HREF="http://chater.flooble.com/" TARGET="_BLANK">Free Chatterbox</A></LI>
<LI><A HREF="http://webster.flooble.com/" TARGET="_BLANK">Make Money with a Site</A></LI>
<P/>
As many more links as you need.
</div>
</td>
<td valign="top" align="center" bgcolor="#000000" id="menucontainer">
<a href="javascript:void(0);" id="sidebarmenu" onClick="toggleSidebar();"
style="color:#FFFFFF; text-decoration:none;font-weight:bold; font-family:Helvetica;"><span
id="sidearrow">&lt;</span><br/>M<BR>y<BR/> <BR/>M<BR/>e<BR/>n<BR/>u</a><br/>
<a href="javascript:void(0);" style="color: #000000; heigh:1px;"
id="focuser"> </a>
</td>
</tr>
</table><SCRIPT LANGUAGE="Javascript">toggleSidebar();</SCRIPT>
<noscript><a href="http://www.flooble.com/scripts/sidebar.php>free javascript sidebar menu by flooble</a> | <a href="http://www.blackjack-primer.com">Blackjack Tutorial</a>
</noscript>
<!-- flooble sidebar menu end -->

Selamat berjuang dan semoga berhasil...WassaLam...Prikitiiiwww!!!

UPDATE : Letakkan semua script dan kode dengan melakukan Add a Gadget, pada halaman Page Elements.

Maaf untuk kesalah penanaman script di tag <HEAD>, pokoknya script ama kode² yang lainnya masukkan pada Add a Gadget pilih yang HTML/Javascript

ADD NUMBER AND STYLE IN COMMENTS

Dapat lagi tutorial simple yang good good!!! Menambahkan nomor pada para komentator pada kotak komentar. Pusing-pusing deh bahasanya...huhehuhaho. Bawaan template sih biasanya tidak ada nomornya pada komentar. Kalau di template aku ini sudah ada. Nah bagi teman-teman yang mau menambahkan nomor pada para komentar di blog kalian, ayuk kita lanjut.

Tuh lihat contohnya!!! Bagaimana bagus kan. Kalau mau lihat jelasnya DEMO. Mudah kok caranya, kalau memang tertarik.
Kalau yang sudah memakai kode seperti :
<b:if cond='data:post.numComments == 1'> biasanya sudah ada sih nomor pada komentarnya. Kalau mau ganti dengan gaya ini harus dihilangkan dahulu. Oke kita lanjut pada pokok pembahasan.

1. Log in pada account blogger sobat --->Layout--->Edit HTML--->Centang Expand Widget Templates (Jangan lupa di Download Full Template dulu, tatut ada apa-apa)
2. Temukan kode berikut ini dengan menekan Ctrl + F
   <dl id='comments-block'>
   <b:loop values='data:post.comments' var='comment'>
Kalau tidak ketemu, cari yang seperti itu. Pokoknya harus ketemu gimana caranya juga...wekekekekkk.
3. Masukkan script berikut ini diantara kode tersebut (ditengah-tengahnya)
   <script type='text/javascript'>var CommentsCounter=0;</script> <!--COMM-NUM-STARTS-->
   maka akan seperti ini :
   <dl id='comments-block'>
   <script type='text/javascript'>var CommentsCounter=0;</script> <!--COMM-NUM-STARTS-->
   <b:loop values='data:post.comments' var='comment'>
4. Lalu cari kode berikut <data:commentPostedByMsg/>
5. Masukkan script berikut ini dibawah persis kode diatas
   <!--COMM-NUM-STARTS-->
   <span class='comm-num'>
   <a expr:href='data:comment.url' title='Comment Link'>
   <script type='text/javascript'>
   CommentsCounter=CommentsCounter+1;
   document.write(CommentsCounter)
   </script>
   </a>
   </span>
   <!--COMMNUM-STOPS-->
6. SAVE dan lihat, sobat sudah memiliki nomor pada para komentator.

Nah sekarang tinggal menambahkan CSS, untuk bisa tampil seperti demo/contoh pada gambar diatas. Maenkan kang...geb...geb...geboy.
Klik pada Layout--->Edit HTML--->cari kode </head> Setelah ketemu kodenya, ambil korek BAKAR MONITORNYA...Wakakakakkkk!!! Masukkan kode berikut, diatas/sebelum kode yang tadi (</head>)

<!--COMM-NUM-STARTS-http://beben-koben.blogspot.com-->
<style type="text/css">
.comm-num a:link, .comm-num a:visited {
color: white !important;
text-decoration: none !important;
background: url(http://URL-LINK-GAMBAR.jpg) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*posisi gambar-komentar*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comm-num a:hover, .comm-num a:active {
color: gray !important;
text-decoration: none !important;
}
</style>
<!--COMM-NUM-STOPS-http://bloggerstop.net-->

Tulisan yang berwarna biru, untuk efek pada nomor komentar. Tulisan yang berwarna merah, efek pada gambar. Rubah sesuai dengan selera masing-masing.
Kalau mau metode yang kedua, cari kode ]]></b:skin> masukkan kodenya berikut diatasnya yaa :

.comm-num a:link, .comm-num a:visited {
color: white !important;
text-decoration: none !important;
background: url(http://URL-LINK-GAMBAR.jpg) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*posisi gambar-komentar*/
text-align: center;
font-family: 'Century Gothic','Comic Sans MS',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comm-num a:hover, .comm-num a:active {
color: gray !important;
text-decoration: none !important;
}

Gambar yang mungkin mau dipakai (Klik-Kanan dan pilih "Ambil linknya coy"):

---

---

---

PENTING : Kalau mau memakai gambar yang tersedia atau gambar sendiri, dan hasil nomor komentar dengan gambarnya kurang mecong eh mecing, rubahlah kode CSS diatas yang bertuliskan /*posisi gambar-komentar*/.
margin-right: 5px;
margin-top: -15px;

HAPPY BLOGGING, GOD LUCK AND WASSALAM.

Source : BloggerStop.Net

RAINBOW

Lihat contoh tulisan ini kawan-kawan??? Gaya BeBeN dalam memulai postingan, pasti kalau tidak lupa menggunakan huruf-huruf seperti ini. Mau yang seperti ini???
Silahkan mencoba tools generator Pop-Up Window Pop-Up. atau mau yang ini :

Tombol dengan background dan style onmouse and outmouse!!! Meluncur Make Butoon. Lanjuuuuttt...kebayangkan kalau buat secara manual

Tuh aku kasih semua sitemap dari web tersebut...wkwkwkwkwk
Source : RainBow.

HAPPY BLOGGING DAN WASSALAM...-___-'

BLOGGER TIPS and TRICKS

Assalamu'alaikum Wr Wb, blogger ^_^ I am Lasantha Bandara, Loves blogging,Web addicted, 22 years old. I live in Sri Lanka. Itulah sepenggal untaian kata dari teman aku dari Srilanka, yang bernama Lasantha Bandara. Seorang ahli tutorial yang edan-edan dong tutorialnya. Mungkin sobat blogger akan mendapatkan apa yang dicari mengenai tutorial dasar maupun expert. Aaahhh!!! pokokna mah edan, top banget dah blognya. Keren!!!
Nih aku kasih T O Cnya made in Mr. Abu Farhan

Muntah-muntah deh kalian semua tuh...makan tuh tutorial...
HAPPY BLOGGING, WASSALAMU'ALAIKUM WR WB.