Tampilkan postingan dengan label Template. Tampilkan semua postingan
Tampilkan postingan dengan label Template. Tampilkan semua postingan

Buka Situs yang di blokir part

 Melangkapi tulisannya saya akan mencoba share beberapa trik untuk membuka situs yang di blokir.

PURA PURA Translate
Ikuti langkah langkah berikut:
1. Buka alamat http://translate.google.co.id/?hl=id&tab=wT
2. Pada bagian kotak terjemahan kita ketikan alamat situs yang diblokir.
3. Lalu klik alamat situs tersebut.

CACHE GOOGLE
Membuka situs yang diblokir dengan menggunakan cache google merupakan salah satu trik favorit saya, simple dan langsung ketujuan he he. caranya adalah:
1. Misalkan situs yang terblokir http://www.facebook.com
2. Lalu buka google.com
3. Ketikan cache:http://www.facebook.com di kotak search google
4. Lalu klik alamat tersebut
Mudah bukan.
MODIFIKASI FILE HOSTS
Berikut caranya :
- Sebelum melakukan trik ini jangan lupa backup file hosts terlebih dahulu, hal ini bertujuan untuk mengurangi sekecil mungkin resiko kerusakan jika terjadi kesalahan . Ok lanjut
- klik start->all programs->accessories,
- klik kanan pada notepad
- klik run as administrator
- pada notepad, klik file->open
- buka folder : C:\Windows\System32\drivers\etc
- pilih All Files, bukan Text Documents
- klik hosts
- silahkan tambahkan baris ip dan host yang diinginkan
- Tambahkan smua dns static yang dimaksud.
Misalkan saya menggunakan
80.239.151.231 db1.rapidshare.com
80.239.151.232 db2.rapidshare.com
80.239.151.233 db3.rapidshare.com
80.239.151.234 db4.rapidshare.com
80.239.151.235 db5.rapidshare.com
80.239.151.253 games.rapidshare.com
80.239.151.251 images.rapidshare.com
Maaf untuk DNS static sengaja saya batasi karena terlalu panjang .
-Simpan perubahan tersebut, setelah itu kita bisa membuka browser kembali.

ANONYMOUS BROWSING
Kali ini kita akan menggunakan web proxy untuk mencoba membuka situs yang diblokir oleh admin jaringan kita. Web proxy ini dapat dimanfaatkan terutama bagi anda yang terhubung pada jaringan LAN (lokal) dan terdapat proxy didalamnya, Sehingga memudahkan anda dalam membuka situs target.

Anonymous proxy sangat membantu terutama dijaringan yang banyak dikantor, kampus, karena sudah ada proxy lokal yang memblokir situs tertentu. Salah satu yang menyediakan free anonymous adalah: http://anonymouse.org/anonwww.html

Cara mengunakan sangat mudah
-buka alamat http://anonymouse.org/anonwww.html di browser
-ketikan alamat website yang terbelokir dikolom yang tersedia.
-Lalu klik Surf Anonymously.

Situs lain yang menyediakan free web proxy antara lain:
www.megaproxy.com/freesurf/
www.hidemyass.com
www.Youhide.com
www.saintproxy.com
www.proxeey.com
www.stealthy.us
www.atunnel.com
www.sitesurf.net
Situs itu sangat dibutuhkan bila salah satu free web proxy tidak dapat dibuka dan kita masih memiliki alternatif yang lain

CGI PROXY
Cgi proxy adalah proxy yang memiliki kemampuan untuk menyimpan cookies. pengertian selengkapnya bisa anda cari sendiri di sini.

Contoh situs penyedia CGI Proxy
www.tools.rosinstrument.com/cgi-proxy.htm
www.anonsurf.biz
www.xrox.info
www.torproxy.net
www.myamigos.in
Untuk cara menggunakan hampir sama dengan anonymous browsing

PROXY INTERNET DOWNLOAD MANAGER

Pemakaian proxy tidak hanya untuk browser tetapi ada software downloader seperti IDM juga menyediakan opsi proxy ini. Cara menggunakan proxy pada idm sebagai berikut:
-Dalam menu pilih options
-Dalam kotak dialog internet download manager configuration, klik menu tab Proxy
-Beri tanda cek list pada Use HTTP Proxy dan masukan nilai proxy berserta nilai portnya.
-Klik OK

URL HACKING
Untuk trik yang satu ini saya sendiri belum tahu pasti namanya, biar agak keren kita namakan saja URL Hacking ..he he. Sesuai dengan namanya, kita hanya mengotak atik URL pada address bar.

-Misalkan situs target kita adalah http://www.facebook.com. Kita hanya perlu menambahkan huruf  's' aja menjadi https://www.facebook.com.

-Dengan menambahkan .nyud.net:8090/ misal http://www.facebook.com berubah menjadi http://www.facebook.com.nyud.net:8090/

-Dengan mengganti alamat situs dengan ip address. Loh kan gua gak tahu IP situsnya om, he he. Untuk mengetahui ip address suatu situs bisa menggunakan situs http://www.robtex.com atau dengan cmd dgn ping nama situs target. Misalkan yang diblokir http://www.facebook.com lalu kita ganti dengan ip address http://69.171.224.42

++++GOOD LUCK++++

Cara Membuat Buku Tamu / Guestbook Auto Hide di Blogspot

buku tamu cbox
buku tamu cbox
 Apa kabar sobat blogger?,   
cara membuat buku tamu 
auto hide di blog seperti yang tampak di sidebar blog ini.

Auto hide Shuotbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse), hanya beda sedikit dengan buku tamu show / hide. Sobat yang tertarik memasang widget ini, silahkan masukkan kode berikut di HTML/Javascript blog sobat.






<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=474593&amp;boxtag=3vxmn&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-474593" style="border: 0px solid;" id="cboxmain7-474593"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=474593&amp;boxtag=3vxmn&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-474593" style="border: 0px solid;border-top:0px" id="cboxform7-474593"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://celah-ilmu.blogspot.com/"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div> 

Caranya :
  1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
  2. Masukkan kodenya di kotak yang di sediakan.
  3. Klik Save 
Tambahan : kalo sob belum punya bisa daftar disini dan Ganti kode yang berwara Merah dengan kode buku tamu milik sobat. atau bisa menggunakan yang lain fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.

Sorot Author Comment di Blogspot

Trik ini adalah untuk memberikan Author Comment Highlight. Ini akan membuat komentar pemilik blog terlihat berbeda dari komentar-komentar pengunjung. Ini sangat berguna dan menarik blogger tip hack
Edit Html
Edit Html
  1. Login ke blogger, kemudian pilih "Layout --> Edit HTML". Jangan lupa untuk membackup template anda terlebih dahulu.
  2. Periksa "Expand Template Widget" kotak.
  3. Salin script ini dan meletakkannya sebelum]]> </ b: skin> atau copy ke daerah CSS Anda.


.comment-body-author {
background: #E6E6E6; /* Background color*/
color: #000; /* Text color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; /* Posotion*/

}

4. Then find this code:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>


<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>



<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>


</b:if>


<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

5.
Tulisan warna merah adalah kode yang harus Anda tambahkan ke script Anda. Posisi harus tepat.
6. Save Tamplate

Membuat Show Recent Comments di Blog

Ini sangat berguna untuk Tampilkan Recent Comments pada halaman blog utama. Kita bisa tahu siapa yang telah memberikan komentar pada artikel Kita tanpa membukanya satu per satu. Pada saat ini saya akan menunjukkan cara untuk menampilkan komentar terakhir di blog halaman utama kami. Ini sangat mudah

1. Login to blogger then go to "Layout"
2. Masukkan Script Dibawah ini  :



<script style="text/javascript" src="http://superinhost.com/blog/comments.js"></script>
<script style="text/javascript">
var numcomments = 8;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://celah-ilmu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>


  • Angka 8 adalah jumlah komentar yang akan muncul. 
  • Ganti http://celah-ilmu.blogspot.com Dengan Blog anda

3.
Anda dapat menunjukkannya dalam elemen halaman. Cukup klik pada "elemen halaman add -> HTML /  
    Javascript" Lalu menyisipkan script di dalamnya
  

Html/Script
Html/Script
4. Selamat mencoba semoga bermanfaat
http://celah-ilmu.blogspot.com
Template

Text Kursor Jadi Penurut Dengan Mouse kita

Sudah pernah lihat tulisan yang berputar-putar mengelilingi Cursor dan selalu mengikuti Cursor di blog blogger? Kita bikin pusing cursor.....

text cursor
text cursor

Panduan Cara Membuat Animasi Tulisan Berputar -putar Mengelilingi Cursor

  1. Login ke dashboard blogger
  2. Klik Tata Letak
  3. Setelah itu klik Tambah Gadget
  4. Pilih Gadget / Widget HTML/JavaScript
  5. Klik Edit HTML
Kemudian masukkan semua script / kode tulisan mengikuti cursor berikut pada widget tadi.
<style type='text/css'>
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #999;

/* End Optional */
/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type='text/javascript'>
//<![CDATA[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
// Your message here (QUOTED STRING)
var msg = "Tuhan apa yang kau ciptakan tiada yang sia-sia";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>
Keterangan :
// Your message here (QUOTED STRING)
var msg = "Tuhan apa yang kau ciptakan tiada yang sia-sia";

silakah ganti tulisan 
"Tuhan apa yang kau ciptakan tiada yang sia-sia";
dengan tulisan yang anda inginkan, karena tulisan itulah yang nantinya akan berputar-putar mengeliligi cursor.
Bagaimana cara merubah warna tulisan yang mengikuti cursor tersebut ?
Karena ada beberapa teman kita yang menanyakan hal tersebut maka akan saya tuliskan caranya.
Silakan lihat pada bagian atas kode script tulisan mengikuti cursor tersebut, maka kamu akan menemukan kode
color: #999;
Silakan ganti #999 dengan kode warna lainnya yang kamu suka (ingat hanya kode #999  yang diganti).




Membuat Scrollbar Daftar Isi atau Sitemap Blogspot Dengan Otomatis


scroll
scroll

Membuat Daftar Isi atau Sitemap Blogspot Otomatis Dengan Scollbar. Scrollbar memang sangat banyak kegunaannya dan dapat kita terapkan pada blog kita. Pada artikel sebelumnya scrollbar kita gunakan untuk blog kita

Artikel kali ini masih seputar penerapan scollbar akan kita terapkan pada sitemap atau daftar isi sebuah blog atau situs.

Membuat Daftar Isi atau Sitemap pada Blogspot sangatlah diperlukan ini bertujuan untuk memudahkan pengunjung blog kita mengetahui “menu” atau artikel apa saja yang ada di blog kita. 

Kali ini saya akan memberikan contoh yang dapat kita pergunakan pada blog kita masing-masing. Daftar Isi atau Sitemap Blogspot Dengan Scollbar contohnya dapat dilihat di Daftar isi atau sitemap blog ini.



Daftar Isi Blog ini juga memiliki kelebihan yaitu bisa menampilkan tulisan New!! untuk menandai artikel yang terbaru postingan kita.

Berikut cara Membuat Daftar Isi atau Sitemap Blogspot Otomatis Dengan Scollbar :

  1. Login ke akun blogger kita
  2. Masuk ke bagian halaman (page)
  3. Copy script sitemap yang ada dibawah ini dan paste pada area posting tapi pada HTML nya ya, Jangan lupa beri Judulnya seperti Sitemap atau Daftar Isi

Script :

<div style="border: 2px solid #eee; height: 300px; margin: 10px 0 0; overflow: auto; padding: 8px; width: 500px;">
<script src="http://laurencius-daftar-isi.googlecode.com/files/Laurencius_Daftar_Isi_New.js">
</script><script src="http://celah-ilmu.blogspot.com//feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
4. Klik Terbitkan Entri kemudian lihat hasilnya.

Catatan :
  • Ganti URL bertanda biru http://celah-ilmu.blogspot.com/ dengan URL blog teman masing-masing
  • Sesuaikan lebar dan ketinggian pada blog kita dengan merubah nilai height: 300px; dan width: 620px;

Sekian dulu Cara Membuat Daftar Isi atau Sitemap Blogspot Otomatis Dengan Scollbar ini, Semoga ada manfaatnya.

Cara membuat daftar isi perlabel di blog

html/tag
html/tag

Manfaat dari Membuat Daftar isi (SiteMap) blog diantaranya adalah memudahkan Pengunjung blog mengetahui isi dari blog dan memudahkan pengunjung blog memilih Judul postingan (Artikel) yang ada di blog. berikut cara Pembuatan daftar isi (SiteMap) perlabel di Postingan Blog: 

 

 

Menampilkan Daftar isi hanya satu Label (Kategori)

  1. Buka halaman "Entri Baru"
  2. Pilih penulisan Edit HTML, caranya klik Edit HTML yang letaknya diantara kotak penulisan postingan dan Judul Postingan tepatnya di sebelah kanan. Jangan menggunakan penulisan Compose.
  3. Copy kode di bawah ini

<b>Software</b>
<script style="text/javascript">
var numposts = 5;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://enes-sc.googlecode.com/files/rc-label.js'></script>
<ol>
<script src="http://celah-ilmu.blogspot.com//feeds/posts/default/-/Software?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
 

      4. Paste kode di atas yang sudah di copy tadi di kotak penulisan postingan 
      5. Klik Terbitkan Entri - Selesai
Selamat Mencoba



Software

Membuat Template Sendiri Dengan Modifikasi Widget Default

Widget dari blogger yang saya modifikasi kali ini adalah Popular Post, sebuah widget yang berfungsi untuk menampilkan postingan atau artikel mana yang paling banyak diminati para pengunjung. Secara default widget Popular Post ini sudah menarik karena sudah ada fitur thumbnail dan summary. Tapi menurut saya sih kondisional, widget itu bisa langsung dipasang pada blog yang lebih banyak menggunakan artikel daripada gambar, jika widget default itu dipasang pada blog yang bertipe gallery sepertinya kurang cocok.

popular
Template demo



Nah, kali ini saya mencoba untuk memodifikasi widget tersebut agar cocok dipasang pada blog yang mempunyai konten gallery. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal. Jika anda tertarik, berikut ini cara membuatnya :
  1. Login ke Blogger dengan akun Anda
  2. Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
  3. Lalu masukkan kode berikut ini diatas ]]></b:skin> :
    PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}
    .PopularPosts ul{padding:5px 0}
    .PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
    .PopularPosts .item-content{position:relative;float:left;margin:0}
    .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
    .PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
    .PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}
    .PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}
    Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
  4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
  5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :

    popular

    Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
  6. Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :

    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content popular-posts'>
        <ul>
          <b:loop values='data:posts' var='post'>
          <li>
            <b:if cond='data:showThumbnails == &quot;false&quot;'>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'><data:post.title/></a>
              <b:else/>
                <!-- (2) Show only snippets -->
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                <div class='item-snippet'><data:post.snippet/></div>
              </b:if>
            <b:else/>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (3) Show only thumbnails -->
                <div class='item-thumbnail-only'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                </div>
                <div style='clear: both;'/>
              <b:else/>
                <!-- (4) Show snippets and thumbnails -->
                <div class='item-content'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                  <div class='item-snippet'><data:post.snippet/></div>
                </div>
                <div style='clear: both;'/>
              </b:if>
            </b:if>
          </li>
          </b:loop>
        </ul>
        <b:include name='quickedit'/>
      </div>
    </b:includable>
    </b:widget>
  7. Setelah ketemu, ganti dengan kode berikut ini :
    <b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
    <b:includable id='main'>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content popular-posts'>
        <ul>
          <b:loop values='data:posts' var='post'>
          <li>
            <b:if cond='data:showThumbnails == &quot;false&quot;'>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'><data:post.title/></a>
              <b:else/>
                <!-- (2) Show only snippets -->
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                <div class='item-snippet'><data:post.snippet/></div>
              </b:if>
            <b:else/>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (3) Show only thumbnails -->
                <div class='item-content'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                </div>
                <div style='clear: both;'/>
              <b:else/>
                <!-- (4) Show snippets and thumbnails -->
                <div class='item-content'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
                  </b:if>
                  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                  <div class='item-snippet'><data:post.snippet/></div>
                </div>
                <div style='clear: both;'/>
              </b:if>
            </b:if>
          </li>
          </b:loop>
        </ul>
        <b:include name='quickedit'/>
      </div>
    </b:includable>
    </b:widget>
  8. Terakhir, save templates lihat hasilnya.
Modifikasi widget Popular Post dari blogger ini tidak hanya untuk blog gallery saja, Anda juga bisa memakainya pada blog yang bukan gallery seperti yang terlihat di sidebar pada blog ini. Demikian tadi tutorial memodifikasi tampilan Popular Post untuk template Gallery jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar maaf kalau sudah ada tutorial seperti ini sebelumnya, selamat mencoba dan semoga bermanfaat


Recent Post

Membuat Daftar Isi atau Sitemap Blogspot Otomatis Dengan Scollbar Blogspot

sitemap
sitemap
Widget Add comments Daftar_Isi_Otomatis_Scollbar Membuat Daftar Isi atau Sitemap Blogspot Otomatis Dengan Scollbar. Scrollbar memang sangat banyak kegunaannya dan dapat kita terapkan pada blog kita. Pada artikel sebelumnya scrollbar kita gunakan Pada Arsip Blog Di Blogspot. Artikel kali ini masih seputar penerapan scollbar akan kita terapkan pada sitemap atau daftar isi sebuah blog atau situs. Membuat Daftar Isi atau Sitemap pada Blogspot sangatlah diperlukan ini bertujuan untuk memudahkan pengunjung blog kita mengetahui “menu” atau artikel apa saja yang ada di blog kita. Kali ini Laurencius akan memberikan contoh yang dapat kita pergunakan pada blog kita masing-masing. Daftar Isi atau Sitemap Blogspot Dengan Scollbar contohnya dapat dilihat di Daftar isi atau sitemap blog ini. Daftar Isi Laurencius Daftar Isi Blog ini juga memiliki kelebihan yaitu bisa menampilkan tulisan New!! untuk menandai artikel yang terbaru postingan kita. Berikut cara Membuat Daftar Isi atau Sitemap Blogspot Otomatis Dengan Scollbar :

  1.  Login ke akun blogger kita 
  2.  Masuk ke bagian halaman (page) 
  3.  Copy script sitemap yang ada dibawah ini dan paste pada area posting tapi pada HTML nya ya, Jangan lupa beri Judulnya seperti Sitemap atau Daftar Isi Script :

Script :
<div style="border: 2px solid #eee; height: 300px; margin: 10px 0 0; overflow: auto; padding: 8px; width: 620px;">
<script src="http://laurencius-daftar-isi.googlecode.com/files/Laurencius_Daftar_Isi_New.js">
</script><script src="http://celah-ilmu.blogspot.com//feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

4. Simpan


selamat mencoba

Membuat Recent Pos Di blog sendiri

Tutorial recent post
Tutorial recent post
Pada episode kali ini saya akan membahas tentang membuat widget si sidebar atau manalah tempatnya yang berisikan postingan-postingan terakhir kita. Dengan begitu pengunjung dapat mengetahui postingan kita yang terakhir... Iya sih di halaman depan kan postingan-postingan kita yang terakhir tapi kan jika anda menampilakan 5 postingan terakhir Anda dihalaman depan yang kelihatan cuma 5 postingan terakhir.... dan kalau kita mau menampilkan 10 postingan kita yang terakhir di halaman depan kan kepanjangan. Dan Postingan terakhir kita berupa link di sidebar
ini dibawah ulasanya...

1. Layout --> Page Elements

2. Pilih tempat yang kamu inginkan kemudian Add a Gadget

3. pilih HTML/JavaScipt dan taruh code dibawah didalamnya



<script src="http://sites.google.com/site/anasku2000/post-terakhir.js"></script>
<script>var numposts = 5; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://celah-ilmu.blogspot.com//feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

Angka 5 yang tercetak tebal dan merah diatas adalah angka postingan yang mau kamu tampilkan.
Selamat mencoba

Cara Membuat Tulisan Berjalan dengan berbagai model

Cara Membuat Tulisan Berjalan - Setelah mengetahui cara membuat spoiler, trik berikutnya adalah membuat teks atau tulisan atau widget yang ada pada blog bergerak sendiri dengan menggunakan kode HTML. Teks atau tulisan bergerak ini biasa di sebut dengan tulisan berjalan, dalam kode HTML di kenal dengan perintah marquee.

Cara membuat tulisan berjalan | Cara membuat tulisan bergerak | Cara membuat tulisan berjalan di blog | Cara membuat tulisan berjalan pada blog | cara membuat widget berjalan dan bergerak
Gambar 1 : Cara Membuat Tulisan Berjalan

Membuat tulisan berjalan akan memberikan tambahan variasi pada blog. Biasanya, tulisan berjalan atau widget berjalan pada blog di gunakan oleh blogger untuk menampilkan semua widget atau tulisan yang tersimpan di dalam kotak yang tidak menggunakan scroll. Kecepatan berjalan, arah gerakan dan variasi lain bisa di tambahkan pada teks atau tulisan berjalan untuk membuat tulisan atau teks berjalan bergerak atau berjalan sesuai dengan yang kita inginkan.

Cara Membuat tulisan berjalan

Kode HTML dasar yang di gunakan untuk membuat tulisan bergerak atau berjalan adalah :

<marquee>http://celah-ilmu.blogspot.com</marquee>

Kode tersebut akan membuat tulisan berjalan seperti di bawah ini :

http://celah-ilmu.blogspot.com


Cara Membuat Widget Berjalan

Membuat widget berjalan atau bergerak sama saja dengan cara membuat tulisan berjalan. Gunakan kode yang sama seperti kode di atas lalu ganti tulisan yang berwarna merah dengan kode widget yang ingin di buat bergerak atau berjalan sehingga kodenya seperti ini :

<marquee>Tulisan Berjalan</marquee>

Ubah kodenya menjadi seperti ini :

<marquee>Kode Widget</marquee>

Ganti kode yang berwarna merah dengan kode widget yang ingin di buat bergerak

Macam - Macam Tulisan Berjalan

Setelah mengetahui cara membuat tulisan dan widget berjalan, berikut saya jelaskan cara mengatur gerakan dan memberi variasi pada tulisan berjalan agar terlihat lebih menarik

1. Mengatur Kecepatan Gerakan
Tambahkan perintah scrollamount="angka kecepatan" untuk mengatur kecepatan gerakan tulisan berjalan sehingga kodenya menjadi seperti ini :

<marquee scrollamount="angka kecepatan">http://celah-ilmu.blogspot.com</marquee>

Ganti kode berwarna biru dengan angka ( misalanya 2, 3, atau 4 dsb ) dan ganti Tulisan berjalan dengan teks atau tulisan atau kode widget yang ingin di buat berjalan atau bergerak.
Contohnya :

<marquee scrollamount="2">http://celah-ilmu.blogspot.com</marquee>
<marquee scrollamount="3">http://celah-ilmu.blogspot.com</marquee>
<marquee scrollamount="4">http://celah-ilmu.blogspot.com</marquee>

Ke tiga kode diatas akan membuat tulisan berjalan dengan kcepatan berbeda yaitu 2, 3, dan 4. Kode di atas akan membuat tulisan berjalan seperti berikut ini :

http://celah-ilmu.blogspot.com http://celah-ilmu.blogspot.com http://celah-ilmu.blogspot.com
Semakin besar angka scrollamount semakin cepat tulisannya berjalan.

2. Mengatur Arah Gerakan
Tambahkan perintah direction="arah gerakan" untuk menentukan arah gerakan tulisan berjalan. Adapun arah gerakan yang bisa di gunakan adalah :

right = arah gerakan ke kanan
up = arah gerakan ke atas
down = arah gerakan ke bawah

Penempatan kode arah gerakan sama dengan penempatan kode kecepatan gerakan. Contohnya seperti ini :

<marquee direction="right">http://celah-ilmu.blogspot.com</marquee>

Jika kode kecepatan dan kode arah gerakan  di gabung, kodenya akan menjadi seperti ini :


<marquee scrollamount="2" direction="right">http://celah-ilmu.blogspot.com</marquee>

<marquee scrollamount="2" direction="up">http://celah-ilmu.blogspot.com</marquee>

<marquee scrollamount="2" direction="down">http://celah-ilmu.blogspot.com</marquee> 

hasilnya :

http://celah-ilmu.blogspot.com http://celah-ilmu.blogspot.com http://celah-ilmu.blogspot.com

Dengan memahami contoh di atas, anda sudah tahu bagaimana cara menambahkan perintah dan menggabung perintahnya untuk memberikan efek berbeda pada tulisan berjalannya. Sekarang saya akan memberikan beberapa kode perintah untuk tulisan berjalan. Anda tinggal menggabung kodenya jika anda menginginkan efek berbeda pada saat membuat tulisaan berjalan.

3. Tulisan Berjalan Bolak Balik
Membuat tulisan berjalan mondar mandir juga menarik. Untuk itu, berikut cara membuatnya versi celah-ilmu. Kode yang di gunakan :

<marquee behavior="alternate">http://celah-ilmu.blogspot.com</marquee>

Hasilnya :
http://celah-ilmu.blogspot.com

4. Tulisan Berjalan dan Berhenti
Kode yang di gunakan :

<marquee onmouseover="this.stop()" onmouseout="this.start()">http://celah-ilmu.blogspot.com dan Celah-ilmu</marquee>

Hasilnya :
http://celah-ilmu.blogspot.com dan Celah-ilmu

Kode diatas akan membuat tulisan berhenti saat di sentuh mouse. Arahkan mouse anda pada tulisan berjalannya untuk melihat hasilnya.

5. Memberi background
Untuk memberi background dan warna pada tulisan berjalan kode yang di gunakan adalah sebagai berikut :

<marquee bgcolor="#FDEAE8">http://celah-ilmu.blogspot.com</marquee>

Hasilnya seperti ini :

http://celah-ilmu.blogspot.com

#FDEAE8 adalah kode warna background

6. Mengatur Lebar dan Tinggi Jarak Gerakan.
Untuk mengatur lebar dan gerakan tulisan berjalan, kode yang di gunakan adalah sebagai berikut :

<marquee scrollamount="2" direction="up" width="350px" height="270px">http://celah-ilmu.blogspot.com</marquee>
<marquee scrollamount="2" direction="down" width="270px" height="350px">http://celah-ilmu.blogspot.com</marquee>

Hasilnya :
http://celah-ilmu.blogspot.com http://celah-ilmu.blogspot.com

Pengaturan tinggi gerakan biasanya di gunakan untuk tulisan berjalan yang bergerak ke atas dan ke bawah agar arah gerakan tidak terlalu naik tau terlalu ke bawah seperti pada contoh nomor 2 tulisan bergerak ke atas / bawah.

Width adalah lebar, sedangkan height adalah tinggi. Anda juga bisa menambah kode width saja atau height saja sesuai keinginan anda. Ganti angkanya dengan angka yang lebih besar atau lebih kecil jika ingin membuat lebar atau tinggi menjadi lebih lebar atau lebih tinggi atau sebaliknya. Semakin tinggi angka, maka akan semakin lebar atau semakin tinggi.


Selamat membuat blog anda lebih ramai dengan menambahkan Tulisan Berjalan. Jika masih ada pertanyaan tentang cara membuat tulisan berjalan di blogspot, sampaikan melalui kotak komentar di bawah artikel ini.
Semoga bermanfaat......

Modified meta tag to your blog more SEO friendly

Meta tag
Meta tag
Modifikasi meta tag agar blog kita lebih SEO friendly (Modified meta tag to your blog more SEO friendly)Dalam optimasi blog khususnya SEO onpage tidak lepas dari modifikasi meta tag dalam blog kita agar lebih SEO friendly. 
Supaya kata kunci yang kita bidik bisa maksimal kita perlu memodifikasi meta tag dan meta deskripsi, karena trafik blog kita sebagian besar dari search engine khusus nya google.

Berikut ini bagaimana cara modifikasi meta tag agar blog kita lebih SEO friendly khusus nya buat blogspot.

Berikut langkahnya Tahapannya :
  1. Log in ke akun blogger kamu lalu Pada halaman Dasbor 
  2. Klik Tata Letak/rancangan lalu klik
  3. Edit HTML,jangan lupa centang expand, 
  4. Kemudian cari kode HTML berikut ini bila kesulitan gunakan fasilitas pencarian/tekan ctrl+f untuk mencari:
<title><data:blog.pagetitle/></title>
Setelah menemukan kode HTML diatas. Ganti dengan kode HTML di bawah ini:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
Kemudian,mungkin kebanyakan kode HTML meta tag dan meta description dalam kondisi default kebanyakan seperti dibawah ini:
<meta name="DESCRIPTION" content="Your keyword ">
<meta name="KEYWORDS" content="your keywords">
Cari dan ganti kode diatas dengan kode HTML dibawah ini:
<meta expr:content='data:blog.pageTitle + &quot; Deskripsi Anda
&quot;' name='description'/>
<meta expr:content='data:blog.pageTitle + &quot; Keyword Anda &quot;'
name='keywords'/>
Nah..agar maksimal modifikasi meta tag kita mulai meta keyword dan meta deskripsi dan dapat langsung di kenali robot google dan spider sehingga lebih cepat ter crawl oleh search engine kita bisa menambah Meta Content (Untuk robot google dan spider)berikut ini:

meta content="'ALL'" name="'SPIDERS'/">
<meta content="'ALL'" name="'WEBCRAWLERS'/">
copy lalu Letakan meta diatas pada bagian bawah kode <header> (sebelum <body>)
Setelah semuanya selesai jangan lupa save template.

Selamat Mencoba.

Cara Aman Ganti Template Blogspot Secara Terus Menerus


Hampir boleh dikatakan semua blogger pernah melakukan hal seperti ini yaitu Mengganti Template.

Dalam penggantian template kalau kita tidak berhati-hati sering timbul error. Hal ini umumnya terjadi dikarenakan kurang jelasnya informasi oleh pihak Blogger ataupun Google dimana letak kesalahan secara pasti.
blog
blog

Pada saat kesalahan terjadi Google hanya akan menampilkan informasi bahwa telah terjadi kesalahan dan perintah Anda tidak dapat dieksukusi dengan baik dan Blogger akan segera memeriksa informasi tersebut dengan mencatatkan sebuah nomor referensi seperti tertera pada gambar berikut ini:
add gadget
add gadget
Hal ini yang sering terjadi dan sangat membuat kesal pada saat ingin mengganti template. Mudah-mudahan cara yang saya berikan pada tulisan ini dapat bermanfaat dan mujarab namun cukup mengandung resiko yang tinggi berupa kehilangan data Anda.
edit template
edit template
Pada saat mengganti template Anda akan dihadapkan pada error widget/gadget, hal ini dikarenakan tidak samanya gadget pada template lama dan yang baru. Blogger akan menginformasikan hal tersebut saat menggantinya, contoh warning ataupun peringatan ini akan seperti gambar di bawah ini:
Jangan panik!, hal ini biasa terjadi jika template tidak memiliki gadget yang sama dan hal ini sangat lumrah terjadi karena tiap-tiap desain layout template tidaklah selalu sama. Anda cukup menekan tombol Confirm & Save untuk menyelesaikan permasalahan ini. Ingat bahwa semua gadget yang lama akan hilang, pastikan Anda sudah menyimpan terlebih dahulu file .xml template Anda.
Sebetulnya ada beberapa bentuk pesan error lainnya, namun karena saya gagal mendapatkan screenshoot error :p jadi mohon maaf gak bisa memberikan gambarnya.
backup
backup
Cara paling efektif untuk mengganti template blogspot adalah dengan cara membuang atau menghapus terlebih dahulu semua widget atau gadget lama Anda. Sekali lagi pastikan Anda telah membackupnya terlebih dahulu.
Setelah Anda membackup silakan hapus semua gadget Anda yang terletak pada menu Page Elements. Silakan upload template baru Anda menggunakan menu yang telah tersedia. Lakukan konfirmasi seperti gambar di atas apabila diminta. Jika tidak diminta konfirmasi berarti gadget Anda bisa dikatakan sama.
Jadi kesimpulan dari tulisan ini adalah menghapus dulu semua gadget Anda adalah cara paling sukses yang pernah saya lakukan berkali-kali saat ingin mengganti template blogspot kesayangan Anda. 
Selamat mencoba

Tenar atau tidak blogspot kita pada search engine

Submit express
Submit express
Untuk cek atau mau lihat ketenaran blog kita, Berikut ini cara melihat dan memantau tingkat popularitas blogspot situs kita pada search engine, semakin besar nilai link maka semakin populer situs kita pada search engine.


Untuk menguji tingkat popularitas blogspot kita bisa gunakan link berikut:
  • http://www.submitexpress.com/linkpop/
Pada halaman yang muncul, di bagian kotak teks URL:

1.  Masukkan alamat homepage blogspot kita,misalnya:
     "http://celah-ilmu.blogspot.com"

2.  Klik tombol Submit, maka akan muncul halaman list link popularity

Dari list tersebut, kita dapat mengetahui bahwa kebanyakan web/blogspot yang melink blogspot kita yang telah terindeks oleh search engine tertentu. dari daftar di atas kita bisa mengetahui bahwa search engine yahoo lebih banyak mengindeks (menemukan) situs atau website yang melink blogspot kita.
semoga bermanfaat buat sob ....

Otak-atik Cara Membuat Related Post di blogger



Cara Membuat Related Post di blogger
Related Post
Cara Membuat Related Post di blogger. Related post adalah menampilkan artikel yang berhubungan atau artikel yang sejenis (satu label). Dengan kata lain menampilkan beberapa artikel yang berada pada satu label. yaitu ada kotak yang bertuliskan "Read This | Baca Yang ini". Nah bagaimana cara membuatnya?, caranya sangat mudah. Apa teman-teman ingin mencobanya?


Cara Membuat Related Post

1. Login ke account blogger kamu.
2. Masuk ke kustomisasi >> edit html.
3. Kemudian Klik centang pada "expand widget template".
4. Cari kode <p><data:post.body/></p> (tekan Control+F lalu masukkan kode tadi)
5. Pasang kode di bawah ini tepat di bawah kode <p><data:post.body/></p>

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

<div class='widget-content'>
<h3>Read this | Baca yang ini</h3>
<div style='border: 2px solid rgb(230, 230, 230); width:100%; height:300px; overflow:auto;'>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

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

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;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:Syifa.sq/>&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><p>Widget by [ <a href='http://celah-ilmu.blogspot.com/' target='new'>Tips Blogger</a> ]</p>

</div>
</b:if>

6. Simpan dan lihat hasilnya...

selamat mencoba....

Cara Merubah Heading Judul Posting Ke Tag h1 Agar Menjadi SEO Friendly

Judul Posting Ke Tag h1
Heading Posting
h1 in Blogspot Post Title, Penggunaan h1 pada blogspot post title adalah untuk merubah tag h1 di artikel post agar menjadi lebih SEO Friendly.

Struktur heading pada template blog meliputi heading h1, h2, h3, h4, h5, h6. Pada template, biasanya h1 digunakan untuk judul utama blog, h2 biasanya untuk widget, h3 biasanya untuk judul posting (post title), dan seterusnya.

Menurut para pakar SEO, penempatan judul posting pada h1 bisa membuat blog menjadi lebih SEO friendly dengan alasan karena search engine lebih dekat dengan heading atau h1. Nah, kali ini saya akan menuliskan cara merubah heading judul posting ke tag h1 seperti berikut:
  • Login ke blogger.com
  • Klik design 
  • Edit HTML
  • Centang Expand Widget Template
  • Cari kode yang mirip dengan kode berikut pada template Anda:
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

  • Hapus kode tersebut, kemudian ganti dengan kode berikut ini:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

  • Selanjutnya cari lagi di template Anda kode berikut ini:
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>

  • Hapus dan ganti dengan kode berikut:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>

  • Cari lagi kode seperti ini:
<h1 class='title'>
<b:include name='title'/>
</h1>

  • Ganti dengan kode seperti ini:
 <b:if cond="data:blog.pageType != &quot;item&quot;">
<h1 class="title">
<b:include name="title">
</b:include></h1>
<b:else>
<div class="title" style="font-size: 26px; font-weight: bold; letter-spacing: -1px; line-height: normal; margin: 5px 5px 0pt; padding: 15px 20px 3px 0pt;">
<b:include name="title">
</b:include></div>
</b:else></b:if>

  • Kemudian cari lagi kode yang mirip seperti kode berikut:
.post h3 {
color:$titlecolor;
font-size: 160%;
font-weight: normal;
line-height: 1.4em;
margin: 0.25em 0 0;
padding: 0 0 4px;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
color:$titlecolor;
display: block;
font-weight: bold;
text-decoration: none;
}
.post h3 strong, .post h3 a:hover {
color: #333333;
}

  • Ganti dengan kode berikut ini:
.post h1, .post h3 {
color:$titlecolor;
font-size: 160%;
font-weight: normal;
line-height: 1.4em;
margin: 0.25em 0 0;
padding: 0 0 4px;
}
.post h1 a, .post h1 a:visited, .post h1 strong, .post h3 a, .post h3 a:visited, .post h3 strong {
color:$titlecolor;
display: block;
font-weight: bold;
text-decoration: none;
}
.post h1 strong, .post h1 a:hover,.post h3 strong, .post h3 a:hover {
color: #333333;
}
nb : hapus yang kode merah ganti dengan kode biru
  • Save template, 
  • Selesai.
Selamat Mencoba Semoga Sukses