Lunatic`Invades™

Design Vector Art

2012-05-11T09:19:00.013-07:00

I have a small hobby of drawing `I like to do things that smell of art and below are some models that I tried to post pictures on my own blog.

Lunatic.Inv
by azEw in collaboration

Favorites : 11 favorites
Submitted : -
Date Created : 11 May 2012
FileSize : 324 KB
Resolution : 2064x 2070

Designer :
Copyright © azEw Pratama

BADGE STYLE OF LUNATIC

2012-05-07T08:49:00.003-07:00

Lunatic sekarang udah buat BADGE untuk para blogger yang suka berkunjung di blog ini, ga sengaja saat waktu liat-liat di web Vector nemuin Desain badge yang cukup unik dan menurut saya bagus, Sehingga membuatku untuk berinspirasi membuatnya untuk Blog saya sendiri.

Nah buat kalian yang suka berkunjung di blog saya

bisa mendapatkanya secara Free dan mudah untuk di pasang karna dengan code HTML.

Klik link ini untuk mendapatkan BADGE LUNATIC.

Feature Slideshow

2012-05-01T09:33:00.004-07:00

hai sobat blogger apa kalian udah pasang Feature Slideshow di blogger kalian ?
mungkin buat template blogger asli blom ada Slideshow nya`tapi ga papa saya sekarang mau coba kasih tutorial membuat Slideshow dengan Efek Jquery di Blog kalian. terus ukuranya bisa kalian ubah sesuai kemauan kalian gimana ni mau coba pasang.. !! cukup simple ko cara pasangnya ga bikin ribet ..

Buat kalian yang ingin pasang Slideshow ini ikuti langkah di bawah ini:

1. Login / Masuk Blogger

2. Masuk rancangan dan pilih Edit HTML

3. Jangan lupa kasih centang ( Expand Template Widget )

4. Kalian cari code ]]></b:skin> dan simpan code di bawah ini di atas code ]]></b:skin>

/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:250px; width: 600px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DTzuAhGXpjvYt_RaJuKJZ_N1QYT52PfsSMf8lRVZVyojFsaDTjm27TyXwaoKd7agJ5o5e_9zax5HwpO8cz_nRfdVnF4BJZNj-lYiksL0el8fj1oK-JUhTwnRm_I8QFQz1bR04gxm7KRW/s1600/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

5. Cari code </head> dan simpan code di bawah di atas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>

6. Save template kalian .

Untuk membuat Slider bekerja di template kalian dengan maksimal sekarang kalian harus menambahkan kode HTML dibawah ini.

Masuk ke Rancangan dan pilih Tambah Gadget

Pilih Html/JavaScript

Copy Paste kode dibawah ini ke HTML/JavaScript

<div class="container">
<div class="folio_block">
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="http://ganti-dengan-url-blog-anda.com/"><img src="ganti-dengan-url-gambar" alt="" /></a>
<a href="http://ganti-dengan-url-blog-anda.com/"><img src="ganti-dengan-url-gambar" alt="" /></a>
<a href="http://ganti-dengan-url-blog-anda.com/"><img src="ganti-dengan-url-gambar" alt="" /></a>
<a href="http://ganti-dengan-url-blog-anda.com/"><img src="ganti-dengan-url-gambar" alt="" /></a>
<a href="http://ganti-dengan-url-blog-anda.com/"><img src="ganti-dengan-url-gambar" alt="" /></a>

</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>
</div>
</div>
</div>
</div>

Keterangan : Code yang berwarna Merah dan Biru ganti dengan Alamat-Url Kalian dan yang berwarna merah ganti dengan Link Gambar kalian.
Dangan jangan lupa ganti juga code ( # ) dengan Link gambar kalian

Efek Gambar dalam postingan

2012-05-01T09:09:00.001-07:00

Jika gambar di postingan anda tidak menggunakan sebuah efek, tentu saja tampilannya hanya biasa saja. Banyak macam-macam trik untuk mengembangkan tampilan gambar di postingan blog kita. Salah satu caranya adalah membuat gambar berputar saat disentuh cursor. contoh gambar di bawah dengan menggunakan Efek.

Gimana mau coba pasang ?

Ikuti langkah di bawah ini:

1. Login / Masuk Blogger

2. Masuk rancangan dan pilih Edit HTML

3. Jangan lupa kasih centang ( Expand Template Widget )

4. Kalian cari code ]]></b:skin> dan simpan code di bawah ini di atas code ]]></b:skin>

.post img{-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}
.post img:hover{-o-transform: scale(1.2) rotate(360deg) translate(0px);-moz-transform: scale(1.2) rotate(360deg) translate(0px);-webkit-transform: scale(1.2) rotate(360deg) translate(0px);-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}

5. Save template dan lihat hasilnya ..

Gimana simple bukan ga bikin ribet otak .

Efek Galery Dengan BersHadow

2012-05-01T09:00:00.003-07:00

Berbagai macam Efek gambar yang bisa kita tampilkan pada blog sangat banyak. sekarang saya mau memberi satu lagi Efek gambar yang sangat berbeda yaitu BERSHADOW, efek ini bila di sentuh oleh mouse akan membesar bila di sorot oleh scroll nah kalian bisa di lihat tampilan Efek Bershadow di bawah ini..

Efek gambar di atas yang bakalan tampil di blog kalian.

Ada yang berminat buat pasangnya ? yu ikuti tutorial di bawah ini :

1. Login / Masuk Blogger

2. Masuk rancangan dan pilih Edit HTML

3. Jangan lupa kasih centang ( Expand Template Widget )

4. Kalian cari code ]]></b:skin> dan simpan code di bawah ini di atas code ]]></b:skin>

/* 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/AVvXsEjFxnNZcXnFnQdlA8fgwGVq_reqZVOU9zYwS-N372Nccg63_5E8GKbNIduAGFzLVapSVnlQ-IfyH2wfvpGNwX53zmUxLhO3EXgr_GuotzAOSIb66xlMlSQNtVSfr5gvfHXMMBgFuyrTKWTD/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

5. Cari code </head> dan simpan code di bawah ini di atas code </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>

6. Save template .

Sekarang cara memasukan Galery ke dalam tampilan Template Blogger.

1. Pilih rancangan dan klik tambah Gadget

2. Pilih HTML/Javascript

3. Letakan code di bawah ini di dalamnya.

</ul>

4. Ganti semua code yang di kasih warna merah ( # ) dan code ( Galery kalian Picture 1 Link )

5. Save template kalian dan lihat hasilnya.

Sekian tutorial dari saya cara membuat "Efek Galery Dengan BersHadow"

semoga bermanfaat buat kalian.

2012-05-01T08:31:00.000-07:00

Malam ini saya akan coba memberi tutorial cara membuat EFEK PAGE PELL di atas pada blogger Efek Page Peel adalah Efek seperti lipatan kertas yang ada di pojok kanan atas blog, setiap di sorot oleh mouse akan terbuka lebar..

Mungkin kalian masih bingung , Penasaran dan manfaatnya buat apa ??

Dari pada kalian penasaran coba aja pasang di Blog kalian dan ikuti langkah di bawah :

1. Login / Masuk Blogger

2. Masuk rancangan dan pilih Edit HTML

3. Jangan lupa kasih centang ( Expand Template Widget )

4. kemudian cari code <b:skin><![CDATA[/* dan simpan code di bawah ini di atasnya .

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>

5. Cari code ]]></b:skin> dan simpan code di bawah ini di atas code ]]></b:skin>

#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}

6. Lalu cari code <body> dan simpan code di bawah ini di atas code <body>

<div id='pageflip'>
<a href='http://cuap-cuapz.blogspot.com/feeds/posts/default?alt=rss>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

7. Save template dan lihat hasilnya..

Keterangan : ganti code yang sudah saya kasih warna merah dengan Url gambar kalian, sesuaikan dengan keinginan kalian masing-masing.

Beres deh cara membuat EFEK PAGE PELL semoga bermanfaat buat kalian.

Glowing Navigation Menu with jQuery

2012-04-30T05:55:00.006-07:00

Dalam postingan ini saya akan coba share membuat " Glowing Navigation Menu with jQuery for Blogger "
itu adalah suatu menu dengan mengunakan efek Jquery, sekilas kalian pernah berkunjung di suatu Blog yang Menunya seperti di bawah ini :

Gimana keren bukan kalau di simpan di template kalian.

yaudah langsung aja lihat langkah-langkahnya di bawah ini :

1. Login / masuk Blogger

2. Masuk rancangan pilih Edit HTML

3. Jangan lupa kasih centang ( Expand Template Widget )

4. Kemudian cari code ]]></b:skin>

5. Kalau sudah ketemu code di atas simpan code di bawah ini di atas code ]]></b:skin>

.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block}

6. Bila sudah selesai langkah di atas lalu cari code </head> dan copy code di bawah ini di atas code </head>

<script src='http://code.jquery.com/jquery-1.4.4.min.js' type='text/javascript'></script>
<script src='http://monozcore-project.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'></script>
<script src='http://monozcore-project.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script>

7. Save template dan lihat hasilnya ..!!

Sekarang kita masuk langkah akhir.

1. Login / masuk Blogger

2. Masuk Rancangan

3. Klik Tambah Gadget

4. Kemudian pilih HTML/Javascript

5. Simpan code di bawah ini di dalamnya Lau save

<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='#' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='#' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='#' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='#' title='recomended links'>Resource</a></li>
</ul>
</div>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>

Keterangan : code yang berwarna merah ( # ) Url Link tujuan. Silakan diisi sesuaikan yang di butuhkan oleh kalian.

Membuat Menu unik dengan CSS3

2012-04-29T20:18:00.009-07:00

Pagi sahabat Blogger.!!
Lagi bosen ga ada kerjaan dari pada diem mening saya coba posting aja cara Membuat " MENU DENGAN CSS3 " Kemarin saya coba posting membuat menu Dengan sentuhan Jquery, dan hari ini saya akan coba share Membuat menu dengan Efek CSS3.

kalian bisa lihat gambar di bawah ini :

Gimana unik kan apalagi udah di sertai Demonya.

yaudah deh langsung aja ikut langkah-langkahnya di bawah ini :

1. Login / Masuk Blogger

2. Pilih Rancangan Masuk ke Edit HTML

3. Jangan lupa centang ( Expand Template Widget )

4. Cari kode ]]></b:skin> bila sudah ketemu letakan code dibawah ini tepat diatas code ]]></b:skin>

/* LOEFA-SPIN */
p#loefa-spin img{
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

p#loefa-spin img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

/* LOEFA-SPIN 2*/
p#loefa-spin2 img{
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

p#loefa-spin2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

/* LOEFA-SPIN 3*/
p#loefa-spin3 img{
}
p#loefa-spin3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

Info : Di atas kalian bisa melihat code di bawah ini,

pilih salah satu code yang udah di kasih warna dan sesuaikan dengan selera kalian

/* LOEFA-SPIN */

/* LOEFA-SPIN 2*/

/* LOEFA-SPIN 3*/

Langkah ke ( Dua )

1. Masuk Blogger

2. Klik Rancangan / Tambah Gadget

3. Lalu pilih HTML/Javascript

4. Masuk code yang sudah di pilih di dalam elemen HTML/Javascript

Pilih salah satu code di bawah ini dan simpan di HTML/Javascrip

/* LOEFA-SPIN */

<p id='loefa-spin'>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDIBp9PHI-QUZuylnrjfUavXdv0MPGEWDNiU9YnOMmGvc9IiRhnQtiGnWSbjoFXCDWt_MPsjdhSAjul_UmLHWwSQP5n9Q4u5X0jEOecOWhKCugfjSxYEKA3fmi5ux2z0jYsW8MQ555A/s1600/a.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnbCEX9WwYgOp26OMGINYyD3jxp7ZGmtjel4_Q7yJnVZEexrUa2hDB89i9Q9o4wINTgZxal0wrwGFLtwl1Rc19qgfMZJlGn6PLWCPSt1ZeNFlHOND0PpoTtpIp06yigEURAIDxAhflGw/s1600/b.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgPRcZVqPVKn5cYVJ6ojGT0FOgGfH6o7eYRQCQKDqQgK2blT9_qm5HcFVyS34-j6hpOjZ8GieoIYIrEr2tv8kSwIr86CcGIqbPDXCjICmnQnyAgOl0XxNPfSno4d9i4RC0-JNEGLCxVw/s1600/c.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9B01C9JZkWzUm0Ko_JaAGsLUE6J6lJnzaFs6dSum8Let41z_jOMDwUWv7f1AOSwof38EBAlAv0dXAhfPROu6-xiUWSC46zn-ZbsTQCwBV5N1o7pEHPtfQxDxZ3cAVhYxGmksIcrJLfA/s1600/d.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmXsw-8ojrxYnvmK3xnKjl83tsIexzTU-1f4Z35V_8IIl196x5j2_iWFVVqigehkdNPgQDAPRDCAQBaSJcT8Vb-jlhsWHFAjUro66l1Sg9ujrrweJAoOQjYc5ynikuplqVt52TYKeBw/s1600/e.png'/></a>
</p>

/* LOEFA-SPIN 2 */

<p id='loefa-spin2'>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDIBp9PHI-QUZuylnrjfUavXdv0MPGEWDNiU9YnOMmGvc9IiRhnQtiGnWSbjoFXCDWt_MPsjdhSAjul_UmLHWwSQP5n9Q4u5X0jEOecOWhKCugfjSxYEKA3fmi5ux2z0jYsW8MQ555A/s1600/a.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnbCEX9WwYgOp26OMGINYyD3jxp7ZGmtjel4_Q7yJnVZEexrUa2hDB89i9Q9o4wINTgZxal0wrwGFLtwl1Rc19qgfMZJlGn6PLWCPSt1ZeNFlHOND0PpoTtpIp06yigEURAIDxAhflGw/s1600/b.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgPRcZVqPVKn5cYVJ6ojGT0FOgGfH6o7eYRQCQKDqQgK2blT9_qm5HcFVyS34-j6hpOjZ8GieoIYIrEr2tv8kSwIr86CcGIqbPDXCjICmnQnyAgOl0XxNPfSno4d9i4RC0-JNEGLCxVw/s1600/c.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9B01C9JZkWzUm0Ko_JaAGsLUE6J6lJnzaFs6dSum8Let41z_jOMDwUWv7f1AOSwof38EBAlAv0dXAhfPROu6-xiUWSC46zn-ZbsTQCwBV5N1o7pEHPtfQxDxZ3cAVhYxGmksIcrJLfA/s1600/d.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmXsw-8ojrxYnvmK3xnKjl83tsIexzTU-1f4Z35V_8IIl196x5j2_iWFVVqigehkdNPgQDAPRDCAQBaSJcT8Vb-jlhsWHFAjUro66l1Sg9ujrrweJAoOQjYc5ynikuplqVt52TYKeBw/s1600/e.png'/></a>
</p>

/* LOEFA-SPIN 3*/

<p id='loefa-spin3'>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDIBp9PHI-QUZuylnrjfUavXdv0MPGEWDNiU9YnOMmGvc9IiRhnQtiGnWSbjoFXCDWt_MPsjdhSAjul_UmLHWwSQP5n9Q4u5X0jEOecOWhKCugfjSxYEKA3fmi5ux2z0jYsW8MQ555A/s1600/a.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnbCEX9WwYgOp26OMGINYyD3jxp7ZGmtjel4_Q7yJnVZEexrUa2hDB89i9Q9o4wINTgZxal0wrwGFLtwl1Rc19qgfMZJlGn6PLWCPSt1ZeNFlHOND0PpoTtpIp06yigEURAIDxAhflGw/s1600/b.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgPRcZVqPVKn5cYVJ6ojGT0FOgGfH6o7eYRQCQKDqQgK2blT9_qm5HcFVyS34-j6hpOjZ8GieoIYIrEr2tv8kSwIr86CcGIqbPDXCjICmnQnyAgOl0XxNPfSno4d9i4RC0-JNEGLCxVw/s1600/c.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9B01C9JZkWzUm0Ko_JaAGsLUE6J6lJnzaFs6dSum8Let41z_jOMDwUWv7f1AOSwof38EBAlAv0dXAhfPROu6-xiUWSC46zn-ZbsTQCwBV5N1o7pEHPtfQxDxZ3cAVhYxGmksIcrJLfA/s1600/d.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmXsw-8ojrxYnvmK3xnKjl83tsIexzTU-1f4Z35V_8IIl196x5j2_iWFVVqigehkdNPgQDAPRDCAQBaSJcT8Vb-jlhsWHFAjUro66l1Sg9ujrrweJAoOQjYc5ynikuplqVt52TYKeBw/s1600/e.png'/></a>
</p>

5. Save Template dan lihat hasilnya..

Keterangan : Ganti code yang sudah saya kasih warna Merah Seperti ini ( # ) dengan Alamat-Url kalian.

Sweet Menu

2012-04-29T07:12:00.006-07:00

Sekarang saya akan coba posting membuat " Sweet Menu " Dengan Efek Jquery.
nah buat kalian yang penasaran dan ingin coba pasang Menu Jquery ini ikuti langkah-langkahnya

1. Login / Masuk Blogger
2. Pilih Rancangan Masuk ke Edit HTML
3. Jangan lupa centang ( Expand Template Widget )
4. Cari kode <head> bila sudah ketemu letakan kode Jquery dibawah ini tepat diatas code <head>

<script type="text/javascript" src="http://playground.adambecker.info/sweet-menu/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://playground.adambecker.info/sweet-menu/jquery.easing.js"></script>
<script type="text/javascript" src="http://playground.adambecker.info/sweet-menu/jquery.sweet-menu-1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$('#backMenu').sweetMenu({
top: 40,
padding: 8,
iconSize: 48,
easing: 'easeOutBounce',
duration: 500,
icons: [
'http://playground.adambecker.info/sweet-menu/images/back.png'
]
});

$('#exampleMenu').sweetMenu({
top: 200,
padding: 8,
iconSize: 48,
easing: 'easeOutBounce',
duration: 500,
icons: [
'http://playground.adambecker.info/sweet-menu/images/home.png',
'http://playground.adambecker.info/sweet-menu/images/comments.png',
'http://playground.adambecker.info/sweet-menu/images/red_heart.png',
'http://playground.adambecker.info/sweet-menu/images/male_user.png',
'http://playground.adambecker.info/sweet-menu/images/yellow_mail.png',

]
});
});
</script>

<style type="text/css">
body
{
background: #000000 url('images/bg.jpg') top center no-repeat;
}

.sweetMenuAnchor{
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
color: #0071bb;
font-size: 24px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
font-family: arial;
text-decoration: none;
background-color: #888888;
opacity: 0.6;
}

.sweetMenuAnchor span{
display: block;
padding-top: 10px;
}

h1
{
display: block;
text-align: center;
font-size: 48px;
color: #ffffff;
text-shadow: 0px 0px 12px #000000;
font-family: "Trebuchet MS";
}
</style>

5. Terus cari code <body> letakan kode dibawah ini sebelum atau diatas kode <body> .
6. Code di bawah ini bisa juga diletakan di sidebar yaitu dengan menggunakan HTML/JavaScript .

<ul id="backMenu">

</ul>
<ul id="exampleMenu">
<li><a href="http://shofitkj.blogspot.com">Beranda</a></li>
<li><a href="alamat url">Blog</a></li>
<li><a href="alamat url">Favorit</a></li>
<li><a href="alamat url">Tentang saya</a></li>
<li><a href="alamat url">Kontak</a></li>

</ul>

Save Template dan lihat hasilnya..

Menu Lava Lamp Jquery

2012-04-29T06:50:00.010-07:00

Dalam tutorial yang lalu saya mempostingkan bagaimana cara membuat Fancy Menu Drop Down dan Menu Jquery Smoth dropdown. Dalam tutorial kali ini saya akan membuat " Menu Lava Lamp Jquery " yaitu sedikit berbeda dari tutorial yang lalu. Menu lava lamp yang kali ini background nya transparan
contohnya bisa dilihat disini :

Kalau masih penasaran lihat aja Demonya di bawah.

1. Login / Masuk Blogger
2. Pilih Rancangan Masuk ke Edit HTML
3. Jangan lupa centang ( Expand Template Widget )
4. Cari kode <head> bila sudah ketemu letakan kode Jquery dibawah ini tepat diatas code <head>

<link rel="stylesheet" href="https://sites.google.com/site/jayanaktkj/sliding-menu/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.geektantra.com/projects/jquery-sliding-menu/stylesheets/jquery.sliding-menu.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.geektantra.com/projects/jquery-sliding-menu/javascripts/jquery.sliding-menu.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('#HorizontalSlidingMenu .SlidingMenu').slidingMenu();
jQuery('#VerticalSlidingMenu .SlidingMenu').slidingMenu({ initialOpacity: 0.5 });
});
</script>

5. Terus cari code <body> letakan kode dibawah ini sebelum atau diatas kode <body> .
6. Code di bawah ini bisa juga diletakan di sidebar yaitu dengan menggunakan HTML/JavaScript .

<div id="HorizontalSlidingMenu">
<ul class="SlidingMenu Horizontal">
<li><a href="http://shofitkj.blogspot.com">Beranda</a></li>
<li><a href="alamat-url">Album</a></li>
<li><a href="alamat-url">Tips dan Trik</a></li>
<li><a href="alamat-url">Blog</a></li>
<li><a href="alamat-url">RSS Feed</a></li>
</ul>
<div class="ClearFix"></div>
</div>

Keterangan : code diatas bisa kalian Edit dengan Alamat-Url masing masing .
dan terakhir simpan Template dan lihat hasilnya.

Fancy menu drop down

2012-04-29T06:22:00.002-07:00

Huhu`buat kalian yang hoby pasang menu dengan JQUERY saya punya satu lagi yang menurut saya sangat keren dan unik.. klik DEMO untuk melihat contohnya..!!

hahaha.. Gimana lucu bukan ?? yu langsung aja lihat langkah-langkahnya.

1. Login / Masuk Blogger
2. Klik rancangan dan pilih Edit HTML
3. Jangan lupa kasih centang ( Expand Template Widget )
4. Cari kode <head> taruh kode dibawah ini sebelum atau diatas kode <head>

<link rel="stylesheet" href="https://sites.google.com/site/jayanaktkj/fancy-menu/style.css?attredirects=0&d=1" type="text/css" media="screen"/>
<script type="text/javascript" src="https://sites.google.com/site/jayanaktkj/fancy-menu/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/jayanaktkj/fancy-menu/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#navigation > div').hover(
function () {
var $this = $(this);
//$this.find('.images').fadeIn();

$this.find('a.menu').removeClass('menu').addClass('hovered');

$this.find('.images').stop().animate({
'width' :'230px',
'height' :'390px',
'opacity' :'1.0'
},400,'easeOutBack',function(){

$(this).parent().find('div').fadeIn('fast');
});
},
function () {
var $this = $(this);

$this.find('div').fadeOut(500);
//$this.find('.images').hide();
$this.find('a.hovered').removeClass('hovered').addClass('menu');

$this.find('.images').stop().animate({
'width' :'100px',
'height' :'0px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.9'
},600,'easeOutBack');
}
);
});
</script>

5. Terus cari code <body> letakan kode dibawah ini sebelum atau diatas kode <body> .
6. Code di bawah ini bisa juga diletakan di sidebar yaitu dengan menggunakan HTML/JavaScript .

<br clear="all" />

<div id="content">
<div class="total_images" id="navigation">

<div class="eachs" id="link1">

<a href="#" class="menu" style=" width:90px;">Beranda</a>

<img src="http://stashbox.org/1072268/bg.png" alt="" width="140" height="140" class="images"/>

<div>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Facebook</a></li>

<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
</ul>
</div>
</div>

<div class="eachs" id="link4">

<a href="#" class="menu" style=" width:90px;">Web</a>

<img src="http://stashbox.org/1072268/bg.png" alt="" width="140" height="140" class="images"/>

<div>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>

<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
<li><a href="#">Sub Item 9</a></li>
</ul>
</div>
</div>

<div class="eachs" id="link2">

<a href="#" class="menu" style=" width:100px;">Blogger</a>

<img src="http://stashbox.org/1072268/bg.png" alt="" width="160" height="199" class="images"/>

<div>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>

<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
<li><a href="#">Sub Item 9</a></li>
</ul>
</div>
</div>

<div class="eachs" id="link3">

<a href="#" class="menu" style=" width:72px;">CSS</a>

<img src="http://stashbox.org/1072268/bg.png" alt="" width="160" height="199" class="images"/>

<div>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>

<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
<li><a href="#">Sub Item 9</a></li>
</ul>
</div>
</div>

<div class="eachs" id="link5">

<a href="#" class="menu" style=" width:84px;">jQuery</a>

<img src="http://stashbox.org/1072268/bg.png" alt="" width="160" height="199" class="images"/>

<div>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>

<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
<li><a href="#">Sub Item 9</a></li>
</ul>
</div>
</div>

<br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />

</div>
</div>

<br clear="all" />

7. Save Template dan lihat hasilnya..

Keterangan :
Edit Alamat URL sesuaikan dengan kebutuhan kalian.

Sekian tutorial dari saya cara membuat " Fancy Menu Drop Down " semoga bermanfaat

Menu Jquery Smoth dropdown

2012-04-29T06:01:00.002-07:00

Dalam tutorial kali ini saya akan menjelaskan bagaimana cara membuat menu" Jquery Smoth Dropdown ", sebenarnya menu dropdown kali ini ada dua jenis yang saya postingkan kali ini jenis yang pertama kalian bisa melihat disini DEMO nya untuk melihat contohnya bagaimana menarik untuk mencoba , berikut langkah langkahnya.. !!

1. Login ke blogger
2. Masuk rancangan dan pilih Edit HTML
3. Cari kode </head> letakan kode Jquery dibawah ini diatas kode </head> .

<link href='https://sites.google.com/site/jayanaktkj/smoth-jquery/superfish.css' rel='stylesheet' type='text/css'/>
<link href='https://sites.google.com/site/jayanaktkj/smoth-jquery/theme2.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/jayanaktkj/smoth-jquery/jquery-1.3.2.min.cs.js' type='text/javascript'/>
<script src='https://sites.google.com/site/jayanaktkj/smoth-jquery/superfish.js' type='text/javascript'/>
<script type='text/javascript'>
jQueryCS(function() {
jQueryCS("ul.cs-superfish").superfish();
});
</script>

4. Dan langkah terakhir letakan kode dibawah ini diatas kode <body> kalian juga bisa menambahkan kode dibawah ini di Tambah Gadget HTML.

<ul class='cs-superfish sf-menu'>
<li class='current first'>
<a href='http://shofitkj.blogspot.com'>menu item</a>
<ul class='sf-shadow-off'>
<li class='first'><a href='#'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a>
<ul class='sf-shadow-off'>
<li class='first'><a href='#'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li class='last'><a href='#'>inner item</a></li>
</ul>
</li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li class='last'><a href='http://alamat-url'>inner item</a></li>
</ul>
</li>
<li>
<a href='#'>menu</a>
<ul class='sf-shadow-off'>
<li class='first'><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li class='last'><a href='http://alamat-url'>inner item</a></li>
</ul>
</li>
<li>
<a href='#'>menu item asd sdf s</a>
<ul class='sf-shadow-off'>
<li class='first'><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li><a href='http://alamat-url'>inner item</a></li>
<li class='last'><a href='http://alamat-url'>inner item</a></li>
</ul>
</li>
<li class='last'><a href='http://alamat-url'>menu item</a></li>
</ul>

Keterangan :
Edit code yang sudah di kasih warna merah Dengan Alamat Url kalian yang akan di tampilkan.

Selamat mencoba dan semoga berhasil..!!

Pasang Tombol Reply Di Blogger

2012-04-28T22:40:00.004-07:00

Sekarang saya akan coba share` Bagaimana cara buat " Tombol Reply Di Blogger " Reply berfungsi buat membalas kotak komentar pengunjung, dengan tampilan yang sangat unik ..!!
Contoh di bawah ini gambar Reply yang akan tampil.

Nah.. buat kalian yang minat pasang tutorialnya mudah ko.

ikuti langkah_langkah di bawah ini :

1. Login / masuk Blogger

2. Klik Rancangan pilih Edit HTML

3. Jangan lupa kasih centang ( Expand Template Widget )

4. Lalu cari code Script di bawah ini :

<b:include data='comment' name='commentDeleteIcon'/>

5. Lalu copy code di bawah ini di bawah code <b:include data='comment' name='commentDeleteIcon'/>

<a expr:href='"https://www.blogger.com/comment.g?blogID=BLOGID&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidYsAcC6xwGiZl_88kNkmUwRxurdGuqi_DSIryFRp_G9mTvPtpNTVW6zhLBeYOK9TCGiwPf7ecuK0_PwT_eU8UVDzjUK6FWDImxzmRCjuhZ5Dzu2VfHPsJFjAv6de_XtG0IMA7P-XSNVU/s1600/reply.png' title='Balas Komentar/Reply'/></a>

Keterangan : Ganti tulisa BLOG ID yang di atas dengan angka BLOG ID kalian dan code di bawahnya adalah alamat Icon kalian ubah sesuai selera kalian.

INFO : Untuk mengetahui BLOG ID Kalian lihat gambar di bawah yang di kasih lingkaran,

Setelah Anda masuk ke akun Blogger, Pilih Rancangan kemudian lihat di web address browser .

Nah di situ kalian dapat melihat angka dengan 19 digit angka itulah yang disebut BLOG ID. kalian tinggal copy Angka tersebut dan copy kan pada Code BLOG ID yang sudah saya kasih warna Biru.

Sekian tutorial dari saya.

Selamat mencoba dan semoga bermanfaat.

Membuat tombol Like di setiap postingan..

2012-04-27T09:14:00.004-07:00

Buat kalian yang ingin postinganya atau artikel-artikelnya banyak di sukai banyak orang pasang aja tombol
Like Facebook di dalam postingan kalian. nah di sini saya akan memberi tutoril cara memasang tombol Like Facebook di setiap postingan langkah-langkah sangat mudah ko..

Screenshot yang akan tampil di postingan

1. Login ke akun Blogger dan buka menu Layout / Rancangan > Edit HTML
2. Centang "Expand Widget Templates"
3. Cari kode <data:post.body/> ( untuk memudahkan tekan ctrl+f )
4. Kemudian copy kode di bawah ini dan paste di atas kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&
font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:410px; height:40px;'/> </b:if>

5. Save template dan lihat hasilnya.

Selamat mencoba..

ID Aplikasi Facebook

2012-04-27T05:56:00.007-07:00

Hai semua! Pada postingan sekarang, kita akan belajar membuat ID Aplikasi Facebook untuk blog kita. Mungkin ada yang yang mau bertanya, untuk apa sih ID Aplikasi tersebuat di blog kita?

ID aplikasi ini berfungsi untuk menghubungkan blog ke facebook apabila kita menggunakan fitur-fitur atau aplikasi yang ada di Facebook Seperti yang sudah saya beberkan di postingan membuat Facebook Comments di blog. Itu adalah salah satu contoh kegunaan ID APLIKASI-nya. Selain itu, ID Aplikasi Facebook ini juga berguna bagi kamu yang ingin membuat blog yang fitur-fiturnya kebanyakan dari facebook.

Baiklah, langsung saja ya kita buat ID Aplikasi-nya.

Langkah awal pemasangan.

Buat kalian yang belom mempunyai Ipp ID Facebook silahkan ikuti langkah di bawah ini :
1. Masuk Akun Facebook kalian
2. kunjungi Developper untuk mendapatkan
3. Klik "Create New App"
4. Nanti ada tampilan seperti gambar ini :

5. Isikan App Display Name dengan Judul Blog mu, dan App Namespace kosongkan saja.

6. Beri centang di I agree to the Facebook Platform Policies dan tekan "Continue".
7. Masukkan kode yang ada di kolom tersebut dan tekan Submit.

8. Dan bila kode yang kalian masukkan benar, akan muncul tampilan seperti ini.

9. Turunkan scrool pada browser kamu, nanti kan terlihat tampilan seperti ini.

10. Isikan pada kolom "Website", dan "App on Facebook (Canvas URL)" dengan alamat blog kamu.

11. Klik "Save Change"

Akhirnya selesai juga..

App ID Aplikasi bisa dilihat di Step nomor 8 yang udah saya lingkari.

Avatar Otomatis Pada Komentar Anonymous dan Name/url

2012-04-26T13:31:00.001-07:00

Ada template default blogspot avatar pada komentar hanya ada jika kita berkomentar login sebagai account google dan sebagainya, jika kita berkomentar anonymous atau name/url maka avatar atau gambar pada komentar tidak akan muncul alias kosong. Sebagian besar pengunjung blog apabila menulis komentar seringkali menggunakan name/url dengan tujuan agar mendapat backlink atau kunjungan balik, namun kekurangannya adalah tampilan komentar kesannya tidak bernilai seni. Nah berikut ini adalah Cara Pasang Avatar Otomatis Pada Komentar Anonymous dan Name/url :

Pastikan Tampilkan gambar profil dalam komentar diaktifkan, cek di login blogger > setelan > komentar > Tampilkan gambar profil dalam komentar? Yes.

1.Login Blogger
2. Rancangan pilih Edit HTML
3. Jangan Lupa centang ( Expand Template Widget )
4. Lalu cari code yang seperti ini <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
5. Jika kode <dl expr:class='data:post.avatarIndentClass' id='comments-block'> tidak ada, maka cari kode <dl id='comments-block'> ganti dengan kode di bawah ini :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

6. Kemudian cari <a expr:name='data:comment.anchorName'/> ganti dengan kode di bawah ini :

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

7. Selanjutnya cari kode ]]></b:skin> letakkan kode di bawah ini diatas kode ]]></b:skin>

#comments-block .avatar-image-container img {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFqxNEfk8wy90Mtgn54AtQPagA-GqYRlA3nC7gdyVlagSHA428QExLHUXWif6Nirv6tbGLcb1KbIMLOCTEIjDYxb8WHRWlAqVYIx3TVU-qzfilqcDtNrsj7UCv2DNtQZuBhFie_ZYqpLvJ/) no-repeat left top;
width:32px;
height:32px;

Save Template dan lihat Hasilnya..!!
Catatan : Yang saya udah kasih tanda Merah itu adalah Icon Gambar yang bisa kalian sesuaikan dengan keinginan kalian.

SOCIAL WIDGET BERKEDIP

2012-04-25T23:14:00.000-07:00

Saya ga bosen`terus ngasih postingan buat kalian untuk Widget Sosial..

sekarang saya mau memberi satu widget yang sangat unik dan simple buat di simpan di template kalian, widget sosial ini berkedip saat kursor mengarah ke kotak share..!!

Lumayan lah buat mempercantik blog kalian dengan tampilan serba keren..

Contoh Social di bawah yang akan saya kasih tutorialnya.

Langsung aja liat cara pemasanganya :

1. Login / masuk blogger kalian

2. Rancangan pilih Edit HTML

3. Jangan lupa kasih centang ( Expand Widget Template )

4. Lalu cari code </head> dan simpan code di bawah ini di atas code </head>

<style type="text/css">
/* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; }
ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.way2blogging-social li.way2blogging-facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtha-CtajkHJHMNsT7raav2wmtVf0-8eWDwM3CA7zrbCAbd9zdkH8O4yXq3LFUtDgRZEbt1E5Q5AjenaWaUNYOTnhyMSKnizAXUTC7AGMfOKCFtlNs0nX5HMsYQ7BbCW23zix6bIIicedq/s1600/way2blogging-facebook.png"); }
ul.way2blogging-social li.way2blogging-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUMroC6DC9GYq4eL3iVJJxsL3ct4PZIgElbj7EAms0tIZHfsciBlOdbmrpnaPAR0dcQ1aCi_SjuJGCEnxqDj4RiVmFnBe0g8N4443MAvScUJuxGnC6cZUq91_gJTCXKi_hoAMwUg-u_jP8/s1600/way2blogging-twitter.png"); }
ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyovmsRYJBphFcASp6IJRLHTndH_5UySGfTZ_EjPDXbpX1E3f0K-ep7Xldep6Gda-51AEy3izvdrm6XvWyaihtuAneSCKjYrplE6pgrBYLb8Bs6Erc5MJwdXBrsQVfWEUKqpOPHX038sfK/s1600/way2blogging-googlebuzz.png"); }
ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKRLgovCkIYJeOu-J6sgZk3dM22qRvz_rfFiJGH5rRCW1cs-7dPNFWHdZPPK3hBYY_rj27T-P-UduloGe6RfKYEdFC4H11wR5MzRYDDbDmtQii1usLsBFtE_z-xuCfh5vHykYqK-F7B8Qo/s1600/way2blogging-stumbleupon.png"); }
ul.way2blogging-social li.way2blogging-digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic4Z_22tniyvaTcvI2hBjQSsDvuNEGn1MxftXdcj9oK3s5jsMzDxHMYClHYrfmFlbvDzV9JVVp_YqIVWJmz9jy3KSyQ_NyyPRz5toOFj-06vGXRVY4H2tR23Rt3c7fBfqtAZiQIF2mt4jo/s1600/way2blogging-digg.png"); }
ul.way2blogging-social li.way2blogging-delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCzapw3vt2L63lj4JyuTgXgYWkWHI9JRPiUH7E081iAwxooTRBZODOY2fmR8ZHQfYpR2yZKn6kRggkW0XBjip_7Vlf6AIaaf0r10XQAckc13iuRjJ2N_PP1tkgh1tqv8if0buRJC4Sm8kp/s1600/way2blogging-delicious.png"); }
ul.way2blogging-social li.way2blogging-linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXoEVk1F8JfbiY8kPJ6aHPnspZ4Yn1Mknni5ln9Oddc6VS9GgOvMOG2vOxmoAEtUtivuwEbgjGlJdxVm7A3gNK_ku0ejFPK50rk2qjd1iygPXt_1iVZNI0iOkxzwZxgeia3WPMtTEhMNqE/s1600/way2blogging-linkedin.png"); }
ul.way2blogging-social li.way2blogging-reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaQ-sNFIcwziXq8v5gmhOssEf6Qu_MNkqJRdvUvIkY81ZkpfeE9S8G_n68qsAdor4yHKZ5EZu7eHNspmzaaPi2iALIJ4eZCFNOerfzPjY9hf-uSVJiwIMqMYo8RrTf9_s_p72XgIkZNHsY/s1600/way2blogging-reddit.png"); }
ul.way2blogging-social li.way2blogging-technorati { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwYPg7kRfru_JRrwHgWBNyPGWz5KUrzm5N-dRGRc6jeUsRcMIqSryJ_taIK217al0AI5dHa9uY4yfM9dNRCZbJUdLDikeJ2TRYKcJTBzsQ3etlKLY3CWuppsFd2_fB_4pOQ8-GXdS3iIoz/s1600/way2blogging-technorati.png"); }
#way2blogging-cssanime:hover li { opacity:0.2; }
#way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#way2blogging-cssanime li:hover { opacity:1; }
#way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; }
/* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
</style>

5. kalau sudah beres tahan di atas lalu kita cari code yang seperti ini <data:post.body/>

6. Bila sudah ketemu simpan code di bawah ini di bawah code <data:post.body/>

7. Save template dan lihat hasilnya.

Sekian tutorial dari saya.

semoga bermanfaat buat kalian.

Floating Facebook Like Box

2012-04-25T19:53:00.003-07:00

Floating Facebook Like Box atau bisa juga diartikan Kotak Suka Facebook yang Melayang (kedengarannya cukup aneh memang) . . kali ini saya ingin mencoba memberikan sedikit tutorial tentang Trik Cara Membuat Floating Facebook Like Box di Blog, seperti yang dahulu pernah terlihat di sebelah kanan pada blog milik Lunatic.art.com. ^_^

Dengan menggunakan Floating Facebook Like Box pada Blog tentu saja akan semakin menghemat ruang pada blog kita selain itu blog kita pastinya juga akan terlihat lebih rapi dengan fitur like box facebook yang memang sengaja kita sembunyikan,, Untuk anda yang ingin mempraktekkannya langsung saja, ini dia cara pembuatan Floating Facebook Like Box di Blog.

1. Login ke Blogger
2. Klik Dasbor>Pilih Rancangan>Klik Edit HTML
3. Kemudian Cari kode </head>
4. Simpa code di bawah ini di atas code </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>

Catatan : Abaikan langkah yang di atas bila Template kalian sudah trinstall Jquery Plugin.

Cara Menambahkan Kode HTML pada Widget

1. Klik Dasbor>Pilih Rancangan>Klik Tambah Gadget>HTML/JavaScript
2. Copy kode dibawah ini

<script type="text/javascript">//</script><style type="text/css">.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0E5U7E0cGw-ZKupwpXU0S_yA5l_WCvN36n8-RjNbkb93myVWZfyTL0i0_alcDMq1aALp4jYXtXLudk4KCXqGLqRHRUI_X7M-9-JWcNWlOlsTBl6bVYe1ERqdMsqNDWbGxKhHY3VugU7o/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}.floatinglikebox div{border:none;position:relative;display:block;}.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.floatinglikebox span a{color: #808080;text-decoration:none;}.floatinglikebox span a:hover{text-decoration:underline;}</style><br /><div class="floatinglikebox"><div><iframe allowtransparency="true" src="//www.facebook.com/plugins/likebox.php?href= http://www.facebook.com/pages/Lunatic-Invades/300710303338569 &width=251&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=159468740772399" frameborder="0" scrolling="no" style="background: #fff; border: none; height: 270px; overflow: hidden; width: 251px;"></iframe><a href="http://blog.kangismet.net/2011/11/membuat-floating-facebook-like-box-di.html" target="_blank">+Get This!</a></div></div>

3. Ganti tulisan yang berwarna merah dengan Url Facebook Fan Page kalian.
4. Save dan lihat hasilnya.

BADGE LUNATIC STYLE

2012-04-24T21:05:00.026-07:00

Cukup lama membuat konsep akhirnya beres pembuatan Badge dan saya kasih Tema" BADGE STYLE OF LUNATIC " Buat kalian yang minat pasang badge ini tinggal copy Java/script di bawahnya. dan sesuaikan ukuran Template kalian buat meyimpan badge ini.

Copy desain badge yang menurut selera kalian.

BAGDE STYLE 1

<a href="http://lunatic-84art.blogspot.com/" target="_blank" title="Lunatic Invades"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2OVVECBFk5ziCueljVH-OhuZhgWU37bfzStJa56Bfhh0IjQoDeX_Xz1QCh77mRXwj3tJYB5tEXF0moCSBUCVWpe3O_9KVXDJw5BgKZsTUe2BrfShcpuqVvoYPvlkwtVyZpVq3hvZMRBNv/s1600/Badge+1.png" alt="Lunatic Invades" /></a>

BADGE STYLE 2

<a href="http://lunatic-84art.blogspot.com/" target="_blank" title="Lunatic Invades"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKGIEGkKrp6J57Xh3TpX_Ki7HmtNAOEwcDDikdm-443zgkgXTU0vM8qrB8rW5S6fatvVghtoNpABe0CjNlGOBLiiOqEZCWArZd5Mf9IdSm1kRxofwNQreprGvynBNxQdRFRwrWgvGQAgXn/s200/BADGE+2.png" alt="Lunatic Invades" /></a>

BADGE STYLE 3

<a href="http://lunatic-84art.blogspot.com/" target="_blank" title="Lunatic Invades"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihW3MKpiQGyg44fPHr5bzAjhmopO4R3gvKdDxplFNeTT-s8JhBc1SgyTC3ndHaHvp7-eaV30ncTUISbse6wWGfJIWB2Kg6nLgZMiJ55PuhZiV5fRUdGHR4ejEbPIxvMzuodGnPJEZqt_mY/s320/BADGE+3.png" alt=" Lunatic Invades " /></a>

BAGDE STYLE 4

<a href="http://lunatic-84art.blogspot.com/" target="_blank" title=" Lunatic Invades "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha_0CAgJkf6YkBve7nhxtyM27yBX62j5RRkQhR5cJqttHclsSYosayHjkGO9L09r5E-4b6CleYV5eL4VcWM0loGtqe8GX38X0gDjlKgpJTOAqIPV0wD5dGV0RR4MGOe5lV940f4Jvx5rP8/s200/BADGE+4.png" alt=" Lunatic Invades " /></a>

BAGDE STYLE 5

<a href="http://lunatic-84art.blogspot.com/" target="_blank" title=" Lunatic Invades "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8U7cLBNRXtYSohU2_GthkXmhGTGPJoT6osXQPE0BHe3eE3N5aoFgC2q2tTpQlFvfozaDN4cG-Yig-_VT-rVgsIvptzkEChDTmjsaPpMvLTayv6U8_PSvPqtzGrcKEMQ5jAtgmzb2rFMHx/s200/BADGE.png" alt=" Lunatic Invades " /></a>

Cara pemasangan :
1. Login / Masuk blogger kalian.
2. Pilih rancangan - Eleman Laman
3. klik Tambah Gadget
4. Pilih HTML/Javascript
5. masukan code badge yang udah kalian pilih lalu simpan

Dan lihat hasinya..
Terima kasih`buat kalian yang udah pasang badge ini, semoga bermanfaat buat kalian.

EFEK ZOOM PADA GAMBAR

2012-04-22T09:13:00.002-07:00

Hai`sobat blogger sekarang saya akan coba posting cara membuat " EFEK ZOOM PADA GAMBAR " mungkin kalian ada yang udah tau tentang Artikel ini. tapi tak apalah saya buat yang belom tau aja.hehe

Efek zoom adalah salah satu widget untuk memperbesar ukuran gambar dari aslinya, dan akan bereaksi saat kursor mengarah kesalah satu gambar yang ada, widget ini berfungsi hanya untuk pemakai Blogger buat WordPress saya belom tau caranya.hoho
langsung aja lihat langkah-langkah cara pasang Efek Zoom.

1. Login ke blogger kalian
2. Lalu pilih Tata Letak/Rancangan lalu klik Edit HTML
3. Kasih centang ( Expand Template Widget )
4. Cari kode ]]></b:skin> gunakan ( Ctrl + F ) untuk lebih mudah mencarinya.
5. Jika kalian sudah menemukanya simpan code CSS di bawah ini di atas code ]]></b:skin>

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }

6. Simpan template dan lihat hasinya

Selamat mencoba dan semoga behasil
Maaf saya tidak pasang contoh gambar atau demo nya, karna saya tidak pasang code CSS ini..
tapi buat kalian yang udah pasang pasti udah tau hasilnya.

Cara Memasang Kotak Profil di Bawah Postingan

2012-04-21T07:30:00.003-07:00

Cara Memasang KOTAK PROFIL di Bawah Postingan - Pada panduan blogger ini saya akan menunjukan cara menambahkan kotak profil / about the author yang tampil di bawah postingan Anda. Memasang widget ini hanyalah pelengkap saja atau sebagai aksesoris tambahan blog agar semakin baik. Pengunjung juga akan lebih kenal dengan nama, moto, deskripsi profil Anda yang muncul di bawah postingan Anda. Tampilan widget ini cukup sederhana dengan text dan gambar berukuran kecil.

Cara Memasang Kotak Profil di Bawah Postingan

1. Login ke Blogger Dashboard -Template - Edit HTML

2. Centang Expand Template Widget

3. Gunakan ( ctrl-f ) dan letakan css di bawah ini di atas code ]]></b:skin>

.author-box {
background: #fff;
margin: 10px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 2px;
border: 1px solid #E6E6E6;
}

Catatan : Untuk kode berwarna Merah adalah warna latar belakang, warna border. Silahkan sesuaikan warna tersebut agar serasi dengan tampilan blog. Agar lebih mudah cari kode warna

4. Kemudian letakan kode berikut setelah kode <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-80 photo' height='74' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfoMr0ve2lbrUrM_AGF3mCWAQtQL5T5Af9uAPqQY3zVk5xJkG1hF30zwyWshaUGpeBu50k3Kg8EI91EAgjdxsljyohZb3d66KCWYVG8bsvVopCiCR4znAbpHx5mF91pCQRMcSqTwRM8GlG/s320/A.png' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify; font-family: VERDANA; color: # ;'>thank you for you who have come on my blogger, I hope my post is already saved on my blog useful for you.<br/>
</div>
</p>
</div>
</b:if>

5. Tahap akhir, Simpan Template.

Demikianlah Tutorial blogger tentang " Cara Memasang Kotak Profil di Bawah Postingan ". Semoga tutorial ini bermanfaat dan beguna bagi kalian.

Terima kasih selamat mencoba.

VECTOR DESIGN ART

2012-04-20T16:26:00.024-07:00

Created : azEw Pratama

Date Created : 27-04-2012

Size : 668 KB

For you who want to take a picture is expected not to copy,

we are here to provide Link Download..

Cara memasang widget share multi fungsi dan multi guna pada blog

2012-04-20T11:23:00.001-07:00

Saya tidak bosan untuk Posting widget Share Social yang penampilanya sangat keren dan lucu, saya mendapatkan satu widget " SHARE MULTI FUNGSI " dan Bukankah itu sangan menarik jika di pasang di blog kalian. nah contoh Screenshot di bawah ini yang akan tamipl di Blog kalian :

widget share multi fungsi.

Nah yang minat pasang widget ini, ikuti langkah-langkah di bawah ini :

Seperti biasa.

1. Login / Masuk Blogger kalian

2. Pilih rancangan dan klik Edit HTML

3. Jangan lupa kasih centang ( Expand Template Widet )
4. Kalian cari code seperti ini </head> dan simpan code di bawah ini di atas code </head>

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% "Tahoma",Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

5. Bila sudah langkah di atas Save template.

Langkah selanjutnya

1. Masuk Blogger
2. Klik Rancangan / Tambah Gadget
3. Lalu pilih HTML/Javascript
4. Masuk code di bawah di dalam elemen HTML/Javascript

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = "";}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOEn6WuP879iNOXTp-DJOTHXwvleHpaW3buy_1mSsMIwSYg-Uugl0rSezN8r2tphHyYxOifQid9PxWESVxu3K9y5gPlNrgQV8A9M0GL2mbv7g65LPLV60OOhDmnKZyB2Ok-ehgmxqcNxSf/" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ2qvDESyhbaMJHg8jXbVAT2FIQ-s9wpQ6YvzTF_-guhvwPohCzAWcqSOFg8x3_Rvjm5rxmjYNTZjZQHkFv3cpdzLq4LkuOZUU2QW8KW7CoXLunsg0Vu4iA2yzs9yG_got6ZdefaKqohpb/" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaH9IwNz0o6aww_a4to11xXzqDGdKRKsEsba3ibmuMfiHRTo0Pw2MCmwMRjw4DH2cZlUuiGSTWCVCayAV_S93U2P1DJiMpIfsidX80H-zeSyDFOGaH81BZgrfzTFJmzxWpCwz2lE-MMual/" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO4n-BVfMUjdeDraepC6aYoy79L-cXhGAbHtSxgrOVpdsWHlooJIdwNTg1oGB_gFQeNd_abX1Uaj4hmXhZBSick108_h-UVGKzjZdyLkoHMkgFDuohKbwDlsffEXU8FfsJ9Pe55N4QL5Wk/" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://tutorialseo-blog.blogspot.com/" target="_blank">Tutorial Blogger</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1cni-KCFOrxauwOrlpUKH_QskpweBGf_o_kK9V2RkQsFm3tyHMwxaiaeRZ4x70W1s-nbYx2e4BtAPVIYqJVgr0Y_vcK22POtgKDxTujTpbm4acQvHmRWZnfnOqfFN2HIxP4l9JEy6kOY/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihv2rbK7fjeTx014uv1zEujl8Q825sZ9z-56QV9Mo1GHorZPbXaQQfqkZc5oAzS4up1gSzcRs_NqUxCiY1Pp8lZOclNRz6SU9RPg0wo6dZWGJVqBfciYPprXvdfsYbyO14u2UPvJrXPe8/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU5xtywN4u1GMhSuyNxpIi1HRBYTtUgRd63WDL-rKUv2VoBOdKxYkDX6UyBnZ9SpnBVqqe3cZIjIUphhjoB4Mqg20GenURWv2AanOSqNnIy4EPaX7rsxbXure7NPtfyhzI4AIe-U8sFW8/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijKFyR4vI_sAqk50ORD_BHFbOT6Wcu61OzddvfqnyL5zu4dx8FnQDD7ESVBpYMCof5BsdRkVPB8WbDh_CNAtgJg3dNpLp2yE3325eIaCzYdhyRW2PTAvb7TiehMciw5MxVXJAjI62ndEI/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Gl4SCj0j9I8vC48wYZ06R3GZlLKAeT-PqyUNSJeOMM2HzXUfK2LfAJSfS3Aa9_RDq4uNGk-rc-cDtbkHxag710VGDeiakY1jz5IIXcktNffnPW9ZwZWaQkYLusw-I-87Dj136ytemmg/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Zt8MIcUoLINvd9wMnsCRDo65S2bdtLCuOLeLfBtKwX4YAC83GkzhSA6zdSPjbTn-MFrhzFYKRxG0Zs21XfoYc6fOK8hcfkmN8jiiqf7EGErUYG4grvoK0sExSzjIP-OIVXFQJshak_M/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWIiS8gZY8kt2aG9HhkXnCT1bFpW5rkN_lZM0mkFrOmldofWdBKFE0TeRvQt4kzbldCnN9mDgdb_zpuMl6WLjlyRUcuw2Pupn5VMBJywc8NA2GqH5le786hfUqrYYvmLpZ67aUeefp9Lc/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div></div>

Simpan Template dan lihat Hasilnya..
Selamat mencoba dan semoga sukses

Keterangan : code di atas yang telah saya kasih tanda warna tebal ganti dengan alamat link SOSIAL kalian.
Buat kalian yang belum paham atau menemui kegagal harap beri komentar di bawah posting ini.

MEMBUAT AUTHOR BOX DI BAWAH POSTINGAN

2012-04-20T09:21:00.003-07:00

Cara memasang atau membuat "Author Box Dibawah Postingan" sangat mudah, author box atau kotak admin/penulis blog bisa juga ditampilkan dibawah postingan, bagi sobat semua yang ingin menambahkan foto profilenya pada blog tanpa harus menambah gadget profile ini adalah salah satu caranya, nah bagaimana cara membuat author box dibawah postingan blogspot? ikuti tutorial dibawah ini!

1. Login ke blogger
2. Klik Edit Html , Beri Centang Pada ( Expand Template Widget )
3. Letakkan kode dibawah ini diatas kode ]]></b:skin>

.author-box {
background: #f0f0f0;
margin: 20px 0 40px 0;
padding: 10px;
overflow: auto;
color:#888;
font-family:verdana, sans-serif;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box a{
color:#666;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
}

4. Cari kode <div class='post-footer-line post-footer-line-1'> Dan letakkan kode berikut dibawahnya.

<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='avatar' class='avatar avatar-70 photo' height='70' src='URL avatar/photo kita' width='70'/><b>About Author</b><br/>
Sekilas tentang diri kita<br/></p>
</div>
</b:if>

5. Save template dan lihat hasilnya.

Catatat : Code yang diberi warna Biru dan Hijau adalah Foto kalian dan Tentang penulis, Edit sesuai keinginan kalian.

Nah demikian cara Membuat AUTHOR BOX DI BAWAH POSTINGAN , semoga bermanfaat.

WIDGET SLIDE DENGAN JQUERY DAN CSS3

2012-04-20T02:03:00.001-07:00

Haduh`nambah lgi nii satu widget yang mungkin bermanfaat buat kalian, Membuat " WIDGET SLIDE DENGAN JQUERY DAN CSS3 " bentuknya sederhana dan efektif untuk sekedar meringkas bagian-bagian yang menurut anda sangat panjang atau terlalu lebar, widget ini bisa juga untuk meletakan foto, video, daftar teman dll. ga berat buat di pasang di Blog kalian ..!!
nah coba liat Screenshot di bawah ini :

WIDGET SLIDE DENGAN JQUERY DAN CSS3

udah lihat gambar di atas sekarang buat kalian yang mau pasang Widget ini di blogger kalian gampang ko ikuti langkah-langkah di bawah ini :

1. Login Blogger

2. Masuk rancanagan pilih tambah Gadget

3. Pilih HTML/Javascript

4. Masukan code di bawah di dalamnya.

<style type="text/css">
/*
Copyright Juli 2011 :: Taufik Nurrohman
Visit: http://hompimpaalaihumgambreng.blogspot.com
*/
#paneltovik {display:block;}
#panel {background-color:#96BC43;border:2px solid #a7cc54;border-width:2px 2px 0 2px;height:250px;overflow:auto;margin:0;padding:10px;color:#111;
font:normal 12px Times,Serif;-webkit-box-shadow:inset 0 0 7px #222;-moz-box-shadow:inset 0 0 7px #222;box-shadow:inset 0 0 7px #222;display:none;}
.tombolpanel {position:relative;cursor:pointer;text-shadow:1px 1px 2px #000;padding:7px 15px;background-color:#333;border-top:3px solid #a7cc54;color:#e5e5e5;text-align:center;font:bold 14px Times,Sans-Serif;font-style:italic;-webkit-box-shadow:0 -1px 2px #222;-moz-box-shadow:0 -1px 2px #222;box-shadow:0 -1px 2px #222;-webkit-border-radius:0 0 14px 14px;-moz-border-radius:0 0 14px 14px;border-radius:0 0 14px 14px;}
.tombolpanel:hover {color:#ccc;}
.tombolpanel:after {content:'';position:absolute;top:100%;margin-top:-10px;left:5%;width:0;height:0px;display:block;border-width:20px;border-style:solid;border-color:#333 #333 transparent #333;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.tombolpanel').click(function() {
$('#panel').slideToggle('slow');
$('.tombolpanel span.in').toggle();
});
});
</script>
<div id="paneltovik">
<div id="panel">
... KONTEN DI SINI ...
</div>
<div class="tombolpanel">
<span class="in">Buka Panel</span>
<span class="in" style="display:none;">Tutup Panel</span>
</div>
</div>

Save template dan lihat hasilnya..!!

Selamat mencoba

Keterangan : code yang sudah di beri warna Merah tebal bisa kalian ganti sesuai keinginan kalian.

Sekian dari saya tutorial cara memasang WIDGET SLIDE DENGAN JQUERY DAN CSS3.