Free Download Template 1 Blog SEO Friendly

Helloo sobat Blogger semua, setelah sekian lama Vakum, akhirnya kembali Saya sapa sobat2 Blogger, dan pada kesempatan kali ini, dan atas permintaan teman Saya, untuk kedua kalinya Saya Share Template Blog. Ok, tidak perlu berlama-lama,langsung saj SEDOT Gan...

Free Download Template 1 Blog SEO Friendly



Sekian dulu Ya, Moggo langsung di SEDOT, semoga Teman Saya yg sudah minta ini Template merasa Puas... Dan semoga Template Blog kali ini bermanfaat buat Kalian semua... Oh ya, DEMO-nya bisa Kalian lihat pada Blog Saya ini...

-----:| SALAM BLOGGER INDONESIA |:-----

DOWNLOAD ARTIKEL : 


Cara Membuat Gambar Berubah Saat Di Sorot Cursor Pada Blog




Sebelumnya Saya sudah pernah Posting tentang "Cara Membuat Effect Zoom Pada Gambar Di Blog". "Cara Membuat Effect Berputar Dan Zoom Pada Setiap Gambar Di Postingan", "Cara Membuat Effect Terang dan Gelap Pada Gambar". Dan kali ini Saya akan Posting tentang "Cara Membuat Gambar Berubah Saat Di Sorot Cursor Pada Blog". Sebagai Contoh, coba Kalian sorotkan Cursor Kalian pada Gambar di atas, pasti gambarnya akan berubah. Nah kita akan membuat yg seperti itu. OK kita langsung ke langkah-langkahnya.

[1]. Pertama, pastinya LogIn dulu ke BLOG Kalian masing2.
[2]. Kemudian dari Dasbor, cari Post, lalu buat sebuah Postingan Baru.
[3]. Lalu pada Mode Edit HTML pada Postingan, sisipkan Code di bawah kedalamnya.
<style type="text/css">
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}
</style>
<center><a class="pic" href="LINK TUJUAN JIKA GAMBAR DIKLIK">
<img class="image1" src="URL GAMBAR 1" />
<img class="image2" src="URL GAMBAR 2" /></a></center>
KETERANGAN :
* Tulisan yg berwarna Biru, ganti dengan URL Tujuan jika Gambar di Klik.
* Dan tulisan yg berwarna Merah, ganti dengan URL Gambar Kalian.

SS Cara Menambahkan Codenya.


[4]. Dan terakhir, tinggal di Publikasikan dan lihat hasilnya.

Sekian Tips Blogger kali ini, semoga Tips ini bermanfaat buat Kalian, dan jika ada pertanyaan tentang Tips ini, silahkan Kalian tuliskan pertanyaan Kalian di Kotak Komentar di bawah.

----=| Salam Blogger Indonesia |=----

Cara Membuat Scroll Pada Kotak Komentar Blog

Sebelumnya Saya sudah pernah Posting tentang "Cara Membuat Scroll Pada Postingan Blog", dan kali ini Saya akan Posting tentang "Cara Membuat Scroll Pada Kotak Komentar Blog". OK, Saya tidak perlu menjelaskan tentang Tips ini kan, Toh Kalian juga sudah pada tahu tentang Tips ini. Kita langsung ke Langkah-Langkahnya.

[1]. LogIn dulu ke BLOG Kalian.
[2]. Kemudian dari Dasbor, cari Rancangan --> Edit HTML.
[3]. Lalu centang "Expand widget template", dan cari Code #comments-block{ atau #comments-block {
[4]. Kalau sudah ketemu, sekarang CoPas Code di bawah ini tepat di BAWAH atau SETELAH Code di atas.
max-height:300px;border:1px solid #eee;overflow:auto;
KETERANGAN :
* Code yg berwarna Biru, Kalian bisa menggantinya dengan Tinggi Scroll-nya dan Warna Garis Pinggir-nya. Code Warna HTML..? Klik di SINI.

[5]. Kemudian terakhir, tinggal di SIMPAN dan lihat hasilnya.

Sekian Tips Blogger kali ini, semoga Tips kali ini bermanfaat buat Kalian semua.

Salam Blogger Indonesia.

Cara Membuat Effect Berputar Dan Zoom Pada Setiap Gambar Di Postingan


Sebelumnya Saya sudah pernah Posting tentang "Cara Membuat Effect Zoom Pada Gambar Di Blog", dan "Cara Membuat Effect Terang dan Gelap Pada Gambar" dan sesuai permitan salah satu Sobat Blogger, Saya Posting Tips ini. Sebagai contoh Kalian bisa melihat pada Gambar di atas, atau pada setiap Postingan Gambar di blog ini, dan lorot kursor Kalian ke arah gambar. OK, ditak usah berlama-lama, kita langsung ke langkah-langkahnya.

[1]. Pertama, pastinya LogIn dulu ke BLOG Kalian.
[2]. Kemudian dari Dasbor, cari Template --> Edit HTML.
[3]. Lalu tekan Tombol CTRL + F atau F3 pada Keyboard, dan cari Code ]]></b:skin>.
[4]. Kemudian CoPas Code di bawah tepat 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]. Terakhir tinggal di SIMPAN dan lihat hasilnya.

OK,sekian Tips Blogger kali ini, semoga Tips ini bermanfaat buat Sobat Blogger semuanya, dan buat Sobat Blogger yg sudah Request, semoga  sudah terjawah pertanyannya.

Salam Blogger Indonesia.

Cara Membuat Buku Tamu Di Sebelah Kiri


Sebelumnya Saya sudah pernah Posting tentang "Cara Membuat Buku Tamu Tersembunyi", dan itu Buku Tamunya berada di sebelah Kanan. Nah kali ini Saya akan Posting "Cara Membuat Buku Tamu Di Sebelah Kiri". Kalian mungkin sudah tahu apa itu Buku Tamu, jadi Saya tidak perlu menjelaskannya lagi. OK, kita langsung ke langkah-langkahnya saja.

[1]. Seperti biasa Login dulu ke BLOG Kalian.
[2]. Trus dari Dasbor, cari Tata Letak --> Klik Tambahkan Gadget --> HTML/JavaScript.
[3]. Kemudian Kalian CoPas Code di bawah ini, ke dalamnya.
<style> #hcl { position:fixed; top:30px; left:20px; z-index:+500; } * html #hcl {position:relative;} .hcltab { height:200px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGd_xn_LjjWSULvuOmLwTLs1l5BJ1hwWwMfxLJtpNCj3fFxRWDF_01qiUjbmEYkdNu4hrNd8jo7PAz41ULuxOAyVruVd00M4awQxI3Uc-nyalDT_9OgNEiij1rhWplfVIJD71d1Bd-6f_s/s1600/buku-4.png') no-repeat; } .hclcontent { float:left; border:2px solid #3366ff; background:#ffffff; -moz-opacity: 0.1; opacity: 0.9; -khtml-opacity: 0.0; margin:0 auto 10px; padding:3px; }
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none} </style> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script> <div id="hcl"> <div class="hclcontent">

LETKAN CODE BUKU TAMU KALIAN DI SINI

<br /> <div class="hc-credit"> <span style="float:left"></span> <span style="float:right"> <a href="javascript:showHidehcl()">  </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div>   <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script></div>
KETERANGAN :
* Code yg berwarna Kuning, ganti dengan selera Kalian. [Semakin Besar Angkanya, Maka Semakin Rendah Posisi Buku Tamunya].
* Code yg berwarna Merah, Kalian bisa menggantinya dengan URL Buku Tamu Kalian.
* Code yg berwarna Orange, ganti dengan Garis Pinggir dan Warna Background yg Kalian suka. Code Warna HTML.
* Dan Tulisan yg berwarna Biru, ganti dengan Code Buku Tamu Kalian.

[4]. Dan terakhir tinggal di SIMPAN dan lihat hasilnya.

OK, sekian Tips Blogger kali ini, semoga Tips kali ini bermanfaat buat Kalian, dan jika ada pertanyaan, tulis saja pertanyaan Kalian di Kotak Komentar di bawah.

Salam Blogger Indonesia.

Cara Membuat Link Di Ikuti Tulisan Pada Blog

Sebelumnya Saya sudah pernah Posting tentang "Cara Mengganti Kursor Di Blog", dan "Cara Membuat Kursor Berubah Saat Menyorot Link", dan Tips kali ini tidak jauh beda dengan Tips sebelumnya yaitu "Cara Membuat Link Di Ikuti Tulisan Pada Blog". OK langsung saja ke langkah-langkahnya.

[1]. Seperti Biasa LogIn Dulu Ke BLOG Kalian.
[2]. Trus dari Dasbor, Cari Tata Letak --> Lalu pilih Add Ganget.
[3]. Kemudian Copy dan Paste-kan Code di bawah ini ke dalamnya.
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'courier', verdana, arial;
color: #ff0000;

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

;(function(){

var msg = "Selamat Datang di Blog JmK";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = -0.15;
var speed = 0.500;

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

</script>
KETERANGAN :
* Tulisan yang berwarna Biru, ganti dengan Warna Text, Kata-Kata Kalian, dan Ukuran Textnya. Code Warna HTML...??? Klik di SINI.

[4]. Dan terakhir, tinggal di SIMPAN dan lihat hasilnya.

Sekian dulu Tips Blogger kali ini, semoga Tips ini bermanffat buat Kalian semua, Dan jika ada pertanyaan tentang Tips ini, silahkan Kalian Tuliskan pertanyaan Kalian di Kotak Komentar di bawah.

SALAM BLOGGER INDONESIA.