Modifikasi Blog dengan Bloger.

com
Setelah selesai membuat Blog, maka langkah selanjutnya adalah memodifikasi agar
tampilan lebih baik. Dan berikut langkah-langkahnya :
Membuat Navigasi Halaman pada Bloger
Navigasi halaman pada blogger adalah suatu hal yang sangat di tunggu - tunggu. Hal ini
karena bisanya navigasi halaman hanya ada pada wordpress. Navigasi halaman membuat
tampilan blog menjadi lebih menarik. Sebelumnya tidak ada yang berfikir kalau hal ini
akan bisa di terapkan di blogger.
Untuk meletakkannya di blog anda berikut langkah - langkahnya :
1. Masuk ke Dashboard > Lay out > Edit HTML
2. Jangan tick kotak "Expand Widget Tempalate"
3. Lalu temukan
]]></b:skin>
4. Dan gantikan dengan
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;

}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>
5. Sekarang bagian Java Script nya. Temukan
</body>
6. Gantikan dengan
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js'
type='text/javascript'/>
</b:if>
<!--Page Navigation Ends->
</body>
Ada beberapa hal yang bisa anda rubah menurut kebutuhan anda.
var pageCount=5;
Kode ini menerangkan jumlah postingan per halaman, anda bisa merubahnya.
var displayPageNum=5;

Kode ini menerangkan tambahan jumlah navigasi halaman yang akan di tampilkan pada
halaman blog.

Nah secara default blogger akan menampilkan 20 posting per halaman, kita harus
merubahnya agar sesuai. Dan untuk melakukannya kita harus edit template blog kita.
Bagaimana caranya?
Silahkan masuk ke 'Edit HTML' dan tick kotak "Expand Widget Template"
Lalu temukan setiap kode berikut :
'data:label.url'
Dan gantikan setiap kode tersebut dengan :
'data:label.url + &quot;?&amp;max-results=5&quot;'
Angka "5" di atas menunjukkan jumlah postingan per halaman.
Jika anda menggunakan widget label cloud dari phydeaux3 lalu temukan :
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
Dan gantikan dengan :
a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;maxresults=5&#39;;
Jangan lupa save setelah itu. Dan sekarang anda akan mendapatkan navigasi halaman
yang cantik seperti gambar ini :

Tutorial ini saya dapatkan dari Bloggerplugins dan Kode berdasarkan kode dari Abu
Farhan dan Muhammad Rias.
Silahkan mencoba....

Triks mengganti favicon standar blogger

Thursday, September 3, 2009

Apa itu Favicon?

Ketika anda menggunakan internet explorer Firefox atau opera, anda akan melihat sebuah
icon kecil yang letaknya berada di sebelah kiri URL yang anda ketik. Itulah yang di sebut
favicon.
Untuk blogger, standar favicon terlihat sangat jelek. Dan anda bisa menggatinya sesuai
dengan selera anda. Kalau anda belum tahu juga apa itu favicon, inilah contoh favicon
blogger.

Hhmm. terlihat jelek dan membosankan kan?

Untuk menggantinya pertama yang anda harus lakukan adalah pilih gambar atau icon
yang anda sukai untuk dijadikan sebagai favicon nantinya. Untuk selanjutnya anda bisa
menyimpan gambar atau icon tersebut di suatu tempat di internet, contohnya adalah
photobucket.
Dari situ anda akan mendapatkan URL untuk gambar/icon anda itu.
Nah sekarang tahap selanjutnya masuk ke dalam Blogger Template lalu Edit HTML
Lalu temukan title tag yang mirip seperti

Dan selanjutnya segera tambahkan kode berikut setelah kode di atas..

Jangan lupa untuk mengganti "URL of your icon file" dengan URL dari icon anda
tersebut. Setelah itu jangan lupa untuk menyimpan perubahan anda tadi. Ok selamat
mencoba.

Cara membuat Follow me Twitter

Wednesday, October 14, 2009

Tidak di sangsikan lagi saat ini Twitter menjadi ikon baru dalam jaring sosial di internet.
Dan di prediksi ke populeran twitter akan dapat mengalahkan Facebook yang saat ini
sedang booming.
Nah jika anda mempuyai sebuah blog dan anda ingin meletakkan ikon follow me Twitter
berikut saya terangkan di bawah. Tidak perlu pusing membuat ikon twitter yang unik unik karena sudah tersedia banyak dan lucu - lucu.
Nah begini caranya :
1. Anda harus mempunyai account di twitter dulu, kalau belum silahkan daftar disini.
2. Lalu anda buka website Twitter Icon ini.
3. Lalu anda tinggal pilih mana icon twitter yang cocok dengan anda. Ada banyak pilihan
disini.

4. Masukkan id anda dan tekan Go seperti gambar berikut.

5. Setelah itu copy kode HTML di bawah icon twitter

6. Lalu anda masuk ke Dashboard account blogger anda>>Lay Out>>Page
Element>>Add Gadget>>HTML/Java Scrip dan jangan lupa Save.

7. Coba lihat blog anda, maka icon twitter follow me sudah berada disana.
Cara mudah dapat ranking klik disini.

Membuat posting terkait (Related Post)

Thursday, October 8, 2009

Baik sekarang kita coba meniru detik.com lagi. Sebagai pemilik blog kita pasti tidak mau
begitu saja kehilangan pembaca kita. Nah salah satu yang dapat membuat pembaca betah
melihat blog kita karena mudahnya mendapatkan informasi yang dia butuhkan, salah
satunya dengan membuat posting berkaitan.
Posting berkaitan disamping mempermudah pembaca blog kita dalam mencari artikel
yang mereka butuhkan juga akan menambah page views dari blog kita.
Nah punya 2 keuntungan kan. Widget ini merupakan daftar artikel terkait berdasarkan
Label yang sama, bukan isi yang sama. Tapi kurang lebih sama. Untuk membuatnya anda
dapat mencoba langkah - langkah di bawah ini.
Berikut langkah - langkahnya :

Pertama - tama masuk ke Layout > Edit HTML

Jangan lupa untuk back up dulu dengan Download Full Template untuk
menghindari hal - hal yang tidak di inginkan.
Tick Expand Widget Template
Lalu cari kode berikut :

<data:post.body/>

Paste kan kode berikut tepat di bawahnya :

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

<div class='similiar'>
<span class='box'>
<div class='widget-content'>
<h3>Related Posts</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 6;
maxNumberOfLabels = 100;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;

}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);

div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);

var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?

labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</span></div>
</b:if>

Simpan layout

Jumlah Label dan artikel yang akan muncul anda bisa atur.Caranya yaitu ubah
maxNumberOfLabels untuk mengganti jumlah label yang muncul.
Ubah maxNumberOfPostsPerLabel untuk mengganti jumlah label yang muncul. Yang
perlu anda perhatikan adalah anda harus menambahkan satu pada jumlah artikel yang
ingin ditampilkan. Jadi, kalau ingin memunculkan enam artikel, maka angka yang harus
dimasukin di maxNumberOfPostsPerLabel adalah tujuh.
Selamat mencoba!!!

Menyingkat Posting dengan "Read More"

Nah sekarang mari kita coba untuk meniru detik.com dengan "Read More". Postingan di
detik.com terlihat professional karena suatu postingan tidak terlihat memanjang karena di
potong oleh "Read More".
Jadi kalau kita ingin melihat isi dari postingan kita dapat klik judul postingan untuk
mendapatkan artikel yang lengkap. Nah sudah mengerti kan apa itu "Read More".
Sekarang mari kita coba membuat "Read More" pada blog kita, agar blog kita tidak
panjang karena banyaknya artikel yang di tulis.
Berikut langkah - langkahnya :

Temukan kode berikut :

<div class='post-header-line-1'/>
<div class='post-body'>

Lalu anda ubah menjadi seperti ini :

<div class='post-header-line-1'/>
<div class='post-body'>

<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'>Read More......</a>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>
Kode yang bercetak tebal adalah Kode yang anda tambahkan, untuk bacaan "Read More"
bisa anda ganti dengan yang anda suka.
Nah sekarang menerapkannya pada postingan..
Lakukan seperti ini :

Pilih bagian mana yang anda ingin potong

Lalu setelah pada bagian yang ingin anda potong, tambahkan

<span class="fullpost">

Setelah itu pada bagian akhir tambahkan :

</span>

Selesai....silahkan coba...

Menambahkan ikon Sosial Bookmarking setelah posting

blog

Sosial Bookmarking ikon termasuk salah satu widget yang di cari untuk di letakkan di
blog. Karena dengan adanya sosial bookmark termasuk salah satu cara untuk menambah
traffic datang ke blog anda.
Apabila ada pembaca blog anda tertarik pada salah satu artikel, mereka bisa
menambahkannya pada facebook, twitter, technorati, dll. Apabila pembaca blog anda
mempunyai komunitas atau jalinan yang banyak dalam jaring sosial tersebut maka
otomatis akan membuat pengunjung ke blog anda bertambah.
Nah, berikut cara untuk menambahkan ikon sosial bookmarking tersebut ke dalam blog
anda (termasuk Facebook, twitter, google, yahoo, dll) :
1. Pertama masuk ke dashboard dan Klik "Layout"
2. Masuk "Edit HTML" back up template anda dulu agar lebih aman
3. Kemudian contreng "Expand widget template"
4. Lalu temukan kode

Lalu ganti dengan

5. Lalu cari

Kalau tidak ada coba temukan

6. Dan letakkan kode pada file berikut tepat setelah kode di atas, yang ada pada template
anda.
Kalau semua berhasil maka anda akan dapatkan seperti berikut :

Nah selamat mencoba....

Trik membuang Blogger Navbar

Sebelum saya terangkan cara bagaimana menghilangkan blogger Navbar, mungkin anda
belum tahu apa itu Navbar. Blogger Navbar mungkin tidak terdapat di semua template
blogger, tetapi Navbar pasti terdapat pada template default dari Blogger.
Kira - kira bentuknya seperti ini :

Nah Navbar ini memiliki kerugian bagi para pemilik blog, karena pengunjung dapat
mudah untuk keluar dari blog yang dibacanya dengan meng klik "next blog".
Untuk menghilangkannya berikut adalah caranya :
1. Masuk ke account blogger anda
2. Klik menu Layout pada dashboard anda
3. Lalu klik "Edit HTML" tapi jangan contreng "expand widget"
4. Anda akan melihat kode dari template anda
5. Lalu temukan kode
]]>b:skin>

Lalu gantikan dengan

#navbar-iframe { display: none !important; }
]]>b:skin>
6. Jangan lupa di save setelah itu.
Nah coba sekarang anda buka halaman blog anda, Navbar sudah tidak
terlihat lagi.
Selamat mencoba..

Cara Mudah Posting Kode HTML

Ketika pertama kali saya mencoba posting Kode HTML di blog, saya selalu kesulitan.
Karena kode HTML selalu tumpang tindih dengan default posting.
Nah sekarang ada cara yang mudah dalam membuat posting Kode HTML. Di jamin
postingan tidak akan sulit karena di tolak akibat ada Kode HTML yang salah, yaitu
dengan meng - encode kode HTML yang akan di posting.
Ada situs online yang melayani fasilitas ini, anda bisa langsung mencobanya. Yang ada
harus lakukan adalah silahkan buka alamat situs ini :
http://centricle.com/tools/html-entities/
Nah sekarang yang anda harus lakukan cuma hapus kode yang ada dalam halaman seperti
:
Ampersands & angle brackets need to be encoded.
Seperti contoh gambar berikut :

Lalu anda masukkan kode HTML yang akan anda buat dalam postingan. Setelah itu tekan
encode, lalu anda tunggu sebentar sampai proses selesai.
Setelah selesai anda copy kode tersebut dan Paste kan ke dalam postingan yang anda
buat.
Mudahkan, silahkan coba

Alternatif comment form untuk blogger

Kalau anda merasa bentuk form komentar dari blogger sangat standar dan kurang
menarik bagi blog anda, maka anda perlu alternatif form komentar yang lebih menarik.
Seperti kita ketahui komentar di blog sangat berperan bagi kehidupan dari blog tersebut.
Saat ini banyak tersedia widget comment yang menarik yang dapat di aplikasikan di blog
anda. Salah satu yang sangat menarik tampilannya adalah intense debate. Agar anda
dapat melihat langsung demo dari intense debate, saya memakai comment form untuk
anda dapat memberikan komentar dan melihat hasilnya.
Intense debate saat ini dimiliki oleh automattic yang juga adalah pembuat dari wordpress.
Berikut contoh dari intense debate.

Untuk dapat mencobanya anda dapat klik intense debate disini.

Silahkan mencoba......