Showing posts with label Widget. Show all posts

Cara Memasang Widget IP Address Pengunjung Blog

Kali ini saya akan post tentang cara memasang widget IP Address pengunjung blog. Widget ini berfungsi untuk mengetahui IP Address komputer atau laptop yang sedang kalian pakai untuk membuka di blog yang sudah terpasang widget ini. Widget ini tentu sangat bermanfaat bagi pengunjung blog karena mereka bisa mengetahui IP Address. Widget ini tidak hanya menampilkan IP Address saja, tapi juga menampilkan jenis OS pengunjung, Browser yang digunakan pengunjung, Negara asal pengunjung.
Langkah - langkah pembuatannya:

1. Login Blogger
2. Masuk ke Tata Letak > Add Gadget
3. Pilih HTML/JavaScript
4. Paste kode widgetnya di bawah ini

Semoga bermanfaat..

Cara Memasang Animasi Emoticon Gundam di Kotak Komentar

Disini saya akan share Animasi Emoticon Gundam Keren, barang kali di antara teman-teman yang lain ingin mendapatkan animasi emoticon gundam keren ini.

:b:

:c:

:d:

:e:

:f:

:g:

:h:

:i:

:j:

:k:

:l:

:m:

:n:

:o:

:p:

Cara Memasang Emoticon Gundam Berguna di Kotak Komentar Blog,kalau berminat ikuti langkah-langkahnya

Log in ke akun blog sobat.
Klik rancangan --> Edit HTML --> Centang kotak Expand template widget.
Letakkan kode berikut di atas kode </body>

Kodenya :

4. Cari kode Biru seperti di bawah ini:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

5. Bila sudah ketemu letakkan kode emoticon gundam di bawah ini tepat di bawah kode

Kodenya :

:b:

:c:

:d:

:e:

:f:

:g:

:h:

:i:

:j:

:k:

:l:

:m:

:n:

:o:

:p:

</b></center>

Keterangan :

Angka 50 width=Lebar dan hight=Tinggi, bisa anda sesuaikan sendiri,makin besar angkanya makin besar pula animasi gundamnya.dan sebaliknya,

Semoga bermanfaat,,:)

Cara Mengganti Tulisan Older Post, Newer Post, Home dengan Gambar

Older post, newer post, dan home. Tulisan ini biasanya berada pada bawah komentar, seperti gambar disamping. Jika kita ingin mengganti tulisan tersebut dengan gambar caranya cukup mudah

Caranya cukup mudah, begini langkah-langkahnya :

Masuk ke Template - Edit Html - centang pada expand template widget.
Lalu carilah kode-kode seperti yang berwarna merah (utk mempermudah pencarian pencet ctrl+F di keyboard aja biar muncul search box)

<data:newerPageTitle/>
ganti kode diatas dengan
<img src='ganti kode gambar panah kiri'/>

<data:olderPageTitle/>
ganti kode diatas dengan
<img src='ganti kode gambar panah kanan'/>

<data:homeMsg/>
ganti kode diatas dengan
<img src='ganti kode gambar rumah'/>

tulisan yang bercetak miring diatas gantilah dengan kode gambar yang diinginkan.

berikut contoh-contoh kode yang dapat anda ambil

________________________________________

kodenya : http://remoxp.hostzi.com/homes.png

kodenya: http://remoxp.hostzi.com/PREV.png

kodenya: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPgaLI70_Rw1Jgc2ycAZKFPCO0JLu749ZUlnp63eKW84E3jvgcmHEFTSXhY1dnpH_Qa0GQaLuPfCz7QjmPwGenoAanCKlijvNFEN2Za2w00QrHyNiqhoo2zoAm04YtBXLm0GtHgzKGbyhs/s1600/Copy+of+mail_forward.png

kodenya: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPIk5-cfvhVCx_pJ7HL0BZ0V4eiAfigYW2SFXazdRIMkwB0Tt9YWFOkgKJcM6GpuCVLhaAwvpaEZm8W04izkts_egmNGJmK2SG2825DG8UEzOMcxPtmBrJTFMa9Z9NANxJYYc2YWUfwmRe/s1600/home.png

kodenya: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGscVQCl9KW4IlrgPDgMKAN3lgduTSdghi3uEvRVdhJudSaEAQ-7-spNOzVmn1HXb4dSENZtWcGzcOqvXpUprabPyx1iMof6KpYelDlIwqnQzbyjOQe0zt5aFO3iAwNKkxAN7J04qg8NVn/s1600/mail_forward.png

yang semula seperti ini

berubah jadi seperti ini

semoga bermanfaat.

Sumber : Zamedaku Share

Cara Memodifikasi Blogger Label Dengan CSS3

CSS - Bosen dengan tampilan label yang biasa saja. Sekarang kamu bisa menghilangkan rasa bosan itu dengan tampil baru dan keren. Dengan CSS3 tampilan blogger label milik kamu jadi keren. Dan berikut cara memodifikasi nya. Di desain oleh stylifyyourblog.

1. Login ke blog kamu.
2. Pastikan kamu sudah memasang label nya.
3. Template > Edit HTML > Cari kode ]]></b:skin>
4. Letakan kode di bawah ini tepat di atas kode nomor 3.

.label-size{
   display: inline-block;
   padding: 0px 10px;
   height: 29px;
   line-height:29px;
   border-radius: 5px;
   font-weight:bold;
   font-size:12px;
   text-decoration:none;
}

.label-size{
border: 1px solid #769e42;
box-shadow: inset 0 1px 0 #c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #6ea23b;
color: #fff;
background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size:hover{
background-color: #b7fa66;
background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%);
}

.label-size:active{
background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size{
display:inline-block;
border-radius: 5px 0 0 5px;
border-right-width:0;
position:relative;
z-index:5;
margin-right: 20px;
margin-bottom: 10px;
}

.label-size:after{
content: " ";
width: 22px;
height: 22px;
line-height: 18px;
font-size:25px;
border-top: 1px solid #769e42;
border-right: 1px solid #769e42;
box-shadow: inset 0 1px 0 #c5e59c ;
background-color: #9ed35a;
text-shadow: 0px 1px 1px #7eac46;
border-radius: 3px 7px 3px 0;
color: #fff;
background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
position:absolute;
top: 3px;
right: -12px;
z-index:-3;
-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
       -moz-transform: rotate(45deg); /* FF3.5+ */
        -ms-transform: rotate(45deg); /* IE9 */
         -o-transform: rotate(45deg); /* Opera 10.5 */
            transform: rotate(45deg);
               filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                       M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
                 zoom: 1;
}

.label-size:hover:after{
background-color: #b7fa66;
background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);
}

.label-size:active:after{
background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);
}

.label-size:before{
content: " ";
height:5px;
width:5px;
display:block;
position:absolute;
right:-3px;
top:11px;
background-color: #fcfdf5;
border: 1px solid #83ab52;
border-radius:5px;
box-shadow: 0 1px 0 #b2ddd83;
}

.label-size span{
padding:2px 5px;
border: 1px solid #9e5c26;
border-radius: 5px;
box-shadow: inset 0 1px 0 #f5bf8c;
background-color: #ed943f;
text-shadow: 0px 1px 1px #000;
margin-left: 10px;
background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);
}

#Label1 {height:210px !important;}

Simpan dan lihat hasilnya.

Cara Memasang Popular Post Dengan Sembilan Warna Yang Berbeda

CSS - Popular Post sebuah widget yang bertujuan untuk menampilkan posting yang sering dilihat. Dan sekarang kita modifikasi widget popular post dengan sembilan macam warna yang berbeda-beda dari setiap posting.

1. Login ke blog kamu.
2. Pilih Edit HTML > Cari kode ]]></b:skin>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 2.

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

4. Simpan, dan kembali ke menu Tata Letak > Pilih Add Gadget > Pilih Entri Populer/Popular posts.

Cuplikan gambar dan keterangan hilangkan tanda centangnya dan tampilkan minimal 9 post.

5. Simpan dan lihat hasilnya.

Cara Membuat Tombol Cantik Dengan CSS3

CSS - Kali ini saya akan membahas bagaimana cara membuat tombol cantik, keren dengan CSS3 untuk blog. Mungkin sebagian dari kamu pingin membuat sebuah tombol yang menuju ke beberapa link dan kamu pingin tombol itu keren dan cantik. CSS by Lateshack.

1. Login ke blog kamu.
2. Pilih Rancangan > Edit HTML > Cari kode ]]></b:skin>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode yang dicetak tebal di atas.

.awesome, .awesome:visited {
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhda_CVSELTCVvUufjVQW8Xmp441mzs_KAXE7t2g_6nqeZaMdAksnrgqZlK7g8d02CoPcKgyGTPfGNMGjYhzQPHEDc4a7GeuAF9H3A9uw-gK6AXIG6cVRlilVHNLjkXWDoiXZXmj68fPgM/s1600/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-family:Calibri, Arial, sans-serif;
}
.awesome:hover { background-color: #111; color: #fff; }
.awesome:active { top: 1px; }
.small.awesome, .small.awesome:visited { font-size: 18px; padding: ; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited { font-size: 24px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited { font-size: 30px; padding: 8px 14px 9px; }
.green.awesome, .green.awesome:visited { background-color: #91bd09; }
.green.awesome:hover { background-color: #749a02; }
.blue.awesome, .blue.awesome:visited { background-color: #2daebf; }
.blue.awesome:hover { background-color: #007d9a; }
.red.awesome, .red.awesome:visited { background-color: #e33100; }
.red.awesome:hover { background-color: #872300; }
.magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; }
.magenta.awesome:hover { background-color: #630030; }
.orange.awesome, .orange.awesome:visited { background-color: #ff5c00; }
.orange.awesome:hover { background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited { background-color: #ffb515; }
.yellow.awesome:hover { background-color: #fc9200; }
.pink.awesome, .pink.awesome:visited { background-color: #e22092; }
.pink.awesome:hover { background-color: #c81e82; }

Simpan Template.

Dan sekarang untuk membuat tombolnya. Disini ada beberapa ukuran ada yang besar, sedang dan kecil. Jadi pilih salah satu satu.

UKURAN BESAR

<a href="LINK" class="large awesome">LINK NAME</a>
<a href="LINK" class="large blue awesome">LINK NAME</a>
<a href="LINK" class="large pink awesome">LINK NAME</a>
<a href="LINK" class="large magenta awesome">LINK NAME</a>
<a href="LINK" class="large green awesome">LINK NAME</a>
<a href="LINK" class="large red awesome">LINK NAME</a>
<a href="LINK" class="large orange awesome">LINK NAME</a>
<a href="LINK" class="large yellow awesome">LINK NAME</a>

UKURAN SEDANG

<a href="LINK" class="medium awesome">LINK NAME</a>
<a href="LINK" class="medium blue awesome">LINK NAME</a>
<a href="LINK" class="medium pink awesome">LINK NAME</a>
<a href="LINK" class="medium magenta awesome">LINK NAME</a>
<a href="LINK" class="medium green awesome">LINK NAME</a>
<a href="LINK" class="medium red awesome">LINK NAME</a>
<a href="LINK" class="medium orange awesome">LINK NAME</a>
<a href="LINK" class="medium yellow awesome">LINK NAME</a>

UKURAN KECIL

<a href="LINK" class="small awesome">LINK NAME</a>
<a href="LINK" class="small blue awesome">LINK NAME</a>
<a href="LINK" class="small pink awesome">LINK NAME</a>
<a href="LINK" class="small magenta awesome">LINK NAME</a>
<a href="LINK" class="small green awesome">LINK NAME</a>
<a href="LINK" class="small red awesome">LINK NAME</a>
<a href="LINK" class="small orange awesome">LINK NAME</a>
<a href="LINK" class="small yellow awesome">LINK NAME</a>

Ganti kata LINK dengan URL yang dituju dan kata LINK NAME dengan nama yang kamu inginkan.

Cara Membuat Widget Tombol Sharethis di Blog

http://simplystatedbusiness.com/wp-content/uploads/2012/07/bigstock-Social-media-on-Smartphone-21485075.jpg

Kali ini saya akan membagikan artikel tentang cara membuat tombol share di blog/web, tapi saya tidak akan membagikan scripnya melainkan teman-teman atau sobat yang membuatnya sendiri,, jika sobat berminat untuk membuat tombol share sendri silahkan ikuti langkah-langkah berikkut ini :

1. Klick link berikut ini : sharethis.com
2. Pada halaman home atau beranda di halaman itu akan muncul gambar-gambar
web/blog dan pilih sesuai web/blog yang sobat pakai
3. Setelah itu sobat akan suguhkan dengan gambar atau widget share bermacam-macam karakter dan silahkan pilih sesuai keinginan sobat
4. Klick Go untuk memasangnya
5. Selesai

Selamat mencoba...

Cara Membuat Recent Post Dengan Efek Gambar Berputar

Cara membuat recent post dengan efek gambar berputar ketika kursor kita tujukan pada gambar ini sangat mudah dalam aplikasinya. Tapi syaratnya setiap anda posting jangan lupa untuk memasang gambar yang sesuai dengan tema postingannya, agar tampilan pada recent post kelihatan fresh. Widget ini dilengkapi pula dengan tanggal posting dan jumlah comment. Widget ini sangat cocok untuk anda yang pingin mempercantik tampilan blognya. Untuk mengetahui live demonya silahkan klik di sini, dan berikut tutorialnya:

1. Login ke blog anda >> Klik TATA LETAK / LAY OUT >> ADD GADGET

2. Copi kode di bawah ini

/* ========== Scrolling Recent Posts Widget By helperblogger.com 
======== */

#helperblogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#helperblogger-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#helperblogger-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYUHQwV-MKHwyShp6UfeYFlV12bxKbKVLoBZSV-crcecb3px6HgkHQI0w33WKazYdgtcP_8bRjiTKECq5-ZAgWE1c7RyrL6n_AOozoEo-5w5hf4HnSKqcZX-aVpOVU2xOoE4lwKiOa-8U/s1600/helperblogger.com-post.jpg)
 repeat-x;
    border: 1px solid #ddd;
}

#helperblogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#helperblogger-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#helperblogger-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, 
from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, 
#aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#helperblogger-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px 
rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px 
rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px 
rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

/* ========== Scrolling Recent Posts Widget By helperblogger.com 
======== */

-->
</style>

Lalu paste pada kolom yang sudah ada, dan silahkan beri judul sesuai selera anda.

3. Ubah tulisan URL BLOG ANDA dengan URL anda sendiri

4. Klik save lalu lihat hasilnya. Selamat mencoba

Cara Memasang Widget Share Lintas Me

Cara Memasang Widget Share Lintas Me | Cara Pasang Tombol Share Lintas Me | Cara Memasang Lintaskan Lintas Me | Cara Memasang Widget Melintas Lintas Me.

Salahsatu teknik seo tentunya adalah mensubmit link url kita ke berbagai link yang memberikan submit link kita sehingga setidaknya url kita diketahui beberapa pengunjung dan tertarik untuk berkujung ke blog kita.

Tidak salah kali ini disini menggunakan link lintas.me.

Sesuai dengan topik kita kali ini adalah Cara Memasang Widget Share Lintas Me di blog. sebagai blogger pastinya sudah mengenal situs www.Lintas.me Bukan, salah satu situs direktori artikel terbesar di Indonesia, yang Sekarang berganti nama menjadi Lintas.me setelah sebelumnya memakai nama Lintasberita.com.

Situs direktori artikel ini sangat banyak sekali di gunakan oleh para webmaster dan blogger, pada umumnya untuk membantu mendatangkan pengunjung ke blognya, karena dengan kita bisa men-submit artikel blog kita ke situs lintas.me, artikel di blog kita jadi akan semakin mudah untuk menempati peringkat teratas di hasil penelusuran atau pencarian google, karena memang situs lintas.me ini mempunyai Page Rank google yang cukup tinggi. Baik, sobat farhan di bawah ini farhan sudah persiapkan langkah-langkah atau cara memasang widget lintaskan di blog | lintas.me, di simak baik-baik ya.

1. Sobat Buka http://www.lintas.me/widget.

2. Sobat klik "Get LintasMe Widget".

3. Selanjutnya sobat isi formulir dengan E-mail dan URL blog sobat, setelah itu Klik "GET IT!".

4. Langkah selanjutnya sobat tinggal copy pastekkan kode widget ke notepad.

5. Masuk ke blogger.

6. Pilih Tata Letak.

7. Add Gadget.

8. Pilih HTML/JavaScript.

9. Lalu sobat copy pastekkan kode yang tadi di notepad ke dalam box "konten" (HTML/JavaScript gadget).

10. Klik "Save" dan Selesai.

Cara Membuat Banner Animasi Gif

Cara Membuat Banner Animasi Gif - Iklan yang berberntuk banner memang lebih menarik dari pada iklan yang berbentuk text. Apalagi jika iklan banner tersebut bergerak / animasi semakin menarik para pengunjung melihat dan mengkliknya.

Banner beranimasi Gif mempunyai banyak kelebihan di bandingkan banner animasi Flash karena ukurannya tidak terlalu berat ditambah lagi ada Tag Alt yang semakin membuat iklan tersebut SEO friendly.

Ada banyak cara untuk membuat banner animasi Gif seperti menggunakan Photoshop & EasyGifAnimator tetapi pada tutorial ini saya akan menggunakan aplikasi pembuat Gif yang ada di internet.

Beberapa situs untuk Membuat Banner Animasi Gif :

Cara Membuat Banner Animasi Gif :
1. Siapkan beberapa gambar

2.Buka salah satu situs di atas ( Saya memakai http://picasion.com/ )
3.Browse Image / Gambar yang anda buat tadi

Keterangan:

Size: untuk mengatur ukuran gambar
Speed : Untuk mengatur kecepatan Slide Show

4.Klik "Create Animation"
5.Kemudian akan muncul tampilan

Keterangan:

Link to this page: Link untuk halaman gambar
Direct Link: Link tempat gambar
HTML code for Blog/Web: Kode HTML untuk menampilkan gambar di Blog/web
BBCode for forum/board: Kode untuk menampilkan gambar di forum

6.Selesai

Cara Membuat Tombol Back Top Keren V2

Pertama masuk ke Blogger lalu pilih Layout terus Add a Gadget dan tambahin HTML/JavaScript gan. Terus tinggal loe pastein kode di bawah ini di kotak kosongnya.

<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="URL Gambar Back To Top" />', //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>

Kalo udah di pastein sekarang tinggal di ganti URL Gambar Back To Top sama url gambar punya loe gan lalu di Save. Coba sekarang buka blog loe pasti udah ada tombol back to topnya gan.

Kalo loe gak punya gambar tombolnya ni gw sediain gan, ada yang animasi sama standar tinggal dipilih aja.

Animasi :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeu52avCIXl0UzWF8acuZvbCvjKLG_psTJlQUjAAtClctc7XkOl0VQvzbeaFEfNOH3YJVdPLBjWf_zU2MScS5Ytyo_ilupwpAVqGXEPi2cV0PrMggs74M6B3j9VO-xGNV_iV4wPDSTcHtg/s1600/back+to+top10.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNF1YBQeWfTk8OEbpJZr3nj3zr0fMK2Ux-YNpX_cuRUysqbpWBMA8FF-YqWuGJEd3InBP3t6nQwXWtX2d0NVxlUpTBw2s-q927SDfLPWdJ18C7tvbbdQc7rc5APYVi-btNjLTgicottaj9/s1600/back+to+top4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYtzN1ktzOZ3MVPW3pgoABscwd2v-wTnIUqseRGNgmx-aEoRHwk29YdNb4yPFGdZ2FlV1ulNJbPI3ljtm1SeuwYcgs78DVmjBqRIjVMSQGjCIQxE5T751rgtRtgFr0IYcsejJrBfSxeaRY/s1600/back+to+top7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8JPexGayxDrCUPYDdhS-4WO__uB961YR6bWhO8becXLWmxvn1J1NaZM6hiKx8KMFfSwtkoBH447nD3NGyDKCOD7TemrLGGaAGiye4AtmUAfBq8_GcdiZTlyxwc7ytpmtQGyLkBDXeR43U/s1600/back+to+top9.gif

Standar

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIp6UaC60hyphenhyphenaynaQuoRtLAJV8ULkJo656IsJmiQxjQol8peuJTsF_of_CDvl0MMo4uxPeE8ZaHkZvMKFHvMmjIsEnRlEBH8HxTpkXUXwNeb37UtZCjeim-qjIz7tPE3EE0CZeAeWroqChN/s1600/back+to+top13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzqUP5h0z_DfOfqEXlGSnLiXxBLux_NCfjPQ14uHMm46dpMDdPPdoP5M_ynyOHAsihHBLFpZVun5z0Vzc0bG0O5PI6YloggmmEPhYxPWp3vSIDfn14Y4867_vptBtzJRELZriLfhfkLNuh/s1600/back+to+top14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPXjl51x0YDyZkrP3zN_IJySOBfSHmlyITTy8pcChhqU-OlRvFa1mTweagH_ag27kLSY41P32xngGhd7vJQIstcwgUhgFVCQVSLnQnNP1roxoOGZ5vQgs_EzhbiuD12ORQB1haaAhBez3j/s1600/back+to+top15.png

Beres gan, gampang kan cara membuat tombol back to top di blognya. Ow ya kalo loe mau rubah kecepatan scrollnya bisa di edit aja scrollduration, semakin besar angkanya semakin lambat gerakan ke atasnya gan.

Sekian dulu yang bisa gw share tentang cara membuat tombol back to top, semoga bermanfaat

Cara Membuat Widget Translate Keren di Blog

http://1.bp.blogspot.com/-ea91NyGHj1s/UUUzaPGeJuI/AAAAAAAAA1Y/KxR7rFNrbuo/s1600/translate.png

Dipostingan Saya kali ini Saya akan share, bagaimana Cara Membuat Widget Translate atau Terjemah Yang Keren di Blog. Sebenarnya Google juga telah menyediakan widget translate yang bisa dipakai untuk blog, tapi widget ini, Saya tidak mengambil dari google tapi dari situs lain, seperti yang Kamu lihat di blog Saya.

Untuk caranya ikuti tutorial dibawah ini :

Log in ke Blogger Kamu
Pilih tata letak, lalu klik tambah gadget
Pilih dan klik html/javascript
Lalu masukan kode dibawah ini :


<div id="translate-this"><a style="width:180px;height:18px;display:block;" class="translate-this-button" href="http://www.translatecompany.com/">translate</a></div>

<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis();
</script>
Simpan dan lihat hasilnya
Mudahkan, Selamat Mencoba,,,

Cara Membuat Menu Tabview Accordion Di Blog

Cara Membuat Menu Tabview Accordion Di Blogspot

Widget ini hampir mirip dengan widget tab view atau tabber, salah satu fungsi dari widget accordion menu selain memperingkas tampilan blog, juga dapat memperindah blog, seperti juga fungsi tab view, jadi blog sobat akan kelihatan lebih ringkas dan rapi dan menarik. Anda bisa letakkan menu accordion ini pada sidebar blog atau dimanapun anda suka. Bagi sobat-sobat blogger yang mau mencoba, berikut ini kode scriptnya dan tutorial singkatnya :

Login ke Blogger anda.
Masuk ke Layout, Add A Gadget pilih HTML/Javascript.
Kemudian tambah widget dan masukkan kode di bawah ini ke kolom yg tersedia.
<br /> <style type="text/css"> #accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCFNmYUmYBimrntpgoptHG405NV0bGJV2pPXFierbQsXBNvnEpHUbk6pCKbQjwwolCt8vqIAp0ET2eO9Pudzui4mLgmd8O-5_oFMyBWA69UmLn7tRBfVkU-9m-acUIRx3ZKXQXJ8rEloU/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;} #accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;} #accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;} #accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;} #accordion .content li a:hover {text-decoration:none;color:#000;} #accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKh2dop_cwe3AbTi2aqtW6SgXFVGQS5gS7Qo2SCdbijc4Krml-RPj_3HW-B10XNIgxTXm0oyxZA3Cn1_ziZGbEIMbnRxl3nEgm8Rku35hwpHYCv4sCUgq8ZNKYvSkqB970k5XEZFZ9nBk/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;} </style><br /> <script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script><br /> <script type='text/javascript'> $(function() { $('#accordion .content').hide(); $('#accordion h2:first').addClass('active').next().slideDown('slow'); $('#accordion h2').click(function() { if($(this).next().is(':hidden')) { $('#accordion h2').removeClass('active').next().slideUp('slow'); $(this).toggleClass('active').next().slideDown('slow'); } }); }); </script><br /> <div id="accordion"> <h2> Title 1</h2> <div class="content"> Isi konten 1<br /> </div> <div id="accordion"> <h2> Title 2</h2> <div class="content"> Isi konten 2<br /> </div> <div id="accordion"> <h2> Title 3</h2> <div class="content"> Isi konten 3<br /> </div> <div id="accordion"> <h2> Title 4</h2> <div class="content"> Isi konten 4<br /> </div> <div id="accordion"> <h2> Title 5</h2> <div class="content"> Isi konten 5<br /> </div> </div> </div> </div> </div> </div>
Terakhir simpan dan lihat hasil menu accordion pasti akan lebih menarik dari sebelumnya.

Untuk "Title 1 sampai dengan 5" isi sesuai dengan nama script atau link yang sobat masukkan. Misalnya di title 1 sobat ingin membuat Buku Tamu, maka title 1 di ganti dengan nama Buku Tamu atau c-box, dan di isi konten 1 sobat masukkan kode script dari c-box atau buku tamu tersebut, dan seterusnya untuk title dan isi konten berikutnya terserah sobat mau memasukkan script atau link apa di dalamnya, apakah recent post, coment post atau link iklan semua terserah selera sobat blogger. Untuk warna dan desain background sobat juga bisa mengeditnya sesaui selera sobat.

Menu accordion diatas untuk blog yang mempunyai background warna terang. Bagi sobat yang mempunyai blog warna gelap atau hitam, tinggal diganti kode css-nya. Lebih lengkapnya seperti kode di bawah ini :

<br
 />
<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white} #accordion 
h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoaFRabHmHySsAmRw-GeqMrSgHAb_itPmBsTQIb8QHo0CuWd2LlCCnKLcnvaG_O3AFHNwjAimYm-hKMCITxNcAvgElODhlqTSro21fBg1WGzILjIt2sJ781YxYGiklfwKTox_EMmFmQHo/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right
 center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid 
#323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal
 11px Arial;background:#333;padding:5px 10px} #accordion .content 
li{background-image:url();background-repeat:no-repeat;background-position:left
 center;text-indent:0;border-bottom:1px dotted 
#595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion 
.content li a:hover{text-decoration:none;color:#ff3c00} #accordion 
h2.active{background:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIUM7em9Qj456mSnqV72K86eL40QDRLVZHx1n62oAMFUdDCT9uXUTQA3aJEyfpYPNFc872ZlGXVTBrIq_dVXaAztVrajBavilGjOhjVIjMdL4J0ovkm57N4qkXz1cdDYoJO7wL5gzFJI0/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right
 center;font-weight:700} </style><br />
<script type="text/javascript" 
src="http://yourjavascript.com/121511228073/accordion-menu.js"></script><br
 />
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script><br />
<div id="accordion">
<h2>
Title 1</h2>
<div class="content">
Isi konten 1<br />
</div>
<div id="accordion">
<h2>
Title 2</h2>
<div class="content">
Isi konten 2<br />
</div>
<div id="accordion">
<h2>
Title 3</h2>
<div class="content">
Isi konten 3<br />
</div>
<div id="accordion">
<h2>
Title 4</h2>
<div class="content">
Isi konten 4<br />
</div>
<div id="accordion">
<h2>
Title 5</h2>
<div class="content">
Isi konten 5<br />
</div>
</div>
</div>
</div>
</div>
</div>

semoga bermanfaat. Terima kasih http://www.maskolis.com atas kode scriptnya.