Membuat Spoiler Pada Postingan

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.

Membuat Daftar Isi Otomatis keren Pada Blog Dengan JQuery

Pengen punya daftar isi blog yang keren ?, Pastinya maudong...!. Kali ini Dapur Tutorial Blogspot Akan Shere lagi tetang cata Memasang Daftar Isi Otomatis di Halaman Blog sedikit berbeda dengan Daftar Isi Blog Otomatis Yang sebelumnya, Daftar Isi Blog Otomatis kali ini sangat keren Seperti ini

Demonya bisa anda cek di daftar ini blog ini

Sebelum masuk langkah lankahnya kita tinjau sekilas Manfaat daftar isi pada blog. Daftar ini pada blog bukan hanya sekedar hiyasan saja tetapi masih memiliki manfaat lain untuk orang yang mengunjungi blog anda ataupun untuk SEO Blog. Bagi orang yang mengunjungi halaman blog anda akan diberikan kemudahan untuk mencari artikel yang mereka butuhkan dengan demikian berpengaruh pada SEO blog anda sebagai sarana Untuk meningkatkan Page View blog anda.

Yup's langsung saja ke langkah-langkahnya :

Lankah 1 : Obtimasi Kode CSS

Tetap seperti biasa, Silahkan Masuk Keakun Blog anda
Pilih Template

Klik Tombol Edit HTML

Klik Tombol Next/Lanjutkan

Cari Kode ]]></b:skin> (Gunakan tombol ctrl + f untuk memudahkan pencarian kode)

Copy kode berikut dan letakan di Atas kode ]]></b:skin>

#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1qcVu8blhv5clwsMIDkpuKNTj_aDJtk0Ka5gwX2HdEaSY29RogcHG5SHAx8cGUZKdUk6Kj17Pk7G9TYSvI-OXnjsSteQLqROXwswsR89Xq5gVJgFwp6f8WfYTfyrQbNnPCHdNbP5BEb4/s320/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.dafis-label{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy7ylxxt0VEcM7565D5lJ8DG0zHkc_cNwwpUcyUe3CcW8cmPO9NYXNwPT3dT1pAVjDZMp1qSMowNA9yrsF7jQBdjDGxg0HCPvGmZNBW7rydZaQfq250TNseVsFt3B4sCoBIp3CJUw9jcY/s1600/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
font-weight:bold;
line-height:1.4em;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 1px 3px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 2px 10px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #2F94BA;
}
.dafis-label:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtgRMtCNTFmA1P4TB1A-HiyGRH1bz_w46XKUTaYK16An5iBvX8PmPVcjMwrvnxLn_fCUgkokzK1QugONkUxfntMGt8w23CTtrUOW6_Ver1X23_JERiOZ2S3OsxXJtMtPDBJ6_pZiEpdWg/s320/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
color:#003366;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background-color:#C9E9F4;
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #339DC6;
}
.dafis-daf ol li a{
text-decoration: none !important;
color:#333 !important;
display:block;
padding-left:10px;
}
.dafis-daf ol li a:hover{
background: #7BC4DF;
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

Sekarang Cari Kode </head>

Copy dan paste kode berikut Diatas Kode </head>

<script src='http://dapurtutorial8.googlecode.com/files/Scriptdaftarisi1.js' type='text/javascript'/>

Jika Sudah Klik Tombol Simpan Template

Anda Dapat Menampilkan daftar ini baik di postingan seperti pada Blog ini ataupun di kolom Sidebar blog anda.

Lankah 2 : Menampilkan daftar isi pada postingan

Buat Entri Baru atau postingan baru
Pilih mode Entri Pada Bagian HTML

Copy kode berikut

<script type="text/javascript" src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script>
<script src="http://tanpa-isi.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

Ket :

Paste Kode tersebut di halaman Entri Pada Mode HTML tadi

Klik Tombol Publikasikan

Lankah 3 : Menapilkan daftar isi kolom sidebar

Pilih Tata Letak

Klik Tambah Gadget/Widget

Pilih HTML JavaScript

Copy Kode Berikut

<script type="text/javascript" src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script>
<script src="http://tanpa-isi.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

Ket :

Paste kode Pada box HTML/JavaScript tadi

Klik Simpan
Selesai

Demikian tutorial kali ini tetang cara membuat daftar isi blog otomatis keren dengan JQuery semoga bermanfaat. jangan lupa berikan tanggapan anda tetang daftar isi otomatis ini dan silahkan ajukan pertanyaan anda jika anda kesulitan untuk memasang daftar isi blog otomatis ini.

Cara Menginstall Toolbar Alexa Pada Browser Mozilla anda

Senang bisa kembali menulis kali ini, Walau sebenarnya tulisan Dapur Tutorial Blogspot Kali ini sudah sangat banyak dibahas di internet oleh para-para master blog tapi gk masalahlah Bagi Dapur Tutorial Blogspot karna Dapur Tutorial Blogspot punya ciri tersendiri dalam menulis.

4 tutorial sebelumnya tetang alexa sudah dibahas di Dapur Tutorial Blogspot kini kembali lagi membahas alexa mungkin sahabat blogger bosan dan malas untuk membacanya. Gak masalah karena dulu saya juga seperti itu setelah sekian lama blogging akhirnya menyadari bahwa hal terkecil seperti ini sangat penting dan memang harus dketahui salah satunya yaitu pentingnya alexa toolbar untuk perkembangan blog ada.

Alexa Toolbar beberapa fungsi utamanya sama seperti Alexa Widget yaitu memberikan informasi tetang kemajuan blog anda. informasi inilah yang dapat membuat anda menentukan apakah blog anda ini populer atau atau tidak dengan demikian anda akan dapat menentukan apa yang harus anda lakukan nanti jika blog anda belum atau sudah populer.

Yuk langsung saja ke lankah-lanakah menginstall Toolbar Alexa di Browser Mozilla anda :

Pastikan Browser yang anda gunakan sekarang adalah Browser Mozilla
Kunjungi Halam Web Alexa di http://www.alexa.com/

Klik pada Menu Toolbar kemudian Klik pada Tombol Install Alexa Toolbar

Klik Tombol Accept And Install

Akan Muncul tombol Allow dibawah tap browser anda seperti berikut :

Allow

Tunggu beberapa saat akan mucul kotak baru dihalaman browser anda dan klik Install Now

Tunggu Proses Install sampai selesai

Setelah Proses Install Selesai anda diminta untuk Restart Browser Mozilla anda, Klik Tombol Restrat Firefox

Setelah Browser anda di Restart maka akan muncul Toolbar Alexa pada Browser anda seperti ini

Proses Intall Alexa Toolbar selesai

Dengan Menggunakan Alexa Toolbar anda dapat memantau Pekembangan blog anda ataupun blog teman anda. Semoga Bermanfaat

Widget Blogroll Show Hide

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

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.

Cara Memasang Widget Alexa Pada Halaman Blog

Sudah 3 hari berturut turut Dapur Tutorial Blogspot Membahas tetang Alexa Web, mungkin sobat akan bertanya kenapa Alexa Web Perlu di bahas ?. Untuk menjawabnya silahkan sobat baca Tutorial dibawah ini

Karena pada tutorial kali ini Dapur Tutorial Blogspot tidak akan menjelaskan apa itu alexa maka dari itu anda semua wajib mengetahui ke-3 tutorial diatas Sebab Tutorial Cara memasang widget alexa di halaman blog kali ini berkaitan dengan tutorial-tutorial tersebut. Tanpa anda mendaftar di alexa web anda tidak akan bisa memasang alexa widget.

Nah......! Setelah anda mengetahui ke-3 Tutorial diatas sekarang kita bahas langkah memasang widget alexa pada halaman blog:

Lankah 1 : Cara mendapatkan kode Widget alexa

Silahkan anda kunjungi Alexa web disini http://www.alexa.com/
Klik login

Set Email dan Pasword kemudian klik login

Setelah anda Login Pilih menu Site Tool >> Alexa Site Widget

Masukan Url Blog anda dan kelik Build Widget

Kemudian anda akan diberikan kode widget Alexa, Nah Copy kode tersebut

Langkah 2 : Meletakan Kode Alexa Widget di halaman blog

Pertama masuk ke akun Blog anda
Pilih Tata Letak

Klik Tambah Gadget/Widget

Pilih HTML/JavaScript

Letakan kode pada Box HTML/JavaScript seperti berikut

Terakhir Klik Simpan
Selesai dan lihat hasilnya

Demikian Tutorial Cara memasang Widget Alexa di halaman blog semoga bermanfaat.

Update :
Tutorial Ini sudah tidak relevan. silahkan kunjungi Update Tutorial Alexa Cara Memasang Widget Alexa Pada di Blog

Membuat Tombol Back To Top

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.