Modifikasi Tampilan Pesan Komentar Blog

8 comments:

Beberapa waktu lalu saya pernah menuliskan cara memperbaiki pesan komentar yang pindah ke bawah, saya juga sudah memberikan tutorial untuk merubah tampilan kotak komentar, maka kali ini saya akan membagikan lagi sebuah tutorial sederhana untuk merubah tampilan pesan komentar.

Seperti yang pernah saya bagikan sebelumnya, pesan komentar merupakan sebuah aturan yang di tulis oleh si pemilik blog, tentang bagaimana berkomentar yang baik dengan sopan di blog tersebut, pesan komentar juga dapat berisi ucapan terima kasih ataupun hanya sebagai pemanis tampilan komentar dari sebuah blog.

mempercantik tampilan pesan komentar

Pesan komentar dengan tampilan yang tidak biasa akan lebih mendapat perhatian dari si penggunjung, dengan begitu maksud dari pesan komentar tersebut dapat tersampaikan.

Bagi anda yang tertarik untuk merubah tampilan pesan komentar blog anda menjadi sedikit lebih keren dan unik, perhatikan langkah-langkah berikut:
  • Login >> Template >> Edit HTML.
  • Cari kode,
<p><data:blogCommentMessage/></p>
  • Kemudian ganti kode di atas dengan kode,
<div id='pra-comment'><data:blogCommentMessage/></div>
Keterangan: Biasanya terdapat lebih dari satu kode <p><data:blogCommentMessage/></p>, silakan anda ganti semua.

  • Berikutnya cari kode
]]></b:skin>

  • Letakkan kode di bawah tepat sebelum kode ]]></b:skin>.
/* Pesan Komentar
---------------------------------------------- */
#pra-comment{
 position: relative;
 background:#0070B0;
 color:#fff;
 padding:10px;
 font:normal 12px trebuchet ms;
 text-align:justify;
 border:3px solid #333;
 margin:15px 0 15px 0;
 line-height: 1.3em;
}
#pra-comment::after, #pra-comment::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#pra-comment::before {
border-top-color: #333;
border-width: 15px;
left: 82%;
margin-left: -36px
}
#pra-comment::after {
border-top-color: #0070B0;
border-width: 9px;
left: 82%;
margin-left: -30px
}

  • Terakhir klik Simpan Template, kemudian lihat hasilnya.

Demikian tutorial sederhana tentang bagaimana cara memodifikasi tampilan pesan komentar blog. Kurang lebihnya mohon maaf. Semoga bermanfaat.


Mempercantik Tampilan Komentar Blog

17 comments:

Kotak komentar blog adalah sebuah fasilitas yang di sediakan untuk melakukan interaksi antara pengunjung dengan pemilik blog tentang sebuah posting. Dari komentar, pengunjung dapat mengeluarkan unek-unek, memberikan pujian, saran atau bahkan mengkritik artikel yang di tulis oleh si pemilik blog. Untuk saya pribadi komentar dari pengunjung dapat memberikan semangat tersendiri, karena artikel yang sudah saya tulis di berikan komentar, walaupun komentarnya berupa kritik yang pedas.

Oleh karena begitu pentingnya sebuah kotak komentar, banyak dari para blogger memodifikasi tampilannya sehingga terlihat lebih keren, unik, juga cantik. Tampilan komentar yang indah akan memberi daya tarik tersendiri kepada pengunjung agar mau meluangkan sedikit waktunya untuk mengomentari artikel yang baru di bacanya.
tampilan komentar


Pada kesempatan kali ini saya akan coba berbagi sebuah tutorial sederhana, yaitu untuk merubah tampilan kotak komentar.

Langkah-langkah yang perlu di lakukan:

Login >> Template >> Edit HTML.

Cari kode ]]></b:skin>

Copy kode yang ada di bawah, kemudian letakkan di atas kode ]]></b:skin>
/* Comments
----------------------------------------------- */
#comments h4 {
font-weight:bold;
color:#000;
background:url(http://lh5.ggpht.com/-aTlt92RWTxg/UbIJIUGB5dI/AAAAAAAAJ64/xjbK-dAYEKM/bcg%25255B2%25255D.gif) repeat-x;
height: 35px;
line-height: 35px;
width: 100%;
margin:-5px 0 -7px -10px;
text-align:center;
border-top:1px solid #ddd;
display:block;
padding-bottom:6px ;
line-height:30px;
}
h4#comment-post-message {
display:none;
}
.comments .comments-content {
font-size:12px;
text-align:left;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em
}
#comments-block .comment-author {
margin:.5em 0
}
#comments-block .comment-body {
margin:.25em 0 0
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
letter-spacing:.1em
}
#comments-block .comment-body p {
margin:0 0 .75em
}
.deleted-comment {
font-style:italic;
color:gray
}
.comments {
font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif!important
}
.comments .comments-content .comment,.comments .comments-content .comment:first-child,.comments .comments-content .comment:last-child {
padding:0;
margin:0;
position:relative
}
.comments .avatar-image-container {
width:45px;
height:45px;
max-width:45px;
max-height:45px;
padding:2px;
border-radius:2px;
margin-right:5px;
margin-top:8px;
margin-left:8px;
position:relative;
background-color:white;
z-index: 2;
}
.comments .avatar-image-container img {
max-width:100%;
height:100%
}
.comments .inline-thread .avatar-image-container {
width:38px;
height:38px;
position:relative;
margin:0
}
.comments .comment-block {
margin-left:0;
padding:0 8px;
min-height:90px;
border:1px solid #4173af;
border-radius:2px
}
.comments .inline-thread .comment-block {
margin-left:45px;
padding:0;
border:0;
min-height:initial
}
.comments .comments-content .comment:hover .comment-block {
border:1px solid 4173af;
-moz-box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21);
-webkit-box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21);
box-shadow:0 1px 3px rgba(58,58,58,0.06),0 1px 2px rgba(54,54,54,0.21)
}
.comments .comments-content .comment:hover .inline-thread .comment-block {
border:0;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none
}
.comments .comments-content .comment-replies {
margin-left:20px;
margin-top:5px
}
.comments .comments-content .comment-header,.comments .comments-content .comment-content {
margin:0 0 8px;
padding-left:58px;
text-align:left;
line-height:1.6em;
}
.comments .comments-content .comment-header {
margin-top:8px;
height:14px
}
.comments .comments-content .inline-thread .comment-header,.comments .comments-content .inline-thread .comment-content {
padding-left:8px;
margin-top:0;
text-align:left;
line-height:1.6em;
}
.comment-actions {
position:absolute;
top:64px;
left:10px;
z-index:2
}
.comments .comment .comment-actions a {
background:#0671A1;
border-radius:4px;
position:relative;
display:block;
padding:2px 7px;
color:white;
top:-1px;
font-family:Arial,Sans-serif;
font-weight:bold;
box-shadow:0 1px 1px rgba(0,0,0,0.4);
text-shadow:0 1px 0 rgba(0,0,0,0.3);
-webkit-transition:none;
-moz-transition:none;
-o-transition:none;
-ms-transition:none;
transition:none
}
.comments .comment .comment-actions a:hover {
text-decoration:none;
background-color:#0057ae;
}
.comments .comment .comment-actions a:active {
top:0;
background-color:#0057ae;
}
.comments .comments-content .inline-thread li.comment,.comments .comments-content .inline-thread li.comment:first-child,.comments .comments-content .inline-thread li.comment:last-child {
padding:5px;
border:1px solid #4173af;
margin-bottom:5px;
}
.comments .comments-content .inline-thread {
padding:0
}
.comments .comments-content .comment-thread.inline-thread ol {
padding-top:8px
}
.comments .comments-content .comment-thread.inline-thread ol > div:first-child {
border-left:1px solid #4173af;
padding:10px
}
.comments .comments-content .inline-thread li.comment::before {
content:"";
position:absolute;
width:11px;
height:1px;
background-color:#4173af;
display:block;
left:-12px;
top:12px
}
.comments .comments-content .inline-thread li.comment:last-child {
margin-bottom:0
}
.comments .comments-content .inline-thread li.comment:last-child::after {
content:"";
height:100%;
width:5px;
display:block;
background-color:#FCFCFC;
position:absolute;
top:13px;
left:-13px
}
.comments .thread-toggle.thread-expanded {
position:relative
}
.comments .thread-toggle.thread-expanded::after {
content:"";
display:block;
width:1px;
height:32px;
position:absolute;
background:#4173af;
top:-8px;
left:0
}
.comments .comment .comment-actions .item-control a {
display:none;
background-color:#FCFCFC;
background-position:2px 50%;
background-repeat:no-repeat;
background-image:url(http://2.bp.blogspot.com/-qiWCKPMFp-Q/UMA9xcj59ZI/AAAAAAAAG9Y/dmS0sHqpwDE/s14/Trash.png);
border:1px solid #4173af;
position:absolute;
left:-10px;
text-indent:-9999px;
padding:0;
width:19px;
height:20px;
top:-42px;
border-radius:2px
}
.comments .comments-content .comment:hover .comment-actions .item-control a {
display:block
}
.comments .comments-content .comment:hover .inline-thread .comment-actions .item-control a {
display:none
}
.comments .comments-content .inline-thread li.comment:hover .comment-actions .item-control a {
display:block
}
.comments .inline-thread .comment .comment-actions .item-control a {
left:-61px;top:-35px
}
#comments h4#comment-post-message {
border-bottom:0;
background-color:transparent;
font-size:130%
}
.comment-form {
max-width:100%
}
.comments .comments-content .icon.blog-author {
display: block;
width: 0;
height: 0;
border: 6px solid transparent;
border-color:transparent #0671A1 #0671A1 transparent;
position: absolute;
right: 0;bottom: 4px;
}
.comments .comments-content .inline-thread .icon.blog-author {
bottom:-9px;
right:-5px;
}
.comments .comments-content .user,.comments .comments-content .datetime {
display:inline-block;
float:left
}
.comments .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {
content: url(http://4.bp.blogspot.com/-AEWksK942OE/UFiyLzXJhiI/AAAAAAAAFKE/jBegaGPClxI/s70/user-anonymous-icon.png);
}

Terakhir klik "Simpan Template".
Kemudian lihat hasilnya.

Sekian dulu artikel mengenai cara merubah tampilan komentar blog, Semoga bermanfaat.

Keterangan: cari kode /* comments, jika sebelumnya masih terdapat kode CSS yang berkaitan dengan komentar, sebaiknya anda hapus.

Mengatasi Pesan Komentar Blog Yang Pindah Ke Bawah

3 comments:
Pesan komentar adalah sebuah pesan khusus yang di tuliskan oleh si pemilik blog yang ditujukan untuk pengunjung. Pesan ini biasanya berisi tentang ketentuan bagaimana cara berkomentar yang baik sesuai dengan aturan atau persyaratan dalam berkomentar di blog tersebut. Selain itu ada juga para blogger yang membuatnya untuk ucapan terima kasih, atau juga sebagai pemanis agar para pengunjung ingin berkomentar di blog-nya.

Pesan komentar ini umumnya terletak di atas dari kotak komentar, tetapi dalam keadaan tertentu biasanya akan turun ke bawah dengan tiba-tiba. Pada pengalaman pribadi saya di blog ini, pesan komentar akan muncul di atas pada postingan yang belum ada komentarnya atau yang jumlah komentarnya masih sedikit, tetapi pada posting yang jumlah komentarnya diatas empat, pesan komentar ini akan pindah ke bawah.

pesan komentar pindah ke bawah

Saya yakin banyak para blogger akan mengalami masalah seperti gambar di atas. Karena masalah tersebut, pesan komentar yang di buat oleh pemilik akan sulit terbaca oleh pengunjung, pesan tersebut jadi terlihat seperti tidak berguna. Untuk itu saya akan memberikan solusi bagamana cara mengatasi pesan komentar yang jatuh ke bawah formulir komentar.

Perhatikan langkah-langkah berikut.

Login >> Template >> Edit HTML.

Cari kode di bawah,
<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>
tips: gunakan CTRL+F lalu ketikan threaded-comment-form untuk mempermudah pencarian.

Jika sudah ketemu, silakan anda hapus semua kode di atas dan ganti dengan kode berikut,
<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
<div id='form-wrapper'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
</div>
    <b:else/>
<div id='form-wrapper'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Selanjutnya cari kode document.getElementById(domId).insertBefore(replybox, null);

Ganti kode tersebut dengan kode document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);

Klik "Simpan Template".

Sekarang masalah pesan komentar yang pindah ke bawah, sudah berhasil anda atasi. Sekian artikel saya kali ini kurang lebihnya mohon maaf. Semoga bermanfaat.

Sumber: http://istiawanblog.blogspot.com.

Mendapat Backlink Berkualitas Dari W3 Directory

5 comments:

w3 directoryAda banyak cara mendapatkan backlink untuk sebuah situs, diantaranya aktif di berbagai forum diskusi dengan memberikan URL alamat website/blog kita, menambahkan link pada setiap artikel, atau bisa dengan cara saling tukar link dengan website/blog lain.

Selain cara-cara tersebut masih ada cara lain di antaranya dengan bergabung ke berbagai situs pemberi backlink, dan salah satu situs pemberi backlink yang sudah sangat terbukti kualitasnya adalah W3 Directory. Sudah banyak para blogger mendaftarkan blog-nya pada situs ini, khususnya pecinta SEO.

Untuk mendapatkan backlink dari W3 Directory anda terlebih dahulu harus mendaftarkan situs anda, dan setelah selesai mendaftarkan anda akan di minta untuk meletakan banner dari W3 Directory pada website/blog anda, jadi link ini bersifat dua arah. Intinya sama dengan saat kita bertukar link dengan blogger lain yaitu kita memasang banner W3 Directory pada situs kita, dan W3 Directory akan memasang link kita pada situsnya.

Banner yang di berikan W3 Directory merupakan sebuah vote link, maksudnya anda akan mendapatkan poin jika ada pengunjung yang meng-klik banner yang diberikan tersebut, semakin banyak poin yang anda peroleh maka posisi dari link anda akan naik pada daftar yang telah di bagi sesuai kategori, dengan begitu semakin besar link anda akan terlihat dan di klik oleh pengunjung dari W3 Directory.

Oke, sekarang saya akan menjelaskan bagaimana cara mendaftarkan blog pada W3 Directory.
  • Kunjungi www.w3-directory.com.
  • Lalu klik “ADD a web site” yang ada pada menu navigasi.
  • Setelah itu silakan isi formulir yang di sediakan. 
formulir daftar w3 directory
Keterangan:
URL :  URL dari website atau blog anda
Title : Nama website atau blog.
description : Deskripsi website atau blog.
KeyWords : Kata kunci.
identity : Nama anda.
email : Alamat email yang valid.
return link / back link : Isi kembali dengan URL website atau blog anda.
country : Negara tempat tinggal anda.
heading 1 : Pilih Kategori website atau blog anda.
heading 2 dan 3 boleh untuk tidak anda isi atau bisa dengan mengisikan dengan kategori lainnya.


  • Jika sudah klik “Sumbit my web site”.
  • Sekarang silakan copy kode yang di berikan.
copy kode
  • Untuk memasangnya pada blog anda, Tata Letak >> Tambahkan Gadget >> HTML/JavaScript.
  • Isi konten dengan kode yang sudah anda copy, lalu klik “Simpan”.

Jika sudah terpasang tampilannya akan seperti dibawah.

W3 Directory - the World Wide Web Directory

Terima kasih bagi anda yang sudah membantu voting dengan mengklik banner W3 Directory di atas.
Sekian dari saya kurang lebihnya mohon maaf. Semoga bermanfaat.

Menggunakan OpenID Untuk BerKomentar Pada Blog

24 comments:

Definisi OpenID
penjelasan openid
OpenID adalah sebuah fitur yang di sediakan untuk user (pengguna) yang dapat memungkinkan pengguna dapat masuk ke dalam berbagai layanan hanya dengan menggunakan satu buah identitas digital (ID). OpenID biasanya berbentuk sebuah URL/link yang diperoleh dari layanan penyedia fitur tersebut. OpenID juga memungkinkan anda untuk menggunakan akun yang ada untuk masuk, tanpa perlu harus login menggunakan user atau password anda. Dengan OpenID, anda dapat mengendalikan seberapa banyak informasi yang di bagi dengan situs yang anda kunjungi.

OpenID kini semakin banyak di gunakan, dengan lebih dari satu miliar akun dan lebih dari 50.000 website dapat menerima akun OpenID untuk login. Ada beberapa situs yang menyediakan layanan OpenID di antaranya, Google, Facebook, Yahoo, Microsoft, AOL, MySpace, Sears, dan masih banyak lagi.

Mengetahui OpenID Blog Kita
Setiap blogger yang mempunyai akun di blogspot akan memiliki sebuah akun OpenID. Bisanya OpenID merupakan alamat website atau blogger. Misalnya: http://bocah-alus.blogspot.com. Walaupun anda telah berganti domain dari blogger menggunakan alamat domain berbayar seperti .com .co.id .net dan lainnya, alamat tersebut pula lah yang di gunakan untuk OpenID. Untuk mengetahui secara pasti alamat OpenID anda, masuk ke blogger >> Setelan >> Lainnya, di situ tertulis alamat OpenID anda, jadi kalau ingin berkomentar mengunakan OpenID, alamat tersebut yang di gunakan.

mengetahui openid blog kita

Cara Menggunakan OpenID Untuk Berkomentar
Berkomentar antar sesama blogger memang memberikan banyak manfaat, selain terjalinnya tali silaturahmi sesama blogger kita bisa juga memperoleh manfaat lain seperti mendapatkan backlink gratis, mempromosikan blog kita dan masih banyak lagi. Tetapi, untuk mendapatkan backlink syaratnya kita harus berkomentar di blog jenis Dofollow (memiliki link pada kotak komentar). Namun kebanyakan para blogger enggan memberikannya demi keamanan situs mereka dari SPAMMER.

Bicara soal SEO atau backlink, yang menjadi masalah adalah ketika kita menjumpai blog yang tidak menyediakan fitur komentar standar seperti menuliskan nama dan URL untuk kita isikan, atau contoh kendala yang lain yaitu ketika kita hendak berkomentar ke blog yang berbeda platform, seperti misalnya dari blogspot ke wordpress, atau sebaliknya.

Dengan OpenID semua masalah di atas bisa teratasi dengan sangat mudah, cukup dengan satu akun OpenID saja maka kita sudah bisa menggunakannya untuk berkomentar di hampir semua blog yang mendukung OpenID.

Cara menggunakan komentar dengan OpenID juga sangat sederhana, pada bagian bawah kotak komentar anda dapat memilih sebagai siapa anda berkomentar, karena anda ingin menggunakan OpenID, jadi pilih "OpenID" >> masukan URL dari OpenID anda. Jika sudah klik "Lanjutkan".

komentar sebagai openid
url openid

Cara Verifikasi OpenID Di Blog
Kadang kala setelah mengetahui OpenID kita, dan kita menggunakannya untuk berkomentar, OpenID masih juga belum bisa di gunakan dan akan muncul tulisan merah "Your openid Credentials Could Not be Verifie". Jika muncul tulisan seperti itu artinya kita perlu memverifikasi bahwa itu merupakan OpenID milik kita,
caranya adalah sebagai berikut:
pilih menu Template >> Edit HTML, kemudian cari kode <head>.
Jika sudah ketemu, copy kode di bawah ini kemudian letakkan setelah kode <head>.
<!-- Open ID -->
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<!-- Open ID -->
Selanjutkan klik "Simpan template".
Tunggu beberapa menit, maka anda sudah dapat berkomentar menggunakan akun OpenID tersebut.

Sekian Artikel mengenai cara menggunakan OpenID untuk berkomentar pada blog.
Terima kasih atas kunjungannya.

Membuat Menu Tab View Untuk Widget Blog

3 comments:

Untuk membuat tampilan blog agar terlihat lebih rapi dan ringkas "Multi Tab View" mungkin menjadi salah satu pilihan untuk di pasang pada blog.

Tab sendiri merupakan suatu komponen yang memungkinkan pengguna dapat beralih dari satu layar/widget ke layar/widget lain dalam satu tampilan hanya dengan mengklik judul Sub Tab. Biasanya, Tab berjumlah lebih dari satu, tapi dalam satu waktu hanya dapat mengaktifkan satu layar/widget. Kini penggunaan komponen Tab semakin populer karena Selain membuat tampilan blog menjadi rapi dan rinkas, Multi Tab View ini juga menjadikan banyaknya menu yang ingin di tampilkan hanya membutuhkan tempat yang relatif sedikit.

Ada banyak cara yang dapat digunakan untuk membuat Tab View di blog, namun cara yang akan saya gunakan yaitu dengan menggunakan jquery. kenapa? karena ada banyak kelebihan dan keunggulan tersendiri dari tampilan tab yang akan saya buat, selain cara pembuatannya yang lebih sederhana tentunya, berikut kelebihan dari Tab View menggunakan Jquery:
  • Tampilanya akan mengikuti gaya dari header widget template anda, yaitu bentuk dan warnanya, jadi jika tidak di kostumasi terkait warna dan bentuknya pun sudah bisa sesuai dan serasi dengan blog anda.
  • Mempunyai efek jquery, atau efek smooth saat anda mengalihkan menu tab, yang tentu menambah nilai keindahan untuk blog anda.
  • Cara instalasi atau pemasanganya yang sangat mudah karena hanya perlu menambahkan satu widget "HTML/JavaScript" dan menyisipkan kodenya.
  • Tidak Memerlukan embel embel atau tambahan CSS atau script untuk dimasukkan di Edit HTML.
  • Anda tidak perlu susah dalam meletakan widget kedalam menu Tab View ini, anda hanya perlu meletakan beberapa widget tepat dibawah widget kode "HTML/JavaScript" yang anda sudah tambahkan. 
    membuat menu tab view

Bagi anda yang tertarik untuk membuat menu Tab View ini langsung saja ikuti langkah-langkahnya di bawah:

Login ke blog anda.

Pilih menu "Tata Letak" >> "Tambahkan Gadget" >> HTML/JavaScirpt.

Isi konten widget dengan kode yang ada di bawah,
<style type="text/css">
    .tabber {
     padding: 0px !important;
     border: 0 solid #bbb;
    }
    .tabber h2 {
     float: left;
     margin: 0 1px 0 0;
     font-size: 12px;
     padding: 3px 5px;
     border: 1px solid #bbb;
     margin-bottom: -1px;
     overflow: hidden;
     position: relative;
     background: #0000FF;
     cursor:pointer;
     -moz-border-radius:5px 5px 0 0;
     border-radius:5px 5px 0 0;
    }
    html .tabber h2.active {
     background: #000000;
     border-bottom: 1px solid #fff;
    }
    .tabber .widget-content {
     border: 1px solid #bbb;
     padding: 10px;
     background: #fff;
     clear:both;
     margin:0;
    }
    .codewidget, #codeholder {
     display:none; {
    </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $('#codeholder').bloggerTabber ({
      tabCount : 3
     });
    });
    </script><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'>
<a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></div>

Seperti yang sebelumnya saya beritahukan, untuk menentukan widget apa saja yang ingin anda letakan pada Tab View ini, anda hanya tinggal meletakkan widgetnya dibawahnya. (lihat gambar di bawah)
peletakan widget

Sekian artikel mengenai cara membuat menu Tab View pada blog.
Semoga bermanfaat.

Mendaftar Dan Memasang Widget Histats Pada Blog

1 comment:
Histats adalah sebuah situs yang memberikan informasi mengenai data statistik dari sebuah website atau blog setiap harinya. Dengan mendaftar dan memasang widget Histats di blog kita akan tahu statistik serta perkembangan blog secara periodik dan terukur. Informasi yang dapat diperoleh dari Histats di antaranya:
  • User Online yaitu banyaknya pengunjung yang sedang online di website atau blog anda.
  • Visitor Today yaitu jumlah seluruh pengunjung yang memasuki website atau blog anda dalam kurun waktu satu hari.
  • Page Views Today yaitu jumlah seluruh halaman yang dibuka oleh pengunjung dalam kurun waktu satu  hari.
  • Total Visitor yaitu keseluruhan jumlah total pengunjung website atau blog anda, mulai dari anda mendaftar di Histats.
  • Total Page Views yaitu akumulasi jumlah halaman yang dibuka oleh pengunjung, mulai dari anda mendaftar di Histats.

Jika anda tertarik, maka saya coba berbagi info tentang cara mendaftar dan memasang widget Histats di blog atau web.

Tutorial yang pertama ini adalah untuk mendaftar pada histats.com.
Ikuti langkah-langkahnya dibawah:
Kunjungi situs histats.com.
Klik “REGISTER” yang tertera pada menu.
registrasi histats.com

Pada Create new account isikan data-data yang di pelukan, jangan sampai ada yang ketinggalan. Jika sudah beri tanda centang pada I have read and agree Publisher Agreement Terms dan tuliskan captcha.
form registrasi histats.com

Dan klik "Register".

Jika berhasil maka akan ada pesan seperti ini.
registrasi sukses

Buka email yang tadi anda daftarkan dalam Create new account dan KLIK tautan yang di berikan Histats untuk mangaktifkan akun anda.

"your account is now active, please login now and start using histats.com!"

Jika ada pesan tersebut maka akun anda telah aktif, silahkan masuk lagi ke histats.com dan login dengan email dan password yang anda buat sebelumnya.


Mendaftar website pada histats.com
Langkah selanjutnya adalah mendaftarkan website atau blog anda. Blog yang di daftarkan bisa lebih dari satu, jadi dengan manfaatkan satu akun histats, anda bisa mendaftarkan banyak blog atau website anda dengan gratis.
Oke langsung saja,
Klik "+ Add a Website".

Sekarang isikan sesuai dengan data-data dari website atau blog anda.
form daftar situs histats.com

Keterangan:
  • Site url : url situs anda contoh : http://bocah-alus.blogspot.com/
  • Pilih bahasa : Indonesian - Bahasa Indonesia
  • Time zone : Pilih 11 - 04:38 am Asia/Jakarta
  • Category : Website anda termasuk kategori apa, silahkan di pilih. Misalnya Visual Art & Design --- Design.
  • Title : Judul web atau blog anda.
  • Description : Penjelasan singkat tentang blog anda.
  • Stats visibility : artinya pengaturan provasi siapa saja yang dapat melihat Stats atau data dari pengunjung Blog anda. 
  • ada dua pilihan visible to everyone atau visible only to me, silahkan di pilih.
  • Jangan lupa kode captcha.

Dan klik "Continue".
tombol selesai daftar situs histats.com

Beres sekarang website/blog anda sudah berhasil anda daftarkan.

Memasang widget Histats pada blog
Untuk yang selanjutnya yaitu mengenai cara memasang widget Histats pada blog.
Ikuti totorialnya dibawah,
Pertama klik nama blog anda.
klik nama blog

Selanjutnya klik "Counter CODE" yang ada di pojok kanan atas.
membuat code widget histats

Klik "+ add new counter".
menambahkan kode baru histats

Sekarang anda tinggal memilih tampilan yang sesuai dengan selera anda dengan mengklik gambarnya.
tampilan widget histats

Berikan tanda centang apa saja informasi yang ingin anda peroleh dari widget ini.
centang informasi histats

Jika sudah klik "Save".
simpan counter kode histats

Untuk mendapatkan script-nya klik counter yang sebelumnya telah anda buat.
counter id histats

Silakan anda copy script-nya.
script widget histats

Berikutnya login ke blog anda >> Tata Letak >> Tambahkan Gadget >> HTML/JavaScript.
Isikan konten dengan script yang sebelumnya anda copy lalu klik "Simpan".

Selesai.
Sekian artikel mengenai cara mendaftar dan memasang widget Histats pada blog.
Semoga bermanfaat.

Membuat Privacy Policy Pada Blog

No comments:

membuat privacy policy
Privacy Policy adalah sebuah halaman khusus yang dibuat oleh sipemilik situs dimana didalamnya berisi sebuah kebijakan privasi tentang website atau blog itu sendiri. Privacy Policy biasa dibuat oleh orang-orang yang ingin serius dalam menggeluti dunia internet, sehingga situs yang mereka buat nampak seperti situs yang professional. Privacy Policy juga sangat penting untuk para blogger yang mau menggeluti iklan PPC seperti Google Adsense atau lainnya, tidak hanya itu Privacy Policy juga menunjukkan siapa admin yang bisa dihubungi jika ingin menanyakan hal tentang situs tersebut, mengatur penggunaan artikel dan masih banyak lagi.

Diatas merupakan sedikit penjelasan mengenai Privacy Policy, bagi anda yang tertarik untuk membuat halaman Privacy Policy untuk situs anda sendiri, sekarang saya akan memberikan tutorial yang mudah untuk membuat Privacy Policy. Kenapa mudah? Karena saya akan menggunakan bantuan dari pihak ketiga, yaitu situs yang menggunakan layanan dalam pembuatan Privacy Policy ini, sehingga anda tidak perlu pusing menentukan apa saja yang harus anda tulis. Ada banyak situs yang menawarkan jasa untuk membuat Privacy Policy ini, dan semua tanpa mengeluarkan biaya apapun (free).

Berikut ini adalah cara untuk membuat Privacy Policy untuk situs anda:

  1. Kunjungi situs Serprank.com
  2. Kemudian pilih menu "Privacy Policy Generator". 
    serprank
  3. Sekarang isikan data-data dari situs anda. 
    formulir membuat privacy policy
  4. Jika semua data suda anda isikan, sekarang klik "Create my Privacy Policy".
  5. Privacy Policy telah selesai dibuat, sekarang anda tinggal meng-copy dan meletakkannya dihalaman situs anda.
Bagaimana, mudah kan?
Untuk anda yang ingin melihat Privacy Policy di blog ini bisa lihat di halaman ini.
oke sekian dulu artikel mengenai cara membuat Privacy Policy pada blog, semoga bermanfaat.

Mendaftar Dan Memasang Widget Alexa Lengkap

5 comments:

Mengenal Alexa
alexa.com

Alexa.com adalah perusahaan berbasis di California yang mengoperasikan situs yang menyediakan informasi tentang sebuah website. Perusahaan ini didirikan pada tahun 1996 oleh Brewster Kahle dan Bruce Gilliat.
Nama perusahaan dipilih sebagai penghormatan kepada Perpustakaan Alexandria.

Informasi utama yang diberikan oleh Alexa.com adalah peringkat terhadap sebuah website atau blog berdasarkan trafik atau banyaknya pengunjung baik di seluruh dunia ataupun di suatu negara tertentu. Alexa Rank mempunyai nilai peringkat dari nilai terkecil yaitu rangking satu, ke rangking yang lebih besar. Jadi sebuah situs akan lebih bagus jika memiliki Alexa Rank yang rendah.

Perlu di tekankan lagi situs Alexa.com dibangun dengan prinsip informasi yang tepat waktu dan relevan bagi pengguna. Secara singkat alexa menawarkan beberapa sistem yang di tawarkan kepada setiap pengunjungnya diantaranya:

  • Alexa Site Info adalah sebuah database yang memberikan informasi tentang sebuah situs, termasuk statistik, related links, query, informasi penting untuk situs  dan  banyak lagi. Semua informasi ini dapat ditemukan pada halaman Info Alexa Site. Cukup ketik URL situs/blog ke dalam kotak pencarian Alexa dan klik tombol "Search".
  • Alexa Site Audit merupakan penganalisa sebuah situs untuk memberikan pandangan mendalam tentang visibilitas di mesin pencari, dan memberikan wawasan tentang optimasi, monetisasi dan kondisi secara keseluruhan dari situs itu sendiri.
  • Alexa Top Sites berisi tentang daftar top sites yang tersedia berdasarkan negara, bahasa atau dalam kategori. Anda dapat men-download file secara gratis dari jutaan situs global yang diurutkan berdasarkan Alexa Traffic Rank.


Manfaat Alexa Rank
Jika blog Anda dimanfaatkan untuk mencari uang di internet maka Alexa Rank sangat penting bagi Anda karena banyak program-program penghasil dolar di internet seperti Sponsoredreviews, Blogsvertise, Buyblogreviews, dll yang mensyaratkan Alexa Rank untuk bisa bergabung. Jadi semakin kecil rangking Alexa blog Anda maka semakin banyak program yang bisa Anda ikuti yang artinya semakin besar pula kesempatan Anda untuk menghasilkan uang di internet.

Mendaftar di Alexa.com
Langkah-langkah dalam melakukan registrasi di Alexa.com sangat mudah jika anda mengikuti tutorialnya berikut ini:

  1. Kunjungi situs Alexa.com
  2. Setelah itu, klik “Create an Account” yang terdapat pada pojok kanan atas.
  3. Sekarang anda akan diberikan dua pilihan. Pilihan pertama untuk anda yang ingin mendaftar dengan akun email anda. Sedangkan yang kedua, anda bisa langsung login dengan menggunakan akun facebook anda.
  4. Jika anda mendaftar menggunakan akun email anda, isi data sesuai dengan form yang disediakan.
  5. Jika sudah klik “Register”.
  6. Sekarang buka email anda, dan lihat kode verifikasi yang telah dikirimkan oleh pihak Alexa.com, klik link tersebut.
  7. Selamat sekarang anda sudah berhasil mendaftar di Alexa.com.


Tutorial diatas hanya untuk membuat akun di Alexa.com, cara tersebut belum termasuk pendaftaran situs yang anda miliki, lalu bagamana caranya untuk mendaftarkan situs pada Alexa.com?

Cara mendaftarkan blog pada Alexa.com:

  1. Masih di situs Alexa.com, sekarang anda pilih dashboard yang terdapat pada menu utama Alexa.
  2. Jika sudah klik tombol “+ Add a Site”.
    menambah situs pada alexa
  3. Sekarang terdapat beberapa pilihan yaitu Premium atau Free, pilih Free dengan cara klik tombol “Sign Up” yang terdapat dikolom Free. 
    mendaftarkan gratis blog ke alexa
  4. Masukan URL dari situs yang ingin anda daftarkan, lalu klik tombol “Continue”.
    url blog pada alexa
  5. Perhatikan bagian “Option 2”, lihat kode verifikasi yang diberikan, sekarang anda copy kode tersebut.
    verifikasi kode saat daftar blog di alexa
  6. Tanpa menutup situs Alexa.com, buka tab baru kemudian login ke akun blog anda.
  7. Pilih menu “Template” >> “Edit HTML” >> cari kode <head>
  8. Jika anda sudah menemukan kodenya, letakan kode verifikasi yang diberikan Alexa.com tepat dibawah kode <head>.
  9. Jika sudah klik tombol “Simpan Template”.
  10. Sekarang kembali lagi ke Alexa.com, kemudian klik “Verify my ID”.
    verifikasi ID blog
  11. Selamat anda sudah berhasil mendaftarkan blog anda pada Alexa.com.


Itu merupakan langkah-langkah yang harus anda lakukan saat mendaftarkan blog pada Alexa.com, sekarang bagaimana cara memasang widget Alexa Rank pada blog?

Memasang Widget Alexa Rank Pada Blog
Berdasarkan pengalaman pribadi saya, memasang widget Alexa Rank pada blog tidak diharuskan bagi anda untuk membuat akun atau mendaftarkan blog anda terlebih dahulu di Alexa.com, anda bisa memasang widgetnya langsung walau belum memiliki akunnya.
Oke langsung saja, berikut ini adalah langkah-langkah memasang widget Alexa Rank pada blog:

  1. Kunjungi Alexa.com
  2. Pilih “Products” yang terdapat pada menu utama.
  3. Scroll ke bawah, sekarang cari link “See Other Tools for Site Owners”, klik link tersebut.
    macam-macam tools di alexa
  4. Sekarang anda ditampilkan empat buah kotak, karena anda ingin memasang widget jadi pilih kotak “Alexa Site Widgets”.
    alexa site widgets
  5. Sekarang anda tentukan widget seperti apa yang ingin anda tampilkan pada blog anda, isikan URL blog anda lalu lanjutkan dengan klik tombol “Build Widget”.
    membuat widget alexa rank
  6. Copy salah satu kode yang sesuai dengan selera anda.
  7. Sekarang buka kembali blog anda.
  8. Pilih menu “Tata Letak” >> “Tambahkan Gadget” >> “HTML/JavaScript”.
  9. Letakan kode widget yang sebelumnya anda copy di bagian konten, jika sudah klik “Simpan”.
  10. Sekarang anda sudah berhasil memasang widget Alexa Rank pada blog anda.
    widget alexa rank pada blog


Sekian dulu artikel saya tentang Alexa.com, kurang lebihnya mohon maaf.
Semoga Bermanfaat.

Mengenal CSS Dan Tips Penulisan Yang Baik

No comments:

mengenal css

Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets, merupakan salah satu bahasa pemrograman web  untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Keuntungan Penggunaan CSS
  • Mempermudah Pengaturan Web. Penulisan kode kode CSS akan dipisahkan dengan kode html sehingga pemilik web tidak akan bingung untuk mengganti dan memperbaiki tata letak maupun postingan yang dipublikasikan. Oleh karena itu CSS menjadikan halaman lebih menarik dan nyaman untuk dikunjungi.
  • Memperingan Penggunaan Bandwith. Semakin lenggangnya kuota bandwith akan memberi dampak kepada banyaknya pengunjung dalam waktu bersamaan tanpa lelet aksesnya.
  • Mempercepat Web Browser Untuk Mengakses Situs Kita. Pencarian situs browser atau serch engine akan mendeteksi melewati kode kode bahasa pemograman yang kita gunakan, disini CSS berperan sebagai penyederhana bahasa pemograman sehingga akses search engine yang menuju ke halaman web kita akan lebih cepat tersorot dan memungkinkan web kita untuk nangkring di nomor satu atau paling tidak halaman pertama.
  • Reformatting atau Progressive Enhancement. Dengan perubahan sederhana dari satu baris, sebuah stylesheet yang berbeda dapat digunakan untuk halaman yang sama. Ini memiliki keunggulan untuk aksesibilitas, serta memberikan kemampuan untuk menyesuaikan halaman atau situs ke perangkat target yang berbeda. Selain itu, perangkat tidak dapat memahami styling masih akan menampilkan konten.
  • Fleksibilitas. Dengan menggabungkan CSS dengan fungsionalitas sebuah Content Management System, cukup banyak fleksibilitas dapat diprogram ke dalam bentuk pengirenentukan nilai properti sebagai ekspresi sederhana (seperti margin-left: 10% - 3em + 4px ;). Hal ini berguna dalam berbagai kasus, seperti menghitung ukuran kolom dikenakan kendala pada jumlah semua kolom.

Kekurangan Penggunaan CSS
  • Kurangnya Variabel. CSS tidak berisi variabel. Hal ini membuat perlu untuk melakukan "mengganti semua" ketika salah satu keinginan untuk mengubah fundamental konstan, seperti skema warna atau berbagai ketinggian dan lebar.
  • Browser Dukungan konsisten. Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.
  • Batasan Kontrol Vertikal. Meskipun penempatan horisontal unsur-unsur umumnya mudah untuk mengontrol, penempatan vertikal sering unintuitive, berbelit-belit, atau tidak mungkin. Tugas-tugas sederhana, seperti berpusat elemen vertikal atau mendapatkan footer yang akan ditempatkan tidak lebih tinggi dari bawah viewport, baik memerlukan aturan style rumit dan unintuitive, atau aturan sederhana namun banyak yang tidak didukung.
  • Pengendalian Bentuk Elemen. CSS saat ini hanya menawarkan bentuk persegi panjang. Sudut bulat atau bentuk lainnya mungkin memerlukan non-semanurangan, dan kelemahan yang ditemukan melalui penggunaan CSS "murni", kegunaannya dalam web desain masih terlihat dengan cara lain. Karena aksesibilitas, konten web untuk ponsel ponsel dan PDA menjadi dapat diakses karena CSS. CSS mengkonsumsi bandwidth lebih rendah. Dan dengan CSS, hampir semua informasi tata letak tinggal di satu tempat: dokumen CSS. Karena informasi tata letak yang terpusat, perubahan ini dapat dilakukan dengan cepat dan global secara default.

Menuliskan CSS Dengan Baik
Saat pertama kali menggunakan CSS, menuliskan kodenya memang akan terasa melelahkan dan sangat rumit jika sebelumnya anda sudah terbiasa membuat sebuah website hanya dengan menggunakan table. Bagaimanapun juga setelah kita mengetahui pembuatan website dengan table bukanlah standar web yang baik, kita pun akan mulai beralih dan mempelajari CSS.
Saya rasa semua orang pasti bisa menuliskan CSS, bahkan saat ini banyak sekali perusahaan yang bergerak dibidang converting PSD ke HTML dengan CSS. Tapi satu hal yang jadi pertanyaan, "Apakah CSS yang dituliskan cukup baik?". Oleh sebab itu disini saya akan membahas tentang cara menuliskan kode CSS yang baik.
  • Memberikan indentasi (jarak) setiap menuliskan properti CSS
Berilah jarak indentasi saat menuliskan properti CSS, pisahkan antara properti yang satu dengan yang lainnya. Pemberian jarak akan membuat kode CSS terorganisasi dengan baik sehingga dapat dengan mudah dicari.

Contoh:
Body {
background: url(images.jpg);
font: 12px arial;
height: auto;
left: 0;
margin: 0 auto;
padding: 0;
top: 0;
width: 100%;
}

  • Disusun Secara Alphabetical
Penyusunan tulisan properti CSS secara alphabetical juga adalah cara yang baik dan mempermudah pencarian properti yang mau kita rubah nilainya. Perhatikan pada properti CSS pada poin sebelumnya, pada dreamweaver fasilitas ini sudah disediakan dengan menekan CTRL + Space.

  • Penulisan Kode Secara CSS Secara Singkat
Contoh:
.sample {
border-color: #000;
border-style: solid;
border-width: 1px;
}

Anda harus belajar bagaimana menuliskan kode CSS secara pendek. Pada penulisan properti border diatas ini adalah contoh penulisan yang kurang baik, Seharusnya properti diatas dapat dibuat singkat dengan menuliskannya seperti contoh dibawah,

.sample {
border: 1px solid #000;
}

Penulisan kode yang pendek akan mempercepat proses penulisannya, selain itu juga akan mempercepat tingkat cluseter dalam CSS sehingga bisa lebih cepat juga dirender oleh browser.

  • Menggunakan CSS Reset
Contoh:
html, body {
height:100%;
min-height:100%;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, blockquote, form, fieldset, input, textarea, th, td { 
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}

Setiap browser mempunyai kompatibilitas yang berbeda dan juga perlakuan berbeda pada CSS, anda harus mereset semua CSS sebelum memulai penulisan CSS, sehingga kode anda tidak terpengaruhi browser dan browser menampilkan item CSS anda dengan benar. Di atas adalah beberapa contoh untuk mereset CSS pada beberapa elemen.

  • Membuat Pernyataan Comments
Contoh:
/*membuat layout*/
.layout {
}

/*membuat sidebar*/
.sidebar{
}

Membuat comment di setiap bagian pengerjaan adalah hal yang baik untuk membuat penulisan kita tetap bersih dan terorganisir dengan baik. ini juga membantu anda untuk mempermudah penelusuran kode.

  • Hapus Semua Kode CSS Yang Tidak Terpakai
Mungkin saat menuliskan kode banyak atribut Class dan ID yang tidak jadi dipakai, buanglah segera semua atribut class dan ID yang tidak terpakai atau pisahkan dalam file referensi yang berbeda. Apabila anda belakangan ingin merubah CSS anda, anda tidak akan di pusingkan dengan banyaknya atribut class dan ID yang sudah tidak digunakan.


Ok sekian tips dari saya dalam menuliskan CSS yang baik, hal-hal kecil yang sering dilupakan namun sangat berarti bila diterapkan. Mudah-mudahan bisa bermanfaat dan bisa di amalkan.

Terima kasih.

sumber: www.w3function.com

Membuat Menu Navigasi Utama Pada Blog

1 comment:

Pengertian
Menu navigasi adalah sebuah fasilitas yang diberikan oleh si pemilik situs dimana didalamnya berisi sekumpulan link-link penting. Menu navigasi juga berfungsi sebagai pemandu kepada pengunjung agar dapat lebih mudah dalam menentukan kategori yang diinginkan tanpa harus bersusah payah mencarinya.

Menu navigasi dapat berbentuk mendatar (horizontal) atau menurun (vertical) juga dapat dibuat bercabang dengan sub menu (dropdown) atau tidak, tergantung kebutuhan dari situs tersebut.

Link yang biasa dipasang dalam menu navigasi utama ini, yang paling umum misalnya:
* Home
* Profile
* Sitemap
* Contact
* Buku Tamu
* Dll. Tergantung selera pemilik situs.

Manfaat
Menu navigasi yang terlihat menarik membuat situs terlihat lebih profesional walaupun dengan konten yang biasa-biasa saja. Bukan hanya itu, menu navigasi memiliki banyak manfaat diantaranya:
  • Lebih mudah mendapatkan backlink.
  • Mendapatkan nilai tambah dari google karena telah memanjakan pengunjung.

Karakteristik Menu Navigasi Situs Yang Baik
  • Kata yang terdapat pada menu harus mampu memberikan petunjuk yang jelas dan singkat.
  • Nama menu mewakili isi konten.
  • Gunakan istilah-istilah yang umum, singkat, dan mudah dipahami. 
  • Gunakan warna, ketebalan, atau bentuk yang berbeda dengan konten, sehingga bisa dengan mudah dibedakan.
  • Pisahkan letak navigasi atau berikan pembatas dengan konten, sehingga bisa dengan mudah dibedakan.
  • Jangan terlalu banyak memberikan navigasi yang tidak penting, karena bisa membingungkan.
  • Jika navigasi memang diharuskan banyak, maka gunakan menu bercabang (dropdown), supaya lebih sederhana dan tidak terlalu ramai.
  • Pelajari estetika, dan estetika-kan website ataupun blog kita, supaya terlihat cantik, anggun, dan nyaman untuk dikunjungi.
Beberapa tips pendukung menu navigasi situs yang baik:
  1. Mengatur Link menurut urutan pentingnya.
  2. Navigasi harus jelas dan Konsisten.
  3. Pastikan link Anda dapat dimengerti.
  4. Membuat Site Map untuk mempermudah navigasi.
  5. Cobalah untuk menggunakan kata-kata pendek & Jelas untuk link Anda.
  6. Sentralisasi menu navigasi.
  7. Link internal halaman dengan baik & menyediakan link ke homepage dari setiap halaman.
  8. Buatlah Top navigasi menu & footer.

Cara Membuat Menu Navigasi
Dari semua penjelasan diatas, mungkin bagian ini yang paling ditunggu. Ok langsung saja, kali ini saya akan menggunakan bantuan dari pihak ketiga. Ada beberapa website yang menyediakan fasilitas untuk membuat menu navigasi sendiri secara online. Salah satu website yang menyediakan fasilitas gratis untuk membuat menu navigasi horisontal, vertikal, dropdown menu adalah menggunakan Css Menu Maker. Di website tersebut telah tersedia beberapa macam menu navigasi yang bisa dimodifikasi sekaligus bisa download source / script menu-nya.

Css Menu Maker sangat cocok buat pemula yang ingin belajar membuat menu navigasi sendiri tanpa perlu dipusingkan dengan script css, karena script css tersebut sudah tersedia dan kita hanya perlu menyisipkan css script ke template blogspot agar berfungsi dengan baik. 

Secara pribadi saya lebih senang menggunakan menu navigasi yang dibuat menggunakan script css jika dibandingkan dengan menu navigasi yang dibuat menggunakan javascript, karena menurut beberapa sumber robot search engine lebih mudah menelusuri link pada menu css, jadi menu css lebih seo friendly dibanding menu javascript.

Langkah-langkah membuat menu navigasi utama pada blog menggunakan Css Menu Maker:

  • Kunjungi http://cssmenumaker.com/
  • Disana kita akan langsung disugukan beberapa pilihan menu yang keren-keren.
  • Pilih salah satu menu yang sesuai dengan selera anda.
menu

  • Jika anda sudah menentukan pilihan, klik menu tersebut.
  • Dibawah menu gambar ada beberapa pilihan menu, pilih Customize untuk mengedit link yang ada langsung secara online, atau anda juga dapat mendownload source code-nya dengan memilih menu Download Source.
css menu maker

  • Setelah anda memilih menu Customize, disini anda dapat mengedit tampilan atau link sesuai dengan kebutuhan situs anda. Ada beberapa menu tab, diantaranya Preview, HTML, CSS, Image. Pilihlah menu Image, copy alamat url dari image tersebut. jika sudah sekarang pilih menu tab CSS, sekarang anda cari kode dari background misalnya dari menu yang saya pilih kodenya seperti ini "background: #d9d9d9 url(grad_light.png) repeat-x left bottom;", ganti tulisan yang ada didalam kurung dengan alamat url image yang sebelumnya telah anda copy.
edit css menu maker

  • Jika semua telah anda lakukan, biarkan situs Css Menu Maker tetap terbuka, sekarang silakan login ke blog anda.
  • Lalu pilih menu Template > Edit HTLM.
  • Cari kode ]]></b:skin>, sudah ketemu? sekarang buka kembali Css Menu Makernya, copy kode yang ada dibagian CSS, kemudian anda letakan diatas dari kode ]]></b:skin>.
  • Masih pada Template > Edit HTLM. sekarang anda cari kode </header>, jika sudah ketemu, buka kembali Css Menu Makernya, dan copy kode yang ada dibagian HTML, kemudian letakan kode tersebut dibawah kode </header>.
  • Jika semua langkah sudah anda lakukan, sekarang klik Simpan Template.
  • Nah sekarang lihat perubahan yang terjadi pada blog anda.
  • Selesai.

Gimana simple kan? Ok sekian dulu tulisan saya kali ini, semoga dapat bermanfaat. Kurang lebihnya mohon maaf.
Terima kasih.

Pengertian Email

No comments:

mengenal email
E-Mail adalah singkatan dari electronic mail yaitu surat menyurat didalam internet. Email merupakan salah satu fasilitas atau aplikasi yang paling banyak digunakan di Internet. Hal ini karena Email merupakan alat komunikasi yang paling murah dan cepat. Dengan Email kita dapat berhubungan dengan siapa saja yang terhubung ke Internet di seluruh dunia dengan biaya pulsa lokal (bila kita menggunakan line telepon atau ISDN). Email menggeser penggunaan telepon dan fax dimasa kini.
Konsep Email adalah seperti kita mengirim surat dengan pos biasa, dimana kita mengirimkan ke kantor pos dengan dibubuhi alamat yang kita tuju. Dari Kantor Pos tersebut akan disampaikan ke Kantor Pos yang terdekat dengan alamat yang dituju dan akhirnya sampai ke alamat tersebut. Dan si penerima hanya membuka kotak pos-nya saja yang ada didepan rumah.
Dengan Email data dikirim secara elektronik sehingga sampai di tujuan dengan sangat cepat. Email juga dapat mengirim file-file berupa program, gambar, graphik dan lain sebagainya. Kita juga dapat mengirim ke lebih dari satu orang sekaligus pada saat bersamaan.
Sebuah alamat surat (mail address) adalah gabungan dari nama dan alamat. Dalam Internet Mail hal ini didifinisikan dengan nama user dan alamat host. Biasanya bentuk dasar dari mail address adalah nama@hostaddress dimana nama adalah nama user yang memiliki alamat mail dan hostaddress adalah alamat host, server tempat mail disimpan.
Setiap internet mail software akan selalu meminta data-data masukan sebelum mail dapat dikirimkan. Standar pengiriman e-mail biasanya terdiri dari beberapa field sebagai berikut:

Tanda HeaderDeskripsi Fungsi
ToDaftar alamat e-mail yang akan And
kirimi. Masing-masing lamat dapat
dipisahkan dengan tanda “;” atau koma
“,”.
CcDaftar alamat e-mail yang digunakan
untuk menyalin message yang Anda
kirimkan, berfungsi untuk mengecek
apakah sampai atau tidak. Biasanya
adalah alamat mail kita sendiri.
SubjectGambaran global terhadap message yang
Anda kirimkan. Gambaran ini yang akan
ditampilkan di mail box penerima.
BodyAdalah deskripsi lengkap dari surat yang
kita kirimkan.

Proses pengiriman ini tergantung dari software e-mail yang dipakai. Dalam dunia internet sudah banyak dipakai web-web server gratis untuk penempatan e-mail. Sebagai contoh adalah :
* Yahoo : http://mail.yahoo.com
* Google : http://mail.google.com
* dll .

Memasukan File PDF Ke Dalam Postingan Blog

15 comments:

Mungkin sesekali anda pernah berfikir untuk menampilkan atau memasukkan sebuah file PDF atau sejenisnya kedalam sebuah posting blog anda, tetapi anda belum mengetahui bagaimana caranya. Untuk itu dengan saya tulisnya artikel ini adalah untuk membantu anda dalam memecahkan solusinya, sehingga anda dapat dengan bebas membagikan dokumen apapun yang anda inginkan.

Ok langsung saja, berikut ini adalah langkah-langkah yang harus anda gunakan untuk memasukan sebuah file PDF ke dalam blog anda.
  • Kunjungi https://docs.google.com/ 
  • Jika sudah, login menggunakan akun google anda, apabila anda belum memilikinya anda bisa registrasi terlebih dahulu.
  • Setelah anda login, unggah file yang akan anda tampilkan dengan meng-klik simbol unggah.
  • Tunggulah beberapa saat sampai proses unggah selesai.
loading

  • Setelah selesai, maka file yang anda unggah barusan akan muncul dalam daftar "Driver Saya".
list

  • Klik file tersebut, maka akan muncul tampilan dari isi dokumen yang anda unggah barusan.
  • Sekarang anda klik "Buka".
open

  • Maka file akan terbuka keseluruhan dalam sebuah tab baru.
  • Pilih menu File >> Sematkan file PDF ini.
pin

  • Jika sudah maka akan keluar sebuah tampilan dengan menyertakan kode dari file tersebut, silakan anda copy kode tersebut.
script

  • Langkah terakhir anda letakkan kode yang sebelumnya anda copy kepostingan HTML blog anda.
  • Selesai :D
Sekarang anda dapat membagikan sebuah file PDF pada blog anda.
Semoga bermanfaat

Cara Mudah Mengatasi Laptop Yang Cepat Panas

1 comment:


Suhu panas pada laptop adalah masalah yang sering dirasakan oleh penggunanya, namun masalah ini kadang di abaikan karena terlalu fokus dengan pekerjaannya atau sedang asik bermain game. Dengan begitu, sering mereka tidak mempedulikan laptop yang mulai kepanasan.
Laptop yang cepat panas memiliki banyak efek negatif. Diantaranya, tidak nyaman saat menggunakannya, lambat, dan mudah hang.
Umumnya ada banyak penyebab panasnya laptop. Dari mulai debu, sampai yang mengutak atik dengan overclock.

laptop terbakar

Berikut beberapa hal yang harus anda perhatikan dalam menggunakan laptop:

  • Menjaga sirkulasi udara. Usahakan untuk tidak menyalakan Laptop pada permukaan yang empuk seperti Bantal, Kasur, dll. Hal ini dapat menyebabkan sirkulasi udara menjadi tidak lancar sehingga udara yang keluar-masuk menjadi terhambat dan tentunya mengakibatkan laptop anda menjadi lebih cepat panas.
  • Buatlah jadwal dalam menggunaan laptop.  Penggunaan laptop secara terus-menerus tanpa meperhatikan sudah berapa lama waktu penggunaannya pasti akan membuat laptop cepat panas, kondisi ini akan menurunkan performa hardware, dengan memperhatikan hal ini anda sudah melakukan perlindungan pada LCD laptop anda, karena LCD laptop adalah hardware paling rentan terhadap panas.
  • Hindari ruangan yang tertutup atau ruangan yang sirkulasi udaranya tidak baik. Sebaiknya, gunakan laptop anda di ruangan ber-AC atau tempat terbuka. Hindari juga menggunakan laptop dibawah terik matahari.
  • Sebaiknya tidak melakukan overlock dengan perangkat lunak dari luar. karena dapat membuat komponen-komponen laptop bekerja secara berlebihan, selain lebih cepat memanaskan suhu, hal ini dapat membuat komponen hardware tidak mampu bekerja lama dan cepat rusak.
  • Gunakan pendingin external, seperti cooling pad, harganya terjangkau kok. Atau jika anda tidak mau membelinya, anda bisa menggunakan kipas angin dan diletakkan disamping laptop saat anda  sedang menggunakannya.
  • Lakukan pembersihan secara berkala pada laptop anda, agar lubang sirkulasi udara bersih dari debu dan dapat bekerja secara maksimal.

Hal ini harus dipertimbangkan sebagai pedoman bagi anda pengguna laptop.
Sekian dari saya, Semoga bermanfaat..