Auto Read More v2 | Post Thumbnails

Auto read more - Pada posting sebelumnya cara membuat auto read more pada blogger, nah pada postingan kali ini merupakan auto read more blogger juga tapi sedikit perubahan dan tampilan yang semankin menarik. mau tau bagaimana cara pasang auto read more kali ini?? langsung aja yuk ke TKP.

Cara pasang auto read more:
1. Log in di Blogger.com
2. pilih Edit HTML, click Expand Widget Templates
3. carilah kode </ head> dan copy kode di bawah ini letakkan sebelum kode </ head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 300; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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(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>

 4. cari kode <data:post.body/> atau <p><data:post.body/></ p>, ganti kode tersebut dengan kode di bawah 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'><a expr:href='data:post.url'><br/><b>Read More</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. kemudian Save Template.
6. selesai...

Download PREDIKSI Soal UAN 2011-2012 Terbaru

UAN 2011-2012. Download Soal UAN 2011-2012 untuk SD, MI, SMP, SLTP, SMA, SMU, SMK, SMEA baik UAS / Ujian Sekolah, Ujian Negara untuk mata pelajaran Bahasa Indonesia, Matematika, Bahasa Inggris, IPS, IPA, Fisika, Biologi, Ekonomi, Akuntansi, Sekretaris, Teknik, Bahasa Daerah, PPKN, Sosiologi bisa di Download Gratis.

frekuensi tvone terbaru maret 2011

Bagi anda yang senantiasa selalu setia menonton tvone, baru baru ini tvone pindah frekuensi dari yang lama. tvone kali ini pindah frekuensi terbaru yang diupdate tgl 22 maret 2011 kemaren. Berikut frekuensi tvone terbaru 22 maret 2011.

Berbagai macam teknik fotografi

1. Depth of field (ruang tajam)
Hal-hal yang mempengaruhi ruang tajam:
-Jarak pemotretan (jauh=luas, dekat=sempit)
-Bukaan diafragma (kecil=luas, besar=sempit)
-Jarak fokus lensa /focal length (tele=sempit, wide=luas, normal=bisa diatur)

Shoutbox Melayang Dengan Light Effect jQuery

untuk yang ini adalah shoutbox melayang dengan jquery namun tampilannya berbeda dengan adanya light effect, dalam artian, saat button buku tamu di KLIK maka seluruh halaman akan gelap kecuali shoutbox atau buku tamunya. Untuk lebih jelasnya silahkan perhatikan gambar dibawah ini :

Membuat Tooltip Untuk Setiap Link Blogger

Bagi yang belum membaca artikel sebelumnya silahkan klik aja link diatas. Untuk tooltip kali ini sungguh mempunyai kelebihan yaitu secara otomatis akan muncul pada setiap link yang ada pada blog kita. Namun tooltip ini hanya menampilkan Alamat URL dari suatu link. Untuk contoh, silahkan lihat gambarnya dibawah ini :

Make Back To Top Button With Scroll Smooth Jquery

Untuk kali ini saya akan menjelaskan cara membuat tombol back to top dengan dengan jQuery namun dengan adanya Effect Smoot Scroll. Artinya Ketika tombol back to top ini di KLIK, maka ketika Posisi Scroll halaman kembali keatas dengan lembut. Selain itu, proses pemasangan Back To

Simple Slide Panel with jquery

# Cara membuatnya : Login blogger
# Rancangan, Edit Html, Cari kode ]]>
# Dan Simpan kode berikut diatasnya : 

Kwicks menu with jquery

# Cara membuatnya : Login blogger
# Rancangan, Edit Html, Cari kode ]]></b:skin>
# Dan Simpan kode berikut diatasnya :

/* Kwicks menu with jQuery
----------------------------------------------- */
.kwicks {
     list-style: none;
     position: relative;
     margin: 0;
     padding: 0;
     background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ErUuXfVYlLqhR1So0RhfX7hm00p95mGFHm8vrnTAXFIWyZI97nxXfGAneJZ8SzOk6QlWX0ubK6yNJZthnVqIy9Pl45eq_9ncXiX9tZ5RZav2aOdLaOLLyr-3x8lpyCMYPKeVlOiKWvU/s1600/no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/

 }
 .kwicks li{
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    float: left;
    width: 125px;
    height: 40px;
    margin-right: 0px;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVoMaWv-Fp9JWXPcpL-KgtGWMtZRM6cIa6AVAdgdYOdjZPAaPjovGWQxJn5I8FWhwZIWZcRKNmjVagkLhFRKrMMlG7OzdOpDQ7xWtkVJLne6KEVCtWQSlQOcwahASs8pDBlmbsFHPtcNg/s1600/kwicks_sprite.jpg);
    background-repeat:no-repeat;
}
.kwicks a{
    display:block;
    height:40px;
    text-indent:-9999px;
    outline:none;
}

#kwick1 {
    background-position:0px 0px;
}
#kwick2 {
    background-position:-200px 0px;
}
#kwick3 {
    background-position:-400px 0px;
}
#kwick4 {
    background-position:-600px 0px;
}

#kwick1.active, #kwick1:hover {
    background-position: 0 bottom;
}
#kwick2.active, #kwick2:hover{
    background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
    background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
    background-position: -600px bottom;
}

#kwick1 a{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNsT_dm9Sg4qrks-6nHB6vsrv0LzePJvsrsZig_S36eQe13dEjJ5T-Eh5E20mN_IPDZcz6TJ_58Ji7SRNROlqH8w8eTEircKPuD-7DWU5KeJksFjr6M5F4HsqXV4vMODjHm213W4OgD0w/s1600/end.jpg);
    background-repeat:no-repeat;
    background-position: left 0px;
}

#kwick1 a:hover{
    background-position: left -80px;
}

#kwick4 a{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNsT_dm9Sg4qrks-6nHB6vsrv0LzePJvsrsZig_S36eQe13dEjJ5T-Eh5E20mN_IPDZcz6TJ_58Ji7SRNROlqH8w8eTEircKPuD-7DWU5KeJksFjr6M5F4HsqXV4vMODjHm213W4OgD0w/s1600/end.jpg);
    background-repeat:no-repeat;
    background-position: right -40px;
}
#kwick4 a:hover{
    background-position: right -120px;
}

selanjutnya simpan script berikut diatas :

<script type='text/javascript' src='http://kangdadang.googlecode.com/files/jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='http://kangdadang.googlecode.com/files/kwicks.js'></script>
<script type='text/javascript' src='http://kangdadang.googlecode.com/files/custom1.js'></script>

Terakhir simpan kode berikut di tempat yang sesuai dan diinginkan :

<ul class="kwicks">
     <li id="kwick1"><a href="#">Home</a></li>
     <li id="kwick2"><a href="#">Contact</a></li>
     <li id="kwick3"><a href="#">Downloads</a></li>
     <li id="kwick4"><a href="#">Search</a></li>
 </ul>

simpan template....

Sebagai catatan karena menu ini menggunakan jQuery, jadi terkadang ada bentrok Java script jquery yang satu dengan yang lainnya, jika jquery nya sudah ada kawan-kawan tidak perlu lagi menambahkan script jquery nya...

dan untuk lebih jelasnya bisa dilihat disini agar lebih mengerti: DEMO Kwicks menu with jquery

selamat mencoba,, dan semoga kawan-kawan bisa mengembangkannya.... 

Image zoom effect with jquery

  

# Cara membuatnya : Login blogger
# Rancangan, Edit Html, Cari kode ]]></b:skin>
# Dan Simpan kode berikut diatasnya :

Cara membuat breadcrumbs

1. Log in blogger
2. Masuk ke menu Rancangan, Edit Html,
3. Centang Menu Expand Template Widget
4. Simpan kode berikut Diatas kode ]]></b:skin> :

Cara membuat blockquote

Membuat menu area untuk script agar  terlihat lebih menarik dan enak di pandang.... dan memperjelas kode atau script yang di postingkan pada blog kita, contoh tampilannya adalah di bawah ini :

Adding QueryLoader (‘LazyLoad’) Script For Blogger And Customize It.

 

Hi all hear visitors, It’s been a long time since i wrote my latest tutorial here, and sure this is because working on our new version, which released last week, i wish you liked it all,
Today we are going to learn a new tutorial about how to apply the QueryLoader (LazyLoad) script for your blogspot blog.

What is the QueryLoader (LazyLoad).

QueryLoader is a blank black ( can be changed ) screen that covers your blog till all content loaded, which means that your visitors won’t see the actual loading of your blog, instead of that, they will see a loading page with a bar and percentage of the overall blog loading, it’s build using j-query and css. easy to apply to your blogger blog, and customize able.

Step 1, adding the jave files.

In this step we will add a scripts files to your blogger template.
Please navigate to your dashboard >> Design >> edit html , and please find the following code,

</head>

And exactly before it add the following code

<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js'
type='text/javascript'/>

Step 2, adding the jave Codes.

And on the same page, please find the following code,

</body>

And before it add the next code,

<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init();
</script>

Step 3, adding the Css Codes.

now on the same page too, find this code,

]]></b:skin>

And before it , add this code,

.QOverlay {
 background-color: #000000;
 z-index: 9999;
}

.QLoader {
 background-color: #CCCCCC;
 height: 1px;
}

.QAmt {
 color:#FF530D;
 font-size:50px;
 font-weight:bold;
 line-height:50px;
 height:50px;
 width:100px;
 margin:-60px 0 0 -50px;
}

now Click Save Template

And your blog now have the script installed and ready, click preview or view your blog to see the script in action.

Additional Step, Customize the colors.

Now this is an extra step and you can do it or not, as you like,
If you want to change the colors, you have to change values in the css code, “step 3″
Please look at the following image to know what what you should change to get your own style.

If you wondering about how to get your own color codes, i think you should have a look at our amazing color codes tool here.

Demo, Credits, And files.

This script originally coded by gayadesign.com and customized for blogger by me , For a demo for this script please click here,
In case you wanted to host the file in step 2 on your own server or any where else, you can download it here, Download ( 40 hits )

Sumber : http://www.allblogtools.com/tricks-and-hacks/adding-queryloader-lazyload-script-for-blogger-and-customize-it/

Membuat Navigasi Breadcrumb di Blog

Navigasi breadcrumb adalah membuat navigasi sejajar (horizontal) berdasarkan label yang kita buat di tulisan yang publikasikan. Saat kita buka sebuah postingan maka kita akan mengetahui postingan yang kita buka itu termasuk dalam kategori (label) apa. Navigasi breadcrumb ada di atas halaman post yang kita buka.

Memasang Jquery Sweet Menu Pada Blog

Hari ini aku akan tulis satu tutorial blogspot. Khas untuk template daripada blogspot. Side menu di belah kiri blog ni sebenarnya nama dia Sweet Menu. Bukan aku yang meman

Chord Pickout Aplikasi Pencari Chord Lagu | software buat ngulik chord gitar

Oke daripada membahas yang nggak penting mending langsung saja kita meloncat ke pokok bahasan, kali ini saya akan sharing tentang software yang berkaitan dengan dunia musik. Aplikasi ini saya jamin bakalan disukai para kaum adam khususnya yang menyukai musik pula (mungkin kaum hawa juga kali ya..). Perkenalkan, namanya Chord Pickout 1.5, adalah softwa

Chrome OS

Google Chrome Operation System For Computer . Setelah menguasai pasaran
Operation System untuk gadget mobile melalui Android, Google mulai menantang Microsoft Windows dan Linux serta MacOS di ranah PC desktop atau komputer dengan meluncurkan Google Chrome OS .
OS Chrome akan diluncurkan sebagai trial pro

Cara membuka situs waptrick / situs handphone,dari komputer

Banyak sekali Situs " wap" yang menyediakan File gratisan,yang sangat menarik,jika anda mendownload menggunakan IDM, "Resume Capability"nya "YES",alias,File anda akan terdownload lebih cepat,

free domain

cek domain kamu sekarang... kamu bisa pilih sendiri mana domain yang kamu suka...

Memperbaiki Flash Disk yang tiba-tiba mati

Pernakah kamu mengalami kejadian seperti ini:

“Saat flash disk tertancap di komputer win XP, sedang dipakai namun tiba-tiba windows hank alias frozen. Setelah komputer di booting paksa dan di hidupkan lagi, ternyata flash disk yang tertancap tadi mati. Falsh disk tidak bisa bekerja lagi. Windows mendeteksi kapasitasnya 0 MB dan mengeluarkan pesan untuk memformatnya. Dicoba untuk di format gagal juga. Akhirnya gak terpakai lagi deh tuh Flash disk”