Read more: http://www.japarus.com/2011/09/jquery-link-bergoyang-saat-disentuh.html#ixzz1z02dw0pz

Tuesday, June 26, 2012

Cara Membuat Postingan di HomePage Blogger Cuma Kelihatan Judulnya saja

Do you want to share?

Do you like this story?

Halo sobat blogger, gimana kabarnya? baik tho?
Postingan pertama di blog Kang Sunu yang baru, saya mau sharing cara Membuat Judul Postingan di HomePage kelihatan Judulnya saja, maksudnya gimana tuh? Maksud Sunu, Postingan yang ada di halaman utama blog kita akan kelihatan judulnya saja, contohnya kaya blognya Kang Sunu ini (kalo enggak berarti Sunu udah bosen, hehehe) ato punya kang rohman, jadi blog kita akan terlihat lebih simple.

Oke langsung aja Kang Sunu kasih tempe. eh salah, tahu maksudnya,(bukan makanan lho, hehehe....).
1. Login ke blogger
2. Klik Rancangan
3. Klik menu Edit HTML
4. Carilah kode
]]></b:skin>


5. Copy kode di bawah ini, lalu paste di bawah kode ]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>


6. Tinggal Save....

***kode diatas masih menyisakan beberapa elemen seperti tanggal posting, komentar dan yang lainnya. Kalo kamumau ngilangin semuanya dan yang tersisa hanya judul post nya saja, pake kode yang ini:

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>




nah, sekarang kamu save template blogmu dan lihat coba,,,

selamat mencoba, jangan lupa komentarnya kalo belum mudeng,,,,

Sunday, June 24, 2012

Cara Memasang Read More Otomatis plus Gambar di Blogspot v2

Cara Memasang Read More Otomatis plus Gambar di Blogspot v2


Read more otomatis berfungsi untuk meringkas artikel postingan yang terdapat pada homepage atau halaman utama blog.

Fitur Read More otomatis ini dilengkapi dengan gambar dan dapat mengatur jumlah karakter yang muncul pada homepage. Dengan menggunakan fitur Read More Otomatis jumlah karakter pada homepage tidak akan fullpost dan tidak akan memakan banyak tempat pada template, jika Template Blogspot kalian belum dilengkapi denga fitur Read More Otomatis, kalian dapat menggunakan script Read More Otomatis ini dengan mudah dan gratis.

Cara Menyisipkan Read More Otomatis pada Template Blogspot:

-->Login ke Blogger Anda
--> Pada Dashboard Pilih Template dan Edit  beri centang HTMLExpand Template Widget

--> Centang Expand Template Widget, selanjutnya silahkan cari kode di bawah ini (Ctrl+F)

</head>

--> Letakan script di bawah ini sebelum kode di atas,
<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 type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' ></script>

  • simpan dulu 


Keterangan:
summary_noimg = 430; : Jumlah Karakter jika tidak memiliki Gambar / Thumbnail summary_img = 340; : Jumlah Karakter jika memiliki Gambar / Thumbnail img_thumb_height = 100; : Tinggi Gambar / Thumbnail. img_thumb_width = 120; : Lebar Gambar / Thumbnail.

--> Selanjutnya, silahkan cari kode di bawah ini,

<data:post.body/>

--> Selanjutnya hapus kode tersebut lalu ganti dengan kode di bawah ini,
<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>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGZCbXbQlwy8wdsjPBLZE4G2EYoXEVbQOaS-RgZhIsTUkkSuxzpAjv7Q3IYxHqeg3arCOcSXwEK3pwYUu1jkXRd740QVx4YawDVxbnwM3YEmZQrlfYa-cYdt2v0bu_CWzbEeUC4fQK2rjC/s1600/blue.png" /></a></span>
</b:if>
</b:if>
  • 4. untuk menggati icon cari kode ini :


<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGZCbXbQlwy8wdsjPBLZE4G2EYoXEVbQOaS-RgZhIsTUkkSuxzpAjv7Q3IYxHqeg3arCOcSXwEK3pwYUu1jkXRd740QVx4YawDVxbnwM3YEmZQrlfYa-cYdt2v0bu_CWzbEeUC4fQK2rjC/s1600/blue.png" /></a></span>

  • ganti tulisan warna hijau dengan alamat icon anda
  • Ingat, ganti teks berwarna hijau dengan alamat url gambar anda yang sebenarnya.

  • Jika sudah, klik tombol Save. Selesai. Mudahkan? :)

Selamat mencoba. Semoga bermanfaat.



















Cara Memasang Read More Otomatis plus Gambar di Blogspot


Read more otomatis berfungsi untuk meringkas artikel postingan yang terdapat pada homepage atau halaman utama blog.

Fitur Read More otomatis ini dilengkapi dengan gambar dan dapat mengatur jumlah karakter yang muncul pada homepage. Dengan menggunakan fitur Read More Otomatis jumlah karakter pada homepage tidak akan fullpost dan tidak akan memakan banyak tempat pada template, jika Template Blogspot kalian belum dilengkapi denga fitur Read More Otomatis, kalian dapat menggunakan script Read More Otomatis ini dengan mudah dan gratis.

Cara Menyisipkan Read More Otomatis pada Template Blogspot:

-->Login ke Blogger Anda
--> Pada Dashboard Pilih Template dan Edit HTML
--> Centang Expand Template Widget, selanjutnya silahkan cari kode di bawah ini (Ctrl+F)
</head>

--> Letakan script di bawah ini sebelum kode di atas,
<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 type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' ></script>

Keterangan:
summary_noimg = 430; : Jumlah Karakter jika tidak memiliki Gambar / Thumbnail summary_img = 340; : Jumlah Karakter jika memiliki Gambar / Thumbnail img_thumb_height = 100; : Tinggi Gambar / Thumbnail. img_thumb_width = 120; : Lebar Gambar / Thumbnail.

--> Selanjutnya, silahkan cari kode di bawah ini,
<data:post.body/>

--> Selanjutnya hapus kode tersebut lalu ganti dengan kode di bawah ini,
<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>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
</b:if>
</b:if>




2. Login ke Blogger. Klik Design->Edit HTML
3. Beri centang pada 'Expand Widgets Templates'
4. Cari kode seperti ini

<span id='showlink'>
<a expr:href='data:post.url'>teks read more anda</a>
</span>

 5. Ganti tulisan yang dicetak tebal dengan kode berikut

<img src="alamat-gambar-anda" />

Ingat, ganti teks berwarna biru dengan alamat url gambar anda yang sebenarnya.

6. Jika sudah, klik tombol Save. Selesai. Mudahkan? :)

Selamat mencoba. Semoga bermanfaat.