Tampilkan postingan dengan label widget. Tampilkan semua postingan
Tampilkan postingan dengan label widget. Tampilkan semua postingan
Jumat, 14 Februari 2014
Cara Mebuat daftar isi contents widget
Daftar isi pada blog akan memudahkan pengunjung mencari artikel yang dicari, dengan daftar isi di blog ini akan membuat para pengunjung lebih betah baca-baca di blog kita, karena sudah kita suguhi dengan semua content yang ada di blog kita.
Manfaat lain adanya dafar isi di blog adalah akan membuat mesin pencari menyukai blog kita, yang implikasinya akan mengindeks semua halaman yang kita tampilkan di halaman utama pada daftar isi tersebut
Oke tidak usah berpanjang lebar lagi, bagi sobat blogger yang tertarik untuk memasang daftar isi di dalam blognya, berikut langkah-langkahnya:
1. Login dulu ke blog sobat2. Kalo sudah login, selanjutnya kalo gak mau susah payah, ada cara gampang , silahkan Klik Tombol di bawah untuk langsung menambah widget ke blog sobat:
<div style="border: 2px solid rgb(51, 255, 51); overflow: auto; height: "350px;" margin="5px" ;>
<script stylejavascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script>
<script stylejavascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
Widget By: [<a href="http://blogspot.com">bloggerunix</a>]
<script stylejavascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script>
<script stylejavascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
Widget By: [<a href="http://blogspot.com">bloggerunix</a>]
Keterangan:
Untuk kode berwarna merah silakan diganti nilainya sesuai selera sobat
Ganti blogspot.com dengan url blog masing-masing :)
var numposts : Jumlah Daftar posting yang ditampilkan
var showpostdate: menampilkan tanggal (false berarti tidak ditampilkan)
var showpostsummary: menampilkan ringkasan posting
var numchar : jumlah karekter post summary
rgb(51, 255, 51) warna border daftar isi
Kamis, 07 November 2013
Widget Slide Panel With CSS and jQuery Effect
Ini adalah widget yang sederhana, namun cukup efektif untuk sekedar meringkas bagian-bagian yang biasanya dianggap terlalu panjang atau terlalu lebar. Kamu bisa menggunakan widget ini untuk meletakkan foto, video, daftar teman atau apapun, yang menurutmu terasa sedikit mengganggu penampilan.
Untuk Contohnya sobat bisa lihat langsung pada postingan ini, perhatikan pada bagian Menu diatas.
Jika sobat berminat dan ingin membuatnya, ikuti langkahnya sebagai berikut :
1. Login ke akun Blogger sobat
2. Klik Perancangan >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :
5. Klik Simpan, dan lihat hasilnya. :D
KET ::
- Kode yang Saya beri warna hijau adalah JQuery. Sebelum menambahkan widget ini sebaiknya periksa dulu isi template anda. Jika template anda sudah dilengkapi dengan JQuery, maka buang kode tersebut dari widget.
Sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.
I am just an ordinary man
who just might share
the knowledge that I know
ahead of you, No one is
more perfect. Always keep
learning and sharing of
knowledge, Just be Yourself
and be The Unique that makes
them know who you are.!!
3 April 2012
Untuk Contohnya sobat bisa lihat langsung pada postingan ini, perhatikan pada bagian Menu diatas.
Jika sobat berminat dan ingin membuatnya, ikuti langkahnya sebagai berikut :
1. Login ke akun Blogger sobat
2. Klik Perancangan >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :
<style type="text/css">
/*
Copyright April 2012 :: Muchtar a.k.a UTta
Visit: http://.blogspot.com/
*/
#panelutta {display:block;}
#panel {background-color:#CF4C23;border:2px solid #CF4C23;border-width:2px 2px 0 2px;overflow:auto;margin:0;padding:20px 15px 15px 15px;color:#111;
font:normal 12px "Consolas","Courier New",Courier,mono,serif;-webkit-box-shadow:inset 0 0 7px #222;-moz-box-shadow:inset 0 0 7px #222;box-shadow:inset 0 0 7px #222;display:none;}
.tombolpanel {position:relative;cursor:pointer;text-shadow:1px 1px 2px #000;padding:7px 15px;background-color:#333;border-top:3px solid #CF4C23;color:#e5e5e5;text-align:center;font:bold 14px Times,Sans-Serif;font-style:italic;-webkit-box-shadow:0 -1px 2px #222;-moz-box-shadow:0 -1px 2px #222;box-shadow:0 -1px 2px #222;-webkit-border-radius:0 0 14px 14px;-moz-border-radius:0 0 14px 14px;border-radius:0 0 14px 14px;}
.tombolpanel:hover {color:#ccc;}
.tombolpanel:after {content:;position:absolute;top:100%;margin-top:-10px;left:5%;width:0;height:0px;display:block;border-width:20px;border-style:solid;border-color:#333 #333 transparent #333;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(.tombolpanel).click(function() {
$(#panel).slideToggle(slow);
$(.tombolpanel span.in).toggle();
});
});
</script>
<div id="panelutta">
<div id="panel">
... ISI KONTEN DI SINI ...
</div>
<div class="tombolpanel">
<span class="in">Buka Panel</span>
<span class="in" style="display:none;">Tutup Panel</span>
</div>
</div>
5. Klik Simpan, dan lihat hasilnya. :D
KET ::
- Kode yang Saya beri warna hijau adalah JQuery. Sebelum menambahkan widget ini sebaiknya periksa dulu isi template anda. Jika template anda sudah dilengkapi dengan JQuery, maka buang kode tersebut dari widget.
Sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.
Selamat mencoba.!
UTta MOG-MOG
I am just an ordinary man
who just might share
the knowledge that I know
ahead of you, No one is
more perfect. Always keep
learning and sharing of
knowledge, Just be Yourself
and be The Unique that makes
them know who you are.!!
3 April 2012
Buka Panel
Tutup Panel
Tutup Panel
Langganan:
Postingan (Atom)