Membuat daftar isi blog dengan tampilan menu acordion

Tips dan triks blog yang tidak pernah ada habisnya, hehe. Sobat, kali ini saya ingin berbagi satu lagi tips dan triks blog yaitu bagaimana membuat daftar isi blog dengan tampilan menu acordion. Widget daftar isi model ini dibuat oleh mas Abu Farhan.

Nah, tampilan daftar isi blog seperti ini bisa sobat lihat demo berikut.

LIVE DEMO

Mengapa harus menggunakan daftar isi? saya rasa dengan menggunakan daftar isi maka pengunjung sobat bisa mengetahui apa saja isi-isi atau konten-konten blog sobat.

Berikut langkah - langkah membuat daftar isi menu acordion :

1. Seperti biasa, login ke dashboard blog sobat.

2. Postingan / buat entri baru / menggunakan halaman --> lalu copy code dibawah pastekan pada halaman posting. Gunakan mode edit HTML (lihat gambar).

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js">
</script>
<script src="http://www.masterendi.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript">
</script>

Keterangan :

• Ganti tulisan www.masterendi.com dengan alamat blog sobat.

3. Publish / terbitkan entri.

Cara Membuat chatBox atau shoutmix Berada di samping

Chatbox atau shoutmix adalah widget terpopuler bagi sebagian besar blogger. Tips dan triks blog yang akan kita bahas kali ini adalah bagaimana cara Membuat chatBox atau shoutmix Berada di samping blog kita.

Cara membuatnya sobat bisa mengikuti langkah-langkah sederhana berikut :

1. Sobat harus memiliki code chatbox atau shoumix terlebih dahulu, baca cara membuat chatbox disini.

2. Sobat login ke dashboard blogger.com --> Rancangan --> add gadget --> pilih yang 'HTML/JavaScript'

3. Copy Code berikut :

* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i683.photobucket.com/albums/vv193/vebyo/Guest3.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
PASANG SCRIPT CHATBOX SOBAT DISINI
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Keterangan :

Sobat ganti PASANG SCRIPT CHATBOX SOBAT DISINI dengan script chatbox sobat.

 

4. Save, lihat hasilnya.

Cara mudah memasang tombol like facebook dipostingan

Tips dan triks blog hari ini adalah Cara mudah memasang tombol like facebook di atas atau bawah postingan. Tombol like facebook adalah salah satu cara yang efektif juga untuk mempromosikan artikel blog sobat kepada teman-teman sobat di facebook. Nah, kalau seandainya tombol like tersebut di klik oleh user lain maka akan tersebar juga di akun facebook user tersebut.

Tips sederhana agar tombol like dklik user adalah dengan membuat konten yang berguna bagi user sobat tersebut, saya yakin dengan senang hati user tersebut membagi artikel sobat.

Jadi, berikut cara mudah memasang tombol like facebook dipostingan :

1. Login ke dashboard blog sobat

2. Masuk ke menu Rancangan --> Edit HTML

3. cari kode <data:post.body/>

4. Lalu copy kode dibawah ini dan letakkan diatas <data:post.body/> jika ingin tombol like diatas postingan sobat atau dibawah <data:post.body/> jika ingin meletakkan tombol like dibawah postingan.

 <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' height='30' scrolling='no' style='border:none; overflow:hidden; '/>

 Keterangan :

• tampilan standar seperti ini :

  

• Tampilan  button_count

 

•  Sobat pilih tampilan icon mana yang sobat mau dengan mengganti code standard
• Gunakan Light jika template sobat backgroundnya putih, atau dark jika hitam.
  

5. Save template sobat..

Bagaimana cara pasang widget tv online diblog

Menyajikan berbagai fitur diblog memang menjadi daya tarik tersendiri bagi sebagian blogger. Nah, fitur sederhana yang ingin saya bagikan kali ini adalah Bagaimana cara pasang widget tv online diblog.

Widget TV online bisa sobat pasangkan di postingan atau di sidebar blog. Untuk memasang di postingan langkah - langkahnya sebagai berikut :

1. Login ke dashboard blog --> Entri baru, pilih mode 'edit html'

2. Copy dan paste code berikut pada postingan tersebut.

<embed align="top" allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#ffffff" devicefont="false" height="860" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" scroll="auto" src="http://id.imediabiz.com/MivoTV.swf?r=%27%20+%20Math.round%28Math.random%28%29%20*%2099999%29%20+%20%27" type="application/x-shockwave-flash" width="100%" wmode="transparent"></embed>

3. Jika sudah Terbitkan Entry sobat dan selesai..


Untuk memasang widget TV online disidebar :

1. Login --> Rancangan --> Add Gadget --> pilih HTML/JavaScript

2. Copy lalu paste code berikut :

<embed align="top" allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#ffffff" devicefont="false" height="860" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" scroll="auto" src="http://id.imediabiz.com/MivoTV.swf?r=%27%20+%20Math.round%28Math.random%28%29%20*%2099999%29%20+%20%27" type="application/x-shockwave-flash" width="100%" wmode="transparent"></embed>

3. Save, lihat hasilnya..

Cara membuat menu dibawah header blog Versi 2

Menu dibawah header blog versi 2 ini ada contohnya seperti blog masterendi.com ini. Pada menu yang versi 2 ini kelebihannya adalah ketika pointer mouse diarahkan maka akan tampil menu-menu lainnya.

Oke sob, mari kita bahas :

1. Login ke blog sobat klik Menu rancangan >> Edit HTMl

2. Beri centang pada “Expand Widget Templates ”

3. Lalu sobat cari kode ]]></b:skin> kemudian ganti dengan kode dibawah :

 #catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUXL8NZOl3mbhn2COxV7IZJYeOJdNy4-nC2niPRehafOSPEi8ULLs0yD9gHP_yRBB2WCm1oHS3fRwDFa6uEBaTbxgG-dwOi1c1pVki_oe_ESJnr_v6WIuZZQEZC0D6cXIJjKqxPcSnlFCh/s1600/2.gif) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu27k2typzGQ_GOD2MzxuMX3aBGBlqT3gFZlBs7g29JI9WFi56XegMEPs6dDoAY3IpPPnvsPvcSxangoJVelhiRgub7pZtNv05uW_e1hUgi2Ig5SIGArUxvy81TwbyyGskX8eOPFdr1Kw-/) repeat-x;
height:33px;
}

#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}

#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBjOb3hB4uxMRmtuyngDMvuHkdT76-yaHGhzdgQBPwE5DyIBY5jWgd34BEto0h7hwQTeaxC6JJ1964Tf5eo3KBfzy8FpHB1C1uSP6nyhh9DaJphdmEJGva6-mfXmPt4s6IL9dAMEfiZV5n/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;

}

#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBjOb3hB4uxMRmtuyngDMvuHkdT76-yaHGhzdgQBPwE5DyIBY5jWgd34BEto0h7hwQTeaxC6JJ1964Tf5eo3KBfzy8FpHB1C1uSP6nyhh9DaJphdmEJGva6-mfXmPt4s6IL9dAMEfiZV5n/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}

#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#catmenu li li {
}

#catmenu li ul a {
width: 140px;
}

#catmenu li ul a:hover, #catmenu li ul a:active {
}

#catmenu li ul ul {
margin: -34px 0 0 170px;
}

#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}

#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}

#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

]]></b:skin>

4.  Lalu sobat cari kode  <div id='content-wrapper'>

5. copy kode dibawah pastekan dibawah kode tersebut.

 <div id='catmenucontainer'>
<div id='catmenu'>

<ul>
<li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
</ul>


</div>
</div>

<div class='clear'/>

 Keterangan :
Edit Your-Link-Here,Link-Title, dan Link-Name dengan link dan title link yang sobat inginkan.
untuk kode yang berwarna pink adalah menu tanpa anak menu (tanpa dropdown) , sedangkan orange dan merah adalah menu dengan dropdown.

6. Jika sudah sobat SAVE template lalu lihat hasilnya..

Jika sobat tidak menemukan kode yang dicari berarti Cara ini tidak berlaku untuk template yang sobat gunakan... tapi tetap have fun sobat.. :)

Cara membuat menu dibawah header blog Versi 1

«

»

Membuat menu header blog itu sangat mudah, kita hanya perlu menambah beberapa kode. Contoh menu itu adalah Home / Beranda / Depan / Halaman utama , Menu Contac, menu Profile, menu Disclaimer, dan menu-menu lain yang ingin sobat buat. Manfaatnya adalah mempermudah user / pengunjung blog bernavigasi di blog kita, sehingga memperbesar pageview.

Nah, menu-menu diatas tergantung kebutuhan sobat, jika sobat merasa penting tidak salah kalau mencoba menggunakan cara dibawah ini, namun yang perlu diperhatikan agar berhasil adalah layout blog sobat harus sama atau mirip dengan template yang saya gunakan.

Langkah-langkah dibawah sudah saya uji coba di blog DEMO saya, dan berhasil. Sebelum memulai langkah-langkah dibawah backup terlebih dahulu template blog sobat.

Langkah - langkah membuat menu dibawah header blog adalah :

1. Masuk ke dashboard Blog sobat, lalu ke menu Rancangan >> Edit HTML,  centang ' Expand Template Widget'

2. Cari kode seperti dibawah atau cari yang mirip (CTRL+F , cara cepat untuk mencari kode).

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='x-Demo (Header)' type='Header'>
<b:includable id='main'>

ganti maxwidgets='1' menjadi 2 atau lebih dan showaddelement='yes'>

3. Jika sudah selanjutnya sobat cari kode ]]></b:skin>

4. Hapus kode tersebut dan ganti dengan kode dibawah ini.

a.navigation {
background: #3333ff ;
color: #ffffff ;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

]]></b:skin>

Keterangan :

• Perhatikan kode yang di cetak tebal, untuk kode merah adalah warna background
• Kode warna biru adalah warna tulisan
• Silahkan diganti dengan warna yang sobat inginkan. KLIK Disini untuk mengetahui kode warna HTML.

5. Save template lalu klik Elemen Laman atau klik rancangan.

6. kemudian klik tambah gadget >> pilih HTML/JavaScript

7. Copykan kode berikut kedalam kotak tersebut

<a href="http://www.masterendi.com " class="navigation">HOME</a>
<a href="http://www.masterendi.com/p/rekomendasi.html " class="navigation">CONTACT</a>
<a href="http://www.masterendi.com/p/buku-tamu.html " class="navigation">BUKU TAMU</a>
<a href="http://www.masterendi.com/2011/01/links-sahabat-master.html " class="navigation">LINKS</a>

Keterangan : Ganti yang dicetak tebal merah dengan URL menu, dan warna biru adalah nama menu.

8. SAVE lalu lihat hasilnya..

LIHAT DEMO

Cara membuat menu versi horizontal

Cara membuat menu versi horizontal

Pada kesempatan kali ini saya ingin postingkan cara membuat menu versi horizontal di bawah header,seperti yang ada di blog saya ini, mungkin diantara para sobat blogger ada yang blum tahu bagaimana membuat menu….jawabannya sangat mudah sekali. Langsung aja kita ke TKP hehehe…

Langkah yang harus anda mulai:

1. masuk blogger sobat
2. pilih rancangan
3. pilih edit laman
4. pilih tambah gadget
5. pilih fitur HTML/Javascript

6. copy paste code scrip di bawah ini

<style type="text/css">

       #navright {

              width: 200px;

              font-size: 11px;

              float: right;

              margin: 0px;

              padding: 6px 5px 0px 0px;

              }

          #navright a img {

              border: none;

              margin: 0px;

              padding: 0px;

              }

</style>

<div id="tabshori">

<div id='navleft'>

<ul>

<li><a href="http://ageboy.blogspot.com"><span>Home</span></a></li>

<li><a href="http://ageboy.blogspot.com"><span>Download</span></a></li>

<li><a href="http://ageboy.blogspot.com/search/label/Bisnis"><span>Bisnis</span></a></li>

<li><a href="http://ageboy.blogspot.com/search/label/Bisnis%20online"><span>Bisnis online</span></a></li>

<li><a href="http://ageboy.blogspot.com/search/label/Tips%20ngeblog"><span>Tips ngeblog</span></a></li>

<div id='navright'>

<form action="http://ageboy.blogspot.com/search" class="cariform " method="get">

<input class="carifield" onblur="if (this.value == '') {this.value = 'Cari artikel...';}" onfocus="if (this.value == 'Cari artikel...') {this.value = '';}" type="text" value="Cari artikel..." /><input class="caributton" type="button" value="cari" /></form>

</div></ul>

</div>

<!-- akhir bg_nav --></div>

Read more: http://ageboy.blogspot.com/2011/06/cara-membuat-menu-versi-horizontal.html#ixzz1kohc4cW1

Cara membuat Menu Multi Kolom

Cara membuat menu multi kolom pada blog Pada blog tutorial blogtegal kali ini akan membahas tentang membuat menu multi kolom, yang mana walaupun trik ini sudah lama dan sudah banyak bertebaran di maya internet, namun tak ada salahnya kalau blog tutorial blogtegal akan menulisnya kembali. Mungkin saja para newbie belum ada yang tahu dan kebetulan nemu di blogtegal ini.
Menu Multi Kolom ini banyak fungsinya, yang mana fungsi utama di ciptakannya multi kolom ini yakni memampatkan widget-widget ke dalam 1 menu atau menggabungkan beberapa widget ke dalam 1 widget melalui menu multi kolom.
Biasanya menu ini di ěsi dengan daftar link blog, recent comment, dll sesuai kehendak si pemilik dan pembuat blog. Dan yang pasti menu ini menhemat space (ruang) blog pada sidebar.
Contoh tampilan dari Menu Multi Kolom atau Menu Multi Tab seperti gambar di bawah ini:


Gimana, apa kamu tertarik untuk membuatnya? Jika ya, mari kita lakukan experimen-nya Ikuti tutorialnya yah jangan saling mendahului, kalau mau mendahului lewat lajur kanan

• Login ke dashboard blog kamu.
  
• Pilih Rancangan »» Edit HTML
  
• Download template lengkap dulu untuk berjaga-jaga kalau terjadi kesalahan.
  
• tandai pada Expand widget template.
  
• kemudian tempatkan script berikut sebelum kode ]]></b:skin>
  

  div.TabView div.Tabs { height:24px; overflow:hidden;}
  div.TabView div.Tabs a { float:left; display:block; width:90px; text-align:center; height:24px; padding-top:3px; vertical-align:middle; border:1px solid #ddd; border-bottom-width:0; text-decoration:none; font-family:verdana,arial,sans-serif; font-weight:bold; color:#000;}
  div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color:#fff;}
  div.TabView div.Pages {clear:both; border:1px solid #ddd; overflow:hidden; background-color:#fff;}
  div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden;}
  div.TabView div.Pages div.Page div.Pad {padding:3px 5px;}

  
  Sesuaikan kode warnanya dg blog kamu, untuk melihat kode warna bisa di lihat pada postingan tentang Kode-kode warna HTML
  
• masukan script pemanggil berikut sebelum kode </head>
  

  <script src='http://blogtegal.googlecode.com/files/tabview.js' type='text/javascript'/>

• Terakhir klik SIMPAN

Kemudian langkah berikutnya yakni menambahkan widgetnya pada sidebar blog. Pada Rancangan element klik ''Tambah Gadget'' dan pilih widget ''HTML/Javascript'' dan masukan kode berikut kedalamnya:

<form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width:350px;"> <a>Sub judul 1 </a> <a>Sub judul 2 </a> <a>Sub judul 3 </a> </div> <div class="Pages" style="width:350px; height:260px;"> <div class="Page"> <div class="Pad"> Link 1 di menu 1 Link 2 di menu 1 Link 3 di menu 1 </div> </div> <div class="Page"> <div class="Pad"> Link 1 di menu 2 Link 2 di menu 2 Link 3 di menu 2 </div> </div> <div class="Page"> <div class="Pad"> Link 1 di menu 3 Link 2 di menu 3 Link 3 di menu 3 </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize ('TabView'); </script>

Terakhir klik SIMPAN.

Cara Membuat Menu Horizontal Blog Pakae Gatget

Menu Horizontal Blog biasanya dibuat para Blogger bertujuan untuk memudahkan pengunjung Blog saat berkunjung ke Blog tersebut dan Membuat Blog agar terlihat lebih Profesional. Dari segi bentuk, Menu Blog terbagi atas 2 macam, ada yang berbentuk Menu Blog Horizontal dan ada Menu Blog Vertikal.  Menu Blog Horizontal bentuknya menyamping dari sebelah kanan ke sebalh kiri. Sedangkan Menu Blog Vertikal bentuknya dari atas ke bawah. untuk Cara Membuat Menu Horizontal di Blog bisa dilakukan dengan berbagaim macam cara, diantaranya bisa dengan langsung mengedit HTML Template Blog atau dengan menambahkan Gadget Laman. Bagi pengguna blogger atau blogspot berikut Cara Membuat Menu Horizontal pada Blog tanpa harus mengedit HTML Template blog:

1. Buka halaman Blogger  dan silahkan “Log in”
2. Pilih “Rancangan”
3. Pada tab “Element Laman” klik “Tambah Gadget”

4. Langkah selanjutnya pilih Gadget bernama “Laman”

  

5. Setelah memilih Gadget Laman maka akan muncul Menu “Konfigurasikan Daftar Laman”
6. Untuk kolom “Judul” dan “Home” bisa diganti sesuai selera

7. Kemudian pindahkan Menu Lama yang tadi dibuat ke bawah header blog

8. Tutorial selanjutnya Cara Menambahkan Menu Laman yang lainnya, misalnya seperti Menu di Blog VaLven ada terdapat Menu “Contact” – “Sitemap” – “Exchange” – “Blogrool”
9. Untuk menambahkan Menu Laman klik “Postingan” pilih “Edit Laman”

10. Klik “Laman Baru” dan tulis Judul Laman beserta isinya seperti membuat postingan blog biasanya