Showing posts with label Tips Trik Blog. Show all posts
Showing posts with label Tips Trik Blog. Show all posts

How to View the Number of Backlinks / Website

Backlink is one of the techniques of SEO (Search Engine Optimization). Backlink we can get by putting a link blog / website on the blog / website other, usually by exchanging links or provide comment on the blog website of others, and still many other ways.

Backlink is very important in the SEO world as more and more backlinks the more we kemungkinana indexed by google even backlinks can also increase the PR or Page rank our Web site which will affect our position on google.

How do I see backlinks on our website, how to see backlinks blog website is very easy, how to see backlinks blog website that is one of them is by visiting the site backlinkwatch.com, just enter the website address we will be out the number of backlinks blog site. Maish many other websites that provide services to view our website backlinks.
Read More

Membuat Read More Otomatis

Untuk read more otomatis ini, menggunakan kode javascript yang sebenarnya bisa sobat simpan file secara online. tapi kali ini script read more diletakkan langsung di template tanpa menggunakan hosting untuk mencegah errror.
Dengan read more otomatis tentunya sobat tidak akan repot membagi 2 postingan sobat dengan kode manual.

Berikut langkah-langkah dalam membuat read more otomatis :

1. Silahkan login ke blogger terlebih dahulu.
2. Klik Tata Letak.
3. Kemudian klik Edit HTML.
4. Centang Expand Template Widget.
5. Letakkan kode berikut ini tepat diatas kode </head> :

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

6. Jika sobat sudah pernah memasang read more (manual), sebaiknya sobat kembalikan dulu kodenya seperti semula. Hapus kode yang saya tandai dengan warna merah di bawah ini, sesuaikan dengan template sobat, karena setiap template berbeda - beda :

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

sehingga sekarang hanya ada satu   <data:post.body/>

7. Kemudian hapus kode :     <data:post.body/>  atau  <p><data:post.body/></p>

8. Ganti kode tersebut dengan kode berikut ini :

<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:left'><a expr:href='data:post.url'>Read More</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

9. Kemudian Simpan Template.

Keterangan :
• summary_noimg = 450 –-> untuk tinggi postingan tanpa gambar.
• summary_img = 360 –-> untuk tinggi postingan dengan gambar.
• img_thumb_height = 120 –> tinggi gambar.
• img_thumb_width = 150 –> lebar gambar.
• Read More… –> bisa sobat ganti dengan tulisan Baca Selengkapnya / Baca Selanjutnya / atau apa saja yang sobat inginkan.
Read More

Memasang Artikel Terkait dibawah postingan

Memasang artikel terkait atau related post selain untuk mempermudah para pengunjung blog kita menemukan artikel lain yang terdapat pada blog, juga dengan membuat artikel terkait atau related post menurut para master bisa juga menunjang seo pada blog.

Untuk memasang artikel terkait bisa disesuaikan dengan keinginan bisa ditempatkan di sidebar, tapi untuk kali ini kita akan mencoba untuk memasang artikel terkait di bawah postingan.

sebelum mulai membuat artikel terkait ini silakan di backup dulu template kamu. setelah itu apakah artikel kamu di categorikan??kalau belum coba kategorikan artikel kamu,karena ini sangat mempengaruhi ada tidaknya tampilan artikel terkait di bawah postingan, untuk yang sudah mengkategorikan artikelnya,bisa langsung membuat artikel terkait di bawah ini :

1. Login ke Blogger

2. Klik Tata Letak

3. Klik tab Edit HTML

4. Klik Expand Template Widgets

5. Kemudian Cari kode yang seperti ini :

<p><data:post.body/></p>

atau tekan Ctrl + F untuk pencarian cepat :

<data:post.body/>

6. copy/paste kode di bawah ini setelah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<strong>Artikel Terkait </strong>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='ardi33'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;ardi33&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>
Read More

cara membuat artikel terkait

Membuat artikel terkait atau related post pada blog yang biasanya muncul dibawah postingan selain akan memudahkan pengunjung untuk dapat menemukan artikel lain yang berhubungn dengan artikel yang dibaca dan juga dengan membuat artikel terkait pada blog yang paling penting adalah untuk meningkatkan page view web/blog. Artikel yang berhubungan akan bisa dilihat melalui halaman postingan, yang dikategori pada setiap label yang diberikan di tiap postingan.

Untuk menempatkan artikel terkait  berada dibawah postingan : 



1. Login ke blogmu
2. Klik Layout lalu pilih Edit HTML
3. Hanya untuk sekedar berjaga-jaga sebelum mengedit, template backup dulu dengan klik Download Full Template.
4. Centang Expand Widget Templates

5. Cari kode  <data:post.body/>
6. Copy kode dibawah ini letakkan dibawah  <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Artikel Terkait</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 7;

maxNumberOfPostsPerLabel = 7;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Save Template dan silahkan anda lihat hasilnya

oh iya untuk tulisan anda bisa ganti dengan kata-kata anda sendiri

happy blogging... 
Read More

Menyisipkan Video Youtube di Postingan

Bisa saja sobat sekalian memilih untuk membuat blog yang berisi kumpulan video popular yang berarti dalam postingan harus disipkan video. Salah satu yang bisa dijadikan solusi web video sharing yang bisa digunakan adalah Youtube.com.
Bagaimana cara menyisipkan video youtube ke dalam postingan
ikuti saja langkah-langkahnya !

  • Masuk situs Youtube di www.Youtube.com
  • Cari video yang akan disisipkan di artikel blog
  • Setelah masuk kehalaman video yang diinginkan, carilah embed code yang ada dihalaman video tersebut dan copy kodenya.( kode embed ada pada box di sebelah tulisan embed) dan ukuran video bisa dirubah dgn mengklik ikon setting di samping tulisan embed.Untuk menyisipkan kode pada postingan :
  • Posting seperti biasa dan sisipkan embed code (copy > paste) yang telah kita dapatkan tadi

Selesai, anda bisa menikmati video tampil di postingan blog sobat….
Read More

Memasang Fasilitas Chat di blog

Agar blog lebih interaktif, kita bisa mamasang fasilitas chat di blog. Banyak fasiltas chat yang ada di internet, tapi untuk tutorial kali ini saya lebih merekomendasikan Shoutmix.
Untuk yang ingin memasang fasilitas chat di blog, silahkan ikuti langkah berikut



• Kunjungi http://www.shoutmix.com
• Pilih Create, dan isi semua pada halaman sign up lalu klik Continue (centang I Have read ….)
• Pilih model chat box yang akan dipakai lalu klik Continue
• Setelah itu akan muncul pemberitahuan shout box berhasil dan harus ke control panel untuk   
  mengkonfigurasi shout box. Klik link Control Panel
• Setelah berada pada halaman control panel, terserah mau langsung ambil kodenya atau ingin
  mengutak atik dulu, jika ingin mengutak atik klik bagian Stile & colors di bagian Display
• Setelah selesai Klik Get codes pada bagian Quick Star
• atur juga ukuran tampilan sesuai yang diinginkan dan setelah selesai copy kodenya

selesai dech……

dan untuk memasangnya di blog :

• Login ke blogger
Tambah Gadget > Tata letak > elemen halaman > tambah gadget > HTML/javascrip
• Tuliskan judul (misalnya : Chat, Chat Yuk, dll)
• Dan paste code yang didapatkan tadi
• Jangan lupa tambahkan kode <center> sebelum kode dan </center>
  setelah kode
• Dan selanjutnya hapus kode <ahref=http://www.shoutmix.com/รข  sampai degan  >shoutmix chat     widget</a>

Happy Chat ... !!!
Read More

Cara Membuat Blockquote


Agar dapat mempercantik tampilan pada postingan. sobat dapat Membuat BlockquoteBlockquote adalah ulasan sebuah kalimat yang dianggap penting di postingan, ini dapat tambah mempercantik tampilan pada postingan.
Untuk Cara Membuat Blockquote pada blogger ikuti langkah berikut

Masuk Edit HTML (jangan lupa back up template)
Centang  expand Template Widget
Cari kode  ]]></b:skin>  lalu tempatkan kode dibawah di atas kode 

.alert { background: #DDE4FF;
text-align: left;
padding: 10px 10px 10px 10px;
border-top: 2px solid #848484;border-bottom: 2px solid #848484;border-left: 2px solid #848484;border-right: 2px solid #848484;}


Klik simpan template…..  beri kode  <p class=”alert”>  di awal kalimat postingan dan kode   </p>   di akhir kalimat pada mode HTML

Happy blogging ….
Read More

Cara Mengupload file di Hosting


Setelah membahas tentang cara daftar domain di www.co.cc dan daftar Hosting gratis di www.000webhost.com sekarang akan kita bahas cara Upload file di Hosting 000webhost. bagi yang belum silahkan klik disini
 

Setelah menunggu dua hari kita baru bisa menggunakan Hosting gratis dari www.000webhost.com, dan untuk cara mengupload di Hosting gratis dari www.000webhost.com silakan simak langkah-langkah berikut ini :


1. Login di www.000webhost.com

2. Pilih Domain yang akan Disetting dan langsung menuju ke Control Panel  (klik Control Panel)



3. Di Control Panel pilih File Manager

Upload File Hosting



  4. Isikan Password kamu untuk menuju halaman Upload File
5. Selanjutnya Double Klik Folder Public


cara mengupload file hosting














6. Klik Upload dan Silakan Upload semua file web site kamu.

cara bikin blog











Agar proses peng-Upload-an lebih mudah silakan gunakan Software Filezila 
Read More

Cara Setting domain co.cc pada blogspot


Setelah menerangkan tentang cara setup domain co.cc pada hosting gratis 000webhost.com, sekarang kita lakukan cara setting domain co.cc pada blogspot.com / blogger.com. agar dengan melakukan setting domain co.cc pada blogspot,  nama blog yang blogspot.com akan berganti dengan nama domain yang telah dibuat di co.cc. Contoh domain blogspot anda misalnya http://namadomain.blogspot.com diganti jadi http://www.namadomain.co.cc.

Oh iya, Bagi yang belum daftar di co.cc, silahkan daftar dulu disini gratis. Bagi yang udah punya domain di co.cc, kita meluncur ke cara setting domain co.cc

Langkah 1 ( Setting pada co cc)
ร˜  Login di www.co.cc
ร˜  Klik domain yang akan anda setting
ร˜  Klik Setup
Lalu klik "Zone Record

cara setting domain

 
ร˜  Kemudian isi kolom yang ada di zone record sesuai gambar di bawah kemudian klik "Set up"
Host = isi dengan nama domain (www.domainanda.co.cc)
TTL = biarkan saja                          
Type = CNAME
           Value = ghs.google.com

cara setting domain



Selanjutnya lakukan Setting Pada Blogger

Caranya :
ร˜  Login ke Blogger
ร˜  Klik blog yang akan anda rubah nama domain-nya
ร˜  Klik Pengaturan lalu pilih tab Publikasikan

Klik Domain Custom

setting domain

 
ร˜  Klik  Beralih ke pengaturan lanjut

cara bikin blog


  • Pada kolom isian domain anda, masukan www.namadomain.co.cc jangan lupa ubah nama domainnya.
  • Pada "gunakan host file yang hilang" biarkan saja. Langsung masukan verifikasi kata"lalu klik simpan pengaturan
  • Selesai....
Setelah settingan selesai, anda jangan kaget jika tidak bisa mengakses blog anda. Karena proses pemindahan alamat domain ini memerlukan waktu. Bisa 1 atau 2 jam..bahkan bisa sampai 1 hari. Dan juga, anda jangan takut kehilangan traffic blog. Soalnya blog lama anda masih tetap bisa di akses. Cuma domain-nya langsung diarahkan ke alamat domain anda di co.cc. Jadi bagi yang belum daftar co.cc, silakan daftar disini gratis
Read More

Cara Daftar Domain di co.cc dan Hosting Gartis


Cara daftar domain dan bosting gratis, sedikit untuk anda tentang cara mendapatkan domain dan hosting gratis. Yang semula domain anda adalah namaanda.blogspot.com bisa anda ganti untuk lebih mudah diingat Contoh namaanda.co.cc

Baiklah sekarang kita coba untuk mendaftar domain co.cc, anda bisa daftar untuk domain gratis disini atau untuk anda yang ingin mencoba mengecek domain yang anda inginkan apakah tersedia atau tidak bisa anda cek dibawah ini :




Baiklah kita berlanjut untuk membuat domain, silahkan anda klik disini untuk membuat domain gratis

Tuliskan Nama Domain yang anda inginkan. misalnya : namaku, namaanda  dll. 

Kemudian Klik Tombol : Check Availability

cara daftar domain
 
  • www.bob85.co.cc is available
  • One year domain registration for $0
Bila tampilan seperti diatas berarti nama domain anda available (tersedia) dan One year domain registration for $0 ini berarti domain anda gratis, tetapi jika tampilan is already registered berarti domain yang anda inginkan sudah dipergunakan atau tidak tersedia segeralah ganti nama domain yang anda inginkan  dan jika tampilannya ada tulisan One year domain registration for $3 ini berarti domain anda tidak gratis segeralah ganti sehingga menjadi seperti gambar diatas.
  • Setelah semua ok   lanjutkan ke klik : Continue to registration
domain gratis

klik : Create An Acount Now
Lengkapi Data-data anda :
Di isi dengan benar ya
  • Nama lengkap
  • Alamat Email
  • Tanggal Lahir
  • Password
Account Information
(kalau yang di bawah ini boleh asal tapi harus di isi)
  • Alamat rumah
  • Kota
  • Negara
  • No Tlp
Dll

cara membuat blog


Klik Create An Account Now jangan lupa centang I accept the Terms of Service

cara daftar domain co.cc


Sing In sesuai dengan email dan password yang tadi anda daftarkan

domain co.cc


 
Klik Setup kemudian pilih nomor 1 (nameserver)

cara daftar domain





Masukan name servernya dari 000webhost.com
  • ns1.000webhost.com
  • ns2.000webhost.com

Klik Set up, rebes dech….. anda tingga tunggu untuk domain anda diaktifkan, ini kadang memakan waktu 24-72 jam… ok sabar ea…

Nah domain anda selesai Selanjutnya anda lanjut untuk melangkah ke Hosting yang juga Gratis dari ini bisa kita dapatkan di  000webhost.com ini, lumayanlah fasilitasnya untuk ukuran gratisan.
kita bisa mengkombinasikan dengan domain dari co.cc yang juga gratis.
Jadi domainnya kita bikin di Co.cc dan dihosting di 000webhost.

Mengapa harus 000webhost ?


Jika Anda ingin memiliki hosting kualitas profesional bersama dalam paket hosting gratis, datang dan host dengan 000webhost.com dan pengalaman pelayanan yang terbaik anda bisa mendapatkan gratis.

Didirikan pada bulan Desember 2006, 000webhost.com memiliki dasar gratis hosting terpercaya anggota lebih dari 60.000 anggota dan masih terus bertambah! Menawarkan kualitas profesional hosting, dukungan, uptime dan kehandalan, kami memiliki komunitas besar webmaster, Anda ingin menjadi bagian dari!

Daftar sekarang dan mendapatkan semuanya gratis:
*** 1500 MB ruang disk
*** 100 GB transfer data
*** PHP dan MySQL tanpa batasan
*** CPanel control panel
*** Website Builder
*** Tentu saja tidak periklanan!


Untuk mendaftar di 000webhost silakan ikuti langkah berikut ini :

1. Buka disini. Lalu klik Sign Up


web hosting gratis


2. Isikan nama domain anda (Domain yang sudah didaftarkan di www.co.cc di kotak dibawah tulisan       I want to host my own domain, kemudian isi form yang lain, jangan lupa centang I agree to term service


5. Confirmasikan IP kamu dengan mendownload IP_confirm dahulu lalu install di Komputer kamu (jika memakai warnet cari warnet yang memakai deepfreeze biar bisa untuk menginstall).

4. Catatlah data-data yang ada seperti nameserver details, Website details kedalam notepad karena nanti akan sangat berguna, jangan sampai hilang, kemudian klik pada tulisan Enter Control Panel, kemudian akan masuk ke halaman seperti di bawah.

 

5. Tunggu 2X24 jam agar anda bisa menggunakan layanan ini.


Happy blogging ….
Read More

Membuat Menu di Bawah Header / Judul Blog

Jika menggunakan template yang belum difasilitasi dengan menu horisontal dibawah header pada blognya, mungkin disini saya bisa membagi cara untuk membuat menu dibawah header/judul Blog
 

Login ke blogger > Layout/Tata Letak > Edit Html .
Selanjutnya Anda cari kode dibawah ini, untuk mempermudah pencarian silahkan gunakan CTRL+F 


<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

Anda ubah kode showaddelement='no' menjadi showaddelement='yes'

disimpan, sekarang klik Page elements / Elemen Laman > Tambah Gadget > HTML/Javascript , copy kode dibawah ini,simpan dan letakan tepat dibawah header.



<a href="http://www.boyadoe.com " class="navigation">HOME</a>
<a href="http://www.boyadoe.com " class="navigation">CONTACT</a>
<a href="http://www.boyadoe.com " class="navigation">BUKU TAMU</a>
<a href="http://www.boyadoe.com " class="navigation">FACEBOOK</a>
<a href="http://www.boyadoe.com " class="navigation">TWITER</a>
<a href="http://www.boyadoe.com " class="navigation">DOWNLOAD</a>
<a href="http://www.boyadoe.com " class="navigation">LAIN-LAIN</a>
<a href="http://www.boyadoe.com " class="navigation">CHATTING</a>

*Alamat url diatas silahkan sesuaikan dengan blog Anda.


Hal ketiga adalah supaya menu itu menimbulkan efek warna sehingga menjadi kelihatan menarik.

Klik Tata Letak > Edit HTML , cari kode
</b:skin> Copy kode dibawah ini dan letakan tepat diatas kode  </b:skin>

a.navigation {
background: #3333ff ;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

Perhatikan kode yang berwarna biru adalah warna tombol dan efek hover dan bisa dirubah sesuka hati Anda.Dan yang berwarna merah adalah jarak antara tombol satu dengan lainnya, silahkan Anda sesuaikan sesuai selera
Read More

Cara mengubah Lebar Template

mungkin kita bosan melihat tampilan template kita atau mungkin kita ingin mengutak atik ukuran gadget kita tapi kita mempunyai template yang kurang lebar, tengang aja karena bisa ko untuk mengubah lebar template.

Untuk mengetahui lebar kolom suatu template, kita bisa mengenalinya melalui style sheet CSS nya. Akan tetapi tentu saja ada perbedaan antara satu template dengan template yang lainnya, ini tentunya terserah kepada si designer template nya sendiri. Sebagai contoh untuk bagian header, jika menurut standar template blogger di dalam style sheet CSS nya di namakan header, akan tetapi untuk

template-template hasil buatan designer lain di luar blogger ada yang menamakan Banner ataupun nama-nama yang lainnya. Sebuah nama tentu tidak akan berpengaruh terhadap hasil yg di dapat, nama ini di pakai hanyalah agar mudah untuk di ingat atau di kenali oleh sang pemakai template apabila ingin melakukan editting template. 

berikut cara mengubah lebar template :


#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}

#sidebar-wrapper {
width: 220px;
float: right;
}

#newsidebar-wrapper {
width: 200px;
float: left;
}


Agar lebih faham



#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ini artinya header-wrapper mempunyai lebar sebesar 900px dan mempunyai border (saya artikan border adalah bingkai atau garis tepi) sebesar 1 pixel dengan garis yang solid (solid = garis penuh. dashed = garis putus-putus. dotted = garis berupa titik-titik) dengan warna border yang bisa di ubah-ubah (pada bagian font dan warna).

header-wrapper adalah hanya penamaan saja, tidak mutlak. Jika di ganti dengan nama kepala juga tidak apa-apa. width:900px; berarti lebarnya sebesar 900 pixel. nah nilai 900 pixel inilah yang bisa di ubah sesuai keinginan sobat, mau ditambah nilainya biar lebih lebar, atau di kurangi biar lebih kecil. Akan tetapi saran saya, nilai dari header ini harus sama dengan nilai dari lebar body agar terlihat bagus. border:1px solid $bordercolor; adalah agar bagian header mempunyai garis tepi sebesar 1 pixel, jika ingin lebih tebal sobat tinggal tambahin nilainya, atau jika sobat menginginkan garis tepi ini tidak ada maka sobat hapus saja kode ini.


#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

Ini artinya outer-wrapper mempunyai lebar sebesar 900px, jarak sela sebesar 10 pixel dengan align nya adalah rata kiri-kanan dan jenis huruf yang bisa di ubah-ubah melalui panel huruf dan warna.

outer wrapper hanyalah nama saja. width:900px; berarti lebarnya 900 pixel. 900 pixel ini adalah lebar yang di sediakan untuk kolom-kolom yang ada, sebut saja dalam hal ini kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Jadi dengan kata lain outer wraper adalah hasil penjumlahan lebar kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Apabila sobat memasukan content yang melebihi lebar kolom masing-masing, maka secara otomatis pula melebihi spek dari lebar yang di sediakan oleh outer wraper dan yang terjadi adalah salah satu kolom akan melorot ke bawah dan ini membuat blog kita menjadi kurang sedap untuk di pandang mata. Jadi apabila sobat ingin mengubah lebar salah satu kolom di antara yang tiga, maka lebar dari outer wraper pun harus di ubah dan di sesuaikan.


#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}

Ini artinya kolom main-wrapper mempunyai lebar sebesar 435 pixel dengan margin kanan sebesar 20 pixel, margin kiri 20 pixel dan kolom ini di letakan sebelah kiri.

main-wrapper adalah kolom halaman posting, apa-apa yang kita posting maka akan masuk ke halaman ini. width: 435px; berarti lebar kolom ini sebesar 435 pixel, tapi karena menggunakan margin-left dan margin-right, maka lebar kolom sebenarnya adalah sebesar 475 pixel. Akan tetapi yang 40 pixel hanyalah jeda saja agar batas kolom menjadi terlihat tidak bersentuhan. Apabila sobat merasa kolom ini terlalu sempit atau kekecilan, maka sobat bisa menambahkan nilai, contoh 550 pixel. Apabila sobat berniat merubah kolom ini, kolom outer-wraper pun harus di tambah nilainya. contoh tadi apabila main-wrapper ingin menjadi 550 pixel, maka 550px-475px=75px. ini berarti kolom outer-wraper harus di tambah sebesar 75px, jadi 900px+75px=975px.


#sidebar-wrapper {
width: 220px;
float: right;
}

Ini artinya kolom sidebar-wrapper mempunyai lebar sebesar 220 pixel dan di tempatkan sebelah kanan layar.

Kolom sidebar-wrapper adalah kolom sidebar atau kolom tempat di mana kita menyimpan berbagai aksesoris atau yg lainnya. width: 220px; berarti mempunyai lebar sebesar 220 pixel, apabila ingin di persempit atau di perlebar, maka kita hanya perlu mengubah nilai pixelnya saja. Cuma apabila merubah nilai kolom ini, jangan lupa untuk mengubah nilai space yang di sediakan oleh outer-wraper. contoh : apbila kolom ini ingin diperbesar menjadi 250pixel maka tambahan pixel adalah sebesar 30 pixel, nah jangan lupa untuk menambahkan pula pada kolom outer-wraper.


#newsidebar-wrapper {
width: 200px;
float: left;
}

Ini artinya kolom newsidebar-wrapper mempunyai lebar kolom sebesar 200 pixel dan di tempatkan pada layar sebelah kiri.

Seperti halnya sidebar-wrapper, kolom newsidebar-wrapper pun adalah tempat menyimpan berbagai aksesori ataupun blog tool. kolom ini di buat agar kita bisa lebih banyak memuat berbagai aksesori yang kita inginkan. Kolom newsidebar-wrapper ini lebarnya sebesar 200px, nah bila berniat merubahnya maka tinggal merubah nilai pixelnya saja, tapi jangan lupa untuk menambahkan pula pada kolom outer-wraper.


Sumber :  http://kolom-tutorial.blogspot.com/2007/07/ubah-lebar-kolom-template.html


happy blogging ...!!!
Read More

Cara membagi 2 kolom sidebar

Sebelum mulai membahas mengenai cara membagi 2 kolom sidebar blog, ada baiknya jika anda memperlebar dulu kolom sidebar blog anda. Karena jika kolom sidebar blog anda kecil, maka kalo di bagi 2 akan menjadi tambah kecil. Oleh karena itu, anda harus memperlebar dulu sidebar blog anda. Untuk cara memperlebarnya, anda bisa baca di postingan saya tentang bagaimana memperlebar template
 
kalo sekiranya lebar kolom sidebar blog anda sudah cukup, maka saatnya untuk membagi 2 kolom sidebar tersebut. Silahkan simak langkah - langkahnya :

1. Proses editing kode css
Setelah login di blogger, langsung masuk ke menu edit html dan tidak usah kasih tanda centang pada kolom expand template widget. Selanjutnya, cari kode css seperti ini :



#sidebar-wrapper {
width: 190px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

tidak harus sama sih, intinya cari kode css untuk membuat sidebar. Jika pada kode diatas yaitu #sidebar-wrapper Kemudian liat berapa jumlah width-nya, jika pada kode diatas width-nya adalah 190px.

logikanya jika ingin di bagi 2, maka jumlah width sidebar yang pertama harus dibagi 2. Misal..pada kode di atas width-nya 190px. Maka untuk membaginya tinggal 190px : 2 sehingga lebar masing - masing kolom sidebar adalah 95px. Memang betul, tapi ingat kita harus ngasih jarak antara sidebar yang ke-1 dengan yang ke-2 supaya tidak berdempetan. Bagaimana caranya..?! sebelum membagi 2, kurangi dulu sesuai dengan jarak yang di inginkan. Misal...saya mau kasih jaraknya 20px, maka lebar sidebar yang ke-1 menjadi 190px - 20px dan hasilnya 170px. Nah..baru setelah itu dibagi 2, sehingga lebar masing - masing sidebar menjadi 85px.

Setelah kita menentukan lebar masing - masing sidebar, selanjutnya tinggal mendeklarasikannya di kode css. caranya....copy paste kode sidebar yang pertama menjadi 2 dan ubah namanya menjadi
#sidebar2-wrapper Misal..untuk kode diatas menjadi seperti ini :


#sidebar-wrapper { --> kode sidebar awal
width: 190px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste)
width: 190px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

Selanjutnya, ubah width (lebar) masing - masing sidebar seperti yang telah dibahas tadi menjadi 75px. Sehingga hasilnya menjadi seperti ini :


#sidebar-wrapper { --> kode sidebar awal
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste)
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

Langkah yang terakhir untuk proses editting kode css yaitu menambahkan jarak antara 2 kolom sidebar tersebut. Caranya, tambahkan di kode css #sidebar2-wrapper berupa perintah untuk pendeklarasian jarak, yaitu margin. Sehingga hasilnya seperti ini :


#sidebar-wrapper { --> kode sidebar awal
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste)
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
margin-right: 20px;
}

Aplikasi di kode html
Nah..untuk proses editting kode css sudah selesai. Kemudian saatnya untuk mengaplikasikan kode css tersebut di kode html blog. caranya..cari kode html seperti ini dan fokuskan pad text yang berwarna hijau saja. Karena untuk yang berwarna merah tiap template pasti berbeda:



<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>

Jika sudah ketemu, copy paste text yang berwarna hijau di bawah kode html tersebut. Kemudian rubah type id-nya menjadi sidebar2. Maka hasilnya :


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>

jika sudah selesai klik dulu pratinjau, jika belum berhasil ulangi dari awal...

happy blogging
Read More

Related Posts Plugin for WordPress, Blogger...
 
© 2009 Tutorial blog, seo blogspot, foto seksi, gambar seksi, video | Powered by Blogger | Built on the Blogger Template Valid X/HTML (Just Home Page) | Design: Choen | PageNav: Abu Farhan