CORAT CORET BLOGGER: Cara Memasang Lagu Otomatis Di Blog

CORAT CORET BLOGGER: Cara Memasang Lagu Otomatis Di Blog: Banyak sekali blog-blog yang ketika dibuka akan terdengar alunan musik otomatis namun player musiknya tidak kelihatan dan lagu tersebut ti...

Membuat slide show

Slide show dengan Jquery ini, tampilan nya ringan, jadi tidak akan memperberat tampilan blog sahabat.
Ocreey Begini cara membuat nya, Cekidot Coy

• Buka Akun BLog
• Klik tab Design / Pengaturan
• Klik tab Edit HTML
• Cari Kode Berikut </head>
• Letakkan kode dibawah ini sebelum </head>

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

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var currentPosition=0;var slideWidth=560;var slides=$('.slide');var numberOfSlides=slides.length;$('#slidesContainer').css('overflow','hidden');slides.wrapAll('<div id="slideInner"></div>').css({'float':'left','width':slideWidth});$('#slideInner').css('width',slideWidth*numberOfSlides);$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');manageControls(currentPosition);$('.control').bind('click',function(){currentPosition=($(this).attr('id')=='rightControl')?currentPosition+1:currentPosition-1;manageControls(currentPosition);$('#slideInner').animate({'marginLeft':slideWidth*(-currentPosition)})});function manageControls(position){if(position==0){$('#leftControl').hide()}else{$('#leftControl').show()}if(position==numberOfSlides-1){$('#rightControl').hide()}else{$('#rightControl').show()}}
});
//]]>

</script>

•   Jika Sudah, Kalian cari lagi kode ini ]]></b:skin>
•  Dan letakan kode dibawah sebelum kode ]]></b:skin>

/*
Slideshow style rules.
*/
#contentSlide {
border: 1px solid #000;
background:#212421;
height:263px;
padding:10px 0;
}
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlTPJpS_axI/AAAAAAAABYA/JS60KVWJ9GQ/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KH99FgI/AAAAAAAABZM/e9gXvHjzltU/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KMpFpxI/AAAAAAAABZQ/a207Rx0XuiU/control_right.jpg) no-repeat 0 0;
}

.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#212421;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
padding: 1px;
background-color: #212421;
border: 1px solid #999;
}

•   Save.
•  Ganti alamat URL Gambar dengan yang kalian miliki.

Semoga bermanfaat. Maturnuwun

Media social share blogger dengan Tooltip

Percantik Tampilan media subcription Box social share anda dengan menambahkan tooltip yang menarik dengan tampilan yang lebih menarik dan Elegan. 

Untuk membuat nya, Ikuti Langkah berikut Ini :

• Masuk ke akun Blogger anda
• Rancangan/Design
• Kemudian Klik Edit HTML
• Simpan Terlebih dahulu template anda
• Cari Kode Berikut ]]></b:skin>
• Letakan Kode dibawah ini tepat diatasnya.

#dhtmltooltip {
background-color: #484848;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihkxUEwyK8sTOmmgy2EJGYqXeKt6V_5ihrsMv2Uwr6wYlEe8nl5PoDP9QWARbxA26dTx2uUHSy3v9nE9f-tIzwJEP9Yh7vQxvyaVAw2HIJvl-2NhO4PKY_JVfmtnYRTcm6kGfXeU_Z1kc/s800/mouse-hover-bg.png");
background-repeat: repeat-x;
border: 1px solid #AAAAAA;
color: #F2F2F2;
font-size: 12px;
font-weight: bold;
height: 27px;
line-height: 20px;
padding: 10px 20px;
position: absolute;
text-align: center;
z-index: 100;
visibility:hidden;
}
#dhtmlpointer{
position: absolute;
z-index: 101;
visibility:hidden;
}
.social-subscribe ul {
list-style: none outside none;
}
.social-subscribe li {
float: left;
}
.social-subscribe li a.rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYPu-_y_oY7KWNej7Kt7f64vcXud3SCqBwuSrRoIaARcUSrsmxh14rsaStfQhJj_fHhwuU-woqdEHoMLs83sRXVJjbqv38llrQEs3_4XqZ5Kkjz0bejCsV23eYckgr0LC0zxevv7r0_OQ/s800/icon-rss.gif") no-repeat scroll 0 0 transparent;
padding: 0 2px 0 0;
}
.social-subscribe li a {
display: inline-block;
height: 52px;
width: 57px;
}
.social-subscribe li a.facebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgekJOoHG85dY6V7MdHj4hUQPUCfLPxeRjh122z0dpSaJ070obl0f8mYAfmVifbzA1o0kLCgZlgINJjlb473vcOA2zsKRN_S2qEfqB9ZqGlWzt8r1cxLe_CWrnYr1r8YvZ5UXOqu98Y22Q/s800/icon-facebook.gif") no-repeat scroll 0 0 transparent;
padding: 0 2px 0 0;
}
.social-subscribe li a {
display: inline-block;
height: 52px;
width: 57px;
}
.social-subscribe li a.twitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx3bf-Ll3JeipffdolV3ZDsj1F9sfDY0SvP-ZeWWz4aJ2XWc5cghjRQM3YRW6UGb0bxhRhU8A5wIVa1o2_IbJlyEJ83Yn_u10zcO6uWY6D2LXSsxvgXCBhLLkI-C8p7J2JBJz-waNCOFQ/s800/icon-twitter.gif") no-repeat scroll 0 0 transparent;
padding: 0 2px 0 0;
}
.social-subscribe li a {
display: inline-block;
height: 52px;
width: 57px;
}

• Simpan Template anda. Save.
• Kemudian.Klik Design/Rancangan
• Page Elements > Tambah Gadget > HTML/JavaScript

<script src="https://sites.google.com/site/everythingaboutblogging/Home/custom.js" type="text/javascript"></script>
<div id="dhtmltooltip"></div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBwfx790930BEB2VfMHQX1Xqg8HYWH2jQHhNM6y3WXCPVxE601C6_wvDYOxQ482U1tKr8hbYs6aWwhIqurT8LpHNIJzFjPLGGk0y6brVKaldotkg7R-eZbd4OrXEJaaQr-oTTFsE3oyXM/s800/arrow.png" id="dhtmlpointer"/>                                
<ul class="social-subscribe">
<li><a onmouseout="hideddrivetip()" onmouseover="ddrivetip('Subscribe via Feed',150,'#ED8A01')" target="_blank" class="rss" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','feeds.feedburner.com/FEEDNAME']);" href="http://feeds.feedburner.com/punkdaendels"></a></li>
<li><a onmouseout="hideddrivetip()" onmouseover="ddrivetip('Join us on Facebook',150,'#2E4B8F')" rel="nofollow" target="_blank" class="facebook" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','FAN-PAGE-URL']);" href="URL Facebook Anda"></a></li>
<li><a onmouseout="hideddrivetip()" onmouseover="ddrivetip('Subscribe on Twitter',150,'#1D70B3')" target="_blank" class="twitter" rel="nofollow" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','twitter.com/TWITTER-USERNAME']);" href="http://twitter.com/TWITTER-USERNAME"></a></li>
</ul>

• Ubah Tulisan yang berwarna Merah dengan Url Anda.
• Simpan.
• Selamat Mencoba maturnuwun

Membuat Kursor Animasi Gambar dan Bintang Bertabur

Nah kali ini NGEBLOG™ bagi-bagi tips Cara Membuat Kursor di Blogspot Bertabur Bintang. Sobat Blogger sekalian pingin beda tampilan kursor blognya...?? iya pasti donk :D.


Banyak cara yang dibuat oleh setiap blogger untuk membuat tampilan blognya terkesan cantik, unik dan macam-macam . Diantaranya dengan modifikasi template yang sudah ada, memasang ragam widget danragam aksesoris blog termasuk mengganti tampilan kursor. Kalau sobat pingin kursor seperti ini Cara mengganti Kursor Blog Dengan Gambar klik disini


Pingin mencobanya?

1. Login ke blogger
2. Masuk ke Layout-->Page Element 
3. Tambahkan gadget HTML/JavaScript
4. Pilih kode taburan bintang dibawah ini.

Kode Bintang Hijau 
<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>


Kode Bintang Ungu 
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.ungu.js' type="text/javascript"></script>


Kode Bintang Merah
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.merah.js' type="text/javascript"></script> 


Kode Bintang Biru
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.biru.js' type="text/javascript"></script>


Kode Bintang Putih 
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.putih.js' type="text/javascript"></script>

      5. Simpan