Belajar SEO | Tutorial Blog | Template Blogspot, WordPress, Joomla

Kelengkapan Teknis Suatu Blog

noreply@blogger.com (Terry Hakim) — Sat, 11 Feb 2012 07:30:46 PST

Awalnya bingung juga, karena ingin melengkapi bengkel blog dengan postingan yang bersifat teknis untuk kelengkapan suatu blog, seperti :
artikel terkait (related posts)
artikel terakhir (recent posts)
artikel acak (random posts)
komentar terakhir (recent comments)
top komentator
baca selanjutnya (read more)
dan lain sebagainya.
Semua ini tentu saja saya dapatkan dari beberapa blog sobat yang tentunya saya akan cantumkan sebagai narasumbernya. Walaupun demikian halnya, saya sendiri juga tidak tahu mana yang lebih dahulu mengetahuinya dan memberikannya untuk kali pertama, karena banyak sekali artikel semacam ini di internet.

Disamping itu, ada juga beberapa kelengkapan teknis untuk suatu blog yang secara intensif digarap oleh para programmer untuk pengembangan suatu blog yang pada akhirnya diperuntukkan untuk kenyamanan para pembaca sekalian.

Memang ada sebuah atau beberapa buah blog yang MENGHARAMKAN untuk di "COPY - PASTE" hasil karyanya dengan memberikan PERINGATAN TEGAS seperti "Don’t Copy This Post because this Original from my Blog (www.gamaudicopy.com). Please read Copyright of All post at the Footer." Atau dengan menggunakan pihak ketiga sebagai lisensi bahwa karyanya dilindungi oleh hukum. Untuk itu kita juga harus menghormatinya untuk tidak berbuat seenaknya dan perlihatkan kedewasaan kita untuk tidak melakukan tindakan yang dengan tegas tidak diperbolehkan oleh si pemiliknya untuk dibagi-bagikan.

Akhirnya, diawali dari postingan ini saya akan mencoba dan berupaya semaksimal mungkin untuk tidak dengan mudah melakukan "FLAGIAT" atas hasil karya orang lain. Jadi, intinya saya harus mengenal rambu-rambu yang telah diberikan oleh si pemilik blog itu. Kalau memang diperbolehkan "WHY NOT" tapi jika sudah ada rambu seperti di atas, sebaiknya urungkan niat kita.

Satu hal lagi yang saya ingin sampaikan, bahwa pada intinya juga ilmu atau pengetahuan itu menjadi popular dalam arti menyebar dan meluas hingga semua orang itu tahu. Itu karena, "KATANYA ..." dan sobat pasti tahu maksudnya, Terima kasih.

Cara Membuat Blockquote

noreply@blogger.com (Terry Hakim) — Sun, 12 Feb 2012 03:25:34 PST

Cara Membuat Blockquote. Blockquate, sobat pasti sudah tahu dong maksudnya, ya betul. Kalau kita ingin membuat suatu catatan/keterangan penting, berupa script kode atau mungkin yang lainnya. Maka kita akan menggunakan tanda petik seperti "Dalam tanda Petik".

Kenapa saya memposting ini, mungkin sobat kurang puas dengan "Blockquote" bawaan dari template dan ingin menggantinya.

Berikut ini script kodenya :

.post-body blockquote {
display:block;
overflow:auto;
background: #3207d4 url(http://sites.google.com/site/wandinews/javascript/kod1.jpg?imgmax=800) no-repeat top left;
border:3px solid #3207d4;
max-height:170px;
line-height:1.3em;
margin:5px 10px;
padding:10px 5px 10px 20px;
}

Kode CSS untuk blockquote di atas ditempatkan sebelum ]]></b:skin> dan pemakaiannya pada saat membuat postingan dengan menggunakan tanda (") sebelum dan sesudah kalimat yang akan dimasukkan dalam tanda kutip (blockquote).

Cara Membuat Menu Breadcrumb

noreply@blogger.com (Terry Hakim) — Sun, 12 Feb 2012 05:44:08 PST

Cara Membuat Menu Breadcrumb. Menu Breadcrumb merupakan menu navigasi atau petunjuk keberadaan suatu postingan di bawah satu atau beberapa kategori/tags. Sebenarnya menu ini tidak begitu penting, namun untuk mempercantik serta mempermudah pembaca untuk mengetahui artikel tersebut berada pada kategori/tags apa. Ok, langsung saja berikut ini langkah-langkahnya.

Cara Membuat Menu Breadcrumb :

Login Blog anda > Design > Edit HTML dan centang Expand Widget templates
Cari kode ]]></b:skin> ( gunakan CTRL + F agar lebih mudah)
Paste kode berikut tepat diatas kode ]]></b:skin>
.breadcrumbs{
padding-left:10px;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
Kemudian cari kode <b:includable id='post' var='post'>
Setelah ketemu, silahkan paste kode berikut tepat dibawah kode <b:includable id='post' var='post'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Anda disini » <a expr:href='data:blog.homepageUrl'>Home</a> »
<b:if cond='data:post.labels'><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> » <data:post.title/>
</div>
</b:if>
</b:if>
Save template (selesai).

Cara Membuat Related Post by Kategori

noreply@blogger.com (Terry Hakim) — Sun, 12 Feb 2012 02:41:45 PST

Cara Membuat Related Post by Kategori. Sobat pasti tahu dong maksudnya, ya betul. Jadi script ini digunakan untuk menyusun artikel terkait berdasarkan kategori atau tags (untuk di WordPress). Ok berikut ini langkah-langkahnya.

Cara Membuat Related Post by Kategori :

Login ke Blog anda > Pilih Rancangan (Design)
Pilih Edit HTML > Centang pada Expanded Widget Template. Catatan : "Sebaiknya unduh dulu template sobat, untuk keamanan"
Cari scipt kode seperti di bawah :
<b:if cond='data:blog.pageType == "item"'>
</b:if>
Gunakan fasilitas search/cari dengan tombol F lalu masukkan script kode di atas.
Kalau sudah ketemu, paste script kode di bawah ini sebelum kode </b:if> di atas. Berikut script kode yang harus dicopy :
<h4>Artikel terkait lainnya berdasarkan katgori/tags :<h4>
<div id='data2007'/>
<script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('data2007').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> </div> </div> </b:if>
Simpan, dan Selesai.

Semoga bermanfaat.

Cara Membuat Recent Comment

noreply@blogger.com (Terry Hakim) — Sun, 12 Feb 2012 00:01:33 PST

Untuk membuat Recent Comment sebagai perlengkapan sebuah blog di Blogspot terdapat cukup banyak cara, namun yang paling mudah dan cepat loadingnya dengan menggunakan bawaan dari Blogspot. Recent Comment bawaan Blogspot ini hanya dapat menampilkan 5 komentar saja, dan hanya menampilkan ringkasan teks saja tanpa dilengkapi dengan thumbnail.

Bagaimana caranya menggunakan Recent Comment ini, ok inilah langkah-langkahnya.

Cara membuat Recent Comment :

Login ke Blog anda > Pilih Design
Kemudian Tambahkan gadget (Add a gadged) > pilih Feed
Masukkan Url berikut http://BLOG-SOBAT/feeds/comments/default
Ganti yang warna orange dengan alamat blog anda dan simpan.

Cara membuat Recent Comment seperti yang telah dijelaskan diatas merupakan cara yang paling mudah, dipostingan selanjutnya saya akan memberikan tips atau Cara membuat Recent Comment dengan thumbnail, Ok selamat mencoba.

Cara Membuat Recent Comment + Thumbnail

noreply@blogger.com (Terry Hakim) — Sun, 12 Feb 2012 01:04:31 PST

Cara Membuat Recent Comment + Thumbnail. Pada postingan yang lalu sudah diterangkan bagaimana Cara membuat Recent Comment yang paling mudah dan cepat loadingnya dengan menggunakan bawaan dari Blogspot. Kali ini akan diterangkan Cara membuat Recent Comment yang dilengkapi dengan Thumbnail. Thumbnail itu artinya potongan gambar atau foto, yang tentunya disini adalah gambar atau foto pemberi komentar.

Banyak postingan di internet yang telah menjelaskan bagaimana Cara membuat Recent Comment dengan Thumbnail, tapi tidak ada salahnya juga saya memperkaya atau memperbanyak artikel ini dengan tujuan semoga dengan banyaknya postingan Cara membuat Recent Comment dengan Thumbnail akan memudahkan pencarian artikel ini.

Saya tertarik sekali dengan Cara membuat Recent Comment dengan Thumbnail dari W2Blogging yang manis seperti yang digunakan di Bengkel Blog ini. Jika sobat ingin langsung ke sumbernya boleh saja, atau bisa langsung di sini. Ok, berikut langkah-langkahnya.

Cara membuat Recent Comment dengan Thumbnail

Login ke Blog anda > Pilih Design
Kemudian Tambahkan gadget (Add a gadged) > lalu masukkan kode script berikut ini:
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More Â»",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://bengkel-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
dan simpan. Selesai

Sedikit penjelasan untuk Recent Comment dengan Thumbnail ini :

numComments = 5
showAvatar = true
avatarSize = 40
roundAvatar = true
characters = 40
showMorelink = false

numComments = 5, akan menampilkan komentar sebanyak 5, di sini dapat dicustom sesuai keinginan sobat silahkan suka-suka maunya berapa komentar yang akan ditampilkan.

showAvatar = true, akan menampilkan Avatar sobat, kalau tidak mau ditampilkan diset "false".

avatarSize = 40, akan menampilkan ukuran Avatar. 40 sesuai dengan yang ada diblog saya. Silahkan sobat mencobanya sesuai keinginan.

roundAvatar = true, akan menampilkan frame bundar. Jika sobat tidak suka dengan frame bundar atau lingkaran, bisa sobat set "false" akan menampilkan frame square atau kotak.

characters = 40, akan menampilkan 40 character pertama sebagai cuplikan komentar yang akan ditampilkan.

showMorelink = false, tidak menampilkan link ke postingan tapi kalau sobat mau menampilkan link ke postingan tersebut harus diset "true".

Ok, semoga bermanfaat.

WordPress Untuk Bisnis Online

noreply@blogger.com (Terry Hakim) — Fri, 10 Feb 2012 19:08:35 PST

Saat mengelola web penjualan panduan wordpress dan bisnis online, banyak yang mempertanyakan tentang penggunaan wordpress.com sebagai sarana bisnis online. Walaupun wp.com memiliki fungsi yang amat sangat terbatas untuk bisnis online, tapi bukan berarti WP.com tidak bisa dibuat bisnis.

Lalu bagaimana caranya menjadikan wordpress.com sebagai sarana bisnis kita?

Yang sangat jelas, anda tidak bisa menggunakan WP.com sebagai blog untuk mendapatkan uang dari Google AdSense, AdBrite, atau berbagai macam program PPC lainnya. Anda juga tidak bisa menggunakannya untuk berbagai macam tipe bisnis B2B (Business to Business).

Tapi, anda bisa menggunakan Wp.com untuk menghasilkan uang lewat B2C (Business to Customer). Contoh B2C adalah penjualan produk dan affiliasi atau reseller.

Untuk berjualan produk, anda hanya perlu memajang foto produk lengkap dengan keterangan produk dan harga. Lalu buat page khusus yang berisi cara pemesanan produk. Anda bisa meletakkan nama, alamat, no. HP atau telp dan email agar pengunjung bisa menghubungi anda.

Saat ini, online cart memang masih belum terlalu digunakan di Indonesia, jadi mumpung belum terlalu penting anda bisa menggunakan cara manual seperti diatas.

Kemudian anda juga bisa menjual produk orang lain dengan system affiliasi. Caranya cukup mudah. Biasanya kita akan memberikan link affiliasi begitu saja. Misalnya :

http://cafebisnis.com/belajar-wordpress

Dengan cara itu, kita menyerahkan hasil kerja keras kita kepada web affiliasi yang bersangkutan. Ini sangat beresiko. Mereka yang baca, akan lebih mudah mengingat cafebisnis.com daripada embel-embel yang dibelakang.

Nah, dengan WP.com anda bisa mengarahkan calon pengunjung waktu promosi ke blog WP.com anda. Disana anda bisa memberikan tips dan trik seputar produk dan diakhir tiap tips anda sisipkan link produk affiliasi anda.

Dengan cara ini, anda bisa menawarkan banyak produk affiliasi hanya dengan satu alamat saja. Yaitu WP.com anda. Nah, anda bisa dapat duit kan akhirnya?

Ada cara lain yang cukup bagus, yaitu dengan menjual link di blogroll. Anda bisa menawarkan pemasangan link di blogroll anda dengan harga tertentu. Coba saja tawarkan, insya Allah akan ada yang berminat. Tapi berikan harga yang murah aja. Kecuali kalau blog anda punya traffic cukup tinggi dan memiliki PR tinggi, anda bisa menjual link blogroll dengan harga lebih tinggi.

So, selamat berbisnis dengan WordPress.com

PS:
Jika ingin serius bisnis online, sebaiknya memang install WordPress sendiri. Untuk mengetahui cara instalasi WordPress di PC agar kamu bisa menatanya dengan lebih baik tanpa harus membuang-buang bandwith yang masih mahal di Indonesia. Kamu bisa mencari artikelnya di sini : http://www.dillablog.co.cc/2009/10/install-wordpress-di-pc.html

sumber: Panduan Tidak Resmi WordPress.com

Translate Tools

noreply@blogger.com (Terry Hakim) — Sun, 12 Feb 2012 00:06:19 PST

This day I get one more widget, the widget translate Google's already modified by Hoctro comrade. As we already know that Google provides tools to translate that is like this:

but this time giving tips Hoctro of different tools for interpretation such as this:

Widget by Hoctro Bloggerize by OBTemplate

how, interesting is not enough. If you like this widget tools interpreter. Here is code and how to installation:

<b:widget id='HTML200' locked='false' title='Translate to your Language' type='HTML'>
<b:includable id='main'>


<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<form action='http://translate.google.com/translate_c?'>
<table id='webtb'>
<tr><td> <select name='tl' style='width: 8em;'>
<option value='ar'>Arabic</option>
<option value='bg'>Bulgarian</option>
<option value='ca'>Catalan</option>
<option value='zh-cn'>Chinese (Simplified)</option>
<option value='zh-tw'>Chinese (Traditional)</option>
<option value='hr'>Croatian</option>
<option value='cs'>Czech</option>
<option value='da'>Danish</option>
<option value='nl'>Dutch</option>
<option value='en'>English</option>
<option value='tl'>Filipino</option>
<option value='fi'>Finnish</option>
<option value='fr'>French</option>
<option value='de'>German</option>
<option value='el'>Greek</option>
<option value='iw'>Hebrew</option>
<option value='hi'>Hindi</option>
<option value='id'>Indonesian</option>
<option value='it'>Italian</option>
<option value='ja'>Japanese</option>
<option value='ko'>Korean</option>
<option value='lv'>Latvian</option>
<option value='lt'>Lithuanian</option>
<option value='no'>Norwegian</option>
<option value='pl'>Polish</option>
<option value='pt'>Portuguese</option>
<option value='ro'>Romanian</option>
<option value='ru'>Russian</option>
<option value='sr'>Serbian</option>
<option value='sk'>Slovak</option>
<option value='sl'>Slovenian</option>
<option value='es'>Spanish</option>
<option value='sv'>Swedish</option>
<option value='uk'>Ukrainian</option>
<option selected='vi' value='vi'>Vietnamese</option>
</select>
<input expr:value='data:blog.url' id='url' name='u' type='hidden'/>
<input name='sl' type='hidden' value='en'/>
<input name='hl' type='hidden' value='en'/>
<input name='ie' type='hidden' value='UTF-8'/>
<input style='width: auto;' type='submit' value='Go'/>
</td></tr></table></form>
<h6>Widget by <u><a href="http://hoctro.blogspot.com/2008/10/new-translation-widget.html">Hoctro</a> Bloggerize by <a href="http://obtemplate.blogspot.com/2009/06/translate-tools.html">OBTemplate</a></u></h6>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

This line below contains the source language. Since I'm writing this blog in English, my source initial is en. You must change to your source language initial from the the widget code above.

<input name='sl' type='hidden' value='en'/>

This line below contains the preferred target language. Since I am a "constructive" lazy kind of guy, my preferred target language is Vietnamese vi. You must change this to your preferred target language, such as French ('fr').

<option selected='vi' value='vi'>Vietnamese</option>

Also, change the word "Go" to your language:

<input style='width: auto;' type='submit' value='Go'/>

One last thing. If you don't want part of your text to be translated, add the class='notranslate' to the tag around it, such as this example below:

<span class='notranslate'>This text won't be translated.</span>

Until next time.

Cloud lables

noreply@blogger.com (Terry Hakim) — Sun, 12 Feb 2012 00:07:15 PST

To install the label cloud, techniques that I use this time is the fruit of the paper posted by phydeaux friend Rohman, and will be posted on this blog. Please follow the following steps:

Sign in blogger
Click the Layout
Click the Edit HTML
Click Download Full Template any posts, and save data. This is to be on the alert when an error occurs in the edit template code
Click the small box next to any posts in the Expand Widget Templates to give a check mark.
Wait some time until the process is complete
Save the following code on the exact code ]]></b:skin>
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
Copy and paste the following code above the code exactly </head>
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Find the following code in the code template buddy
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<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>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Change the code above with the following code:
<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point --------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<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>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>
Click the Save button template
Done.

Labels animation

noreply@blogger.com (Terry Hakim) — Sun, 12 Feb 2012 00:07:46 PST

Label this animation comes from the idea that friend Amanda and Rohman posted by a friend and I will post back in this blog:

The steps is easy, as the following:

Login to blogger with your ID.
Click Layout.
Click Edit HTML tab.
Click on any posts Download Full Template. please backup first though templatenya safe.
Find a code similar to the code below:
<b:section class='sidebar' id='sidebar' preferred='yes'>
or
<b:section class='sidebar' id='sidebar' showaddelement='yes'>
Copy and paste the code below exactly in the bottom of the code above:
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Click the button SAVE TEMPLATE
Done.

notes:

To change the width of the widgets:
width = "250"

To change the height widgets:
height = "200"

Create read more in line with paragraph

noreply@blogger.com (Terry Hakim) — Thu, 18 Jun 2009 17:52:27 PDT

In the postings, which is simple readmore with code like this:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'><b>Readmore.....</b></a>
</b:if>

You can change only slightly with the code </p:if> from the first position to the position as below :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><b>Readmore.....</b></a></p>
</b:if>

At the time of posting, do not use code like this:

<div class="fullpost">
</div>

But use the code like this:

<span class="fullpost">
</span>

If you perform the steps above, then any posts or more will be more in line with your post.

Newspaper style readmore with title

noreply@blogger.com (Terry Hakim) — Thu, 18 Jun 2009 17:51:48 PDT

That was discussed on the style of reading newspapers with a simple model, the following will be discussed Readmore style plus title

simply, follow the steps below:

You need to know beforehand that this special tricks go in for you that you have to use tricks such as posting more of Kang Rohman here. If the posting, the code is read more in the tide is like this:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Readmore...</strong></a></p>
</b:if>

So you need to change it to be like this:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<strong><a expr:href='data:post.url'>Readmore “<data:post.title/>”  »» </a></strong>
</b:if>

Do not forget to press the SAVE TEMPLATE button to mengakhirinya. Easy is not it?

Happy trying!

Newspaper style readmore

noreply@blogger.com (Terry Hakim) — Thu, 18 Jun 2009 17:51:14 PDT

As we read the newspapers, there are several paragraphs which appear with the headline news and more information on the next page, or often referred to Readmore. Similarly in a blog we can apply, there is some kind of model Readmore, from the simple to use some of our needs according trick.

Here is a simple form Readmore also a simple trick that I can from the fields Tutorial.

Here are the steps:
Step 1

Sign in to blogger with your id.
Click Settings
Click Format
At the bottom of the screen, there is an empty text area next to the Template Post any posts, content tesxt empty area with the code below:
<span class="fullpost">
</span>
Click the Save Settings
Installation of the code is intended to be in at the time of posting the article, the code appears directly without having to write first, so help us to not have to always remember the code.

Step 2

Click the Dasboard
Click Layout
Click Edit HTML tab
Check the box next to any posts in the Expand Widget Templates
Click on any posts Download Full Template.
Please save the template first, and is intended to reduce the risk if an error occurred while editting the template, we still have a back up data to restore it as
Wait a few moments when the process is underway
Please find the following code in the code template you belong:
<data:post.body/>
or the code below (same);
<p><data:post.body/></p>
Delete above code, and replace with the code below, click on the button to mark:
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Readmore...</strong></a></p>
</b:if>
Click the Save Template
Done.

How to Post Article

Click the Post
Click the Edit HTML, the code automatically appears that we have been setting before, namely:
<span class="fullpost">
</span>
Want to write articles that appear on the blog before the code:
<span class="fullpost">
Write the entire rest of the article after the above code before the code and earlier:
</span>
Click the button marked publish posts
Click on any posts View Blog (in new window) to see the results of our posting.

WordPress Tutorial

noreply@blogger.com (Terry Hakim) — Thu, 18 Jun 2009 17:50:42 PDT

Chris Abraham walks you through how to join the fastest-growing and most elegant free blogging services, WordPress.com. Go from the simple acts of joining all the way through set up and administration...

Become a blogger in few than 45-minutes. Most folks only need the first 15 minutes to get you started. Chris is a professional blogging instructor. Enjoy!

Blogger Tutorial

noreply@blogger.com (Terry Hakim) — Thu, 18 Jun 2009 17:50:05 PDT

Chris Abraham of the Writer's Center teaches you how to join and use the most popular free blogging service, Blogger. Follow Chris ...

as he walks you through registering and posting your first blog entry. 1/2 of step-by-step video training from Abraham PR, Applied Blogging, and the Writer's Center.

Solving the replacement template

noreply@blogger.com (Terry Hakim) — Thu, 22 Oct 2009 18:30:10 PDT

In general, if the initial template that we use does not have a similarity in the HTML code with the new template that we want to upload, of course there will be no problem in doing the replacement template. However, if I have problems in uploading the new template, you can cope with the following steps :

On the dashboard select the template you want to replace, then select Layout then Edit HTML and click Expand Widget Templates. (Download the template you used for the current guard)
Open the XML file from a new template that you want to upload in a text editor such as WordPad or Notepad + +
Next code search 'widget id'. One of the widgets that you meet such as this:
<b:widget id='Label1' locked='false' title='Categories' type='Label'>
You focus only on the <b:widget id='Label1'
Then you must replace it with a <b:widget id='Label11' and so on for 'widget id' that you meet, should be changed to double-digit
After you have finished changing all the 'widget id' do not forget to save, has been completed.
Once saved, you can upload the template. What is not easy.

Comment box does not appear

noreply@blogger.com (Terry Hakim) — Thu, 18 Jun 2009 17:48:49 PDT

How if you do not display the template box below the comment posting after you change the template as follows: :

Here is how to display a comment box at the bottom of the posting that often does not appear to change after the template:

On the dashboard select the template you want to show the city his comments, then select Layout then Edit HTML and click Expand Widget Templates.
Find a similar code as below :
<b:include data='post' name='comments'/>
Then you add the code below directly below the code above :
<b:include data='post' name='comment-form'/>
save the template you have finished perbaikin and you can see the results.

Other CSS Style From 9 Sites

noreply@blogger.com (Terry Hakim) — Sun, 12 Feb 2012 00:09:39 PST

The advantage of the great CSS menu that can be called "pre-design," is:

* It is very aesthetic, and they give your site a professional look.
* In general, very mild.
* Easy to add.
* And you can adapt to any site.
* In addition, we can find different kinds of free.

Here I make a list of sites that offer free CSS menu:

13 Styles

CSS Menu Builder

CSS Menu Maker

CSS Play

Dynamic Drive

CSS Portal

Exploding Boy (Vertical) (Horizontal) (Drop Down)

Izzy Menu

Styled Menus

How to Create Recent Comments via Feed

noreply@blogger.com (Terry Hakim) — Thu, 18 Jun 2009 17:47:09 PDT

Your blog is fully with comments ??

but, you don’t know where the last visitor give comment to your blog page / posting

this is solutions :

recent comment via Javascript has more advantage on appearance while recent comment via Feed is simple for the appearance but in the case of loading, it’s more faster.

How to use Feed:

Firstly, enter Layout -> Page Element -> Add a Page Element -> Feed and then in Feed URL, enter your feed address. There are two feed choices that can be used:

Use Feed Default Blogger

http://blog-name.blogspot.com/feeds/comments/default
Feed with FeedBurner

http://feeds.feedburner.com/blog-name

originally by : http://bengkel-log.blogspot.com/

notes: Don’t forget to change the red color with your blog name / your feed comment name

How to remove blogger navbar

noreply@blogger.com (Terry Hakim) — Thu, 18 Jun 2009 17:42:16 PDT

That’s the thing which everyone want to remove from his blog. Now it’s time to do it and i will help you.

But first of all i want to tell you what exactly is the blogger navbar. It gives a few options:

-to search in the blog

-to go to random chosen blog

-to mark the blog as spam

If you don’t want to have this navbar on your blog anymore just login in your blogger account, then to Layout, then to Edit HTML and after that you should put this code somewhere in before the end of HEAD tag:

#navbar-iframe {
display: none !important;
}

Put a header

noreply@blogger.com (Terry Hakim) — Thu, 18 Jun 2009 17:42:49 PDT

There are some who complaint that they had a problem when adding a header image without the Blog Title and Description. This problem happens if you use the templates Perfection, Ultimatum, Tranquility, Grease, and Portrait. Their header image is blocked behind the Linkbar.

Here's a way to solve this problem.

In your template XML file, look for the following CSS code:

#header a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0;
position: absolute;
top: 0px;
left: 0px;
}

To solve this problem, delete the code in red. That's it. The problem with the code in red is that it floats your header image and puts it near the tip of your blog. I was using this code for something else, but didn't realize it's there for these newer templates.

If you're still having this problem, just use the External template that doesn't have the problem anymore.

CSS Navbar Style

noreply@blogger.com (Terry Hakim) — Thu, 18 Jun 2009 17:43:17 PDT

CSS Navbar style made from Nicolas Template Para Voce with a minimalist style and is very simple.

Click sample to download :

Common Containers and Elements in a Blogger Template

noreply@blogger.com (Terry Hakim) — Wed, 27 May 2009 19:59:50 PDT

Here's a list of all the common containers and elements in a Blogger template and their funtions (elements are basically any object that make a blog funtions and containers are large elements that contains smaller elements or some other contents).

These common elements that I'll show are not necessarily the elements that exist or must exist in all Blogger templates, but are just some common elements that controls a large part of your template style. Knowing these elements will make it a lot easier for you to know where to look for in the template code and how to deal with other new elements that you may find in other templates.

I'm not going to list all the elements, but only enough elements so that you get the ideas and can understand all the other elements on your own. I will refer to the images from the CSS Styling Section below to make things easier to follow.

The symbols # and . show the attributes of the element (sort of a classification of the element type). But you don't have to worry much about this for now. If you want to know more about this, I suggest the W3Schools tutorials.

Global:

body {.....} - general properties for the whole template.
#outer-wrapper {.....} - the starting and largest container for all your template contents. Inside this is the header-wrapper, content-wrapper, and footer-wrapper.
#content-wrapper {.....} - the wrapper that contains sidebars and main containers.
a {.....} - this sets the overall properties of your link text.
a:visited {.....} - this sets the overall properties of your visited link text.
a:hover {.....} - this sets the overall properties of your link text when the mouse hovers over it.

Because all element codes must be contained within the {.....}, I'll just write the element titles after this.

Header:

#header-wrapper - the container that wraps your Blog Title and Blog Description.
#header - the container just inside the header-wrapper.
#header h1 - the command inside this containers controls the appearance and layout of your Blog Title.
#header h1 a - controls the properties of the Blog Title as a link text.
#header .description - the properties of your Blog Description.
#header a img - controls the properties of an image inside your header container.

Main:

#main-wrapper - the container that wraps your Date Header, Blog Posts, Comments, Feed Link, and any widgets that you drag above or below the Blog Posts.
#main - the container just inside the main-wrapper.
#main .widget - controls the properties of all widgets inside the main container.
h2.date-header - sets the properties of your Date Header (just above your Post Title).
.post - sets the properties of your Blog Posts container.
.post h3 - sets the properties of your Post Title.
.post-body p - sets the properties of the body or content of your post.
.post ul - sets the properties of an unordered list (a list that is not numbered).
.post ol - controls the properties of an ordered list (a numbered list).
.post li - controls the properties of the individual list inside an unordered list or an ordered list.
a img - controls the general properties of an image (the a refers to a link; and an image is by itself a link).

Sidebar:

.sidebar-wrapper - the container that wraps all elements and contents in a sidebar.
.sidebar - the container just inside the sidebar-wrapper.
#sidebar1 - sets the properties inside sidebar1.
#sidebar2 - sets the properties inside sidebar2. If you want the properties inside sidebar1 and sidebar2 to be the same, than you can just the properties inside .sidebar and don't have to even write down the #sidebar1 and #sidebar2 in your CSS code.
.sidebar .widget - controls the properties of all the widgets (the Added Page Element) in your sidebar.
#sidebar1 .widget - only sets the widgets in sidebar1.
.sidebar .BlogArchive - sets the Blog Archive properties. Technically, this is a sidebar widget too, but I'm not sure why setting the properties for sidebar widgets doesn't change any properties for the Blog Archive. That's why I have to write down the .BlogArchive command to set its properties.
.sidebar h2 - sets the title/header properties of a sidebar widget.
.sidebar #BlogArchive1 h2 -sets the properties of the Blog Archive's title.

Miscellaneous:

Technically, the Profile (About Me) container is placed inside a sidebar, but I'm putting it in the Miscellaneous section because there are many smaller elements that belong together with the Profile container and putting it in the Miscellaneous reduces the mess.

#Profile1 - sets the properties for the About Me block.
#Profile1 h2 - sets the title/header for the About Me block.
.profile-img a img - sets the image in the About Me block.
.profile-textblock - sets the author description About Me block.
.profile-data - sets the author's data in the About Me block.
.profile-datablock - sets the overall blocks of data in the About Me block.
blockquote - sets the quoted text in your posts.
code - sets the text contained within the code tags in your posts.

Post-Footer:

.post-footer-line - sets the properties for each new lines in the post-footer.
.post-footer a - sets the link text properties inside the post-footer.
.post-footer .post-comment-link a - sets the "comment" link inside the post-footer.
#blog-pager - controls the properties of the "newer posts", "home", and "older posts" links.
#blog-pager-newer-link - controls the properties of the "newer posts" link.
#blog-pager-older-link - controls the properties of the "older posts" link.
.feed-links - controls the "Subscribe to: Posts (Atom)" link.

Comment:

#comments - sets the overall comment container's properties.
#comments a - sets the link text properties inside a comment container.
#comments h4 - sets the header of the comment container.
.deleted-comment - sets the properties of the deleted comment.
.comment-author - sets the properties of the comment author.
.comment-body p - sets the comment body properties.
#comments ul - controls the unordered list inside a comment container.
#comments li - controls the individual list inside a comment container.

Footer:

#footer-wrapper - the container that wraps all elements and contents inside a footer section.
#footer - the container just inside the footer-wrapper.
#footer h2 - sets the properties of the footer title/header.
#footer .widget - controls the footer widget properties.
.footer a - controls any footer link texts.

Now that you know these containers and elements, you'll know where to look for in the template code whenever you want to change something about your template (fonts, text colors, background colors, padding, etc). What you do then is simply modify the codes inside the {.....} for that container or element only.

source: Our Blogger Templates