15 Desember 2011

Home » All posts

Cara Membuat Related / Recent Post dengan Widget (HTML/javascript)

Posting kali ini saya akan menampilkan tentang cara membuat recent post

plus Categoris atau Labelnya.

langkah"nya seperti di bawah ini.

Cara Membuat Related / Recent Post dengan Widget (HTML/javascript)

Masuk ke akun Blogger kamu dan pilih "Layout" - "Page Elements",

Klik "Add a Gadget" - "HTML/JavaScript",

Beri judul sesuai dengan yang kamu inginkan,

Copy-paste kode di bawah ini,

 Label: <span id="pbl_labels"></span>
<div id="pbl_posts"> Recent Posts </div>

<script type="text/javascript">
var jumlah_maksimum_post      = 5;
var dengan_ringkasan          = true;
var jumlah_karakter_ringkasan = 100;
</script>

<script src="http://copycat91.googlecode.com/svn/trunk/recentpostsbylabel.js">
</script>

<script src="http://URLBLOGSOBAT.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">
</script>

</div>

Ubah kode yang ditebalkan sesuai dengan yang sobat inginkan:

jumlah_maksimum_post adalah jumlah maksimum post yang sobat ingin tampilkan.
dengan_ringkasan, true kalau sobat ingin menampilkannya dengan ringkasan dan false kalau sobat hanya ingin menampilkan judulnya saja.
jumlah_karakter_ringkasan adalah jumlah karakter ringkasan yang ingin ditampilkan, ini harus diisi hanya jika kamu mau menampilkan dengan ringkasannya juga.
URLBLOGSOBAT ganti dengan URL Blog sobat, contohnya untuk blog ini, aku ganti jadi: fajarnoverdi.

Cara Membuat Related / Recent Post dengan Widget (HTML/javascript)
…Semoga Bermanfaat… !.Semoga Sukses.! .send komentar ya.

Cari Tau Siapa Yang Menjiplak / Copas Artikle Blogmu?

Nah, pas jalan-jalan gak sengaja ketemu situs bagus. Situs buat mengetahui siapa yang telah menjiplak artikel di blog kita. Caranya cukup mudah, gak perlu mendaftar, tinggal taruh alamat/URL blogmu trus pencet tombol "GO", tinggal tunggu bentar trus langsung keluar siapa yang ngambil ato yang copy paste artikel blogmu. Kalo untuk mengetahui siapa yang menjiplak artikel2 atau postingan2 tertentu maka yg kamu masukkan ke sana adalah link dari judul postinganmu, jadi nanti akan ketahuan siapa yang menjiplak postinganmu tersebut.

Tapi sayang untuk yang versi gratis kita hanya bisa mengetahui beberapa aja, jadi gak bisa mengetahui semua yang ngopy paste blog kita. Tapi lumayan kan buat mengintip dikit. he..he.. . OK bagi yang pengen tahu nih alamatnya http://www.copyscape.com, langsung datengin aja tuh kesana.

Cara Membuat Blog Cantik dengan Recent Post With Thumbnail Bergerak

1.Seperti biasa Login Blogger.com
2.Klik Rancangan-->Tambah Gadget/Add Gadget ditempat yang sobat inginkan,kemudian pilih HTML/JavaScript.
3.Selanjutnya sobat copy kode dibawah ini lalu masukkan kedalam kotak HTML/JavaScript tadi.

#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}

#rp_plus_img ul{list-style-type:none;margin:0;padding:0}

#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}

#rp_plus_img li{height:60px;padding:5px;list-style:none;}

#rp_plus_img a{color:#F68629;}

#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}

#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}

#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:95px;height:55px;}

</style>

</script>

</script>

var speed = 1000;

var pause = 2500;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

var numposts = 20;

var numchars = 45;

</script> <script src="http://roningasinanblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">

</script> </ul>

</center>

Perhatikan tulisan warna merah ubahlah dengan link blog milik sobat,dan warna biru untuk mengatur tinggi recent postnya,setelah selesai mengedit jangan lupa untuk menyimpannya.

Untuk menghasilkan tampilan yang sesuai dengan template,sobat otak atik saja kode recent post diatas,jangan kawatir atas kesalahan edit karena kode ini tidak masuk dalam template,dan dengan mengotak atik pastinya akan menambah banyak ilmu,oke langsung aja sobat praktekkan Cara Membuat Blog Cantik dengan Recent Post With Thumbnail Bergerak

Read more/baca selengkapnya adalah pemenggal postingan yang tampil di home page.Selain sebagai pemenggal artikel readmore juga dapat mengurangi load page dan sekaligus membuat blog tampak rapi.Untuk membuatnya sangatlah mudah sobat tinggal ikuti langkah-langkah dibawah ini.

1.Login Blogget.com
2.Buka halaman Rancangan --> lalu Klik Edit HTML
3.Download Template Lengkap untuk berjaga-jaga bila terjadi kesalahan edit.
4.Centang kotak Expand Template Widget untuk menampilkan seluruh kode template.
5.Cari kode </head>
6.Taruh kode dibawah ini tepat dibawah kode pada langkah nomor lima

Cara Membuat Readmore di Blog
7.Selanjutnya sobat cari kode <data:post.body/> atau <p><data:post.body/></p>
Cara Membuat Readmore di Blog
Setelah ketemu ganti kode diatas dengan kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>

</script>

<a expr:href='data:post.url'>»»  READMORE...</a></span>

</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

8.Save template.Sobat lihat hasilnya di home page.

Keterangan
Summary noimg 430=tinggi artikel terpenggal tanpa image
Summar img 430=tinggi artikel terpenggal dengan image
Tulisan Readmore bisa sobat ganti dengan Baca selengkapnya atau apa saja terserah...
Untuk tulisan warna biru itu adalah ukuran image yang ditampilkan pada home page.

Baca Juga > Cara Mengganti Tulisan Read More / baca selengkapnya Pada Blog Dengan Gambar dan Kumpulan Icon Read More Blog

Cara Membuat judul posting saja pada label Blog

Trik ini dimaksudkan agar ketika link "label" di klik, maka seluruh postingan yang ada di bawah label/ketegori tersebut yang muncul hanya Judulnya saja. Karenanya, tampilan seluruh postingan yang ada di bawah label tersebut akan tampil seperti halnya daftar isi, dan tentunya ini akan lebih memudahkan para pengunjung blog kita dalam mencari suatu artikel dengan cepat.

Cara mensetting agar hanya judul postingan saja yang tampil ketika label diklik tidak lah sulit. Bagi teman-teman yang tertarik untuk membuat tampilan tersebut, silahkan diperaktekkan melalui langkah-langkah berikut:

1 . Login ke akun Blogger
2. kLik Tata Letak => Klik Edit HTML dan jangan lupa untuk mencentang kotak "Expand Widget Template"
3. Carilah kode <b:include data='post' name='post'/>

4. Kalau sudah ketemu, ganti kode tersebut dengan kode berikut :

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

5. Kalau sudah, jangan lupa klik Simpan Template

Sekarang, cobalah untuk mengklik label/kategori mana saja yang ada di blog anda, pasti nanti postingan-postingannya akan tampil hanya judulnya saja...bagaimana, menarik bukan?

Semoga bermanfaat.

Cara Membuat Efek Daun Berjatuhan Di Blog

Efek daun berjatuhan di blog sepertinya juga banyak diminati oleh sobat blogger, dan menurut saya efek daun berjatuhan ini loadingnya lebih ringan dan cepat ketimbang efekbintang bertaburan yang saya posting sebelum ini. Trik membuat efek daun berjatuhan ini juga masih menggunakan javascript, cara membuatnya simak lebih lanjut dibawah ini.

Cara Membuat Efek Daun Berjatuhan :

1. Seperti biasa login dulu ke dashboard blogger anda.

2. Pilih Rancangan > Edit HTML, centang Expand widget template.

3. Cari kode </head> pada template dengan menggunakan Ctrl+F.

4. Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head> .

5. Save / simpan template anda dan lihat hasilnya muantaaap bro !!

Nah itu tadi langkah-langkah bagaimana cara membuat efek daun berjatuhan di blog, cukup mudah bukan ? Jangan lupa daun-daunnya kalo sudah kebanyakan yang jatuh sambil di sapu ya he he…

UP

Cara Membuat Related / Recent Post dengan Widget (HTML/javascript)

Cari Tau Siapa Yang Menjiplak / Copas Artikle Blogmu?

Cara Membuat Blog Cantik dengan Recent Post With Thumbnail Bergerak

Cara Membuat Readmore di Blog

Cara Membuat judul posting saja pada label Blog

Cara Membuat Efek Daun Berjatuhan Di Blog