Catatan Blogger

Minggu, 26 Mei 2013

Memasang Artikel Terkait di Sidebar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Sebagian blogger suka meletakkan artikel terkait di bawah posting,namun sebagian juga ada yang ingin meletakkannya di samping atau di sidebar blog. Ini kan namanya juga orang punya selera yang tak sama,tapi yah terserah masing-masing yang punya blog.

Bagi anda yang ingin menu artikel terkait di sidebar,cara pasangnya ada beberapa langkah yang harus di buat dan biar cepat mulai saja langkah awal:

1. Masuk/login dulu,dan pilih blog anda (bila lebih dari satu). Pilih template > Pilih edit html dan carilah kode </head> kemudian anda kopi kode di bawah dan letakkan sebelum/di atas kode </head> ;

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

2. Berikutnya,perhatikan-anda cari lagi kode seperti di bawah;

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

3. Kemudian kopi kode dibawah dan anda sisipkan di atas </b:loop> ;

<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>

</b:if>

Nanti jadinya akan seperti ini;

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>

<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>

</b:if>

</b:loop>

</b:if>

4. Sampai di sini,silahkan anda save dulu template.

5. Pada langkah 5 anda tidak lagi di edit html,tapi silahkan anda pindah ke tata letak/element. Klik Add gadget/tambah element,klik javascript > Anda beri judul pada kolom judul (ingat ini penting) lalu letakkan kode di bawah dalamkolom javscipt dan simpan;

<script type="text/javascript">

removeRelatedDuplicates();

printRelatedLabels();

</script>

6. Langkah berikutnya agar menu artikel terkait hanya muncul bila halaman artikel dibuka tidak pada semua halaman (maksudnya menu artikel terkait itu akan tetap muncul walau di homepage/halaman utama). Lanjut lagi langkahnya.

Sekarang balik lagi masuk ke edit html blog anda,dan carilah kode seperti di bawah;

<b:widget id='HTML4' locked='false' title='Artikel Terkait Lainnya' type='HTML'>

<b:includable id='main'>



<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Pada langkah ini perhatikan benar-benar yang saya beri warna biru. Untuk kode itu kemungkinan tidak sama dengan blog anda (itu hanya contoh),jadi sesuaikan dengan blog anda. Yang anda harus lakukan adalah mengambil kode seperti/yang letaknya ada pada posisi kode yang saya beri warna biru untuk di letakkan pada kode langkah berikutnya.

Yang merah itu adalah judul gadget/element anda. Jadi itu juga sesuaikan dengan judl yang telah anda beri tadi waktu menambah element javascript.

7. Lalu cari lagi kode ]]></b:skin> letakkan kode di bawah tepat di bawah kode]]></b:skin> .,setelah kode yang BIRU sudah anda sesuaikan dengan yang ada pada blog anda.

<b:if cond='data:blog.pageType != "item"'>

<style>

#HTML4{display:none;}

</style>

</b:if>

8. Sekarang masuk pada langkah terakhir yaitu klik simpan template dan selesai. Dan cek ricek.....!

06.27 | 0 komentar

Sabtu, 25 Mei 2013

Dropdown Label Blog

Nah,langsung ke topik!Jika sebelumnya anda masih bingung seperti apa si Dropdown Labeltersebut?
Perhatikan gambar label dropdown dibawah ini,dari blog saya yang lain.

Cara Membuat Label Blog Berupa Dropdown.

Gimana?udah maksud khan label yang berupa/berbentuk dropdown? Ok!untuk membuatnya ikuti langkah-langkah berikut :

Pertama,pergi ke Dashboard,lalu pilih Tata Letak,kemudian kllik tab Edit HTML.
Jangan lupa contreng tulisan Expand Widget Templates,selanjutnya cari kode berikut:

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

Gunakan Ctrl+F untuk mempermudah pencarian,kode yang bercetak tebal diatas,hanya sebagai "patokan" aja agar mudah dalam pencarian.

Setelah ketemu,hapus kode tersebut,dan gantilah dengan kode di bawah ini:

<select onchange='location=this.options[this.selectedIndex].value;'>
<option>

Pilih Kategori

</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Tulisan "Pilih Kategori" bisa anda ganti sesuai keinginan,setelah itu,Simpan Template,Selesai,dan lihat hasilnya! :D

10.41 | 0 komentar

Membuat Widget Menu Per Label Dengan Efect TabView

Cara membuat widget menu berdasarkan label yang di poles dengan gaya tab view, Plus di dalam sub menu label sudah terpasang scroll. Di sini DCC (Dunia Corat-Coret) hanya memakai 5 tab view, sobat bisa mengurangi atau menambahkan tab view sesuai selera sobat.

Contohnya seperti gambar di bawah ini :

Kegunaannya :

tampilaanya menarik.
memangkas artikel yang udah terlalu banyak.

Cara membuatnya :

Login ke blog (bila anda belum login)
Klik "layout" atau "tata letak"
Klik "add a gadget" atau "tambahkan gadget"
Pilih "HTML/javascript"
Lalu masukan kode di bawah ini :

</div>
<div id="dd4" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
>



<div style="background-color: #6aa84f; border: 1px solid #6aa84f; height: auto; overflow: auto; padding: 5px; text-align: justify; width: auto;"><b>JUDUL LABEL SUBMENU 4a</b></div>

<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #6aa84f; font-family:julee; font-size:15px; font-color:#0000FF;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='https://amieng-code-download.googlecode.com/files/amieng%20menu%20perlabel.js'></script><ol>
<script src="http://duniacoratcoret.blogspot.com/feeds/posts/default/-/LINK LABEL SUBMENU 4a?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
<div style="background-color: #6aa84f; border: 1px solid #6aa84f; height: auto; overflow: auto; padding: 5px; text-align: justify; width: auto;"><b>JUDUL LABEL SUBMENU 4b</b></div>

<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #6aa84f; font-family:julee; font-size:15px; font-color:#0000FF;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='https://amieng-code-download.googlecode.com/files/amieng%20menu%20perlabel.js'></script><ol>
<script src="http://duniacoratcoret.blogspot.com/feeds/posts/default/-/LINK LABEL SUBMENU 4b?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

</div>
<div id="dd5" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
>



<div style="background-color: #6aa84f; border: 1px solid #6aa84f; height: auto; overflow: auto; padding: 5px; text-align: justify; width: auto;"><b>JUDUL LABEL SUBMENU 5a</b></div>

<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #6aa84f; font-family:julee; font-size:15px; font-color:#0000FF;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='https://amieng-code-download.googlecode.com/files/amieng%20menu%20perlabel.js'></script><ol>
<script src="http://duniacoratcoret.blogspot.com/feeds/posts/default/-/LINK LABEL SUBMENU 5a?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
<div style="background-color: #6aa84f; border: 1px solid #6aa84f; height: auto; overflow: auto; padding: 5px; text-align: justify; width: auto;"><b>JUDUL LABEL SUBMENU 5b</b></div>

<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #6aa84f; font-family:julee; font-size:15px; font-color:#0000FF;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='https://amieng-code-download.googlecode.com/files/amieng%20menu%20perlabel.js'></script><ol>
<script src="http://duniacoratcoret.blogspot.com/feeds/posts/default/-/LINK LABEL SUBMENU 5b?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

</div></td></tr></tbody></table>

selesai....Klik "simpan"

Keterangan :

kode yang berwarna orange adalah untuk merubah warna background tab dan warna list.
kode yang berwarna merah adalah untuk merubah judul label dan link label web anda.
kode yang berwarna kuning adalah untuk merubah judul tab.
bila ada yang kurang dimengerti silahkan bertanya sob....

10.23 | 1 komentar

Cara Membuat Artikel Tidak Bisa di Copy Paste 2

Apalah yang paling menjengkalkan hati seorang blogger selain ketika artikelnya di Copas ( salin ) tanpa seizinnya. Bayangkan saja sob, artikel yang dengan susah payah di ketik dengan bercucuran keringat dan menguras otak ( hehe.. berlebihan ya?? ) akhirnya harus ada duplikatnya tanpa se izin dari yang empunya artikel.
Meskipun tak sedikit yang tidak mempermasalahkan tindakan Copy paste artikel ini, namun yang namanya mencuri hasil karya tanpa ada ijinnya tetap saja dianggap sebagai tindakan kurang sportif.. sebetulnya saya sendiri tidak mempermasalahkn tindakan copy paste terutama yang lakukan di blog ini, asalkan sobat menyertakan link aktif artikel yang di copas sebagai sumbernya, kira - kira dengan cara seperti itulah kita bisa saling menghargai hasil ketikan jari sesama blogger. Berikut beberapa teknik anti Copas yang bisa saya share untuk sobat blogger.

Gunakan script berikut untuk meletakkan link sumber ( link source ) otomatis ketika di copas
Letakkan script berikut di atas kode <body> kemudian di save.

Catatan :
Ubah tulisan berwarna biru sesuai keinginan. misalnya "artikel bersumber dari"

Namun jika sobat blogger memang sama skali tak mentolerir tindakan ini atau memang tidak mau artikelnya sampai di duplikat orang lain, maka bisa sobat siasati dengan memasang 2 trik anti copas ( disable klik kanan ) berikut.

Membuat Artikel Tidak Bisa di Copas

1. Trik Pertama :

1. Klik rancangan -->Edit HTML
2. Cari dan ganti kode <body> dengan kode berikut

3. klik save

2. Trik Ke Dua :
Menonaktifkan klik kanan sekaligus mengeluarkan pesan peringatan seperti gambar berikut.

Caranya :
1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. masukkan kode dalam kotak yang di sediakan

catatan:
Ubah tulisan yang berwarna merah dengan pesan peringatan yang di inginkan.

3. klik save

Silahkan pilih yang mana yang di rasa lebih baik, apakah sobat memperbolehkan Copas tapi harus ada link sumbernya, atau sama sekali tidak ingin ada yang meng-copas artikelnya.

08.16 | 0 komentar

Tutorial Cara Agar Artikel Blog Tidak Bisa DI Copy Paste

Tutorial Cara Agar Artikel Blog Tidak Bisa DI Copy Paste. Copy paste, banyak para blogger yang benci dengan tindakan yang satu ini. banyak yang beranggapan bahwa kalau artikel kita di copy oleh blogger lain maka akan menimbulkan kerugian bagi si penulis artikel.

Nah untuk mengatasi hal tersebut banyak blogger yang menerapkan beberapa trik mulai dari memasang script anti klik kanan pada blog-nya dan dengan mengunci fungsi block pada artikel yang ada di blognya. Nah kali ini B-digg akan memberikan Tutorial Cara Agar Artikel Blog Tidak Bisa DI Copy Paste yang mungkin sedang anda perlukan untuk memproteksi artikel anda yang sering di copas.

Untuk langkah-langkah pembuatannya sangatlah mudah. Anda hanya perlu memasukkan kode java script berikut ini pada struktur template anda. dan berikut ini langkah-langkah-nya:

1.Log in ke Blogger.
2.Masuk ke template dan menuju ke edit HTML.
3.Centang kotak Expand Template Widget dan cari kode <head>.
4.Letakkan kode di bawah ini tepat di atas kode <head> :

<SCRIPT type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</SCRIPT>

5.Klik save template.

Nah sekarang cobalah pada blog anda dengan perubahan yang telah terjadi

08.14 | 1 komentar

Jumat, 24 Mei 2013

Template SEO Responsive 2013

Kumpulan Template SEO, Responsive, Terbaru dan Pilihan - Mengapa Desain Responsif menjadi hal yang sangat penting di tahun 2013? Orang-orang semakin memanfaatkan ponsel, tablet (perangkat layar kecil portable) mereka. Setiap gadget-gadget mereka berbeda sehingga kita sebagai pemilik situs haruslah membuat tampilan desain thema menjadi responsive. Desain responsif dari situs akan mengurangi 80% dari masalah yang sering di hadapi pada website di tahun 2013 ini. Jadi untuk itulah saya memberikan dan menulis mengenai Kumpulan Template SEO, Responsive, Terbaru dan Pilihan yang saya berikan untuk Anda.

Kumpulan Template SEO, Responsive, Terbaru dan Pilihan:

#1. Media Tech Blogger Template

DEMO | Download

#2. Responsive Blogger Template

DEMO | Download

#3. Sensational Blogger Template

DEMO | Download

#4. EasyNews Blogger Template

DEMO | Download

#5. DailyPost Blogger Template

DEMO | Download

#6. New Magazine Blogger Template

DEMO | Download

Maka, demikianlah artikel Kumpulan Template SEO, Responsive, Terbaru dan Pilihan semoga dapat membantu Anda untuk lebih paham. Terima kasih telah membaca artikel diatas.

23.09 | 0 komentar

Super SEO

Template yang ketiga adalah Super SEO buatan Kang Ismet, berbeda dengan template yang pertama dan kedua, template ini memiliki tampilan yang lebih elegant. Tampilannya juga sudah cukup lumayan bagus karena memiliki dua menu horizontal untuk list page dan satunya bisa kita edit semaunya. Untuk fitur dari template ini adalah :
- 2 Navigasi (di atas dan di bawah header)
- Social Networking
- Auto readmore with default thumbnail
- Breadcrumbs yang SEO friendly
- Related Posts / Artikel terkait
- Bookmark ready (facebook, twitter, google +, pinterest)
- 468x60 banner header
- Kategori 2 kolom
- Threaded Comments

Statistik blog demo:

Pagerank : 0

Alexa Rank : 266.706

Super SEO

DEMO - DOWNLOAD

21.39 | 0 komentar

Thesis SEO Blogger Template

Template ini dibuat oleh Reza Ilmi, dalam blognya yang beralamatkan blogjuragan[dot]blogspot[dot]com mengatakan bahwa template ini merupakan inspirasi dan hasil convert langsung dari Thesis SEO template. Aslinya template ini merupakan khusus template yang dibuat untuk engine Wordpress dan dibandrol dengan harga $87, Woow lumayan mahal yaa :D Untungnya saja udah ada versi blogspotnya dan gratis pula.
Beberapa fitur dari Thesis SEO Blogger Template adalah :
- SEO Friendly
- Visitor Friendly
- Dinamic heading (h1 pada header di index, dan h1 di judul post pada halaman posting)
- Dinamic metatag deskripsi dan keyword otomatis (metatag wajib untuk menghindari duplikat meta deskripsi & keyword)
- Quicklink ke kotak komentar
- Autoreadmore
- Tambahan beberapa Meta tag untuk mempermudah robot menjelajah blog
- Loading yang cepat
- Konsep minimalis & simple

Statistik blog demo:

Pagerank : 1

Alexa Rank : 383.104

Thesis SEO Blogger Template

DEMO - DOWNLOAD

21.38 | 0 komentar

Johny Wusss

Template ini bisa dibilang salah satu free template seo friendly yang paling populer di awal sampai pertengahan tahun 2013 ini. Template buatan maskolis ini sekarang sudah memiliki alexa rank dan pagerank yang tinggi untuk ukuran sebuah blog demo. Memang tampilannya masih sederhana, tapi kecepatan loadingnya sudah diatas rata-rata meskipun dalam koneksi internet yang lambat. Fitur dari template Johny Wusss ini adalah :
- Simple template blogger with elegant look
- Auto readmore without javascript
- Fast loading
- Stylish threaded comment
- SEO friendly and visitor friendly
- Sidebar toggle hide and show
- Navigation menu dropdown
- Ads ready and many more

Statistik blog demo:

Pagerank : 4

Alexa Rank : 115.604

Johny Wusss

DEMO - DOWNLOAD

21.37 | 0 komentar

Selasa, 11 Oktober 2011

Kelebihan Beralih Ke Premium Domain .com .org .net .info

Hallo apa kabar sahabat kucoba, sudah lebih dari 10 hari kang salman tidak melakukan update posting apa-apa di kucoba.com di karenakan sebuah masalah yang di hadapi blog ini cukup rumit, dimana inang kucoba.com di asksalman19.blogspot.com di hapus oleh blogger tepat di ulang tahun google 26 September 2010 Pukul 01.38 WIB.

Kejadian ini sempet membuat saya sedih selama 3 jam, perasaan tidak enak dan semuanya saya lampiaskan pada makanan disiang harinya. Otomatis selera makanpun jadi naik :biggrin:

haha. Semua ini berawal dari maraknya copy paste dan pembajakan konten di situs ini tanpa mengedit terlebih dahulu kata-kata yang kang salman buat. terlebih para pelaku auto blog yang memirror feed kucoba.com sampai saat ini kang salman sudah melist kurang lebih ada 14 auto blog yang membajak blog ini.

Padahal kang salman sudah membuat pengumuman di artikel "Jangan Asal Copy Paste" namun sepertinya hanya sedikit blogger yang berbaik hati mengedit kembali tulisan-tulisan yang di copy dari situs ini.
Bagi yang mecopy dan mengedit tulisan saya mengucapkan terima kasih, saya doakan semoga blog sobat semua berbuah hasil manis di masa yang akan datang.

Oke langsung saja ke topik, apa sih kelebihan beralih domain dari gratisan ke berbayar?
Menurut kang salman, berdasarkan pengalaman baru-baru ini, pada saat akun kita di hapus blogger, kita tidak akan buntung 100% sedikitnya kita memiliki beberapa persen amunisi untuk memulihkan blog mendekati kondisi pasca penghapusan.

Contoh:
Apabila domain kita gratisan, lalu di kemudian hari ada penghapusan masal, pada saat itu habislah blog kita tanpa kedipan mata raib. Kita tidak bisa merecovery sebuah blog di domain yang sama sehingga proses recoverypun hasilnya akan sia-sia, kecuali kita memiliki basis lain untuk mempromosikan blog baru kita secara network, contohnya viral marketing facebook dan twitter. Menurut kang salman hal ini bisa dilakukan apabila sekelas terselubung di matikan oleh blogger.
Lain halnya dengan blog kecil, saya rasa akan sulit.

Kesimpulannya:

Pada saat terjadi penghapusan kita tidak rugi 100% dengan catatan mempunyai backup data
Lebih profesional, dan masa depan monetaze lebih terbuka lebar
SEO untuk domain, apabila sebelumnya kita mengoptimasikan seo pada domain gratisan dan pada saat terjadi penghapusan atau banned blogger atau google maka tidak ada cahaya lain terlebih bila claim dan banding kita di tolak, semua upaya dan aktifitas SEO untuk domain gratisan kita terbuang percuma. Namun bila domain anda premium, saat sebuah akun di hapus, kita dapat mengalihkan ke akun lain dan memasangkan domain tersebut di blog yang baru, otomatis blog baru tersebut mempunyai kualitas SEO yang sama.
Yang terpenting dengan beralih ke domain berbayar akan membuat aset Anda lebih aman karena memiliki jaminan yang lebih baik dari pada domain gratisan.

15.25 | 1 komentar

Minggu, 09 Oktober 2011

Cara Memasukkan Daftar isi Blog Pada Menu Tab View blog Blogspot

Dari hasil survey yang saya lakukan sendiri, masih banyak sobat blogger yang kurang mengerti cara memasukkan daftar isi kedalam Menu Tab View dengan mengetikkan kata kunci CARA MEMASUKKAN DAFTAR ISI KE MENU BLOGSPOT. Jika anda termasuk salah satu dari sobat blogger blogspot yang sedang mencari tutorial cara mengedit dan memasukkan daftar isi blog pada menu tab view, berarti anda sedang membaca artikel yang anda cari hehe...

Pada artikel yang saya posting sebelumnya tentang cara membuat Menu Tab View Pada sidebar blog blogspot yaitu pada artikel INI, saya menuliskan kode seperti dibawah ini :

<div class="Page"><div class="Pad">

<ul>

<li>

DAFTAR ISI MENU 1.1

</li>

<li>

DAFTAR ISI MENU 1.2

</li>

<li>

DAFTAR ISI MENU 1.3 dst

</li>

</ul>

</div></div>

Untuk memasukkan Daftar isi blog ke dalam menu tab view, kode yang terlihat seperti gambar diatas yang harus diubah. Simak cara membingungkannya berikut ini :

Buka Artikel yang akan anda masukkan judulnya kedalam daftar isi Menu Tab View pada tab baru lalu Copy URLnya.

Buka kotak HTML/JavaScript Menu Tab View anda dengan mengklik EDIT jika anda mengubahnya dari halaman RANCANGAN.

atau anda juga bisa mengklik gambar TANG dan OBENG jika anda ingin mengeditnya langsung melalui blog anda.

Ganti tulisan DAFTAR ISI MENU 1.1 ( Kode yang berwarna merah ) pada contoh diatas dengan judul artikel blog anda.

Selanjutnya HIGHLIGHT kalimat judul blog anda seperti gambar disamping tulisan ini.

Klik Gambar Buat link yang terlihat pada gambar di samping tulisan ini :

Saat muncul jendela baru untuk memasukkan URL, hapus tulisan http:// lalu paste URL artikel anda yang telah anda copy sebelumnya pada langkan pertama lalu klik OK.

Judul blog yang anda highlight sebelumnya akan berubah menjadi seperti contoh dibawah ini :

Sebelum diberi link :

<li>
Cara Membuat Daftar Isi Blog dengan menggunakan Menu Tab VIew ( misalnya )
<li>

Setelah diberi link :

<li>

<a href="http://blogger-bugis.blogspot.com/2011/03/cara-membuat-daftar-isi-blog-dengan.html">Cara Membuat Daftar Isi Blog dengan menggunakan Menu Tab VIew</a>

</li>

Klik simpan pada kotak HTML/JavaScript Menu Tab View anda.

Untuk memasukkan daftar isi yang lain, lakukan hal yang sama pada kode DAFTAR ISI MENU 1.2 , 1.3, dan seterusnya.

Selesai.

12.51 | 0 komentar

Membuat Daftar Isi Blog dengan menggunakan Menu Tab VIew

Untuk memudahkan pengunjung blog mencari artikel, sebaiknya sediakan daftar isi blog di Sidebar, atau di atas postingan atau dimana saja sesuai keinginan anda. Ada banyak cara membuat daftar isi. Ada Daftar Isi otomatis, ada juga Daftar Isi Yang dibuat secara manual.

Sebelum memulai Tutorial Membuat Widget Menu Tab View di Blog, saya terangkan dulu mengenai MENU TAB VIEW, bagi anda yang masih asing dengan nama Widget ini.

MENU TAB VIEW adalah sebuah widget dengan 1 kotak dan beberapa Menu diatasnya. Dengan satu kotak, MENU TAB VIEW bisa menampung banyak Daftar Isi dengan adanya Scroll. Dengan demikian, ruang di sidebar blog bisa lebih Hemat. Selain itu, menu tab view bisa di modifikasi sesuai keinginan kita mulai dari mengubah besar kotak, mengganti warna, memberi background gambar, dll.

Masih kurang mengerti ??? Perhatikan gambar disamping tulisan ini atau langsung saja lihat LIVE DEMOnya di sidebar BLOGGERBUGIS yang berisi Daftar Isi Blog BLOGGERBUGIS. ( Kalau belum di ganti dengan widget lain )

Selain Daftar Isi Blog, Menu Tab View juga bisa diisi dengan widget lain (Widget dalam widget dong.. hehehe...) Contohnya bisa anda lihat pada FOOTER ( Bagian paling bawah ) BLOGGERBUGIS yang berisi MENU TUKERAN LINK, KONFIRMASI, LINK SOBAT dan BANNER SOBAT. Klik pada Menu Konfirmasi, maka anda akan melihat WIDGET Google Friend Connect dalam WIDGET Menu Tab View.

Jika ingin memasang Widget MENU TAB VIEW pada Blog anda, berikut Langkah – langkahnya :

Langkah PERTAMA

Copy kode dibawah ini ( Gunakan CTRL+C ) lalu letakkan pada Page Element ( Elemen Halaman ) blog anda.

</div>

<ul>

<li>

DAFTAR ISI MENU 1.1

</li>

<li>

DAFTAR ISI MENU 1.2

</li>

<li>

DAFTAR ISI MENU 1.3 dst

</li>

</ul>

</div></div>

<ul>

<li>

DAFTAR ISI MENU 2.1

</li>

<li>

DAFTAR ISI MENU 2.2

</li>

<li>

DAFTAR ISI MENU 2.3 dst

</li>

</ul>

</div></div>

<ul>

<li>

DAFTAR ISI MENU 3.1

</li>

<li>

DAFTAR ISI MENU 3.2

</li>

<li>

DAFTAR ISI MENU 3.3 dst

</li>

</ul>

</div></div>

<ul>

<li>

DAFTAR ISI MENU 4.1

</li>

<li>

DAFTAR ISI MENU 4.2

</li>

<li>

DAFTAR ISI MENU 4.3 dst

</li>

</ul>

</div></div>

</div></div></form>

<div style="font-size: 90%; text-align: left; text-shadow: 3px 3px 3px rgb(0, 0, 0);"><a href="http://blogger-bugis.blogspot.com" target="_blank" title="Klik Tab untuk melihat semua Daftar Isi Blog BloggerBugis">Daftar Isi Blog</a></div>

Jangan lupa Ganti tulisan DAFTAR ISI MENU dengan judul ARTIKEL anda.
Ganti tulisan "Ganti tulisan ini dengan title tab anda" dengan Title Tab Anda ( Title adalah tulisan yang akan muncul saat mouse menyentuh Link, dalam hal ini TAB MENU
Ganti tulisan "MENU 1"dengan Nama Tab yang anda inginkan, misalnya, BLOGGER, INTERNET, dll

Langkah KEDUA

Copy kode JavaScript dibawah ini :

<script src="https://sites.google.com/site/bloggerbugis/js/tabview-padakodehtml.js" type="text/javascript"/>

Paste dibawah kode ]]></b:skin

Kalau belum tahu dimana mencari kode ]]></b:skin , Baca 2. MENAMBAH / MENGHAPUS KODE HTML TEMPLATE di artikel INI

Selanjutnya COPAS ( Copy Paste ) Kode Berikut ini diatas kode ]]></b:skin

/* Menu Tab View Dari BLOGGERBUGIS

----------------------------------------------- */

div.TabView div.Tabs {

padding-top: 0px;

height: 24px;

overflow: hidden;

}

/* Menu Utama */

div.TabView div.Tabs a {

float: left;

display: block;

width: 85px; /*ukuran lebar tab menu*/

text-align: center;

height: 24px; /*ukuran tinggi tab menu*/

padding-top: 3px;

margin-right:2px; /*jarak antar tab menu*/

vertical-align: middle;

border: 2px solid #000000; /*warna border menu*/

border-bottom-width: 0;

font-family: "Trebuchet ms", Times New Roman, Serif; /*jenis huruf menu*/

font-size: 14px; /*besar huruf menu*/

font-weight: bold;

letter-spacing: 0px;

background-color: #000000; /*warna latar menu*/

color: #FFFFFF; /*warna huruf menu*/

-moz-border-radius-topleft:10px;

-moz-border-radius-topright:10px;

-webkit-border-top-left-radius:10px;

-webkit-border-top-right-radius:10px;

}

div.TabView div.Tabs a.Active {

background-color: #B40404; /*warna background menu aktif*/

color: #f2f2f2;

font-weight: bold;

}

div.TabView div.Tabs a:hover {

background-color: #f2f2f2; /*warna background menu hover*/

color: #B40404;

font-weight: bold;

}

/* Kotak Utama */

div.TabView div.Pages {

clear: both;

border: 2px solid #000000; /*warna border kotak utama*/

overflow: hidden;

background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig2A9q8B82tBCCMqX06juWIu-nqOO8sWZKN5xyzvxUXQ93S-yjWNQ2zLSW6zMXTvuBg0qmWlt7febSnQuegpIixt7En0dCdFAgthevkdFjA7VLxIETfLt0nXo0C6RzQwwWVB2U1SdB876G/"); /*background kotak utama*/

}

div.TabView div.Pages div.Page {

height: 100%;

padding: 0px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad {

padding: 10px 5px;

font-size: 12px; /*besar huruf kotak utama*/

}

Anda bisa menyesuaikan pengaturannya sesuai dengan keinginan anda dengan mengganti angka, kode warna, gambar background, dll pada tanda keterangan yang berwarna MERAH.
Untuk melihat kode warna HTML, anda bisa lihat DISINI
Tinggal klik warna yang anda inginkan lalu copy kodenya yang ada di bawah kotak KODE WARNA.

12.48 | 0 komentar

Catatan Blogger

Recent Posts

Recent Comments

Menu Blog

Favorit Saya

Trending Topic

Sponsored

Popular Posts

Arsip Blog

Teknologi

Minggu, 26 Mei 2013

Memasang Artikel Terkait di Sidebar

Sabtu, 25 Mei 2013

Dropdown Label Blog

Membuat Widget Menu Per Label Dengan Efect TabView

Cara Membuat Artikel Tidak Bisa di Copy Paste 2

Tutorial Cara Agar Artikel Blog Tidak Bisa DI Copy Paste

Jumat, 24 Mei 2013

Template SEO Responsive 2013

Super SEO

Thesis SEO Blogger Template

Johny Wusss

Selasa, 11 Oktober 2011

Kelebihan Beralih Ke Premium Domain .com .org .net .info

Minggu, 09 Oktober 2011

Cara Memasukkan Daftar isi Blog Pada Menu Tab View blog Blogspot

Membuat Daftar Isi Blog dengan menggunakan Menu Tab VIew

Trending Topic

Test Footer

Misteri

Mengenai Saya

Total Tayangan Halaman