Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Cara mengembalikan (restore) original permalink.

Kamis, Juli 07, 2011

Jika kita merubah url blog, maka secara otomatis permalink (url untuk setiap posting) juga akan berubah. Dan jika blog kita ini sudah mempunyai backlink, maka link ini akan menjadi deadlink (page not found). Lantas apa yg harus kita lakukan?

Salah satu alternatif solusi dari masalah diatas adalah dengan mengembalikan (restore) original permalink, yaitu dengan cara mengembalikan url blog dengan url yang lama (url sebelum dirubah). Langkah-langkahnya adalah :
1. Buka dashboard blogspot.
2. Klik setting > publishing.
3. Ketikan url blog yang lama.
4. Klik save.

Jika sudah selesai, maka secara otomatis permalink blog sudah kembali menjadi permalink yang lama (original permalink). Perlu diingat, untuk melakukan cara ini, harus dilakukan secepat mungkin. Karena kemungkinan ada blog lain yang telah menggunakan url blog kita.

Selamat mencoba.

Cara Menuliskan Link Blog Di Kolom Komentar

Selasa, Mei 03, 2011

Mungkin artikel ini terasa basi. Tapi mungkin perlu, bagi yang membutuhkan tentunya. Bagaimana cara menuliskan link blog kita di kolom komentar pada saat kita blogwalking atau sekedar ingin mempromosikan blog kita.

Banyak komentar-komentar di blog saya ini yang belum tepat saat menuliskan link blognya. Hanya ditulis alamatnya saja, tanpa bisa diklik. Kan saya jadi repot kalau mau berkunjung balik….hehehhe…. Mungkin selain saya yang kerepotan, ada pengunjung lain yang kadang tertarik dengan isi komentarnya dan ingin menuju alamat yang ditinggalkan, mereka harus menuliskannya secara manual di browser.

Padahal sangat mudah untuk menuliskan link di kolom komentar. Kita hanya perlu menambahkan sedikit tag HTML pada url yang dimaksud. Tagnya adalah :

<a href="URL Link" target="blank">Nama Link</a>

Contoh :

<a href="http://yogopunyablog.blogspot.com"
target="blank">Sumber Belajar</a>

Nanti, link tersebut akan terlihat seperti ini :

sumber belajar

Selamat mencoba…

Cara Memasang Dinamik Meta Description Tag

Minggu, Januari 16, 2011

Jika kita memasang meta tag untuk deskripsi blog kita, itu sebenarnya adalah deskripsi untuk home page blog. Jika ada pembaca yang membuka halaman konten, kadang google akan menganggapnya sebagai duplicate meta tag.

Berikut ini adalah cara mengatasi duplicate meta tag dengan cara memasang dinamik meta description tag. Maksudnya adalah agar setiap halaman blog memiliki meta deskripsi tag yang unik, sehingga google tidak menganggapnya sebagai duplicate meta tag.

Cari kode berikut :

<b:include data='blog' name='all-head-content'/>

Copy dan paste kode berikut ini tepat setelah kode diatas.

<META NAME='description' expr:content='data:blog.

pageTitle + &quot;,

TULIS DESKRIPSI BLOG ANDA DISINI &quot;'/>

Ganti TULIS DESKRIPSI BLOG ANDA DISINI dengan deskkripsi blog Anda yang sebenarnya, dan pisahkan dengan koma jika Anda ingin memberikan deskripsi lebih dari satu. Simpan, dan selesai.

Sekarang blog Anda memiliki deskripsi yang berbeda untuk setiap halaman kontennya. expr:content= ‘data:blog.pageTitle’ berfungsi untuk menambahkan judul posting Anda sebagai deskripsi halaman, sehingga masing-masing halaman memiliki deskripsi yang berbeda.

Cara Menghilangkan Url Komentator Di Blogger

Jumat, November 12, 2010

Perhatikan blog Anda. Lihat nama komentator posting Anda. Disetiap nama tersebut adalah juga url si komentator. Baik itu url profil komentator, atau url blog komentator itu sendiri.
Jika Anda ingin menghilangkan url komentator blog, bisa dengan langkah-langkah sederhana berikut ini :

Login ke dashboard > Rancangan > Edit HTML
Centang Expand widget template

Cari kode berikut ini :

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

Ganti kode diatas dengan

<data:comment.author/>

Save dan selesai.

Selamat Mencoba.

Membuat Menu Reply Di Komentar Blogger

Selasa, November 09, 2010

Pada tutorial kali ini saya akan memperlihatkan cara membuat menu reply di kolom komentar blogger seperti yang terlihat di blog-blog wordpress pada umumnya.

Untuk membuat menu reply atau jawab seperti gambar diatas, berikut caranya :

Login ke Dashboard > Rancangan > Edit HTML
Klik pada “Expand Widget Template”
Temukan kode berikut ini
```
<data:commentPostedByMsg/>
```

Copy dan paste kode berikut ini tepat setelah kode diatas.
```
<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=ID-BLOG_ANDA&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>[Reply]</a></span>
```
Ingat : Ganti ID-BLOG-ANDA dengan ID blog Anda yang sesungguhnya.

Save dan selesai.

Sebagai tambahan saja, untuk mencari ID blog Anda silahkan ikuti langkah-langkah berikut :

Masuk Dashboard blog Anda.

Klik menu setting / pengaturan

Lihat di address bar browser Anda. Disana terlihat : http://www.blogger.com/blog-options-basic.g?blogID=3854839334593264567

Angka-angka yang berwarna merang tersebut adalah ID blog Anda.

Selamat mencoba.

Membuat Blog Kompatibel Dengan Mobile Browser

Apakah Anda sering browsing menggunakan handphone? Jika Anda perhatikan, site yang Anda buka dengan handphone berbeda tampilan ketika Anda membuka site yang sama menggunakan komputer. Anda bisa mengaplikasikan tampilan blog Anda menjadi berbeda ketika diakses dengan handhone dan ketika diakses dengan komputer.

Untuk membuat tampilan blog kompatibel dengan mobile browser tidaklah rumit, berikut cara untuk membuat tampilan blog berbeda ketika diakses dengan menggunakan mobile browser di handphone :

Login ke Dashboard > Rancangan > Edit HTML
Temukan kode berikut ini :
```
<b:include data='blog' name='all-head-content'/>
```

Copy kode dibawah ini, dan paste tepat sebelum kode diatas.

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

<b:else/>

<meta content='width=1100' name='viewport'/>

</b:if>

Save dan selesai.

Sekarang blog Anda akan tampak berbeda ketika diakses dengan menggunakan mobile browser. Ini akan berguna untuk menambah pengunjung blog yang menggunakan mobile browser.

Membuat Gambar Header Blog Berubah Otomatis

Senin, November 08, 2010

Apakah Anda bosan dengan gambar header blog yang itu-itu saja? Anda bisa menggantinya dengan gambar baru. Weits….tunggu, jangar berpikir ribet dulu. Ada cara mudah untuk mengganti gambar header blog Anda secara otomatis. Jadi Anda tidak musti repot mengganti gambar dengan cara upload secara manual.

Maksud dari gambar header blog yang berubah secara otomatis disini adalah gambar yang ada pada header akan berubah dengan gambar yang lain ketika halaman blog direfresh. Berikut adalah langkah-langkah untuk mengubah gambar header blog secara otomatis :

1. Login ke dashboard > rancangan > edit HTML

2. Cari kode :

<body>

3. Copy dan paste kode dibawah ini tepat dibawah kode diatas.

<script type='text/javascript'>
var HeaderImage= new Array()
HeaderImage[0]=&quot;URL-OF-HEADER-IMAGE-1&quot;
HeaderImage[1]=&quot;URL-OF-HEADER-IMAGE-2&quot;
HeaderImage[2]=&quot;URL-OF-HEADER-IMAGE-3&quot;
HeaderImage[3]=&quot;URL-OF-HEADER-IMAGE-4&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-5&quot;
var random=Math.round(4*Math.random());
document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; 
background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);
</script>

Catatan :
Rubah URL-OF-HEADER-IMAGE dengan url gambar Anda.
Jika kode diatas tidak berfungsi pada template blog Anda, coba rubah tag

#header-wrapper

dengan :

#header

Anda juga bisa menambah jumlah gambar yang ingin dirubah lebih dari 5, tetapi ingat untuk merubah juga tag

4*Math.random()

Angka 4 disana berarti Anda ingin merubah 5 gambar. Jika Anda ingin merubah 8 gambar, maka angka 4 dirubah menjadi 7.

4. Sekarang simpan dan selesai. Refresh blog Anda di browser untuk melihat hasilnya.

Selamat mencoba.

Cara Membuat Featured Post Di Blogger

Rabu, Oktober 13, 2010

Sering kita melihat blog dengan template magazine style yang menampilkan featured post. Widget ini berguna untuk menampilkan headline artikel atau artikel yang dianggap menarik untuk disimak. Pada tutorial kali ini, kita akan membahas cara membuat dan memasang freatured post di blogger.

Tidak seperti wordpress yang dengan mudahnya membuat featured post, tinggal pasang plugin saja sudah beres. Di blogger, kita sedikit memerlukan langkah-langkah yang panjang. Berikut langkah-langkah membuat dan memasang featured post di blogger.

Yuk mulai….

I. Buat space atau tempat di template blog.

Biasanya, featured post hanya akan kelihatan di homepage saja. Maka kita membutuhkan tag khusus untuk menampilkan featured post tersebut agar tidak mungcul di halaman konten.

Berikut ini tag untuk menempatkan featured post :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='tabs' id='crosscol-homepage' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='FEATURED POST' type='HTML'/>
</b:section>
</b:if>

Letakkan kode tersebut pada tempat yang diinginkan. Cara menempatkannya, masuk ke dashboard > Layout > HTML. Cek expand widget template. Agar aman, backup dulu template blog anda.

II. Persiapkan Script Featured Post-nya.

Copy dan paste kode berikut ini tepat sebelum tag </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[/* ------------------------------------------------------------------------s3SliderDevelopped By: Boban Karišik -> http://www.serie3.info/CSS Help: Mészáros Róbert -> http://www.perspectived.com/Version: 1.0Copyright: Feel free to redistribute the script/modify it, as long as you leave my infos at the top.-------------------------------------------------------------------------- */(function($){$.fn.s3Slider = function(vars) {var element = this;var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;var current = null;var timeOutFn = null;var faderStat = true;var mOver = false;var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");items.each(function(i) { $(items[i]).mouseover(function() { mOver = true; }); $(items[i]).mouseout(function() { mOver = false; fadeElement(true); });});var fadeElement = function(isMouseOut) { var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut; thisTimeOut = (faderStat) ? 10 : thisTimeOut; if(items.length > 0) { timeOutFn = setTimeout(makeSlider, thisTimeOut); } else { console.log("Poof.."); }}var makeSlider = function() { current = (current != null) ? current : items[(items.length-1)]; var currNo = jQuery.inArray(current, items) + 1 currNo = (currNo == items.length) ? 0 : (currNo - 1); var newMargin = $(element).width() * currNo; if(faderStat == true) { if(!mOver) { $(items[currNo]).fadeIn((timeOut/6), function() { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } else { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } }); } } else { if(!mOver) { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } else { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } } }}makeSlider();};})(jQuery);//]]></script><script type='text/javascript'>$(document).ready(function() {$('#s3slider').s3Slider({timeOut: 4000});});</script><style type='text/css'>#s3slider {background:#000000;border:1px solid #818e8f;width: 550px;height: 200px;position: relative;overflow: hidden;}#s3sliderContent {width: 550px;position: absolute;top:-14px;padding: 0px;margin-left: 0;}.s3sliderImage {float: left;position: relative;display: none;}.s3sliderImage span {position: absolute;left: 0;font: 20px Trebuchet MS, sans-serif;padding: 10px 0px;width: 550px;background-color: #000;filter: alpha(opacity=80);-moz-opacity: 0.8;-khtml-opacity: 0.8;opacity: 0.8;color: #fff;display: none;bottom: 0;text-align:center;}.clear {clear: both;}</style>

Lalu simpan template anda.

III. Pasang Script featuret post di template blog.

Sekarang pasang tag featured post di elemen atau tempat yang telah dibuat pada langkah I. Masuk ke Layout > Page Element

Copy dan paste kode berikut di elemen yang telah dibuat pada langkah I diatas.

<div id="s3slider"><ul id="s3sliderContent"><li class="s3sliderImage"><a href="LINK-ARTIKEL-ANDA"><img style="width:550px;height:200px;" src="LINK-GAMBAR-PERTAMA" /><span>JUDUL-ARTIKEL</span></a></li><li class="s3sliderImage"><a href="LINK-ARTIKEL-ANDA"><img style="width:550px;height:200px;" src="LINK_GAMBAR" /><span>JUDUL-ARTIKEL</span></a></li><li class="s3sliderImage"><a href="LINK-ARTIKEL-ANDA"><img style="width:550px;height:200px;" src="LINK-GAMBAR" /><span>JUDUL-ARTIKEL</span></a></li><li class="s3sliderImage"><a href="LINK-ARTIKEL-ANDA"><img style="width:550px;height:200px;" src="LINK-GAMBAR" /><span>JUDUL-ARTIKEL</span></a></li></ul></div><div class='clears3sliderImage'></div>

Jika anda pusing atau merasa ribet dengan langkah II dan III, ada solusi lain. Jika langkah I sudah selesai, buka Layout > Page Element. Lalu pada elemen Featured Post yang baru dibuat tersebut, tempatkan kode berikut ini :

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style><script style="text/javascript" src="http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js"></script><script style="text/javascript">var numposts = 5;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script>
<script src="http://NAMABLOG.blogspot.com/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Ganti NAMABLOG dengan nama blog anda, kemudian save. Untuk menampilkan artikel yang akan ditampilkan sebagai featured post, buatlah kategori baru bernama “featured” dan masukan posting yang akan ditampilkan didalam kategori “featured”.

Selamat mencoba.

Credit : Terimakasih untuk : Lasantha dan Suhas untuk berbagi scriptnya.

Cara Menampilkan Atau Menyembunyikan Widget di Blogger

Jika kita melihat blog dengan tampilan yang rapi, kita akan merasa "betah" untuk melihat konten-konten yang ada didalamnya. Hal ini menguntungkan pemilik blog. Sebaliknya, jika kita melihat blog dengan tampilan yang acak-acakan, maka kita sudah berpikiran jelek tentang blog tersebut. Nah, bagi anda yang ingin menata blog, yang merasa blognya penuh dengan widget, berpikirlah ulang untuk menampilkan atau menyembunyikan widget - widget tersebut.

Cobalah untuk menampilkan widget yang berguna saja, karena selain menambah kerapian, juga meningkatkan kecepatan pageview. Pilihlah widget yang akan ditampilkan di homepage (halaman utama) dan widget yang akan ditampilkan di content page (halaman posting). Setelah selesai dengan acara pilih memilih, berikut cara menampilkan atau menyembunyikan widget.

I. Menampilkan widget hanya pada homepage (halaman utama) saja.

Menampilkan widget hanya pada homepage artinya, widget tersebut nantinya hanya akan nampak di homepage. Jadi dihalaman konten atau posting tidak akan nampak. Caranya :

1. Pilih widget yang akan ditampilkan di homepage saja tersebut.

2. Masuk ke pengaturan HTML template

3. Tambahkan tag yang berwarna merah pada kode HTML widget yang bersangkutan.

<b:widget id='HTML50' locked='false' title='NAMA WIDGET' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

4. Simpan.

II. Menampilkan widget di content page (halaman konten/posting)

Hampir sama dengan diatas, hanya nantinya widget ini akan nampak pada halaman konten saja. Jadi widget yang bersangkutan tidak akan kelihatan di homepage. Caranya :

1. Pilih widget yang bersangkutan.

2. Masuk ke editor HTML template

3. Tambahkan tag berwarna merah pada tag widget yang bersangkutan.

<b:widget id='HTML15' locked='false' title='NAMA WIDGET' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

4. Selesai.

Nah, sekarang di blog anda ada widget yang hanya nampak di homepage atau content page saja. Selamat mencoba, selamat menata blog.

Cara Menghilangkan Navbar Blogger (Terbaru).

Jumat, Oktober 08, 2010

Sekarang blogger telah mengadakan perubahan besar dengan menambahkan tool-tool yang makin berguna. Dengan adanya perubahan ini, mungkin bagi teman-teman semuya yang ingin menghilangkan navbar di blog dengan teknik yang lama mungkin sudah tidak bekerja lagi.
Sekarang ada teknik baru untuk menyembunyikan navbar blogger di tahun 2010 ini.

Berikut adalah langkah- langkah untuk menghilangkan navbar di blogger :

Masuk ke dashboard > design > edit HTML
Cari tag : </ b: skin> di template anda.
Sisipkan kode : navbar (bla;) tepat sebelum kode diatas.
Simpan.

Selesai. sekarang navbar blog anda sudah hilang. Selamat mencoba.

Cara Membuat Contact Us Di Blogger

Selasa, September 21, 2010

Sering kita melihat menu Contact Us di situs-situs tertentu. Banyak maksud dari pemasangan menu ini, dari mengetahui feedback pembaca sampai pemesanan barang yang ditawarkan. Nah jika kita ingin membuat blog bisnis, terutama yang menggunakan blogger, tidak ada fasilitas untuk memasang menu ini. Pada posting kali ini saya akan membahas cara membuat contact us di blogger.

Langsung saja pada langkah-langkah memasang menu Contact Us di blogger.

Daftar di http://www.formstack.com dan ikuti petunjuk-petunjuk yang ada.
Setelah terdaftar, mulai buat sebuah form dengan mengikuti langkah-langkah yang telah disediakan disana.
Setelah selesai dengan perancangan form, copy code HTML dari form tersebut.
Buat posting baru di blog anda.
Paste kode HTML form yang telah anda buat. Posting tidak perlu diberi judul.
Terbitkan posting anda.
Buat menu pada navigasi blog anda dengan nama "Contact Us" dan arahkan link menu tersebut pada posting form contact us anda.
Selesai.

Sekarang anda sudah mempunyai form contact us di blog anda. Selamat mencoba.

Plugin, Widget, Dan Permalink

Jumat, November 27, 2009

Pasti anda sudah sering melihat kata-kata ini : plugin, widget, dan permalink. Sebagai seorang blogger tentu anda sudah sering melihat kata-kata tersebut dan mungkin sering mengutak atiknya. Tetapi apa sebenarnya plugin, widget, dan permalink ini? Apa saja kegunaan mereka untuk blog? Mari kita bahas satu persatu.

PLUGIN

Plugin adalah sebuah program kecil yang berjalan dalam sebuah blogging platform (misalnya wordpress.org). Mereka bukanlah sebuah program yang bisa berjalan sendiri, melainkan bekerja dibawah perangkat lunak blog. Nah fungsi dari plugin ini untuk memperluas kinerja atau bersifat menambah kinerja dari perangkat lunak blog itu sendiri.

Dengan memasang plugin di blog, anda sebagai pemilik blog atau blogger akan dimudahkan untuk menambah foto, video, atau konten lain di blog anda. Dan membuatnya lebih mudah dibaca oleh pengunjung blog anda.

WIDGET

Widget adalah sebuah tool yang digunakan untuk menambah performa blog. Biasanya dipasang di sidebar blog. Seperti plugin, widget bisa ditambahkan pada sebuah blog, dan dapat dirubah posisinya dengan cara di drag (klik lalu seret) ke tempat yang diinginkan.

Standar widget untuk blogspot platform seperti Followers, Labels, Logo, Header, Arsip, Links, dll. Sedangkan widget standar untuk wordpress adalah RSS , Text, Blogroll, Kalender, Recent Post, Archives, Pages, Kategori.

PERMALINK

Untuk setiap posting blog pasti diberikan alamat atau url tersendiri. Masing-masing posting akan mempunyai url yang berbeda. Halaman web juga mempunyai alamat atau url tersendiri. Alamat atau url inilah yang disebut sebagai permalink.

Di wordpress, secara default permalink memiliki bentuk sebagai berikut :

http://bloganda.com/?p=28/

p untuk post dan 28 adalah nomor yang diberikan oleh wordpress untuk posting anda. Anda bisa merubah permalink ini agar lebih informatif dan mudah diingat seperti http://bloganda.com/judul-posting-anda/

Sedangkan untuk blogspot, permalink mempunyai bentuk seperti ini :

http://bloganda.com/2009/11/judul-posting.html

2009 adalah tahun pada saat kita mempublish pasting kita, 11 adalah bulan saat posting diterbitkan, dan judul-posting ya judul dari posting kita.

Sayangnya kita tidak bisa mengganti permalink di blogspot. Sehingga kita harus sangat hati-hati dalam memilih judul posting, usahakan sependek mungkin dan sejelas mungkin. Kenapa harus pendek? Karena jika judul posting kita terlalu panjang maka akan terpotong, sehingga permalink jadi terlihat aneh, dan katanya mengganggu SEO.

Mudah-mudahan posting ini berguna bagi anda, jika ada kesalahan mohon dibetulkan. Atau anda mau menambahkan beberapa penjelasan?

Happy blogging.

Mencoba Disqus Commenting System

Selasa, November 03, 2009

Sebagai blogger saya senang jika tulisan saya banyak yang memberi komentar (sayangnya blog saya sepi komentar....) Tapi saya berharap saja nanti pengunjung blog ini akan memberikan komentar pada tulisan saya. Nah, untuk memudahkan moderasi komentar, saya mencoba menggunakan layanan commenting system dari disqus. Katanya dengan mengunakan layanan ini, moderasi komentar jadi lebih asik dan terlihat seperti forum diskusi.

Banyak fitur yang ditawarkan oleh disqus, anda cek sendiri saja untuk lebih lengkapnya kunjungi saja websitenya. Silahkan daftar dan cobalah di blog anda, gratis kok. Proses pendaftarannya sudah jelas di websitenya, anda hanya perlu mengikuti instruksi yang ada disana. Ini posting pertama saya menggunakan layanan dari disqus, silahkan dicoba tool ini dengan memberi komentar.

Oya karena saya baru pertama kali memakainya, saya belum tahu kekurangan dari tool ini, jadi saya minta pendapat dari master-master blogger untuk memberikan saran tentang tool ini.

Selamat mencoba.

Hack Template Blogger Agar SEO Friendly

Jumat, Oktober 23, 2009

Baru mengganti template blog anda? Apakah template blog anda sudah SEO friendly? Pada tutorial ini akan dibahas cara hack template blogger agar SEO friendly, khususnya pada bagian title dan heading. Banyak template blog yang bagus-bagus secara design diluar sana, kebanyakan dari template tersebut mementingkan masalah design. Kita yang akan memakainya perlu sedikit memodifikasi agar optimal.

Berikut ini cara hack title dan head template blogger agar SEO friendly.

Title

Masuk ke edit HTML template anda, kemudian temukan kode ini :

<title><data:blog.pageTitle/></title>

Lalu ganti dengan kode berikut :

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/>|keyword1|keyword2|dst</title>
</b:if>

Gantilah keyword1, keyword 2, dst dengan keyword anda.

Meta Tag

Selesai dengan title, tambahkan meta tag di template blog anda. Caranya letakan kode berikut ini diatas kode <b:skin><![CDATA[/*

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="Deskripsi Blog Anda" />
<meta name="keywords" content="Keyword1, keyword2, keyword3,dst" />
</b:if>

Gantilah keyword1, keyword2, keyword3, dst dengan keyword anda.

Heading

Selesai dengan title dan menambah meta tag, sekarang saatnya anda meng-hack heading blog. Perlu anda ketahui, seluruh judul widget blogger menggunakan Tag H2. Namun, Template Minima menggunakan tag H3 untuk judul posting dan kebanyakan template blogger menggunakan Tag H2 untuk judul posting. Untuk meningkatkan SEO, anda harus merubah menjadi Tag H1 untuk Judul Posting.

Temukan kode berikut :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Gantilah H3 dengan H1

Anda juga bisa mengganti ukuran font judul posting anda. Temukan kode ]]></b:skin> kemudian letakan kode berikut diatasnya.

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

angka 1.5em adalah ukuran font anda, anda bisa merubahnya.

Simpan template blog anda. Semoga berhasil.

Silahkan tinggalkan komentar anda tentang artikel ini. Jika ada pertanyaan tentang artikel ini silahkan tulis pertanyaan anda, mudah-mudahan saya bisa segera membantu.

Mengaktifkan Komentar Avatar Blogger Pada Custom Template

Rabu, Oktober 14, 2009

Ingin menghias kolom komentar anda dengan avatar dari profil komentator? Sekarang blogger telah menyediakan fasilitas avatar untuk komentar. Bagi anda yang masih menggunakan template blog dari blogger bisa langsung menikmati layanan ini, tetapi bagi anda yang sudah menggunakan custom template terpaksa harus merubah sedikit kode pada template blog anda. Silahkan anda ikuti langkah-langkah dibawah ini untuk menampilkan avatar untuk custom template blogger anda.

Mengaktifkan Avatar Pada Kolom Komentar Blogger

Login ke akun blogger anda > Layout > Edit HTML

expand widget template

Cari kode berikut di template anda :

Ganti kode tersebut diatas dengan kode berikut :

Kemudian temukan kode berikut ini :

Setelah ketemu, copy dan paste kode berikut tepat dibawah dari kode diatas.

<b:if cond='data:blog.enabledCommentProfileImages'>

<data:comment.authorAvatarImage/>

</b:if>

Simpan

Untuk mengaktifkan avatar, silahkan anda buka Format > Comments
Jika anda ingin mengaktifkan avatar ini anda pilih "ya" pada "Tampilkan gambar profil dalam komentar".

Selesai sudah, tetapi bagi anda yang telah memasang komentar avatar menggunakan mybloglog, silahkan ikuti langkah berikut ini :

Sebenarnya jika anda sudah memasang komentar avatar menggunakan mybloglog dan ingin mengembalikan komentar avatar dari blogger, yang anda perlukan adalah menghapus kode pada template blog anda. Berikut ini langkahnya :

Cari kode berikut ini:

<b:loop values='data:post.comments' var='comment'>

Kemudian lihat baris dibawahnya :

<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>

Jika sudah ketemu, hapus kode yang berwarna merah diatas, dan untuk mengaktifkannya ada pada langkah diatas.

Menurut Saya

Template blog saya juga memasang komentar avatar menggunakan mybloglog, karena jika pengunjung yang ingin memberikan komentar dan ingin memasukan url blog mereka, maka avatar tetap nampak jika mereka mempunyai akun di mybloglog. Tetapi pada komentar avatar dari blogger ini, avatar akan nampak jika mereka memberikan komentar dengan menggunakan akun blogger mereka. Sehingga jika akan menyertakan url, maka avatar tidak muncul.

Bagaimana Menurut Anda?

Ya semuanya tergantung selera anda. Silahkan pilih yang sesuai dengan selera dan tujuan anda.

Selamat mencoba.

Memasang Jumlah Komentar Di Judul Posting

Rabu, Oktober 07, 2009

Pada awalnya saya tertarik dengan tutorial yang ditulis oleh oom tentang blogger hack ini. Ya sekedar berbagi saja dengan anda yang mungkin ingin memasang jumlah komentar atau total comments di judul posting anda.

Selain menambah apik tampilan blog anda, dengan memasang jumlah komentar di judul posting juga memudahkan kita untuk melihat sudah berapa banyak pembaca yang memberi komentar pada artikel yang kita tulis. Silahkan anda coba dengan mengikuti langkah-langkah berikut.

1. Login ke akun blogger anda.
2. Masuk ke layout>edit html, kemudian klik expand widget template.
3. Cari kode berikut ini pada template anda.

<a expr:href='data:post.url'><data:post.title/></a>

4. Copy dan paste kode berikut ini dibawah kode tersebut diatas.

<b:if cond='data:blog.pageType != "item"'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXqOOlgdkiRPUfWLao4kApLwQmt7K9BJvveEk7PF2OP-MmzIklBF0eBqeo8J6Lpv7D6zYa-6UC0ChgjfrLp_gNz_X349lDEW5jytRnyJjFwDQbtsE-k1AvvDiokthiazhOYjeYkadthaQI/s400/icon_comments.png'/>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a>
</b:if>

5. Simpan dan lihat hasilnya.

Mudah to? Silahkan mencoba.

Cara Menambah Elemen Baru Diatas Posting

Sabtu, September 26, 2009

Katakan anda ingin memasang widget atau iklan diatas posting anda, tetapi tidak disediakan fasilitas Add a Page Element dalam template anda. Pada tutorial kali ini, saya coba jelaskan cara menambah elemen baru di atas posting anda. Langkah-langkanya adalah sebagai berikut :

1. Masuk ke Page Elements > Edit HTML di dashboard.
2. Temukan kode berikut ini :

Gantilah kata no diatas dengan yes. Lalu simpan. Sekarang anda bisa menambahkan elemen baru diatas posting anda, baik itu widget atau iklan yang anda mau.

Semoga berhasil.

Silahkan tinggalkan komentar anda tentang artikel ini. Jika ada pertanyaan tentang artikel ini silahkan tulis pertanyaan anda, mudah-mudahan saya bisa segera membantu.

Cara Memasang Blogger XML Template

Selasa, September 22, 2009

Apakah anda ingin mengganti template blog anda? Anda sudah mendapatkan template baru? Apakah template anda menggunakan XML code? Bingung bagaimana memasangnya? Silahkan ikuti langkah berikut untuk memasang XML template di blogspot.

1. Dapatkan kode XML template blog yang anda suka.

2. Masuk ke dashboard akun blogger anda > Template > Edit HTML.

3. Pastikan anda sudah membackup template lama anda.
Masukan lokasi template anda disimpan lalu klik upload. Untuk mudahnya tekan tombol browse saja dan cari lokasi dimana template baru anda disimpan.

4. Setelah selesai kode template blog baru anda akan terlihat di dalam kotak dibawahnya.

5. Preview blog anda, jika anda sudah yakin dan merasa cocok dengan design template tersebut tekan save.

Semoga berhasil.

Silahkan tinggalkan komentar anda tentang artikel ini. Jika ada pertanyaan tentang artikel ini silahkan tulis pertanyaan anda, mudah-mudahan saya bisa segera membantu.

Cara Memasang Related Post Di Sidebar

Minggu, September 13, 2009

Ketika kita membaca artikel di sebuah blog, kadang kita akan mencari topik yang berkaitan dengan artikel yang sedang kita baca. Nah untuk itu, kita sebagai blogger sebaiknya memasang topik yang berkaitan dengan artikel yang kita tulis, agar pembaca tidak kebingungan mencari topik yang berhubungan dengan artikel yang sedang dibacanya.

Biasanya topik yang berkaitan ini disebut sebagai related post. Banyak blog memasang related post ini di akhir artikel. Pada tutorial kali ini kita akan mencoba memasang related post di sidebar blog.

Cukup mudah memasangnya, yang sulit adalah membuat scriptnya. Script ini saya ambil dari o-om.com.

Berikut ini langkah-langkah untuk memasang related post di sidebar blog.

Langkah Pertama.
Masuk ke dasboard blog anda > Layout > Edit HTML.
Anda tidak perlu mencentang Expand Widget Template.

Letakan kode berikut ini diatas kode </head>

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

Kemudian simpan.

Langkah Kedua.
Masih di edit HTML, sekarang anda centang Expand Widget Template, dan temukan kode ini :

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

Jika sudah ketemu, ganti kode diatas dengan kode berikut :

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Kemudian simpan.

Langkah Ketiga.
Masuk ke Template > Elemen Halaman > Tambah Elemen > Pilih elemen HTML dan berilah judul Related Post.
Anda bisa memilih tempat dimana related post ini akan diletakan. Jika sudah, letakan kode berikut :

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Lalu simpan.

Langkah Keempat.
Agar related post ini tidak muncul di halaman utama dan label, anda perlu sedikit memodifikasi widget ini.

Masuk kembali ke edit HTML. Centang expand widget template, dan temukan kode ini :
(agar mudah menemukannya tekan ctrl+f lalu ketikan related post)

<b:widget id='HTML4' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Setelah ketemu, ganti kode tersebut dengan kode dibawah ini :

<b:widget id='HTML4' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Simpan dan selesai. Selamat mencoba.

Fasilitas 'Read More' dari Blogger

Sabtu, September 12, 2009

Seperti yang sudah diberitakan, dan ditulis oleh beberapa blogger, sekarang blogger sudah mengaktifkan 'selective post summaries' atau ringkasan singkat pada posting blog. Maksudnya dari semua posting kita, akan diperlihatkan beberapa kalimat sebagai ringkasan dari artikel yang kita tulis, ya sama lah dengan fungsi 'read more' seperti yang sudah kita tahu bersama. Fasilitas baru ini disebut sebagai 'jump break'.

Masalahnya adalah fasilitas tersebut diperuntukan bagi pengguna template yang disediakan oleh blogger, sehingga anda yang menggunakan custom template atau template yang tidak disediakan oleh blogger, harus menambahkan beberapa kode agar fungsi ini berjalan

Biasanya kita memasang kode hack seperti <span class="readmore"> atau kode auto read more yang lain. Untuk menggunakan fasilitas jump break ini anda harus menghapus kode-kode read more yang ada di template anda, biasanya berada diantara <script > dan </script >.

Yuk langsung dicoba saja.

Mungkin anda perlu menguji coba dahulu fasilitas ini dengan membuat sebuah posting. Nantinya bisa anda hapus kembali jika anda tidak menginginkannya. Buatlah sebuah postingan dengan new editor, atau dengan mengaktifkan new post editor dengan cara masuk ke setting>basic dan pilih new post editor.

Setelah anda menuliskan semua artikel anda, tambahkan kode  dibawah paragraf yang ingin anda tampilkan. Lalu klik publish.

Jika jump link berhasil, maka akan terlihat paragraf pertama dari artikel anda. Artinya fasilitas ini kompatibel dengan template blog anda. Jika gagal maka anda harus melakukan beberapa langkah berikut ini.

Masuk ke dashboard lalu tuju Layout>Edit HTML dan check kotak 'expand widget template'. Lalu cari kode ini :

<data:post.body/&gt

Jika anda telah memasang kode hack untuk read more, anda akan menamukan lebig dari satu kode <data:post.body/&gt ini, tenang saja, yang perlu anda lakukan adalah melakukan edit kode html yang mempunyai kode

<b:if cond='data.blog.url != data:blog.homepageUrl>

Langsung saja temukan kode <data:post.body/&gt dan letakan kode berikut tepat dibawahnya.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/'></a>
</div>
</b:if >

Klik save lalu lihat postingan baru anda (yang untuk uji coba). Jika postingan anda terpotong, maka fasilitas ini sudah berhasil terpasang. Jika belum maka anda perlu meng-cut kode jump link tadi dan letakan dibawah kode <data:post.body/&gt yang lain. Demikian seterusnya.

Nah sekarang saatnya anda mengkustomisasi tampilan yang ada. Caranya masuk ke Layout>Page Element dan klik edit pada elemen posting.

Pada jendela pop up anda bisa mengganti kata 'read more' dengan kata-kata yang anda mau, misalnya 'baca seterusnya' atau dengan kata yang lain. Carilah kodenya dibawah <div>. Disini kita juga bisa menambahkan kode CSS untuk mempercantik tampilannya dibawah kode <b:skin>. Misalnya kode dibawah ini.

.jump-link a:hover {
background: #000000;
padding: 3px;
color: #ccc;
}.

Selamat mencoba.
Sumber : bloggerbuster

SUMBER BELAJAR

Kategori

Money Game