cara ngatur blog: April 2013

Cara Membuat Permalink yang SEO pada Blog

Cara Membuat Permalink yang SEO pada Blog ~ Permalink atau permanen link adalah istilah untuk link aktif pada suatu artikel yang biasannya di letakan di bawah artikel atau sesudah postingan. Fungsinya tidak lain dan tidak buka yaitu untuk meningkatkan SEO Onpage blog anda. Selain itu juga berfungsi untuk menginformasikan ke pada pengunjung blog agar meletakan link balik dofollow jika ingin

Cara Mudah Membuat Permalink di Blog

Cara Mudah Membuat Permalink Keren di Blog ~ Permalink pada blog memang memiliki banyak model atau variasi, tergantung dari script yang mereka gunakan. Mulai dari permalink yang biasa-biasa saja sampai permalink yang menggunakan foto dan dan auto drag. Jadi pada tutorial saya kali ini saya akan menjelaskan tentang "Bagaimana Membuat Permalink Keren Pada Blog".

Permalink yang akan saya

Daftar Blog Dofollow Terbaru Tahun 2014

Daftar Blog Dofollow Terbaru Tahun 2014~ Pada artikel saya kali ini saya akan membagikan kepada anda semua tentang daftar blog dofollow terbaru 2014. Blog dofollow memang banyak di cari-cari oleh para pemburu backlink seperti saya ini. Karena kita tahu, hingga saat ini backlink adalah salah satu cara untuk meningkatkan peringkat kita di mesin pencari google dan kawan-kawanya.

Jadi tidak

Cara Membuat Kode Warna HTML di Blog

Cara Membuat Kode Warna HTML pada Blog~ Saya janji kepada anda semua akan melengkapi artikel saya satu lagi tentang tutorial kode warna HTML pada blog. Kode warna HTML ini memang banyak di cari-cari pengunjung khususnya blogger yang sedang mendesain warna-warna element pada blognya. Jika suatu hari anda akan mendesain warna blog, anda tidak Usah repot-repot mencari di google tentang kode warna

Daftar Kode Warna HTML Lengkap

Kode Warna HTML Lengkap~ Pada artikel singkat saya kali ini saya akan membagikan artikel tentang kode warna HTML Lengkap. Kode-kode warna ini bisa saudara gunakan untuk mengubah warna-warna pada blog saudara seperti mengubah warna background, menggubah warna link blog, DLL. Yang tentu saja dapat memperindah tampilan blog saudara.

Untuk saudara yang ingin tahu bagaimana cara membuat tabel

Membuat Kode Warna HTML pada Postingan Blog

Membuat Kode Warna HTML pada Postingan Blog ~ Anda pernak melihat sebuah blog yang memilliki kode warna HTML pada postingan artikelnya. Apakah anda iri dan tertarik untuk membuatnya ? Tapi saya tidak tahu bagaimana cara membuatnya. Tenang saja gan, pada artikel saya kali ini saya akan membuat tutorial blog tentang "Bagaimana Membuat Kode Warna HTML".

Kode warna HTML ini akan kita pasang pada

Cara Membuat Tombol Share Melayang di Blog

Cara Membuat Tombol Share Melayang di Blog ~ Untuk memperbanyak artikel blog saya ini yang masih minim, maka saya akan menyajikan tutorial-tutorial blog lengkap yang tentunya bermanfaat bagi anda semua. Untuk itu tutorial blog saya kali ini adalah tentang "bagaimana cara membuat tombol share melayang di blog".

Semakin menarik tombol share artikel blog saudara, maka semakin tertarik juga

Cara Memasang Tombol Share di Postingan Blog (Twitter, Facebook, G+)

Cara Memasang Tombol Share di Postingan Blog (Twitter, Facebook, G+) ~ Tombol share atau share button adalah tombol yang bisa di gunakan pengunjung blog, baik itu untuk menilai dan membagikan artikel saudara ke situs sosial media seperti Twitter, Facebook, Google+, DLL. Namun pada artikel tentang cara memasang tombol share di postingan blog, saya hanya akan membagikan tombol share Twitter,

Cara Membuat Artikel Terkait Vertikal Dengan Gambar

Cara Membuat Artikel Terkait Vertikal Dengan Gambar~ Membuat artikel terkait pada blog berplatform blogspot sangatlah muda. Biasanya artikel terkait ini banyak digunakan oleh blogger yang sulit melakukan interlink antar artikel. Interlink itu adalah link yang menghubungkan antara artikel yang satu dengan yang lainya. Kalau saya sendiri lebih baik melakukan interlink anatara artikel dari pada

Cara Ampuh Merampingkan Alexa Rank Dengan Cepat

Cara Merampingkan Alexa Rank Dengan cepat~ Jika saudara masih baru dalam dunia blogging, mungkin saudara akan kebingung dengan yang namanya Alexa Rank atau Peringkat Alexa. Agar tidak bingung lagi, berikut pengertian tentang alexa. Alexa merupakan salah satu web/situs informasi yang memberikan ranking bagi sebuah blog atau web. Sedangkan Alexa Rank adalah rangking yang diberikan alexa.com

Apa Perbedaan Blog Dofollow dan Nofollow?

Apa Perbedaan Blog Dofollow dan Nofollow? ~
Jika anda seorang blogger yang sudah lama di dunia blogging, pasti sudah tidak
asing lagi dengan kata dofollow dan nofollow. Kedua kata ini memiliki
pengertian yang berlawanan atau berkebalikan. Oleh karena itu pada artikel saya kali ini saya
akan membahas tentang “Perbedaan Blog Dofollow dan Nofollow”.

Blog Dofollow adalah blog yang
apabila kita

Cara Mendapatkan BackLink Berkualitas Dari W3 Directory

Tutotrial Belajar Blog - Backlink bisa di artikan sebuah script link yang disusun berisi alamat suatu web/blog, yang dipasangkan ke dalam suatu situs/blog tertentu. Kenapa kita harus membangun sebuah backlink? Karena backlink sendiri memiliki manfaat untuk menaikkan PageRank blog kita di dalam suatu mesin pencari seperti Google, Yahoo, Ask dll.

W3 Directory adalah salah satu web directory yang memberikan backlink gratis dan ampuh bagi para penggunanya. Cukup dengan submit beberapa artikel anda saja tanpa perlu submit semuanya, sobat akan mendapat backlink secara Gratis dan terus bertambah tiap bulan. backlink dari w3 directory ternyata terindek oleh Mbah Google dan mesin/tools pengecek backlink.

Cara Mendapat Backlink Gratis Berkualitas hanya tinggal ikuti langka berikut ini :

1. Masuk Ke w3-directory

2. Setelah itu sobat pilih Add a web site

3. Isi form untuk Add a web site tersebut

URL : alamat blog / link blog.
title : nama blog.
description : deskripsi blog sobat.
keywords : kata kunci yang menggambarkan blog sobat.
identity :isi dengan nama sobat.
email : email sobat (valid).
return link / back link : link untuk mendapatkan backlink dari w3 directory, isi sesuai URL tadi.
country : papua nugini Indonesia.
Heading 1 : kategori utama untuk blog sobat
kemudian klik Submit my web site

Catatan : setiap ada tanda bintang (*) artinya wajib diisi.

Karena backlink ini adalah salah satu backylink garis yng berkualitas terbaik maka tentu tidak serta merta kita langsung mendapatkan backlink. backlink dari w3 directory bersifat 2 arah. maksudnya adalah kita akan mendapatkan backlink jika ada yang melakukan vote terhadap kita di w3 directory tersebut. jadi sobat harus kreatif mencari cara agar banyak vote untuk memdapatkan banyak backlink gratis yang berkualitas. dan salah satu cara dapat backlink gratis berkualitas ini dengan share link di facebook atau di forum forum yang sobat ikuti

Sekian semoga artikel ini bermanfaat bagi sobat semua.

Cara Membuat Blog Redirect / Dialihkan ke Halaman Lain

Cara Membuat Blog Redirect / Dialihkan ke Halaman Lain - Hai Pengunjung setia Tutorial Belajar Blogger, sekarang Saya akan share cara membuat blog dialihkan / redirect ke blog / web lain saat dibuka. Maksud dari tutorial ini adalah saat kita membuka web atau blog lain kita dapat dialihkan ke Blog kita yang utama , dan pengalihan halaman ini sangat berguna saat kamu sedang memperbaiki blog kamu (maintenance), yah kira-kira begitulah cara kerjanya :)

Membuat Blog Redirect / Dialihkan ke Halaman Lain
1. Masuk ke dashboard blogger
2. Klik template, klik edit HTML, lalu pilih lanjutkan
3. Cari kode <body> gunakan CTRL+F untuk mencarinya
4. Jika sudah ketemu, hapus kode <body> tersebut lalu gantikan dengan kode berikut:

<body onload='window.location.href="http://oktriblogger.blogspot.com"'>

# keterangan
- Ganti link yang berwarna hijau dengan link tujuan kamu, maksudnya mau diarahkan kemana pengalihan atau redirectnya

5. Klik simpan template
6. Buka blog kamu tadi lalu lihat, blog kamu akan dialihkan ke halaman atau ke blog yang sudah kamu tentukan tadi

Sekian, jika ada yang ditanyakan silahkan tulis komentar

keyword: Belajar blog, tips trik blogger, membuat blog redirect, membuat halaman blog dialihkan ke blog lain, blog redirect atau dialihkan ke halaman lain, mengalihkan blog kehalaman, blog, web lain

Cara Membuat Kursor Blog Di Kelilingi Tiga Bintang Berekor

Tutorial Belajar Blog - Cara Membuat Kursor Blog Di Kelilingi Tiga Bintang Berekor , Sambil Mencari informasi dan sedikit waktu untuk membuka blog oktri ingin berbagi tutorial blog yang Mungkin sobat udah pada tahu tentang artiukel ini ,Cara membuat kursor Blog di kelilingi 3 bintang warna wani berekor, tapi Oktri ingin berbagi dengan yang belum tau, kali aja ingin menghiasi tampilan kursor pada blognya, bagi yang ingin mencobanya silahkan ikuti tutorial berikut ini.

- Langkah pertama login ke blog sobat
- Kedua masuk dashboar>>tata letak >> Add gadget >> pilih HTML/javascript
- Copy paste code script di bawah ini

<script language="JavaScript" type="text/javascript">
var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";
var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.
var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();
var pix = "px";
var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;
for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"></div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"></div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"></div>');
}
if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{

if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}

}
function winsize()

{
var oh,sy,ow,sx,rh,rw;

if (domWw)

{

if (d.documentElement && d.defaultView &&

typeof d.defaultView.scrollMaxY == "number")

{

oh = d.documentElement.offsetHeight;

sy = d.defaultView.scrollMaxY;

ow = d.documentElement.offsetWidth;

sx = d.defaultView.scrollMaxX;

rh = oh-sy;

rw = ow-sx;

}

else

{

rh = r.innerHeight;

rw = r.innerWidth;

}

h = rh;

w = rw;

}

else

{

h = r.clientHeight;

w = r.clientWidth;

}

}

function scrl(yx)

{

var y,x;

if (domSy)

{

y = r.pageYOffset;

x = r.pageXOffset;

}

else

{

y = r.scrollTop;

x = r.scrollLeft;

}

return (yx == 0)?y:x;

}

function mouse(e)

{

var msy = (domSy)?window.pageYOffset:0;

if (!e) e = window.event;

if (typeof e.pageY == 'number')

{

my = e.pageY - msy + 16;

mx = e.pageX + 6;

}

else

{

my = e.clientY - msy + 16;

mx = e.clientX + 6;

}

if (my > h-65) my = h-65;

if (mx > w-50) mx = w-50;

}

function assgn()

{

for (j = 0; j < 3; j++)

{

dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) + scrl(0) + pix;

dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *

Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;

}

stp+=s;

for (i = 0; i < n; i++)

{

if (i < n-1)

{

vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;

vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;

vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;

}

else

{

vx[i].top = dy[0]; vx[i].left = dx[0];

vy[i].top = dy[1]; vy[i].left = dx[1];

vz[i].top = dy[2]; vz[i].left = dx[2];

}

}

setTimeout(assgn,t);

}

function init()

{

for (i = 0; i < n; i++)

{

vx[i] = document.getElementById("x"+(idx+i)).style;

vy[i] = document.getElementById("y"+(idx+i)).style;

vz[i] = document.getElementById("z"+(idx+i)).style;

}

winsize();

assgn();

}

if (window.addEventListener)

{
window.addEventListener("resize",winsize,false);

window.addEventListener("load",init,false);

document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);

document.attachEvent("onmousemove",mouse);

window.attachEvent("onresize",winsize);

}

</script>

- Teraakhir save template

Keterangan : ganti script yang berwarna orange dengan warna favorit warna sobat
Semoga Membantu dan bermanfaat

Sumber : mbah google

Cara Menampilkan Foto di Pencarian Google

Cara Menampilkan Foto di Pencarian Google~ Menampilkan foto author/penulis blog pada pencarian di google bisa membuat orang lain yang sedang browsing mengklik blog kita, sehingga dapat meningkatkan traffic pengunjung blog saudara. Untuk itulah pada postingan saya kali ini saya akan membuat tutorial tentang "Bagaimana Cara Menampilkan Foto di Pencarian Google".

Namun foto itu hanya akan ada

Mengkompres CSS Dapat Mempercepat Loading Blog

Mengkompres CSS Dapat Mempercepat Loading Blog~Ada masalah dengan loading blog saudara? jika ada mungkin salah satu penyebabnya adalah CSS pada template blog saudara memiliki banyak perintah yang tidak terlalu penting atau bahkan tidak berfungsi. Jika saudara adalah blogger baru seperti saya ini, saudara mesti mencoba mengkompres CSS template blog saudara agar loading blog semakin cepat.

Cara Membuat Navigasi Menu Melayang

Tutorial Belajar Blog - Cara Membuat Navigasi Menu Melayang ,Kali Ini Oktri ingin berbagi Tentang membuat menu melayang, Tutorial Ini merupakan Tutorial atau Tips tentang Blog lanjutan dari Cara Membuat Menu Social Button Melayang Sekedar Berbagi Informasi membuat menu di sebelah kiri pada blog, Contoh ataupun demo Saat Anda mengunjungi situs Nettuts+, atau Tuts+ pasti Anda akan melihat sebuah menu melayang kecil di sebelah kiri layar. Kali ini Saya akan membuat versi yang mirip dengan itu.

DEMO

Kerangka Navigasi

Kerangka navigasi terdiri dari elemen biasa yaitu <nav>, <ul> dan <li>:

 <nav id='sidenav'>
    <ul>
        <li><a class='main home' href='/'>Home</a></li>
        <li><a class='main about' href='#'>About</a>
            <ul class='fallback'>
                <li><a class='social blogger' href='#'>Me on Blogger</a></li>
                <li><a class='social facebook' href='#'>Me on Facebook</a></li>
                <li><a class='social twitter' href='#'>Me on Twitter</a></li>
                <li><a class='social googleplus' href='#'>Me on Google+</a></li>
            </ul>
        </li>
        <li><a class='main archive' href='#'>Archives</a>
            <ul class='fallback'>
                <li><a href='#'>Table of Contents</a></li>
                <li><a href='#'>Recent Articles</a></li>
                <li><a href='#'>Recent Comments</a></li>
            </ul>
        </li>
        <li><a class='main share' href='#'>Share</a>
            <ul class='fallback'>
                <li><a class='social blogger' href='#'>Blogger</a></li>
                <li><a class='social facebook' href='#'>Facebook</a></li>
                <li><a class='social twitter' href='#'>Twitter</a></li>
                <li><a class='social googleplus' href='#'>Google+</a></li>
                <li><a class='social flickr' href='#'>Flickr</a></li>
                <li><a class='social rss' href='#'>RSS</a></li>
                <li><a class='social mail' href='#'>Mail</a></li>
            </ul>
        </li>
        <li><a class='main photos' href='#'>Screencast</a></li>
        <li><a class='main contact' href='#'>Contact</a>
            <ul class='fallback' style='font-weight:bold;'>
                <li><a class='social facebook' href='#'>Facebook</a></li>
                <li><a class='social twitter' href='#'>Twitter</a></li>
                <li><a class='social mail' href='#'>Mail</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

 #sidenav {
  position:fixed !important;
  position:absolute; /* IE6 Fallback */
  top:60px;
  left:0px;
  z-index:999;
  background-color:#eee;
  border:1px solid #ccc;
  width:auto;
  height:auto;
  text-indent:-99999px;
  font:normal 12px Arial,Sans-Serif !important;
  -webkit-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
}

#sidenav ul {
  margin:0px 0px;
  padding:0px 0px;
}

#sidenav li {
  margin:0px 0px;
  padding:0px 0px;
  list-style:none;
  display:block;
  position:relative;
}

#sidenav a {
  display:block;
  width:20px;
  border-bottom:1px solid #ccc;
  color:#666;
  text-decoration:none;
  -webkit-box-shadow:inset 0px 0px 0px 1px white;
  -moz-box-shadow:inset 0px 0px 0px 1px white;
  box-shadow:inset 0px 0px 0px 1px white;
}

#sidenav li:last-child a {
  border-bottom:none;
}

#sidenav span.ttp {
  display:block;
  position:absolute;
  top:0px;
  font:normal 94% Arial,Sans-Serif;
  background-color:#39f;
  color:white;
  padding:0px 10px;
  line-height:22px;
  height:22px;
  width:auto;
  left:100%;
  z-index:77;
  margin-left:17px;
  text-indent:0px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:none;
}

#sidenav span.ttp em {
  display:block;
  width:0px;
  height:0px;
  border:4px solid transparent;
  border-right-color:#39f;
  position:absolute;
  top:7px;
  right:100%;
}

#sidenav li ul {
  width:150px;
  height:auto;
  background:transparent;
  border:none;
  position:absolute;
  top:-1px;
  left:100%;
  -webkit-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 7px -3px rgba(0,0,0,0.4);
  display:none;
}

#sidenav li ul a {  
  border:1px solid #ccc;
  border-bottom:none;
  background-color:#eee;
  display:block;
  width:auto;
  padding:0px 10px;
  line-height:25px;
  text-indent:0px;
  -webkit-box-shadow:inset 0px 0px 0px 1px white;
  -moz-box-shadow:inset 0px 0px 0px 1px white;
  box-shadow:inset 0px 0px 0px 1px white;
}

#sidenav li a:hover {background-color:#ddd;}

#sidenav li ul li:last-child a {
  border-bottom:1px solid #ccc;
}

/* CSS Sprites */
#sidenav a.main {
  background-image:url('main-sprites.png');
  background-repeat:no-repeat;
  width:26px;
  height:25px;
}

#sidenav a.home    {background-position:5px 4px;   }
#sidenav a.about   {background-position:5px -22px; }
#sidenav a.archive {background-position:5px -48px; }
#sidenav a.share   {background-position:5px -73px; }
#sidenav a.photos  {background-position:5px -100px;}
#sidenav a.contact {background-position:5px -126px;}

#sidenav li ul a.social {
  background-image:url('social-sprites.png');
  background-repeat:no-repeat;
  padding-left:30px !important;
}

#sidenav li ul a.blogger    {background-position:5px 4px;   }
#sidenav li ul a.facebook   {background-position:5px -21px; }
#sidenav li ul a.twitter    {background-position:5px -47px; }
#sidenav li ul a.googleplus {background-position:5px -73px; }
#sidenav li ul a.flickr     {background-position:5px -99px; }
#sidenav li ul a.rss        {background-position:5px -125px;}
#sidenav li ul a.mail       {background-position:5px -151px;}

/* CSS Fallback */
#sidenav li:hover .fallback {display:block;}

JQuery

Dan... sedikit kode JQuery yang merupakan pengembangan dari JQuery Tooltip onClick. Kodenya memang tampak banyak, tapi yang banyak itu pada dasarnya hanya deskripsi cara kerjanya saja:

$(function() {

 // Menonaktifkan fallback CSS (Saya akan membahas ini suatu saat nanti)
 $('#sidenav .fallback').removeClass('fallback');

 // Menampilkan dan menyembunyikan tooltip
 $('#sidenav li a.main').hover(function() {
  $(this).append('<span class="ttp">' + $(this).text() + '<em></em></span>');
  $('span.ttp', this).stop().animate({marginLeft:7, opacity:"show"}, 200);
 }, function() {
  $('span.ttp', this).stop().animate({marginLeft:10, opacity:"hide"}, 100, function() {
   $(this).remove();
  });
 });

 // Saat elemen <a> diklik...
 $('#sidenav li a[href="#"]').click(function(e) {
  // Hilangkan semua anak <ul> dan tooltip yang tampil
  $('#sidenav li ul:visible, span.ttp:visible').hide();
  // Tampilkan elemen setelahnya (dalam hal ini adalah elemen <ul>)
  // dengan efek .show('fast') dan set nilai margin-left menjadi 10 piksel untuk menciptakan jarak
  $(this).next().css('margin-left', '10px').show('fast');
  // Jangan biarkan event .click() pada elemen ini mempengaruhi elemen lain di dalam dokumen
  // Selengkapnya: http://api.jquery.com/event.stopPropagation/
  e.stopPropagation();
  return false;
 });

 // Hilangkan semua anak elemen <ul> dan tooltip yang tampil saat elemen selain menu diklik
 $(document).click(function() {
  $('#sidenav li ul:visible, span.ttp:visible').hide();
 });

});

kalau di template anda belum menggunakan JQUERY anda harus menaruh nya sekarang:

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

Selamat Mencoba dan Semoga Bermamfaat....,

Cara Mengganti dan Merubah Warna Link di Blog

Cara Mengganti dan Merubah Warna Link di Blog~ Jika anda menggunakan template bawaan blogger seperti yang saya pakai ini, mungkin anda akan merasa kurang nyaman dengan warna linknya. Karena saya sendiri sudah mengalaminya. Saya googling kesana kemari akhirnya saya menemukan tutorial tentang "Bagaimana Mengganti dan Merubah Warna Link di Blog".

Saya sempat frustasi karena warna link saya

Cara Menggunakan HTML Editor Tampilan Terbaru

Tampilan layout HTML Editor dari waktu-kewaktu mengalami perubahan, buktinya saja blogger baru-baru ini telah merilis (9 April 2013) tampilan layout Edit HTML yang memudahkan kita untuk mengedit template . Bagi sobat yang baru membuka akun bloggernya jangan kaget melihat tampilan layout Edit Html mengalami sedikit perubahan.

Awalnya saya juga kaget melihat tampilan Edit Html yang berbeda dari

Cara Membuat Daftar Isi Otomatis Super Ringan

Cara Membuat Daftar Isi Otomatis Super Ringan - Pada postingan saya kali ini saya akan sedikit share tutorial blog tentang "Cara Membuat Daftar Isi Otomatis Pada Blogspot". Setelah pada postingan saya sebelumnya saya telah menjelaskan tentang "Bagaimana Membuat Artikel Berkualitas Dalam Waktu Singkat". Namun pada pertemuan kali ini saya hanya akan membahas cara memasang daftar isi pada

Perbaikan Blogger Template HTML Editor

Tutorial Belajar Blog - Beberapa hari tidak membuka blog sore ini kaget dengan inovasi Blogger dari waktu ke waktu semakin membuat penggunanya merasakan "jatuh cinta" kepadanya.Blogger kembali melakukan perubahan pada fitur Template mereka. Perubahan yang menurut saya cukup mencolok dari sebelumnya.

Di perubahan kali ini Blogger menyuguhkan beberapa fitur tambahan seperti :

Lompat ke Widget : untuk mengetahui kode HTML widget yang telah terpasang. Dengan adanya fitur ini pengguna hanya perlu memilih kode widget mana yang ingin ditampilkan. Sehingga cukup memudahkan terutama bagi mereka yang masih awam dengan berbagai kode HTML.

Pratinjau Template : Fitur tambahan ini memungkinkan pengguna melihat langsung perubahan yang terjadi pada template di dashboard ketika proses pengeditan, sehingga tidak perlu lagi menggunakan fitur pratinjau yang membuka halaman baru untuk melihat perubahan pada template.

Edit Template : Tampilan baru yang cukup segar, dengan kode berwarna-warni dilengkapi fitur line, memudahkan pengguna mendeteksi setiap kali terjadi kesalahan ketika mengedit template. Sehingga ketika pengguna ingin mengetahui baris kode yang salah, tidak perlu lagi menggunakan software tambahan.

Beberapa perubahan dan tambahan fitur ini telah membuktikan konsistensi Blogger di dalam menjawab semua kritik dan saran dari para penggunanya. Tidak bisa dipungkiri nantinya Blogger akan mengadakan update fitur-fitur lain untuk mendukung para Blogger dalam menjalankan aktifitas mereka dan mungkin saja akan menjadi Platform Blogging idaman para Blogger.

Daftar Isi

Cara Membuat Artikel Berkualitas Dalam Waktu Singkat

Cara Membuat Artikel Berkualitas Dalam Waktu Singkat~ Sebenarnya artikel saya kali ini hanyalah tambahan untuk artikel saya sebelumnya tentang "Bagaimana Membuat Artikel Berkualitas Standar SEO". Jadi bagi saudara yang ingin melanjutkan membaca artikel tambahan ini, silahkan di baca dengan seksama karena penjelasanya agak sedikit rumit.

Menurut para webmaster untuk membuat artikel yang

Bagaimana Menulis Artikel Berkualitas Standar SEO

Bagaimana Cara Menulis Artikel Berkualitas Standar SEO? Mungkin artikel yang seperti ini yang sedang di cari-cari oleh para blogger. Karena ada blogger yang artikelnya ingin di urutan pertama google tetapi artikel tersebut masih di bawah standar SEO atau pun artikel tersebut kurang menarik di mata pengunjung. Jadi sobat harus memperhatikan faktor-faktor penting saat menulis artikel agar

Bagaimana Cara Melakukan Riset Kata Kunci?

Jika anda serius melakukan blogging dan sangat berharap bisa mendapatkan banyak pengunjung, maka melakukan riset kata kunci adalah suatu keharusan. Ini adalah satu dari beberapa elemen penting dalam membangun blog yang dicari banyak orang. Jadi mari kita lihat bagaimana cara melakukan riset kata kunci blog anda.

Kali ini saya akan membuat contoh kasus:

Anggap saja blog anda adalah

Bagaimana Membuat Catatan Kaki Artikel?

Bagaimana Membuat Catatan Kaki Artikel? Memasang catatan kaki artikel pada blog memang bisa mempercantik dan memperindah tampilan blog. Selain itu blog yang memasang catatan kaki biasanya terlihat lebih profesional dan juga menunjukan bahwa artikel tersebut adalah hasil karyanya sendiri (Tidak Asal Copy Paste).

Pada umunya memasang catatan kaki pada artikel dibuat untuk

Membuat Widget Slide Panel With CSS and jQuery Effect

Tutorial Belajar Blog -Membuat Widget Slide Panel With CSS and jQuery Effect Inspirasi ini didapat dari tetangga blogger kita ut2a-4down blogmates. Ini adalah widget yang sederhana, namun cukup efektif untuk sekedar meringkas bagian-bagian yang biasanya dianggap terlalu panjang atau terlalu lebar. Kamu bisa menggunakan widget ini untuk meletakkan foto, video, daftar teman atau apapun, yang menurutmu terasa sedikit mengganggu penampilan.

Untuk Contohnya sobat bisa lihat langsung pada postingan ini, perhatikan pada bagian Menu diatas.

Jika sobat berminat dan ingin membuatnya, ikuti langkahnya sebagai berikut :

1. Login ke akun Blogger sobat
2. Klik Perancangan >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :

<style type="text/css">
/*
Visit: http://tutorialbelajarblogger.blogspot.com/
*/
#paneloktri {display:block;}
#panel {background-color:#CF4C23;border:2px solid #CF4C23;border-width:2px 2px 0 2px;overflow:auto;margin:0;padding:20px 15px 15px 15px;color:#111;
font:normal 12px "Consolas","Courier New",Courier,mono,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 #CF4C23;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="paneloktri">
<div id="panel">

... ISI KONTEN DI SINI ...

</div>
<div class="tombolpanel">
<span class="in">Buka Panel</span>
<span class="in" style="display:none;">Tutup Panel</span>
</div>
</div>

5. Klik Simpan, dan lihat hasilnya. :D

KET ::
- Kode yang Saya beri warna hijau adalah JQuery. Sebelum menambahkan widget ini sebaiknya periksa dulu isi template anda. Jika template anda sudah dilengkapi dengan JQuery, maka buang kode tersebut dari widget.

Sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.

Selamat mencoba.!

Apa Itu SEO ?

Apa Itu SEO ? Sebelum melangkah lebih jauh mendalami dunia blogging alangkah lebih baiknya kita sebagai blogger harus memahami dulu apa itu SEO. Sebenarnya SEO adalah singkatan dari (Search Engine Optimization) atau dalam bahasa indonesian lebih sering dikenal dengan Optimasi Mesin Pencari. Jadi intinya SEO merupakan trik yang dilakukan supaya web atau blog
supaya biasa berada di halaman

Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse

Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse - Pengunjung Tutorial Belajar Blog Pada Kesempatan ini akan berbagi tutorial blog lanjutan dari Membuat Efek Zoom Pada Gambar Postingan Blog , apabila pada postingan sebelumnya gambar mempunyai efek zoom apabila mouse diarahkan pada gambar.

Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar Naruto di atas, maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode </head>

5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>

<style>#oktri img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
#oktri img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

6. dan sobat klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

1. Sobat harus menambahkan kode <div id="oktri"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:

<div id="oktri">
<a href="http://http://tutorialbelajarblogger.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibFtQFHYoBD0SoH-FLiierPBziphXjUBeCx1Xz5JFtWmkuiIonXDY3R6cwQfO3gMbuuJEI5q0gmr1JQdnS5VfozYdy6OD86dqD3UIxzyo5B8Av13acjDmpjshn2yCYMskIozPgEMdhgrpV/s200/naruto+dont+copy.png" /></a></div>

keterangan:

kode berwarna merah adala kode pembuka dan penutup
kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
Setelah semuanya selesai klik publikasikan.

Demikianlah tips "Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse".

Semoga bermanfaat Sobat.

Cara Membuat Widget Entri Populer Keren

Cara Membuat Widget Entri Populer Keren - Sesuai dengan judul tersebut belajar blog ingin berbagi membuat tips blog membuat widget entri populer lebih keren, mungkin Cara Membuat Widget Entri Populer Keren dan Cantik ini bisa menjadi salah satu pilihan. entri popular kalau dari google tentunya biasa saja,, tanpa ada variasi yang menarik dan keren. dengan tambahan script pada artikel ini sobat dapat Membuat Widget Entri Populer Keren

Nah,,, waktunya ke TKP Cara Membuat Widget Entri Populer Keren dan Cantik , untuk lebih lanjut nih,,,, baca tutorialnya :

1. Login ke blog anda
2. Klik Tata letak >> Tambah Gadget >> Entri Populer >> tampilkan entri populer hanya judulnya saja. Jangan menggunakan tubnail dan cuplikan. Atur jumlah judul posting yang akan dimunculkan.
3. Klik simpan
4. Selanjutnya klik Template
5. Klik Edit Html >>klik lanjutkan
6. Cari kode ]]></b:skin> Jika sudah ketemu kopi paste kode css berikut ini tepat diatas kode ]]></b:skin>

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

7. Sobat Preview dahulu, setelah berhasil baru di SAVE

Sekian Dulu Sobat Cara Membuat Widget Entri Populer Keren semoga bermanfaat. Good Luck