Cara Membuat Kotak Kode Script HTML/Javascript di Dalam Posting Blog

Jika kita berbagi kode HTML/Javascrip, tentu kita harus menyertakan kode itu dalam postingan blog. Biar mudah dicopy-paste oleh user, kita bisa membuat kotak (box) kode untuk meletakkan Script HTML/Javascript itu di dalam posting blog.

Caranya, klik mode HTML, lalu masukkan kode berikut ini:

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Anda Di Sini
</div>

Lalu klik lagi mode Compose. Hasilnya akan seperti ini:

Kode Script Anda Di Sini

Anda bisa memodifikasinya sesuai dengan selera, misalnya border dan latar belakang warna (color background). Lihat: Kode warna HTML.

Kode kotak HTML lainnya:

<div align="left">
<textarea cols="70" name="code" rows="6">
Kode Script Anda di Sini
</textarea>

Tampilannya seperti ini:

KODE HTML ANDA DI SINI

Cara mudahnya:

1. Tuntaskan dulu posting Anda di mode Compose.
2. Ketika akan menulis bagian memasukkan kode HTML, lewati dulu, kasih tanda, misalnya "KODE HTML DI SINI".
3. Setelah selesai, klik mode HTML
4. Masukkan kode untuk kotak kode HTML (Replace tulisan "KODE HTML DI SINI" yang dibuat tadi).
5. Klik lagi mode Compose
6. Masukkan kode HTML yang sudah disiapkan ke dalam kotak yang sudah jadi.

Sumber : http://contohblognih.blogspot.com/2014/01/membuat-kotak-kode-script.html

Read More

Cara membuat widget artikel terbaru di blog

Cara membuat widget artikel terbaru di Blog ~ Widget artikel terbaru ini sangat sederhana tanpa menggunakan gambar hanya judul artikelnya saja yang di tampilkan. Dengan widget ini pengunjung blog anda akan mengetahui dengan cepat daftar artikel yang baru anda publikasikan. Sehingga dengan adanya widget ini diharapkan akan meningkatkan jumlah page view blog anda. Bagi yang berminat memasang widget ini, Simak tutorial berikut ini :

1. Silahkan masuk ke Blogger
2. Selanjutnya pilih menu Tata Letak
3. Kemudian pilih tambahkan gadget, silahkan tentukan sendiri posisi widgetnya ingin di letakkan (biasanya di sidebar).
4. Pilih HTML/JavaScript
5. Copy Code dibawah ini :

<script src="https://googledrive.com/host/0B8ec8WZuBiAEbUNTY3ZieHBQa0U"></script><script>var numposts=8;var showpostdate=false;var showpostsummary=false;var numchars =100;</script> <script src="http://pustakaaslikan.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp"></script>

KETERANGAN:

Angka 8 adalah jumlah artikel yang akan di tampilkan, Silahkan anda ganti sesuai dengan keinginan.
Silahkan anda ganti url ini http://pustakaaslikan.blogspot.com dengan url blog anda.


6. Langkah terakhir klik SIMPAN.

Sekian untuk tips blogging kali ini, Semoga apa yang saya tulis bisa bermanfaat untuk semua. Terimakasih.........

Read More

Cara Mudah Membuat Recent Post Sesuai Label disertai Thumbnail

Cara mudah membuat Recent Post sesuai Label disertai Thumbnail, cukup ikuti langkah-langkah berikut ini:
1. Masuk ke Dashboard > Tata Letak > Add Gadget/Tambah Gadget
2. Pilih HTML/JavaScript
3. Masukkan Kode JavaScript berikut ini.

<script type='text/javascript'>var numposts = 5; var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/ Artikel%20Islam?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<a href="http://pustakaaslikan.blogspot.com/search/label/Artikel%20Islam" style="float:right;font:normal 11px Arial;padding:5px 0;">Lihat Artikel Islam yang lain.....  &#187;</a>

Keterangan:

1. Angka 5 adalah jumlah post yang ingin ditampilkan, bisa diganti. Artikel%20Islam adalah nama label yang postingan yang ingin ditampilkan, ganti dengan Label yg diinginkan.
2. %20 untuk spasi jika labelnya terdiri dari 2 kata atau lebih.
3. http://pustakaaslikan.blogspot.com/ silahkan diganti.
4. Lihat Artikel Islam yang lain..... ganti juga sesuai kebutuhan. misalnya "Selanjutnya dari kategori ini....." 

Sumber: http://webeson.blogspot.com/2012/10/cara-mudah-membuat-recent-post-sesuai.html

Read More

Cara Memasang Fans Page Facebook Tersembunyi

Ada 2 Cara Memasang Fans Page Facebook Tersembunyi
Cara Pertama
1. Bukalah akun blog anda
2. Masuk Elemen Template, lalu pilih Edit Widget, slanjutnya Centang : Expand Template Widget
3. Carilah kode </head> lalu letakkan kode script di bawah ii tepat di atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

4. Simpan tempalate blog anda.

Catatan :
Apabila template anda sudah menyediakan kode script diatas, abaikan saja. Artinya anda tidak perlu memasukkannya lagi ke dalam template blog anda. Selanjutnya ikuti cara kedua.

Cara kedua
1. Kalau cara pertama sudah selesai, maka masuklah ke Elemen Tata Letak, pilih Add Widget / Tanmah Gadget
2. Lalu pilih HTML/Jawascript
3. Selanjutnya copylah kode script di bawah ini ke dalam Widget/Gadget Baru yang anda buat.

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTDD1A5qA6hbsMQc8ggiP7bF-ZcnBzoxXR0tMXCbGPzukJStq7nc_4wMJXm7V5Zt5YYf8CALYzInGDwI2t5gbkB7yzrqatNL38Wm66VnaNgJEH1B90V67IAuMM71D7sq63EGHxVKKRLrI/s1600/fans-page-facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/PustakaAslikan&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://pustakaaslikan.blogspot.com/2013/09/cara-memasang-fans-page-facebook.html">Get Widget Here</a></span></div></div>

4. Simpat Widget/Gadget Baru yang anda buat tersebut.
5. Lihat hasilnya.

Catatan :
1. Gantilah tulisan https://www.facebook.com/PustakaAslikan dengan alamat / URL Halaman Facebook Anda.
2. Lihat contoh hasilnya di sebelah kanan blog ini.

Demikian tutorial kali ini mengenai Cara Memasang Fans Page Facebook Tersembunyi, semoga bermanfaat.

Sumber: http://bos-tutorial.blogspot.com/2013/02/cara-memasang-fans-page-facebook.html

Read More

Cara Membuat Footer 3 Kolom Dengan Background

Beberapa hari yang lalu saya blogging kesana kemari hanya mencari Cara Membuat Footer 3 Kolom Dengan Background, tapi tidak ada yang sesuai dengan selera saya. Alhamdulillah akhirnya saya menemukannya pada blog mas Vian Pradita (http://kode-blogger.blogspot.com) tentang Cara Membuat Footer 3 Kolom Dengan Background dan langsung saya terapkan pada blog saya (http://pustakaaslikan.blogspot.com). Terima kasih mas Vian...!! tutorialnya sangat membantu saya, semoga semakin sukses,,, Aamiin....!!!!!
Bagi teman - teman yang ingin mengetahui bagaimana Cara Membuat Footer 3 Kolom Dengan Background silahkan Klik DI SINI....!!!

Read More