Cara Membuat Daftar Isi Blog Dengan JQuery

Cara Membuat Daftar Isi Blog Dengan JQuery. Daftar isi merupakan salah satu fasilitas tambahan yang kita pasang pada blog dengan tujuan untuk memudahkan pengunjung blog dalam mencari informasi-informasi yang ada pada blog bersangkutan. Selain untuk maksud tersebut, daftar isi juga bisa memberikan penilaian tersendiri dari para pengunjung terhadap pengaturan-pengaturan tata letak informasi pada blog tersebut.

Cara memasang daftar isi pada blog sebelumnya, lebih pas menurut saya jika dipasang pada sidebar blog dan cara pemasangannyapun cukup sederhana. Kalau berkenan untuk mengunjunginya, langsung saja ke artikel tersebut. Untuk daftar isi yang akan saya share pada postingan kali ini berbeda dengan sebelumnya. Sebagai gambaran awal dari daftar isi yang akan saya infokan pada postingan ini, silakan lihat daftar isi blog ini. Cara membuatnya pun menurutku tidak terlalu sulit juga. Untuk itu silakan praktekkan langkah-langkah berikut :

1. Silakan login ke akun blogger anda. Pada halaman akun blogger, silakan klik nama blognya.
2. Pada halaman overview silakan pilih menu template kemudian klik edit HTML dan klik lagi Proceed lalu aktifkan pilihan Expand Widget Template.
3. Pada halaman edit HTML blog anda, silakan cari kode ]]></b:skin> atau silakan tekan tombol ctrl + f untuk memudahkan pencarian kode. Kemudian copy kode di bawah ini dan letakkan di atas kode ]]></b:skin>.

/* Daftar Isi With JQuery */ #dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTp5K71sPnjq8in0g2mWBQ40os1I2AnZsmVJybEWPyfBPYSaolVwoTfQCRvrGUj1cMLmOippxVb2SNypMQ5vgcBKueMEscEOQcqc-s121noRfj0mMm0HOYG0iCSIWUD-PCpDoIY8qudf4/s320/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1XDTDs6JZNMBoknHsVmX6-5olelcDO14Lu2tQOXyy7FCJSqMhPaKD0JHfAA7aBsfiyzX-Jmzm8k8b5EW61mw5MymDwsgg1yQqBIM_XxDfSDblFbCmxewubyJiDCbbwkfe-UhyWClA5Zw/s1600/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMpc7xbJ2AVfrcf42iM7rDm57tP7J1Ose6wks0RT8V__s-BumNeKf1XX4WbBzCPRaQSn2RzN1P95fgPU71cemjvBRyL9G2ZyuPy47bI_dQ4W6dGMnT7loLenMMK7Ni1lqSrNGBXQTrY3Y/s320/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }

      4. Langkah selanjutnya silakan cari kode </head> lalu letakkan kode di bawah ini tepat di atas kode
          </head>.

<script src='http://dapurtutorial8.googlecode.com/files/Scriptdaftarisi1.js' type='text/javascript'/>

     5. Kemudian simpan templatenya dan close halaman edit HTML tersebut
     6. Langkah terakhir, silakan buat postingan baru dan copy paste kode di bawah ini pada bagian mode
         HTML postingan baru Anda tersebut. Untuk judulnya, terserah Anda mau kasih judul apa.
 
<script type="text/javascript" src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script> <script src="http://worldbase-info.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Keterangan :
kode http://worldbase-info.blogspot.com/ ganti dengan alamat blog Anda.

Demikian informasi saya tentang cara membuat daftar isi Blog dengan JQuery dan semoga bermanfaat. Jangan lupa setelah membaca informasi ini untuk menuliskan komentarnya.

Cara Membuat Burung Twitter Terbang di Blog

Membuat Burung Twitter Terbang di Blog-Salah satu hal yang tidak kalah penting adalah memasang variasi-variasi pada blog agar blog kelihatan lebih menarik ,jika tampilan blog hanya itu-itu saja pengunjung akan jenuh dan sobat akan beresiko kehilangan"pelangggan" blog sobat.Disini saya akan berbagi tips dengan sekian banyak tips yang telah saya bagikan untuk memperindah tampilan blog sobat.Membuat burung twitter beterbangan di blog,tentu saja sobat sering ketika blogwalking ke blog-blog lain sobat melihat burung twitter beterbangan di blog,tinggal ikuti saja langkah singkat dibawah ini untuk menjadikan burung twitter sobat menjadi milik sobat.langsung aja :

1. Login ke akun blogger sobat
2. Kemudian pilih"Opsi Lainya">>Tata Letak>>Tambah Gadget>>HTML/JavaScript
3. Masukkan kode dibawah ini kedalamnya

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://misbahudin-dcaesga.googlecode.com/files/twitter-terbang.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSwZ_7qxwihURo3s9IpotBOnCD9ngVSP7X7TDJHcTiq9u04JbbW_CcvUaHjHENgeGtl6JFMbs12MTJ-uPXNtDzFSP_6lR2lOOAbcaClHhb3njIovVZft9NfjWDR_j8stRumxX4o1IAGEM/s1600/cyan+bird.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3",
"h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Danny_harlian";
var tweetThisText = "Twitter - UserID http://worldbase-info.blogspot.com/";
tripleflapInit();
</script>

Ganti yang berwarna merah dengan ID Twitter sobat,dan untuk yang berwarna biru ganti dengan URL blog sobat.
4. Kalo sudah jangan lupa di"Save"ya sob.
 NB: Kode yang berwarna hijau adalah warna burung twitter sobat.Kalo sobat pengen ganti dengan warna yang lain silakan ganti dengan URL gambar dibawah ini.

Burung Twitter Biru Muda

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSwZ_7qxwihURo3s9IpotBOnCD9ngVSP7X7TDJHcTiq9u04JbbW_CcvUaHjHENgeGtl6JFMbs12MTJ-uPXNtDzFSP_6lR2lOOAbcaClHhb3njIovVZft9NfjWDR_j8stRumxX4o1IAGEM/s1600/cyan+bird.png

Burung Twitter hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxLR5hQsfau_g_LJ7AsW_fQS0eaqQNfhDn_V2j9q-BN-V2F0PA_MtccXpxub-uSlCTC6s5w7i8dDAMikD7Cb9-x_pYX_DsraVncaWrU4qay2N0K8R_yQ6awZCwWOLIGJDjA-6-rR-PFeA/s1600/Green+bird.png

Burung Twitter hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInAVaIsN4qYaYP7l2P8vyLFrP_mS-2Bfj7HUtLGH5AfetklatBI9J7mmSG86S0O4kO7FGHi4KhTRmAQ-9G8k6kh4Bv_gHYT9HIL1wyAIaG9Ug8PGGyg3U7jvEy24RGhuZ9eJk7A7qFaM/s1600/black+bird.png 

Burung Twitter coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0OlKyNpLtIKKPt2WCBHPkvvui6dwqurcTuP9-WhMKHAMD7xl8vMekDk3AmS9WkD11FKDuCwI7ZnE4uv3Wx5u7pEb9C5ucTGMUYiCiPkwzzuKycofmCusWU9lhGThbeo8rusv1W-zX1LM/s1600/brown+bird.png 

Burung Twitter  ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4bTCzmtcqCRqqBQDAIoug1JPAYdJ-oSbmBuNjgzbLV0QiVxkdzXaTrHM1Sg8-yOh2ZlGUUyQBvRyT9AefONE4JzHv6MsRkgblqV7BRbaK3_2aibat4yXJ4VOwmjOZsgjzug3i0woyCK8/s1600/purple+bird.png 

Burung Twitter merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEignA61hVSphr4FxtZpDPjwty0a2Tm8Ss_Lhz2vJxkwHQM-2ha53nihe5jN9-vNfs-Hd88GrZd-lhamM7pq_r_55G4aJQykkSEWAw5mQJ09dyBa_dXUdOeAtodNOh97c1bXBW6kLzHIvRs/s1600/red+bird.png 

Burung Twitter putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMB6UJbKdWRUyugNHy2x_0Wnmg0csu02KM5A-O9QwxSayFhcH9E6YhP1-5iLyFcSH_AoLdxFpEbxROD2hwGuu5tgJXHX3aUTjLQsvmLooza_CNrOxuWjz7Awril6JovDH52Do2HeQN6v0/s1600/white+bird.png 

Burung Twitter kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0aZWqJ2xilFzaIy_TxEx3JqOy8uWPPBFzppsBMGCLVjXPSaFW6kcGthwS2zX7-hU1cnwsaPkfPdgiQ9BE3bw_Nf0YxHhPg20cJ40K4yFRZV1v_su6vjcXQP54k2lZ4CHO_OhmJr1ghSI/s1600/yellow+bird.png 

Kalo sobat lebih kreatif,coba gambarnya diutak-atik pake Adobe Photoshop.Ok,cukup sekian mudah-mudahan bisa membantu mempercantik tampilan blog sobat.Terima kasih dan salam jumpa

Cara Membuat Efek Bubble Pada Cursor Di Blog

Cara Membuat Efek Bubble Pada Cursor Di Blog - Hai sobat Worldbase-info, kali ini saya akan share bagaimana Cara Membuat Efek Bubble Pada Cursor Di Blog sobat, iya agar tampilan blog dan web kita lebih menarik dan pengunjung bisa betah berlama-lama diblog kita gitu...hehe, apalagi digunakan di website toko online, pasti tambah capcusss.., oke langsung saja ya gan..

1.Login ke Blogger
2.Klik Nama Blog Sobat --> Tata Letak --> klik Tambah Gadget --> HTML/Javascript
3.Lalu Copy dan Paste Kode Bubble Kursor Efek di bawah ini di kotak HTML/Javascript

<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();

window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}


function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}

function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }

window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]>
</script>

NB :

• Kode yang berwarna biru adalah warna Bubble silahkan sobat ganti dengan warna kesukaan sobat.
• Kode yang berwarna hijau adalah jumlah Bubble yang akan kita pasang. Sobat boleh menggantinya mau seberapa banyak Bubble yang akan di tampilkan

4. Simpan dan coba lihat hasilnya.....

Nah, bagaimana sudah sukses kan? sampai disini dulu ya ulasan saya tentang Cara Membuat Efek Bubble Pada Cursor Di Blog, Mudah-mudahan bermanfaat buat kita semua.

Cara Membuat Read More Otomatis di Blog

Cara membuat Read More otomatis di Blogspot dengan menambahkan kode javascript pada template blog. Kali ini yang akan saya bahas mengenai cara membuat read more di blogspot atau blogger. Kenapa cara membuat read more di wordpress tidak dibahas juga? wah kalao read more di wordpress tidak bisa dibuat secara otomatis, tapi dengan cara manual setiap postingan. Ok kita mulai bahasan mengenai cara membuat read more otomatis di blogspot.

Bagaimana Cara membuat Read More otomatis di blogspot?
Cara membuat read more otomatis di blogspot sangat mudah. Sebelum melangkah  ke cara membuat read more otomatis di blogspot lebih baik kita tahu apa itu read more? dan apa fungsi read more? Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis di blogspot.
Langkah-langkah cara membuat Read More Otomatis di Blogspot

• Login ke Blog anda
• Buka halaman design > Edit HTML > centang Expand template widget
• Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
• Paste kode berikut tepat dibawah </head>

     <script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

• Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian). Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.

Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini

    <b:if cond='data:blog.pageType != "item"'>
    <div expr:id='"summary" + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
    </script>
    <span class='rmlink' style='float:right;padding-top:20px;'>
    <a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

•  Finish simpan template dan lihat hasilnya

Cara membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. berikut ini adalah keterangannya data yang bisa dirubah :

1. summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
2. summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
3. img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
4. img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
5. Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.

Semoga artikel cara membuat read more otomatis di blog ini bermanfaat. Selamat mencoba dan semoga berhasil.

Cara Membuat Related Post Di Blogspot

Cara membuat related post atau "artikel lainnya" yang biasa ditempatkan di bagian bawah setelah artikel/postingan sebuah blog tidaklah sulit, dan bicara manfaatnya tentu banyak banyak sekali diantaranya dapat meningkatkan pageview (cocok untuk Google panda), memudahkan pengunjung dalam mencari artikel yang masih terkait dalam satu label atau kategori, dan bisa membantu postingan lama kita agar bisa terindex.

 

Berikut ini adalah cara membuat related post blogspot yang berada tepat setelah postingan:

• Login ke account blogger sobat,
• Pada dashboard, pilih edit layout–> edit HTML
• Centang Expand widget template
• Cari kode seperti dibawah ini, lebih mudah bila anda menggunakan ctrl+F   

<data:post.body/>  

• Setelah ketemu, paste kode di bawah persis setelah kode <data:post.body/>

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

• Jangan lupa simpan pekerjaan sobat, dan lihat hasilnya..

Jika di bawah postingan sobat sudah terdapat related post dengan berisi link-link address artikel yang terkait, maka cara membuat related post dibawah postingan yang sobat kerjakan sudah berhasil.

Cara Pasang Kotak Search Keren Di Blog

Cara Pasang Kotak Search Keren Di Blog - Membuat Kotak Pencarian Keren postingan Cara Membuat Kotak Search Keren Di Blog.

Dari judulnya saja sobat pasti sudah tahu apa yang kiranya akan saya share kali ini. Setelah kemarin saya posting tentang Cara Memasang Kotak Search Di Blog, saya melanjutkan untuk melengkapi koleksi tips dan trik di blog saya ini. Search Box (kotak pencarian di blogspot) pastinya sobat sudah tidak asing lagi mendengarnya, jadi saya rasa tidak perlu panjang lebar saya menjelasakan kembali tentang apa dan fungsi dari Search Box/kotak pencarian di blogspot ini. Oh Ya, dibilang simpel karena kita hanya menggunakan kode CSS saja dalam membuatnya, pastinya gak ribet.

Dan agar lebih jelasnya saya sertakan juga contoh demo/screenshot dibawah ini:

Langsung ke TKP, dan simak langkah-langkah cara membuat Search Box Simpel dan Keren Untuk Blogspot:

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Page Element/Elemen Laman
4. Kemudian Add Gatget dan pilih HTML/Javascript, dan masukan kode search box dibawah ini:

 

Style 1

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqdHmvPWeyn3PJJxn-2E4I5IHndVuSgUC_-EjzcfWPCyaqm8YKVfZ7-uggUrQxm9A7jqPhhcLv16XkqiH58P_ZmYkuNGSNWNhgFqdWTh9kswUzRYy8KgGWSqRnqjDbtmt0vpHwlaZ3U7M/s320/kode-blogger_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNDQ4XX_jPb-37DtE1KVoiTIpTs9K0rpbnEHi2A5BDYIFbeUyZXzcNi2JAtK4VEVKFf1zCFU9hjz_n7sQV4jDeo36jY4UGrPRD6VDn_TfsPbP2DkGP9l5SiO7DfOLq7De6gQb-ii2LsPQ/s1600/kode-blogger_searchbox2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 3

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjVw1Lai8djXMqEOsJht-Hm1wAFTdoUZcB7CvGHGNv2fnlyrEqFeQr4YrWZE6sGeL_YVeakx3aZwfSnCcMNtjbEYYrnLB8gtvrhiTa99NTVgU-_kDtATGyizzDGAHltugDY1qqT-MIEU/s1600/kode-blogger_searchbox3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 4

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2da9b_eCY3KqY8rwky-82Z6b1uBFnwEQDtDfb0TAIVg0Rrv-tJIfqcp37tGyTWyTHrTxNtjbVff0eDrxIFxspL5BlYg6tZZAqHJMvf14iH8QxkP5CfNI5KFVoHaOtwlmgsvMeQnT_mA/s1600/kode-blogger_searchbox4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLSd-IcmWTq_GIAzEErHI5HDaUVQocFp6irVQEw-kuj_MT6vNL9MnatQViork0AmwFJHBnvqif8x_P1Eul-jfR7B7odSFAE-qynjUN__OfZ1MgQc2tgMeZdHDgZ7SxJMc8tMTzSHhApO8/s1600/kode-blogger_searchbox5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 6

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1uLFcvbU186NqXyEVqhesWl0fVFANGCPoYQgatNWi928Ehe-DOiMmAxPqrJ7Knfn4np8_muoH2RNIdOYZ-YTXTEcenXZrLkLpTieejE20URSq1YI9dDp_ZUbnaf4PwPDTBjG3MBvE-6w/s1600/kode-blogger_searchbox6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Baiklah cukup sekian Tips Trik Blog dari WORLDBASE-INFO postingan Cara Pasang Kotak Search Keren Di Blog - Membuat Kotak Pencarian Keren. semoga bermanfaat bagi anda.

Artikel Terkait Horizontal dengan Thumbnail

 

Membuat Artikel Terkait Horizontal dengan Thumbnail - Sudah banyak blog yang membahas tentang Cara Membuat widget artikel terkait dan tentunya dengan membaca juduk artikel diatas pasti sudah sangat umum buat anda.

Tetapi ketika saya coba hampir semua tutorial diblog-blog lain widget artikel terkait tersebut akan berbentuk seperti artikel terkait punya blog ini di bawah.

Tetapi kali ini saya akan membahas Cara Membuat Artikel Terkait Horizontal dengan Thumbnail.
Biar lebih jelas liat di bawah

Tenang saja sob, ini tidak menggunakan Widget otomatis seperti dari LinkWithin kok, karena setelah saya cek Widget artikel terkait LinkWithin tersebut ternyata Redirect terlebih dahulu dari situs LinkWithin sebelum di arahkan ke artikel kita lainnya, dan lebih gak enaknya lagi Link tersebut nempel di blog kita DOFOLLOW, pasti cukup berpengaruh pada blog.

Nah langsung ke topik utamanya aja deh Membuat Artikel Terkait Horizontal dengan Thumbnail
Disini kita hanya memerlukan sedikit langkah otak-atik HTML
1. Jelas login ke blog
2. Rancangan - Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode <data:post.body/> agar lebih mudah gunakan CTRL+F
5. Copy kode berikut tepat di bawah <data:post.body/>

 <!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://worldbase-info.blogspot.com/2012/12/membuat-artikel-terkait-horizontal.html'><img alt='Cara membuat Artikel terkait dengan Thumbnail' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

6. Kalau sudah cari lagi kode </head>
7. Copy kode berikut tepat diatas kode </head>,

 <!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h4{
font-weight: bold;
color: black;
font:normal 14px Arial;text-transform:none;
margin:0px;letter-spacing:.01em;line-height: 1.2em;color:#666;
}
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEEbFFne1AQrDu-Qz0ZAJBKssnUxBL9mUXlKrxm1CwRk1Xf_Q5EW99cA15tOqwexwWO13JZ3xTgX97hLuGsIXgaxGNr6pnyi4oTpTLfXhjfVL9xxBenIfWQCNkiydwdlv5IYZjOlUDvUo/s400/noimage.png&quot;;
var maxresults=5;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artikel Lainnya&quot;;
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

CATATAN :
Kode diatas inilah yang mempengaruhi tampilan Artikel Terkait Horizontal dengan Thumbnail di blog anda, bisa anda ganti sesuai keinginan anda.

Artikel Lainnya    : Judul pada widget
var maxresults=5 : Jumlah artikel yang di tampilkan

Demikian tutorial singkat saya tentang Cara Membuat Artikel Terkait Horizontal dengan Thumbnail.
Semoga bermanfaat !!!

Download Smadav Pro 9.2.1

Download Smadav Pro 9.2.1 + Serial Number Keygen 2013

Download smadav pro 9.2 Serial Number keygen 2013 

Smadav anti virus lokal atau anti virus untuk mengatasi virus dalam negri kini telah update ke versi terbaru yaitu versi 9.2 dan di rilis pada tanggal 20 januari 2013, dan bagi anda yang ingin mencari serial number smadav pro versi 92 ini atau anda yang ingin mendownload smadav nya saja atau juga ingin mencari smadav 9.2 pro keygen.

 

 

Smadav 2013 Rev. 9.2 dirilis !!!

Smadav 2013 Rev. 9.2 : Penambahan database 229 virus baru, Support untuk Windows 8, Perubahan tampilan, dsb. dan bagi yang ingin download bisa di download disini untuk download smadav nya download . dan di kalau sudah ada smadav nya jika ingin serial numbernya bisa di download disini download

Cara Menghilangkan Tanda Bajakan (BlackList) Smadav Pro :

• Nonaktifkan Smadav yang terinstal di komputer sobat dengan cara mengklik kanan ikon Smavad di taksbar Windows sobat dan pilih Exit.
• Masuk ke Drive C (tempat Sistem Operasi terinstal), untuk lebih jelasnya C:\Windows\System32\PIR?SYS.DLL, hapus file PIR?SYS.DLL tersebut. Jika tidak ada silahkan keluar dan lanjutkan ke langkah yang berikutnya.
• Masuk ke Menu Run dengan mengklik tombol Start Windows + R.
• Jika Run sudah terbuka, ketik regedit (untuk membuka Registry Editor), lalu tekan Enter.
• Kemudian buka HKEY_CURRENT_USER\Software\Microsoft\Notepad
• Cari Tulisan "lfPitchΔndFamily" (tanpa tanda petik), pada tab disebelah kanan, hapus semua Key yang mengandung tulisan "lfPitchΔndFamily" contoh "lfPitchΔndFamily2", "lfPitchΔndFamily3" dan seterusnya.
• Langkah selanjutnya, silahkan sobat masuk kembali ke Drive C, masuk ke "C:\Program Files\Smadav" double klik file "SMΔRTP.exe" untuk menjalankan Smadav.
• Smadav sobat kembali menjadi Free dan Tanda Hitam (Bajakan) sudah hilang.
• Selanjutnya masukkan Serial Number yang baru sehingga Smadav sobat bisa menjadi Pro kembali.

 Cara lain menghilangkan Blacklist smadav versi 9.2.1

•     Buka aplikasi smadav anda
•     Masuk bagian settings
•     Masukkan kode berikut di kolom Nama = www.jadwalacara.com
•     Kosongnkan pada kolom Key
•     Klik Register
•     Selesai..

Sekian Tentang Smadav terbaru versi 9.2 pro 2013 . semoga membantu.

DOWNLOAD SMADAV

DOWNLOAD SERIAL NUMBER 

DOWNLOAD KEYGEN