15 Desember 2011

Home » All posts

Cara Membuat Related / Recent Post Thumbnails Bergerak di Bawah Postingan Blog

Recent Post adalah widget yang akan menampilkan beberapa artikel / postingan terakhir blog. Adapun jumlah portingan yang di tampilkan bisa diatur sesuai keinginan kita dengan mengacak - acak kode HTMLnya. Dengan Related Post Thmbnails ini, pengunjung akan dengan mudah melihat beberapa artikel terakhir yang diposting di blog. Dengan sekali klik, pengunjung akan langsung menuju ke artikel yang masih fresh.

Mau tahu cara memasang Cara Membuat Related Post Thumbnails Bergerak dilengkapi dengan bingkai yang tidak bisa digunakan untuk foto dinding di rumah pada blog anda ? (Kalau kalimatnya terlalu panjang, silahkan ambil nafas dulu. Bernafas melalui hidung... lalu keluarkan melalui bokong hehehehe......).

a. Login ke Blogger.
b. Di halaman Dasbor, kita pilih Rancangan.
c. Kemudian pilih Edit HTML
d. Beri tanda centang pada Expand Template Widget
e. Cari kode </head>
Cara Membuat Related / Recent Post Thumbnails Bergerak di Bawah Postingan Blog
f. Taruh (copy paste) kode berikut ini di atasnya

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

g. Cari kode di bawah ini

<div class='post-footer-line post-footer-line-1'>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

h. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.hajsmy.us/' style='display:none;'>Hajsmy Blog</a>
</b:if>
</b:if>

h. save template
gimana sob, mudahkan, perlu ketelitian sob, jangan keburu-buru nanti malah kacau hasilnya, semoga bermanfaat ya sob :)

Sumber : http://www.hajsmy.us/

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.

UP

Cara Membuat Related / Recent Post Thumbnails Bergerak di Bawah Postingan Blog

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