Tampilkan postingan dengan label membuat. Tampilkan semua postingan
Tampilkan postingan dengan label membuat. Tampilkan semua postingan

Cara Membuat Read More di Blogspot

Rabu, 12 Oktober 2016

Cara membuat read more di Blogspot atau blogger sangat mudah, hanya dengan manupulasi CSS display:none yaitu meng-hiden teks yang tidak ingin ditampilkan di home, archive dan halaman label. Sebenarnya teknik ini bisa digunakan untuk menerapkan salah satu teknik Black Hat SEO di blogspot, untuk teknik SEO haram ini tidak akan saya bahas disini, yang berminat silakan explore dan dicoba sendiri.


Berikut ini langkah-langkah untuk membuat read more blogger
  1.  Silakan login ke blogger.com, klik link Layout (Tata Letak) kemudian klik link Edit HTML
  2. Aktifkan list Expand Template Widget, agar source script template bloggernya terlihat secara keseluruhan.
  3. Tepat di atas atau sebelum tag </head> masukkan kode berikut seperti ini:
<style>
<b:if cond=data:blog.pageType == "item">
span.hidenpost {display:inline;}
div.hidenpost {display:inline;}
<b:else/>
span.hidenpost {display:none;}
div.hidenpost {display:none;}
</b:if>
</style>

Selanjutnya cari kode <data:post.body/> dan tambahkan kode berikut tepat dibawahnya:
<b:if cond=data:blog.pageType != "item">
<a expr_href=data:post.url> Baca selengkapnya <data:blog.pageTitle/></a>
</b:if>

Selesai deh. Sekarang setiap posting letakkan 
<span class="hidenpost"> sisa postingan yang akan dihiden, akhiri dengan </span> (ketika memasukkan <span class="hidenpost"> dan </span> posting harus dalam mode Edit HTML bukan Compose) pastikan juga diantara <span class="hidenpost"> dan </span> tidak boleh ada <span> jika tidak bisa dihindarkan gunakan <div class="hidenpost"> dan </div>
demikian juga sebaliknya..


Read More..

Cara Membuat Daftar isi Blog

Sabtu, 10 September 2016

          Cara membuat daftar isi blog kali ini berbeda dengan sebelumnya, baik tampilan maupun script yang akan digunakan, saya pribadi lebih suka dengan daftar ini (content) karena bisa menampilkan seluruh judul postingan dan dikelompokkan sesuai dengan label masing-masing judul. Jadi kalo postingan kita buat tanpa menggunakan label, besar kemungkinan judul postingan tidak akan muncul didalam daftar ini.

Daftar isi (content) ini saya bagi menjadi dua bagian, yaitu Daftar isi ditampilkan pada satu halaman penuh dan Daftar isi ditampilkan pada halaman depan blog

Cara pertama adalah jika kita ingin menampilkan daftar isi ini dihalaman depan blog kita, agar setiap pengunjung dapat melihat daftar isi blog kita tiap kali mengunjungi blog kita


Contohnya sebagai berikut :


Berikut ini langkah-langkahnya :
1. Masuk ke account blogger anda
2. Pilih tata letak/layout
3. Pilih tambah gadget
4. Pilih HTML/javascript.
5. Beri Judul Dafar isi atau judul sesuai dengan keinginan sobat
5. Kopas kode di bawah ini

<div style="overflow:auto;width:430px;height:120px;padding:10px;border:1px solid #eee"><script style="text/javascript" src="http://projectloss.googlecode.com/files/contents.js"></script><script src="http://namablog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</div>

namablog.blogspot.com : ganti dengan alamat blog sobat
width:430px : Ganti Lebar sesuai dengan yang sobat inginkan, sesuaikan dengan template
height:120px : Ganti tinggi nya sesuai dengan keinginan sobat

6. Kemudian save dan letakkan sesuai dengan keinginan sobat.

Kemudian cara kedua saya akan bahas Daftar isi yang akan ditampilkan pada satu halaman penuh

Berikut ini langkah-langkahnya :
1. Masuk ke account blogger anda
2. Pilih New post
3. Pilih Edit HTML pada kanan atas halaman tersebut
4. Beri Judul postingan tersebut dengan Daftar Isi, atau judul apapun sesuai keinginan sobat.
5. Copy paste script berikut ini :

<script style="text/javascript" src="http://projectloss.googlecode.com/files/contents.js"></script><script src="http://alamatblog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

http://alamatblog.blogspot.com : Ganti dengan alamat blog sobat

6. Klik Publish Post
Jadi deh, hasilnya atau sebagai contoh dapat dilihat disini.


Read More..

Cara Membuat Tombol Spoiler di Blog

Selasa, 26 Juli 2016

     Sambil nunggu mata ngantug, ane mau share neh Cara Membuat Tombol Spoiler, ada yang tau gak apa itu Tombol Spoiler ? Tombol spoiler adalah tombol yang mampu menyembunyikan sesuatu baik itu berupa tulisan,widget ataupun gambar. Tombol spoiler juga bisa memperingan loading blog anda. and ada berbagai macam Tombol Spoiler yang di gunakan di Blog, langsung aja yah kita mulai Cara Membuat Tombol Spoiler di Blog


Contoh Spoiler Pertama :
Kode untuk membuatnya adalah seperti ini :

<div style="border: 0px inset green; padding: 0px;"><div><button class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ; this.parentNode.style.display = none;" title="Click to show the spoiler." type="button"><span style="color:black;"><span style="color: rgb(0, 102, 0); font-weight: bold;"><blink>J U D U L S P O I L E R</blink></span></span></button></div><div id="spoiler" style="display: none;"><span style="font-weight: bold; color: rgb(0, 102, 0);">Letakkan Kode yang Ingin disembunyikan disini</span></div></div>


Contoh Spoiler ke 2

Dan Kode untuk membuatnya adalah seperti berikut :

<div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(div)[show].style.display != ) { this.parentNode.parentNode.getElementsByTagName(div)[show].style.display = ; this.parentNode.parentNode.getElementsByTagName(div)[hide].style.display = none; this.innerText = ; this.value = TUTUP; } else { this.parentNode.parentNode.getElementsByTagName(div)[show].style.display = none; this.parentNode.parentNode.getElementsByTagName(div)[hide].style.display = ; this.innerText = ; this.value = LIHAT LAGI; }" name="button" type="button" value="LIHAT" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><p style="text-align: justify;">Letakkan Kode yang Dsembunyikan Disini</p></div><div id="hide"></div></div></div>



Contoh Spoiler ke 3
Kode untuk membuatnya :

<div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(div)[show].style.display != ) { this.parentNode.parentNode.getElementsByTagName(div)[show].style.display = ; this.parentNode.parentNode.getElementsByTagName(div)[hide].style.display = none; this.innerText = ; this.value = TUTUP; } else { this.parentNode.parentNode.getElementsByTagName(div)[show].style.display = none; this.parentNode.parentNode.getElementsByTagName(div)[hide].style.display = ; this.innerText = ; this.value = LIHAT LAGI; }" name="button" type="button" value="BUKA" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;"><p style="text-align: justify;">LETAKKAN KODENYA DISINI</p></div><div id="hide"></div></div></div>


Contoh Spoiler ke 4 :
Spoiler is slang for any element of any summary or description of any piece of fiction that reveals any plot element which will give away the outcome of a dramatic episode within the work of fiction, or the conclusion of the entire work
Kode untuk membuatnya :

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: 60px;" 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; }" type="button">
</div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">LETAKKAN KODENYA DISINI</div></div></div>



Contoh Spoiler ke 5 :
Judul
Spoiler is slang for any element of any summary or description of any piece of fiction that reveals any plot element which will give away the outcome of a dramatic episode within the work of fiction, or the conclusion of the entire work
Kode untuk membuatnya :

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Judul</span></i><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 = Hide; } else { this.parentNode.parentNode.getElementsByTagName(div)[1].getElementsByTagName(div)[0].style.display = none; this.innerText = ; this.value = Show; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="SPOILER 5" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
LETAKKAN KODE SOBAT DISINI</div>
</div>
</div>
</div>


Nah tinggal Sobat copy-paste aja kode di atas, semoga semua Tombol spoiler ini bermanfaat.

Source : http://tanpa-isi.blogspot.com
Read More..

Cara Membuat Installer Windows 8 Menggunakan Flashdisk

Rabu, 13 Juli 2016

Cara Membuat Installer Windows 8 Menggunakan Flashdisk- Assalamualaikum sobat blogger, pada kesempataan ini saya akan berbagi tentang Cara Membuat Installer Windows 8 Menggunakan Flashdisk. Mungkin sudah banyak yang tau, tapi gpp lah sekedar berbagi ilmu aja. Oke.. langsung saja kita ke langkah langkahnya.

  1. Siapkan Flashdisk minimal 4 GB
  2. Download dan jalankan WIN8USB
  3. Kemudian pilih USB drive
  4. Lalu cari file ISO windows 8
  5. Jangan lupa centang show copying dan format drive
  6. Klik Create dan tunggun hingga proses selesai.














Selamat mencoba!

Read More..

Cara Membuat Virtual Hard Disk Drive di Windows 7

Rabu, 27 April 2016














Pernahkah anda berharap memiliki hard disk tambahan untuk menyimpan file? Atau ingin memiliki kapasitas tambahan untuk sharing file dengan orang lain melalui jaringan? Salah satu fitur menarik yang disediakan oleh Windows 7 adalah memungkinkan kita untuk membuat virtual hardisk drive yang akan membantu kita untuk membuat virtual drive baru pada komputer atau notebook yang kita miliki.


Virtual hard disk drive adalah sebuah media penyimpanan virtual yang memanfaatkan hard disk fisik yang ada di perangkat komputer kita. Dengan memanfaatkan teknologi ini, kita dapat mengatur hard disk virtual tanpa harus mengganggu drive yang lain.

Proses ini akan menciptakan sebuah drive baru pada perangkat komputer kita tanpa harus melakukan partisi ulang atau tambahan pada hard disk drive yang tentunya akan memperkecil resiko kehilangan data dari pada saat kita membuat partisi tambahan pada hard disk. Windows 7 akan membuat file .VHD baru yang menjadi isi seluruh file pada hard disk virtual dengan ukuran minimal 3MB.

Untuk memulai membuat sebuah virtual drive, kita dapat memulai dengan klik kanan pada Computer dan pilih Manage atau bisa juga dengan mengetikkan diskmgmt.msc pada kotak pencarian (Search) yang ada di Start Menu.



Selanjutnya, akan terbuka sebuah jendela baru Computer Management. Klik Action dan kemudian klik Create VHD.



Pilih direktori dimana anda ingin menyimpan file .VHD yang akan menyimpan virtual hard disk drive anda dan tentukan besarnya kapasits file dari hard disk virtual. Lakukan konfigurasi lainnya seperti pemilihan kapasitas virtual hard disk dynamic (kapasitas dapat berubah secara otomatis sesuai dengan isi di dalam hard disk virtual) atau fixed (kapasitas tetap dan tidak bisa berubah secara otomatis).



Dalam disk management akan terlihat berapa kapasitas ruang hard disk yang tidak terpakai yang dapat digunakan sebagai virtual hard disk drive.



Untuk memulai menggunakan virtual hard disk drive, klik kanan pada disk tersebut kemudian pilih Initialize Disk.



Pada kotak Initialize Disk, pilih Master Boot Record kemudian klik OK.



Sekarang waktunya membuat volume virtual dengan cara klik kanan pada Unallocated Spacedan pilih New Simple Volume.


Keluar jendela baru, The New Simple Volume Wizard. Ikuti step-by-step langkah tersebut.



Tentukan kapasitas ruang hardisk yang akan dipakai untuk virtual disk.



Pilih format disk yang akan dipakai, apakah menggunakan FAT, FAT32 atau NTFS. Beri tanda pada Perform Quick Format dan beri nama pada disk tersebut.



Klik Finish untuk mengakhiri semua langkah diatas.



Sekarang anda dapat mlihat virtual hard disk drive tadi di My Computer maupun di Computer Management.




Virtual Hard Disk Drive ini adalah salah satu fitur baru yang akan menambah fungsi baru pada Windows 7. Anda dapat memanfaatkannya untuk sekedar menambah volume drive pada perangkat komputer yang anda pakai atau memanfaatkannya untuk berbagi file pada jaringan di tempat anda.

Untuk mempelajari lebih lanjut tentang virtual hard disk drive pada windows 7, anda dapat membaca artikel How to Create a Virtual Hard Drive in Windows 7 di website How-to Geek. Baca tips & trik menarik lainnya dengan mengikuti update Machfud Blog
Semoga bermanfaat.
Read More..

Cara membuat buku tamu slide Effect Jquery

      kali ini akan saya bahas mengenai Buku Tamu atau Guest Book. tapi kali ini agak beda , yaitu ada taburan cinta dari gadis muda bernama Jquery. maka judulnya saya beri Membuat Buku Tamu Slide Effect Jquery. gag kebayang gimana bentuk si Tante Jquery ini kalau lagi barengan ama Buku Tamu ? lihat aja demo berikut :


Sudah lihat contoh ? tertarikah dengan Buku Tamu Slide Effect Jquery?
Untuk membuatnya anda hanya perlu : Masuk ke Blogger = Rancangan + Tata Letak + Add Widget + Html/Javascript - paste kode berikut :




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){



    $(".btn-slide").click(function(){

        $("#panel").slideToggle("slow");

        $(this).toggleClass("active"); return false;


    });



  

});

</script>

<style>

/* ---------------

Simple Slide panel with jQuery

---------------------------------- */


#panel {

        height: auto;

        background: #f90;

        width: auto;

        display: none;

    padding: 7px;


    border: #0C0;

    -moz-border-radius-topright:10px;

    -webkit-border-top-right-radius:10px;

    -moz-border-radius-bottomright:10px;

    -webkit-border-bottom-right-radius:10px;


    -moz-border-radius-topleft:10px;

    -webkit-border-top-left-radius:10px;

    -moz-border-radius-bottomleft:10px;

    -webkit-border-bottom-left-radius:10px;

}

.slide {

    margin: 0;


    padding: 0;

    border-top: solid 4px #f90;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaRkWITDXwQkfe-CGCw-WXLPPMXaIA4vvwryibwY6AhZA62g3neaBv_RxWmaSvz0TbTiWzRjNgWlJgzcpqWR-q1Lm4uAx3igq3GgqOikxYjrOcDmTwpxtFepeltfUBplh7rA4eFca59d8/s1600/btn-slide.png) no-repeat center top;



}

.btn-slide {


    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaRG3IF3lcQU5bLKUFk9fH-u4M15XCaiUYU1_xiQK7vdVRtyykN3cwUOTFY6dBIMM-VuYHZYISA2qUBLsFTegdftCfQH3Ojcf1sTFn3JWpKsvV2XqjjbK6rBcSmKz2o9bmR4v8XhqHY94/s1600/white-arrow.gif) no-repeat right -50px;

    text-align: center;

    width: 144px;

    height: 31px;

    padding: 10px 10px 0 0;

    margin: 0 auto;


    display: block;

    font: bold 120%/100% Arial, Helvetica, sans-serif;

    color: #fff;

    text-decoration: none;

}

.active {

    background-position: right 12px;


}

</style>



<div id="panel">



    <!-- Simpan Script Buku tamunya disini -->



</div>

<p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>



Catatan : jika sudah ada script jquery yang saya tandai dengan warna biru ditemplate sobat tidak perlu ditambahkan lagi.

Cukup sampai disini saya menjelaskan Cara Membuat Buku Tamu Slide Effect Jquery , semoga bermanfaat bagi anda.


Reff : Blogging with me
Read More..

Cara mudah Membuat Slider otomatis Diblog Tutorial

Kamis, 25 Februari 2016

Cara Membuat Slider otomatis Diblog | Tutorial
Selamat malam sahabat blogger, kali ini kita akan membahas tentang bagaimana cara membuat slider otomatis di blog, mungkin sobat masih penasaran yang mana yang disebut slider otomatis, slider sendiri bentuknya berbeda-beda, ada yang slide ke samping, ada yang up,down dan ada juga yang saat disorot dia langsung slider. Dan widget ini lebih sering dikenal dengan acordion.
Widget ini saya dapatkan saat saya mengikuti les web design yang ke-7, yang mana pertemuan saat itu membahas tentang jquery.
bentuk widget nya seperti ini sob :
|Demo|
demo nya itu juga salah satu dari blog yang ane olah ya sob, masih baru aja ane buat tuh blog untuk tugas kelompok.
iya, seperti itu lah yang namanya menu acordion atau slider otomatis. Widget ini sangat cocok digunakan untuk template yang terang, karena saat saya pakai di blog dengan template gelap ,warna nya tidak sepadan dengan tema dari widget ini, sedangkan widget ini langsung saya dapatkan dari pengembangnya, yaitu
  Disini (jqueryui.com)
oke sobat, kode widget diatas tersebut adalah lihat dibawah ini :
nah, itu dia kode nya sob,, tinggal sobat masukan kode nya ke tempat yang sobat inginkan, tata letak--tambah gadget--html/javascript--simpan
sebenarnya jika kita paham saja arti dari kode kode dalam html, pasti kita bisa cepat tahu, tapi kalau kita belum bisa paham dengan maksud html pasti kita akan sulit untuk mendapatkan kode tersebut.
semoga berhasil sob!

oke, itu saja dulu pembahasan cara membuat slider otomatis saat disorot. semoga bermanfaat !!
Read More..