Kali ini saya akan memberikan tutorial bagaimna cara membuat link dalam suatu blog atau website menjadi warna-warni gitu.Contoh seperti di blog saya yang satunya http://yudhim.blogspot.com/. Kalo masih pada bingung silahkan kalian coba dulu aja yah??
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Cari kode <head>
6. Tambah kode ini dibawahnya :
<script src='http://alien.keren.googlepages.com/warna.js'></script>
7. Save dan lihat hasilnya.
/*-- (Search) --*/
Terima kasih kepada temanku yang bertanya bagaimana cara membuat menu horizontal??Nah kali ini saya akan memberikan solusinya.Sebenarnya banyak yang cara yang digunakan untuk membuat menu horizontal salah satunya dengan cara ini.Mungkin cara ini lain dari pada yang lain.Ok ddeh langsung saja kita mulai...
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Cari kode ini ]]></b:skin>
6. Kemudian taruh kode ini diatasnya :
/*-- (Menu/Nav) --*/
#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:600px}
#nav-right{float:right; display:inline; width:100px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0;
font:1.0em Arial,Helvetica,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px;
padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px;
padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li
a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px
7px}
#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px
2px no-repeat; -moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right;
height:25px; margin:0 0px 0 0; width:180px}
* html #search{margin-right:8px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif;
background:transparent; border:0; color:#555; float:left; font-size:12px;
margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}
7. Kemudian cari kode ini <div id='outer-wrapper'><div id='wrap2'>
8. Taruh kode di bawah ini dibawah kode diatas :
<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes'
showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form expr:action='data:blog.homepageUrl + "search"' id='searchform'
method='get' name='searchform'>
<b:if cond='data:title'/>
<div id='search'>
<input class='s' id='s' name='q' onblur='if (this.value == '')
{this.value = 'Cari artikel disini';}' onfocus='if (this.value ==
'Cari artikel disini') {this.value = '';}' type='text'
value='Cari artikel disini'/>
<input id='searchsubmit' type='hidden' value='Search'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
9. Save dan lihat hasilnya.
Di dalam blogger kita dapat membuat arsip ke dalam suatu data yang tersimpan di dalam blogger dan dapat kita publikasikan dalam bentuk dropdown menu atau hierarki.Ok langsung saja kali ini saya akan mengajari bagaimana memperlebar Dropdown menu.
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Cari kode ini :
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
6. Ganti kode diatas dengan kode ini :
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"' style='width:100%'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
7. Save dan lihat hasilnya.
catatan : Kalian tinggal ubah angka yang ada di kode ini style='width:100%'
Sebenarnya dalam menghilangkan tanggal posting di blogspot sangatlah mudah kalian hanya menambahkan sedikit kode ini agar tanggal postingnya hilang.Ok deh langsung saja kita mulai tutorialnya dari pada berlama-lama.
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Tambahkan kode warna merah di bawah ini diantara kode-kode di bawah :
h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80%;
color:#777;
height: 0px;
visibility: hidden;
}
6. Save dan lihat hasilnya.
Ok tmen2 kali ini saya akan memberikan cara bagaimana cara menghilangkan navbar blogger versi 2 yaitu apabila mouse kita menuju ke atas blog kita maka navbar tersebut akan otomatis muncul sendiri secara otomatis.
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. cari kode :
body {
6. Kemudian taruh kode di bawah ini diatas kode body { :
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,
FinishedOpacity=100)}
7. Save dan lihat hasilnya.
Mungkin kalian semua masih pada bingung apa yang dimaksud dengan Fixed menu. Fixed menu adalah widget yang setiap kita tarik scroll ke bawah atau ke atas widget ini akan ikut turun naik juga.Dari pada kalian pada bingung mending langsung aja kalian coba yah tutorialnya dan jangan lupa backup templatenya dulu.
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Cari kode ini :
]]></b:skin>
6. Tambahkan kode ini diatasnya :
#menulateral{
position:fixed; text-align:left;
/*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
margin-top:100px; margin-left:-28px; }
* html #menulateral{ /*para IE*/
position:absolute; }
#menulateral a img{
opacity:1; -moz-opacity:1;
filter:alpha(Opacity=100); }
#menulateral a:hover img{
opacity:0.8; -moz-opacity:0.8;
filter:alpha(Opacity=80);
position:relative;top:0px;left:2px; }
* html #menulateral a img{
filter:alpha(Opacity=100); }
#menulateral img{
margin-bottom: -5px; }
* html .menulateral{
margin-bottom: -3px; }
7. Kemudian cari kode ini :
<div id='content-wrapper'>
8. Tambahkan kode ini dibawahnya :
<div id='menulateral'>
<span>
<a href='http://klinik-tutorial.blogspot.com/' style='border:0;' title='Home'><img alt='Home' class='menulateral'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWAfyynvdt6zx0Vvl_9-3RkORQ9HnJPnofPf_M6BGB751OB75x4PL3SfDQ-0Gk_gswg2oN1yIo5EHNBZkN4bmzMU27Kd0aCww9DSvJ1DIi44fm-g81g6qSQktEjl49v9yCoaZDdI2S4kE/s1600/menu-lateral-inicio.png'/></a>
<br/><a href='#BlogArchive1' style='border:0;' title='Archivo'><img alt='Archivo'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj03CU0K-e8QYu4Ynem_puUgjTaZ-HGK18yP6uRyWyoPNp1w5QODAd3qSICmvOurZ_BApc2y6fdP9KhbhZKws_aXvPaD7dS_czy2iyzMptRf7UqlYqTbdh-ln4r8gIXh-sWZOxdLQzGfMA/s1600/menu-lateral-archivo.png'/></a>
<br/><a href='mailto:TU-MAIL@servidor.com' style='border:0;' title='Contact me'><img alt='Contact me'
class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEHdtqYLuFxzmI13RNyvecozAB94s_6_5jrdy7EXEQdvfn46ePtgl2w9_h69wtjdDkRZaKIcRNwuwkX_jle6UkqRnbS95Q4wOLR_YG1wqW5XOkyTJt0g5YUoGI9y6ixmxEBbu0e8bfrPw/s1600/menu-lateral-contacto.png'/></a>
<br/><a href='http://klinik-tutorial.blogspot.com/feeds/posts/default' style='border:0;' title='Suscribete a post
Feed'><img alt='Suscribete a post Feed' class='menulateral'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifn2H3J7byGg6i1-_gWhJ8eRCTPuZQ0A_JuwccrzmkofedVek-mSpRUhrRgdoMBE3gjpic-uRqu-vQgaQF2RqTHiuuMULwGVZS0r8HuEc_DjocSZuQ4pchVSlzHkkpCAVq-b82sWn2aHM/s1600/menu-lateral-feed.png'/></a>
<br/><a href='http://klinik-tutorial.blogspot.com/feeds/comments/default' style='border:0;' title='Suscribete a comment
Feed'><img alt='Suscribete a comment Feed' class='menulateral'
src='http://i120.photobucket.com/albums/o190/jaloewig/jaloe/Menu%20Fixed/feed-icon-16x16b_BG_G.png'/></a>
<br/><a href='#' style='border:0;' title='My Album'><img alt='My Album' class='menulateral'
src='http://i120.photobucket.com/albums/o190/jaloewig/jaloe/Menu%20Fixed/flickr_icon_BG_G.png'/></a>
<br/><a href='#' style='border:0;' title='Arriba'><img alt='Arriba"' class='menulateral'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk9GOFt7QyAkoB5izt6IVagCLWzChW0xvvIm85GaIcpp0K7QwnvuJK9jaqE2m8US-Z_cELuRdj3BpHEXJhDbxf9-s_spqMNAJGp7VbWS9pfM9tE6cHBCnw0MUxEGVSpFTPfBrI2kV1N0g/s1600/menu-lateral-arriba.png'/></a>
</span>
</div>
9. Agar tidak berdempetan dengan template coba kalian cari kode ini :
margin-top:100px;
margin-left:-28px;
ganti margin-left dengan -40px atau jika masih tidak bisa kalian kurangi saja trus dan jangan smpai bderdempetan.
catatan : Ganti tulisan berwarna merah diatas dengan alamat blog kalian.
Mungkin kalian masih pada bingung dengan judul yang saya berikan.Nah kali ini saya akan memberikan cara bagaimana membuat Kotak Scroll pada Sidebar.Contohnya kira2 seprti ini :
Ok dari pada berlama-lama saya langsung kasih aja tutornya :
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Cari kode ini :
]]></b:skin>
6. Tambahkan kode ini diatasnya :
#scrolling {
overflow: auto; height: 100px; width: 94%;
background-color:#EFEFEF; border:1px solid #777;
margin: 0px auto; padding:5px; font-size: 14px;
color: #999; text-align: left;
}
7. Cari kode ini :
<b:widget id='LinkList1' locked='false' title='Blogroll' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul> <b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
8. Tambahkan kode yang berwarna hijau dibawah ini diantara kode-kode diatas :
<b:widget id='LinkList1' locked='false' title='Blogroll' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div id='scrolling'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>
Catatan : Silahkan ganti tulisan yang berwarna diatas dengan warna sesuai dengan keinginan kalian.
Mungkin kalian semua masih bingung dengan judul yang saya berikan diatas.Nah saya akan menjelaskannya sedikit,kali ini saya akan memberika turorial bagaimana cara Membedakan gambar di setiap postingan mksdnya sekarang kalian bisa menyisipkan gambar berbentuk JPG or GIF di setiap postingan anda.Contohnya seperti ini :
1. Sign in Blogger
2. Pilih New Post
3. Klik Edit HTML
4. Tambahkan kode ini setiap kalian ingin memposting
<div style=”background: transparent url(http://alien.keren.googlepages.com/cooltext87191970.jpg) repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; font-weight: normal; text-align: justify;”>TEXT</div>
5. Save dan lihat hasilnya
Catatan : Ganti tulisan berwarna hijau diatas dengan URL yang kalian tuju.
<input onclick=”this.form.langpair.value=this.value” title=”French” value=”en|fr” type=”image” height=”20″ src=”http://photos1.blogger.com/img/43/1633/320/13539949_e76af75976.jpg” width=”30″ name=”langpair”/> <input onclick=”this.form.langpair.value=this.value” title=”German” value=”en|de” type=”image” height=”20″ src=”http://photos1.blogger.com/img/43/1633/320/13539933_041ca1eda2.jpg” width=”30″ name=”langpair”/> <input onclick=”this.form.langpair.value=this.value” title=”Italian” value=”en|it” type=”image” height=”20″ src=”http://photos1.blogger.com/img/43/1633/320/13539953_0384ccecf9.jpg” width=”30″ name=”langpair”/> <input onclick=”this.form.langpair.value=this.value” title=”Portuguese” value=”en|pt” type=”image” height=”20″ src=”http://photos1.blogger.com/img/43/1633/320/13539966_0d09b410b5.jpg” width=”30″ name=”langpair”/> <input onclick=”this.form.langpair.value=this.value” title=”Spanish” value=”en|es” type=”image” height=”20″ src=”http://photos1.blogger.com/img/43/1633/320/13539946_2fabed0dbf.jpg” width=”30″ name=”langpair”/> <input onclick=”this.form.langpair.value=this.value” title=”Japanese” value=”en|ja” type=”image” height=”20″ src=”http://photos1.blogger.com/img/43/1633/320/13539955_925e6683c8.jpg” width=”30″ name=”langpair”/> <input onclick=”this.form.langpair.value=this.value” title=”Korean” value=”en|ko” type=”image” height=”20″ src=”http://photos1.blogger.com/img/43/1633/320/13539958_3c3b482c95.jpg” width=”30″ name=”langpair”/> <input onclick=”this.form.langpair.value=this.value” title=”Chinese Simplified” value=”en|zh-CN” type=”image” height=”20″ src=”http://photos1.blogger.com/img/43/1633/320/14324441_5ca5ce3423.jpg” width=”30″ name=”langpair”/> <input onclick=”this.form.langpair.value=this.value” title=”Arabic” value=”en|ar” type=”image” height=”20″ src=”http://farm4.static.flickr.com/3043/2347434064_0d36a04624_o.gif” width=”30″ name=”langpair2″/>
Google translate merupakan widget yang dapat digunakan untuk mempercantik blog kita tetapi ini hanya dapat digunakan untuk blog atau website bahasa inggris karena widget ini hanya untuk mentranslate dari bahasa inggris ke bahasa lainnya. sayangnya translate untuk bahasa indonesia belum ada.
1. Sign in di Blogger
2. Kemudian pilih layout
3. Tambahkan Elemen HTML / Javascript
4. Masukkan kode ini :
<form action=”http://www.google.com/translate”>
<script language=”JavaScript”>
<!–
document.write (”<input name=u value=” location.href ” type=hidden>”)
// –>
</script>
<input value=”en” name=”hl” type=”hidden”/>
<input value=”UTF8″ name=”ie” type=”hidden”/>
<input value=”" name=”langpair” type=”hidden”/>
</form>
6. Save dan lihat hasilnya.
Baca Selengkapnya......
apa kalian pernah melihat blogspot yang labelnya yang seperti ini yang angkanya sudah dihilangkan atau dihapus??? :
Nah kali ini saya akan memberikan cara bagaimana cara menghilangkan angka pada label blogspot.Sebenarnya banyak juga template yang sudah menghilangkan angka pada templatenya itu.Nah saya akan memberi tahu cara menghilangkan angka yang masih ada di dalam template itu.
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. cari kode ini :
<data:label.count/>
6. Hapus kode diatas jika kalian sudah temukan.
7. Save changes dan lihat hasilnya
Gambar pada latar belakang background atau template merupakan salah satu cara untuk mempercantik blog atau website kita dan kalian juga bisa memasukkan gambar atau widget pada latar belakang template background.
Contohnya seperti ini 
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. cari kode ini :
</head>
6. Tambahkan kode ini untuk posisi atas kiri :
<script language=”JavaScript” src=”http://alien.keren.googlepages.com/gambarbawah.js” type=”text/javascript”> </script> <script language=”JavaScript” type=”text/javascript”> cot(”http://alien.keren.googlepages.com/spiderman.jpg“) </script>
atau tambahkan kode dibawah ini untuk posisi bawah kanan :
<script language=”JavaScript” src=”http://alien.keren.googlepages.com/gambaratas.js” type=”text/javascript”> </script> <script language=”JavaScript” type=”text/javascript”> cot(”http://alien.keren.googlepages.com/spiderman.jpg“) </script>
7. Save dan lihat hasilnya.
Kali ini saya akan memberikan cara bagaimana memasukkan animasi flash ke website atau blog. Sebenarnya banyak cara yang digunakan untuk membuat animasi flash contohnya saya ini membuat animasi dengan macromedia flash 8. Ini salah satu contoh animasi yang saya buat di macromedia flash :
Ok sekarang saya kasih tahu caranya :
1. Kalian buat dulu animasi di macromedia flash atau software2 animasi lainnya
2. Upload file .swf tadi ke web hosting seperti googlepages.com
3. Copy file yang telah di upload tadi
4. Ganti tulisan kode berwarna hitam di bawah ini dengan file yang tadi kalian copy :
<object width="400" height="300"><param name="movie" value="http://alien.keren.googlepages.com/contoh.swf"></param><param name="wmode" value="transparent"></param><embed src="http://alien.keren.googlepages.com/contoh.swf" type="application/x-shockwave-flash" wmode="transparent" width="400" height="300"></embed></object>
5. Masukkan kode diatas di layout tambahkan elemen dan paste kode itu di html/javascript
Navbar blogger biasanya terletak di atas dari suatu blogspot contohnya seperti ini :
Nah kali ini saya akan memberikan tutorial bagaimana cara menghilangkan navbar blogger. Sebenarnya sudah banyak template yang sudah menghilangkan navbarnya sendiri tapi ada juga template yang tidak menghilangkan navbarnya. Nah kali ini saya akan memberikan cara bagaimana cara menghilangkan navbar blogger.Ok deh langsung saja kita mulai.
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. cari kode ini ]]></b:skin>
6. Taruh kode ini diatas kode diatas :
/* hilangkan navbar
----------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
7. Save Changes dan lihat hasilnya
Google page rank merupakan widget yang digunakan untuk melihat seberapa besar page rank dari website atau blog tersebut yang dilihat berdasarkan Bot/Crawler/Spider Google. Selain itu juga google page rank merupakan widget yang bagus buat mempercantik blog atau website kita. Setelah saya melakukan tes di website ini page rank ke sebagian website ternyata hanya google yang page ranknya bernilai 8. Website saya saja yang http://yudhim.blogspot.com/ hanya mempunyai page rank 4.
1. Sign in BLogger
2. Pilih Layout
3. Silahkan pilih elemen html / javascript
4. Masukkan kode di bawah ini : 
4,. Save dan lihat hasilnya.
Jangan pernah merubah kode diatas.
Saya kali ini akan memberikan bagaimana cara membagi 2 kolom header di blogspot. Sebenarya sudah banyak template gratis yang sudah membagi headernya menjadi dua tapi banyak juga template yang tidak membagi kolom headernya.Nah kali ini saya akan memberikan caranya.Kira-kira contohnya seperti ini :
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Cari kode ini :/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}
#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
6. Hapus kode diatas dan ganti dengan kode ini :/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}
#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}
#r_head{
width:300px;
float:left;
padding-top:10px;
}
7. Kemudian cari kode ini :<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
8. Hapus kode diatas dan ganti dengan kode di bawah ini :<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
9. Save Changes dan lihat hasilnya
Sebenarnya cara membuat link pada gambar atau tulisan itu hanya menggunakan sedikit kode html yang sangan mudah.Ok deh tidak usah berlama-lama kita langsung mulai saja tutorialnya.Kalau teman - teman masih pada bingung coba kalian lihat contoh dibawah ini kemudian klik gambarnya :
1. Upload Gambar yang kalian inginkan di image directory seperti http://pages.google.com/ atau http://www.photobucket.com/
2.
<a href="http://www.liveconnector.com/296786" target="new"><img src="http://www.liveconnector.com/images/promote/my_profile_blue.gif" border="0" alt="My Profile at LiveConnector"></a>
Ganti tulisan http://www.liveconnector.com/296786 yang berwarna merah dengan URL
yang kalian mau.
ganti juga tulisan http://www.liveconnector.com/images/promote/my_profile_blue.gif dengan URL gambar yang kalian upload lalu ganti judul tulisan My Profile at LiveConnector dengan judul yang kalian mau.
lalu kalau ingin membuat link pada tulisan kalian tinggal merubah tulisan yang berwarna merah yaitu dengan <a href="http://klinik-tutorial.blogspot.com/ target="new" title="Dinas Kesehatan Blog">Resep Blog</a>
Selamat mencoba
Kali ini saya akan memberikan tutorial bagaimana cara membuat Artikel Yang Berhubungan atau sering disebut dengan RElated Post atau kalau kalian masih bingung coba kalian lihat contohnya ini :
Ok langsung saja kita mulai tutorialnya :
1. Sign in Blogger
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Copy kode ini :<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
6. Paste kode diatas tepat di bawah kode ini <data:post.body/>
Kalau kalian pakai Readmore taruh kode diatas tepat di bawah kode yang pertama bukan yang kedua.
7. Save dan lihat hasilnya
Jika kalian ingin mengganti namanya tinggal klik layout kemudian edit HTML lalu cari tulisan ini "Related Posts by Categories" kemudian ganti dengan sesuai keinginan kalian.
Apa kalian pernah melihat Blog yang di backgroundnya ada efek2 salju seperti contoh blog ini Nah kalau sudah kali ini saya akan memberikan tutorial bagaimana cara membuat efek salju pada BLog atau website kita.Ok deh langsung saja kita mulai tutorialnya :
1. Sign in di Blogger
2. Kemudian pilih layout
3. Tambahkan Elemen HTML / Javascript
4. Copy dan paste kode dibawah ini :<script type="text/javascript" src="http://alien.keren.googlepages.com/klinikblog.snow.js">
/***********************************************
* Diambil dari Klinik BLog
* Snow Effect without images-by Kurt Grigg at http://www.btinternet.com/~kurt.grigg/javascript
* Script featured & available at Dynamic Drive at http://www.dynamicdrive.com/
* Please keep this notice intact
***********************************************/
</script>
Apa kalian pernah melihat blog yang seperti dibawah ini :
Ini dinamakan Kotak Komentar terbaru di blogger. Dulu kelemahan dari BLogger adalah dalam hal memberikan comment yang terlalu susah dan ribet tapi kali ini Blogger sudah menutupi kelemahannya.Oke deh langsung saja kita mulai tutorialnya :
1. Sign in http://draft.blogger.com/
2. Pilih setting kemudian pilih comment
3. Pilih Embed Below post pada kotak Comment Form Placement
4. Klik Save dan lihat hasilnya
Jika masih belum ada kotak komentarnya di bawah postingan coba pakai cara ini :
cari kode ini :<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>
kemudian ganti dengan kode 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>
Yahoo Emotion merupakan ekspresi-ekspresi seseorang yang biasa kita lihat di Yahoo Messenger atau yang biasa kita lihat di blog atau website.Kalo kalian masih bingung coba kalian lihat yang ini :
Ok deh langsung saja kita mulain tutorialnya :
1. Setting dulu kotak komentar anda di bawah postingan. Kalo masih bingung coba kalian klik ini
2. Layout
3. Edit HTML
4. Jangan lupa berikan tanda centang pada Expand Widget Templates
5. Masukan kode di bawah ini dan taruh diatas kode :<script src='http://alien.keren.googlepages.com/smiley.js'
type='text/javascript'/>
6. Lalu untuk menaruh Javascript emotion nya di bawah postingan kalian cari kode :
<p
class='comment-footer'>
7. Kemudian masukan kode di bawah ini tepat di bawahnya :<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'/>
:D
<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'/>
:p
<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'/>
:X
<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'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b>
8. Save Changes dan lihat hasilnya.
Subscribe to:
Posts (Atom)
