.post-thumbnail{float:left;margin-right:20px}
Pasang Iklan Anda

Sunday, July 28, 2013
Lightbox Blogroll Super Keren

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

deleteX

wah besok ane coba deh cz skarang mau pulang billing udah mau habis :)


thx sob :)

deleteX

boleh boleh sob :)

deleteX

Keren mas ... :D

deleteX

Wah...lama gak pernah update blognya, kemana aja mas?? :-d

deleteX

seperti yang tertera di atas mas.. sibuk + ada sedikit halangan :D

deleteX

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

deleteX

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

deleteX

pada :
#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..

deleteX

Kasih contoh pasang dipslay:none di #header h1 #header p
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

deleteX

coba search di kode agan :
display:none
nanti akan tau cara pasangnya..

HTMLnya sudah jelas di atas tadi.
display:none
akan berfungsi menutup BBDroid Bmaster23

deleteX

gan udah berhasil tapi caranya beda,saya buat code ini : clas ='title'> ngaruh gk gan?

deleteX

kalau menampilkan dekscripsi blog gimana kok ilang juga?

deleteX

gan coba liat blog saya? kok tulisan header nya kepotong?
sama jarak nya kebawah renggang? gimana munculin deksripsi blog ?

deleteX

wahh ane ketinggalan berita nih...
keren modifikasinya.. :)

deleteX

weww ... (y) siipphh mas :D :D :D ,,, ane nggk kepikiran untuk buat seperti itu :) :) :)

deleteX

siapa nih yg mulai ? :p

deleteX

bagaimana mas ?? banyak sekali pertanyaannya. bingung ane @-)

deleteX

makasih bang..haha

deleteX

haha minjem lightboxnya mas..

deleteX

kunjungan perdana mas-jin... nice post dah :d

deleteX

oke bang.. makasih

deleteX

wawwwwww keren kok lama ngk update kemana saja yang lain udah nungguin,,? :D

deleteX

sedikit bantuan untuk penerapan kode

display:none

jangan diletakan pada deskripsi blog agan cukup diletakan pada kode seperti ini

.Header h1 a

deleteX

hehe sudah tertera di atas mas..

deleteX

keren juga ya mas, saya ijin nyimpan scriptnya mas jin, makasih sudah berbagi.

deleteX

Makasih atas semua infonya
saya udah pasang link bro di web saya
http://sanggar-belajar.blogspot.com/p/tukar-link.html

deleteX

wah keren tuh bisa berhadapan langsung dengan maut. ^_^

deleteX

kodenya banyak juga ya?? :)

deleteX

buku ramadhan ane malah terbengkalai belum diisi.. haha..
terimakasih sudah berbagi gan.. lanjutkan kreativitasnya :D

deleteX

gan ane mau tanya, mohon bantuannya ya? (o)
pertanyaannya ada di gambar..
http://oi41.tinypic.com/i4lmxk.jpg
sebelumnya terima kasih.. (p)

deleteX

Keren mas, btw apakah Lightbox pada kontak punya mas jin juga pake jQuery Lightbox dan CSS atau hanya pengunaan coding CSS ??. :)

deleteX

yups sama-sama mas..

deleteX

kok di laman mas.. ??

deleteX

waduh ya ampun di bilang keren.wkwkwk

deleteX

ane ringkas soalnya mas..

deleteX

cuman menambahkan :after dan :before lalu main margin..

deleteX

kalau kontak milik saya ini pakai sedikit memakai jQuery mas..hehe
kalau yang diatas hanya CSS

deleteX

hehe makasih mas..

deleteX
avatar
Anonymous

Lama juga ane nggak berkunjung kemari, ternyata udah ada postingan baru!!!

Modif begini ane suka mas, ane pelajari dulu sebelum memutuskan untuk penerapannya...

deleteX

Keren mas, saya simpen dulu kodenya :D

deleteX

Ane kagak paham.. lebih diperinci bisa gak ya? [-( :-?

deleteX
avatar
Anonymous

Wah.. kern juga ya...

deleteX

misal untuk judulpost mu ada css yg ini:
.post-title h1 {....}
nda nantinya kamu tambahkan jadi begini:
.post-title h1:before {....}
.post-title h1:after {....}
nah css nya diatus sendiri

deleteX

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

deleteX

bisa saya lihat demo blognya ??

deleteX

http://haekalfiqri2.blogspot.com/

deleteX

wah keren mas :) ane coba2 dulu mas :)

deleteX

keren mas brow ditunggu ya kunjungan baliknya :)

deleteX

kayaknya ente bisa.. ente kan udah ambil CSS judul postingnya

deleteX

Tinggal Jumlah Komentarnya Gan

deleteX

mas jin ko jarang mampir ke blog saya :p

deleteX

oke ditunggu aja..

deleteX

Maaf nih OOT mas Fajrin..
Saya cek seo di Chekme mas Fajrin 100% :D
kalau H3 zero itu harus apa ya?

deleteX

blognya yang mana mas ?? ane bantu :)

deleteX

http://www.nulispost.com/ yang ini :D

deleteX

jika sudah bisa dikirim email mas :)
ardyansyahfirman354@gmail.com
Dan mohon maaf bila merepotkan (p)

deleteX

di blog sobat terdapat kode seperti ini :
.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)

deleteX

Terimakasih banyak :)

deleteX
avatar
Anonymous

kalo blogroll itu buat tukeran link ya sob? :)

deleteX

Terimakasih sob..
visit back http://www.center60.com/

deleteX

iyee mas ,, silahkan saja :D

deleteX

Gak ada demonya yah Mas ?

deleteX

preview itu kan demonya ?

deleteX

keren bangerr ini blognya :p

deleteX

blog om ivan juga keren..

deleteX
avatar
Anonymous

Kereeen loh mas,apalgi kalo pk sentuhan Javascript pasti tmbh keren tuh !! Oh iya blognya udh ku follow,jgn lupa follbek yah ? Salam kenal...

deleteX

bentar ya gan ?? salam kenal balik

deleteX

Izin dicoba yah kawan :)
mari berkunjung kembali.

deleteX
Catatan :
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
 
Back to Top