Alhamdulillah akhirnya kali ini Master Jin mampu menyiakan waktunya untuk update posting kembali. Singkat cerita, sebenarnya yang membuat Master Jin jarang update posting yaitu sibuk akan tugas pada kegiatan Bulan Ramadhan dan sempat berhadapan dengan maut karena sakit. Tapi, syukur alhamdulillah saya masih diberi umur panjang. Hehe :D
Baiklah, untuk mengawali posting kali ini Master Jin akan share mengenai Blogroll. Sobat sekalian pasti kebanyakan melihat blogroll pada widget kan ?? Nah, kali ini Master Jin akan share yang ber-versi Lightbox. Lightbox ini hanya dengan sentuhan CSS yang bersumber dari de5ain. Tapi, sebelumnya saya juga berterimakasih kepada Mas Zhinto, karena dari salah satu postingnya memberikan saya sebuah ide untuk pembuatan posting ini.
Tema dari blogroll ini sendiri pun ber-tema seperti template MDF-Blog. Ya, mungkin saya salah satu fans MDF-Blog, jadi tubuhnya sedikit menyerupai. Hehe baiklah langsung saja ke tutorialnya :
Letakkan di atas kode
]]></b:skin>
.bg_hitam{
display: none;
position: absolute;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: #C2C2C2;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.kotak {
display: none;
position: absolute;
position: fixed;
top: 20%;
left: 25%;
width: 50%;
height: 31%;
border: 3px solid #DDDDDD;
background: #555 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAIAAABLMMCEAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWP8+PEjAwMDAwPD79+/WVlZIWwmBmwAuyjL79+/4Rw4mwVuFrnmAgDfnQ7WxYu5XQAAAABJRU5ErkJggg==);
border-radius: 8px;
box-shadow: 0 0 10px 0.1px #242424;
z-index:1002;
overflow: auto;
}
.close {position: absolute;
top: 19px;
right: 15px;
color: #00f;
text-decoration: none;
cursor: pointer;
text-indent: -99999px;
background: url(https://googledrive.com/host/0B4E8FMOWwAqcbzBlSmxOQmdIUFE/close.gif)no-repeat;
width: 16px;
}
HTML
<a href="javascript:void(0)" onclick="document.getElementById('popup').style.display='block';document.getElementById('bg').style.display='block'">Link My Friends</a>
<div class="bg_hitam" id="bg">
</div>
<div class="kotak" id="popup">
<a class="close" href="javascript:void(0)" onclick="document.getElementById('popup').style.display='none';document.getElementById('bg').style.display='none'"> TUTUP</a>
<div class="s">
<span class="Systemkepala">My Friends</span>
<ul>
<li><a href="http://mdf-blog.blogspot.com/">MDF-Blog - Mencoba Untuk Selalu Tampil Beda</a></li>
<li><a href="http://xardhix.blogspot.com/">Modif Blog - Master Ardhi</a></li>
<li><a href="http://imronfhatoni94.blogspot.com/">EMP-Blog - Selalu Berusaha Untuk Berbagi</a></li>
<li><a href="http://de5ain.blogspot.com/">De5ain-Blog - Ega Ariya Dirgantara</a></li>
<li><a href="http://kharisma-adzana.blogspot.com/">Kharisma Blog - Kharisma Adzana</a></li>
</ul>
</div>
<style type="text/css">
div.s {
margin: 0 auto;
padding: 0;
background: #555 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAIAAABLMMCEAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWP8+PEjAwMDAwPD79+/WVlZIWwmBmwAuyjL79+/4Rw4mwVuFrnmAgDfnQ7WxYu5XQAAAABJRU5ErkJggg==);
border: 1px solid #880;
position: realative;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px
}
div.s .Systemkepala {
display: block;
text-align: center;
border-bottom: 1px solid #444;border-top: 1px solid #444;
margin: 10px 0 -5px 0;
padding: 5px;
font: bold 20px/20px Arial, sans-serif;
text-transform: uppercase;
color: gold;
background-color: #0070b0;
text-shadow: 0 1px green;
}
div.s ul {
list-style-type: none;
padding: 0;
margin: 5px 0 0 0
}
div.s li {
list-style: none;
padding: 5px 0 5px 10px;
border-bottom: 1px solid #444;
-webkit-box-shadow: 0 1px 0 #666;
box-shadow: 0 1px 0 #666;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease
}
div.s li:hover {
border-bottom-color: #880;
-webkit-box-shadow: 0 1px 0 #222;
box-shadow: 0 1px 0 #222;
text-shadow: 0 0 5px #FF0
}
div.s li a {
color: #888;
text-decoration: none;
font: normal 15px/20px Georgia, serif;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease
}
div.s li a:hover {
color: #A80000
}
</style>
</div>
Silahkan cek pada demo atau preview Lightbox Blogroll Super Keren. Bagaimana kira-kira ?? Keren kan ?? Sangat simpel dan mudah digunakan. Tapi, kebanyakan banyak yang bertanya apakah membuat loading Blog terganggu ?? Saya jawab tidak terlalu terganggu. Mungkin hanya 2% saja. Jadi, silahkan dicoba :)
Catatan : Silahkan ganti sendiri pada Judul Blogroll - URL serta judul Blog.
84 comments
ane pertamakin dah :p
X ✓wah besok ane coba deh cz skarang mau pulang billing udah mau habis :)
X ✓thx sob :)
boleh boleh sob :)
X ✓Keren mas ... :D
X ✓Wah...lama gak pernah update blognya, kemana aja mas?? :-d
X ✓seperti yang tertera di atas mas.. sibuk + ada sedikit halangan :D
X ✓wah mas jin tukar link mau ga? ntar saya pasang Link mas jin di daftar teman saya dan sebaliknya ? :p gitu juga kalo mau.. kalo ngga ya gpp :D
X ✓silahkan.. gpp
X ✓Gan mau nanya gimana cara bikin header blog bergerak (css) saya udh nyobain tutor dari emp-blog tapi Jadi dobel ,gimana cara bikin nya? Dan kode nya apa? Makasih :D
X ✓pada :
X ✓#header h1, #header p
tambahkan :
display:none
lalu tinggal terapin triksnya dari EMP tadi
dan HTMLnya tinggal letakkan dibawah :
<div class="titlewrapper">
<h1 class="title">
BB'Droid BMaster23
</h1>
</div>
pada kode agan..
Kasih contoh pasang dipslay:none di #header h1 #header p
X ✓trus letakkan HTML dibawah mana gan? atau ganti BBDroid Bmaster23 dengan kode html?
Sekalian gan biar cepat saya minta kode efek transisi kayak Header agan dong :D
coba search di kode agan :
X ✓display:none
nanti akan tau cara pasangnya..
HTMLnya sudah jelas di atas tadi.
display:none
akan berfungsi menutup BBDroid Bmaster23
gan udah berhasil tapi caranya beda,saya buat code ini : clas ='title'> ngaruh gk gan?
X ✓kalau menampilkan dekscripsi blog gimana kok ilang juga?
X ✓gan coba liat blog saya? kok tulisan header nya kepotong?
X ✓sama jarak nya kebawah renggang? gimana munculin deksripsi blog ?
wahh ane ketinggalan berita nih...
X ✓keren modifikasinya.. :)
weww ... (y) siipphh mas :D :D :D ,,, ane nggk kepikiran untuk buat seperti itu :) :) :)
X ✓siapa nih yg mulai ? :p
X ✓bagaimana mas ?? banyak sekali pertanyaannya. bingung ane @-)
X ✓makasih bang..haha
X ✓haha minjem lightboxnya mas..
X ✓kunjungan perdana mas-jin... nice post dah :d
X ✓oke bang.. makasih
X ✓wawwwwww keren kok lama ngk update kemana saja yang lain udah nungguin,,? :D
X ✓sedikit bantuan untuk penerapan kode
X ✓display:none
jangan diletakan pada deskripsi blog agan cukup diletakan pada kode seperti ini
.Header h1 a
hehe sudah tertera di atas mas..
X ✓keren juga ya mas, saya ijin nyimpan scriptnya mas jin, makasih sudah berbagi.
X ✓Makasih atas semua infonya
X ✓saya udah pasang link bro di web saya
http://sanggar-belajar.blogspot.com/p/tukar-link.html
wah keren tuh bisa berhadapan langsung dengan maut. ^_^
X ✓kodenya banyak juga ya?? :)
X ✓buku ramadhan ane malah terbengkalai belum diisi.. haha..
X ✓terimakasih sudah berbagi gan.. lanjutkan kreativitasnya :D
gan ane mau tanya, mohon bantuannya ya? (o)
X ✓pertanyaannya ada di gambar..
http://oi41.tinypic.com/i4lmxk.jpg
sebelumnya terima kasih.. (p)
Keren mas, btw apakah Lightbox pada kontak punya mas jin juga pake jQuery Lightbox dan CSS atau hanya pengunaan coding CSS ??. :)
X ✓yups sama-sama mas..
X ✓kok di laman mas.. ??
X ✓waduh ya ampun di bilang keren.wkwkwk
X ✓ane ringkas soalnya mas..
X ✓makasih gan..
X ✓cuman menambahkan :after dan :before lalu main margin..
X ✓kalau kontak milik saya ini pakai sedikit memakai jQuery mas..hehe
X ✓kalau yang diatas hanya CSS
wihh keren mas
X ✓hehe makasih mas..
X ✓Lama juga ane nggak berkunjung kemari, ternyata udah ada postingan baru!!!
X ✓Modif begini ane suka mas, ane pelajari dulu sebelum memutuskan untuk penerapannya...
Keren mas, saya simpen dulu kodenya :D
X ✓yap betul
X ✓silahkan mbak
X ✓wkwkwk :>)
X ✓oke oke
X ✓Ane kagak paham.. lebih diperinci bisa gak ya? [-( :-?
X ✓Wah.. kern juga ya...
X ✓misal untuk judulpost mu ada css yg ini:
X ✓.post-title h1 {....}
nda nantinya kamu tambahkan jadi begini:
.post-title h1:before {....}
.post-title h1:after {....}
nah css nya diatus sendiri
Sorry Oot Mau Nanya Cara Agar Tampilan Homepage Post Saya https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash4/1002157_541455989251435_270991980_n.jpg Menjadi Kayak Di Homepage Mas https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-prn2/954778_541456435918057_19686979_n.jpg Gimana Mohon Bantuannya
X ✓bisa saya lihat demo blognya ??
X ✓http://haekalfiqri2.blogspot.com/
X ✓wah keren mas :) ane coba2 dulu mas :)
X ✓keren mas brow ditunggu ya kunjungan baliknya :)
X ✓kayaknya ente bisa.. ente kan udah ambil CSS judul postingnya
X ✓silahkan..
X ✓oke mas brow..
X ✓Tinggal Jumlah Komentarnya Gan
X ✓mas jin ko jarang mampir ke blog saya :p
X ✓oke ditunggu aja..
X ✓Maaf nih OOT mas Fajrin..
X ✓Saya cek seo di Chekme mas Fajrin 100% :D
kalau H3 zero itu harus apa ya?
blognya yang mana mas ?? ane bantu :)
X ✓http://www.nulispost.com/ yang ini :D
X ✓jika sudah bisa dikirim email mas :)
X ✓ardyansyahfirman354@gmail.com
Dan mohon maaf bila merepotkan (p)
di blog sobat terdapat kode seperti ini :
X ✓.sidebar h2 {
background: #444;
color: #fff;
text-shadow: 0 -1px 0 #000;
font: 14px Oswald;
top: 0;
margin: 0;
padding: 8px 0 8px 13px;
text-transform: uppercase;
}
coba tambahkan dibawah kode di atas tadi dengan tambahan tag h3 :
.sidebar h3 {
background: #444;
color: #fff;
text-shadow: 0 -1px 0 #000;
font: 14px Oswald;
top: 0;
margin: 0;
padding: 8px 0 8px 13px;
text-transform: uppercase;
}
setelah itu, coba cari lagi kode seperti ini :
<div class="widget Label" id="Label1">
<h2>Kategori</h2>
pada h2 tersebut ubah h3 (yang hanya pada kategori saja)
Terimakasih banyak :)
X ✓zuperrr :D
X ✓sama-sama..
X ✓oke..thanks
X ✓kalo blogroll itu buat tukeran link ya sob? :)
X ✓bisa sob..
X ✓Terimakasih sob..
X ✓visit back http://www.center60.com/
beres sob..
X ✓iyee mas ,, silahkan saja :D
X ✓Gak ada demonya yah Mas ?
X ✓preview itu kan demonya ?
X ✓keren bangerr ini blognya :p
X ✓blog om ivan juga keren..
X ✓Kereeen loh mas,apalgi kalo pk sentuhan Javascript pasti tmbh keren tuh !! Oh iya blognya udh ku follow,jgn lupa follbek yah ? Salam kenal...
X ✓bentar ya gan ?? salam kenal balik
X ✓Izin dicoba yah kawan :)
X ✓mari berkunjung kembali.
silahkan gan..
X ✓1. Dilarang menanamkan link aktif
2. Dilarang promosi / meng-iklankan suatu produk dll.
3. Berkomentar dengan bahasa yang sopan
4. Untuk memasukkan gambar : copy url gambar lalu paste di form komentar
Tambahan :
✓ Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "KONVERSI KODE"
KONVERSI KODEEMOTICON