Praktis Kilat Pasang Widget Yahoo Smileys di Blogger - Threaded Comment

Ini adalah cara paling praktis dan mudah untuk memasang yahoo smiley di blogger. Bisa digunakan di Template Tata letak (Layout Template) maupun Template Designer (Perancang Template) yang sudah dilengkapi threaded comment.
Widget Smileys untuk Blogger ini tidak saja menggunakan javascript, xHTML dan kode CSS, namun di dalamnya digunakan juga css3. CSS3 berfungsi untuk membuat bentuk show hide box smiley dengan effek hover sekaligus juga digunakan untuk memperbesar (zoom) emoticon/yahoo smiley agar dapat terlihat dengan jelas saat pemberi komentar memilih emoticon yang akan ditampilkan dalam komentar. Kode css3 yang yang digunakan untuk fungsi zoom adalah css3 transform-scale plus css3 transition, sedang show-hide box yahoo smiley memanfaatkan padding dan css3 transition.

Desain show-hide box yahoo smiley dibuat dalam posisi fixed agar selalu terlihat di halaman blog di sisi kiri-bawah. Cara penempatan box yang seperti ini dimaksudkan untuk mempermudah pemberi komentar saat memilih emoticon/smiley karena box akan bisa dekat dengan comment box. Sebuah trik yang membuat widget menjadi berbeda dibandingkan dengan tutorial lainnya yang tidak menempatkan box yahoo smiley pada posisi strategis dan berdampingan dengan box komentar.

Untuk template non-Threaded Comment, silahkan buka link di bawah ini untuk mendapatkan widgetnya:
Widget Yahoo Smileys non-Threaded Comment

Cara pemasangan javascript widget yahoo smileys:

1. Login ke Blogger.
2. Klik "Rancangan (Design)".
3. Halaman Tata Letak (Layout).
   
   • Pilih salah satu "Add a Gadget/Tambah Gadget" yang terdapat dalam elemen blog bergaris putus-putus.
   • Setelah window baru terbuka dan gadget terlihat, pilih dan klik gadget "HTML/Javascript".
   • Copy dan paste-kan javascript dalam "box HTML/Javascript".
   • Klik "SIMPAN/SAVE".
4. Buka blog dan buat komentar dengan menyisipkan kode smiley seperti yang terlihat dalam box yahoo smiley.
5. Selesai.

Cara lain menyimpan javascript :

1. Login ke blogger.
2. Klik "Rancangan/Design".
3. Klik "Edit HTML".
4. Lakukan Backup Template.
5. Cari kode </body>
6. Letakkan javascript di atas </body>
7. Klik "Simpan Template/Save Template".
8. Buat komentar dan tambahkan kode smiley kemudian lihat hasilnya.
9. Selesai!

Javascript widget Yahoo Smileys :

<script src="http://gubhugreyot-javascript.googlecode.com/files/GRsmileys-threaded.js" type="text/javascript"></script>

Widget Recent Comments u Blogger Template Designer

Widget Recent Comments ini sangat kompatibel untuk semua semua template blogger, baik Template Tata Letak (template lama/old template) maupun Blogger Template Designer (template baru/new blogger template). Menggunakan widget recent comment sebenarnya sangat bermanfaat, tidak hanya bagi pemilik blog ataupun pengunjung blog, terlebih pemberi komentar yang memerlukan tanggapan atau jawaban author. Dengan digunakannya widget recent comments maka komentar-komentar dari keseluruhan posting akan terkumpul dalam sebuah box khusus yang dengan mudah dibaca pengunjung tanpa. Hal seperti ini akan membuat pengunjung atau pemberi komentar secara cepat mengetahui ada atau tidaknya tanggapan/jawaban terhadap komentar/pertanyaan yang diajukan. Widget Recent Comments sendiri menggunakan javascript yang hanya terdiri dari beberapa baris sehingga loading blog juga tidak akan terlalu terbebani. Satu keuntungan lebih dari widget ini adalah pada tingkat kecepatan untuk menampilkan recent comments. Sangat jauh lebih cepat dibanding widget recent comments bawaan/yang disertakan blogger pada "Add a Gadget".

Javascript dan xHTML Recent Comments

<script src="http://gubhugreyotprojects.googlecode.com/svn/widgets/GRrecent.comments.js" type="text/javascript"></script>
<div style="max-height:300px;overflow:auto;">
<script src="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>

Cara menggunakan widget recent comments

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Anda akan menjumpai halaman untuk menambah gadget, klik "Add a Gadget/Tambah Gadget".
4. Sebuah window baru akan terlihat dengan beberapa pilihan gadget. Cari dan klik "HTML/Javascript".
   
   • Copy dan paste-kan javascript dan xHTML widget Recent Comments dalam box HTML/Javascript.
   • Ganti kode berwarna merah pada :
     http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com sesuai dengan alamat blog anda.
   • Klik "SIMPAN/SAVE".
5. Buka blog dan lihat hasil penambahan widget recent comments.

D E M O

Lihat recent comments dalam blog ini!

Catatan :

Dalam demo ini widget telah mengalami banyak modifikasi. Jika anda ingin membuat yang seperti terlihat dalam demo, silahkan tunggu tutorialnya di http://gubhugreyot.blogspot.com

Beberapa effek image dengan onmouseover dan onmouseout

Javascript MouseOver & MouseOut

Jika pada posting sebelumnya sudah dibahas penggunaan onmouseover dan onmouseout terhadap penggunaan css property yang melibatkan perubahan background, border dan beberapa property css yang lain, untuk kali ini kita akan mencoba menggunakan onmouseover dan onmouseout untuk menciptakan beberapa effek pada gambar posting. Dengan onmouseover dan onmouseout anda dapat merubah image menjadi lebih besar (zoom), membuat transparansi image dan menampilkan 2 atau tiga image dalam satu posisi (tempat).

Effect-1

Dengan floating posisition yang digunakan pada link (tag "a") dan posisi absolute pada image, sebuah image posting dapat dibuat seperti ini. Perubahan ukuran image ketika cursor berada di atas gambar tak akan mempengaruhi posisi atau kedudukan obyek lain disekitarnya. Anda bisa menggunakan model seperti ini hanya menggunakan onmouseover dan onmouseout tanpa perlu menggunakan kode css lain yang harus disimpan dalam template anda. Bagaimana? Praktis, mudah dan menarik, khan?

xHTML Effect-1 :

<a href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Mau lihat yang lebih hot? Hoo...hooo ..., jangan malu2... kliiik sekali saja!" style="position:relative;float:left;display:block;margin:5px 15px 5px 0;width:154px;height:154px;"><img src="https://lh6.googleusercontent.com/-QZrsyajAmHs/T3ILPCfcFAE/AAAAAAAAAlg/oa5hNvYex90/s144-c/GallerySmall.jpg" width="144" height="144" style="position:absolute;left:0;top:0;border:4px solid #555;border-radius:5px;" onmouseover="this.border='4px solid blue';this.style.width='400px';this.style.height='400px';this.style.zIndex='999';this.style.opacity='0.75';this.style.filter.alpha.Opacity='75';" onmouseout="this.src='https://lh6.googleusercontent.com/-QZrsyajAmHs/T3ILPCfcFAE/AAAAAAAAAlg/oa5hNvYex90/s144-c/GallerySmall.jpg';this.border='4px solid #333';this.style.width='144px';this.style.height='144px';this.style.zIndex='2';" /></a>Dengan floating posisition yang digunakan pada link (tag "a") dan posisi absolute pada image, sebuah image posting dapat dibuat seperti ini. Perubahan ukuran image ketika cursor berada di atas gambar tak akan mempengaruhi posisi atau kedudukan obyek lain disekitarnya. Anda bisa menggunakan model seperti ini hanya menggunakan onmouseover dan onmouseout tanpa perlu menggunakan kode css lain yang harus disimpan dalam template anda. Bagaimana? Praktis, mudah dan menarik, khan?

Untuk membuat effek pada gambar dengan onmouseover dan onmouseout anda perlu mengetahui cara menuliskan beberapa properti kode css dalam standart penulisan di javascript. Ada cukup banyak properti css ini yang bisa kita gunakan selain beberapa yang dipakai dalam effek ini. Data yang berupa daftar properti css berikut perubahan nama (penulisan) property css tersebut di javascript dapat anda lihat dengan membuka link berikut ini.
Daftar data css property dan cara penulisan dalam javascript.

xHTML Effect-2 :

<a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/" target="_blank" title="He... klo yang ini nggak bo'ong, dah! Asli... n...benar2 asli khusus buat sampeyan yang suka ...ehm... ehm ....!!!1" style="position:relative;float:left;display:block;margin:5px 15px 5px 0;width:154px;height:154px;"><img src="https://lh6.googleusercontent.com/-QZrsyajAmHs/T3ILPCfcFAE/AAAAAAAAAlg/oa5hNvYex90/s144-c/GallerySmall.jpg" width="144" height="144" style="position:absolute;left:0;top:0;border:4px solid #555;border-radius:5px;" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXLK-A0eCkjORm5w2JNAdyfgu6P1aN3I0it9KMEE8Bk6DLMdh6a3SLCpT1JRyjanWNHC2aVX9t3Advw2HavCa_cKGhnI8BBQUCR7BiU4fE_NzpET9GEciOWBDZq6zA22NtjypHdnyMMoY/s200/img_my-girl.jpg';this.border='4px solid blue';this.style.width='225px';this.style.height='300px';this.style.zIndex='999';" onmouseout="this.src='https://lh6.googleusercontent.com/-QZrsyajAmHs/T3ILPCfcFAE/AAAAAAAAAlg/oa5hNvYex90/s144-c/GallerySmall.jpg';this.border='4px solid #333';this.style.width='144px';this.style.height='144px';this.style.zIndex='2';" /></a>Untuk membuat effek pada gambar dengan onmouseover dan onmouseout anda perlu mengetahui cara menuliskan beberapa properti kode css dalam standart penulisan di javascript. Ada cukup banyak properti css ini yang bisa kita gunakan selain beberapa yang dipakai dalam effek ini. Data yang berupa daftar properti css berikut perubahan nama (penulisan) property css tersebut di javascript dapat anda lihat dengan membuka link berikut ini.

Ini sebuah contoh yang melibatkan 3 buah image dimana gambar pertama akan terlihat ketika halaman blog dibuka, image kedua terlihat ketika mouse berada di atas image dan gambar ke tiga muncul setelah cursor dilepaskan dari image. Anda dapat melakukan perubahan ukuran gambar melalui kode css yang ada dalam kode html. Ukuran width dan height ini sekaligus akan menjadi ukuran bagi gambar kedua dan ketiga.

xHTML Effect-3 :

<a href="http://lightbox-demo-tutorial.blogspot.com/" title="Image three in one"><img src="https://lh6.googleusercontent.com/-QZrsyajAmHs/T3ILPCfcFAE/AAAAAAAAAlg/oa5hNvYex90/s144-c/GallerySmall.jpg" width="144" height="144" style="float:left;padding:5px;background:#666;border:2px solid #eee;box-shadow:0 0 8px #000;margin:5px 12px 5px 0;" onmouseover="this.src='https://lh4.googleusercontent.com/-7VV32P3_dEo/T24fYqtEeDE/AAAAAAAAAiA/WqJoPavei1Q/s144-c/BigBackground.jpg';" onmouseout="this.src='https://lh3.googleusercontent.com/-Xrd78mdFfLU/T2kBZoY8FOE/AAAAAAAAAgI/RlxFpwGUpRs/s144-c/GalleryMedium.jpg';" /></a>Ini sebuah contoh yang melibatkan 3 buah image dimana gambar pertama akan terlihat ketika halaman blog dibuka, image kedua terlihat ketika mouse berada di atas image dan gambar ke tiga muncul setelah cursor dilepaskan dari image. Anda dapat melakukan perubahan ukuran gambar melalui kode css yang ada dalam kode html. Ukuran width dan height ini sekaligus akan menjadi ukuran bagi gambar kedua dan ketiga.

Data penulisan css property pada javascript

Ini adalah beberapa properti css dan cara penulisan property tersebut saat digunakan pada javascripts. Mungkin saja data ini masih belum lengkap, akan tetapi semoga sedikit menolong untuk membuat beberapa penulisan script terkait dengan css properties.

Beberapa contoh penulisan secara lengkap:

1. onMouseover="this.style.color='#0000ff'"
2. getElementById("ID").style.backgroundColor='orange';
3. function textSizer(){
   oTxt.style.fontSize="150%";
   }

CSS Property	JavaScript-CSS Property	Contoh Penulisan
background	background	background='#000'
background-attachment	backgroundAttachment	backgroundAttachment='fixed'
background-color	backgroundColor	backgroundColor='black'
background-image	backgroundImage	backgroundImage='url()'
background-position	backgroundPosition	backgroundPosition='left top'
background-repeat	backgroundRepeat	backgroundRepeat='no-repeat'
border	border	border='2px solid red'
border-bottom	borderBottom	borderBottom='4px double #f00'
border-bottom-color	borderBottomColor	borderBottomColor='yellow'
border-bottom-style	borderBottomStyle	borderBottomStyle='outset'
border-bottom-width	borderBottomWidth	borderBottomWidth='0.5em'
border-color	borderColor	borderColor='lime'
border-left	borderLeft	borderLeft='0.4em solid grren'
border-left-color	borderLeftColor	borderLeftColor='magenta'
border-left-style	borderLeftStyle	borderLeftStyle='ridge'
border-left-width	borderLeftWidth	borderLeftWidth='1px'
border-right	borderRight	borderRight='10px dotted #555'
border-right-color	borderRightColor	borderRightColor='silver'
border-right-style	borderRightStyle	borderRightStyle='solid'
border-right-width	borderRightWidth	borderRightWidth='3px'
border-style	borderStyle	borderStyle='dashed'
border-top	borderTop	borderTop='5px dashed #eee'
border-top-color	borderTopColor	borderTopColor='gold'
border-top-style	borderTopStyle	borderTopStyle='inset'
border-top-width	borderTopWidth	borderTopWidth='3px'
border-width	borderWidth	borderWidth='8px'
clear	clear	clear='both'
clip	clip	clip='auto'
color	color	color='lightblue'
cursor	cursor	cursor='help'
display	display	display='inline-block'
font	font	font='12pt Arial bold'
font-family	fontFamily	fontFamily='Helvetica'
font-size	fontSize	fontSize='1em'
font-variant	fontVariant	fontVariant='small-caps'
font-weight	fontWeight	fontWeight='bolder'
height	height	height='200px'
left	left	left='10px'
letter-spacing	letterSpacing	letterSpacing='-1px'
line-height	lineHeight	lineHeight='2em'
list-style	listStyle	listStyle='circle'
list-style-image	listStyleImage	listStyleImage='none'
list-style-position	listStylePosition	listStylePosition='0 50%'
list-style-type	listStyleType	listStyleType='square'
margin	margin	margin='20px 0;'
margin-bottom	marginBottom	marginBottom='0'
margin-left	marginLeft	marginLeft='22px'
margin-right	marginRight	marginRight='1.4em'
margin-top	marginTop	marginTop='22px'
opacity	opacity	opacity='0.45'
filter:alpha(opacity=xx)	filter.alpha.Opacity	filter.alpha.Opacity='80'
overflow	overflow	overflow='auto'
padding	padding	padding='20px 10px 5px 15px'
padding-bottom	paddingBottom	paddingBottom='0.5em'
padding-left	paddingLeft	paddingLeft='15px'
padding-right	paddingRight	paddingRight='0.9em'
padding-top	paddingTop	paddingTop='2%'
pag	page	page='auto'
page-break-after	pageBreakAfter	pageBreakAfter='avoid'
page-break-before	pageBreakBefore	pageBreakBefore='auto'
page-break-inside	pageBreakInside	pageBreakInside='inherit'
position	position	position='absolute'
float	styleFloat	styleFloat='left'
text-align	textAlign	textAlign='justify'
text-decoration	textDecoration	textDecoration='underline'
text-indent	textIndent	textIndent='-999px'
text-shadow	textShadow	textShadow='2px 2px 2px #888'
text-transform	textTransform	textTransform='uppercase'
top	top	top='20px'
vertical-align	verticalAlign	verticalAlign='middle'
visibility	visibility	visibility='hidden'
width	width	width='400px'
z-index	zIndex	zIndex='99'

How to use onmouseover and onmouseout with css property

Onmouseover dan onmouseout merupakan sebuah javascript "Mouse Events" yang dapat digunakan secara simpel dan praktis. Script sederhana ini biasanya berfungsi untuk menampilkan effek berupa perubahan obyek atau style obyek dengan memanfaatkan fungsi mouse. Seringkali dibutuhkan pada saat-saat tertentu (temporer) seperti halnya bentuk demo. Penggunaan 2 variable di atas dapat berdiri sendiri atau dibuat dengan melibatkan bantuan kode css dan javascript. Jika kita menggunakan kode css atau javascript, maka fungsi onmouseover dan onmouseout dapat berkembang menjadi sebuah fungsi dengan effek yang lebih kompleks.

Pada posting ini, secara khusus akan membahas fungsi atau kegunaan onmouseover dan onmouseout saat digunakan secara langsung dalam sebuah tag HTML dengan memanfaatkan css property tanpa bantuan kode lain dalam bentuk css atau javascript.

Prinsip kerja onmouseover dan onmouseout:

Ketika mouse berada di atas sebuah obyek "seluruh variabel dalam onmouseover bekerja" dan ketika mouse meninggalkan obyek maka "seluruh fungsi dalam onmouseout yang bekerja". Beberapa property css dapat anda gunakan pada kedua fungsi di atas, namun dengan cara penulisan property standart javascript. Beberapa property atau elemen css yang sering digunakan diantaranya color, background, text-shadow, text-transform, opacity , cursor serta beberapa yang lain.

Kode Dasar penggunaan onmouseover dan onmouseout

Kode Dasar :

<div style="css property & value" onmouseover="this.style.css property='value';" onmouseout=this.style.css property='value';">DIV Contents</div>

Keterangan :

1. css property & value terdiri atas beberapa properti kode css dan nilainya yang berfungsi untuk membentuk obyek (style obyek).
2. css property berisikan properti kode css yang dituliskan dengan standart javascript.
3. value merupakan nilai dari css property.
4. Tag div dapat diganti dengan tag lain seperti img, p, span atau lainnya.

Contoh penulisan kode secara lengkap :

xHTML-1 :

<div style="margin:20px auto;width:250px;height100px;border:5px solid green;background:gray url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDnUWOTiq6divorNjxe4MW3u9oCeOZ4zrNXSnqFG7OyqR7H5ePljz7CP9QxVmMrrEBfVOz_9ExwteoLnTnJ8QKsCHFTE4TEV38eLI3LZLdgp4mv8CSHjDeq9tp7nUC37FYV-MXk0mAms/s250/img_gubhugreyot-gadisku-01.jpg) center no-repeat;text-align:center;font-size:32px;font-weight:bold;color:brown;line-height:100px;border-radius:10px;" onmouseover="this.style.cursor='move';this.style.background='black';this.style.color='#eee';this.style.borderColor='#900';this.style.opacity='1.0';this.style.filter.alpha.Opacity='100';" onmouseout="this.style.cursor='pointer';this.style.background='blue';this.style.color='magenta';this.style.borderColor='#000';this.style.opacity='0.5';this.style.filter.alpha.Opacity='50';">
gubhugreyot
</div>

xHTML-1 » D E M O :

gubhugreyot

xHTML-2 :

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDnUWOTiq6divorNjxe4MW3u9oCeOZ4zrNXSnqFG7OyqR7H5ePljz7CP9QxVmMrrEBfVOz_9ExwteoLnTnJ8QKsCHFTE4TEV38eLI3LZLdgp4mv8CSHjDeq9tp7nUC37FYV-MXk0mAms/s250/img_gubhugreyot-gadisku-01.jpg) center no-repeat;">
<div style="margin:20px auto;width:250px;height100px;border:5px solid green;background:transparent;text-align:center;font-size:32px;font-weight:bold;color:brown;line-height:100px;border-radius:10px;" onmouseover="this.style.cursor='move';this.style.background='black';this.style.color='#eee';this.style.borderColor='#900';this.style.opacity='1.0';this.style.filter.alpha.Opacity='100';" onmouseout="this.style.cursor='pointer';this.style.background='blue';this.style.color='magenta';this.style.borderColor='#000';this.style.opacity='0.5';this.style.filter.alpha.Opacity='50';">
gubhugreyot
</div>
</div>

xHTML-2 » D E M O :

gubhugreyot

Catatan berdasar demo :

1. Letakkan cursor property di bagian terdepan.
2. Letakkan opacity property di paling bagian belakang.
3. Perhatikan metode penulisan properti css secara cermat karena ada beberapa pembedaan penulisan termasuk misalnya penggunaan huruf kapital.
4. Data tentang penulisan css properties pada javascript dapat anda buka di sini.

Javascript Anti Click Kanan

Javascript Nor Right Click atau anti klik kanan ini berfungsi untuk membuat bingung bagi siapapun yang berniat menggunakan fungsi klik kanan pada mouse dengan berbagai alasan terutama yang "berniat tidak baik" seperti mencoba mencuri kode template atau mungkin kode posting. Silahkan simpan javascriptnya di atas kode ]]></b:skin>

D E M O javascript no right click

Coba klik kanan pada mouse anda dan perhatikan hasilnya!

Cara Menyimpan Javascript :

1. Login ke Blogger.
2. Klik "Rancangan (Design)".
3. Klik "Edit HTML".
4. Lakukan "Backup Template".
5. Cari kode ]]></b:skin>
6. Copy dan simpan Javascript di atas kode tersebut.
   Gunakan Ctrl + C untuk meng-copy.
7. Klik "Simpan Template (Save Template)".
8. Selesai! Buka blog dan coba untuk melakukan klik kanan mouse.

Javascript :

<script type="text/javascript">
//<![CDATA[  /*bgsGR gubhugreyot -- No Right Click */
var isNS = (navigator.appName == " Netscape ") ? 1 : 0;
if (navigator.appName == " Netscape ") document.captureEvents(Event.MOUSEDOWN || Event.MOUSEUP);
function mischandler() {
    return false;
}
function mousehandler(e) {
    var myevent = (isNS) ? e: event;
    var eventbutton = (isNS) ? myevent.which: myevent.button;
    if ((eventbutton == 2) || (eventbutton == 3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
//]]>
</script>

Simple jQuery Show Hide DIV with Effect

Cara Membuat Show Hide DIV dengan Efek menggunakan jQuery

Flag Counter
show/hide

Anda bisa menuliskan teks, kode html, widget, image atau yang lain di sini. Semua yang berada dalam DIV dengan id=GRshObject anya akan terlihat ketika button Show/Hide di "klik". Jika anda ingin membuat Show Hide DIV tanpa jQuery silahkan cari tepat sebelum posting ini!

$(document).ready(function () {
$('#GRshObject').hide();
$('a#GRshButton').click(function () {
$('#GRshObject').toggle(600);
});
});

Efek animasi saat box konten membuka dan menutup yang disertai fade effect terjadi karena penggunaan jQuery animated toggle.

jQuery-Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#GRshObject').hide();
$('a#GRshButton').click(function () {
$('#GRshObject').toggle(600);
});
});
</script>

Kode CSS:

<style type="text/css">
.GRshbox{
       border:1px outset #888;
       width:400px;
       background:#474747;
       background:-moz-linear-gradient(top, #474747 0%, #595959 8%, #8e8e8e 36%, #8c8c8c 43%, #777777 59%, #595959 93%, #b2b2b2 97%, #7a7a7a 100%);
       background:-webkit-linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);background:-o-linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
       background:-ms-linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
       background:linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
       filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#7a7a7a',GradientType=0 );        padding:2px;margin:5px 2px;text-align:center;
}
.GRshbox p.GRshHeader{
       box-shadow:0 0 4px #999;
       border-radius:3px;
       font-size:16px;
       font-family:Serif;
       color:#fff;
       text-shadow:1px 1px 1px #000;
       padding:4px;
       border:1px solid #555;
       border-right-color:#333;
       border-top-color:#333;
       margin:4px 5px; 
}
a#GRshButton{
       display:block;
       width:115px;
       height:36px;
       margin:0 auto;
       text-align:center;
       background:url('http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/Show-HideH115V34.jpg') center no-repeat;
       text-indent:-9999px;
       color:transparent;
       cursor:pointer; 
}
#GRshObject{
       padding:10px;
       margin:10px 0;
       color:#eee;
       text-shadow:1px 1px 1px #000;
       text-align:left;
       max-height:200px;
       overflow:auto; 
}
</style>

xHTML:

<div class="GRshbox">
  <p class="GRshHeader">Flag Counter<br /><a id="GRshButton">show/hide</a></p>
    <div id="GRshObject">
Anda bisa menuliskan teks, kode html, widget, image atau yang lain di sini. Semua yang berada dalam DIV dengan <b>id=GRshObject</b> hanya akan terlihat ketika button Show/Hide di "<i>klik</i>". Jika anda ingin membuat Show Hide DIV tanpa jQuery silahkan cari tepat sebelum posting ini!<p>
<a href="http://gubhugreyot.blogdetik.com/" target="_blank"><img border="0" height="92" width="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgil7YYoajJfFaGAMWkE5jBNJ3WOZXbpiHoTGKND30HCBIspf8XiyWfSDbnoorjmxIEIeE05Y3Mq4xXJDnT3vo8VVyxQj2ANUkHiw-1Pk-I8ZybYyhdCRqigtn24SbeH_FQUiayzpHrqTA/s400/flag-counter.jpg" style="margin:0 auto;display:block;text-align:center;;padding:0;" /></a></p>
    </div>
</div>

1. Letakkan dan simpan jQuery dan Javascript di bawah tag <head>
2. Letakkan dan simpan Kode CSS di atas kode ]]></b:skin>
3. Gunakan xHTML di dalam boks posting atau dibagian yang lain blog.

Simple Show Hide DIV using Script & CSS3

Membuat Show Hide DIV Menggunakan Javacript dan CSS3

Flag Counter

$(document).ready(function () {
$('#GRsh_object').hide();
$('a#GRsh-button').click(function () {
$('#GRsh_object').toggle(0);
});
});

Silahkan anda coba dulu demo di atas!

Berbeda dengan show hide content yang dibuat menggunakan javascript di posting sebelumnya, show hide div di atas dibangun tanpa menggunakan jQuery. Dengan kegunaan, show hide DIV ini terhitung relatif sangat simple karena hanya menggunakan beberapa deret script saja. Agar mempunyai tampilan yang manis kita libatkan background CSS3 setra border-radius dan box-shadow. Anda bisa menggunakan show hide ini sebagai wadah image (gambar), teks atau konten lainnya.

Javascript Show Hide DIV

<script type='text/javascript'>
if(typeof(GRsh) == 'undefined') var GRsh = '';
GRsh = Math.floor(Math.random()*1000);
GRsh = 'id-' + GRsh;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + GRsh + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;">');
</script>

Kode CSS Show Hide DIV

<style type="text/css">
.GRshowhideDIV{
       border:1px solid #888;
       width:400px;
       background:#474747;
       background:-moz-linear-gradient(top, #474747 0%, #595959 8%, #8e8e8e 36%, #8c8c8c 43%, #777777 59%, #595959 93%, #b2b2b2 97%, #7a7a7a 100%);
       background: -webkit-linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
       background: -o-linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
       background: -ms-linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
       background: linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#7a7a7a',GradientType=0 );
       padding:2px;
       margin:5px 2px;
}
.GRshowhideDIV:active{
       outline:none;
}
.GRshowhideDIV span{
       display:block;
       box-shadow:0 0 4px #999;
       border-radius:3px;
       font-size:16px;
       font-family:Serif;
       color:#fff;
       text-shadow:1px 1px 1px #000;
       padding:4px;
       border:1px solid #555;
       border-right-color:#333;
       border-top-color:#333;
       margin:4px 5px;
}
</style>

xHTML Show Hide DIV

<center>
<div class="GRshowhideDIV">
<span>Flag Counter<br />
<img src="http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/Show-HideH115V34.jpg" width="115" height="36" style="margin:0 auto;display:block;text-align:center;" /></span>
<script type='text/javascript'>
document.write('<div id="' + GRsh + '" style="display:none;">');
</script>
<p>
<!-- Letakkan konten (image, teks atau kode html) di sini !! -->
<a href="http://widgets.tcimg.com/" target="_blank"><img border="0" height="92" width="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgil7YYoajJfFaGAMWkE5jBNJ3WOZXbpiHoTGKND30HCBIspf8XiyWfSDbnoorjmxIEIeE05Y3Mq4xXJDnT3vo8VVyxQj2ANUkHiw-1Pk-I8ZybYyhdCRqigtn24SbeH_FQUiayzpHrqTA/s400/flag-counter.jpg" style="margin:0;padding:0;" /></a>
<!-- Letakkan konten (image, teks atau kode html) di sini !! -->
</p>
</div>
</center>

1. Untuk menyesuaikan lebar Show Hide DIV hapus kode width:400px; atau bisa juga dengan merubah nilainya (400px). Semakin besar maka semakin lebar.
2. Anda bisa menyimpan seluruh kode dalam box gadget HTML/Javascript.
3. Jika ingin penyimpanan terpisah:
   • Simpan Javascript di atas kode </head>
   • Simpan kode CSS di atas kode ]]></b:skin>
   • Gunakan xHTML di antara tag body atau dalam box gadget HTML/Javascript.
4. Ganti URL image yang ada dalam show hide DIV dengan cara upload melalui halaman posting blogger. Menggunakan image yang diupload di blog anda akan lebih aman dan sangat berpengaruh besar terhadap kecepatan loading blog.
5. Untuk menyimpan kode Show Hide DIV anda bisa membaca panduan berikut sebagai referensi:
   Tutorial : Cara simpan kode CSS

jQuery Show Hide Content (jQuery Spoiler)

Silahkan klik pada Show/Hide di bawah ini untuk melihat bagaimana show hide content yang dibuat menggunakan jQuery bekerja.

Show/hide

Ini adalah sebuah contoh bagaimana show hide content bekerja. Anda bisa melihat betapa sekalipun javascript yang digunakan hanya beberapa gelintir saja, namun efek yang dihasilkan sungguh terasa sangat luar biasa. Hal-hal kecil seperti ini pastilah akan sangat menarik untuk digunakan dalam blog. Gunakanlah javascript ini bersama jQuery.1.3.2.min.js atau yang lebih baru seperti jQuery.1.7.1.js, jQuery.1.4.2.js atau jQuery.1.6.1.js. Jika blog anda selama ini sudah menggunakan salah satu dari jQuery tersebut, maka anda hanya perlu menambah javascript di bawah ini untuk membuat show hide content.

$(document).ready(function(){
     $(".GRshowhidebox").hide();
     $(".GR_showhide").show(); 
     $('.GR_showhide').click(function(){
     $(".GRshowhidebox").slideToggle(500);
   });
});

Menggunakan jQuery sebagai salah satu komponen javascript pendukung kinerja blog memang terasa sangat luar biasa. jQuery tak hanya bisa digunakan untuk satu fungsi saja. Berbagai fungsi lain dengan mudah dapat ditambahkan dan tak selalu harus dengan menambahkan lagi javascript yang kompleks atau berderet-deret memanjang. Beberapa bahkan bisa dibuat dengan tambahan satu deret script saja. Kondisi seperti ini tentu saja memberi keuntungan luar biasa bagi blogger karena setelah jQuery dilibatkan dalam template maka penggunaan javascript untuk berbagai fungsi dan kegunaan lain bisa diminimalisir hingga beban blog juga tak terlalu tertambahi. Menggunakan jQuery juga memberi keleluasaan untuk membuat desain-desain baru dengan gerak animatif tanpa perlu kode bertumpuk. Salah satu diantaranya adalah show hide content yang berfungsi menyembunyikan "sesuatu elemen posting atau elemen blog lain" dalam sebuah tag div. Dengan sebuah control yang sangat sederhana elemen tersembunyi dapat diperlihatkan (ditampilkan) dan kemudian disembunyikan lagi disertai efek show hide yang terlihat dinamis.

Untuk membuat show hide conten gunakan javascript, kode CSS dan xHTMl seperti berikut:

jQuery - Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
     $(".GRshowhidebox").hide();
     $(".GR_showhide").show(); 
     $('.GR_showhide').click(function(){
     $(".GRshowhidebox").slideToggle();
   });
});
</script>

Kode CSS:

.GRshowhidebox{
       width:400px;
       max-height:500px;
       background:#bbb;
       padding:15px 10px;
       margin:10px 0;
       border-bottom:5px double #333;
}
.GR_showhide{
       display:none;
}

xHTML:

<a href="#" class="GR_showhide">Show/hide</a><br /><div class="GRshowhidebox">
Letakkan di sini konten yang akan disembunyikan!
</div>

1. Letakkan dan simpan jQuery dan Javascript di bawah tag <head>
2. Letakkan dan simpan Kode CSS di atas kode ]]></b:skin>
3. Gunakan xHTML di dalam boks posting atau dibagian yang lain blog.

Pasang Google Translate 16 Bahasa di Blog

Simpan Kode Google TranslateKlik di sini! Panduan pasang kode dalam gambar.

Mungkin saja beberapa pengunjung dari luar Indonesia menemukan blog anda dan tertarik untuk menikmati postingnya. Ya..., kenapa tidak?! Bukankah tak ada satupun batasan yang melingkupi dunia maya ini. Segala hal yang tak terbayangkan akan dengan mudah terjadi begitu saja tanpa kita sadari. Yah.., oleh karena itu mengapa tak berjaga-jaga sejak dini?! Berikan saja sebuah "widget Google Translate" agar pengunjung yang sudah sempat membuka blog anda mengurungkan niatnya untuk menutup blog yang sudah terlanjur terpampang di depan matanya. Yah..., barangkali saja sebuah "translator" akan menarik minatnya untuk mencoba mengerti apa maksud posting anda "yang berbahasa Indonesia itu"?! Uih... gampang, kok, pasangnya! Nih coba lihat klo nggak percaya!

Cara Pasang Widget Google Translate di Blog

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Design (Rancangan).
4. Pilih dan klik salah satu Add a Gadget di Elemen Laman (Page Elements). Tunggu beberapa saat.
5. Pilih dan klik widget HTML/Javascript.
   • Copy dan pastekan javascript dalam box Add a Gadget.
   • Klik SIMPAN (SAVE).
6. Selesai! Silahkan buka blog dan coba untuk terjemahkan blog ke bahasa yang tersedia!

Javascript Google Translate- display Vertical

javascript:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'id',
    includedLanguages: 'ar,zh-CN,cs,en,tl,fr,de,it,ja,ko,no,pt,ru,es,th,vi'
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Javascript Google Translate- display Horizontal

javascript:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'id',
    includedLanguages: 'ar,zh-CN,cs,en,tl,fr,de,it,ja,ko,no,pt,ru,es,th,vi',
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Catatan/Keterangan:

• Klik gambar di bagian teratas untuk melihat panduan dalam gambar.
• Anda dapat juga merubah bahasa yang digunakan di google translate dan memilih sendiri berapa dan bahasa apa yang akan digunakan dengan membuat sendiri widgetnya. Silahkan klik disini » (Google Translate).

Cara Membuat link open in new tab » terbuka di tab atau window baru

Open in new tab adalah sebuah opsi ketika dalam sebuah web/blog menggunakan link. Link sendiri ditandai dengan adanya tag "a" yang di dalamnya memuat sebuah alamat (URL) tertentu yang bisa berupa alamat web/blog lain, alamat sebuah posting, alamat image atau bahkan alamat khusus dalam blog/web itu sendiri. Secara umum link open in new tab diperuntukkan untuk membuka alamat baru diluar blog/web. Agar sebuah link bisa dibuka di tab/window baru dikenal 2 (cara).

1. Hanya menggunakan kode html.
2. Menggunakan javascript

Sebagai tanda link biasanya digunakan:

1. Teks » selanjutnya disebut sebagai text link.
   Contoh :
   Text Link
2. Image » selanjutnya disebut sebagai image link.
   Contoh :
   

Cara membuat link open in new tab:

1. Hanya menggunakan kode html.
   Link open in new tab seperti ini hanya berfungsi pada satu link yang diberi tambahan fungsi open in new tab. Kode untuk menjalankan fungsi ini berupa kode target="_blank" yang ditambahkan di dalam tag "a". Kode dasarnya seperti berikut:
   

   Kode dasar open in new tab (html):

   <a href="URL" target="_blank">Text/image</a>

   Contoh-1:
   Penggunaan open in new tab dalam web/blog dengan penambahan fungsi title.
   

   Text link Open in new tab:

   <a href="http://gubhugreyot.blogspot.com" target="_blank" title="Panduan lengkap blogger Indonesia">Tutorial Blogger</a>

   Image link Open in new tab:

   <a href="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/img_gubhugreyot-bali-dance.jpg" target="_blank" title="Penari cantik dengan tarian cantik. Oiii... Bali yang amat cantik!"><img src="https://sites.google.com/site/gubhugreyotbaru/lightbox-slideshow/th_gubhugreyot-bali-dance.jpg" width="200" height="150" style="float:left;margin:5px 12px 5px 0;" /></a>

2. Open in new tab menggunakan javascript.
   Penggunaan javascript memungkinkan open in new tab/window berlaku pada semua link yang ada di blog/web. Jadi ketika kita menambahkan fungsi open in new tab melalui javascript, maka blogger tak perlu lagi membuat fungsi open in new tab melalui kode html karena secara otomatis semua link sudah di-setting untuk open in new tab. Javascript open in new tab bisa disimpan di atas kode </body> .

Javascript Open In new Tab

<script type="text/javascript">
//<![CDATA[
function externalLinks(){
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];
if(anchor.getAttribute("href"))
anchor.target = "_blank";
}}
window.onload = externalLinks;
//]]>
</script>

Cara menyimpan javascript open in new tab:

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Cari kode </body>. Anda bisa mencari kode tersebut menggunakan Ctrl + F agar lebih mudah dan lebih cepat.
6. Copy dan paste-kan javascript di atas kode </body>.
7. Klik Simpan Template (Save Template).
8. Selesai!
9. Coba hasilnya dengan membuat posting yang menggunakan link.