Belajar blogspot

Cara Membuat Stikybar / Sidebar Melayang ke-2

noreply@blogger.com (Anonymous) — Sat, 22 Sep 2012 06:52:00 -0700

Cara Membuat Stikybar / Sidebar Melayang yaitu membuat sidebar blog menjadi mengikuti scroll sehingga akan selalu nampak.

Caranya, Letakan Kode dibawah ini tepat diatas kode </head>

Kode Javascript

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://belajar-e.googlecode.com/files/Stikybar.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$("#sidebar-right-1").stickyBar({
animated:true,
speed:400,
easing:null,
top:0,
bottom:0,
until:""
});
});
</script>

Bila template anda sudah dipasang library JQuery maka kode yang digaris bawah dihapus saja.
Demikian Cara Membuat Stikybar / Sidebar Melayang semoga berhasil.

Panduan Cara Meletakan Kode pada template

noreply@blogger.com (Anonymous) — Fri, 14 Sep 2012 10:21:00 -0700

Panduan Cara Meletakan Kode pada template ini saya sampaikan buat kawan yang kebetulan mampir di blog ini dan membuka halaman tutorial namun penjelasan tidak saya sampaikan pada tutorial tersebut.
Nah berikut penjelasan cara peletakan kode pada template;

Untuk Kode CSS

Pada Kode CSS ada yang diletakan pada tag <b;skin> dan ada juga yang setelah tag tersebut, bila mau menempatkannya pada tag <b:skin> maka kawan tinggal meletakan kode tersebut didalam tag tersebut baik itu di bawah tag pembukanya yaitu <b:skin> maupun di atas tag penutupnya yaitu ]]></b:skin>, namun pada umumnya untuk pemasangan kode baru suka diletakan tepat di atas kode ]]></b:skin>.
Contoh:

<b:skin><![CDATA[
---------------------
---------------------
---------------------

Kode CSS tambahan disini
]]></b:skin>

Kalau mau menempatkannya dibawah tag ]]></b:skin> maka sobat perlu menambahkan kode tambahan yaitu tag style dimana penulisannya yaitu di awali dengan <style type='text/css'> dan diakhiri dengan kode </style>, jadi peletakan kodenya tepat diantara kode tersebut,

<style type='text/css'>
kode CSS disini</style>

Untuk Kode JavaScript

untuk kode java script kawan bisa meletakannya pada tag head atau tag body namun lebih baiknya dan juga kebanyakan kode javascript diletakan diatas kode </head> jadi letakan saja tepat diatas kode tersebut. kecuali ada keterangan lain. misal peletakannya harus didalan tag body baik di awal maupun di akhir.
Contoh;

<head>
------------------------
------------------------
------------------------

Kode Javascript tambahan disini
</head>

Untuk Kode HTML

Nah kalau untuk kode HTML pada umumnya diletakan pada tag body baik itu dalam edit HTML maupun dalam widget tambah HTML/javascript. jadi peletakan kode HTML kawan sesuaikan saja menurut keinginan.
Contoh peletakan langsung dalam edit HTML:

<body>
---------------------
---------------------
---------------------
Kode HTML tambahan bisa dimana saja sesuai keinginan
---------------------
---------------------
</body>

Nah demikian penjelasan Cara Meletakan Kode pada template yang sederhana ini semoga membantu kawan yang berkunjung dan kebetulan menemukan tutorial blog ini yang hanya menuliskan kodenya saja.

JQuery Membuat Sidebar Melayang / Auto scroll

noreply@blogger.com (Anonymous) — Wed, 12 Sep 2012 03:53:00 -0700

Membuat Sidebar Melayang / Auto scroll ini maksudnya yaitu membuat sidebar menjadi tampak selamanya meskipun halaman discroll ke bawah atau keatas, sidebar akan selalu terlihat karena tidak ikut terscroll.

Adapun caranya, kawan tinggal meletakan kode dibawah ini tepat diatas kode </head>. namun ingat kode ini adalah kode JQuery sehingga template sobat harus sudah memasang library JQuery.

Berikut kodenya:

<script type='text/javascript'> $(function(){var offset=$("#rsidebar-wrapper").offset();var topPadding=144;$(window).scroll(function(){if($(window).scrollTop()>offset.top){$("#rsidebar-wrapper").stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$("#rsidebar-wrapper").stop().animate({marginTop:0})}})}); </script>

Perhatikan kode yang berwarna merah itu ID sidebarnya.. anda bisa ganti dengan ID sidebar anda karena ID sidebar setiap template berbeda-beda.

Demikian Membuat Sidebar Melayang / Auto scroll ini semoga berhasil.

Cara Membuat menu Lavalamp

noreply@blogger.com (Anonymous) — Fri, 7 Sep 2012 01:19:00 -0700

Cara Membuat menu Lavalamp, ini merupakan menu navigasi yang menarik buat sobat coba. berikut Cara Membuat menu Lavalamp selengkapnya :

Copy kode CSS yang ada pada kotak dibawah kemudian paste di atas kode </b:skin>
Copy kode Javascript dan paste diatas kode </head>
Copy kode HTML kemudian paste pada Widget yang ada dibawah header dengan konten Tambah CSS/javascript atau letakan dalam edit HTML sesuai keinginan.

Untuk cara peletakan kode dalam template kawan bisa baca di Panduan Cara Meletakan Kode pada template

#lava {
background-color:#274D5A;
background-image:-webkit-linear-gradient(top,#274D5A,#1E3B45);
background-image:-moz-linear-gradient(top,#274D5A,#1E3B45);
background-image:-ms-linear-gradient(top,#274D5A,#1E3B45);
background-image:-o-linear-gradient(top,#274D5A,#1E3B45);
background-image:linear-gradient(top,#274D5A,#1E3B45);
-webkit-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.2),
    0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.2),
    0px 1px 2px rgba(0,0,0,0.4);
box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.2),
    0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
position:relative;
text-align:center;
height:30px;
}

#lava ul {
margin:0px 0px;
padding:0px 0px;
list-style:none;
position:absolute;
left:0px;
top:0px;
z-index:100;
}

#lava ul li {
position:relative;
float:left;
}

#lava ul li a {
display:block;
padding:0px 15px;
font:bold 11px/30px Tahoma,Verdana,Arial,Sans-Serif;
text-decoration:none;
color:#70A4B2;
text-shadow:0px -1px 0px rgba(0,0,0,0.4);
}

#lava #box {
position:absolute;
left:0px;
top:0px;
z-index:50;
background-color:#1E3B45;
background-image:-webkit-linear-gradient(bottom,#274D5A,#1E3B45);
background-image:-moz-linear-gradient(bottom,#274D5A,#1E3B45);
background-image:-ms-linear-gradient(bottom,#274D5A,#1E3B45);
background-image:-o-linear-gradient(bottom,#274D5A,#1E3B45);
background-image:linear-gradient(bottom,#274D5A,#1E3B45);
}

#lava #box .head {
height:30px;
border-left:2px solid #AD1717;
}

#lava li ul {
width:170px;
height:auto;
background-color:#274D5A;
position:absolute;
top:100%;
left:0px;
z-index:77;
border-left:2px solid #AD1717;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4);
display:none;
}

/* CSS Fallback */
#lava li:hover ul.fallback {display:block;}

#lava li li {
float:none;
display:block;
text-align:left;
}

#lava li li a       {padding:0px 15px;}
#lava li li a:hover {background-color:#1E3B45;}

<nav id='lava'>
    <ul>
        <li class='selected'><a href='#'>Beranda</a></li>
        <li><a href='#'>Menu</a></li>
        <li><a href='#'>Menu 1</a>
            <ul class='fallback'>
                <li><a href='#'>menu 1-1</a></li>
                <li><a href='#'>menu 1-2</a></li>
                <li><a href='#'>menu 1-3</a></li>
                <li><a href='#'>menu 1-4</a></li>
                <li><a href='#'>menu 1-5</a></li>
            </ul>
        </li>
        <li><a href='#'>Menu 2</a></li>
        <li><a href='#'>Menu 3</a></li>
        <li><a href='#'>Menu 4</a>
            <ul class='fallback'>
                <li><a href='#'>Menu 4-1</a></li>
                <li><a href='#'>Menu 4-2</a></li>
                <li><a href='#'>Menu 4-3</a></li>
                <li><a href='#'>Menu 4-4</a></li>
            </ul>
        </li>
    </ul>
</nav>

Semoga Cara Membuat Menu Lavalamp ini berhasil diterapkan pada template anda.

Membuat Simple Tab JQuery

noreply@blogger.com (Anonymous) — Thu, 6 Sep 2012 13:21:00 -0700

Membuat Simple Tab JQuery ini dengan menggunakan JQuery, untuk cara peletakan kodenya kawan Panduan Cara Meletakan Kode pada template kawan tinggal memasukan kode dibawah ini sesuai panduan tersebut.

.simpleTab {
margin:10px auto;
color:white;
text-align:left;
}

.simpleTab ul.tab-wrapper {
margin:0px 0px;
padding:0px 0px;
height:30px;
}

.simpleTab ul.tab-wrapper li {
margin:0px 0px;
padding:0px 0px;
float:left;
list-style:none;
display:inline;
}

.simpleTab ul.tab-wrapper li a {
margin:0px 2px 0px 0px;
display:block;
font:bold 14px/30px threbuchet,Sans-Serif;
padding:0px 15px;
background-color:black;
color:white;
text-decoration:none;
border:1px solid black;
border-bottom:none;
position:relative;
z-index:1;
outline:none;
border-radius:10px 10px 0 0;
}

.simpleTab .tab-content {
clear:both;
padding:10px;
background-color:#216F04;
border:15px solid #956703;
position:relative;
z-index:2;
top:-1px;
height:200px;
overflow:auto;
}

.simpleTab ul.tab-wrapper li a.activeTab {
background-color:#956703;
color:white;
z-index:3;
}

<div id="tab">
    <div data-tab="Tab-1">Content 1</div>
    <div data-tab="Tab-2">Content 2</div>
    <div data-tab="Tab-3">Content 3</div>
    <div data-tab="Tab-4">Content 4</div>
</div>

Semoga cara Membuat Simple Tab JQuery ini berhasil dan bermanfaat.

Membuat JQuery Accordion Sidebar

noreply@blogger.com (Anonymous) — Thu, 6 Sep 2012 10:57:00 -0700

Membuat JQuery Accordion Sidebar, pada kesempatan kali ini saya akan berbagi tutorial buat kawan yang mungkin sedang mencari JQuery accordion sidebar, silahkan kawan masukan kode yang ada dibawah ini kedalam template kawan, namun buat yang belum tau cara peletakan kodenya silahkan baca di Panduan Cara Meletakan Kode pada template, kawan tinggal menyesuaikan saja kode yang ada.

#sidebar-right-1 h2 {
margin: 0 2px;
padding:3px 7px 3px 13px;
text-shadow:0 1px 0 black;
background-color:#333;
background-image:-webkit-linear-gradient(top,#333,#3c3c3c);
background-image:-moz-linear-gradient(top,#333,#3c3c3c);
background-image:-ms-linear-gradient(top,#333,#3c3c3c);
background-image:-o-linear-gradient(top,#333,#3c3c3c);
background-image:linear-gradient(top,#333,#3c3c3c);
border-color:#444 transparent #222;
border-style:solid;
border-width:1px 0;
font:normal bold 12px 'Trebuchet MS', Trebuchet, sans-serif;
color:#fff;
text-transform:uppercase;
}
#sidebar-right-1 h2:hover {
margin: 0 2px;
padding:3px 7px 3px 13px;
background:#ddaa6e;
font:normal bold 12px 'Trebuchet MS', Trebuchet, sans-serif;
color:#fff;
text-transform:uppercase;
border-bottom:1px solid #404040;
}
#sidebar-right-1 h2.active {
background-color:#000;
color:#00ff00;
background-image:-webkit-linear-gradient(top,#3c3c3c,#222);
background-image:-moz-linear-gradient(top,#3c3c3c,#222);
background-image:-ms-linear-gradient(top,#3c3c3c,#222);
background-image:-o-linear-gradient(top,#3c3c3c,#222);
background-image:linear-gradient(top,#3c3c3c,#222);
box-shadow:0 0 3px black;
border-color:#555 transparent #222;
border-style:solid;
border-width:1px 0;
}
#sidebar-right-1 .widget {
margin:0 0;
padding:0 0;
}
#sidebar-right-1 .widget-content {
padding:5px 5px 5px 13px;
max-height:300px;
overflow:auto;
}
#sidebar-right-1 .widget-content ul li {
border-top:1px solid #444;
border-bottom:1px solid #222;
}

yang perlu diperhatikan adalah berada pada ID sidebar, karena ID sidebar kadangberbeda tiap template. kode yang diberi warna merah adalah ID sidebar, dan kebetulan contoh diatas adalah ID sidebar kanan pada template blogger baru. ID sidebar yang lain diantaranya rsidebar-wrapper, sidebar-righ, sidebar-wrapper atau yang lainnya, kawan cocokan saja.

Sampai disini dulu Membuat JQuery Accordion Sidebar,semoga berhasil dan bermanfaat.

Membuat Menu Navigasi JQuery 1

noreply@blogger.com (Anonymous) — Tue, 4 Sep 2012 10:12:00 -0700

Membuat Menu Navigasi JQuery , ini mungkin sudah tidak asing lagi buat para bloggernamun tidak ada salahnya kalau saya berbagi buat yang membutuhkan.
Cara pemasangannya kawan bisa baca di Panduan Cara Meletakan Kode pada template kawan tinggal masukan saja kode dibawah ini kedalam template kawan.

ul#elina .utama {
padding:8px 14px 7px;
text-transform:uppercase;
background:transparent;
color:$(widget.title.text.color);
border-top:1px solid transparent;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
}
ul#elina {
list-style:none;
margin:0 -15px;
padding:0px 2px 3px;
height:30px;
border-bottom:1px solid #404040;
font:$(widget.title.font);
background:$(header.background.color); /* Old browsers */
}
ul#elina * {margin:0;padding:0;}
ul#elina a {
display:block;
text-decoration:none;
color:$(widget.title.text.color);
}
ul#elina li {
position:relative;
float:left;
}
ul#elina ul {
position:absolute;
z-index:100;
width:160px;
top:30px;
left:0;
background:#000;
list-style:none;
display:none;
}
ul#elina ul li {
position:relative;
border:0;
width:100%;
margin:0;
}
ul#elina ul li a {
display:block;
padding:5px 10px 7px;
background-color:transparent;
color:$(widget.title.text.color);
border-bottom:1px solid #303030;
}
ul#elina ul li a:hover, ul#elina ul li:nth-child(odd) a:hover {
background-color:#505050;
color:$(widget.title.text.color);
}
ul#elina .utama:hover {
background:#000; /* Old browsers */
text-color:#fff;
}
ul#elina li li:nth-child(odd) a, ul#elina li.odd a {background-color:#000;}

<ul id='elina'>
    <li><a href='#' class='utama'>BERANDA</a></li>
    <li><a href='#' class='utama'>MENU 1</a>
        <ul>
            <li><a href='#'>Satu</a></li>
            <li><a href='#'>Dua</a></li>
            <li><a href='#'>Tiga</a></li>
            <li><a href='#'>Empat</a></li>
        </ul>
    </li>
    <li><a href='#' class='utama'>MENU 2</a>
        <ul>
            <li><a href='#'>Satu</a></li>
            <li><a href='#'>Dua</a></li>
            <li><a href='#'>Tiga</a></li>
            <li><a href='#'>Empat</a></li>
        </ul>
    </li>
    <li><a href='#' class='utama'>MENU 3</a>
        <ul>
            <li><a href='#'>Satu</a></li>
            <li><a href='#'>Dua</a></li>
            <li><a href='#'>Tiga</a></li>
            <li><a href='#'>Empat</a></li>
        </ul>
    </li>
</ul>

Demikian cara Membuat Menu Navigasi JQuery , ini semoga berhasil dan bermanfaat.

Cara Penulisan Javascript

noreply@blogger.com (Anonymous) — Mon, 3 Sep 2012 22:44:00 -0700

Cara Penulisan Javascript pada dasarnya ada dua cara yang biasa digunakan pada template blogspot. Dua cara penulisan tersebut yaitu :

Penulisan javascript secara internal
Penulisan javascript secara external

Penulisan Secara Internal

Penulisan javascript internal yaitu penulisan javascript yang langsung diletakan pada template dengan diawali tag <script type="text/javascript"> dan diakhiri dengan tag </script>.

Cara Penulisannya:

<script type="text/javascript">

.....

.... kode javascript disini ....
.....
</script>

atau

<script type='text/javascript'>
<![CDATA[

.....

.... kode javascript disini ....
.....

]]>
</script>

Kode javascript diletakan pada huruf yang berwarna merah.

Penulisan Secara External

Penulisan javascript external yaitu penulisan javascript yang melalui hosting sehingga javascript tersebut perlu disimpan dulu pada situs penyedia hosting, buat yang gratisan bisa menggunakan google code atau google site atau situs lainnya. Cara Penulisannya:

<script type="text/javascript" src="URL hosting javascript"></script>

atau

<script src="URL hosting javascript" type="text/javascript"/>

URL hosting javascript yaitu alamat URL hostingan javacsript, contoh nyatanya:

<script type="text/javascript" src="http://elina.googlecode.com/files/jquery-1.js"></script>

atau

<script src="http://elina.googlecode.com/files/jquery-1.js" type='text/javascript'/>

Begitulah Cara Penulisan Javascript, semoga postingan ini bisa membantu kawan yang masih belum tau cara penulisan javascript.

Cara Membuat Plug-in JQuery Accordion Sederhana

noreply@blogger.com (Anonymous) — Sun, 2 Sep 2012 04:20:00 -0700

Berikut Cara Membuat Plug-in JQuery Accordion Sederhana, kawan tinggal memasang kode dibawah ini kedalam template sobat. bila ada yang belum paham cara peletakan kodenya silahkan baca di Panduan Cara Meletakan Kode pada template berikut kodenya:

#accordion {
width:300px;
margin:50px auto;
background-color:silver;
border:2px solid black;
}
#accordion h2.accordion-header {
cursor:pointer;
background-color:black;
font:bold 12px Arial,Sans-Serif;
color:white;
padding:5px 15px;
margin:0 0;
border-bottom:1px solid #292929;
}
#accordion h2.active {
background-color:orange;
color:black;
}
#accordion div {
height:150px;
padding:10px 15px;
}

/**
* Simple JQuery Accordion Plugin
* Author: Elin
* Date: 2 september 2012
* http://belajar-jq.blogspot.com/
*/
(function($) {
    $.fn.accordion = function(settings) {
        settings = jQuery.extend({
            active: 1,
            sUpSpeed: 400,
            sDownSpeed: 400,
            sUpEasing: null,
            sDownEasing: null
        }, settings);
        return this.each(function() {
            var $this = $(this),
                $item = $this.children('div[data-header]'),
                activePanel = settings.active - 1;
            $item.each(function() {
                $(this).hide().before('<h2 class="accordion-header">' + $(this).data('header') + '</h2>');
            });
            $this.children('div:eq(' + activePanel + ')').show().prev().addClass('active');
            $this.find('.accordion-header').on("click", function() {
                $this.children('h2').removeClass('active');
                $item.slideUp(settings.sUpSpeed, settings.sUpEasing);
                $(this).addClass('active').next().slideDown(settings.sDownSpeed, settings.sDownEasing);
            });
        });
    };
})(jQuery);
// Eksekusi di sini!
$(function() {
    $('#accordion').accordion();
});

Demikian Cara Membuat Plug-in JQuery Accordion Sederhana, Semoga bermanfaat.

Kode Struktur Dasar Template Blogspot

noreply@blogger.com (Anonymous) — Fri, 31 Aug 2012 21:52:00 -0700

Kode Struktur Dasar Template Blogspot, sebelum melangkah jauh pada pengeditan template mungkin pengenalan struktur dasar template blogspot ini perlu perlu diutamakan, apalagi buat yang baru pertama kali mengenal blogspot. pada kesempatan ini akan saya sampaikan struktur template blogspot secara garis besar saja yang mudah-mudahan ini dapat membantu anda yang baru belajar mengedit blog.

Struktur Dasar Template blogspot terdiri dari beberapa bagian penting dan ini hal wajib anda ketahui, berikut penjelasan gambar diatas:

BODY Pada area ini keseluruhan konten atau isi dari blog ditampung, area ini ditandai dengan kode awal dengan tag <body> dan kode akhir tag </body> dimana diantara kode tersebut menyimpan hampir semua kode HTML namun bisa juga untuk menyimpan Javascript atau CSS namun yang paling banyak adalah menyimpan kode HTML. untuk template blogger baru kode <body> nya adalah <body expr:class='"loading" + data:blog.mobileClass'>.

OUTER WRAPPER Area ini merupakan frame atau pembungkus dari keseluruhan bagian template, yang terdiri dari header, sidebar, main wrapper/post dan footer. outer wrapper ini didalam template biasa untuk kode CSSnya #outer-wrapper atau .outer-wrapper sedang pada kode HTMLnya <div id="outer-wrapper"> dan diakhiri dengan </div>. namun untuk template blogger baru kode outer-wrapper sudah diganti dengan content-inner sehingga buat sobat yang menggunakan template blogger baru silahkan cari kode content-inner sebagai pengganti outer-wrapper.

HEADER Area ini adalah area yang letaknya berada dibagian paling atas, pada umumnya area ini berisi judul dan deskripsi blog dan bisa juga ditambahkan menu navigasi dibagian atas maupun dibagian bawahnya, terkadang ada juda yang digunakan untuk meletakan gambar/banner iklan disamping judul blog. kode yang biasa berada di area ini diantaranya header-wrapper, header-inner, header-outer.

SIDEBAR LEFT area ini adalah area yang terletak dibagian kiri blog, biasa digunakan untuk menyimpan widget atau aksesories blog. kode yang biasa digunakan untuk ini lsidebar,sidebarleft.

MAIN WRAPPER/POST Area ini merupakan yang paling penting didalam blog dan ini merupakan bagian paling besar, disini menyimpan beberapa bagian yang diantaranya judul post, Isi post, komentar dan mungkin juga keterangan lain yang menyangkut blog.

SIDEBAR RIGHT Area ini sama dengan sidebar left namun letaknya berada dibagian kanan.

FOOTER Area ini merupakan bagian paling bawah, disini biasanya untuk meletakan hak cipta atau keterangan kepemilikan blog.

Buat yang menggunakan template blogger baru mungkin ada beberapa perbedaan dalan kode namun pada intinya sama saja, jadi silahkan saja sobat sesuaikan saja. Cukup sekian dulu pembahasan Kode Struktur Dasar Template Blogspot ini, mudah-mudahan bermanfaat.

Kode - kode Data Template Blogspot

noreply@blogger.com (Anonymous) — Fri, 31 Aug 2012 02:14:00 -0700

Kode - kode Data Template Blogspot, Kesempatan ini saya mencoba menyampaikan beberapa kode data yang berada dalam template blogspot, mungkin ini kan membantu anda pada saat melakukan pengeditan blog, dimana dalam pengeditan blog kita harus mengetahui beberapa kode berikut ini sebelum melakukan tindakan agar lebih mudah dalam mencari lokasi/area mana yang akan diedit atau dirubah.

Berikut beberapa kode Data yang ada dalam template blogspot:

KODE	BERHUBUNGAN DENGAN
blog.homepage.Url	URL Beranda.
blog.title	Title Blog
data:description	Diskripsi Blog
data:label.count	Jumlah artikel Label
data:newerPageUrl	URL Artikel Terbaru
data:olderPageUrl	URL Artikel Lama
data:post.link	URL Postingan
data:post.title	Judul Postingan
data:post.thumbnailUrl	Thumbnail Postingan
data:post.snippet	Cuplikan Postingan
data:post.body	Isi Postingan
data:post.author	Author Penulis
data:post.dateHeader	Tanggal Keluar Postingan
data:label.url	URL Label tertentu
data:post.location.mapsUrl	URL Lokasi Pengeposan
data:post.location.name	Lokasi Pengeposan
data:comment.authorAvatarImage	foto profil
data:comment.author	nama komentator
data:commentPostedByMsg	kata "mengatakan..." atau "said..."
data:comment.body	isi komentar
data:post.numComments	Jumlah Komentar
data:comment.timestamp	tanggal penerbitan komentar
data:blogCommentMessage	formulir pesan komentar
data:commentLabelPlural	Teks Komentar / comments di area komentar
z	z

Baru sampai disitu Kode - kode Data Template Blogspot yang bisa saya catat mungkin masih ada beberapa kode yang belum saya masukan, namun mudah-mudahan ini bermanfaat.

Membuat Tombol show/hide Komentar

noreply@blogger.com (Anonymous) — Wed, 29 Aug 2012 21:18:00 -0700

Membuat Tombol show/hide Komentar buat anda yang suka mengutak - atik template khususnya pengguna blogspot mungkin cara ini bisa anda coba biar web/blognya tambah keren. berikut kode untuk Membuat Tombol show/hide Komentar;

Kode CSS

Letakan kode berikut tepat diatas kode ]]></b:skin>

a.bukacoment {
display:block;
clear:both;
width:auto;
padding:0px 0px;
text-align:center;
font-size:14px;
font-weight:bold;
line-height:30px;
background-color:#000;
color:white;
text-decoration:none;
margin:0px 0px;
position:relative;
}

a.bukacoment em {
width:0px;
height:0px;
display:block;
position:absolute;
top:10px;
right:10px;
border:6px solid transparent;
border-top-color:white;
}

a.bukacoment.active {background-color:#900;}

a.bukacoment.active em {
top:6px;
border-color:transparent transparent white transparent;
}

div.btsbawah {
height:0px;
border-bottom:4px solid #ff0000;
}

div.jqcoment {
padding:0px;
margin:0px 0px !important;
}

Kode Javascript

Letakan kode berikut ini diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector          = '#comments',
    openPanelText          = "Poskan Komentar",
    closePanelText          = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed      = 400;
//]]>
</script><script src='http://elina.googlecode.com/files/Buka-coment.js' type='text/javascript'/>

Simpan template, Selesai

Keterangan:
Tulisan yang berwarna orange bisa anda ganti atau sesuaikan
- var panelSelector untuk #comments bisa juga diganti dengan obyek lain
- openPanelText Poskan Komentar adalah tulisan pada awal tampilan
- closePanelText Tutup Komentar adalah tulisan setelah diklik
- 600 dan 400 adalah kecepatan slide

Begitulah cara Membuat Tombol show/hide Komentar semoga berhasil.