membuat widget artikel paling popular atau top article

Mungkin anda pernah melihat widget top article atau artikel paling popular pada mana mana blog sebelum ini.Widget ini adalah seperti yang terdapat pada bahagian bawah blog ini.Fungsi widget ini adalah memaparkan artikel yang paling banyak dibaca dan juga bergantung kepada berapa banyak jumlah komen yang diberi.Ia juga adalah berdasarkan trafik terakhir pada blog kita.

 Langkah langkah bagi membuatnya:

1. Login ke  Blogger
2. Seterusnya pilih "design"--->> page element
3. Klik pada Add a Gadget --->>> HTML/Javascript
4. salin kod dibawah ini:

<script type="text/javascript">

function pipeCallback(obj) {

document.write('<ul style="text-transform: capitalize;">');

var i;

for (i = 0; i < obj.count ; i++)

{

var href = "'" + obj.value.items[i].link + "'";

var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";

document.write(item);

}

document.write('</ul>');

}

</script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ff855e4f4d4a10fde1c2eb32074f99cd&url=http%3A%2F%2Fjendela-id.blogspot.com&num=10" type="text/javascript"></script>

<span style="font-size: 80%"></span>

5. Gantikan  jendela-id.blogspot.com dengan nama blog anda
6. Pada angka "10" menunjukkan jumlah "top article" yang akan dipaparkan dan
    boleh  digantikan
7. kemudian save widget anda.

Masaalah mengosongkan ruangan title pada widget

Adakah anda menghadapi masaalah apabila hendak mengosongkan ruangan pada title semasa memasukkan widget pada blog.Kebiasaanya error Required field must not be blank  akan keluar jika anda cuba save widget tanpa memasukkan tajuk pada title.Tapi masaalah ialah nya jika kita hendak masukkan widget bagi menu horizontal pada blog tentunya tak sesuai letak title yang akan terpapar diatasnya,lainlah kalau kita nak letak apa apa kat sidebar.Jika anda ada masaalah ini janganlah risau kerana ada cara untuk mengatasinya.

Anda cuma perlu taip pada ruangan title   <sp>
Kemudian save widget anda

membuat menu horizontal pada blog

Pada entri yang lepas saya ada membuat tutorial bagaimana hendak membuat menu bar tanpa hack template .tutorial kali ini masih lagi mengenai bagaimana hendak membuat menu horizontal pada blog.Untuk membuat tidak perlu kita hack template,cuma  masukkan kod pada add gadget.Tutorial ini adalah atas permintaan  oleh sahabat kita Sendra yang mahu saya membuat tutorial bagaimana hendak membuat horizontal navigation seperti yang terdapat bahagian bawah header blog ini..yang tertera perkataan HOME,ISI KANDUNGAN......untuk membuatnya ikuti langkah ini.

Untuk memasukkan horizontal menu ini anda perlu:
1.log in ke blogger,pilih design-->>page element
2.klik pada add gadget--->>pilih HTML/Javascript
3.kemudian pastekan  kod menu horizontal pilihan anda dibawah ini
4.selepas save kod ,seret widget HTML/Javascript ke bawah header

<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 10px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color:#fff ; background-color: #F781BE; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> </ul> </div>t;

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> </ul> </div>

<style> #navcontainer { background: #E3CEF6; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #F5A9D0 #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #A9A9F5; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #800000; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #F5A9D0 #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> </ul> </div>

<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#F7BE81; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> </ul> </div>

Untuk memasukkan link anda perlu mengedit bahagian ini pada kod diatas:
  <li><a href="#" ><span>Link 1</span></a></li>
  <li><a href="#" ><span>Link 2</span></a></li>
  <li><a href="#" ><span>Link 3</span></a></li>
  <li><a href="#" ><span>Link 4</span></a></li>

  Pada tanda "#" masukkan link anda
  Manakala pada Link 1,Link2,Link3 dan Link 4 pula masukkan perkataan yang ingin dipaparkan contoh
  HOME,CONTACT dan sebagainya.
  Jika hendak delete atau tambah link, padam atau tambah kod ini:

 <li><a href="#" ><span>Link n</span></a></li>
 * Warna warna pada menu boleh ditukar dengan mengubah kod warna pada kod kod menu diatas.

membuat menu navigasi breadcrumb

Breadcrumb adalah menu navigasi berurutan yang terdapat diatas di atas artikel posting dan ia merupakan cara efektif bagi memberi kemudahan kepada pengunjung bagi melihat kategori posting pada sesuatu blog.Disamping itu juga adalah digalakkan dari segi SEO pada sesuatu blog.

Berikut adalah cara membuat breadcrumb.

1. Pada Design, kemudian  pilih Edit HTML,klik pada Expand Widget Templates.
2. Cari kod berikut (gunakan Ctrl+F pada keyboard bagi memudahkan pencarian)

 <b:if cond='data:post.title'>

4. Setelah jumpa ,letakkan kod dibawah ini dibawah kod tadi.

<b:if cond='data:blog.pageType == "item"'>
<a href='http://namabloganda.blogspot.com/'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</b:if>

 

Nota:gantikan perkataan http://namabloganda.blogspot.com dengan nama blog anda.

8. Kemudian klik save Templates .

Menu breadcrumbs ini hanya akan muncul diatas artikel atau dibawah judul blog ketika anda membuka halaman suatu posting dan bukan halaman utama blogspot anda.

mengatasi masaalah pada kotak komen

Pernahkah anda menghadapi masaalah untuk memasukkan word verification pada komen yang hanya nampak separuh sahaja.Semasa saya blogwalking pernah saya terjumpa masaalah seperti ini pada beberapa blog,Bila terjadi begini tentunya pengunjung membatalkan hasrat untuk membuat komen.Untuk mengatasi masaalah seperti ini terdapat 3 cara yang boleh anda lakukan.

1.Tekan butang tab

bagi mengatasi masaalah perkataan yang hanya muncul separuh.klik pada perkataan word verification dan tekan butang tab beberapa kali sehingga kotak post comment muncul

2.Matikan fungsi show word verification for comments

Log in ke blogger,pilih setting
kemudian klik pada comments dan cari perkataan Show word verification for comments? dan pilih no
seterus nya klik save setting.

3.pasang fungsi scroll pada kotak komen

log in ke blogger
pilih design>>>edit HTML>>tandakan pada expand template widget
cari kod dibawah ini:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>

gantikan perkataan yang berwarna hijau menjadi seperti dibawah:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='yes' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>

Kemudian klik pada save template.

Letak iklan atau search box pada header

Entri kali ini masih lagi menyentuh lagi bahagian header,tapi kali saya tunjukan cara bagaimana hendak meletakkan kotak search atau iklan seperti adsense ,nuffnang dan sebagainya pada bahagian header.Sebelum membuatnya adalah disarankan membuat backup template terlebih dahulu.

Dari dashboard pilih design--->Edit HTML
kemudian cari kod ini pada template anda;

<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span><

Jika ingin meletakkan search box  dibahagian bawah blog description letakkan kod nya dibawah kod diatas.Jika ingin meletakkan dibahagian atas pula letakkan kod iklan atau search diatas kod tadi.
Kemudian klik preview jika tiada apa apa error,simpan template anda. 
selamat mencuba.

Hilangkan blog title dan description

Jika anda dalam platform blogger dan menggunakan template asal blogspot,anda akan dapati bahawa tajuk blog dan deskipsi akan kelihatan pada header blog.Kalau deskripsi  atau keterangan terlampau panjang kelihatan pula seperti iklan.Jika anda ingin menghilangkan tajuk dan deskripsi dari blog anda dan boleh meletak gambar sebagai header ikutilah langkah dibawah  ini.

1.masuk ke blogger dan klik pada dashboard
2.Klik pada layout dan pilih edit HTML
3.Cari kod  #header h1,jika tidak jumpa cari kod ini :#Header .description
4.masukkan kod display:none; pada hujung kod diatas

.Dibawah ini adalah contoh kedudukan kod tadi

#header .description { 
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
display:none; 

6.Kemudian save template anda.

Meletak gambar sebagai header blog

Template yang standard kebiasaanya tidak meletakkan add widget pada bahagian header yang mana menyebabkan kita tidak boleh memasang gambar sebagai header.Untuk membolehkan gambar dipasang sebagai header kita perlu membuat perubahan pada kod template.

Untuk membuatnya:

Cari kod ini pada template anda

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='YOUR LIKE (Header)' type='Header'/>

</b:section>

</div>

gantikan kod diatas menjadi seperti dibawah ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='YOUR LIKE (Header)' type='Header'/>
</b:section>
</div>

Nota: maxwidgets boleh anda gantikan bilangan yang diperlukan.kemudian  klik save template.

Untuk meletakkan gambar upload dulu ke photobucket.com dan salin kod HTML nya.
Kemudian masuk pada dashboard=>design=>page elements.pilih add a HTML/javascript dan masukkan kod dari photobucket tadi atau pada add a gadget pilih picture=>image=> from your computer.klik pada browse=>pilih lokasi imej disimpan.
Sesudah dimasukkan klik butang save.

Cara meningkatkan Alexa Rank

Terdapat banyak cara bagi  meningkatkan alexa rank , setiap blogger mempunyai cara tersendiri   bagi meningkatkan alexa rank. Bagi yang belum memahami apa itu alexa rank,ia adalah suatu pengukur trafik yang mengunjungi web atau blog.semakin kecil nilai Alexa Rank maka semakin baik trafik bagi sesuatu web ataupun  blog .

Berikut ini adalah lima cara bagaimana meningkatkan alexa rank:

1.Pasang  Widget Alexa
 Jangan segan untuk memasang widget ini pada blog anda walau pun nilai Alexa rank pada blog dalam   nilai juta.Dengan cara ini macam satu signal untuk dikirimkan ke server Alexa ketika blog kita dikunjungi.sehingga update pada blog kita terus menerus berjalan.Setiap klik pada widget Alexa yang dipasang pada blog kita jua dikira sebagai satu kunjungan.

2.Pasang Alexa Toolbar yang boleh didownload pada web Alexa.Jika sekiranya kita menggunakan Firefox adalah disarankan memasang add on Webrank Toolbar.

3.Menulis artikel pada sesuatu isu atau tema yang sedang hangat yang mana mampu meningkatkan trafik ke blog anda.

4.Melakukan Blogwalking dan meninggalkan komen pada blog yang kita lawati.,kebanyakan pemilik blog juga akan melawati blog anda kembali dan dari situ juga kita boleh mendapat trafik.

5.Sentuhan SEO pada posting adalah perlu agar lebih cepat di kesan oleh google dan blog kita menduduki halaman pertama hasil pencarian,akan membawa kesan dimana kemungkinan untuk dikunjungi adalah lebih tinggi.

memasang fungsi reply to comment

Bagi memasang reply pada komen adalah memerlukan kita membuat sedikit pengubahsuaian pada template.Hack yang dicipta oleh thisischen ini memudahkan kita membuat reply pada komen.

Cara unuk membuatnya:

Log in ke blog dan dashboard
klik pada Layout dan pilih edit HTML
klik pada expand widget Templates
cari kod ini:

<data:commentpostedbymsg>

lebih mudah gunakan Crtl + F untuk find dan taipkan kod disitu

jika tiada cari tag ini  

<data:commentPostedByMsg/>

atau pun boleh juga pada tag ini :

<dd class='comment-footer'> 

dan masukkan kod ini selepasnya

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=BLOG ID ANDA&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Reply to comment]</a></span>

Tukarkan BLOG ID ANDA ke Id blog anda yang boleh didapati pada URL di dashboard

Klik save template dan lihat hasilnya.
Update:untuk dapat blog ID klik pada Design dan tengok pada bahagian atas ruangan url (tempat alamat yg ada logo blog tu la  :) :) atau masa nak buat posting pun ada pada bahagian atas...

Cara buat widget Auto install

Kebiasaannya bila kita hendak memasang sesuatu widget kita perlu memasukkan kod pada add gadget.Tetapi ada cara bagaimana hendak membuat sesuatu widget menjadi auto install. Cara ini lebih memudahkan bagi pengunjung blog memasang sesuatu widget pada blog mereka.

Untuk membuatnya anda cuma perlu memasukkan kod berikut:

<form action="http://beta.blogger.com/add-widget" target="_blank" method="post"><input value="judul untuk widget anda" name="widget.title" type="hidden"><textarea rows="3" cols="5" style="display: none;" name="widget.content">MASUKKAN KOD WIDGET DISINI</textarea><input value="Letak tajuk Widget disini" class="button" name="go" type="submit"></form>

masaalah blog melorot

Maksud blog melorot ialah bahagian pada side bar seperti pada blog ini hilang kedua belah dan bersambung pada bahagian tengah.Pada blog ada dua bahagian penting iaitu side bar dan juga halaman posting.Bahagian ini mengandungi ukuran tertentu.Bila terlebih maka berlaku lah melorot.

berikut adalah antara puncanya:

1.Halaman posting

Artikel yang yang ditulis dalam posting akan menyesuaikan kedudukan nya secara automatik semasa kita membuat posting.Bila ada beberapa karekter tidak dapat menyesuaikan pada kedudukannya akan menyebabkan berlakunya melorot.

Antara karekter tulisan yang tidak boleh menyesuaikan  dengan lebar halaman ialah:

a)alamat link URL

Alamat yang panjang hingga melebihi halaman posting juga adalah puncanya.Alamat ini boleh kita cantumkan dengan kod supaya menjadi pendek contohnya:

<a href="alamat url">nama blog/tajuk posting

menjadi <a href="http://jendela-id.blogspot.com">blog melorot</a>
dan terpapar begini pada posting-->blog melorot


b)Ada beberapa karekter seperti tanda "----",tanda ______ ,tanda = = = = kalau terlampau panjang juga boleh menjadi puncanya.

c)banner dan plugin
 berhati hati dengan banner iklan  dan plugin contohnya seperti translator jangan sampai terlebih ukuran.

2.sidebar

Ukuran maksimum pada sidebar ialah 200 piksel.jikalau terlebih maka sidebar akan melorot kebawah.

Jika tidak terdapat satu pun kesalahan diatas bermakna ada kesalahan kod HTML.Bagi mengatasinya hendaklah menukar template baru.

Jika template baru telah ditukar tapi tiada apa apa perubahan bermakna ada error pada artikel.Ia disebabkan kita mengedit artikel dalam mode edit HTML dan mengeluarkan error seperti dibawah.

Satu lagi kesannya  jika kita cuba menukar jumlah posting untuk dipaparkan pada halaman utama ia gagal dilakukan.contoh seperti dibawah jika saya menukar kepada 4 blog jadi melorot.Jika 3 ok saja.Jadi ada antara artikel tadi yang bermasaalah.

cara letak avatar pada komen

Blogger telah pun memperkenal satu elemen baru bagi membolehkan kita meletakkan  avatar pada komen
Berikut adalah cara meletakkan avatar pada komen.

Log in ke bloggerpilih setting--->comments
kemudian pilih "Show profile images on comment”
jika sekiranya anda memiliki template biasa avatar akan muncul pada komen di blog anda.Tetapi jika anda menggunakan template selain dari terdapat pada blogger anda perlu membuat perubahan pada template.
masuk ke layout---->pilih edit HTML (backup dulu template anda)

Klik pada Expand Widget dan cari kod berikut:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

jika tidak jumpa bermakna anda kena buat sesuatu,jika tidak jumpa ikuti langkah berikut:

Cari:

<dl id='comments-block'>

gantikan dengan:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Kemudian cari semua kod:

<a expr: name 'data =: comment.anchorName' />

dan gantikan dengan:

<b:if cond='data:comment.favicon'>

<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>

</b:if>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:blog.enabledCommentProfileImages'>

<div expr:class='data:comment.avatarContainerClass'>

<data:comment.authorAvatarImage/>

</div>

</b:if>

Jika anda ingin menggunakan default avatar pada komen bagi seseorang yang tiada gambar profile avatar gunakan kod CSS dibawah ini:

.avatar-image-container{width:50px;height:50px;margin-top:-5px;}

.avatar-image-container img {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDjnpE-RfQt_mhjG7cLQBNmT9p0-gio7UbCQEHZleJV3eiNCPkhxc5CA5-4FBVD8dgRr_46K7uAZpvGy7wIx2v43c-ECWIaLccS892Iqxl2xmce9pJ75gwsuUumpVbcP58vYMQ6Pm1XLs/s400/grav.png);width:50px;height:50px;}

letakkan diatas kod:  ]] ></ b:skin >

Kemudian simpan template anda dan lihat hasilnya.