Dengan Instant Messenger ICQ Anda bisa melakukan video / audio chat, mengirim email, SMS dan nirkabel-pager pesan, serta mentransfer file dan URL
Publisher: ICQ LLC
OS Support: Windows 2000/XP/2003/Vista/7/8
Dengan Instant Messenger ICQ Anda bisa melakukan video / audio chat, mengirim email, SMS dan nirkabel-pager pesan, serta mentransfer file dan URL
Publisher: ICQ LLC
OS Support: Windows 2000/XP/2003/Vista/7/8
AIMP adalah audio player gratis yang sangat ringan, support untuk memutar semua format audio, seperti halnya winamp. Akan tetapi AIMP3 memiliki tampilan grafis yang lebih menarik serta lebih fleksibel
AIMP merupakan sebuah media player yang berlisensi free. Mungkin hampir sama dengan Winamp, namun melihat pada kualitas suara yang dapat dihasilkan dari kedua media player ini, AIMP lebih unggul dari pada Winamp.Dengan teknologi Crystal-Clear Soundnya AIMP dapat menghasilkan suara yang lebih jernih dan lebih halus
Publisher: AIMP DevTeam
OS Support: Windows 2000/XP/2003/Vista/7/8
Windows 8 Transformation Pack dapat mengubah antarmuka Windows 7/Vista/XP ke Windows 8. Termasuk Windows 8 Boot Screen, Login Screen, Tema, Wallpaper, Ikon, Suara, Font, Metro / Modern UI, Pewarnaan Aero, Taskbar UserTile dan banyak lagi.Transformation Pack Notes
Konfigurasi pengguna akun tetap tidak memeriksa persyaratan menyebabkan konfigurasi yang tidak benar
Font tetap menggunakan metode instalasi dari versi 5.0 dengan kode API ditingkatkan
masalah dengan izin aplikasi pihak ke 3 (fix)
Windows versi pengecekan error yang memungkinkan instalasi pada Windows 8
UI Aero dihapus dari konfigurasi default karena beberapa versi tidak cukup stabil
Metro Inspirat theme untuk Windows XP memiliki UI modern diperbarui pada taskbar dan start menu
File Size: 58.26 MB
Publisher: Windows X’s Live
OS Support: Windows 2000/XP/2003/Vista/7
sumber: soppeng.com
Sebagai salah satu kode bahasa yang sangat penting untuk pembuatan design sebuah website adalah CSS3. Dalam membuat efek pada gambar, gadget, box, area, menu dropdown, dan sebagainya merupakan contoh hasil penggunaan CSS.
Pada kesempatan kali ini, kita akan membahas mengenai Cara Membuat Efek Gelap terang dengan menggunakan CSS. Efek ini akan membuat gambar pada artikel kita apabila tersentuh oleh mouse maka akan menjadi gelap, begitu juga sebaliknya.
Membuat Efek Image Hover Gelap ke Terang :
1. Masuk ke bagian Tata Letak / Design Rancangan / Layout.
2. Add a Gadget / Widget.
3. Pilih HTML/Javascript
4. Copy kode ini dan letakkan di box area tersebut.
5. Simpan Widget Anda.
Untuk Membuat Efek Image Hover Terang ke Gelap :
Langkah memasangnya, sama seperti diatas hanya saja pada bagian tahap ke 4 gunakan kode berikut ini :
Sedangkan untuk anda yang ingin membuat sebuah elemen Kotak ( bingkai / kerangka ) menjadi Terang Gelap dapat mengcopy kode Box Hover ini dan letakkan di dalam Edit HTML anda sebelum kode ]]></b:skin> :
Lalu berikan nama elemen div pada xHTML sesuai dengan nama CSS diatas yaitu mybox.
xHTML
<div class="mybox">
Letakkan teks, image atau yang lainnya di sini!</div>
xHTML dengan tag p
<p class="mybox">
Letakkan teks, image atau yang lainnya di sini!</p>
Contoh penggunaan HTML5 yang dipadukan dengan CSS3 tersebut :
Itulah tadi berbagai macam cara untuk membuat efek gelap terang pada box atau image.
Pada kesempatan kali ini, kita akan membahas mengenai Cara Membuat Efek Gelap terang dengan menggunakan CSS. Efek ini akan membuat gambar pada artikel kita apabila tersentuh oleh mouse maka akan menjadi gelap, begitu juga sebaliknya.
Membuat Efek Image Hover Gelap ke Terang :
1. Masuk ke bagian Tata Letak / Design Rancangan / Layout.
2. Add a Gadget / Widget.
3. Pilih HTML/Javascript
4. Copy kode ini dan letakkan di box area tersebut.
<style>
img {
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
img:hover {
filter:alpha(opacity=100);
-moz-opacity:.0;
opacity:1.0;
}
</style>
img {
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
img:hover {
filter:alpha(opacity=100);
-moz-opacity:.0;
opacity:1.0;
}
</style>
5. Simpan Widget Anda.
Untuk Membuat Efek Image Hover Terang ke Gelap :
Langkah memasangnya, sama seperti diatas hanya saja pada bagian tahap ke 4 gunakan kode berikut ini :
<style>
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
.post a:hover img {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
</style>
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
.post a:hover img {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}
</style>
Sedangkan untuk anda yang ingin membuat sebuah elemen Kotak ( bingkai / kerangka ) menjadi Terang Gelap dapat mengcopy kode Box Hover ini dan letakkan di dalam Edit HTML anda sebelum kode ]]></b:skin> :
.mybox{
position:relative;
display:block;
width:200px;
max-height:400px;
background:#fff;
color:#000;
overflow:auto;
padding:20px 15px;
margin:20px 5px;
border:2px solid #777;
border-radius:6px;
opacity:0.2;
filter:alpha(opacity=20);
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.mybox:hover{
opacity:1.0;
filter:alpha(opacity=100);
}
position:relative;
display:block;
width:200px;
max-height:400px;
background:#fff;
color:#000;
overflow:auto;
padding:20px 15px;
margin:20px 5px;
border:2px solid #777;
border-radius:6px;
opacity:0.2;
filter:alpha(opacity=20);
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.mybox:hover{
opacity:1.0;
filter:alpha(opacity=100);
}
Lalu berikan nama elemen div pada xHTML sesuai dengan nama CSS diatas yaitu mybox.
xHTML
<div class="mybox">
Letakkan teks, image atau yang lainnya di sini!</div>
xHTML dengan tag p
<p class="mybox">
Letakkan teks, image atau yang lainnya di sini!</p>
Contoh penggunaan HTML5 yang dipadukan dengan CSS3 tersebut :
<div class="mybox">
<a href="http://..../images/myphoto.jpg" title="photo profil"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQjT7yHbeCamYsqSHvmKruZEiSF_Wu1mtq3xeD6ZxlvFkUWTVu9D_3TWdafbOOPS3AFphfvA6KB679Eet9iVvPYhFzu7GqKxgtnyEgVqN1dl2TDzT4q4vUYSVJIMXMoAAZKotQp8pg6ug/s320/myphoto.jpg" width="250" height="150" style="float:left;margin:5px 8px 5px 0;padding:2px;border:3px solid #FF1000;border-radius:6px;" /></a>Contoh Pemasangan Box Cantik dengan Efek Hover , Gelap terang, Membesar Mengecil, Terbalik dan sebagainya</div>
<a href="http://..../images/myphoto.jpg" title="photo profil"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQjT7yHbeCamYsqSHvmKruZEiSF_Wu1mtq3xeD6ZxlvFkUWTVu9D_3TWdafbOOPS3AFphfvA6KB679Eet9iVvPYhFzu7GqKxgtnyEgVqN1dl2TDzT4q4vUYSVJIMXMoAAZKotQp8pg6ug/s320/myphoto.jpg" width="250" height="150" style="float:left;margin:5px 8px 5px 0;padding:2px;border:3px solid #FF1000;border-radius:6px;" /></a>Contoh Pemasangan Box Cantik dengan Efek Hover , Gelap terang, Membesar Mengecil, Terbalik dan sebagainya</div>
Itulah tadi berbagai macam cara untuk membuat efek gelap terang pada box atau image.
Salah satu kegunaan dari tombol back to top yakni untuk memudahkan pengunjung blog untuk kembali ke menu header atau navigation tanpa harus melakukan scroll pada mouse.
Tutorial untuk pemasangan back to top kali ini yakni menggunakan JQuery versi 1.3.7 (terbaru untuk saat ini). Cara pemasangannya tidaklah rumit dan tanpa harus mengedit CSS template blog, tetapi hanya dengan menambahkan gadget baru (HTML/Javascript) dan memasukkan kode ke dalamnya. Jika sobat penasaran seperti apa tombol back to top yang saya maksudkan disini, coba klik DISINI.
Bagaimana, menarik bukan...???
Bagaimana, menarik bukan...???
Nah jika sobat tertarik untuk memasang tombol to top seperti pada blog saya ini, berikut uraian singkatnya :
- Login ke blogger
- Tata Letak » Add Gadget » Pilih HTLM/Javascript
- Copy kode di bawah ini dan pastekan kedalam box HTML/Javascript tersebut
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://2.bp.blogspot.com/-Gq3OE4WWUds/T8PO89DB8lI/AAAAAAAAA-w/cGQ--xpcI9c/s320/back_to_top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
<script type="text/javascript" >
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://2.bp.blogspot.com/-Gq3OE4WWUds/T8PO89DB8lI/AAAAAAAAA-w/cGQ--xpcI9c/s320/back_to_top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
sumber : copazz.blogspot.com
Pada kesempatan kali ini saya akan membagikan sebuah tutorial untuk membuat widget artikel yang paling banyak dikomentari oleh pengunjung blog kita. Javascript dari widget ini dibuat oleh salah seorang blogger yaitu Nitin Maheta dan jika ingin mengunjungi blognya silahkan buka makingdifferent.com.
Kenapa Harus Memasang Widget Artikel Yang Paling Banyak Dikomentari Ini?
Tentunya sorang pengunjung di blog anda akan lebih tertarik untuk membaca artikel kita yang banyak mendapatkan respon dari pengunjung kita yang lainnya. Umumnya widget ini dipasang pada blog yang menggunakan wordpress.org, namun anda bisa saja memasangnya di blogspot anda.
Cara Membuat Widget Postingan Paling Banyak Dikomentari
Jika anda ingin memasang widget ini di blog anda, anda cukup mengikuti beberapa langkah mudah yang ada di bawah ini :
Langkah 1 : Login Ke Blogger >> Dashboard
Langkah 2 : Silahkan pilih menu Tata Letak >> Tampahkan Gadget (Add Gadget)
Langkah 3 : Pilih HTML / Javascript
Langkah 4 : Masukkan kode javascript di bawah ini di kotak yang keluar
<script language='JavaScript'>aBold = false;MDnumbposts=200;MDmaxsshowresult=10;home_page = "http://www.alamatbloganda.com/";</script><script src='http://makingdifferent.github.com/blogger-widgets/Most-commented-posts.js' type='text/javascript'></script>
Langkah 5 : Simpan
Untuk customisasinya :
- Silahkan ganti www.alamatbloganda.com dengan URL blog anda, misalkan cofeemix.blogspot.com (Wajib diganti dengan alamat blog anda).
- 200 merupakan jumlah postingan yang ada di blog anda, anda bisa menggantinya sesuai dengan jumlah postingan blog anda
- 10 merupakan jumlah postingan yang di tampilkan di widget tersebut dan kita bisa menggantinya sesuai dengan keinginan kita sendiri.
Nah, selamat mencoba dan jangan lupa tinggalkan komentar jika anda sudah bisa memasangnya di blog anda. Semoga bermanfaat.
sumber : http://www.cofeemix.com/2013/02/cara-membuat-widget-postingan-paling.html
