Meme Lucu

Read More

Cara mengedit atau mendesain blog di Blogger

Cara mengedit atau mendesain blog di Blogger atau blogspot, sebagai berikut :


- Masuk ke Blogger.com dan silakan log in.
- Pilih blog mana yang ingin kalian desain templatenya :

- Pada menu sebelah kiri, silahkan klik menu / Template.

- Klik "Sesuaikan"  jika ingin mengedit tanpa coding dan klik "Edit HTML"  jika mengedit dengan coding.

- Pada menu sebelah kiri, kalian bisa memilih Template, mendesain Latar Belakang, Lebar Blog,
  Tata Letak dan Tingkat Lanjut.

 dan sebagai berikut  penjelasannya menu sebelah kiri :

1. Template : menu ini memberikan pilihan template default yang sudah disiapkan oleh blogger yang bisa digunakan dan dicustomize  dengan mudah.
2. Latar Belakang : menu ini digunakan untuk mengubah background dan tema warna utama dari template yang dipilih
3. Sesuaikan Lebar : menu yang satu ini tentunya untuk mengatur seberapa lebar blog yang akan kamu miliki. Bukan cuman lebar keseluruhan blog, tapi bilah samping yang berarti pembagian lebar sidebar dan post di blog kamu.
4. Tata Letak : menu ini digunakan untuk mengatur tata letak isi (apakah ingin menggunakan sidebar, atau tidak dll). Dan juga tata letak kaki yaitu footernya ingin 3 colom widget atau hanya satu. Bukan cuma itu saja, kalian juga bisa menambahkan widget pada sidebar yang akan Pangeran jelaskan di bab selanjutnya.
5. Tingkat Lanjut : menu ini untuk mengubah warna judul, deskripsi, garis yang ada di blog. Selain itu, bisa juga mengubah font dan ukuran dari font judul blog, judul konten blog, deskripisi blog, judul sidebar, dll.

- Jika sudah selesai, klik Terapkan ke blog di kanan atas

- Untuk melihat hasil desain, klik Lihat Blog di kanan atas.

okeeeee......

Read More

Struktur Template Blog

Memahami Struktur Template Sebelum Mendesain Blog

Kebanyakan blogger pemula sering melupakan hal sederhana ini. Yaitu : tentang dasar mendesain sebuah blog.

Inilah yang membuat blogger pemula merasa sulit ketika bertemu dengan bahasa coding yang lebih rumit dari ngertiin cewek itu.

Jadi, ada baiknya jika baru mulai belajar membuat desain blog sendiri untuk memahami dulu struktur apa saja yang ada di sebuah template.

1. Header

Header Blog adalah bagian kepala atau bagian paling atas di dalam sebuah blog. Pada bagian header, biasanya terdapat Judul Blog dan Deskripsi blog. Namun, itu yang biasanya.

Untuk beberapa blog kadang ditambahkan button social media, banner, dll.

Penulisan script Header biasanya diawali dengan code <header> dan diakhiri dengan </header>. Pada script inilah kalian bisa mengedit title dan description dalam sebuah blog.

2. Sidebar

 

 

Sidebar Blog adalah bagian dalam tata letak suatu blog. Biasanya, sidebar blog memiliki 2 posisi, yaitu di kanan atau kiri. Ada juga beberapa template blog menampilkan di kedua posisi tersebut.

Hal ini kembali ke selera dari penggunanya.

Pada sidebar blog dapat ditambahkah widget pendukung untuk memudahkan pembaca menavigasi blog kalian. Seperti contohnya Widget Arsip Blog, Kategori, Artikel Terbaru, Profil dll.

3. Post

Post Blog adalah hasil dari keseluruhan konten yang sudah kamu tulis dan upload. Pada post biasanya menampilkan Judul, Isi Konten dan Kolom Komentar.

Pada konten, kalian bisa menambahkan mulai dari teks, foto, video, gif, embed, dll.

4. Footer

Footer Blog adalah bagian paling bawah dari sebuah blog. Pada footer, biasanya terdapat informasi hak cipta (credit title) dari blog dan ada juga ditambahkan widget di beberapa template blog.

Pada template default blogger, penulisan codenya dimulai dari <footer> dan diakhiri dengan </footer>.

Read More

Cara Pasang Tag Meta pada blog

 Cara Pasang tag meta berikut langkahnya :

Salah satu cara agar blog kita lebih di lirik atau di kenali oleh mesin pencari miliknya om google adalah memasang tag meta di bagian header pada kode template blog. contoh tag meta untuk blogger seperti ini :

<meta name="robots" content="INDEX, FOLLOW"/>
<meta name="description" content="Entertainment "/>
<meta name="keywords" content="Entertainment "/>

Yang harus diperhatikan adalah tulisan-tulisan yang tercetak merah. Tulisan-tulisan tersebut haruslah di sesuaikan dengan kondisi blog sobat.

Untuk deskripsi, silahkan isi dengan deskripsi blog sobat. contoh untuk blog milik saya adalah "Panduan praktis membuat blog di blogger.com. tips, trik, serta download software secara gratis".

Untuk kata kunci (keyword), silahkan isi dengan kata kunci yang berhubungan dengan blog sobat. contoh untuk blog ini adalah : blog tutorial, cara membuat blog, bikin blog, cara bikin blog, dan sebagainya. Jangan lupa untuk menyisipkan tanda koma untuk memisahkan antara keyword yang satu dengan keyword yang lainnya.

Untuk judul blog, silahkan isi dengan judul dari blog sobat.Contoh : untuk blog ini adalah Blog tutorial.

Bagi yang belum mengetahui dimanakah tag meta di simpan, jawabannya adalah di dalam kode header blog, atau jika masih bingung simpan saja di bawah kode <title><data:blog.pageTitle/></title> .

Selamat mencoba, mudah-mudahan blog sobat lebih cepat terindeks di google.

Read More

Cursor berkarakter

Cara mengganti cursor berkarakter, berikut caranya :

 1. Klik "Layout" (Tata Letak)
2. Klik "Add Gadget"
3. Pilih "Javascript/HTML"
4. Copy dan Paste kode berikut ini:
5. save.

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur815.ani), url(http://cur.cursors-4u.net/cursors/cur-9/cur815.png), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/03/29/the-alien-15.html" target="_blank" title="The Alien"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="The Alien" style="position:absolute; top: 0px; right: 0px;" /></a>

Read More

Text Mengitari Mouse

 Text Mengitari Mouse, berikut tutorialnya :

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE script */
font-style: italic;
font-weight: non;
font-family: 'arial';
color: red;
/* End Optional */

/* Start Required - Do Not Edit */
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(){

// Your message here (QUOTED STRING)
var msg = "https://anangzaini.blogspot.co.id/";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

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>

Read More