danisatya-st

Cara Membuat Tombol Download Dan Demo Dengan CSS,ya dari pada saya bengong mending bikin artikel siapa tau buat sobat ada yang minat memakai tombol button made in hansmjlkcommunity.....hehehehhe.tombol button lumayan penting guna memberikan tampilan pada blog sobat,yang mana pada kesempatan dulu saya sempat membahas juga tentang
Expandable Button CSS For Blog,masih ada kaitannya dengan artikel kali ini,nmaun siapa tau sobat ada yang minat dengan tampilan button kali ini.
Bagi sobat yang ingin mencobanya silahkan ikuti tutorialnya di bawah ini

1. Sepeti biasa login dulu ke akun blog sobat.
2. Pilih Template > Edit HTML,kemudian centang Expand Widget Templates
3. Cari kode [[> dan letakan kode di bawah tepat di atas kode ]]>

.SRB{ background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.SRB a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

.SRB a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }

.SRB a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }

.SRB a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }

.SRB a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }

.SRB a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }

.SRB a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }

.SRB a:hover, .SRB:hover { color: #fff; opacity: .7 }

4. Kemudian save.

Untuk penggunaan dalam postingan bisa sobat gunakan kode kode di bawah.

Button Text

Button Text

Button Text

Button Text

Button Text

Button Text

Keterangan :

Untuk tulisan berwarna merah menunjukan tempat URL
Untuk tulisan berwarna hijau menunjukan nama button

Selesai sudah tutorial kali ini terima kasih atas partisipasinya semoga dapat sedikit membantu buat sobat semuanya.

OS: 8310 4.5.0.313/4.5.0.188 (Multilanguage)

BlackBerry Handheld Software v4.5.0.313 (Multilanguage)
for the 8310 model only
Package Version: 4.5.0.313

Consisting of:
* Applications: 4.5.0.188
* Software Platform: 2.7.0.110
* File name: 8310M_PBr4[1].5.0_rel313_PL2.7.0.110_A4.5.0.188.ex e
* File size: 91MB

Note: The Software Platform and Applications version numbers can be found under Options-About screen on the handheld.
Download OS here (choose Free Download Area > Endgeräte > BlackBerry > then your device model #):

Blackberry

Instructions for installing on ANY 8310 (regardless of carrier)

(Use Desktop Manager to backup your BlackBerry first, and then close Desktop Manager):

1. Download the above OS file to the PC then install it to the PC by running (double clicking) the file you downloaded.
2. Go to c:\program files\common files\research in motion\apploader and delete the file named "vendor.xml."
3. Plug in BB and double click on "Loader.exe." It's located in the same place as the above vendor.xml file.

The process takes about 45 minutes to an hour depending on how much data you have to backup and restore during the process. Once it's done loading the new OS it will reboot (it may do this twice during the entire process.) You will see a white screen with an hourglass for up to 20 minutes at a time while the DM says "waiting for initialization."

If, for some reason, you end up with a white screen with small icons and the number 507, simply connect to the PC again and run Loader.exe again and it should load the OS to the device.

Link to previous OS: http://www.blackberryforums.com/gene...ilanguage.html

Cara pertama gambar redup menjadi terang:

<img src="URL gambar" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Cara pertama gambar redup menjadi terang:

<img src="URL gambar" border="1" style="opacity:1;filter:alpha(opacity=100)" onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>

Cara ketiga yaitu membuat semua gambar di postingan Anda secara otomatis mempunyai efek mouseover yaitu menggunakkan kode CSS berikut :

Letakkan kodenya sebelum kode ]]></b:skin>

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6} .post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

Cara Memberi Efek Zoom Dan Hover Pada Gambar Dengan jQuery

Blazer Blog, jQuery - Kali ini saya akan membahas bagaimana cara memberi efek zoon (membesar) dan hover pada gambar dengan jQuery, sebelumnya saya pernah memposting cara membuat efek hover pada gambar, silahkan cari di google, dan kali ini efek nya ditambah dengan efek zoom atau membesar, ditambah dengan jQuery yang membuat efeknya semakin indah. Saat kursor diarahkan pada gambar tersebut maka muncul efek zoom dan hover tadi.

Images Demo

Dan berikut cara memberi efek zoom dan hover pada gambar dengan jQuery :

1. Login ke Blog kamu.
2. Pilih Rancangan.
3. Pilih Edit HTML.
4. Cari kode ]]></b:skin>
5. Setelah ketemu letakan kode dibawah ini tepat diatas kode nomor 4.

/* Blogger Zoom Gallery By AllBlogTools.com */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDeFlbgpBZedHvfkisRdn6Yg1keXyQ89B6-nTLzeIaYdNXbse8ge0J0J-F1I2LLtWhyphenhyphen3GnIKXAVczZ03WY14Rz8TTbwUGDO5dES2KuocU4nfwvu_QsMvO3MWj1ph5BDUC-ITO4Tqu6jc0-/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}Kamu bisa ubah kode yang berwarna biru adalah ukuran tinggi (height) dan lebar (width) gambar.
dan kode yang berwarna merah adalah lebar keseluruhan dari widget tersebut.

6. Selanjutnya cari kode </head> setelah ketemu letakan kode dibawah ini tepat diatas kode </head>

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Larger thumbnail preview
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
</script>Simpan Template.

Langkah terakhir kembali kemenu awal rancangan pilih Add Gadget, pilih HTML Java Script.
Copy kode dibawah ini :

<ul class="thumb">
<li><a href="#"><img src="http://3.bp.blogspot.com/-jWrr1QP04vU/T7c5kL-CTSI/AAAAAAAACnc/IfwA9I0J_6Q/s1600/Naruto+Shippuden+263,+Blazer+Blog.jpg" alt="" /></a></li>
<li><a href="#"><img src="picture 2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 4 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 5 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 6 Link" alt="" /></a></li>
</ul>Ganti kode yang berwarna merah dan kata picture 2,3,4,5,6 Link dengan URL gambar lainnya.
Kode yang berwarna merah adalah contoh.
Ganti tanda # dengan URL yang dituj saat gambar di klik.

Simpan dan lihat hasilnya, semoga sukses.

danisatya-st

Cara membuat button to download

OS: 8310 4.5.0.313/4.5.0.188 (Multilanguage)

Cara membuat Efek Mouseover Pada Gambar Di Blog

Cara Memberi Efek Zoom Dan Hover Pada Gambar Dengan jQuery

Mengenai Saya

Labels

Blog Archive

Pengikut