Forum Blogger: February 2009

24 February, 2009

Cara Menghilangkan Tanggal Postingan

Today Tutorial blog and blogger hack. Saya tahu bahwa modifikasi blog itu sangat menyenangkan dan membuat kita ketagihan. sebagai contoh, saat kita telah selesai membuat kotak komentar di bawah postingan, beberapa saat kemudian kita berpikir untuk mengganti background blog kita dengan warna yang baru dan menarik. Memodifikasi blog itu sangat menarik dan tentunya menyenangkan bagi kita.

Ok mari kita hentikan sejenak basa-basi di atas karena hari ini kita akan belajar untuk menghilangkan tanggal postingan pada content kita. Sebenarnya hal ini tidak terlalu penting, akan tetapi mungkin saja anda tertarik untuk mencoba blogger hack ini:

Masuk ke Layout dan pilih Edit HTML
Backup blog kamu dan centang Expand widget templates
cari h2.date-header { atau kamu bisa lihat kode nya di bawah ini

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80&percnt;;
color:#777;
height: 0px;
}

Sekarang tambahkan kode yang berwana merah seperti di bawah ini

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80&percnt;;
color:#777;
height: 0px;
visibility: hidden;
}

Simpan dan selesai

Selamat anda telah berhasil menghilangkan tanggal postingan di blog anda, siapa yang tertarik silahkan ikuti intsruksi di atas. OK yang penting jangan ketinggalan lanjutan blogger hack yang lain di sini dan kamu akan dapat mengikuti perkembangan tentang tutorial blog dan blogger hack yang baru.

Semoga berhasil.

Selengkapnya...

22 February, 2009

Tips Mudah Mengganti Image Background (I)

Today Tutorial blog and blogger hack. Malam ini saya akan memebrikan sedikit tips tentang blogger hack untuk anda, seperti kita tahu bahwa kebanyakan blogger merasa tidak puas pada design templatenya dan cenderung untu bergonta-ganti. Salah satu fokus penting dalam template yang sering diperhatikan adalah background dan header banner. .Tetapi sekarang kita akan memulai blogger hack untuk mengganti background secara mudah.. Mari kita lanjut:

Cari dan pilih image yang akan kamu jadikan background, bisa di google atau klik aja here
Untuk percobaan ini saya menggunakan image dari hasil browsing saya sepereti ini (jangan lupa di hosting di image hosting eg: Photobucket, or flicker)

Untuk mengubah backgriund maka masuk ke Layout dan Pilih Edit HTML. sekarang cari kode di bawah ini
body {
background: $bgcolor;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
- Ok, sekarang fokuskan pada code yang dicetak tebal dan kita akan memasukkan kode tambahan seperti di bawah ini ( liat kode warna hijau):
body {
background:url(http://www.imagehost.com/yourimage.jpg);
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
- Dimana kamu bisa mengganti kode yang warna hijau dengan image kamu sendiri. Simopan dan selesai
- Silahkan liat hasilnya di bawah ini dimana image yg tadinya hanya satu menjadi image yang berulang dan membentuk wallpaper
Anda bisa mencobanya dan berkreasi sendiri, ini mudah dilakuakn asal anda mau berusaha. Yups sekian dulu Blogger hack hari ini , ikita ketemu lagi di lanjutan dari blogger hack. makasih

Selengkapnya...

21 February, 2009

Tips Menambahkan 3 Kolom Footer

Today Tutorial blog and blogger hack. Sebenarnya lagi ga mood untuk melnjutkan projetc blog, ada beberapa masalah yang masih berseliwearn di pikiran saya. Tetapi, menulis di blog membuat pikiran saya sedikit enjoy dan relax. Ok, lupakan saja keluh kesah saya dan kita masih punya schedule untuk terbitan artikel kali ini. bagaimana kalo kita hari ini bermain-main sedikit dengan teknik hacking alias blogger hack? seperti menambahkan 3 kolom footer di template kita? Setuju? kayanya ada yang setuju, mari kita mulai blogger hack hari ini.

Masuk ke blogger account
Pilih Layout dan Pilih lagi Edit HTML
Back up blog kamu dulu , dan centang expand widget template
Copy code di bawah dan letakkan sebelum tag </b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

Simpan template kamu
Sekarang cari kode di bawah ini

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Ganti kode yang berwarna merah dengan kode di bawah ini

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

SImpan dan selesai

Sekarang coba cek di layout kamu dan lihat apakah sudah ada tambahan 3 kolom footer di template. Kalo kamu mengikuti step-step di atas denga benar maka kolom itu akan muncul. Selamat deh.

That’s blogger hack today, Selamat menikmati ngeblog dan segala macam edit-mengedit , see you at tutorial blog and blogger hack for you.

Selengkapnya...

20 February, 2009

Tips Membuat Teks Berjalan (Marquee)

Today Tutorial Blog and Blogger Hack. Sebenarnya saya lagi berpikir apa yang akan saya tulis hari ini, mungkin beberapa tips tentang HTML untuk hari ini. Kali ini kita akan membicarakan tentang Marquee.

Apakah anda sudah tahu tentang Marquee ? Marquee atau teks berjalan sering digunakan oleh para blogger berkreasi dalam tulisannya.

Kode Marquee sendiri cukup mudah , kita hanya meletakkan tag seperti ini <marquee> Teks anda </marquee>. dan hasilnya teks anda akan bergerak dari kiri ke kanan. Anda juga bisa merubah kodenya sesuai dengan tujuan anda, lihat contoh di bawah ini

Master Blog

Untuk menambahkan Background, anda bisa menggunakan kkode di bawah ini:

<marquee bgcolor="#FFEFF0">Your Text with Background</marquee>

dan hasilnya bisa anda lihat di sini:

Master Blog With Background

Untuk merubah arah bergeraknya anda bisa lihat kode di bawah ini( “left”, “right”, “/top”, “/down”) :

<marquee direction="right" bgcolor="#99CCFF">Your Text here</marquee>

Contohnya bergerak dari arah kanan:

Text From right Side

Mudah bukan??, Anda bisa merubah arahnya sesuai keinginan anda, baiklah mungkin sampai di sini dulu tutorial blog dan blogger hack. Besok cause i’m getting tired from my office. Just keep your spirit to blogging.Karena saya cukup capek setelah pulang dari kantor tapi tetap menyempatkan menulis ini. Keep spirit blogging

Ikuti terus Tutorial blog karena kita akan lanjutkan di bagian kedua dari Marquee. Bye

Selengkapnya...

19 February, 2009

Tips Mudah Membuat Searching Box

Today Tutorial blog and blogger hack. Kita mungkin tahu bahwa kadang-kadang pengunjung yang datang ke blog kesulitan untuk mencari postingan tertentu dan meeka membutuhkan bantuan untuk itu. Dan Ternyata template yang kita gunakan tidak mendukung dengan tidak adanya kotak pencarian dan kita mungkin kehilangan kesempatan memberikan kesan terbaik buat mereka. . So tutorial blog today kita akan membuat Standard Searching box untuk blog anda.

Cukup ikuti langkah-langkah mudah di bawah ini:

Masuk Layout dan tambahkan sebuah gadget
Pilih HTML/Javascript
Copy dan Paste code di bawah ini

<form id="searchthis"

action=”http://blogkamu.blogspot.com/search” style="display:inline;" method="get">
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>

Ganti kode merah dengan alamat blog kamu dan simpan

Untuk contoh kotak pencariannya lihat di bawah ini:

Caranya cukup copy-paste kode di bawah ini di gadget baru anda

<form id="searchthis" action=”http://blogkamu.blogspot.com/search” style="display: inline;" method="get">
<tr>
<td nowrap="nowrap" valign="top" height="16" align="left">
<input id="b-query" maxlength="255" class="textinputsearch" value="" name="q" size="22" type="text"/>
<input id="b-searchbtn" alt="Search"

width="18" src=”http://www.geocities.com/fabisnis/master.ico” height="19" align="top" type="image"/>
</form>

Jangan lupa mengganti kode warna merah dengan alamat blog kamu dan link icon/gambarnya dengan icon/gambar kamu sendiri.

Yupz cukup sampai di sini dulu, jangan lupa, berikan lah yang terbaik untuk perngunjung blog anda.

Don’t forget to look for the next day in tutorial blog and blogger hack here

See ya

Selengkapnya...

18 February, 2009

Gadget Of the Weeks: Google Friend Connect

cgf Today Tutorial Blog and Blogger Hack. Kita tahu bahwa blogspot mempunyai gadget yang disebut dengan Follower dimana kamu bisa mengikuti update nya suatu blog lewat dashboard kamu. Sekarang google juga mempunyai gadget yang hampir mirip dimana kita berkoneksi dengan blogger lain via google. .

Gadget ini mirip seperti follower dimana kita bisa ber narsisi ria menunjukkan diri kita lewat photo kepada orang lain. Berinteraksi dengan pengujung lain dengan berteman, sharing media, berkomentar, bermain games dan banyak hal lainnya. Kita juga bisa mengundang teman dari jaringan pertemana lainnya utnuk bergabung di blog kita. Nah apakah anda tertarik memasang gadget ini? anda bisa liat di sidebar saya.

.Sekarang tutorial blog kali ini adalah memasang gadget Google Friend Connect di blog kita.

Mari kita lanjutkan tutorial blog lewat step di bawah ini

Buka google friend connect
klik Setup a new site
isi data dengan nama situs/blog dan URL kamu. Contohnya bisa lihat di bawah

Hiraukan saja langkah selanjutnya dimana kita diminta memasukkan 2 file ke situs/blog kita. (cukup klik continue sampai pada bagian ( set up the member gadget)

Di set up the member gadget anda bisa mengatur tampilan gadgetnya, setelah selesai klik Generate Code
Sekarang Copy dan Paste code ke blog kamu
Masuk ke layout dan tambahkan sebuah gadget terus pilih HTML/javascript, paste kodenya
Simpan dan selesai

Sekarang anda telah mempunyai google friend connect di blog anda. Nikmati fitur-fiturnya dan tingkatkan traffik anda denagn gadget ini. .

Senang bisa bebagi dengan anda di tutorial blog dan blogger hack. Berikan feedback kepada saya tentang apa yang anda rasa sehingga kita bisa berinteraksi di sini.

Keep blogging and see for the next tutorial blog and blogger hack.

Best Regard

Selengkapnya...

Tips Mudah Membuat Related Post

Today Tutorial Blog and Blogger Hack. Seperti yang kita tahu bahwa untuk membuat pembaca nyaman di blog kita adalah yang utama. mereka akan merasa seperti seseorang yang spesial jika kita memberikan yang terbaik untuk mereka. Sebagai contoh jika mereka ingin mencari artikel lama kita tanpa adanya link menuju ke artikel tersbut tentu akan membuat mereka tidak nyaman.

Karena itu kita di sini akan membuat mereka terbantu dengan adanya gadget yang di namakan Related Post alaisa artikel yang berhubungan.. Denagn adanya link yang mudah di lihat maka mereka akan merasa betah di blog kita

Now blogger hack today adalah membuat gadget realted post di bawah postingan kita, jadi mari kita buat menjadi mudah:

Pertamanya Downloadscript ini here
Buka filenya dan copy
Masuk ke Layout dan pilih Edit HTML
centang Expand Widget Template (Backup blog kamu dulu)
Paste code tadi di bawah <data:post body/>
Simpan dan selesai

Jika anda ingin mengganri kata “related post by categories” cukup cari kalimatnya di code dan di rubah.

Cukup sampai di sini dulu deh tutorial blog and blogger hack nya.

semoga bermanfaat

See you at next Tutorial blog

Selengkapnya...

17 February, 2009

Tips Menambahkan Star Rating di Blog

Today Tutorial blog and Blogger Hack. KIta tahu bahwa ada hubungan antara pemilik blog dsan pembaca, interaksi antara keduanya dapat kita lihat apda komentar-komentar yang dilayangkan oleh pembaca terhdapa artikel yang ada. Sekarang kita akan menambahkan sebuah tools interaksi kepada pembaca lewat aritikel di blog kita.

Tutorial blog kali ini membahas tentang Star Rating . Dimana tools ini emnunjukkan ekpresi dari para pembaca tentang artikel yang kita buat. dan jika posisi kita sebagai pembaca maka kita bisa menunjukkan suka atau tidak suka tentang artikel yang dibuat.

Seperti yang kita lakukan sebelum-sebelumnya pada tutorial blog kali ini akan tetap mudah untuk anda :

Masuk keLayout dan Pilih Edit HTML
Back up blog kamudan centang Expand widget Tempalte
cari kode ini <p><data:post body/></p>
Copy kode di bawah ini dan letakkan tepat di bawah kode tadi

<script language='JavaScript'>
var OutbrainPermaLink='Your-Post-Permalink-Here';
var OB_demoMode = false;
var OB_Script = true;
</script>
<script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>

Simpan dan selesai

Sekarang coba cek postingan anda dan anda akan menemukan Star rating tepat di bawah postingan anda. Selamat sekarang anda bisa mendapatkan feedback dari pembaca setia anda dan mereka tentu akan senang dengan adanya tools ini.

That’s our Tutorial blog today.

Best Regard from me.

Selengkapnya...

16 February, 2009

Tips Menambahkan Emoticons di Shoutmix

Today Tutorial blog and Blogger Hack. Sudahkah anda melihat Shotumix saya disamping? Jika anda lihat ada beberapa emoticon baru yang digunakan berbeda dengan biasa shoutmix gunakan.Lihat di bawah ini.

MyEm0.Com atau yang ini

Dan masih banyak lagi emoticon yang bisa anda gunakan dengan mengunjungi situs myem0.com. sekarang tutorial blog hari ini akan kita jelaskan sedikit tentang bagaimana menambahkan emoticon pada shoutmix anda . Kita akan menambahkannya seperti apa yang kita pelajari pada saat belajar tutorial blog tentang menambahkan kotak komentar di bawah posting atau Menambahkan Yahoo emoticon di Kotak Komentar .Jika anda belum punya Shoutmix silahkan daftar di sini.

Mari kita lanjutkan secara simpel alaTutorial blog:

Masuk ke account di shoutmix
Di dashboard, Pilih Smileys
Copy-paste kode emoticons yang bisa kamu dapatkan di myem0.com
Cukup copy kode yang diawali dengan http:// dan akhiran .gif
Contohnya : http://i269.photobucket.com/albums/jj72/myem0/01/yoyo-emoticon-1-014.gif masukkan ke box kosong di bagian smiley
Jangan lupa memasukkan kode inisialnya seperti: :)) or :O or seperti ini :))
Simpan dan selesai

Sekarang cek di shotumix kamu apakah sudah terdapat emoticonnya. tetapi, kamu cumabisa memasukkan 10 emoticon di samping smiley standarnya. Jika ingin 500 smiley anda harus upgrade dan membayar sekitar 2 dollar perbulan.

Well, saya pikir kita yang gratisan dulu sambil mencari tambahan bisnis. That’s tutorial blog today, Sampai ketemu di psotingan selanjutnya

Jika anda ingin terus memantau postingan blog ini tidak salahnya anda berlangganan/ Subscribe RSS or E-mail.. dan perlu anda ketahui ini 100% GRATIS

See you at next Tutorial blog here

Selengkapnya...

15 February, 2009

Cara Mudah Membuat Tab View

Today Tutorial blog and Blogger hack TabView adalah gadget yang digunakan untuk memuat informasi atau gadget laiinnya agar lebih menghemat space di blog. dan juga membuat tampilan blog lebih dinamis. Tab View bisa anda isi dengan Shoutmix, twitter, recent comment, or else.

Dengan Tutorial blog di sini kita akan membuat TabView dengan mudah, Jadi silahkan disimak

Masuk ke Layout, Pilih Edit HTML
Backup blog kamu dan centang Expand widget Template

Copy-Paste code kode di bawah dan letakkan di atas ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /*width of main menu*/ text-align: center;
height: 24px; /* height of main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #F4F4F4; /* border colour from above */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Type of Fonts */
font-weight: 900;
color: #F4F4F4; /* Colour of fonts*/
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF;/* background colour*/
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #F4F4F4; /* line colour menu*/
overflow: hidden;
background-color: #FFFFFF; /* backgorund colour */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;

Sekarang letakkan kode di bawah ini sebelum tag </head>

<script src="http://h1.ripway.com/khantry/javascript/tabview.js" type="text/javascript"></script>

kemudian Simpan
Kembali ke Layout dan tambahkan sebuah gadget
PilihHTML/Javascript and Copy-Paste kode di bawah ini

</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">

Code Here 1.1 <br />

Code Here 1.2<br />

</div>
</div>
<div class="Page">
<div class="Pad">
Code Here 2.1 <br />
Code Here 2.2<br />
</div>
</div>
</div></div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Simpan dan silahkan lihat penjelasan di bawah:

Untuk merubah tinggi dan lebar silahkan ganti angka di warna hijau width: 350px and height: 250px
Ganti warna biru dengan teks atau judul informasi anda
Ganti warna merah dengan kode javascript seperti : shoutmix code, image, or yang lainnya

That’s tutorial blog today, Semoga berhasil mengaplikasikannya dan jika ada masalah silahkan contact saya

Thanks for coming in tutorial blog and blogger hack

Selengkapnya...

14 February, 2009

Memasang Yahoo Emoticon di Kotak Komentar

Today Tutorial blog and blogger hack. pada tutorial blog yang kemaren kita sudah memasang kotak komentar di bawah postingan yang dapat di lakukan dengan cara yang mudah. (bagi yang belum baca Tutorial blog tentang memasang kotak komentar di bawah postingan klik disini)

Nah untuk membuatnya agar lebih bagus lagi kita tambahkan emoticon untuk membuat pengunjung yang berkomentar dapat menunjukkan ekspresinya. Kita akan memasang emoticon standar dari Yahoo. (kode javascriptnya berasal dari punya mas o-om,,makasih ya).

Caranya sangat mudah:

Masuk ke Layout dan pilih Edit HTML (Back up blog dulu jangan lupa)
Copy dan paste kode ini di atas </body>

3. Sekarang cari kode warna merah ini

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl'

expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

4. Copy-paste code yahoo emoticon di bawah ini dan letakkan di bawah

<p class='comment-footer'> (liat kode di atas)

<b><img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>

:))

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>

:)]

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>

;))

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>

;;)

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>

;)

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>

:((

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>

=((

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>

:-o

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>

:-/

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>

:-*

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>

8-}

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>

~x(

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>

:-t

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>

b-(

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>

:-L

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>

<img border='0'

src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>

=))</b>

5. Save dan Selesai

Sekarang coba masuk ke blog anda dan lihat di atas kotak komentar apakah sudah ada emoticonnya. Selesai sudah Tutorial blog hari ini kita lanjutkan nanti.

Selamat mencoba

Selengkapnya...

13 February, 2009

Cara Mudah Membuat Widget Komentar Terbaru

Today Tutorial Blog dan Blogger Hack. Komentar adalah rangkaian kalimat yang selalu di harapkan oleh blogger walaupun cuma beberapa kata yang tentu saja akan membuat senang dan memberi semangat buat blog kita. Bener ga?

Nah agar kita mengetahui adanya komentar terbaru di blog kita maka kita harus menambahkan widget di blog kita. Perlu diketahui bahwa dalam membuat widget komentar terbaru ada dua macam yaitu memanfaatkan RSS Feed dan Javascript Pada Tutorial blog kali ini kita akan membuat Recent Comment alias Komentar terbaru dengan code Javascript.

Di sini akan kita buat secara singkat dan mudah. silahkan di simak:

Masuk ke Layout blog kamu
Kemudian Tambahkan sebuah gadget
Pilih HTML/Javascript
Copy dan paste kode di bawah ini di dalamnya

<ul><script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < 5; i++) {
var entry = json.feed.entry[i];
var ctlink;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
ctlink = entry.link[k].href;
break;
}
}
ctlink = ctlink.replace("#", "#comment-");
var ptlink = ctlink.split("#");
ptlink = ptlink[0];
var txtlink = ptlink.split("/");
txtlink = txtlink[5];
txtlink = txtlink.split(".html");
txtlink = txtlink[0];
var pttitle = txtlink.replace(/-/g," ");
pttitle = pttitle.link(ptlink);
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<li>');
document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
document.write(' on ' + pttitle);
document.write('<br/>');
if (comment.length < 100) {
document.write(comment);
}
else
{
comment = comment.substring(0, 100);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + ctlink + '">(more)</a>');
}
}
document.write('</li>');
document.write('<div style="font-size:75&percnt;;text-align:center"><a href="http://blogtutormaster.blogspot.com/2009/02/How-to-make-recent-comment.html">Get this Widget</a></div>');
}
</script>
<script src=http://URLblogkamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments>
</script></ul>
<noscript>You need to enable JavaScript to read this.</noscript>

5. Save and Done

Note:

Ganti URL http://URLBlogkamu.blogspot .com dengan alamat blog kamu

Nah sekarang kamu dapat mengetahui adanya komentar terbaru di blog kamu, di Tutorial blog ini kita saling berbagi ilmu dan sama-sama belajar. Jadi silahkan kasih pertanyaan, saran maupun kritik yang membangun,,

Selamat mencoba Tutorial blog ini

Selengkapnya...

Cara Mudah Membuat Float Image

Today Tutorial blog and blogger hack. Pernah lihat iklan melayang yang sering berada di sidebar? Mungkin anda pernah melihatnya di blog-blog yang menyediakan space buat iklan di blog mereka dengan image yang terus melayang ketika kita scroll pagenya ke bawah atau ke atas.

Float image namanya, dengan float image ini kita bisa menambahkan image, RSS, link, dan juga iklan tentunya. Anda bisa lihat di screenshot pada bagian kanan bawah terdapat banner kotak berwana biru yang melayang dan akan tetap berada di page.

Tertarik untuk membuatnya?Ingin menyediakan space buat pengiklan buat blog anda?, caranya sangat mudah.cukup ikuti langkah-langkah di bawah:

Masuk ke Layout
Pilih Edit HTML dan centang Expand widget Template (back up blog jangan lupa)
Copy code di bawah ini ( anda bisa memilih tempat untuk meletakkannya)

Kiri-Atas Float Image

Kanan-Atas Float image

Kanan-Bawah Float Image

Kiri-BawahFloat Image

4. Letakkan code itu di atas <body> tag .

5. Save dan selesai

Rubahlah code yang berwarna merah dengan link dan judul kamu sendiri, sedangkan warna orange bisa anda ganti dengan URL image anda sendiri

Selamat sekarang anda telah mempunyai space buat meletakkan image atau iklan di blog anda. Selesai sudah Tutorial blog hari ini kita lanjutkan besok-besok, kalau ada pertanyaan silahkan kasih komentar

Have a nice try..

Technorati Tags: tutorial blog,HTML editing

Selengkapnya...

11 February, 2009

Tips Mudah Memasang Kotak Komentar di Bawah Posting

Tutorial blog and blogger hack hari ini, kita akan membicarakan tentang bagaimana caranya memsanag kotak komentar di bawah psotingan secara mudah. Ini biasanya bisa dilakukan dengan dua cara . Yupppz,, saya bilang mungkin dua cara karena bila car pertama gagal masih ada cara kedua.

Mari kita coba yang pertama:

Masuk ke Pengaturan dan Pilih Formatting
Pilih Comments dan perhatikan Penempatan Formulir komentar
Kemudian centang pada di semat di bawah entry

Sekarang coba cek blog kamu apakah di bawah postingan sudah ada kotak komentar langsung atau tidak. Jika ada maka kita stop sampai di sini dan silahkan nikmati fasilitas kotak komentar di bawah postingan anda.

Tetapi bila langkah pertama masih gagal, silahkan lanjutkan langkah di bawah ini

Masuk ke Layout
Pilih Edit HTML dan centang Expand Widget Template
Backup blog kamu
Sekarang cari kode di bawah, lebih fokuskan pada kode warna merah

     <p class='comment-footer'>
              <b:if cond='data:post.allowComments'>
              <a expr:href='data:post.addCommentUrl'             
      expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
      </p>

5. Hapus kode di atas dan ganti dengan kode di bawah ini

<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p>

</b:if>

6. Save dan selesai

Bagaimana sudah berhasilkah anda? kalau belum cobalah lebih teliti lagi mungkin ada step yang terlewat, ,

Selamat Mencoba

Technorati Tags: Tutorial BLog,Blogger Hack

Selengkapnya...

10 February, 2009

Ayo Pasang Digg Button

Digg.com merupakan sebuah situs social networking dimana kita bisa menemukan berbagai content dan bisa saling berbagi. Situs yang muncul di digg merrupakan hasil submit atau voting dari member digg. Jadi makin orang atau pengunjung yang memvoting maka semakin naik content kita di halama depan digg.

Kalau gitu mari kita bikin digg button tentunya juga buat menaikkan trafik blog

caranya gampang saja:

Masuk ke Layout terus pilih edit HTMl dan selanjutnya centang Expand widget template
Lalu cari kode ini <p><data:post.body/></p>
Hapus kode di atas dan gantikan dengan kode di bawah ini

<p>
<!– DIGG –>
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<data:post.body/>
</p>

4. Save template dan selesai

Mudah bukan, nantinya di blog kita akan ada button seperti ini:

digg_cominfoindonesia

Selamat mencoba

Technorati Tags: Tutorial blog,gadget

Selengkapnya...

09 February, 2009

Cara Membuat Favicon untuk Blog

Sudahkah anda menggunakan favicon selain icon standar Blogger?Favicon adalah icon yang terdapat pada address bar kita pada web browser. Contohnya untuk blogger deafulnya adalah icon blogger seperti ini.

kita dapat menggantinya dengan style kita sendiri seperti ini:

Mari kita membuatnya dengan langkah mudah

Buat gambar ukuran 32x32 dengan jenis format jpg, gif, png, atau bmp
Kemudian Buka salah satu situs pembuat icon seperti dynamics drive atau favicon generator.
Pada tombol browse masukkan gambar yang akan kita ubah menjadi icon
Kemudian Generate atau create icon
Download icon tersebut dan simpan di tempat penyimpanan online seperti geocities atau Photobucket.
Setelah di upload ke image hosting, anda mempunyai alamat URL icon/gambar . sebagai contoh: http://www.geocities.com/masterblog/favicon.ico
Cari kode <b:skin><![CDATA[/* kemudian letakkan kode ini di atasnya

<link href=' http://alamatURLiconkamu ' rel='shortcut icon' type='image/x-icon'/>

8. jangan lupa ganti kode merah dengan alamat URL icon/image kamu.

9. Kemudian Save dan selesai

Selamat anda telah mempunyai favicon buat blog anda dengan gaya yang berbeda.

Technorati Tags: tutorial Blog,blogger Hack

Selengkapnya...

08 February, 2009

Tips Cepat Membuat Read More

Read More kayaknya merupakan fenomena tersendiri bagi para blogger terutama bagi para blogger yang baru bergabung di blogsphere. Sering saya meihat komentar-komentar yang menyatakan susahnya menerapkan readmore terutama saat mengaplikasikannya di Template.

Apakah masih ada yang merasa kesulitan? Bagaimana kalau kita coba lagi secara lebih gamblang dan cepat dalam membuat Read More. Silahkan menyimak penjelasan saya di bawah ini dan semoga bisa lebih mudah mengerti dan mengaplikasikannya. Lanjut

Step 1: Masuk ke Template dan pilih Edit HTML, Back up dulu blog kamu sebelum terjadi hal yang tidak diinginkan. Lalu centang EXpand Widget Template

Step 2: Cari kode di bawah ini

<data:post.body/>

atau yang ini

<p><data:post.body/></p>

Step 3: Hapus Kode di atas dan ganti dengan kode di bawah ini

<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>Selengkapnya...</strong></a></p> </b:if>

Simpan Template dan tahap 1 udah selesai. masih ada masalah?Kalau tidak ada lanjut di abwah

Sekarang mengaplikasikannya saat memposting artikel

Step 1: Masuk ke Pengaturan, trus pilih Format dan masukkan kode di bawah ini pada Template posting pada layar paling bawah (agar kode tersebut langsung muncul tanpa menuliskannya lagi di postingan baru)

<span class="fullpost">

</span>

Step 2: Untuk menggunakannya, ketik atau copy tulisan yang ingin di munculkan di atas <span class="fullpost"> dan yang ingin di sembunyikan di bawahnya. silahkan lihat contoh di bawah

Tulisan yang ingin di munculkan

<span class="fullpost">

Tulisan yang di sembunyikan

</span>

Gampang kan?? Jika anda belum berhasil maka berusaha dan cermati lagi setiap langkah. tetap semangat dan jika ada pertanyaan silahkan hubungi saya lewat komentar di blog ini.

Technorati Tags: Tutorial Blog,Blogger Hack,Java Script,Tips and Trick

Selengkapnya...

Tips Tentang NavBar Blogger

Kadang kita kurang sreg terhadap navbar blogger yang muncul di atas blog kita, dan ingin melenyapkannya selamanya (halah). Selamat anda telah bertemu dengan apa yang anda cari

Kali ini saya akan memebrikan tips ringan untuk mengilangkan nav blogger dan menyembunyikannya secara auto. Silahkan di simak baik-baik

Tips 1: Menghilangkan NAvBar

Masuk ke halaman Edit HTML lalu copy code di bawah ini dan letakkan di bawah <b:skin><![CDATA[

#navbar{height:10px; visibility:hidden; display:none}

Tips 2 : Auto Hide pada NAvBar BLogger

Masuk ke halaman Edit HTML lalu copy code di bawah ini dan letakkan di bawah <b:skin><![CDATA[

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Mudah kan,,silahkan langsung praktek,,semoga berhasil.

Technorati Tags: Tutorial Blog,Blogger Hack,Tips and Trick

Selengkapnya...

Cara Mengganti Footer Link

Seringkali kita melihat apda bagian bawah postingan (atau footer link) kita ada tulisan Newer Post-Home-Older Post. Bagaimana caranya agar kita bisa menggantinya dengan kata kita sendiri dan style kita sendiri lewat icon misalnya?

Mari kita oprek-oprek disini:

Step 1: Cari dulu deh kode hijau di bawah ini pada Edit HTML (jangan lupa backup dan centang Expand Widget Template)

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'> <data:newerPageTitle/> </a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'> <data:olderPageTitle/> </a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'> <data:homeMsg/> </a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'> <data:homeMsg/> </a>
</b:if>
</b:if>
</div>

Step 2: Ganti deh code yang warna merah dengan style tulisan kamu atau icon yang berformat tulisannya (URL icon/gambar ). icon2 bisa lihat disin>>>>icon

<img src="http://lokasi-gambar-anda.com/contoh.jpg"/>

Sudah selesai dan selamat mengedit deh..

Selengkapnya...

Installing Neo Template ( The Lightning Fast Template)

Selamat datang di sebuah template baru dengan kecepatan kilat untuk blog anda. yang disebut NEO Templates.

Mari saya jelaskan Fiturnya disini :

pengunjung bisa menjelajahi blog anda yang jauh lebih lebih cepat karena keseluruhan halaman tidak akan di loading lagi..
Komentar terbaru akan di perlihatkan sebelum komentar lama.
Rounded corner box dan warna yang menarik untuk visual blog anda..

Apakah anda tertarik? Untuk melihat contoh NEO Template bisa di cek disini.

Sekarang, kita akan mulai untuk meng-instal template neo tanpa menghilangkan widget dari template sebelumnya.

DIsclaimer: Saya tidak bertanggung jawab jika anda kehilangan widget/gadget anda karena tidak mengikuti intruksi yang dianjurkan. Jadi Baca intruksinya dua kali.

Step 1: Backup Blog anda (ini sangat penting!!!)

Step 2: Masuk ke Template dan Edit HTML lalu klik “expand widget Template” . Lalu copy semua baris setelah <body> tag yang diawali dengan <b:widget kecuali yang diawali dengan id:”Blog1” . Paste di Notepad.

Step 3: Download neo.xml here. Buka lewat Notepad dan cari bagian code berikut . Copy paste widget lama kita tadi ke tempat antara </b:widget> and </b:section>. Simpan

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Posts' locked='false' title='Posts' type='HTML'>
<b:includable id='main'>
<div id='LabelDisplay'>
<div id='LabelTitle'>
</div>
<div class='widget-content' id='LabelPosts'>
<script language='javascript'>fetchLatestPosts('<data:blog.homepageUrl/>', '');</script>
</div>
</div>
</b:includable>
</b:widget>

Add all your widgets here...

</b:section>
</div>

Step 4: Pada Edit HTML, browse dan upload file neo.xml tadi. Jika anda benar melakukan tahapan pada step 3 tadi maka error di bawah tidak akan muncul.

( Jangan Klik Confirm and Save, jika anda melakukanya maka anda akan kehilangan widget lama anda, ulangi lagi step 2)

Step 5: Jika anda sudah berhasil di step 4, maka anda bisa lihat pada bagian layout yang terdiri dari 3 kolomseperti gambar di bawah. Pada sidebar kiri ada label widget dan di sebelahnya ada psot widget. jangan sekali-kali menghapus keduanya. jika anda menghapusnya maka fungsi kecepatan template ini akan hilang.

Step 6: Tahapan akhir untuk NEO template. Pilih Setting dan site feed, ganti mode ke advance mode dan simpan. lalu pilih Format dan set postingan anda hanya 1 pada halaman utama. (NEO akan mengganti secara cepat postingannya jika visitor mengklik postingan lainnya. Jika anda mempunyai mensettingnya beberapa postingan akan menjadi aneh karena hanya pstingan paling atas yang di ganti).

Yups,,sudah selesai dan selamat menikmati kecepatan blog anda yan baru.

Note: Terima kasih pada Hoctro yang telah berjasa atas template ini

Selengkapnya...

Tips Menampilkan Judul Postingan Tanpa Full Page

Ketika melakukan satu pencarian pada satu label isi (kategori) di blog kita. maka yang ditampilkan adalah isi penuh label tersebut sebagai contoh jika kita pilihan label Tutorial blog” akan menampilkan semua postingan di label tersebut . Bagaimana jika postingan didalam “tutorial blog” mempunyai 100 postingan? tentu akan lama seklai loading yang harus ditunggu sampai selesai. Bagaimana caranya agar label tersebut hanya menampilkan judul dan tanggal postingan saja? Mari kita bedah tipsnya disini

Buka Template, Backup Template anda dan klik di Expand Templates widget.
Kemudian lihat kode di bawah ini;

<div class='blog-posts hfeed'> <b:include data='top' name='status-message'/> <data:adStart/> <b:loop values='data:posts' var='post'> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2>

</b:if><b:include data='post' name='post'/>

2. Ganti kode merah diatas dengan kode di bawah ini

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'> <data:post.title/></a><br/><br/> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/>

<b:include data='post' name='post'/> </b:if>

Lalu simpan perubahan,,selesai deh.

Sekarang label pada blog kamu jika di klik oleh pengunjung hanya akan menampilan judul postingan dan tanggalnya. Lebih cepat dan lebih menarik.

Selengkapnya...

24 February, 2009

22 February, 2009

21 February, 2009

20 February, 2009

19 February, 2009

18 February, 2009

17 February, 2009

16 February, 2009

15 February, 2009

14 February, 2009

13 February, 2009

11 February, 2009

10 February, 2009

09 February, 2009

08 February, 2009

Recommended Sites

Labels

Followers

Blog Archive

Komentar Terbaru