Postingan Blogaul kali ini akan membahas trik mengenai mempercepat loading blog dengan menggunakan script/kode tertentu. Pada postingan sebelumnya, saya juga membahas artikel mengenai cara mempercepat loading blog yang hampir sama tapi agak sedikit rumit karena menggunakan berbagai cara/proses-proses tertentu. Silahkan dibaca bila tertarik. Nah, di postingan kali ini saya akan berbagi trik yang yang sama tapi sedikit lebih simple dan mudah karena hanya menggunakan sebuah script yang disebut dengan script lazyload. Dengan memasang script ini di blog ini di blog kita, loading blog memang sedikit lebih ringan karena script ini akan membantu meringankan gambar-gambar yang ada di blog sobat sehingga loading nya lebih cepat. Dengan loading blog yang cepat, tentu akan membuat pengunjung senang dan betah begitu juga dengan sobat sendiri. Bagi yang tertarik untuk memasang nya, silahkan ikuti langkah-langkah di bawah. Berikut cara menambah kecepatan loading blog dengan script ampuh:
NB: Lazyload script ini tidak bekerja pada semua blog. Ada kalanya blog yang dipasangi memang bisa bertambah cepat loading nya, tapi ada kala nya juga malah bertambah berat. Oleh karena itu sobat perlu mencoba dan mengamati nya dulu. Bila memang bisa bermanfaat buat blog sobat berarti silahkan dipasang, tapi kalau malah menjadikan loading blog tambah berat silahkan dihapus saja.
Sekian postingan mengenai cara mempercepat loading blog dengan script yang bisa saya share kali ini. Semoga bermanfaat buat semua.
Cara Membuat Post Display Grid Dan List jarang orang yang membuat tutorial ini karena saya sendiri suka sulit untuk menemukannya di google. kebanyakan semua dalam bahasa ingris. dan kesempatan kali ini saya akan mencoba membuatnya semudah mungkin. sebelumnya kita akan mengetahui dulu apa yang di maksud dengan grid dan list. penggunaan ini untuk menambahkan style pada readmore otomatis dengan javascript plus tumbnail. tombol switch ini hanya untuk mempercantik blog anda dan bisanya Display Grid Dan List ini di gunakan untuk blog dengan konten gallery, template blog, iklan, pemasaran produk, info movies, download software dan lainnya.
GRID: Posisi default saat membuka blog maka yang akan active adalah pada display grid. LIST : untuk melihat artikel dengan keternagan serta gambar kita hanya cukup mengklik tombol list.
Artikel Grid : Jika pengunjung buka blog kita maka pada halaman depan blog secara default yang akan tampil adalah grid dengan artikel gambar. ini akan cocok sekali jika blog anda berupa blog dengan mengutamakan sebuah gambar. Artikel List : pengunjung akan sangat terbantu dengan list ini agar pengunjung tidak perlu secara langsung membuka artikel blog untuk melihat keterangan. cukup klik timbol list maka keterangan akan muncul. seperti pada gambar di atas.
Cara Memasang Display Grid Dan List Pada Template
1. masuk bagian edit template. centang bagian Expand Widget Templates .
2. Pasang HTML : cari kode seperti ini <b:section class='main' id='main' showaddelement='yes'> . ket : kode tersebut adalah widget post cari yang mirip saja. jika ketemu maka simpan HTML berikut di atas kode tadi.
keterangan : perhatikan yang di garis bawahi (no.5). ganti sesuai yang anda inginkan.
2. Sisipkan class="bar" : cari kode <div class='post hentry uncustomized-post-template'> atau <div class='post hentry'> jika sulit menemukannya gunakan ctrl+F untuk mempercepat. biasanya kode tersebut lebih dari satu. sisipkan pada semua kode tersebut. jika ketemu maka sisipkan bar pada atribut class maka hasilnya akan seperti ini.
<div class='post bar hentry uncustomized-post-template'>
atau
<div class='post bar hentry'>
3. Pasang Javascript dan jQuery. cari kode </head>.
dan simpan kode berikut di atasnya.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://css3-tutsplus.googlecode.com/svn/trunk/personal/switch-display.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/**
* jQuery switch
*
* active class active pada switch grid atau list
* update by denddy gustiana
* http://under-88.blogspot.com/
* https://plus.google.com/109783772548428705949
*
*/
jQuery(document).ready(function () {
var $box=jQuery(".post"),
$bar=jQuery("a.bar_view");
$dat=jQuery("a.dat_view");
$dat.click(function () {
$box.removeClass("bar");
jQuery(this).addClass("active");
$bar.removeClass("active");
jQuery.cookie("dat_style", 0);
return false
});
$bar.click(function () {
$box.addClass("bar");
jQuery(this).addClass("active");
$dat.removeClass("active");
jQuery.cookie("dat_style", 1);
return false
});
if(jQuery.cookie("dat_style")==0) {
$box.removeClass( "bar");
$dat.addClass("active")
} else {
$box.addClass("bar");
$bar.addClass("active")
}
});
//]]>
</script>
Catatan : script yang di garis bawahi di atas adalah plugin jquery versi 7. jika pada template anda sudah terpasang maka jangan di pasang kembali
4. Pasang CSS : karena grid ini hanya di tampilakan pada bagian home dan menggunakan tag conditional maka kita akan menaruh css di bawah ]]></b:skin> .
Sistem atau Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery ini sebenarnya sama saja dengan dengan Cara membuat Popular Post dengan Thumbnail Horizontal. Hanya saja pemasangannya tetap di sidebar. Atau bisa juga di footer yang telah di bagi menjadi 2 atau 3 kolom.
Pada tutorial ini admin menggunakan sidebar dengan lebar 300px. Jika anda memiliki lebar sidebar yang berbeda, mungkin anda harus melakukan sedikit perubahan agar lebih serasi dengan template.
Berikut ini adalah Langkah-langkah untuk Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery:
1. Masuk kedashboard => Template => Edit Html.
2. Cari kode ]]</b:skin>
3. Letakkan kode CSS dibawah ini di atasnya.
.sidebar .popular-posts ul li img:hover, .cross2 ul li img:hover {-moz-transform:scale(1.1) rotate(-0deg); -webkit-transform:scale(1.1) rotate(-0deg); -o-transform:scale(1.1) rotate(-0deg); -ms-transform:scale(1.1) rotate(-0deg); transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:1;border-radius: 50%;}
.sidebar .popular-posts ul{margin:0;padding:2px;}
.PopularPosts .widget-content ul li {padding: .1em 0;}
.sidebar .popular-posts ul li {margin: 0 3px;background:none;float:left;width:91px;list-style-type:none;border:none;line-height:0px;}
.sidebar .popular-posts ul li img {-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease;width: 85px;height: 85px;opacity: 0.7;opacity:0.7;filter:alpha(opacity=70);background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;padding:4px;}
.PopularPosts .item-thumbnail {margin: 0;}
.sidebar .PopularPosts .item-title {display: none;}
4. Save template.
5. Kembali ke Dashboard => Design => Add Element.
6. Pasang popular post bawaan blogger dibagian sidebar. Bagi yang telah memasangnya, settingan yang "harus" dilakukan adalah seperti gambar dibawah ini.
1. Hilangkan ceklist pada snippet.
2. Atur jumlah postingan tampil menjadi 3, 6 atau 9.
Siapa yang tidak menginginkan alexa ranknya terus meramping ? pasti semua blogger menginginkannya bukan ? ya ! sebab alexa rank yang ramping atau dengan digit yang kecil menandakan bahwa blog tersebut memiliki rangking yang bagus secara global maupun negara. Hal ini dikarenakan alexa memberikan sebuah layanan yang mana membuat suatu rangking sebuah blog secara global (dunia) maupun negara. Jadi jelas bagi blog yang beralexa ramping menandakan rangkingnya sangat bagus. Akan tetapi untuk membuat rangking alexa menjadi ramping tidak mudah loh,,, ada yang perlu dilakukan dan di usahakan. Berikut cara untuk Menurunkan Alexa Rank
Cara Menurunkan / Mengecilkan Digit Alexa Rank
1. Pasang widget alexa di blog anda untuk memantau keadaan blog anda.
Cara paling mudah dan murah meriah adalah dengan Blogwalking dan meninggalkan komentar di Blog-blog dengan Alexa Rank yang lebih tinggi dari Blog anda .
2. Daftar Blog ke Search Engine Terutama Google, Yahoo dan MSN
Ini dilakukan agar blog kita cepat terindek di mesin pencari terutama yang sudah terkenel dan besar seperti Google, Yahoo, MSN dll, baru setelah itu ke search engine lainnya.
3. Daftar Blog ke Technorati
Technorati merupakan salah satu direktori blog yang sudah terkenal, bia juga berfungsi sebagai blogsearch, tags aggregator, online bookmarks, juga bisa mengetahui blog mana saja yg memasang link blog kita..
4. Cari Backlink
Cari backlink sebanyak-banyaknya dan berkualitas sebaiknya sih sesuai kategori blog, karena google menilai berdasarkan kuantitas dan kualitas link, tapi akhirnya mana saja yang mau bertukar link.. saya terima.
5. Bookmark Blog Sebagai Homepage Browser
Bookmark blog sebagai homepage di komputer yang sering digunakan untuk browsing ini juga baru kemarin saya lakukan di komputer rumah sebenarnya sih ini bisa juga dikantor, diwarnet atau dimana saja, makin banyak tentu semakin baik.
6. Update blog 2 hari sekali , 1 minggu 2 kali atau 1 bulan sekali . bila perlu setiap hari justru lebih bagus lagi.
7. Tulis artikel Tentang Alexa
Tulis artikel tentang Alexa misalnya seperti yang sedang sobat baca tentang Cara Meningkatkan Alexa Rank ini dan ajak para pembaca untuk men-download Alexa Toolbar. Jangan lupa saat membuat artikel tentang Alexa, selalu gunakan label atau kategori dengan keyword : Alexa, Alexa rank, Alexa traffic rank, Rangking Alexa, dsb. Intinya ada kata ' Alexa '.
8. Melakukan Ping
Lakukan ping secara berkala , saya baru lakukan ini dua kali , ping ini untuk merefresh blog kita di data base mesin pencari.
9. Minta teman untuk mereview dan merating profil blog Anda di Alexa. Memang belum ada bukti, namun mungkin saja cara ini berguna.
Panduan Blogger untuk blogger pemula. Panduan blogger yang akan membahas dan menjelaskan tentang Panduan Cara Membuat "Related Post" di blog. Related post atau Artikel Terkait pada blogmempunyai peran penting untuk blog itu sendiri dan akan memudahkan para pengunjung blognya untuk menemulan artikel yang mungkin mereka anggap menarik. Dalam hal ini penggunaan Related Post atau Artikel Terkait memang membantu pengunjung blog dan juga membantu pemilik blog itu sendiri, sehingga setiap artikel / postingan dapat dimungkinkan untuk dibaca oleh pengunjung.
Berikut Panduannya / langkah" nya :
Login ke akun blog sobat
Setelah login, klik EDIT HTML
Centang "Expand Widget Templates"
Sekarang cari kode </head> ,untuk pencarian termudah silahkan sobat tekan Ctrl + F pada keyboard komputer sobat.
Copy dan Paste kode di bawah ini persis diatas kode </head> :
<!--Related Posts with thumbnails Scripts and Styles Start--><!-- remove --><b:ifcond='data:blog.pageType == "item"'><styletype="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style><scripttype='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4bG5dHiikA89ioPDcDvhLlV9MfHQ4Vj7-kr6ehZFamCGVQPXhzFC8huTU8L-HVpbkuxtHZTRPDp8U4SmccMObxA9Hl4QbZH1fFcfzPqegsCoY793fLVn9qIuK2kQPAwbRSSGpITC9dug/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script><scriptsrc='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js'type='text/javascript'/><!-- remove --></b:if><!--Related Posts with thumbnails Scripts and Styles End-->
8. Langkah selanjutnya sobat cari kode :
<divclass='post-footer-line post-footer-line-1'>
9. Cara mencarinya sama seperti panduan no. 4
10. Jika sobat tak menemukan kode tersebut,silahkan sobat cari kode:
<pclass='post-footer-line post-footer-line-1'>
11. Copy dan Paste kode di bawah ini dan letakkan di bawah kode di atas
<!-- Related Posts with Thumbnails Code Start--><!-- remove --><b:ifcond='data:blog.pageType == "item"'><divid='related-posts'><b:loopvalues='data:post.labels'var='label'><b:ifcond='data:label.isLast != "true"'></b:if><scriptexpr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"'type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script></div><divstyle='clear:both'/><!-- remove --></b:if><b:ifcond='data:blog.url == data:blog.homepageUrl'><b:ifcond='data:post.isFirstPost'>
<ahref='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->
Bagaimana sudah jelas bukan tentang kolom postingan terpisah? kalau sudah jelas mari kita lihat langkah-langkah pembuatannya
Login ke blogger
masuk ke Tata Letak => Edit HTML
lalu cari kode di bawah ini
.post { .............. }
titik-titik
di atas menunjukan ada kode yang terdapat di dalamnya kenapa saya tidak
menunjukan-nya? karena setiap template kode yang dimaksud berbeda-beda
fff : menunjukan warna latar belakang dari kolom postingan, sobat bisa menggantinya dengan kode warna yang lain
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFXb0wuts-BFYFqTpXTvOX3-cH01_dQuyT7hN1ocJH7rzBV_PdtF6FLggqWjOLQ6c62T3F9IU6MCl39fAgSFepxYHcscLWxCz7fUMp7szeCju747xv21vLWjtqweXMdvFcd9Sp7JqhQ44F/s1600/Sidebar.jpg : menunjukan gambar yang berada di bawah kolom postingan, sobat juga dapat menggantinya tapi dengan ukuran yang kecil
000 : menunjukan dari warna garis pada kolom postingan terpisah, sobat bisa
ganti akan tetapi harus di sesuaikan dengan warna main-wrapper agar
terlihat terpisah
000: warna dari tulisan pada klolom postingan, sobat dapat mengganti
dengan warna yang berlawanan dengan warna latar belakang agar terlihat
jelas
Setelah itu sobat dapat menyimpannya dan melihat hasilnya
Dengan modifikasi tampilan Kolom Postingan memungkinkan pengunjung blog sobat dapat menikmati dan mendalami postingan yang sobat tulis. Semoga bermanfaat dan salam bogging.
Banyak cara untuk membuat kotak
sidebar blog kita kelihatan menarik. Contohnya adalah seperti tips kali
ini. Terkadang sidebar blog perlu ditata dengan baik, supaya pengunjung
blog kita merasa nyaman dengan konten-konten yang ada dalam sidebar blog
kita. Selain ditata dengan bagus, tentu kita harus memberi tampilan
yang menarik pula pada sodebar blog kita. Nah untuk menampilkan sidebar
yang lebih menarik lagi, anda perlu mengikuti langkah-langkah di bawah
ini:
1. Login ke blogger.com
2. Pada dasbor blog Sobat, silahkan berkunjung ke Edit HTML.
3. Jangan Lupa Expand Widget Templates
4. Kemudian silahkan cari kode yang mirip seperti kode berikut ini.
Salam sejahtera untuk Sobat blogger semua. Setelah sekian lama saya tidak update artikel kali ini saya akan share kepada Sobat semua bagaimana cara membuat breaking news di blog. Breaking news pada blog berfungsi untuk memperindah tampilan, terlihat lebih profesional, dan bisa jadi menambah link in yang akan berefek baik pada nilai SEO blog Sobat. Mungkin ada diantara Sobat blogger yang belum pernah liat breaking news itu kaya apa, silahkan lihat screenshootnya.
Langkah-Langkah Cara Membuat Breaking News di Blog :
Login ke akun blog Sobat, kemudian masuk ke Dashboard
Setelah itu masuk ke menu Template
Klik Edit HTML, kemudian klik Lanjutkan, dan centang (checkclist) Expand Widget Template.
Cari kode ]]></b:skin> (gunakan kombinasi tombol Ctrl + F untuk mempermudah pencarian)
Setelah itu, salin kode dibawah ini tepat diatas kode ]]></b:skin> tersebut
Jika sudah ketemu kode navigasi blog Sobat (atau kalaupun tidak ada Sobat bisa cari kode </head>) kemudian letakan kode dibawah ini tepat dibawah kode tersebut
<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Creating Website", "http://clyfirst.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>
Ganti tulisan yang berwarna merah dengan alamat (url) blog Sobat, kemudian simpan template blog Sobat
Nah, itu dia cara membuat breaking news di blog yang dapat saya sampaikan pada Sobat. Sekian saja postingan saya kali ini, mohon maaf apabila masih banyak kekurangannya.
Cara Membuat Slide Show berdasarkan Kategori/Label - Cara Membuat Slideshow otomatis - Slideshow memang akan menjadi widget yang bisa memperindah layout template Anda. Pada posting sebelumnya, saya pernah membahas tengan cara membuat slideshow. Namun, slideshow yang dibuat menggunakan cara manual. Yaitu, kita memasukkan gambar dan deskripsi satu persatu.
Kali ini, kita akan membuat slideshow content yang dibuat berdasarkan kategori/label secara otomatis. Jadi nanti, Anda tinggal mengubah kategori untuk mengubah tampilan slide-nya. Langsung saja :
function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="370" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}
//]]>
</script>
Perhatikan kode yang di beri huruf tebal label1 = "berita". Itu adalah label atau kategori yang akan ditampilkan di slider, di sini dipilih label berita. Anda nanti tinggal mengganti dengan label yang diinginkan.
Perhatikan juga kode img width="370" height="240" itu adalah lebar dan tinggi slider, silahkan sesuaikan dengan template Anda.
Kemudian, cari kode </body>
Letakkan kode di bawah ini sebelum kode </body>
<script src='http://dl.dropbox.com/u/12924430/contentslider.js'/>
<script>
//<![CDATA[
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
//]]>
</script>
Kemudian, cari kode <div id='main-wrapper'>, jika anda ingin slider tampil di atas main-wrapper seperti pada demo, dan letakkan kode berikut di bawahnya :
Yang perlu diperhatikan di sini adalah kode label1 = "berita". berita adalah label yang ditampilkan dalam slider. Anda bisa menggantinya dengan label atau kategori yang diinginkan.
Daftar Isi atau yang sering kita sebut Sitemap pada
umumnya kita gunakan sebagai petunjuk atau informasi sudah berapa banyak
artikel yang selama ini sudah kita buat di dalam blog kita. Kadang kita
merasa malas apabila kita harus membuat dan mengisi daftar isi tersebut
secara manual setiap kali kita selesai meng update artikel. Maka dari
itu kali ini saya akan berbagi informasi tentang bagaimana cara membuat daftar isi atau sitemap berdasarkan label secara otomatis mengisi sendiri setiap kita selesai membuat artikel. Berikut tutorialnya.
Buka menu Posting atau Posts kemudian kita klik Entri Baru atau New Post. Setelah masuk ke dalam halaman editor posting pilih dalam mode HTMLbukan Compose. Lalu copy paste kan kode di bawah ini ke dalam halaman editor posting :
Ganti text yang berwarnamerah diatas dengan alamat blog anda. Simpan dan Lihat hasilnya. Berikut contoh tampilan daftar isi berdasarkan label dari blog KiosBisnis.com.
Namun misal anda menginginkan menggunakan fungsi scroll karena daftar
isi dirasa sudah terlalu banyak dan terlalu banyak memakan tempat
(memanjang ke bawah) maka bisa menambahkan kode berwarna biru di bawah
ini.
Jangan lupa untuk mengganti teks berwarna merah dengan alamat blog anda. Simpan dan Lihat hasilnya. Berikut contoh tampilan daftar isi berdasarkan labelmenggunakan fungsi scroll dari blog KiosBisnis.com.
Silakan ganti tanda PAGAR (#) dengan link/url yang kamu mau, boleh link posting atau link Label (Kategori)
Sub Menu dan Sub adalah sub menu dari menu (Menu + Sub Menu dan Menu + Sub), silakan ganti nama masing-masing menu sesuai selera.
Hal-hal yang mungkin akan ditanyakan :
1. Kode yang harus dicari tidak ada di blog saya ?
Solusinya, silakan pasang kode menu horizontak tersebut di tempat yang kira-kira pas dengan yang kamu mau, kemudian klik Preview (Pratinjau). Jika masih belum pas silakan pindahkan kode tersebut kemudian Pratinjau lagi. Lakukan sampai menunya sudah berada ditempat yang kamu mau.
2. Bagaimana cara memasukkan beberapa artikel dalam 1 menu ?
Agar bisa menampilakan beberapa artikel dalam 1 menu maka kamu harus pasang Link Label pada menu tersebut, caranya sama, yaitu dengan cara mengganti tanda pagar (#) dengan link label yang ada di blog teman.
Update 25 Juni 2012
Jika susah pasang menu horizontal nya pada bagian Edit HTML silakan pasang pada Gadget/Widget (dibawah header), caranya:
Klik Tata Letak
Klik Tambah Gadget/Add Gadget
Pilih Gadget Html/JavaScript
Simpan/Save
Selesai
Untuk mengubah lebar menu horizontal nya silakan cari kode:
Ingat, angka 900px hanya sebagai contoh saja, silakan rubah angka 900 dengan ukuran lebar yang kamu inginkan (yang sesuai dengan template kamu)
Untuk mengedit tampilan yang lainnya seperti warna, font, dsb. Silakan dicoba edit sendiri CSS nya ya, yang saya maksud CSS itu adalah kode yang ada di antara <style> dan </style>.
. Bagaimana cara menambahkan menu ?
Untuk menambahkan menu pada kode menu horizontal di atas silakan tambahkan kode berikut
<li><a href='#'>Menu</a></li>
Pasang kode di atas sebelum kode
</ul>
</div>
Maka kodenya jadi seperti ini
<li><a href='#'>Menu</a></li>
</ul>
</div>
Dengan menambahkan kode di atas itu artinya kamu sudah menambahkan 1 menu, jika ingin menambahkan dua menu maka silakan masukkan kode tambahan tersebut 2 x
Caranya sama dengan cara menambahkan menu
Bagaimana cara menambahkan sub menu saja?
untuk menambkan sub menu saja caranya hampir sama dengan cara menambahkan menu, silakan sisipkan kode
