Rabu, 11 Januari 2012

Membuat Widget Spoiler Recent Comment

By Adam01.10Tips Dan Trik, Tutorial Blogspot, Widget / GadgetNo comments

Membuat Widget Spoiler Recent Comment | Tutorial Blog

Untuk menghemat tempat di blog dalam memajang daftar artikel, Link dari hasil tukar link, Recent Comment, dll, kita dapat menggunakan Kotak Blogroll, Kali ini saya akan berbagi tentang tutorial Membuat Widget Recent Comment Menggunakan Spoiler, cara ini sangat berguna untuk menghemat tempat di sidebar.

Berikut cara Membuat Widget Spoiler Recent Comment :

Login ke blogger, klik Design > Page Element.
Klik Add a Widget dan pilih HTML/Javascript.
Lalu letakkan kode berikut di area konten widget :

Kode Script :

<div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Recent Comments'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 150px;" type="button" value="Recent Comments" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"> <div style="display: none; height: 250px; overflow: auto;">
<script type="text/javascript" src="http://html-scripts.googlecode.com/files/comments.js"></script>
<script type="text/javascript">
var numcomments = 10;
var showcommentdate = false;var
showposttitle = true;var
numchars = 100;var
standardstyling = true;var
showfooter = true;
</script>
<script type="text/javascript" src="http://wadahtutorial.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div></div></div>

Silakan ganti wadahtutorial.blogspot.com dengan alamat blog Sobat.
Terakhir klik Save.

Selesai...
Berikut contoh hasilnya :

Sekian tutorial tentang Membuat Widget Spoiler Recent Comment.

Membuat Sticky Post di Blogspot

By Adam02.15Tutorial BlogspotNo comments

Membuat Sticky Post di Blogspot | Tutorial Blog

Sticky post merupakan sebuah postingan yang selalu berada di homepage, dan urutannya tidak akan pernah tergantikan oleh artikel terbaru ketika dipublish. Intinya sticky post adalah sebuah postingan statis / tetap.

Berikut Cara Membuat Sticky Post di Blogspot :

Login ke akun blogger anda. Pilih Design/Rancangan > Page Element/Elemen Halaman.
Klik Add a Gadget/Tambah Gadget.
Pilih HTML/Java Script.
Masukkan artikel yang ingin disticky pada area widget.
Lalu klik Save.
Drag widget yang berisi postingan artikel tadi tepat di atas bagian blog post.
Terakhir klik Save.
Silakan lihat hasilnya di blog Anda.

Semoga Bermanfaat...

Membuat Spoiler Blogroll

By Adam07.00Tips Dan Trik, Tutorial Blogspot, Widget / GadgetNo comments

Membuat Spoiler Blogroll | Tutorial Blog

Untuk menghemat tempat di blog dalam memajang daftar artikel, Link dari hasil tukar link, Recent Comment, dll, kita dapat menggunakan Kotak Blogroll, Kali ini saya akan berbagi tentang tutorial Membuat Widget Blogroll Menggunakan Spoiler, widget ini sangat berguna untuk menghemat tempat di sidebar.

Berikut cara Membuat Spoiler Blogroll :

Login ke blogger, klik Design > Page Element.
Klik Add a Widget dan pilih HTML/Javascript.
Lalu letakkan kode berikut di area konten widget :
<div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Blogroll'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 150px;" type="button" value="Blogroll" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none; height: 250px; overflow: auto;">

<ul>
<li><a href="http://wadahtutorial.blogspot.com/" target="_blank">Tutorial Blog</a></li>
<li><a href="ALAMAT BLOG" target="_blank">TEXT</a></li>
<li><a href="ALAMAT BLOG" target="_blank">TEXT</a></li>
</ul>

<div style="text-align: right;"><a href="http://wadahtutorial.blogspot.com/" style="font-size:4px; text-decoration:none; color: #333333;">Tutorial Blog</a></div></div></div></div>
Silakan ganti ALAMAT BLOG dan TEXT dengan alamat blog Sobat Anda.
Terakhir klik Save.

Selesai...
Berikut contoh hasilnya :

Sekian tutorial tentang Membuat Spoiler Blogroll.

Membuat Tombol Home Melayang

By Adam05.35Tips Dan Trik, Tutorial Blogspot, Widget / GadgetNo comments

Membuat Tombol Home Melayang | Tutorial Blog

Sebelumnya saya pernah posting tentang Membuat Tombol Back To Top, pada postingan kali ini saya akan berbagi cara Membuat Tombol Home page dan Reload page Melayang.

Langsung saja Sob, berikut caranya :

Login ke Blogger, Klik Design/Rancangan > Edit HTML.
Beri tanda centang pada Expand Template Widget.

Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
Copy kode berikut dan pastekan di atas ]]></b:skin>
#floating-home {
position:fixed;_position:absolute;top:280px; left:0px; clip:inherit;
_bottom:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#floating-home a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#floating-home img
{
border:0;
}
#floating-home a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
Kemudian cari kode <body>, dan paste kode berikut dibawah <body> :
<div id='floating-home'>
<div><a expr:href='data:blog.homepageUrl' title='Home'><img alt='Home' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/home-i.png'/></a></div>
<div><a href='#' onClick='window.location.reload()' title='Reload page'><img alt='Reload page' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/refresh.png'/></a></div>
</div>
Terakhir klik Save / Simpan Template.

Silakan dicoba Sob,,, dan semoga berhasil Membuat Tombol Home Melayang.

Membuat Widget Daftar Isi Menggunakan Spoiler

By Adam00.57Tips Dan Trik, Tutorial Blogspot, Widget / GadgetNo comments

Membuat Widget Daftar Isi Menggunakan Spoiler | Tutorial Blog

Kali ini saya akan berbagi tentang tutorial Membuat Widget Daftar Isi Menggunakan Spoiler, widget ini sangat berguna untuk menghemat tempat di sidebar, sama halnya dengan Widget Daftar Isi Tersembunyi.

Berikut cara Membuat Widget Daftar Isi Menggunakan Spoiler :

Login ke blogger, klik Design > Page Element.
Klik Add a Widget dan pilih HTML/Javascript.
Lalu letakkan kode berikut di area konten widget :
<div class="smallfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Daftar Isi'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 150px;" type="button" value="Daftar Isi" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none; height: 250px; overflow: auto;">
<script src="http://tutorial-blog.googlecode.com/files/feeds.js">
</script><script src="http://banjarinfo.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>
</div>
</div>
ket : banjarinfo.blogspot.com ganti dengan alamat blog Sobat.
Terakhir klik Save.

Selesai...
Contoh tampilannya seperti berikut, silakan di klik.

Judul Postingan

Judul Postingan

Judul Postingan

Judul Postingan

Dan Seterusnya

Sekian tutorial tentang Membuat Widget Daftar Isi Menggunakan Spoiler.

Membuat Spoiler Pada Postingan

By Adam01.41Tutorial BlogspotNo comments

Membuat Spoiler Pada Postingan | Tutorial Blog

Spoiler sangat berguna untuk mengurangi beban loading sebuah postingan, fungsi dari Spoiler ini adalah untuk menghemat tempat, selain itu Spoiler ini juga membuat postingan anda tampak lebih rapi.

Berikut cara Membuat Spoiler Pada Postingan :

Anggap saja Anda sedang membuat sebuah postingan, kemudian klik pada Tab Edit HTML.
Lalu letakkan kode berikut :
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">
Isi Spoiler
</div>
</div>
</div>

Isi Spoiler : Isi dengan kode gambar, video, atau kode html lainnya.

Sebagai contoh saya gunakan kode berikut :

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b> : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">
<a href="http://s1193.photobucket.com/albums/aa345/bakulatz/Dashboard/?action=view&current=edthtmlpost.gif" target="_blank"><img src="http://i1193.photobucket.com/albums/aa345/bakulatz/Dashboard/edthtmlpost.gif" border="0" alt="Edit Html Post"></a>
</div>
</div>
</div>
Hasilnya akan seperti ini,

Spoiler :
Selanjutnya silakan Anda Publish postingan Anda.

Semoga bermanfaat buat Sobat yang ingin Membuat Spoiler Pada Postingan.

Widget Blogroll Show Hide

By Adam21.15Tutorial Blogspot, Widget / GadgetNo comments

Widget Blogroll Show Hide | Tutorial Blog

Blogroll adalah kumpulan pranala/hyperlink ke beberapa blog yang lain. Blogroll biasanya ditempatkan di baris samping (sidebar) homepage. Pada tutorial kali ini saya akan berbagi cara membuat blogroll dengan mode show-hide, sehingga akan lebih menghemat tempat.

Berikut cara membuat Widget Blogroll Show Hide :

Login ke blogger, klik Design > Page Element.
Klik Add a Widget dan pilih HTML/Javascript.
Lalu letakkan kode berikut :
<div class="widget-content"><div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Link Sahabat'; }" value="Link Sahabat" style="margin: 0px; padding: 5px; width: 100%; font-size: 14px; background: none repeat scroll 0% 0% blue; border-radius: 8px;" type="button" /></div><div class="alt2"><div style="display: none;"><div style="text-align: justify; padding: 2px;"><center><blink><h4>Link Sahabat</h4></blink></center><div style="overflow: auto; width: 270px; height: 200px; padding: 10px; border: 1px solid rgb(238, 238, 238);">

<div style="text-align: center;"><a href="http://alamatblog.com/" target="_blank">Text</a></div>
<div style="text-align: center;"><a href="http://alamatblog.com/" target="_blank">Text</a></div>

</div></div><div style="text-align: right;"><font size="0.1">Widget by <a href="http://wadahtutorial.blogspot.com/" target="_blank">Tutorial Blog</a></font></div></div></div></div></div></div>

Keterangan :

blue : Warna latar, silakan diganti sesuai keinginan Anda.

width: 270px; height: 200px; : Ukuran lebar dan tinggi widget, sesuaikan dengan sidebar Anda.

<a href="http://alamatblog.com/" target="_blank">Text</a> : Ganti dengan kode link sahabat Anda.
Terakhir klik Save.

Selesai...

Sekian tutorial tentang Widget Blogroll Show Hide.

Membuat Artikel Terkait di Sidebar

By Adam01.15Tips Dan Trik, Tutorial BlogspotNo comments

Membuat Artikel Terkait di Sidebar | Tutorial Blog

Dulu saya pernah posting tentang Membuat Related Post (Artikel Terkait), pada postingan kali ini artikel terkait tersebut akan kita pasang di sidebar.

Buat Sobat yang ingin memasangnya silakan ikuti tutorial berikut :

Login ke Blogger, Klik Design/Rancangan > Edit HTML.
Beri tanda centang pada Expand Template Widget.

Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
Cari kode </head>, lalu Copy kode dibawah ini dan letakkan diatas kode </head>.

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 5) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
Kemudian silakan Sobat cari kode seperti berikut

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

Lalu ganti dengan kode berikut :

<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
max-results=5 : jumlah artikel yang akan ditampilkan, silahkan diganti.
Lalu klik Save / Simpan Template.
Selanjutnya, masuk ke Page Element > Add a Gadget > HTML/JavaScript.
Lalu letakkan kode dibawah ini kedalam konten HTML/JavaScript.
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
Terakhir klik Save, dan lihat hasilnya.

Selamat mencoba dan semoga berhasil Membuat Artikel Terkait di Sidebar.

Membuat Tombol Back To Top

By Adam21.19Tips Dan Trik, Tutorial BlogspotNo comments

Membuat Tombol Back To Top | Tutorial Blog

Tombol back to top berfungsi untuk memudahkan pengunjung untuk kembali ke bagian atas dari suatu halaman. pada widget ini selain tombol back to top juga terdapat tombol back to bottom untuk menampilkan bagian bawah halaman.

Langsung saja Sob, berikut caranya :

Login ke Blogger, Klik Design/Rancangan > Edit HTML.
Beri tanda centang pada Expand Template Widget.

Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
Copy kode berikut dan pastekan di atas ]]></b:skin>
#floating-up {
position:fixed;_position:absolute;top:280px; right:0px; clip:inherit;
_bottom:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#floating-up a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#floating-up img
{
border:0;
}
#floating-up a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
Lalu tambahkan kode <a name='to-bottom'></a> tepat diatas kode </body>.
Kemudian cari kode <body>, dan paste kode berikut dibawah <body> :
<div id='floating-up'>
<div><a href='#' title='back to top'><img alt='back to top' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-top.png'/></a></div>
<div><a href='#to-bottom' title='back to bottom'><img alt='back to bottom' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png'/></a></div>
</div>
Terakhir klik Save / Simpan Template.

Silakan dicoba Sob,,, dan semoga berhasil Membuat Tombol Back To Top.

Membuat Widget Daftar Isi

By Adam21.12Tutorial Blogspot, Tutorial WordpressNo comments

Membuat Widget Daftar Isi | Tutorial Blog

Buat Sobat yang ingin Membuat Daftar Isi dan memasangnya pada sidebar blog menggunakan Scroll Box, sobat dapat mengikuti tutorial berikut ini.

Untuk Blogger :

Login ke dashboard blogger, klik Design > Page Element > Add a Widget, dan pilih HTML/Javascript.
Beri judul pada kolom Title, lalu letakkan kode berikut ;
<div style="border: 1px solid rgb(0, 0, 0); height: 200px; overflow: auto;">
<script src="http://post-xml.googlecode.com/files/feeds-labels.js"></script><script src="http://alamatblog.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>
</div>

200px : tinggi Scroll Box, ganti sesuai keinginan Anda.

alamatblog.com : Ganti dengan alamat blog Sobat.
Kemudian klik Save dan lihat hasilnya.

Untuk Wordpress.com :

Login ke dashboard Anda, klik Appearance > Widget.
Drag Text ke Sidebar.
Selanjutnya beri judul widget pada kolom Title, dan letakkan kode berikut :
<div style="border: 1px solid rgb(0, 0, 0); height: 200px; overflow: auto;">
[archives limit=100]
</div>
100 : Jumlah artikel yang di tampilkan, silakan di ganti.
Terakhir klik Save.