√ Home → Posts Filed Under Widget

Showing posts with label Widget. Show all posts

Merubah Tampilan Cloud Label V.2

Merubah Tampilan Cloud Label V.2 - Merubah Tampilan Cloud Label V.2, Baik Kali Ini Saya Akan Buat Tutorial Cara Merubah Tampilan Cloud Label V.2, Setelah Sebelumnya Saya Posting 'Cara Merubah Tampilan Label Cloud' Beberapa Hari Lalu Sekarang Saatnya Posting Tentang 'Merubah Tampilan Cloud Label V.2'
Screen Shot :

Peringatan !!! :

Jika Sobat Sudah Pernah Merubah Tampilan Cloud Label, Seperti Posting Yang Sebelumnya, Maka Hapus Dulu Kodenya Biar Tidak Bentrok

Baiklah Tutorialnya :

Login Blogger
Edit HTML
Centang Expand Template Widget
Backup Template
Cari Kode Ini ]]></b:skin>
Copy Kode Dibawah, Lalu Paste Tepat Diatas Kode ]]></b:skin>

/* Custom Cloud Label By Monster Zila */
.label-size {
float: left;
margin: 0 0 7px 20px;
position: relative;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.75em;
font-weight: bold;
text-decoration: none;
color: #996633;
text-shadow: 0px 1px 0px rgba(255,255,255,.4);
padding: 0.417em 0.417em 0.417em 0.917em;
border-top: 1px solid #d99d38;
border-right: 1px solid #d99d38;
border-bottom: 1px solid #d99d38;
-webkit-border-radius: 0 0.25em 0.25em 0;
-moz-border-radius: 0 0.25em 0.25em 0;
border-radius: 0 0.25em 0.25em 0;
background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
-webkit-box-shadow: inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
z-index: 1;
}
.label-size:before {
content: '';
width: 1.30em;
height: 1.39em;
background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
position: absolute;
left: -0.69em;
top: .2em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border-left: 1px solid #d99d38;
border-bottom: 1px solid #d99d38;
-webkit-border-radius: 0 0 0 0.25em;
-moz-border-radius: 0 0 0 0.25em;
border-radius: 0 0 0 0.25em;
z-index: 1;
}
.label-size:after {
content: '';
width: 0.5em;
height: 0.5em;
background: #fff;
-webkit-border-radius: 4.167em;
-moz-border-radius: 4.167em;
border-radius: 4.167em;
border: 1px solid #d99d38;
-webkit-box-shadow: 0 1px 0 #faeaba;
-moz-box-shadow: 0 1px 0 #faeaba;
box-shadow: 0 1px 0 #faeaba;
position: absolute;
top: 0.667em;
left: -0.083em;
z-index: 9999;
}
.label-size:hover {
background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color: #e1b160;
}
.label-size:hover:before {
background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color: #e1b160;
}

Simpan Template

Bagi Yang Belum Pasang Gadget Label :

Tambah Gadget
Pilih 'Labels'
Klik Pada 'Cloud'
Cheklist / Unchek Untuk Menampilkan Jumlah Post / Artikel
Simpan Gadget

Mudah Bukan ?
Semoga Bermanfaat

Membuat Social Icon Dengan Gambar Berputar

Membuat Social Icon Dengan Gambar Berputar - Kali Ini Saya Mau Posting Tutorial Blog Lagi, Bagi Sobat Yang Belum Tahu Cara Membuat Social Icon Dengan Gambar Berputar Saya Akan Jelaskan Tutorialnya, Sebelum Ke Pembahasan Mari Kita Lihat Dulu Demonya Dibawah Ini ( Arahkan Pointer Mouse Sobat Ke Gambar Dibawah ) :

Gimana Sobat ?, Keren Kan ?
Gambar Itu Bisa Berputar Karna Efek Rotate Dari CSS

Berikut Tutorailnya :

Login Blogger
Tata Letak
Tambah Gadget
HTML/JavaScript
Copy Kode Dibawah, Lalu Paste Di Form HTML/JavaScript

<style type='text/css'>
/* 3D Social Icon by Monster Zila */
#social a:hover {background-color: transparent;opacity:0.7;}
#social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; }
#social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
</style>
<center>

<div id="social">

<a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/rss-feed-icon.png" alt="Icon"/></a>


<a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/facebook-icon.png" alt="Icon"/></a>


<a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/twitter-icon.png" alt="Icon"/></a>


<a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img src="http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/64/google-icon.png"/></a>

</center>

Keterangan !!! :
Ganti Kode Dibawah :
YOUR-FEED-URL-HERE Dengan URL Feed Blog Sobat
YOUR-FACEBOOK-PAGE-URL-HERE Dengan URL Facebook Sobat
YOUR-TWITTER-URL-HERE Dengan URL Twitter Sobat
YOUR-GOOGLE-PLUS-URL-HERE Dengan URL G+ Sobat

Simpan Gadget

Semoga Bermanfaat

Kalau Sobat Mau Share Artikel Ini Tolong Cantumkan Link Ini Sebagai Sumbernya

Cara Merubah Tampilan Label Cloud

Cara Merubah Tampilan Label Cloud - Halo Sobat, Gimana Kabarnya?
Kali Ini Saya Akan Share Cara Merubah Tampilan Label Cloud di Blog Seperti Di Blog Saya Ini
Cara Merubah Tampilan Cloud Label Tinggal Memasukkan Kode CSS di Template Sobat

Screen Shot :

Berikut Tutorialnya :

Login Blogger
Edit HTML
Centang Expand Template Widget
Backup Template
Cari Kode Ini ]]></b:skin>
Copy Kode Dibawah, Lalu Paste Tepat Diatas Kode ]]></b:skin>

/* Custom Labels Cloud by Monster Zila */

.label-size{

margin:0 2px 6px 0;

padding: 3px;

text-transform: uppercase;

border: solid 1px #C6C6C6;

border-radius: 3px;

float:left;

text-decoration:none;

font-size:10px;

color:#666;

}

.label-size:hover {

border:1px solid #6BB5FF;

text-decoration: none;

-moz-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

-moz-transform: rotate(7deg);

-o-transform: rotate(7deg);

-webkit-transform: rotate(7deg);

-ms-transform: rotate(7deg);

transform: rotate(7deg);

filter: progid:DXImageTransform.Microsoft.Matrix(

M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');

zoom: 1;

}

.label-size a {

text-transform: uppercase;

float:left;

text-decoration: none;

}

.label-size a:hover {

text-decoration: none;

}

Klik Pratinjau, Jika Tidak Terjadi Error Klik 'Simpan Template'

Bagi Yang Belum Pasang Gadget Label :

Tambah Gadget
Pilih 'Labels'
Klik Pada 'Cloud'
Cheklist / Unchek Untuk Menampilkan Jumlah Post / Artikel
Simpan Gadget

Mudah Bukan ?
Semoga Bermanfaat

Cara Membuat Kotak Pesan Dengan Efek jQuery

Cara Membuat Kotak Pesan Dengan Efek jQuery - Halo Sobat, Gimana Kabarnya ?
Kali Ini Saya Mau Posting Tentang Tutorial Blog Yaitu : 'Cara Membuat Kotak Pesan Dengan Efek jQuery'
Efek jQuerynya Adalah Ketika Kotak Pesan Itu Muncul Maka Background / Latar Belakangnya menjadi Gelap, Dan Setelah KOtak Pesan Itu Di Close / Tutup Maka Akan Terang Kembali..

Demo

Berikut Turtorialnya :

1. Login Blogger
2. Tata Letak
3. Tambah Gadget
4. HTML/JavaScript
5. Copy Kode Dibawah, Paste Di Form HTML/JavaScript

<style type='text/css'>
/* Message Box by Monster Zila */
#box-message{
position:fixed;
left: 35%;
padding: 10px;
background:
white;
box-shadow: 0px 1px 3px
rgba(0, 0, 0, 0.4);
right: 30%;
width: 300px;
top: 35%;
z-index: 9999;
}

#box-message:after {background: rgba(0, 0, 0, 0.77);content: '';position: absolute;top: -500%;bottom: 0;right: 0;left: -500%;z-index: -1;width: 1000%;height: 1000%;}
#box-message a.close{
position:absolute;
top: 0;
right: 0;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
border-radius:22px;
cursor:pointer;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'></script>

<script type='text/javascript'>
$(window).bind("load", function() {
// Animasikan Nilai Top Saat Halaman Telah Selesai Dimuat
$('#box-message').animate({top:"190px"}, 1000, "easeOutBounce");
// Hilangkan Message Box Saat Tombol (x) Diklik
$('a.close').click(function() {
$(this).parent().slideUp(800, "easeOutBounce");
return false;
});
});
</script>

<div id='box-message'>

<a class='close' href='#'>×</a>
</div>

Keterangan !!! :

Ganti Kode  Dengan Kode Yang Mau Di Tampilkan Di Kotak Pesan Tersebut
Jika Sudah Ada Kode Yang Bergaris Bawah, Maka Tidah Usah Memakai Kode jQuery Tersebut

6. Simpan Gadget

Jika Sobat Mau Mencopy / Menyebarluaskan Artikel Ini Harap Cantumkan Link Sumber Dari BLog Ini !!

Semoga Bermanfaat

Membuat Jam Klasik Di Blog

Cara Membuat Jam Klasik Di Blog

Tutorial Blog Kali Ini, Saya Akan Memberikan Tutorial Cara Membuat Jam Klasik Di Blog

Demo

Baiklah Ini Tutorialnya :

Login Blogger
Tata Letak
Tambah Gadget
HTML/JavaScript
Copy Kode Di Bawah Lalu Paste Di Form HTML/JavaScript

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function () {
setInterval(function () {
var seconds = new Date().getSeconds();
var sdegree = seconds * 6;
var srotate = 'rotate(' + sdegree + 'deg)';
$('#sec').css({
'-moz-transform': srotate,
'-webkit-transform': srotate
});
}, 1000);
setInterval(function () {
var hours = new Date().getHours();
var mins = new Date().getMinutes();
var hdegree = hours * 30 + (mins / 2);
var hrotate = 'rotate(' + hdegree + 'deg)';
$('#hour').css({
'-moz-transform': hrotate,
'-webkit-transform': hrotate
});
}, 1000);
setInterval(function () {
var mins = new Date().getMinutes();
var mdegree = mins * 6;
var mrotate = 'rotate(' + mdegree + 'deg)';
$('#min').css({
'-moz-transform': mrotate,
'-webkit-transform': mrotate
});
}, 1000);
});
</script>
<style type="text/css">
#clock {
position: relative;
width: 80px;
height: 120px;
margin: 20px auto 0 auto;
background: url(//2.bp.blogspot.com/-UdqmlpkAA0g/UEHKQio0fZI/AAAAAAAAALA/riSFcock2zg/s1600/clockface.png)no-repeat;
list-style: none
}
#sec, #min, #hour {
position: absolute;
width: 6px;
height: 120px;
top: 2px;
left: 57px
}
#sec {
background: url(//1.bp.blogspot.com/-Vws3DL1OEWU/UEHKRhSAnSI/AAAAAAAAALI/MUoRRytTslI/s1600/sechand.png);
z-index: 3
}
#min {
background: url(//1.bp.blogspot.com/-89cd22Bga2c/UEHKSfPf8SI/AAAAAAAAALQ/UAX6CRIHpzY/s1600/minhand.png);
z-index: 2
}
#hour {
background: url(//3.bp.blogspot.com/-YL00l0N2sbo/UEHKQiiWUyI/AAAAAAAAAK8/pIUrc-01U0g/s1600/hourhand.png);
z-index: 1
}
</style>
<ul id="clock">
<li id="sec"></li>
<li id="hour"></li>
<li id="min"></li>
</ul>

Perhatian !!! :
Jika Di Template Sobat Sudah Ada Kode Yang Bergaris Bawah, Maka Kode Itu Tidah Usah Dipasang Kembali

Simpan Gadget, Sekarang Lihat Hasilnya

Page Rank Button

PageRank adalah sebuah algoritma yang telah dipatenkan yang berfungsi menentukan situs web mana yang lebih populer.

PageRank merupakan fitur mesin pencari Google yang diciptakan oleh Larry Page dan Sergey Brin, dengan fitur tersebut kita bisa menampilkan pagerank pada website kita dan sudah banyak sekali para web programmer menyediakan google pagerank button secara gratis untuk memonitor pagerank yang ada pada website kita.

Berikut ini ada beberapa penyedia Google Pagerank Button yang di sediakan secara gratis dengan berbagai macam bentuk button yang tersedia, Anda bisa memilihnya sesuia selera...

√ Read More → Page Rank Button

Memasang Widget Chat Seperti Facebook ,Dengan Envolve

Kali ini saya akan membahas tentang Cara Memasang Widget Envolve diblog. Tahukah kalian dengan widget envolve??? widget envolve adalah widget seperti chat facebook. Kalau kalian berminat, langsung saja simak di bawah ini : .

1. Kunjungi situs Envolve

2. Klik "Try Envolve On Your Site"

Cara Memasang Tombol Share Facebook Dan Twitter

Tombol share merupakan salah satu fitur yang wajib ada di sebuah blog. Fungsinya tentu saja untuk memudahkan pengunjung blog kita menshare atau membagikan artikel-artikel kita ke teman-teman mereka di facebook, twitter maupun jejaring sosial yang lain.
Banyak sekali web-web yang menyediakan layanan pembuat tombol share gratis untuk dipasang di blog kita. Kita hanya perlu mendaftar, pilih style tombolnya, copy scriptnya terus pasang deh di blog kita.
Namun kali ini saya tidak akan membahas bagaimana cara memasang tombol share menggunakan web-web pihak ketiga. Kali saya akan memberikan tutorial singkat bagaimana cara memasang tombol share facebook dan twitter di blog secara manual alias kita buat sendiri. Langsung saja simak caranya di bawah ini.

Rainlendar merupakan sebuah kalender desktop yang kaya fitur kalender yang mudah digunakan dan tidak mengambil banyak ruang di desktop Anda.
Aplikasi ini platform independen sehingga Anda dapat menjalankannya pada semua sistem operasi utama: Windows, Linux dan Mac OS X.

Rainlendar 2.10 Beta 118

√ Read More → Rainlendar 2.10 Beta 118

Monster Zila

Merubah Tampilan Cloud Label V.2

Membuat Social Icon Dengan Gambar Berputar

Cara Merubah Tampilan Label Cloud

Cara Membuat Kotak Pesan Dengan Efek jQuery

Membuat Jam Klasik Di Blog

Page Rank Button

Memasang Widget Chat Seperti Facebook ,Dengan Envolve

Cara Memasang Tombol Share Facebook Dan Twitter

Rainlendar 2.10 Beta 118

Rainlendar 2.10 Beta 118

Ads

Search

Tag Cloud

Popular Posts

Partner Blog

Follow Us