Mohon Maaf Jika Kurang Merespon

: 09.06 8 comments

Maaf Bro
Beberapa bulan ini Admin Fullblogdesign memang jarang Update artikel,dan sama sekali tidak merespon semua pertanyaan para pengunjung blog yang sangat sederhana ini.Padat nya jadwal pekerjaan yang harus saya tangani memang betul betul tidak dapat saya tinggalkan,dan mau tidak mau saya harus sedikit menelantarkan blog kesayangan saya ini.
Insya Allah beberapa hari kedepan Admin Full Blog Design Akan kembali Aktif dan mencari ide ide baru untuk saling berbagi dan bertukar pikiran ,jadi sekali lagi Saya Mohon Maaf Jika kurang merespon semua pertanyaan para sobat yang menyempatkan waktu untuk berkunjung ke blog sederhana saya ini .
Readmore...
serba serbi
Label:

show hide vertical menu jquery

: 22.24 23 comments

vertical menu
Assalamulaikum.....Bismillah ...Alhamdulillah .. Mumpung ada waktu dan ide kali ini admin Fullblogdesign akan membuat sebuah tutorial tentang cara membuat show hide vertical menu dengan menggunakan jquery,untuk contoh dan demonya silahkan Review ke http://jsfiddle.net/Mx2bX/3/embedded/result/
Untuk lebih jelasnya silahkan sobat ikuti tutorialnya secara lengkap:
  1. karena hidden menu ini menggunakan Jquery silahkan pasang jquery di bawah ini tepat di atas kode </head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
    Jika pada template sobat sudah ada jquerynya abaikan perintah di atas karena dalam sebuah template hanya boleh ada 1 jquery
  2. selanjutnya pasang kode css nya diatas kode ]]></b:skin> atau </style>
    #hidden-menu{width:300px;height:100%;background:#BFFFFE;font:normal 20px arial;position:fixed;top:0;right:-300px;transition:all 0.5s ease-in-out}
#hidden-menu:before{content:" Menu ";position:absolute;background:#80FE80;width:100%;padding:2%;text-align:center}
.tombol:before{content:"\f045 ";font-family:fontAwesome;position:absolute;top:0;left:-30px;background:#000;color:#fff;padding:5px}
.tombol:hover:before{color:#000;background:#006B6B}
#hidden-menu a{color:#333;text-decoration:none;display:block;padding:5px}
#hidden-menu a:hover{color:red;border-right:3px solid red;background:#BFFEBF}
#hidden-menu li{list-style:none;line-height:60px;border-bottom:1px dotted #aaa}
#hidden-menu.active {
	right:0;
}
  3. karena menu ini menggunakan fontAwesome sobat harus pasang dulu Style Awesome berikut tepat di bawah kode <head>
    <link href='https://simple-cursor.googlecode.com/svn/trunk/awesome.css' rel='stylesheet'/>
  4. Cari kode </body> lalu pasang script berikut tepat di atas kode </body>
    <script type="text/javascript">   
$('.tombol').on('click', function(e) {

        e.preventDefault();

        $('#hidden-menu').toggleClass('active');

    });
</script>
  5. Lalu Save template
  6. Nah yang terakhir cara pemanggilan kode html nya silahkan menuju ke tata letak >> tambah Gadget >> Html Javascript lalu masukkan kode html berikut
    <div id="hidden-menu">     <ul><li><a href="/" title="home"><i class="icon-home"></i>Home</a></li>         <li><a href="#" title="Contack"><i class="icon-envelope"></i>Contack</a></li>         <li><a href="#" title="Abouth"><i class="icon-user"></i>Abouth</a></li>         <li><a href="#" title="Color-Piker"><i class="icon-th"></i>Color-Piker</a></li>         <li><a href="#" title="more"><i class="icon-file"></i>More</a></li>         <a class="tombol" href="#" title="open/close"></a>     </ul> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <div class="g-person" data-layout="landscape" data-href="https://plus.google.com/109648847911535372958"></div>     <div style="text-align:center;background:#000;color:#fff">Thank you for visiting</div> </div>
  7. coba perhatikan kode yang saya seleksi (kode berwarna biru)silahkan sobat ganti dengan id google plus sobat
  8. Save

Readmore...
jquery , menu
Label: ,

Author box Responsive

: 23.16 20 comments

Author box
mungkin sobat pernah melihat Author Box yang terpasang pada sebuah blog,dan yang kita tahu blog/website tersebut sudah responsive sayang sekali saat kita lihat dengan menggunakan resulusi tertentu (dibawah 320px)Author box tersebut sengaja di hilangkan karena Author-box yang dia pasang tidak responsive.Nah kali ini Admin akan memberi solusi buat sobat blogger yang templatenya sudah responsive dan ingin juga pasang Author box yang responsive.Untuk demonya sudah saya gunakan pada blog kesayangan saya ini dan jika sobat ingi tahu cara membuatnya silahkan ikuti petunjuk Admin secara lengkap :
  1. Cari kode ]]></b:skin> atau </style> letakkan css berikut tepat di atasnya 
    #author-box {
    background: none repeat scroll 0 0 #98B7DB;
    box-shadow: 2px 3px 2px #000000;
    margin: 8px 5px;
    min-height: 120px;
    padding: 5px 2px;
    position: relative;
    text-align: justify;
    width: 98%;
}

#title-content {
    padding: 5px 30px;
    text-align: left;
    text-transform: uppercase;
    color: #fff;
    background: #1274B5;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    box-shadow: 1px 2px 1px#000;
}

#title-content:before {
    content: &quot;
    \f040&quot;;font-family: fontAwesome;
    color: red;
    background: blue;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 5px;
}

.avatar {
    clear: left;
    float: left;
    margin-bottom: 0.5em;
    margin-right: 0.2em;
    margin-top: 0.2em;
    text-align: justify;
    width: 80px;
    height: 80px;
    position: relative;
    background: red;
}

.avatar:before {
    content: &quot;
    ADMIN&quot;;position: absolute;
    bottom: -10px;
    left: 7px;
    background: #000;
    color: #fff;
    padding: 0 6px;
}

.photo-avatar {
    width: 70px;
    height: 70px;
    margin: 5px;
}
  2. Selanjutnya cari kode <data:post.body/> letak kan html dibawah ini tepat di bawah kode <data:post.body/>berikut kode Html nya 
    <div id='author-box'>
    <div id='title-content'>Judul Artikel :<a expr:href='data:post.url' expr:title='data:blog.pageName'><data:blog.pageName/></a></div>
<div class='avatar'>
  <img alt='photo-avatar' class='photo-avatar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoogr8FbjiESMMlVuywBeZiTNS0Oeqkvw0rp8Z2LbSruJBFJBiTUGXciy1QmNG7mTBB5UK4zjy3zLCIF93S2ZqpxAHpWPtY7OPkY538Su7K5uhHEi-2LUIyblHlUtsSZ6M-8uWlAOcs5Q/s200/mahfid.jpg' title='Mahfid Mayanto'/></div>Terima Kasih Sobat sudah membaca Artikel saya Tentang <i style="color:red;"><data:blog.pageName/></i> Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. 
    Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih</div>
  3. Silahkan sobat ubah bagian Narasi pada html dengan kata kata sobat sendiri lakukan preview dulu jika jika sudah tidak ada error kode silahkankan Save Template..Selamat mencoba
Readmore...
author-box
Label:

cara tampilkan avatar pengunjung blog

: 22.59 14 comments

Otomatis Avatar
Pernah saya posting tentang cara menampilkan nama  pengunjung blog secara otomatis,Cara kerja script ini adalah setiap pengunjung yang datang ke blog kita akan di hadapkan pada sebuah kotak Alert yang harus diisi oleh pengunjung blog ,untuk detilnya lihat dulu disini .
Nah kali ini Admin juga akan membuat tutorial yang sama akan tetapi yang akan tampil bukan sekedar nama akan tetapi photo avatar pengunjung blog akan tampil secara otomatis (dengan ketentuan sobat harus loggin dulu) .
Demonya bisa sobat lihat pada bagian kiri blog ini (jika belum di hapus),untuk cara membuatnya silahkan ikuti tutorialnya secara lengkap :
  1. Pasang css kode berikut tepat di atas kode ]]></b:skin>
    #konco-ku{position:fixed;left:75px;bottom:200px}
    Silahkan sesuaikan posisi avatar sesuai kebutuhan edit pada bagian left:........px atau bottom:....px
  2. Selanjutnya Gunakan Ctrl + F cari kode </body> letakkan Html sekaligus script berikut tepat di atas kode </body>
    <div id='konco-ku'>
<img alt='photo-mu' height='80' src='http://profiles.google.com/s2/photos/profile/me' width='80'/>
</div>
<script type='text/javascript'>
//<![CDATA[
nampangdikit=document.getElementById("konco-ku")
nampangdikit.innerHTML='<a rel=nofollow href="https://plus.google.com/109648847911535372958" target="_blank" title="Jangan Cuma Liat Liat Bos kasih masukan dong di kolom komentar"><img alt="photo-mu" src="http://profiles.google.com/s2/photos/profile/me" width="80" height="80"  title="Jangan Cuma Liat Liat Bos kasih masukan dong di kolom komentar" onmouseover="javascript:hover()" onmouseout="javascript:logo()"></a>'
function logo(){photo-mu.getElementsByTagName("img")[0].src="http://profiles.google.com/s2/photos/profile/me"}
function hover(){photo-mu.getElementsByTagName("img")[0].src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwcVIalH44pA7xWlxrkzcZ__7Pe_sShf04_zIZVPLzA0GwIpVWB6mfSP87BcZA48SgkJsjB_a7Z7Y3erjj40Hro2XEfcZ8orHOuMdJXcY4opmIr0HToR0lKbajBj9bc9eZFVQkDO6AGvlk/s1600/avatar.png?s=80"}
//]]>
</script>
Silahkan ganti code yang di seleksi berwarna putih dengan Id google plus sobat sendiri,kemudian ganti juga kode yang diseleksi berwarna kuning dengan gambar apa saja dengan ukuran (80px X 80px)bisa juga di isi dengan photo profile kamu ... Jika ada kesulitan tentang cara tampilkan avatar pengunjung blog silahkan ajukan pertanyaan di form komentar
Readmore...
widget
Label: