Plus N78: Tips Sederhana

Showing posts with label Tips Sederhana. Show all posts

Cara Membuat Blog di WordPress

Assalamualaikum...^_^
Hai sobat-sobat, Plus kali ini ngeposting tentang "Cara Membuat Blog di WordPress", mungkin sudah banyak Blogger-blogger lain yang mempublish, tapi di Artikel ini saya akan memberikan tentang "Cara Membuat Blog di WordPress" Versi Plus senderi. silahkan menyaksikan Videonya...

Plus kali ini akan membahas tentang Bagaimana pasang scroll box di halaman posting blogger. menurut Plus itu sangat lah sederhana . untuk membuat halaman seperti di bawah tidaklah harus membuat kode html yang sangat banyak, melainkan hanya sedikit kode untuk membuatnya. Anda pasti penasaran kan seperti apa kodenya. lihat kode di bawah ini :

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">

(isi halaman yang akan anda pasang)
</div>

contoh :

<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">

<a href="http://plusplux1.blogspot.com/2011/10/cara-memasang-widget-artikel-terkait.html"> Pasang related post bergambar</a>
<br />

<a href="http://plusplux1.blogspot.com/2010/11/tips-cara-memilih-dan-membeli-netbook.html">Tips Cara Memilih dan Membeli Netbook</a>
<br />

<a href="http://plusplux1.blogspot.com/2010/11/ubah-lebar-kolom-template.html">Ubah Lebar Kolom Template</a>
<br />

</div>

Hasilnya :

Kemudian Simpan » selesai deh.

Sedikit penjelasan :

Didalam kode tersebut, yang berperan besar adalah kode yang ada dalam style. Dengan style itulah kita bisa membuat apa yang kita inginkan. Berikut adalah perintah-perintah yang di pakai :

overflow:auto; » kode ini agar tercipta scrolling atau penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
width:300px; » adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 300 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
height:200px; » adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 250px atau nilai yang lainnya.
padding:10px; » adalah kode pembuat jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px;
border:1px solid #eee » agar bidang tersebut terlihat ada kotaknya, jika anda tidak menginginkan ada terlihat kotaknya, maka tinggal di hapus saja.

Selamat mencoba sobat.....

sumber: http://jayaputrasbloq.blogspot.com/

Cara Memasang Widget Artikel Terkait dengan Thumbnail.

Mungkin Artikel ini pernah di bahas oleh blogger lainnya. Tapi tak da salahnya kan Untuk dibahas lagi, supaya sobat-sobat yang belum mengetahuinya bisa tahu.

Disini Plus akan mengasih sebuah Cara memasang widget artikel terkait dengan thumbnail.

Widget artikel terkait dengan thumbnail ini cukup menarik karena disertai dengan gambar. Gambar yang muncul diambil dari salah satu gambar yang ada di artikel yang dimaksud. Widget artikel terkait merupakan daftar link dari judul-judul artikel suatu blog yang berlabel sama dengan artikel yang sedang dibaca.

Berikut cara memasang artikel terkait dengan thumbnail.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan.

3. Klik tab Edit HTML.

4. Klik Download Template Lengkap, untuk berjaga-jaga kalau nanti terjadi kesalahan dalam mengedit template.

5. Beri tanda centang pada Expand Template Widget.

6. Cari kode </head>. Bila Anda menggunakan browser Mozilla Firefox, tekan tombol Ctrl + F, lalu isikan kode yang dimaksud untuk memudahkan pencarian.

7. Copy kode berikut dan paste di atas kode </head>.

<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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBTfGy3MF20vD-oXV0uFtcnyCMD0gJZc4J6xjc4Se5y4rD8cn6DqEHYTPBNDFazo0TWLnfYwKMyk0bvHmb-xf-QkwqViXw12H1FB0SSDmUPeFwo8VO_H19Xr4numuS2tftHyEa3Goo_0A/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>

8. Cari kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>.

9. Copy kode berikut dan paste setelah/Dibawah salah satu kode di atas.

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

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'>

</b:if>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs("<data:post.url/>");

</script>

</div><div style='clear:both'/>

</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

</b:if></b:if>

Related Posts Widget For Blogger with
Thumbnails

10. Klik tombol SIMPAN TEMPLATE.

11. Klik Lihat Blog untuk melihat hasilnya.

Anda dapat mengubah jumlah artikel terkait yang ingin ditampilkan dengan mengubah kode var maxresults=5;
Untuk mengubah judul widget, Anda dapat mengedit kode berikut var relatedpoststitle="Related Posts";
Bila ingin mengganti default thumbnail, edit kode berikut var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBTfGy3MF20vD-oXV0uFtcnyCMD0gJZc4J6xjc4Se5y4rD8cn6DqEHYTPBNDFazo0TWLnfYwKMyk0bvHmb-xf-QkwqViXw12H1FB0SSDmUPeFwo8VO_H19Xr4numuS2tftHyEa3Goo_0A/s400/noimage.png";
Untuk mengubah warna dari Splitter Line, silakan edit kode var splittercolor="#d4eaf2";

Semoga Artikel ini bermanfaat bagi sobat-sobat semua... Thanks ^_^

sumber : http://klikmunadi.blogspot.com/

Cara Membuat Blog di WordPress

Pasang scroll box di blogger

Cara Memasang Widget Artikel Terkait dengan Thumbnail.