Cara Membuat Blog

Langkah-langkahnya adalah sebagai berikut:
Mengisi formulir pendaftaran
  • Email address => di isi dengan alamat email kita (sebaiknya pake alamat email di gmail.com).
  • Enter a Password => di isi password anda
  • Retype Password => di isi dengan password yang sama dengan yang di atas.
  • Display Name => di isi dengan nama kita (ini akan ditampilkan pada blog anda nantinya)
  • Word Verification => isi persis sama dengan tulisan yang diatasnya, huruf besar ditulis dengan huruf besar begitu sebaliknya.
  • Klik/centang pada “I Agree the Term Service”.
  • Setelah itu tekan tombol Continue.
Menentukan nama dan alamat blog
  • Blog Title => di isi dengan judul dari blog kita, posisinya ada pada header (bagian atas blog/pada bagian atas browser anda)
  • Blog Address (URL) => untuk ini bisa anda buat sendiri, misalnya seperti punya saya http://jagoantutorial.blogspot.com/. Utuk URL saya cukup dimasukkan panduanonline pada input text, tentunya untuk URL anda lain lagi.
  • Word Verification => anda isi persis sama dengan kata yang ditampilkan dibawahnya, karena klo salah tidak akan bisa melanjut kelangkah berikutnya.
Pilih lah template anda
  • Sekarang kita memilih template yang disediakan oleh Google, sebaiknya sebelumnya ada baiknya kita mem-Preview dulu sebelum melanjutkan kelangkah berikutnya.
  • Jika sudah cocok dengan templatenya tinggal di klik Continue.
Silahkan memulai posting
  • Langkah selanjutnya anda tekan tombol Start Posting, untuk melakukan posting pada blog anda.

Lanjut dooong »
In Label: , ,

Cara Memasang Share Widget Sexy

Widget ini sangat berbeda dari yang lain tombol yang tersedia bookmark sosial. Grafis terlihat sangat stylish danberbeda. Tombol dari widget ini mempunyai pengaruh Autohide hover ketika di atasnya. Semua itu membuatnya menjadi harus memiliki widget untuk blog apapun.Di sini, saya akan menjelaskan bagaimana Anda dapat menambahkanSharing widget seksi untuk blog Blogger setelah setiap posting.

log in ke blogger
rancangan
edit html dan centang expand widget templates
copy kode dibawah ini sebelum </head>

<!--HIDDEN-BOOKMARKS-STARTS-->

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhfCXMBfilQh7RpMzmI1Nv6UXIcLHcV5m5_B5lyDO0Km49klj_SL9nnJgGh9WVvP8xBg2JWhCQiipG8aBuB-3gSHTUlky6qRYXQ9r2pqKU-blLaYsqdR3P-URxyWU-gA-tmsR3ok6Yie9/&#39;) no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhfCXMBfilQh7RpMzmI1Nv6UXIcLHcV5m5_B5lyDO0Km49klj_SL9nnJgGh9WVvP8xBg2JWhCQiipG8aBuB-3gSHTUlky6qRYXQ9r2pqKU-blLaYsqdR3P-URxyWU-gA-tmsR3ok6Yie9/&#39;) no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZnvmR35IKTPSO-iXRULjgOYe3DajtYqxGbtm1vVlHd8jz7co3E2svARVuhPKwukbfFGkShhS6nFRr3sYFMuG4-m05EygtDX3iz9zYmtnRv8ku4xHlNPbwqhNXvwuR16_gtiZq-8LYxcQH/&#39;) no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

</style>

<!--HIDDEN-BOOKMARKS-STOPS--->

selanjutnya cari <data:post.body/> ,setelah itu taruh kode dibawah ini setelahnya

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

setelah itu jangan lupa untuk save template

Lanjut dooong »
In Label: ,

Cara Mempercepat Halaman Blog / Loading Page

Ini tips langsung yang jagoan ambil dari master of internet,siapa lagi kalo bukan mbah google a.k.a google search engine. kalo kata mbah google bilang begini nih cara mempercepat loading page web / blog kita :

Post

jumlah posting / artikel yang ditampilkan pada halaman awal atau homepage ikut mempengaruhi kecepatan loading access. jadi intinya jangan terlalu banyak menampilkan posting pada halaman awal. google ngerekomendasiin kalo jumlah post kita tuh jangan melebihi 10.

JavaScript dan Links pihak ketiga

untuk mengoptimalkan kecepatan load blog, mbah google juga mengerekomendasiin menggunakan google/blogger widget yang udah build in. tapi kalo kita terpaksa gunain javascript punya pihak ketiga, agar kecepatan loading access tetap optimal letakkan javascript pihak ketiga tersebut pada footer atau pada bagian paling bawah sidebar.

Gambar

semakin banyak gambar pada homepage maka semakin lambat kecepatan loadnya, jadi sedapat mungkin kontrollah ukuran gambar dan kualitasnya dengan menggunakan program pengeditan gambar seperti adobe photoshop. google juga bilang agar kita meng-uploadnya ke web album picassa.

Rekomendasi lainnya

jika anda blogger menggunakan custom CSS ke blog, sedapat mungkin meletakkannya pada bagian atas dari halaman edit html

Lanjut dooong »
In Label:

Readmore Otomatis Tanpa Thumbnail

bagaimana cara membuat readmore otomatis tanpa gambar kecil atau thumbnail. ini berbeda dengan postingan sebelumnya yang terdapat gambar/thumbnail pada readmore otomatisnya. ini lebih disukai bagi yang ingin blognya cepat.

Langkah-langkahnya adalah sebagai berikut:
  • Masuk ke akun blogger anda.
  • Kemudian masuk menu Rancangan > Edit HTML.
  • Klik centang expand widget templates
  • Cari kode/tag </head>
  • Setelah itu copy dan paste kode di bawah ini pada baris di atas </head> tadi.
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<"); 
for(var i=0;i<s.length;i++){ 
if(s[i].indexOf(">")!=-1){ 
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
} 
} 
strx =  s.join(""); 
}
chop = (chop < strx.length-1) ? chop : strx.length-2; 
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
strx = strx.substring(0,chop-1); 
return strx+'...'; 
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="display:none;float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Kemudian cari <data:post.body/> dan ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if> 

Simpan.

Semoga Bermanfaat !

Lanjut dooong »
In Label: ,

Membuat Readmore Otomatis Thumbnail

bagaimana cara membuat readmore otomatis dengan tampilan gambar kecil atau thumbnail. tidak perlu pembahasan lebih panjang. lansung saja untuk praktek

Langkah-langkahnya adalah sebagai berikut:
  • Masuk ke akun blogger anda.
  • Kemudian masuk menu Rancangan > Edit HTML.
  • Klik centang expand widget templates
  • Cari kode/tag </head>
  • Setelah itu copy dan paste kode di bawah ini pada baris di atas </head> tadi.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) { 
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div style="text-align: justify;">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Kita dapat mengubah ukuran-ukuran pada setting kode tersebut dengan mengganti nilai variabel kode di bawah ini.

summary_noimg = 430; tinggi posting jika tanpa gambar
summary_img = 340; tinggi posting dengan gambar
img_thumb_height = 100; tinggi thumbnail gambar
img_thumb_width = 120; lebar thumbnail gambar

Kemudian cari <data:post.body/> dan ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if> 

Simpan.

Semoga Bermanfaat !

Lanjut dooong »
In Label: ,

Cara Back Up Template

Jika anda senang mengedit dan menyisipkan script ke dalam template template,dan anda masih pemula seperti saya, maka suatu tindakan yang bijak jika melakukan backup terhadap source template. File backup ini akan sangat berguna jika file template anda rusak akibat pengeditan, lebih baik melakukan restore template dari file backupnya, daripada harus mencari kesalahan edit.

cara melakukan backup template:
  • Masuk ke Halaman editor (Dashboard), pilih Edit Html, klik Download Template Lengkap
  • Pada kotak dialog pilih Save File, klik OK
  • Simpan file tersebut dalam sebuah folder yang anda buat
  • Sampai disini anda sudah melakukan backup, file tersebut berextensi xml.

semoga bermanfaat !

Lanjut dooong »
In Label:

Cara Pasang Gadget HTML Javascript

Cara Memasang Gadget HTML di Blog, mungkin ini adalah penjelasan yang singkat dari saya.
  • Login Ke Blogger
  • Masuk Tata Letak
  • Masuk lagi ke Elemen Laman
  • Tambah Gadget ( penempatan tinggal terserah anda )
  • Pilih HTML/javascript 
  • Kemudian paste kode yang diinginkan untuk dipasang
  • Kemudian klik simpan
semoga bermanfaat !

Lanjut dooong »
In Label:

Tag Heading SEO Friendly

Google sangat menyukai sebuah tulisan atau judul dengan tag H1. Oleh karena itu ubahlah ukuran judul posting anda dengan tag H1. Caranya cari kode berikut :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3></b:if>

Kode yang dicetak tebal (warna orange) dihapus dan ubah dari h3(atau pada beberapa template menggunakan h2) menjadi h1. Setelah itu tambahkan kode berikut sebelum kode ]]></b:skin>

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

setelah itu selesai silahkan save template

Lanjut dooong »
In Label:

Menambahkan kode ‘rel=canonical’

Gunanya kita menambahkan ‘rel=canonical’ adalah untuk menghindari konten ganda, karena seperti para master of SEO bilang bahwa google sangat tidak dapat mentolerir sebuah duplicate content. Cara nya di edit html tambahkan kode berikut setelah kode <head>


<link expr:href='data:blog.url' rel='canonical' />

Save template dan selesai

Lanjut dooong »
In Label:
Langganan: Postingan (Atom)