LordDayz News: Blog | Info Klasemen Liga Spanyol Hasil Jadwal Pertandingan

Showing posts with label Blog. Show all posts

Home » Posts filed under Blog

Cara Membuat Kwick Navigasi Menu Di Blogger

Kwick Menu Navigasi Blogger dengan jQuery, kiranya itulah yang akan saya bahas kali ini. Setelah kemarin saya bahas juga untuk cara membuat Jquery Tab View Scroll Show Hide Widget, kita lanjut lagi, dan masih seputar JQuery. Ini juga merupakan reques dari beberapa sobat blogger, yang meminta untuk membuatkan tutorialnya. Ok, bila masih penasaran sobat bisa melihatnya pada menu navigasi diblog saya ini, ataupun bisa melihat pada gambar/sreenshot dibawah ini.

yang pasti membuat tampilan blog makin keren sob, karena dengan jQuery Sliding Navigation Menu. untuk melihat demonya, sobat bisa mengunjungi blog teman saya di http://kode-blogger.blogspot.com
Berikut langkah-langkah membuatnya:

1. Login ke akun blogger sobat
2. Masuk ke Rancangan/Design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin>

.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block}

6. Kemudian cari kode <head>,dan letakkan kode jQuery berikut tepat diatasnya:

<script src='http://lorddayz.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://lorddayz.googlecode.com/files/jquery.kwicks-1.5.1.pack.js' type='text/javascript'/>
<script src='http://lorddayz.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

Tambahin juga kode script berikut dibawahnya:

<script type='text/javascript'>
$().ready(function() {
$('.kwicks').kwicks({
max : 205,
spacing : 5
});
});
</script>

7. Simpan template.

Nah untuk file.js bila sudah ada yang menggunakan jquery-1.3.2.min.js, untuk file.js ini tidak perlu dipasang lagi.

8. Masih lanjut sob, masuk ke Tata Letak/Rancangan, klik Add New Widget/Tambah Widget, lalu pilih HTML/Javascript. Untuk cara berikutnya, rada gampang-gampang susah, bila ditemplate sobat sudah ada halaman untuk widget ditas halaman posting, sobat tinggal menambahkan kode berikut:

<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='http://lorddayz.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='#' id='hide_top-klik'>Portfolio</a></li>
<li id='kwick3'><a href='http://www.blogger.com/profile/01407082265780545852' title='about'>About</a></li>
<li id='kwick4'><a href='http://lorddayz.blogspot.com/search?max-results=100'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='#' title='recomended links'>Resource</a></li>
</ul>
</div>

9. Simpan/Save. Sipppp, sampai disini sobat sudah bisa membuat kwick menu navigasi blogger dengan jQuery.

source : http://kode-blogger.blogspot.com/2011/06/cara-membuat-kwick-menu-navigasi-di.html

Memasang Kotak Komentar Facebook + Notifikasi Di Facebook

Baru nge-post lagi neh All \m/
hehe,, lagi sibuk nyiapin blog baru soalnya :D
Kali ini saya akan memberikan tutorial mengenai "memasang komentar facebook pada blog"

Okey, Langsung Saja deh :D
Tapi terlebih dahulu backup template anda untuk menghindari kesalahan

Step 1. Disable/nonatifkan komentar default blog
Kenapa ? karena nanti tampilan blogmu akan rancu kalau ada 2 kotak komentar
Cara Disable : Buka Akun blogger > setting > comments > Pilih "Hide" > Save Setting

Step 2. Membuat aplikasi facebook untuk komentar blog
Masuk ke link Facebook Developers > Buat Aplikasi > Masukkan Nama Aplikasi (terserah anda) > tandai "SETUJU" > klik "Create Application"
Nah aplikasi selesai, tinggal kita konekin ke blog kita, masuk ke tab "Situs Web" lihat gambar

Setelah itu klik "Simpan Perubahan"

Nah, kita sudah dapatkan ID aplikasinya, kita lanjut lagi ke blogger

Step 3. Memasukkan Kode Ke Template Blog
Masuk ke akun blogger > Layout > Edit HTML > Expand Widget Template
cari kode ini <html
Kalu sudah ketemu, tambahkan kode dibawah ini

xmlns:fb='http://www.facebook.com/2008/fbml'

Harus ada Spasi diantara kode tersebut, ini contohnya

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog..............2005/gml/expr' >

Langkah selanjutnya,
Cari kode <body>
Setelah kode atau dibawah kode diatas masukkan script dibawah ini

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId : 'ID Aplikasi Anda',
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml : true // parse XFBML
    });
};

    (function() {
    var e = document.createElement('script');
      e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>

Selanjutnya, Memasang Open Graph Protocol Tags

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='NAMA BLOG ANDA' property='og:site_name'/>
<meta content='URL LOGO BLOG ANDA.gif'   property='og:image'/>
<meta content='ID APLIKASI ANDA'   property='fb:app_id'/>
<meta content='ID FACEBOOK ANDA'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

Sesuaikan Tulisan yang berwarna diatas dengan blog anda dan facebook anda
setelah merubah/mengedit script diatas, cari kode </head>, lalu simpan script diatas sebelum tag </head> atau diatasnya.

Step 4. Menambahkan kotak komentar facebook.
cari kode <data:post.body/> kemudian masukkan script dibawah ini kebawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' colorscheme='dark' expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx6nav_V6DEM8eDp6Yn_510cvY07be_d1UAOhQyiyWE3kKHwlk1_MLqNCKrNHkkINM64P4Ye6rAxnMBytPpZpyg3BOiLgFlK5KadcVNjAVsRJq2TRS7Uy6gAY7gYSCGijez_bXefOYEMw/s1600/cooltext527602427.png' width='16'/> <b><a href='http://www.lorddayz.blogspot.com/' target='_blank' title='blogger templates'>LordDayz Comments For Blogger</a> Mau Pasang Kotak Kmentar Facebook Seperti Ini ? Klik Link ini <a href='http://lorddayz.blogspot.com/2011/06/memasang-kotak-komentar-facebook.html' target='_blank' title='kotak komentar fb'>LordDayz Facebook Comment Tutorial</a></b></div>
</b:if>

Ganti tulisan yang berwarna hijau susai dengan keinginan anda.. untuk colorscheme hanya ada 2 pilihan yaitu "Light" & "Dark"

Sekian dulu tutor dari saya, semoga berguna \m/