Haloooo sobat blogger sekalian. Setelah lama ga posting lagi. Karena sekarang sudah mulai kerja. Sibuk. Pulang kerja capek. Udah ga sempet ngerawat blog lg. Sekarang aq sempatkan waktu untuk posting sebuah artikel untuk menambah pengetahuan mengenai blog kita ini.

Sama seperti fasilitas "Recent Post", kali ini kita akan menggunakan javascript yg lgs diletakkan di widget kita.

Langkah :
1. Login ke blogger.com
2. Masuk ke Design, yg dulu bernama Layout
3. Pilih Page Element.
4. Klik "Add a Gadget".
5. Pilih HTML
6. Masukkan kode ini

<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 4;

home_page = "http://www.katamichi.co.cc/";
</script>

<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

Penjelasan :
boxwidth : Lebar widget
cellspacing : Jarak tepi antara cell
borderColor : Warna Border
thumbwidth & thumbheight : Lebar dan Tinggi dari thumbnail
fntsize : Ukuran font judul
acolor : Warna judul
aBold : (Pilih true or false)
numposts : Banyak postingan yang ingin Anda tampilkan
home_page : address url blog anda

7. Save
8. Lihat bagaimana hasilnya.

Nah, mudah kan. Silakan sobat blogger mencobanya.


,"Sampai ketemu di Tips and Tricks berikutnya. Byee~"


Credits: Andika Web

Tips and Trick for Blogs

6:17 AM

Hi, sobat-sabat blogger sekalian. Setelah saya mejelajah antara blog satu ke blog lainnya. Aq tertarik dengan suatu gambar-gambar yang bergerak secara otomatis disebelah atas pada suatu blog. JQueri Slider lah namanya.
Kemudian aku berusaha mempelajarinya dan mencoba menerapkannya di blogku sendiri.

Mungkin sebagian dari anda bertanya-tanya. Seperti apa JQuer Slider itu. Sebagai contoh kalian dapat melihatnya di bagian atas blogku.

Penjelasan :
Slider ato JQuerySlider adalah slide-slide berisi berbagai gambar beserta link pada setiap gambarnya, yang secara otomatis berganti-ganti sendiri layaknya slide gambar yg diset automatic.

Langsung saja bagaimana penerapannya di dalam blog :
1. Login ke blog.
2. Klik Layout > Edit HTML
3. Masukkan script ini sebelum </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

4. Masukan javascript jQuery Slider dibawah ini, dibawah script tadi.

<!-- Javascript div#slide-holder -->

<script type='text/javascript'>var _siteRoot='index.html',_root='index.html';</script>

<script src='http://blogspot-choen.googlecode.com/files/scriptsSlider.js' type='text/javascript'/>

<script type='text/javascript'>
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"Code-code-an","desc":"Media Dokumentasi Tutorial dan Desain "},

{"id":"slide-img-2","client":"sIFR 02","desc":"Free Blogger Template"},

{"id":"slide-img-3","client":" ","desc":"Bukan CoklatFree Blogger Template"},

{"id":"slide-img-4","client":"Ini Minimaliskah ?","desc":"Free Blogger Template"},

{"id":"slide-img-5","client":"Cufon","desc":"Free Blogger Template"},

{"id":"slide-img-6","client":"jQuery 2","desc":"Free Blogger Template"},

{"id":"slide-img-7","client":"jQuery 1","desc":"Free Blogger Template"}];

</script>

<!-- End Javascript div#slide-holder -->

Nb: kata-kata berwarna merah diatas adalah deskripsi tiap gambar, kalian dapat merrubahnya sesuai keinginan anda.

5. Masukan kode dibawah ini, diatas kode <div id='content-wrapper'>

<!--HTML div#slide-holder-->

<div id='headerSlider'><div class='wrapSlider'>
<div id='slide-holder'>
<div id='slide-runner'>
<a href='http://deconstructioncode.blogspot.com/'><img alt='code-code-an' class='slide' id='slide-img-1' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SpPsZSrB6OI/AAAAAAAACKY/i80SCyD44BI/deconstructioncode2.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/08/nge-grunge-dengan-sifr-20-free-blogger.html'><img alt='sIFR in Blogger Template' class='slide' id='slide-img-2' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpPuiTccecI/AAAAAAAACKc/KwKDFX51CnM/sifr2bloggertemplate.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/07/bukan-template-coklat.html'><img alt='Free Blogger Template' class='slide' id='slide-img-3' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SpPwKSdCtVI/AAAAAAAACKg/7gFw2HZFlaE/CoklatBloggertemplate.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/07/ini-minimal-kah-free-blogger-template.html'><img alt='Free Blogger Template' class='slide' id='slide-img-4' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpUi5ovp8xI/AAAAAAAACLA/4XpsH63UaMk/iniminimal.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/07/free-blogger-template-cufon-sifr.html'><img alt='Free Blogger Template' class='slide' id='slide-img-5' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpUkbuipkAI/AAAAAAAACLE/2327FKbifQE/cufontypo.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/06/free-blogger-templates-dengan-sentuhan.html'><img alt='Free Blogger Template' class='slide' id='slide-img-6' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpUlomDRo6I/AAAAAAAACLI/PYsLvvqqenE/jQ2.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/05/free-blogger-templates-dengan-sentuhan.html'><img alt='Free Blogger Template' class='slide' id='slide-img-7' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SpUmknxumWI/AAAAAAAACLM/slg5rmBUmBo/jQ1.jpg'/></a>

<div id='slide-controls'>
<p class='text' id='slide-client'><strong>post: </strong><span/></p>
<p class='text' id='slide-desc'/>
<p id='slide-nav'/>
</div>
</div>


<!--content featured gallery here -->
</div>

</div></div>

<!-- End HTML div#slide-holder -->

Nb:
- Warna biru diatas menandakan id image ke berapa (jangan diapus atau dirubah).
- Sedangkan 'alamat URL', 'alt', dan 'alamat gambar' dapat anda rubah sesuai kebutuhan anda.

6. Masukan kode dibawah ini, diatas ]]></b:skin>

/* CSS div#slide-holder */

div#headerSlider div.wrapSlider{
width:810px; /* mesti disesuaikan */
height:288px;
background:#000;
border: 4px solid #333;
margin: 0 auto;
}

div#headerSlider div#slide-holder{
z-index:40;
height:288px;
position:absolute;
}
div#headerSlider div#slide-holder div#slide-runner{
top:5px;
left:5px;
width:800px; /* mesti disesuaikan */
height:278px; /* mesti disesuaikan */
overflow:hidden;
position:absolute;
}

div#headerSlider div#slide-holder img{
margin:0;
display:none;
position:absolute;
}

div#headerSlider div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:800px; /* mesti disesuaikan */
height:46px;
display:none;
position:absolute;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SpUhSXvvaFI/AAAAAAAACK8/eYHketamvoc/slide-bg.png) repeat scroll 0 0;
}

div#headerSlider div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}

div#headerSlider div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}

div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
color:#ccc;
}

div#headerSlider div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}

div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
background-image:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SpPogDg6qzI/AAAAAAAACKU/DhQZk2y7GtE/s800/silde-navSlider.png);
}

7. Selesai sudah. Dan save semuanya.

SEkian pembahasan tutorial JQUery Slider yg telah saya pelajari dari berbagai sumebr, dan saya sharingkan dengan anda. Semoga bermanfaat bagi kita semua.
Terima kasih =)

Tips and Trick for Blogs

11:00 AM

Hi hi.. Semuanya setelah kita kemarin sempat merayakan hari Natal, dan berhenti posting apapun. Hihihi... Alasannya tentu saja karena kita sedang merayakan Natal tersebut.
Nah, pada hari ini saya akan kembali memposting sesuatu yaitu mengenai "Related Post w/ Thumbnail". Tentu bagi para blogger-blogger senior sudah pada tahu apa itu "Related Post w/ Thumbnail". Nah disini saya akan membahas kembali bagaimana cara memunculkan "Related Post w/ Thumbnail" di halaman Blogger kita.

Langsung saja:
1. Login ke akun blogger kamu.
2. Klik Layout > Edit HTML, dan jangan lupa untuk klik Expand Widget Templates
3. Ganti kode </head> atau replace kode </head> dengan

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

4. Keempat, temukan kode ini
<div class='post-footer-line post-footer-line-1'>

atau
<p class='post-footer-line post-footer-line-1'>

Dan letakkan kode dibawah ini, dibawah kode diatas

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

5. Kamu dapat mengganti kata-kata berwarna merah dengan yang kamu inginkan,
var maxresults=5 menandakan jumlah Related Post dibawah suatu Post
Related Posts dapat diganti dengan kata-kata semisal "Coba ini juga", atau apapun lah :)

6. Save Template
7. Dan coba klik salah satu postingan kalian, akan nampak seperti dibawah ini

Nah, selesai sudah tutorial bagaimana cara membuat "Related Post with Thumbnail". Semoga bermanfaat bagi kalian semua. Dan jangan lupa komennya ya. Jadi aku bisa tahu apa kekurangannya :)

Tips and Trick for Blogs

11:17 PM

Terima kasih buat hanny suliantoro telah memberikan Award ini kepada blog katamichi.

Award ini sendiri merupakan Award yang ber-backlink, maka sahabat blogger yang menerima award ini akan secara otomatis mendapatkan backlink, dan jika kita mengikuti aturannya secara tepat maka blog kita akan mendapatkan banyak backlink dalam waktu yang singkat. Dan pada akhirnya saya memutuskan para sahabat blogger yang menerima award ini adalah :
1. frecruz
2. freaktrue
3. blog bisnis
4. herman blog
5. kaitokid
6. pingu blog
7. netmild
8. news special
9. mobile phones
10. unlabel
11. dan teman2 lain yang sudah berkunjung di blogku...=)

Selanjutnya saya copy-paste dari Blog Pras. Bagi siapa saja yang menerima award ini diharuskan untuk membagikan kembali award ini kepada sepuluh orang temannya. Dan selanjutnya si penerima award harus meletakkan link-link berikut ini di blog atau artikel kamu :

01. Auto Motor 2009
02. Ruri
03. Mas Doyok - New Blog Trik
04. irfanrasyid
05. TUTORIAL DESAIN GRAFIS
06. Blog napi Belog
07. Not Yet Titlelized
08. Pras Free
09. Taekwondo Indonesia
10. Anime, Action Figures, Japan

Aturannya begini :
sebelum kamu meletakkan link di atas, kamu harus menghapus peserta nomor 1 dari daftar. Sehingga semua peserta naik 1 level. Yang tadi nomor 2 jadi nomor 1, nomor 3 jadi 2, dst. Kemudian masukkan link kamu sendiri di bagian paling bawah (nomor 10). Tapi ingat ya, kalian semua harus fair dalam menjalankannya. Jika tiap penerima award mampu memberikan award ini kepada 5 orang saja dan mereka semua mengerjakannya , maka jumlah backlink yang akan didapat adalah 1.953.125. Nah, silahkan copy paste saja, dan hilangkan peserta nomor 1 lalu tambahkan link blog/website kamu di posisi 10. Ingat, kamu harus mulai dari posisi 10 agar hasilnya maksimal. Karena jika kamu tiba2 di posisi 1, maka link kamu akan hilang begitu ada yang masuk ke posisi 10.”

Ketika posisi kamu 10, jumlah backlink = 1
Posisi 9, jml backlink = 5
Posisi 8, jml backlink = 25
Posisi 7, jml backlink = 125
Posisi 6, jml backlink = 625
Posisi 5, jml backlink = 3,125
Posisi 4, jml backlink = 15,625
Posisi 3, jml backlink = 78,125
Posisi 2, jml backlink = 390,625
Posisi 1, jml backlink = 1,953,125

Dan semuanya menggunakan kata kunci yang kamu inginkan. Dari sisi SEO kamu sudah mendapatkan 1,953,125 backlink dan efek sampingnya jika pengunjung web para downline kamu mengklik link itu, kamu juga mendapatkan traffik tambahan.

Silahkan diambil Awardnya. Jangan Sungkan-sungkan.
And jangan lupa dibagi-bagikan.

Award Info Blogging

12:31 AM

Kalian tahu kan gambar profile pada blog kita masing-masing? Nah, di blogger tersayang kita ini telah mendukung feature menampilkan gambar avatar profile kita ini disamping komentar-komentar pada tiap postingan artikel kita.

Bagi kalian yang belum menambahkan feature ini, maka buruan untuk mencobanya. Sangat menarik.
Cukup ikuti langkah-langkah dibawah ini :
1. Login to your blogger account
2. Masuk ke Setting > Comments
3. Centang pada bagian "Tampilkan gambar profile di komen ?"
4. Jika sudah klik Layout > Edit HTML
5. Letakkan kode ini

/* Avatar */ .avatar-image-container img { background:url(http://3.bp.blogspot.com/_C6KkooKXCEw/SrmyhPpP4mI/AAAAAAAAEvc/gQ1JKjpkULw/s320/AvatarBlogger.png); width:35px; height:35px; }

diatas kode ]]></b:skin>

Nb : ganti alamat url berwarna merah diatas dengan alamat url gambar profile kamu sendiri.

6. Cari kode ini

<a expr:name='data:comment.anchorName'/>

dan ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/> </b:if>

7. Save.

Maka akan tampil seperti dibawah ini :

" Begitulah cara memunculkan gambar profile disamping komentar. Sangat menarik. Silahkan praktekkan sendiri, dan jangan lupa komentarnya y agar tahu kekurangan saya.

Happy blogging. "

Tips and Trick for Blogs

8:12 AM

Have you ever seen? An image that is located beside the left post an article title. Like in my blog. Interesting is not it? That is what will be my discussion this time. I will guide you how to do that.

So, if you interest with this discussion, follow this steps :
1. Get one picture that you want
2. Upload that picture in the image uploader site, ex: photobucket.com
3. After that, copy that image url
4. Then, login to your blogger.
5. Click Layout > Edit HTML
6. Check in the Expand Widget Templates
7. Copy that images url

<img src="http://i679.photobucket.com/albums/vv159/youkaiichi/50x50.jpg" height="50" width="50">

Nb :
- you can change that red sentence with your own image url
- you change the size of height and width with your own height and width size

8. Before <data:post.title/>
9. Then save.

I hope this simple guide will help you.
Thank you :)

Tips and Trick for Blogs

8:53 AM

" Hi guys, do you know about Facebook Profil Badge ? Facebook Profil Badge is like the profile with image ourself that similiar with Blogger Profile. This badeg just to add the interactive point. Hehehe..

So, if you all interest to want try, watch this more.
Follow this steps :
1. First login to your Facebook account
2. Then click this "profile badge"


3. Click Edit Badge, and will out the screen like this,


In this you can edit your Facebook Profil Badge,
Layout, you can choose :
Vertical
Horizontal
2 Columns

Items, you can choose items that will show in the Profil Badge :
Profile pic
Name
Networks
Hometown
Current City
Email
Screen name
Birthday
Mobile number
Websites
Status updates
Recent pics by me
Upcoming events
Latest notes
Posts

4. After that save
5. And click Blogger Image, not Typepade or other


You can choose to,
1. Just click Add Widget, and that profile widget will automatically available in your blog
2. Or copy the code in Edit Content, and paste anywhere in your blog

6. Finish

Tips and Trick for Blogs

2:01 AM