Cara Membuat jQuery Accordion Dengan Mudah

Cara Membuat jQuery Accordion Dengan Mudah - Kali ini akan saya bahas cara memasang / membuat daftar isi dengan jQuery accordion. Penampilan sitemap atau daftar isi jquery accordion ini sangat bagus dan keren sekali serta mempunyai link bergoyang ketika disorot cursor mouse. Dibawah ini dapat anda lihat screenshot dari daftar isi menggunakan efek / animasi accordion. Bagaimana menurut anda, keren bukan?

Cara Membuat jQuery Accordion Dengan Mudah

Cara Membuat jQuery Accordion Dengan Mudah

Sitemap / daftar isi accordion jquery di blogger mempunyai kelebihan dalam meringkas / membuat irit ruang blog, jadi tidak akan memanjang sampai kebawah. Dengan begitu apabila artikel / postingan anda sudah melebihi 1000 artikel, apabila tidak dipasang daftar isi dengan scroll atau daftar isi dengan menggunakan jquery accordion, pasti akan memanjang ke bawah.

Cara Membuat Daftar Isi Blog Dengan jQuery Accordion Mudah

1. Login ke blogger anda
2. Pada dasbor masuk ke Template => pilih Edit HTML.
3. Backup dulu template anda
4. Centang kotak Expand Widget Template
5. Tekan F3 dan cari kode ]]></b:skin> lalu letakkan kode berikut diatasnya

Spoiler :
#dafis-acc { font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:14px; } .dafis-label { background: rgb(125,126,125); background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; color: #A1A1A1; text-transform:uppercase; font-weight: bold; line-height: 2em; margin: 1px 3px; cursor: pointer; outline: medium none; overflow: hidden; padding: 2px 10px; text-decoration: none; text-align: center; } .dafis-label:hover { color: #F2F2F2; } .dafis-daf ol { margin: 0 0 0 30px !important; padding: 0 !important; } .dafis-daf ol li { background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; line-height: 1.3em; margin: 1px 3px !important; text-align: left; white-space: nowrap; } .dafis-daf ol li a { color: #333333 !important; display: block; padding-top:5px; padding-left: 10px; text-decoration: none !important; } .dafis-daf ol li a:hover { color:f2f2f2; padding-left: 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); }


6. Lalu cari kode </head> dan letakkan kode berikut diatasnya

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

Keterangan :
Apabila didalam template anda sudah terpasang kode script jQuery, maka tidak perlu lagi dipasang didalam template.

7. Simpan / Save Template

8. Selanjutnya anda buat postingan baru dengan judul daftar isi atau sitemap di blog anda dan pasang atau masukkan kode dibawah ini dalam posisi / mode HTML (bukan compose) setelah itu publikasikan.

<script src="https://sites.google.com/site/bloggerbondowosoblogspotcom/js/Table-of-Content.js" type="text/javascript"></script>
<script src="http://caraterupdate.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Keterangan :
Ganti url blog saya dengan url blog anda

Sekian - Cara Membuat jQuery Accordion Dengan Mudah

Selamat dicoba tutorial blog mengenai Cara Membuat Daftar Isi Dengan jQuery Accordion di Blog, semoga bermanfaat dan semoga berhasil, keep blogging sob.

Baca Selengkapnya - Cara Membuat jQuery Accordion Dengan Mudah

Cara Membuat Iklan Banner Melayang Kanan dan Kiri

Cara Membuat Iklan Banner Melayang Kanan dan Kiri  - Selamat datang di Cara Terupdate sobat Blogger, kali ini saya akan share bagaimana cara membuat iklan banner melayang di sebelah kiri dan kanan sidebar blog seperti gambar berikut :

Cara Membuat Iklan Banner Melayang Kanan dan Kiri 

Cara Membuat Iklan Banner Melayang Kanan dan Kiri 

Cara Membuat Iklan Banner Melayang Kanan dan Kiri 

• Pertama-tama masuk ke akun blogger milik anda
• Selanjutnya masuk ke Tata Letak >> Tambah Gadget >>HTML/Javascript
• Kemudian copy kode Berikut ini dan pastekan pada kolom yang telah disediakan

  

---

<script type='text/javascript'>
    $(document).ready(function() {
    $('img#closed').click(function(){
    $('#btm_banner').hide(90);
    });
    });
    </script>

    <script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
    </script><script type="text/javascript">
    if (window.jstiming) window.jstiming.load.tick('headEnd');
    </script>

    <!--start: floating ads-->
    <div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">

    <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEqEqxvcxFxvPZhQo59j326qAPvYjl5P-Bud33KtZmOB0lu8ZqcbU3cCMUKn_CNaP9tRgxdR8nHUmdAxBCXgi1uis9aFmUQ_2ML38pqMqQBvP181qYXfKUnGRfyAFAxJ21m6Byz9aYUCQ2/s1600/PhoXo2.png'/></center></a></div>
    <!--Mulai-->
    

Script Banner Sobat <Kiri>

    <!--Akhir-->
    </div>
    <!--end: floating ads-->
    <!--start: floating ads-->
    <div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">

    <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEqEqxvcxFxvPZhQo59j326qAPvYjl5P-Bud33KtZmOB0lu8ZqcbU3cCMUKn_CNaP9tRgxdR8nHUmdAxBCXgi1uis9aFmUQ_2ML38pqMqQBvP181qYXfKUnGRfyAFAxJ21m6Byz9aYUCQ2/s1600/PhoXo2.png'/></center></a></div>

    <!--Mulai-->
    

Script Banner Sobat <Kanan>

    <!--Akhir-->

    </div>
    <!--end: floating ads-->

---

Lalu ganti Tulisan yang Berwarna Biru dengan Script iklan sobat sendiri . Gampang bukan membuatnya?


Sekian - Cara Membuat Iklan Banner Melayang Kanan dan Kiri 

Baca Selengkapnya - Cara Membuat Iklan Banner Melayang Kanan dan Kiri

Cara Memasang Script Yahoo Messenger-YM

Cara Memasang Script Yahoo Messenger-YM - Pada postingan kali ini kita akan memberikan ulasan tentang cara memasang YM (Yahoo Messenger) Status pada Blog. Kalian bebas bisa naruh di blog apa..boleh Blogger, Wordpress atau yang lain.

Untuk Cara Memasang Script Yahoo Messenger-YM, memasangnya gak beda jauh ketika kita memasang widget HTML baru pada Blog kita.

Cara Memasang Script Yahoo Messenger-YM

Nah sebelum kita memuali Cara Memasang Script Yahoo Messenger-YM kalian Pilih dulu icon YM sesuai pilihan kalian. Disini ada masing-masing 2 status pasangan, yakni online status dan offline status. Namun apabila kalian kepingin membuat gambar sendiri untuk dijadikan icon YM, baca tutorialnya cara Membuat Icon Status Yahoo! Messenger Dengan Gambar Sendiri

Untuk icon 0-5

Untuk icon 6-8

Untuk icon 9-16

Untuk icon 16-24

Nah, apabila sudah punya pilihan iconnya, sekarang tinggal buka Blogger atau Wordpress saja. 

Silahkan buka Design terus klik Page Elements -->Add Gadget --->klik opsi HTML /Javascript
Setelah itu copas kode dibawah ini:

<a href="ymsgr:sendIM?Id_yahoo_kamu"> <img src="http://opi.yahoo.com/online?u=Id_yahoo_kamu&amp;m=g&amp;t=0&amp;l=us"/>

</a>



Penting: Dari kode script diatas kalian harus mengganti tulisan Id_yahoo_kamu (ada 2 tulisan) dengan ID akun yahoo kamu sebenarnya dan Tulisan t=0 dengan Kode Status yahoosesuai pilihan diatas


Save dan lihat hasilnya...




Sekali lagi saya ingatkan apabila kamu menginginkan agar icon YM adalah gambar, foto, atau logo kamu sendiri maka baca tutorialnya DISINI atau yang berjudul Membuat Icon Status Yahoo! Messenger Dengan Gambar Sendiri 

contoh nya >>


<a href="ymsgr:sendIM?ramdan_kurniawan"> <img src="http://opi.yahoo.com/online?u=ramdan_kurniawan&amp;m=g&amp;t=14&amp;l=us"/>

</a>







Sekian - Cara Memasang Script Yahoo Messenger-YM

Baca Selengkapnya - Cara Memasang Script Yahoo Messenger-YM

Cara Membuat Widget Melayang Facebook Like Box

Cara Membuat Widget Melayang Facebook Like Box

Cara Membuat Widget Melayang Facebook Like Box

Cara Membuat Widget Melayang Facebook Like Box - Hampir mirip dengan artikel sejenis yang sudah saya rilis sebelumnya yaitu cara membuat buku tamu di blogspot dengan cara disembunyikan dan efek melayang. Pada kali ini saya akan mengajak anda mempraktekan cara membuat widget Facebook like dengan cara tersembunyi dan melayang juga.
banyak manfaat yang bisa anda peroleh dengan menggunakan cara ini yaitu selain unik dan menghemat tempat pada sidebar, juga cara ini bisa mempercepat atau tidak menghambat kecepatan loading di saat blog anda pertama kali di akses. Untuk dapat mempraktekannya terlebih dahulu anda harus sudah terdaftar dan mendapatkan kode Facebook like box terlebih dahulu. Bagaimana tertartik untuk mempraktekannya? berikut cara memasang widget facebook like melayang pada blog:

Cara Membuat Widget Melayang Facebook Like Box

• Login ke dashboard blogger anda. 
• Pilih Rancangan > Elemen Laman > Add Gadget (HTML/Javascript).\
• Copy script widget dibawah ini dan paste pada gadget.

    <style type="text/css">

    .barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRMlF6Bni5ZlrcRXdvQvxpxfLAO3b67-PYn7iZdRdCwtZvDo8f-CS4uAo-Fbatkdb-m4ro2NUQKp_iPuCSWsPbT8tMxNBBuenQYhhDnO8RKC_HxEC74o53vz9EKqBlF-M_ZCKi3HlAPSHD/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}

    .barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBA-hMGZXqD_0KiJzPYbksNslB24_IJQCMRUDHbo7arEg7hJ2yd57ijWjL8q1pCRb90g7A_3jKlmJdpD1m_E37gwRqvtJO-6xgh_0T3GKzxQ2Rmhyk23SNYVg9IOVsR_qLGi9DQzAntVO6/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}

    .barcontefacebook{margin:5px 0 0 47px}

    </style>

    <div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">

    <div class="barcontefacebook">

    <!-- Begin Facebook -->

    KODE FACEBOOK LIKE BOX ANDA DISINI

    <!-- End Facebook -->

    </div>

    </div>

• Ganti tulisan KODE FACEBOOK LIKE BOX ANDA DISINI dengan kode Facebook Like Box yang sudah anda persiapkan. 
• Jika pada template anda belum terdapat javascript dari Facebook, maka copy saja javascript di bawah ini dan letakkan tepat di atas kode </head>  pada template supaya widget Facebook Like Box ini bisa berfungsi.

     <script>(function(d, s, id) {

      var js, fjs = d.getElementsByTagName(s)[0];

      if (d.getElementById(id)) {return;}

      js = d.createElement(s); js.id = id;

      js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;

      fjs.parentNode.insertBefore(js, fjs);

    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

• Sesuaikan tinggi dan lebar widget supaya sama dengan ukuran Facebook Like Box yang anda buat sebelumnya melalui Facebook. 

• Save / Simpan.

Sekian - Cara Membuat Widget Melayang Facebook Like Box

Selesai.... bagaimana? gampang kan caranya? semoga Cara Membuat Widget Melayang Facebook Like Box ini blog anda semakin menarik dan unik.

Happy blogging...

Baca Selengkapnya - Cara Membuat Widget Melayang Facebook Like Box

Cara Membuat Kotak Banner Iklan 125x125 Di Blog

Cara Membuat Kotak Banner Iklan 125x125 Di Blog - Cara Membuat Kotak Banner Iklan 125x125 Di Blog - Hasil kerja Blogging anda harusnya menghasilkan suatu keuntungan. untuk apa bersusah payah untuk Blogging namun tidak ada yang anda hasilkan. Jadi apa keuntungan kita dari Blogging? Salah satunya adalah dengan adanya iklan. 

Jadi, jika ada yang memasang iklan pada Blog anda, maka si pemasang harus membayar dengan tarif yang telah anda tentukan. Jadi kita para Blogger harus berusaha membuat Blog sebagus mungkin agar Blog kita ramai dan menarik seseorang untuk memasang iklan di Blog kita.Untuk itu, pada kesempatan kali ini, saya akan coba berbagi tutorial, mengenai "Cara Membuat Kotak Banner Iklan 125x125 Di Blog"

Nah Guna memudahkan para pemasang iklan untuk memasang iklan di blog anda, sebaiknya anda menyediakan kotak banner iklan. Salah satu cara membuat kotak banner iklan yang akan saya bahas kali ini  cukup mudah, yaitu tanpa edit HTML Template, anda cukup menambahkan Gadget > HTML/Javascript pada bagian Tata Letak. Bagi anda yang berminat, silahkan simak tutorial Cara Membuat Kotak Banner Iklan 125x125 Di Blog berikut ini, selengkapnya untuk anda lakukan.

Cara Membuat Kotak Banner Iklan 125x125 Di Blog :

• Masuk ke blogger > Rancangan > add gadget > HTML/Javascript, kemudian masukkan kode di bawah ini :

<div align="center"> 

<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"> 

<tbody><tr> 

<td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td> 

<td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td> 

</tr> 

<tr>

<td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td> 

<td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>

</tr>

</tbody></table> 

<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"> 

<tbody> 

      <tr> 

       <td><center><a href="URL/Alamat Blog" rel="nofollow"><img width="265" height="37" border="0" alt="Pasang Iklan Di Sini" src="URL/Alamat Gambar advertise here" /></a></center></td> 

      </tr>

    </tbody></table>

</div>

Pengaturan :

1. Ganti kata URL/Alamat IKLAN dengan alamat website pemasang iklan
2. Ganti kata URL/Alamat Gambar Iklan dengan link atau alamat gambar iklan di hosting
3. Ganti kata Deskripsi Iklan dengan informasi dan deskripsi mengenai iklan yang dipasang, deskripsi ini akan muncul pada saat kursor mouse digerakkan ke arah banner iklan. 
4. Ukuran default sidebar adalah 265, jadi pastikan ukuran sidebar blog anda tidak kurang dari itu. 

Jika anda ingin menambah kotak iklan lagi dibawahnya misalnya menjadi 6 kotak tinggal masukkan kode di bawah ini, di bawahnya kode yang berwarna biru.

<tr> 
<td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td> 
<td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td> </tr>

Sekian - Cara Membuat Kotak Banner Iklan 125x125 Di Blog 

Bagaimana, mudah bukan ? semoga tutorial mengenai Cara Membuat Kotak Banner Iklan 125x125 Di Blog ini bermanfaat, selamat mencoba..

Baca Selengkapnya - Cara Membuat Kotak Banner Iklan 125x125 Di Blog

Cara Membuat Dan Menambahkan Scroll Pada Widget Blog

Cara Membuat Dan Menambahkan Scroll Pada Widget Blog - Cara Membuat Dan Menambahkan Scroll Pada Widget Blog - Sebelumnya saya pernah posting mengenai Cara Menambahkan Scroll Pada Arsip Blog dan Cara Membuat Dan Memasang Scroll Pada Label Kategori Blog Masih dalam hal yang sama, kali ini saya akan postign mengenai "Cara Membuat Dan Menambahkan Scroll Pada Widget Blog" yah, anda mau pake cara yang mana aja boleh, silahkan anda coba praktekan cara cara tersebut satu persatu, hmm..

Yang saya tahu soal scroll ini, dengan Cara Membuat Dan Menambahkan Scroll Pada Widget Blog, blog anda akan tertata rapih, tidak memerlukan banyak ruang pada template, seperti pada widget arsip, label, dll, yang apabila diklik akan memanjang kebawah, kurang lebihnya seperti itulah peran aktif scroll ini. Cara Membuat Dan Menambahkan Scroll Pada Widget Blog ini ada dua versi, yaitu versi pertama dengan Edit HTML Template, dan versi yang kedua dengan Tanpa Edit HTML Template. Baik, sekarang, mari kita lakukan.

Cara Membuat Dan Menambahkan Scroll Pada Widget Blog :

• Pertama anda harus tahu widget mana yang akan diberi scroll caranya, silahkan anda masuk ke Menu Tata Letak sentuh cursor di tulisan edit pada widget yang akan anda beri scroll. Pada bagian bawah akan terlihat nama widget, lihat pada gambar di bawah ini sebagai contoh, nama widget-nya adalah PopularPosts1.

• Setelah anda mengetahui nama widgetnya, maka anda masuk ke Menu Template dan pilih Edit HTML.
• Jangan lupa centang pada bagian kotak Expand Widget Template.
• Lalu cari kode di bawah ini, agar lebih mudah gunakan tombol ctrl+F.

]]></b:skin>

• Masukan kode berikut tepat di atas kode ]]></b:skin>

#PopularPosts1 .widget-content{
height:230px;

width:auto;

overflow:auto;

}

width:auto;

overflow:auto;

} 

• Ganti tulisan berwarna merah dengan kode widget yang akan anda beri scroll
• Terakhir, Save dan lihat hasilnya.

Anda bisa juga menggunakan ini, masih dengan cara Edit HTML namun berbeda dalam penempatan kodenya, silahkan disimak.

• Cari kode "Title" yang ingin di buat scroll, misalnya disini saya ambil contoh widget dengan nama "My Blogroll" (gunakan Control F atau F3).
• Perhatikan kode yang ada di bawah, kurang lebih seperti ini : 

.....................................................................<b:widget id='BlogList1' locked='false' title='My Blogroll' type='BlogList'><b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'>
............................................................................ 

• Perhatikan yang ber warna merah
• Anda Tinggal menambahkan saja code dibawah ini :

style='overflow:auto; height:100px

 Sehingga keseluruhannya akan tampak seperti ini : 

.....................................................................<b:widget id='BlogList1' locked='false' title='My Blogroll' type='BlogList'><b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'style='overflow:auto; height:100px'>............................................................................

• Selesai, Simpan Template dan lihat hasilnya
• Untuk Height dapat di ganti sesuai ukuran tinggi yang diinginkan. 100px, 150px, 250px, dan sebagainya

Adapun Cara Membuat Dan Menambahkan Scroll Pada Widget Blog Dengan tanpa Edit HTML Template adalah sebagai berikut.

Anda Hanya Perlu menambahkan sedikit kode berikut pada widget yang akan diberi scroll

<div style="overflow:auto; width:100%px; height:230px; padding:10px; border:1px solid #999999;">

"kode widget"

</div>

Silahkan anda sesuaikan sendiri dengan mengatur lebar(width:100%px)dan tinggi (height:230px;)Serta warnanya (#999999)atau apalah, sesuai keinginan anda.

Sekian - Cara Membuat Dan Menambahkan Scroll Pada Widget Blog

Semoga tutorial mengenai Cara Membuat Dan Menambahkan Scroll Pada Widget Blog ini bermanfaat, selamat mencoba,.

Baca Selengkapnya - Cara Membuat Dan Menambahkan Scroll Pada Widget Blog

Cara Menyembunyikan Atribut Blogger

Cara Menyembunyikan Atribut Blogger - Keberadaan sebuah atribut blog memang tidak begitu diperlukan dalam blog, oleh karena itu banyak para blogger yang menyembunyikannya. Sebenarnya ada beberapa bagian tertentu dari blog yang keberadaannya juga tidak begitu diperlukan.

Lalu, kenapa atribut blog ini hanya disembunyikan, kenapa tidak dihilangkan sekalian? Sobat tau kan kalau Google dan Blogger punya aturan yang disebut TOS. Bila sobat menghapus atribut blog ini bisa-bisa sobat melanggar TOS tersebut dan blog sobat kena banned dari Google. Gak mau kan pastinya? Hehe.. Tapi tutorial saya di bawah ini akan membuat atribut blog sobat seolah-olah hilang karena tidak terlihat sama sekali, tapi sebenarnya masih ada. Lantas, bagaimana Cara Menyembunyikan Atribut Blogger? Berikut ini caranya.

Cara Menyembunyikan Atribut Blogger :

1. Login ke dashbor blog sobat.
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
3. Cari kode berikut ]]></b:skin>

4. Letakkan kode di bawah tepat di atas kode no. 4 tersebut.

#Attribution1 {height:0px;visibility:hidden;display:none}

 5. Simpan template sobat.

Sekian - Cara Menyembunyikan Atribut Blogger

Semoga posting mengenai Cara Menyembunyikan Atribut Blogger ini bermanfaat.

Baca Selengkapnya - Cara Menyembunyikan Atribut Blogger

Cara Membuat Menu Melayang Di Sudut Blog

Cara Membuat Menu Melayang Di Sudut Blog - Setelah posting Tutorial Slide Panel Dengan Jquer Dan CSS3, sekarang saya akan bagikan tutorial Cara Membuat Menu Melayang Di Sudut Blog. Tentunya anda mungkin sudah tahu apa yang dimaksud menu melayang.

Adapun Cara Membuat Menu Melayang Di Sudut Blog kali ini adalah widget ‘melayang’ yang bisa diisi dengan menu berisi link-link sesuai keinginan. Di dalamnya sudah termasuk navigasi scroll to top/bottom of page (scroll ke bagian paling atas/bawah halaman web) ber-engine jQuery, dan juga tombol share Twitter dan Facebook (bila diinginkan).

Tutorial Cara Membuat Menu Melayang Di Sudut Blog ini saya temukan dari TSC blog, bagi anda yang ingin memasangnya di blog anda, silahkan, ikuti langkah berikut.

Cara Membuat Menu Melayang Di Sudut Blog :

Letakkan kade berikut di atas kode </body>

<!-- zFPmenu START --><div id='zfpm_div' style='display:none;'><div id='zfpm_upperBox'><!-- Place ads, text message, or anything here. --></div><ul id='zfpm_ul'><!-- Your menus start --><li class='dir'><a href='/'>YOUR MENU 1</a><ul><li class='dir'><a href='/'>YOUR SUBMENU 1.1</a><ul><li><a href='/'>YOUR SUB-SUBMENU 1.1.1</a></li><li><a href='/'>YOUR SUB-SUBMENU 1.1.2</a></li></ul></li><li><a href='/'>YOUR SUBMENU 1.2</a></li><li><a href='/'>YOUR SUBMENU 1.3</a></li></ul></li><li class='dir'><a href='/'>YOUR SUBMENU 2</a><ul><li class='dir'><a href='/'>YOUR SUBMENU 2.1</a><ul><li><a href='/'>YOUR SUB-SUBMENU 2.1.1</a></li><li><a href='/'>YOUR SUB-SUBMENU 2.1.2</a></li></ul></li><li><a href='/'>YOUR SUBMENU 2.2</a></li><li><a href='/'>YOUR SUBMENU 2.3</a></li></ul></li><!-- Your menus end --></ul></div><script type='text/javascript'>var zfpm_colorTheme = &#39;dark&#39;var zfpm_shareBox = &#39;no&#39;;</script><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script src='http://sagita-com.googlecode.com/svn/Menu-sudut.js' type='text/javascript'/><!-- zFPmenu END -->

Ket :
Ganti tulisan YOUR MENU, YOUR SUBMENU 2.1, dll dengan link-link yang ada pada blog Anda, contoh : 

<ul id='zfpm_ul'><!-- Your menus start --><li class='dir'><a href="http://www.sagitasoft.com/">Homepage</a><ul><li><a href='http://www.sagitasoft.com/2011/07/daftar-isi-sagita-com.html'>Daftar Isi</a></li></ul></li>

Setting/Variable.
Anda dapat mengubah tema warna dan berbagi pengaturan tombol visibilitas.

var zfpm_colorTheme = 'light';Mengatur warna tema untuk widget menu.Valid input: 'light' or 'dark'
var zfpm_shareBox = 'no'Show the Twitter ‘Retweet’, Facebook ‘Share’, and Facebook ‘Like’ buttons (using LinksAlpha’s widget) or not.Valid input: 'yes' or 'no'

Sekian - Cara Membuat Menu Melayang Di Sudut Blog

Semoga Tutorial mengenai Cara Membuat Menu Melayang Di Sudut Blog ini bermanfaat dan selamat mencoba..

Baca Selengkapnya - Cara Membuat Menu Melayang Di Sudut Blog