Membuat Spoiler di Blog Pada Postingan Atau Sidebar

Apa sih Spoiler itu?

Kira-kira begini, spoiler itu adalah widget untuk menyembunyikan sesuatu baik itu gambar, kode HTML atau teks anda, yang mana gunanya untuk meringkas ruang pada posting / sidebar. Segitu aja deh..

Nah daripada bingung liat ini contohnya ..

Silahkan :

Cara pasangnya gampang, tinggal di copas saja (jangan malu-malu ya) kode dibawah ini , baik di postingan atau di sidebar

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Silahkan </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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Lihat'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Lihat/Tutup" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Isi kode script untuk gambar, HTML atau teks anda disini

</div>
</div>
</div>

Width: 55px adalah lebar kotak spoiler.Gantilah sesuai kebutuhan anda. font-size: 11px adalah ukuran huruf dalan kotak spoiler.Dapat diganti sesuai kebutuhan. Tutup dan Lihat dapat anda ganti sesuai keinginan anda Isi kode script, HTML dan teks anda disini dapat anda ganti dengan teks atau kode script.

Label: Widget

Drop Caps | Huruf Besar diawal tulisan

Drop Caps....Kayak apa sich ?
Unik juga buat gaya-gayaan di blog kita..
Yaaah daripada pusing dan nanya mulu, maka coba deh agan perhatikan ini ...

Ringkasnya begini, saya akan menuliskan sebuah kalimat :
Maktabah Online | Blog Pribadi Abu Iram Al-Atsary ini adalah tempat saya mengumpulkan berbagai catatan, dan saya berharap suatu hari ini nanti ini semua berguna bagi anak-anak saya saat mereka ingin belajar tentang teknologi, dan membutuhkan artikel-artikel Islam serta hal-hal penting lainnya yang bisa bermanfaat buat mereka.

Nah hasil yang saya inginkan adalah seperti ini dengan menggunakan Drop Caps ini :
Maktabah Online | Blog Pribadi Abu Iram Al-Atsary ini adalah tempat saya mengumpulkan berbagai catatan, dan saya berharap suatu hari ini nanti ini semua berguna bagi anak-anak saya saat mereka ingin belajar tentang teknologi, dan membutuhkan artikel-artikel Islam serta hal-hal penting lainnya yang bisa bermanfaat buat mereka.

Hmm... ngertikan sekarang ?

Nah cara pembuatannya adalah :
<span style="float: left; color: black; font-size: 50px; line-height: 30px; padding-top: 5px; padding-right: 5px; font-family: arial;">M</span>aktabah Online | Blog Pribadi Abu Iram Al-Atsary ini adalah tempat saya mengumpulkan berbagai catatan, dan saya berharap suatu hari ini nanti ini semua berguna bagi anak-anak saya saat mereka ingin belajar tentang teknologi, dan membutuhkan artikel-artikel Islam serta hal-hal penting lainnya yang bisa bermanfaat buat mereka.

Untuk memudahkan, maka saat menulis itu gunakan mode edit HTML jangan pakai mode Compose.
Coba segera gaaaan ..

Label: Widget

Membuat Link dengan Tombol (Button)

Membuat Link dengan Tombol (Button) ? Susah engga ya ?

Engga ihhh...

Nih contoh hasilnya :

Label: Widget

Tips dan Trik Membuat Teks Area

Blog Pribadi Abu Iram Al-Atsary Catatan Tentang : |Aqidah|Fiqih|Akhlaq|Fatwa|Hadits|Tafsir|Ilmu Hadits|Keluarga|Sejarah Nabi Dan Ulama|Kajian Kitab|Tutorial Blog dan SEO|Ebook|Free Download|Mp3|Bedah kitab|software|Dunia Remaja|Majmu Fatawa|Fatwa|Keyboard Arabic|Widget|Kitab Tauhid|Artikel Lepas |Kitab Arabic Online|

Contoh hasilnya :

Yang berperan penting untuk highlightnya sebenarnya hanya pada kode

<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()">

jadi,jangan sampai dirubah ya

Label: Widget

Cara Membuat Menu Drop Down Di Blogger

Untuk membuat menu dropdown,selain membuat situs lebih rapi,juga sambil belajar yuk!

Untuk kodenya copy paste kode di bawah ini :

<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu><option value=0 selected>KATA YANG PERTAMA MUNCUL</option>
<option value="ISI ALAMAT YANG DI TUJU">ISI TEXT YANG INGIN DI TAMPILKAN</option>
</select></form>

Contoh penggunaan kode :

<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu>
<option>Link Web</option>
<option value="http://www.youtube.com">Youtube</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.google.com">Google</option>
</select></form>

Yang hasilnya nanti akan seperti di bawah ini :

Sangat Mudah khan?
Selamat mencoba ya..!!

Label: Widget

CARA MEMASANG PLUGIN COMMENT DAN LIVE STREAM FACEBOOK DI BLOGSPOT

Facebook.com telah menyediakan beberapa aplikasi kecil yang dapat dipasang di website dan blog diantaranya yaitu: plugin like button, plugin activity feed, plugin recommendations, plugin like box, plugin login button, plugin facepile, plugin live stream, dan plugin comments,

Beberapa aplikasi tersebut sering dipasang di blog atau website . Pada artikel ini saya menuliskan cara membuat kotak komentar facebook pada blog dengan plugin comments, dan live stream.

cara memasang kotak komentar facebook di blog

Plugin Live Stream.

Plugin live stream memungkinkan pengunjung blog anda berbagi aktivitas dankomentar secara real time. Live Streaming sangat bagus bila anda menjalankan acara real-time, seperti video live streaming untuk konser, pidato, atau webcast, chatting. Anda juga bisa memasangnya di blog sebagai alternatif lain dari pemanfaatan plugin facebook untuk kepentingan interaktif dengan pengunjung blog atau situs web anda.

Kotak Komentar facebook.

Kotak komentar facebook memungkinkan pengunjung website atau blog anda untuk memberikan komentar pada konten situs anda - apakah itu untuk halaman web anda, artikel, foto, atau bagian lain dari isi blog. Pengunjung dapat secara langsung mengirimkan komentar tersebut ke dinding facebook dan dibagikan ke teman-teman mereka.

Untuk mengelola kotak komentar, anda harus terdaftar sebagai pengembang pada aplikasi yang digunakan untuk menginisialisasi SDK JavaScript. Sebuah link 'Administer comments' akan muncul di bawah tombol 'Posting' untuk pengembang aplikasi.

Untuk memasang plugin comments kunjungi Disini
Tulis Unique ID aplikasi pada kotak isian, untuk memperoleh Unique ID kunjungi Disini.

Ketik nama yang anda kehendaki pada kotak isiannama situs, pada kotak isian URL situs ketik url situs anda misal:http://www.jahemerahkaromah.com/, pada Lokasipilih Bahasa Indonesia, kemudian klik tombolcreate app.

Selanjutnya facebook akan melakukan verifikasi akun facebook anda dengan meminta nomor handphone anda, pihak facebook akan mengirimkan kode verifikasi melalui sms, Untuk konfirmasi anda diminta memasukkan kode verifikasi tersebut, bila kode yang anda masukkan benar maka anda akan segeramendapatkan Unique ID untuk aplikasi comment tersebut.

Selanjutnya anda kembali kehttp://developers.facebook.com/docs/reference/plugins/comments/ Tulislah kotak isian Unique ID, tulis Number of comments dengan jumlah komentar yang hendak anda tampilkan,  width adalah lebar kolom yang anda kehendaki misal 400, tandai tombol publish feed, klik tombol Get code, lalu copy code yang ada di kotak, kemudian masuk ke akun blogger, klik design, Edit HTML, klik button expand widget template dan letakkan kode tersebut tepat dibawah kode ini :

Kotak komentar facebook akan terletak tepat dibawah baris akhir artikel posting anda.

Bila anda hendak meletakkan kotak comment di sidebar blog anda, kembali ke dashboard blogger, klik  page element. klik add gadget, pilih html/javaScript, dan paste code tersebut, klik save. Untuk mempermudah anda mencari letak kode gadget di html blog beri judul untuk gadget tersebut. Pada contoh gadget tersebut saya beri judul "Komentar facebook"

Anda kunjungi blog anda, bila aplikasi (gadget) comment tersebut tidak tampil di sidebar, edit kode html blog anda, jangan lupa mengklik button expand widget template dan cari rangkaian kode html untuk gadget comment tersebut, contoh pada blog ini adalah baris kode berikut:

___________________

Ganti kode yang berwarna merah dengan kode comment facebook yang anda dapatkan tadi.

Unique Id yang anda isikan pada plugin comments dapat juga anda gunakan untuk unique ID Plugin live stream. Cara memasang kotak live stream sama dengan cara memasang kotak komentar facebook, hanya saja alamat yang harus anda kunjungi adalah http://developers.facebook.com/docs/reference/plugins/live-stream/ .

Label: Widget

Memasang Menu Page Full Down Di Blog

Tips dan trik kali ini adalah memasang menu Page Full Down Di Blog seperti yang ada di blog saya ini, nah perhatikan deretan tulisan warna biru, nah itu dia !!!

Gampang cara masangnya kok, nih ...

pertama : Cari kode </head>

Lalu copy code dibawah ini dan taruh diatas code </head>

<style type="text/css" media="screen">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #FF0000;width:100%; border:solid 1px #808080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:bold;
font-size:12px;
color: #FFFFFF;
background-color: #FF0000;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #808080; border-left:solid 1px #808080;}
.pd_menu_01 ul li a {color: #FFFFFF;background: #FF0000;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #FF0000; width:1px}
.pd_menu_01 ul li:hover a {background-color:#800000; text-decoration:none; color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #808080; border-bottom: solid 1px #808080; background-color:#400000; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#804040; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#800000; text-decoration:none;color:#FFFF00;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#400000; color:#FFFFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #808080; border-bottom: solid 1px #808080; background-color:#400000; color:#FFFFFF;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#804040; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
</style>

Lalu ini code widgetnya yang bisa kamu rubah dan edit sesuka hatimu deh... :

<div class="pd_menu_01 ">
<ul><li><a href="/">Home</a>
</li></ul>

<ul><li><a href="#">About me</a>
</li></ul>

<ul><li><a href="#">Edit</a>
<ul>
<li><a href="#" class="lastone">edit</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Edit</a>
<ul>
<li><a href="#" class="lastone">edit</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Edit</a>
<ul>
<li><a href="#" >edit</a></li>
</ul>
</li></ul>

</div>

Kalau ada masalah silahkan konsultasi deh ..Insya Allah akan saya bantu, tapi bersabar ya...jangan lupa copaskan link yang akan kamu masukkan kedalam menu tersebut, agar saya bisa mengeditnya langsung dan menjadikannya di postingan nanti, okeh ...

Label: Widget

Widget Buku Tamu Tersembunyi

Berikut ini adalah cara membuat buku tamu tersembunyi, nah ini widget buku tamu tersembunyi untuk blogger

caranya :

1. Login Ke blog dulu
2. MAsuk Ke Rancangan
3. Tambahgan ADD Gadget
4. Pilih HTML
5. Copy Paste Code Dibawah ini :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2jJIFCeNT0fBBGEtq4y4hWEXpL6mDu42ds2KJlLovfqAMi5iFH4q2PkOhf5-8Iv77z_rqaYpaOPS5UUCzyM9RY_OEmZsBQAXtZqomibIWElTa8lMgKAAvZNeeMYdF3IJNpULgAB4JUagG/s1600/buku+tamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

---- Kode buku tamu anda disini ----

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href=" http://maktabahabuiram.blogspot.com/2012/02/daftar-artikel-kategori-widget-untuk.html">
sini
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Save. Selesai
CATATAN :
Ganti Tulisan Yang berwarna MERAH dengan Kode Buku tamu Anda

Label: Widget

Widget Membuat Link Berefek Pelangi

Berikut ini adalah widget membuat link berefek pelangi ...

Pelangi atau bianglala adalah gejala optik dan meteorologi berupa cahaya beraneka warna saling sejajar yang tampak di langit atau medium lainnya. Di langit, pelangi tampak sebagai busur cahaya dengan ujungnya mengarah pada horizon pada suatu saat hujan ringan. Pelangi juga dapat dilihat di sekitar air terjun yang deras. ensiklopedi

Contohnya coba anda dekatkan mouse anda di link blog ini, seketika link akan berubah warna warni, canggihkan?

Nah Dengan membuat link pelangi akan membuat blog kita menjadi penuh warna. Bagaimana cara membuat link pelangi? Ikuti saja langkah-langkah berikut ini:

Cara Membuat Link Pelangi
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Taruh (copy paste) kode berikut ini diatas kode </head>

<script src='http://achmad46.googlepages.com/rainbow.js'>
</script>

6. Simpan Template jika sudah selesai

Label: Widget

Widget Untuk Membuat Gambar Berefek BIntang Berkedip Di Blog

Cara pasang :

Seperti biasa login ke blogger
masuk ke Tata Letak Lalu Edit HTML

cari kode </head>

lalu masukan kode di bawah ini tepat di atasnya

<style>
a:hover { text-decoration:blink; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzWoFE0mEnUWmm6L9zhtLGZ4T3NDrJ0IrxY1NAWcB4h2XxLxOqbRkGmNyBvb3BnTZbT1basaspZ4UVzFTKYEG-KKtFgIIJz5B8zQrlmXGgMTRIgeTrq05HNTbR8b7FK_KY_lBeVZjf2Q/s1600/stars1.gif'); }
</style>

Simpan Template

Lihat hasilnya

Label: Widget

Ahlul Atsar

Jumat, 17 Februari 2012

Membuat Spoiler di Blog Pada Postingan Atau Sidebar

Apa sih Spoiler itu?

Selasa, 14 Februari 2012

Drop Caps | Huruf Besar diawal tulisan

Membuat Link dengan Tombol (Button)

Senin, 13 Februari 2012

Tips dan Trik Membuat Teks Area

Cara Membuat Menu Drop Down Di Blogger

Jumat, 10 Februari 2012

CARA MEMASANG PLUGIN COMMENT DAN LIVE STREAM FACEBOOK DI BLOGSPOT

Plugin Live Stream.

Kotak Komentar facebook.

Selasa, 07 Februari 2012

Memasang Menu Page Full Down Di Blog

Widget Buku Tamu Tersembunyi

Widget Membuat Link Berefek Pelangi

Widget Untuk Membuat Gambar Berefek BIntang Berkedip Di Blog

Mengenai Saya

Link

Postingan Sebelumnya

Arsip