Cari Blog Ini

English French German Spain Italian Dutch Japanese Korean Arabic Chinese Simplified
Translate Widget by Google
Selamat Datang Di Carakumudah blog's,Jangan Lupa Follow Blog Ini Ya..!!

Kamis, 16 Agustus 2012

Cara Memasang Menu Breadcumbs

Berikut langkah-langkah yang Harus sobat lakukan :

  1. Pastikan Sobat sudah masuk ke akun blogger milik sobat
  2. Pilih Template
  3. Klik Pada Tombol Edit HTML
  4. Klik pada Tombol Proces atau Lanjutkan
  5. Kemudian anda akan dibawa kehalaman seperti berikut
  6. Centak kotak kecil bertulisan
  7. lakukan Download Template Lengkap untuk mengantisifasi kesalahan dalam edit HTML (baca caranya Pada Tutorial Cara Upload dan BackUp Template blog)
  8. Cari kode berikut ini ]]></b:skin> (Gunakan Tombol CTRL + F dan F3 untuk mempermudah pencarian Kode)
  9. Setelah Ketemu Copy kode dibawah dan Paste Diatas kode ]]></b:skin>
  10. /*---Navi Breadcrumbs---*/ #navi{padding:0px 5px;margin:0px 0px 8px 0px;color:#ffffff;-moz-border-radius:5px;font:11px trebuchet ms;}
  11. Sekarang Cari kode <b:if cond='data:post.title'> 
  12. Sudah ketemu Copy kode berikut dan letakan tepat dibwahnya kode apabila Kode ada dua gunakan kode yang pertama <b:if cond='data:post.title'>
  13. <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='navi'>Location : <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>
  14. Sekarang Klik Simpan
  15. Selesai dan lihat hasilnya
Demikian Tutorial Tentang Cara Memasang Menu Navigasi Breadcrumbs Pada Blog Yang bisa Dapur Tutorial Blogspot Sampaian Pada Kesempatan Ini Semoga bisa membantu Shabat Blogger

Cara Pasang SMS Gratis

Info, tips cara memasang Widget SMS Gratis untuk para pengguna Blogspot/Blogger. Kita akan mencoba memasang Widget SMS Gratis di Blogspot, agar anda bisa kirim-kirim SMS secara gratis kepada teman anda dimanapun. Mumpung gratis nggak ada salahnya kita gunakan fasilitas ini dan jika anda belum tahu bagaimana cara memasang Widget SMS Gratis untuk Blogspot/Blogger mari kita simak bersama tips berikut ini ” Cara Memasang Widget SMS Gratis Pada Blogger ”. Jika anda sudah berhasil memasang Widget SMS Gratis ini, maka cara penggunaannya sangat mudah. Anda cukup memasukkan nomor Hp tujuan dan isi sms yang akan anda kirimkan.

Cara Memasang Widget SMS Gratis Di Blogger:
1. Masuk ke dasboard blog anda
2. Klik Menu > Tata Letak / Design
3. Klik > Tambah Gadget / Add Gadget
4. Pilih > HTML/JavaScript
5. Masukkan kode berikut
<iframe name=”widgetsms” src=”http://www.sms-online.web.id/widget/” width=”270″ height=”350″ frameborder=”0″></iframe>
6. Klik > Simpan
Anda juga bisa memasang Widget SMS Gratis ini di post atau page anda. Situs penyedia SMS gratispun bisa anda gunakan, seperti misal www.sms-online.web.id. Demikian info kali ini ” Cara Memasang Widget SMS Gratis Di Blogger ” silahkan dicoba, semoga berhasil, salam sukses.

Tips Meningkatkan Jumlah Pengunjung (Pagerank)



Perhitungan PageRank berdasarkan pada banyaknya link webiste, baik link yang masuk dan link yang keluar website, semakin banyak link yang masuk ke sebuah halaman website maka halaman tersebut akan memiliki page rank yang sesuai dengan jumlah link.

Untuk memperbanyak link yang masuk ke dalam blog kita, caranya adalah melalui fasilitas komentar (comment) yang ada di blog orang lain yang sudah mengaktifkan follow pada blognya, karena dengan aktifnya follow pada blog tersebut, maka link yang masuk ke blognya otomatis akan ikut terindex oleh Google.


Untuk mengetahui apakah sebuah blog sudah mengaktifkan follownya atau belum bisa di lihat seperti ini dengan menggunakan browser firefox,blok link komentar beserta penulis komentarnya lalu klik kanan dan pilih View Selection Source akan muncul window Dom Source Selection lihat kode HTML yang menyertai link komentar nya, akan anda temukan salah satu kode seperti dibawah ini:

1. <a href=”http://1ned.blogspot.com” rel=”nofollow”>1ned</a> Says:

2. <a href=”http://1ned.blogspot.com”>1ned</a> Says:

kode pertama status "no follow" berarti anda tidak mendapat backlink jika anda komentar dipostingan blog tersebut
sedangkan kode kedua kamu mendapat backlink dari postingan yang kamu komentari tersebut.

Bagaimana supaya blog anda dibanjiri pengunjung adalah dengan mengaktifkan follow anda dan memberi komentar pada blog yang sudah mengaktifkan Follownya adalah sebagai berikut:

1. Temukan kode HTML dibawah ini di Layout->Edit HTML->Klik Expand Template Widget->temukan kode dibawah ini

<a expr:href=’data:comment.authorUrl’ rel=’nofollow’>
<data:comment.author/></a>


2. setelah ketemu hilangkan kode rel=’nofollow (berwarna merah) sehingga menjadi

<a expr:href=’data:comment.authorUrl’>
<data:comment.author/></a>


3.save setting, sekarang blog anda status Follownya sudah aktif

Cara Membuat Teks yang Di Block Menjadi Berwarna

ei ei... tips blogging lagi tips blogging lagi... wah wah emang gak ada habisnya ya klo ngomongin soal blog.. hahahaha
Kali ini Zona Artikel akan berbagi informasi mengenai Cara Membuat Teks yang Di Block Menjadi Berwarna.
cara ini sudah saya coba kok dan hasilnya memuaskan, tapi sayangnya hasilnya hanya akan terlihat menggunakan browser mozilla firefox.
Cara Membuat Teks yang DiBlock Menjadi Berwarna
1. login blog
2. buka menu rancangan > edit HTML 
3. lalu cari kode ]]></b:skin>
4. lalu taruh kode dibawah ini tepat diatas kode ]]></b:skin>

::-moz-selection {
background: none;
color: #ff0000;
}

Ket.
* color: #ff0000; > adalah warna teks yang telah di block. Bila sobat ingin menggantinya sobat bisa buka widget KODE WARNA 1 yang ada disini atau KODE WARNA 2 yang ada disini untuk mempermudah pemilihan warnanya.


5. Terakhir SIMPAN

Selamat Mencoba ?!!

Cara Mudah Membuat Blog Mainteanc



Cara Mudah Membuat Tampilan Blog/Web Maintenance. Kali ini Zona Artikel akan membagi informasi tentang mengenai Cara Mudah Membuat Tampilan Blog/Web Maintenance. Cara ini bisa sobat pakai bila sobat ingin membuat tampilan maintenance pada blog/web sobat.

Cara ini hanya menggunakan trik CSS dengan penambahan gambar saja kok. Tapi trik ini bisa membuat blog/web sobat seakan-akan seperti sedang maintenance.

Langsung saja pada langkah Cara Mudah Membuat Tampilan Blog/Web Maintenance :

1. login blog
2. Rancangan > Edit HTML
3. taruh kode dibawah ini diatas kode ]]></b:skin>
    (Gunakan CTRL+F untuk memudahkan pencarian)

html {
  height: 100%;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCnp07raRE4hsJ-orMthKrLuQru1ZpF_70jnhBiOjSbug77-dkWpSFCD_BBr8_u1z1Ve8X79CW17Kwphpx8jRguqXQndh8YKCsWcRx2rcC9xrfWl9ysYJjmStZGg-ir2ZGMMM6no4fVB4/s1600/Site-Maintenance.png) no-repeat center 50%;
  margin: 0;
}
body {
  display: none;
}


Ket.
* https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCnp07raRE4hsJ-orMthKrLuQru1ZpF_70jnhBiOjSbug77-dkWpSFCD_BBr8_u1z1Ve8X79CW17Kwphpx8jRguqXQndh8YKCsWcRx2rcC9xrfWl9ysYJjmStZGg-ir2ZGMMM6no4fVB4/s1600/Site-Maintenance.png bisa sobat ganti dengan gambar yang lain.

4. Terakhir SIMPAN


Selamat Mencoba ?!!

Cara Membuat Kursor Diikuti oleh Bintang - Bintang

Cara Membuat Cursor Diikuti Bintang di Blog. Ehm.. Memang gak ada habisnya berbicara tentang HTML. Kali ini Zona Artikel akan membagikan informasi tentang Cara Membuat Cursor Diikuti Bintang di Blog, Langsung saja ke TKP !!


1. login blogger
2. Rancangan > Tambah Gadget > pilih HTML/Java Script
3. Lalu, copy kode di bawah ini



<script type="text/javascript" src="http://cayunkatel.googlecode.com/files/rainbows.js"></script>

4. Terakhir SIMPAN

Selamat Mencoba ?!!


Menambah Recent Post & Recent Comment Dengan JavaScript

Tulisan ini pada awalnya menyatu dengan Menambahkan Recent Posts Dan Recent Comments Dengan Gagdet Blogger. Tapi sehubungan terlalu panjang sehingga memungkinkan kamu pusing membacanya maka artikel tersebut dipecah menjadi dua bagian. Nah bagian kedua ini akan membahas bagaimana cara menambahkan widget Recent Post dan Recent Comments dengan menggunakan javascript.

Dibanding cara pertama (menggunakan Gadget Blogger), cara kedua ini memiliki kelebihan dimana jumlah judul posting atau komentar dapat diatur sekehendak kita (bisa lebih dari 5). Untuk menggunakannya kamu bisa mengikuti langkah-langkah berikut:
  • Dari halaman Dashboard blog kamu pilih Tata Letak (Layout).
  • Setelah masuk ke Elemen Halaman, klik Tambah Gadget.
  • Setelah itu pilih HTML/JavaScript untuk ditambahkan, seperti nampak pada gambar berikut:
  • Kemudian masukkan script berikut dan ubah NamaBlogKamu dengan nama blog kamu sendiri:

Kode untuk Recent Posts:
<script style="text/javascript" src="http://enes-sc.googlecode.com/files/rc-posts.js"></script>
<script style="text/javascript">
var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://
NamaBlogKamu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Keterangan variabel:
- numposts = 10; artinya 10 posting yang ditampilkan (maksimal 25 posting. Jika ingin menampilkan lebih dari 25, silahkan pelajari artikel ini).
- showpostdate = false; artinya tanggal posting tidak ditampilkan (kalo mau ditampilkan false-nya ganti dengan true).
- showpostsummary = false; artinya ringkasan posting tidak ditampilkan.
- numchars = 100; artinya banyaknya karakter (huruf) untuk ringkasan posting yang ditampilkan adalah 100 huruf.
- standardstyling = true; artinya menggunakan type standard.

Jika ternyata tidak muncul bullets pada setiap judul Recent Posts kamu (karena setiap template selalu berbeda), maka tambahkan perintah <ul> pada script terakhir dan ditutup dengan </ul> (lihat contoh pada script Recent Comments yang kedua).

Jika kamu ingin menampilkan judul artikel hanya dari label tertentu, silahkan pelajari artikel ini.

Kode untuk Recent Comments:
<script style="text/javascript" src="http://enes-sc.googlecode.com/files/rc-comments.js"></script>
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://
NamaBlogKamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Keterangan variabel:
var numcomments = 10; artinya 10 komentar yang ditampilkan.
var showcommentdate = true; artinya tanggal komentar ditampilkan.
var showposttitle = true; artinya menampilkan judul posting yang dikomentari.
var numchars = 100; artinya banyaknya karakter (huruf) komentar yang ditampilkan adalah 100 huruf.

Jika Recent Comments kamu ingin menggunakan bullets, seperti pada Recent Comments blog ini atau blog ini, gunakan script berikut:
<script style="text/javascript" src="http://enes-sc.googlecode.com/files/rc-commentsbullet.js"></script>
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<ul>
<script src="http://
NamaBlogKamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>

Setelah memasukkan kode script dan melakukan editing variabel yang disesuaikan dengan keinginan kamu. Lakukan Preview (Pratinjau) untuk melihat hasilnya. Jika sudah OK, simpan hasil kerjaan kamu.

Nah, selesai dah. Selamat mencoba....

CARA MENGHILANGKAN BEKAS BAGIAN PADA NAVBAR BLOGSPOT YANG MENGHILANG


Hai lagi semua...... saya pengen share berita terkeren dan akan lebih membuat blog kamu jadi lebih profesional lagi bro wkwkwkwkwk , tapi sebelum kita ke topik CARA MENGHILANGKAN BEKAS BAGIAN PADA NAVBAR BLOGSPOT YANG MENGHILANG kalian harus jalani CARA AGAR NAVBAR BLOGSPOT MENGHILANG dulu....jika sudah...oke deh langsung aja ke TKP wakakakakakakaka

 
 
 
 
Mau kan blog kalian seperti gambar diatas ini?? tanpa navbar dan tanpa ada bekasnya...
Oke berikut Langkah-langkahnya:





yang pertama sekali jika tampilan blog kalian begini (lihat gambar dan ikuti langkahnya)
jika kurang jelas, klik aja new tab
# YANG PERTAMA SEKALI KLIK CADANGKAN/PULIHKAN LALU KLIK ANTARMUKA BLOG LAWAS


Lalu selanjutnya > >

> Pilih Design -> Edit HTML

> Jangan lupa centang kolom expand widget templates.


Cara Membuat Tombol Share Twitter di Blogspot

> Sebelum <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> (bisa jadi setiap template berbeda-beda, yang pasti masukan kodenya sebelum <body ) masukan Kode berikut

<!-- <body><div></div> -->


contoh jadi seperti ini

> Lalu akan tampil gambar seperti ini:



> Klik Delete Widgets.




Seperti Blog sudah seperti web web lain yg keren...wwuuuiiiii.....

SEMOGA BERMANFAAT ^^ DAN JANGAN LUPA UNTUK TINGGALKAN KOMENTAR

Cara Membuat Effect Terang dan Gelap jjika disentuh mouse Pada Gambar di Blog

Setelah sebelunya Saya sudah pernah bahas tentang Cara Membuat Effect Zoom Pada Gambar Di Blog, maka kali ini Saya akan bahas tentang Cara Membuat Effect Terang dan Gelap Pada Gambar. OK kita masuk ke langkah-langkahnya.

[1]. Pertama pastinya Login dulu ke Blog Kalian.
[2]. Dari Dasbor, cari Rancangan --> Edit HTML.
[3]. Cari Code ]]></b:skin>
[4]. Kalo sudah ketemu, Copy dan Paste-kan Code di bawah, tepat di atas Code tadi. ini ada 2 pilihan jadi tinggal sibat sendiri yg memilihnya ^^

A. Dari Gelap Menjadi Terang.

    .post img{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
    .post img:hover{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

B. Dari Terang Menjadi Gelap.

    .post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
    .post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

[5]. Terakhir tinggal di SAVE, dan lihat hasilnya.

Cara Membuat Kursor Berubah Saat Menyentuh sebuah Link pada Blog

Maksudnya adalah saat kursor mouse kita menyentuh sebuah link..maka mouse kita tadi akan berubah ke bentuk yg lain...berikut deh caranya wkwkwkwk

[1]. Pertama pastinya Login dulu ke Blog Kalian masing2
[2]. Trus cari Rancangan --> Edit HTML
[3]. Lalu cari Code </head> (tekan CTRL + F atau F3 pada Keyboard untuk mempermudah pencarian)
[4]. Copy dan Paste-kan Code di bawah ini, tepat di atas Code </head>
    <style type='text/css'>body, a, a:link{cursor:url(https://sites.google.com/site/rakasajmk/download-1/download-2/KursorJmK.gif), default;} a:hover {cursor:url(https://sites.google.com/site/rakasajmk/download-1/download-2/JmKKursor.gif),wait;}</style>

NB :
- Ganti tulisan yang berwarna Merah dengan URL Kursor Kalian

[5]. Terakhir tinggan di SAVE dan lihat hasilnya. Pasti Kursor Blog Kalian berubah saat menyorot Link. Oh ya Saya hampir lupa, "Tidak Semua Link Ya".

oke.....

Cara Memasang Widget Share Button Facebook, Twitter, Google di Blog



Cara Memasang Widget Share Button Facebook, Twitter, Google di Blog -
Belakangan ini saya berkunjung  ke sebuah blog, dan saya menemukan sesuatu yang unik di blog sahabat saya tersebut. Saya menemukan widget share botton. Kemudian saya mencoba memasangnya, karena widget ini akan memudahkan pengunjung blog kita untuk mengshare apa yang ada di blog kita. Dan hal ini juga akan berdampak positif ke blog kita.. karena ini bisa menjadi media marketing gratis buat para blogger , untuk itu saya akan membagaikan kepada para sahabat – sahabat blogger sekalian tentang cara membuat share botton. Berikut langkah- langkahnya :

  1. Login ke dasbor blog anda
  2. Pilih rancangan
  3. Pilih tambah gadget
  4. Pilih Html/Java script
  5. Copy kode Html di bawah ini
  6. Pastekan di Html/ Java Script tadi
  7. Simpan
  8. Selesai

Kode Share button

<!--Widget Share Button Melayang Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-share-button.html" target="blank" title="Cara Memasang Widget Share Button"><font color="blue">[Get Widget]<font></font></font></a></div></div>

<!--Widget Share Button Melayang End-->

Catatan : untuk tulisan warna hijau anda dapat mengeditnya sesuai keinginan anda. Dan tulisan warna merah bisa anda hapus jika anda ingin tampilan yang simple.

contoh hasilnya


                                                                            

Cara Buat Read More Otomatis di Blogger.com


read more,baca selengkapnya,cara buat read more,cara buat baca selengkapnya,auto read more, read more otomatis, cara buat read more otomatis

Expandable post atau yang umum di kenal dengan istilah "Read More" adalah sebuah fitur yang membuat postingan sobat blogger terpenggal di halaman index Beranda atau Home Page. Di setiap akhir preview, terdapat sebuah link yang menuju ke halaman posting, yang biasanya menempel pada kata "Read More" atau "Baca Selengkapnya".

Perbedaan antara Read More konvensional dengan Read More Otomatis dengan thumbnail adalah :


Read More Konvensional :
  1. Menggunakan HTML
  2. Harus memasukkan kode di dalam postingan
  3. Panjang potongan atau penggelan dapat disesuaikan.
  4. Fungsi Read More hanya akan terlihat kalau kode sudah ditambahkan di dalam postingan.
  5. Tanpa Thumbnail. Untuk menampilkan thumbnail atau gambar, maka gambar harus diletakkan dibagian paling atas postingan.

Read More Otomatis dengan thumbnail :
  1. Menggunakan Javascript.
  2. Tidak perlu memasukkan kode di dalam postingan.
  3. Panjang potongan dapat di ubah, tetapi akan berpengaruh di semua postingan.
  4. Read More diterapkan untuk semua posting, tanpa terkecuali.
  5. Secara otomatis menampilkan thumbnail atau gamabar yang ada di dalam postingan tersebut.

Itu adalah sekilas gambaran tentang perbedaan antara Read More Konvensional dengan Read More Otomatis dengan thumbnail. Untuk membuat Read More otomatis atau untuk membuat fitur baca selengkapnya, silahkan ikuti langkah di bawah ini!

Cara Buat Auto Read More :
  • Login dulu di akun blogger sobat
  • Dari Design, klik Edit HTML dan tandai Expand Widget Template
  • Back Up terlebih dahulu template sobat.
  • Cari kode </head>
  • Tambahkan kode berikut Setelah atau di bawah kode </head>
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx =  s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->
  • Setelah itu, cari kode <data:post.body/>
  • Ganti kode <data:post.body/> dengan kode berikut :
<!-- Auto read more Start -->
<!-- http:lenterablogger.blogspot.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->
  • Klik Preview, kalau sudah berhasil klik Save

Tambahan :
  1. summary_img adalah jumlah karakter yang akan ditampilkan dalam penggalan dengan thumbnail.
  2. summary_noimg adalah jumlah karakter yang akan ditampilkan dalam penggalan tanpa thumbnail
  3. img_thumb_height dan img_thumb_width adalah ukuran tinggi dan lebar gambar, Sobat blogger bisa menyesuaikan angka tersebut.
  4. Kata "Read more" bisa di ganti dengan kata yang sobat blogger inginkan misalnya : Baca Selengkapnya, Lebih Lengkap, Baca Lagi, Selengkapnya, dll.

Kalau postingan atau artikel ini bermamfaat buat sobat blogger, jangan lupa tinggalkan pesan atau komentar sobat pada kolom komentar di bawah ini.

Cara Membuat Widget Slideshow Postingan


Cara Membuat Widget Slideshow Postingan
Belakangan ini banyak teman teman saya menanyakan kepada saya .. “gimana sih cara pasang slide show postingan di blog” susah ga ? terus saya jawab ga susah kok, tinggal copy scriptnya , edit dikit abis itu save. Jadi deh...  Namun satu udah bisa, beberapa hari kemudian ada yang nanya lagi dan begitu terus hingga beberapa orang. Sehingga munculah sebuah ide untuk memposting cara membuat slideshows di postingan. Banyak yang berminat memasang widget ini setelah melihat blog saya. Karena slide tersebut memudahkan para pengunjung untuk membaca postingan apa yang menarik di blog kita. Karena di slide show tersebut bisa menampilkan gambar dari tiap postingan kita. Disertai judul dan koment yang ada di postingan tersebut. Apakah anda berminat juga untuk memasang widget ini ? caranya mudah kok,. Tidak perlu memakan waktu lama... dari pada membuang – buang waktu mari kita langsung ke TKP saja,,, lets gooo....

Cara Memasang Widget Slide Show Postingan Di Blog

  • Login ke blog anda
  • Pilih Rancangan
  • Tambah gadget
  • Pilih tambah Html / Java Script
  • Kemudian Copy kode Html Dibawah ini

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
    <script language='JavaScript'>

imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = " http://www.BlogAnda.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
    <script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div> 
<small><a href="http://permathic.blogspot.com/2012/04/cara-memasang-slide-show-postingan-di.html" target="_blank" title="Cara Memasang Slideshow Postingan Di Blog"> Widget Slideshow</a></small> 

Ingat !!! jangan lupa ubah tulisan warna merah menjadi alamat url Blog anda. Dan Editlah Width ( lebar) dan Height (tinggi) sesuai dengan yang anda inginkan. Namun jika anda tidak ingin repot2 mengubah ukuran, tinggal Copas aja. Tapi jangan lupa tulisan warna merahnya di ganti.

  • Pastekan script di atas kedalam Html/java script tadi
  • Simpan
  • Lalu atur dimana anda akan meletakan slide show tersebut
  • Lalu simpan kembali.
  • Selesai

Membuat Link Efek Pelangi di Blog

link pelangi,pelangi,rainbow,rainbow effect,efek pelangi

Jika crusor diarahkan pada suatu link, maka link tersebut akan menampilkan efek warna warni yang berubah-ubah. Apakah sobat blogger pernah melihat link yang seperi itu? Efek link yang berubah warna di sebut dengan nama Link Rainbow Effect. Kalau di negara kita, sering di sebut dengan nama Link Efek pelangi.

Kalau sobat blogger mencari tutorial tentang cara buat link berwarna warni atau berkedap kedip di situs atau blog lain, maka tutorial tersebut pasti meminta sobat blogger untuk Edit Template. Berbeda dengan di Lentera Blogger, sobat blogger tidak perlu Edit Template. Penasaran, bagaimana caranya? Let's make it...!!!

Cara Buat Link Efek Pelangi di blog :
  • Kunjungi blogger.com
  • Di Menu Drop Down klik Layout ---> Add a gadget ---> HTML/JavaScript
  • Lalu Copy Paste kode berikut pada kolom yang tersedia :
<script src="http://tutorialblogspot.googlecode.com/files/LinkPelangi.js" type="text/javascript"></script>
  • Klik Simpan.

Tambahan :
Saat sobat blogger memasukkan kode tersebut, jangan kasih Title atau Judul pada kolom pertama, biarkan kosong.

Pengikut