Showing posts with label Efek Blog Menengah. Show all posts
Showing posts with label Efek Blog Menengah. Show all posts

Tuesday, March 10, 2009

Menyembunyikan isi sidebar

3 comments
"fajardesign pada March 10, 2009 2:55 PM mengatakan...wah bos...thenkyu yaa dah ngasih trik yang saya cari...tapi bos...bisa gak trik ini dipakai selain di postingan...misalkan untuk menyembunyikan tulisan/gambar di sidebar, atau header, atau footer...jadi biar ga makan tempat sidebar gituh..
kira-kira bisa gak?"


Itulah sepenggal Komentar dari sahabat saya yang bernama Mas Fajar yang dimana beliau seorang Blogger yang sangat mendalami dunia per-desainan. Nah untuk yang ingin melihat-lihat sekalian belajar desain silahkan kunjungi blog beliau disini.

Nah untuk membuat isi sidebar supaya ga keliatan ada berbagai macam cara yang bisa kita lakukan. Disini kita akan membuat

Demo 1:



Ikuti cara dibawah ini

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML"
3. Copy paste kode dibawah ini dan taruh diatas

<script type="text/javascript" src="http://www.geocities.com/adeha_182/jquery-1.2.6.pack.js"></script>

<script type="text/javascript" src="http://www.geocities.com/adeha_182/ddaccordion.js"></script>

Tuesday, March 3, 2009

Memodifikasi kotak komentar Pemilik Blog

12 comments


Lihat Tulisan kotak Komentar pemilik blog (Andie)merah muda pada gambar diatas. Itulah yang akan kita buat. Ini caranya :

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML" trus kasih centang tanda "Expand Widget Templates"

3. Copy CSS dibawah ini

/* Warna Kotak Komentar Pemilik Blog */
.commentpemilikblog {
background: #EEE0E5; /* Warna Background */
border:1px dashed #DC143C; /* Warna Garis Pinggir */
margin:0 0 10px 30px; /* Jarak Margin atas,kanan,bawah,kiri */
padding:0 0 0 20px; /* Jarak Padding atas,kanan,bawah,kiri */
}


+ Paste diatas kode ]]></b:skin>

4. Cari kode <dl id='comments-block'>

+ Dibawah kode tersebut ada kode ini :

<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='commentpemilikblog'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


+ Tambahkan kode yang berwarna merah seperti contoh diatas.

5. Save Template dan Selesai

+ Supaya Kotak Komentar bisa langsung muncul dibawah postingan klik Dashboard - Setting - Comment Form Placement - pilih Embedded below post

+ Save Setting

Seperti ini :



+ Thk to Ndyteen yg udah mau jadi contoh comment hehehehe...

Saturday, February 28, 2009

Membuat Tab Widget

15 comments
Demo :


Tutorial ini spesial diminta oleh pare widitya Lihat TAB WIDGET pada Demo diatas. Itulah yang akan kita buat. Ini caranya :
1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Add A Gadget" trus pilih "HTML/Javascript" dan copy paste kode dibawah ini :

<script language="JavaScript" type="text/javascript">
function st2(t){
for(i=1;i<=5;i++){
ts=document.getElementById('tt'+i);
tr = document.getElementById('dd'+i);
ta = document.getElementById('aa'+i);
if(t==i){
if(t==1) ts.className="Tab1";
if(t==2) ts.className="Tab2";
if(t==3) ts.className="Tab3";
if(t==4) ts.className="Tab4";
if(t==5) ts.className="Tab5";
ta.className="srchlinksel2";
ts.style.borderBottom="1px solid #FFFFFF";
tr.style["display"]="block";
tr.style["visibility"]="visible";
}
else{
ts.className="tb2";
ta.className="srchlink2";
ts.style.borderBottom="1px solid #B5D6EF";
tr.style["display"]="none";
tr.style["visibility"]="hidden";
}
}
}
</script>

<style type="text/css">.f10 {
FONT-SIZE: 10px; FONT-FAMILY: arial
}
.f11 {
FONT-SIZE: 11px; FONT-FAMILY: arial
}
.f12 {
FONT-SIZE: 12px; FONT-FAMILY: arial
}
.f12r {
FONT-SIZE: 12px; LINE-HEIGHT: 13px; FONT-FAMILY: arial
}
.f12n {
FONT-SIZE: 12px; LINE-HEIGHT: 1.3em; FONT-FAMILY: arial
}
.ft11a {
FONT-SIZE: 11px; LINE-HEIGHT: 13px; FONT-FAMILY: Tahoma
}
.fv9 {
FONT-SIZE: 9px; FONT-FAMILY: verdana
}
.fv10 {
FONT-SIZE: 10px; FONT-FAMILY: verdana
}
.ft11 {
FONT-SIZE: 11px; LINE-HEIGHT: 14px; FONT-FAMILY: Tahoma
}
.fmicro9 {
FONT-SIZE: 9px; FONT-FAMILY: Microsoft Sans Serif
}
A.srchlink:link {
COLOR: #2864b4; TEXT-DECORATION: none
}
A.srchlink:visited {
}
A.srchlinksel:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlink2:link {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlink2:visited {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlinksel2:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel2:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}

.tb2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#D9E9F6');BACKGROUND-COLOR: #d9e9f6
}
.tbmain2 {
BACKGROUND-COLOR: #ffffff
}
.lfttbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#DEFFC6',EndColorStr:'#B7E4A2'); BACKGROUND-COLOR: #deffc6
}
.rttbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#DEEFF7'); BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #eef5fb
}
.rttblx {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #ffffff
}
.rt_tbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #b0dafd
}
.toptbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#4A84AD',EndColorStr:'#00426B'); BACKGROUND-COLOR: #00426b
}
.srchtbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FFFFFF',EndColorStr:'#A5DEDE'); BACKGROUND-COLOR: #a5dede
}
.Tab1 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEDFB3',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #fedfb3
}
.Tab2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#B39DFE',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #b39dfe
}
.Tab3 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#F6FE9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #f6fe9d
}
.Tab4 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEAF9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #feaf9d
}
.Tab5 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#9DFEA5',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #9dfea5
}

A {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline}
</style>

<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td align="middle" onclick="st2('1')" height="22" id="tt1"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid" width="70"
class="Tab1"><a id="aa1"
class="srchlinksel2" href="javascript:undefined"><font
class="f12"><b>TAB 1</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('2')" height="22" id="tt2"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="47"
class="tb2"><a id="aa2"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>TAB 2</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('3')" height="22" id="tt3"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="62"
class="tb2"><a id="aa3"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>TAB 3</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('4')" height="22" id="tt4"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="48"
class="tb2"><a id="aa4"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>TAB 4</b></font></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td align="middle" onclick="st2('5')" height="22" id="tt5"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="52"
class="tb2"><a id="aa5"
class="srchlink2" href="javascript:undefined"><font
class="f12"><b>TAB 5</b></font></a></td></tr>
<tr>
<td colspan="9">
<div style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP:
0px; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px;
BORDER-BOTTOM: 0px"
><!-- Main Headlines Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380" height="5">
<tbody>
<tr>
<td height="5"></td></tr></tbody></table>
&nbsp;&nbsp; <font color="#797979" class="f10"
>

Browse Items</font>

<div id="dd1" style="BORDER-RIGHT: #b5d6ef 0px solid;
BORDER-TOP: 0px; DISPLAY: block; VISIBILITY: visible;
BORDER-LEFT: #b5d6ef 0px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
>
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">

<!-- ISI TAB 1 -->

<a href=" http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnkqpKiwMFnJqO7W4zIbty2bX5dRmpNuU6JoW8G4a0C3je6IzkHAfuqgR68K7nHGcd8fcivJEMyxNgxuiI5duE9lnM9Ty2bCPLLMyne7jnpyrUy6q5JbLOFRGbylEiZia7b_2PPuR2cPY/s400/meredith_andrews-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com">Judul Link mu</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLYPsKKkXfZp0ZX8LEzK9eRvjHJSpadk6IbOA2Y4Pyw831j2R2HY5fAZ6Dkwp8jl_Q7Xx2L7r7Fp1RZV5dIGhJPtQcJUMp7aCiDAqxhFhxsV09udjMt1kN6Qx-9qAXVWqw-3mWv_VttI/s400/brooke_fraser-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUobld-m1MWV_OEigmlvtgGDr7si7gQjUHQJzo58MDBRP6J2i2ZzyfeJyhMoTH60IiyzP8AfUboDYxw6MzM3GgvW6Of40K22hsyZw6x3TbJDGPnpdYxltgSfB1ObKKPtXaMPqeBrnvD-o/s400/hillsong_united-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<b><a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com'>Read More Posts From This Category</a></b>

</font></td>
</tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table></div><!-- Main
Headlines End //--></div>
<div id="dd2" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- News Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">

<!-- ISI TAB 2 -->

<a href=" http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnkqpKiwMFnJqO7W4zIbty2bX5dRmpNuU6JoW8G4a0C3je6IzkHAfuqgR68K7nHGcd8fcivJEMyxNgxuiI5duE9lnM9Ty2bCPLLMyne7jnpyrUy6q5JbLOFRGbylEiZia7b_2PPuR2cPY/s400/meredith_andrews-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com">Judul Link mu2</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLYPsKKkXfZp0ZX8LEzK9eRvjHJSpadk6IbOA2Y4Pyw831j2R2HY5fAZ6Dkwp8jl_Q7Xx2L7r7Fp1RZV5dIGhJPtQcJUMp7aCiDAqxhFhxsV09udjMt1kN6Qx-9qAXVWqw-3mWv_VttI/s400/brooke_fraser-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu2</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUobld-m1MWV_OEigmlvtgGDr7si7gQjUHQJzo58MDBRP6J2i2ZzyfeJyhMoTH60IiyzP8AfUboDYxw6MzM3GgvW6Of40K22hsyZw6x3TbJDGPnpdYxltgSfB1ObKKPtXaMPqeBrnvD-o/s400/hillsong_united-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu2</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<b><a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com'>Read More Posts From This Category2</a></b>


</font></td></tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- News End
//--></div>
<div id="dd3" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Business Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">

<!-- ISI TAB 3 -->

<a href=" http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnkqpKiwMFnJqO7W4zIbty2bX5dRmpNuU6JoW8G4a0C3je6IzkHAfuqgR68K7nHGcd8fcivJEMyxNgxuiI5duE9lnM9Ty2bCPLLMyne7jnpyrUy6q5JbLOFRGbylEiZia7b_2PPuR2cPY/s400/meredith_andrews-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com">Judul Link mu3</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLYPsKKkXfZp0ZX8LEzK9eRvjHJSpadk6IbOA2Y4Pyw831j2R2HY5fAZ6Dkwp8jl_Q7Xx2L7r7Fp1RZV5dIGhJPtQcJUMp7aCiDAqxhFhxsV09udjMt1kN6Qx-9qAXVWqw-3mWv_VttI/s400/brooke_fraser-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu3</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUobld-m1MWV_OEigmlvtgGDr7si7gQjUHQJzo58MDBRP6J2i2ZzyfeJyhMoTH60IiyzP8AfUboDYxw6MzM3GgvW6Of40K22hsyZw6x3TbJDGPnpdYxltgSfB1ObKKPtXaMPqeBrnvD-o/s400/hillsong_united-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu3</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<b><a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com'>Read More Posts From This Category3</a></b>


</font></td></tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Business End
//--></div>
<div id="dd4" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Movies Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">

<!-- ISI TAB 4 -->

<a href=" http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnkqpKiwMFnJqO7W4zIbty2bX5dRmpNuU6JoW8G4a0C3je6IzkHAfuqgR68K7nHGcd8fcivJEMyxNgxuiI5duE9lnM9Ty2bCPLLMyne7jnpyrUy6q5JbLOFRGbylEiZia7b_2PPuR2cPY/s400/meredith_andrews-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com">Judul Link mu4</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLYPsKKkXfZp0ZX8LEzK9eRvjHJSpadk6IbOA2Y4Pyw831j2R2HY5fAZ6Dkwp8jl_Q7Xx2L7r7Fp1RZV5dIGhJPtQcJUMp7aCiDAqxhFhxsV09udjMt1kN6Qx-9qAXVWqw-3mWv_VttI/s400/brooke_fraser-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUobld-m1MWV_OEigmlvtgGDr7si7gQjUHQJzo58MDBRP6J2i2ZzyfeJyhMoTH60IiyzP8AfUboDYxw6MzM3GgvW6Of40K22hsyZw6x3TbJDGPnpdYxltgSfB1ObKKPtXaMPqeBrnvD-o/s400/hillsong_united-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu4</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<b><a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com'>Read More Posts From This Category4</a></b>


</font></td>
</tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Movies End
//--></div>
<div id="dd5" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 380px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Sports Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="380">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">

<!-- ISI TAB 5 -->

<a href=" http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnkqpKiwMFnJqO7W4zIbty2bX5dRmpNuU6JoW8G4a0C3je6IzkHAfuqgR68K7nHGcd8fcivJEMyxNgxuiI5duE9lnM9Ty2bCPLLMyne7jnpyrUy6q5JbLOFRGbylEiZia7b_2PPuR2cPY/s400/meredith_andrews-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com">Judul Link mu</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL ATAU LINK ARTIKEL MU.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLYPsKKkXfZp0ZX8LEzK9eRvjHJSpadk6IbOA2Y4Pyw831j2R2HY5fAZ6Dkwp8jl_Q7Xx2L7r7Fp1RZV5dIGhJPtQcJUMp7aCiDAqxhFhxsV09udjMt1kN6Qx-9qAXVWqw-3mWv_VttI/s400/brooke_fraser-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu5</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<a href=" http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com "><img style="float:left;margin:0px 10px 0px 0px; width: 110px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUobld-m1MWV_OEigmlvtgGDr7si7gQjUHQJzo58MDBRP6J2i2ZzyfeJyhMoTH60IiyzP8AfUboDYxw6MzM3GgvW6Of40K22hsyZw6x3TbJDGPnpdYxltgSfB1ObKKPtXaMPqeBrnvD-o/s400/hillsong_united-1.jpg" /></a><!--Taruh link gambar "thumbnailmu" disini. Saya rekomendasikan ukurannya 110px X 110px.-->

<b><a href="http://LINK LABEL2 ATAU LINK ARTIKEL MU2.blogspot.com">Judul Link mu5</a></b>

<p> Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...&nbsp;<a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com '>[Read more of this review]</a></p> <!--Deskripsi singkat artikelmu dan Link Artikel atau Link Label mu.-->

<div style="border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; width: 98%; clear:both;"/></div><!--Garis biru dibawah Deskripsi singkat artikelmu.-->

<b><a href='http://LINK LABEL3 ATAU LINK ARTIKEL MU3.blogspot.com'>Read More Posts From This Category5</a></b>


</font></td></tr>
<tr>
</tr>
<tr>
<td
height="4"></td></tr></tbody></table>


+Ganti kode warna yang berada di area yang berwarna ungu dengan warna pilihanmu.
Contoh :
StartColorStr:'#FEDFB3',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #fedfb3

+Ganti kode warna merah dengan Link Artikel / Label Blogmu.
+Ganti kode warna hijau dengan warna Link Gambar Blogmu. Saya rekomendasikan ukuran gambarnya 110px X 110px.
+ Ganti kode warna border #B5D6EF dengan warna pilihanmu.

Tips : pake Ms. Word editnya biar cepat. Gunakan fasilitas Find and Replace dari menu Edit di Ms. Word. Copy kode warna B5D6EF, kemudian paste diFind What dan tulis kode warna yang kamu inginkan di Replace With. Terus klik Replace All. Contoh lihat gambar dibawah :



Monday, February 23, 2009

Membuat Page Navigation (Breadcrumb)

3 comments

Lihat Tulisan diatas judul Posting, yang ini :
(Home>Cara Membuat Readmore (Versi 1)>Cara Membuat Readmore) pada gambar diatas. Itulah yang akan kita ganti. Ini caranya :

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML" trus kasih centang tanda "Expand Widget Templates"

3. Copy Kode ini dan paste diatas kode ]]></b:skin>

.breadcrumb {
float: left;
width: 590px;
font-size: 11px;
margin: 0px 0px 20px 0px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}


+ Silahkan modifikasi sendiri kode CSS diatas sesuai dengan Template mu.

4. Copy Kode ini dan paste dibawah kode <div class='post hentry uncustomized-post-template'>

<b:if cond="data:blog.pageType == &quot;item&quot;">
<div class="breadcrumb">

<a href="data:blog.homepageUrl">Home</a>
<b:if cond="data:post.labels">
&gt;
<b:loop values="data:post.labels" var="label">
<a href="data:label.url" rel="tag"><data:label.name></data:label.name></a><b:if cond="data:label.isLast != &quot;true&quot;">,</b:if>
</b:loop>
</b:if>
&gt; <data:post.title>
</data:post.title></div>
</b:if>
<b:if cond="data:navMessage">
<div class="breadcrumb">
<a href="data:blog.homepageUrl">Home</a> &gt; <data:navmessage>
</data:navmessage></div>
</b:if>


6. Save Template dan Selesai

+ Lihat gambar dibawah ketika kamu klik Label / Kategori Blog mu yang sudah dipasangi Page Navigation (Breadcrumb). Akan muncul kotak Showing posts with label Cara Membuat Readmore (Versi 1). Show all posts



Tidak rapi kan?. Nah untuk cara supaya rapi silahkan lihat Tutorialnya disini Menghilangkan "Showing post with label...show all ...

Hasilnya setelah menerapkan Tutorial Menghilangkan "Showing post with label...show all ... seperti ini :


Sunday, February 8, 2009

Membuat efek slide show Smooth Gallery

30 comments
Sebelumnya ini request special dari Mas Gede Permana dan Meindra dan banyak teman-teman yang lain yang tidak bisa saya sebutkan satu persatu.

1. Copy Paste Script Berikut:

<!-- begin Smooth Gallery scripts -->
<link rel="stylesheet" type="text/css" href="http://www.geocities.com/adeha_182/jd2.gallery.css" />

<script src='http://www.geocities.com/adeha_182/mootools2.v1.11.js' type='text/javascript'/>

<script src='http://www.geocities.com/adeha_182/jd2.gallery.js' type='text/javascript'/>
<!-- end Smooth Gallery scripts -->


+ Login ke Blogger kemudian pilih "Layout"
+ Klik pada "Edit HTML" dan paste kode diatas dibawah <head>

2. Masih di "Edit HTML", Copy kode dibawah ini:

<div id='isismoothgallery'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 500px;
height: 400px;
z-index:5;
border: 1px solid #000;
margin: 0px 0px 0px 30px;
}

.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 85px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($(&#39;myGallery&#39;), {
timed: true
});
}
window.addEvent(&#39;domready&#39;,startGallery);
</script>

<div id='myGallery'>
<div class='imageElement'>
<h2>Featured Article #1</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-1.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #2</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-2.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #3</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-3.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
</div>

</div>
</b:if>
</div>


Paste kode diatas, persis diatas kode ini :

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>


+ Ganti tulisan Featured Article #1, Featured Article #2, Featured Article #3 yang bercetak tebal dengan Judul artikelmu.

+ Ganti tulisan yang berwarna Merah sesuai ukuran lay out mu.
  • width: 500px; (lebar Smooth Gallery)
  • height: 400px; (tinggi Smooth Gallery)
  • margin: 0px 0px 0px 30px; (jarak atas,kanan,bawah,kiri Smooth Gallery)

+ Ganti tulisan yang berwarna Biru dengan Ringkasan artikelmu.

+ Ganti tulisan yang berwarna Hijau dengan Link artikelmu.

+ Ganti tulisan yang berwarna Ungu dengan Link Gambarmu.

+ Untuk menambah elemen slideshow, copy kode yang berkedip - kedip dan paste dibawahnya kode tersebut.

3. Simpan dan Lihat Hasilnya. 'Trust Me It's Work'

4. Posisi kode-kode semuanya :

<html>
<head>

<!-- begin Smooth Gallery scripts -->
<link rel="stylesheet" type="text/css" href="http://www.geocities.com/adeha_182/jd2.gallery.css" />

<script src='http://www.geocities.com/adeha_182/mootools2.v1.11.js' type='text/javascript'/>

<script src='http://www.geocities.com/adeha_182/jd2.gallery.js' type='text/javascript'/>
<!-- end Smooth Gallery scripts -->


<b:skin><![CDATA[/*

DISINI TEMPAT KODE2 CSS


]]></b:skin>
</head>

<body>
<div id='main-wrapper'>
<div id='isismoothgallery'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 400px;
height: 300px;
z-index:5;
border: 1px solid #000;
margin: 0 0 30px;
}

.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 85px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($(&#39;myGallery&#39;), {
timed: true
});
}
window.addEvent(&#39;domready&#39;,startGallery);
</script>
<div id='myGallery'>
<div class='imageElement'>
<h2>Featured Article #1</h2>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-1.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #2</h2>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-2.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #3</h2>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.revolutiontwo.com/demo/church/featured/featured-article-3.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
</div>

</div>
</b:if>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

</body>
</html>


5. Contoh silahkan klik disini samplesmoothgallery.blogspot.com/

Thursday, February 5, 2009

Pasang Flash di Blog

9 comments
1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3.Copy Paste Script Berikut:


<embed src="http://YOURFLASHNAME.swf" quality="high" bgcolor="white" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>


4. Ganti
http://YOURFLASHNAME.swf dengan alamat file flash kamu yang telah ditaruh di hosting.

5. Ganti width="500" height="100" dengan ukuran dari file flashmu.

6. Terus Simpan.

+.Untuk membuat file flash bisa ke link ini http://www.bannermakerproforflash.com atau ke sini http://flashvortex.com/

+.Contoh :







Thursday, January 22, 2009

Domain Blog di DNS

1 comments
Pertama kita perlu mendaftar di webpenyedia layanan DNS gratis. Apa itu DNS? DNS (Domain Name Service)adalah sebuah sistem yang menyimpan informasi tentang nama host maupunnama domain dalam bentuk basis data tersebar (distributed database) di dalam
jaringan komputer, misalkan: Internet. Sebetulnya di dunia maya banyak
terdapat web yang menyediakan layanan DNS gratis, tetapi untuk kali ini saya
akan membahas tentang bagaimana mendaftar di http://www.everydns.net.
Yang kedua, Buat domain itu sendiri. Kalo untuk domain .id di Indonesia di pegang oleh PANDI (Pengelola Nama Domain Internet Indonesia) tapi kalo mau mendaftar kan nama domain anda bisa buka pada alamat https://register.pandi.or.id/


Mendaftar di EveryDNS.net :

1. Masuk di alamat http://www.everydns.net/
2. Pada kolom Signup, masukan data yang diminta berupa user name,
alamat email dan password.
3. Jika sudah terdaftar kemudian lakukan proses Login.
4. Kemudian tuju ke kolom Add new domain: (basic)
5. Masukan alamat domain kamu (contoh: weanenugi.web.id)
kemudian klik button >> (basic)

6. Jika tidak ada kesalahan, maka pada kolom Primary Domains:
akan tampak nama domain yang telah dibuat.


7. Klik nama domain yang ingin di konfigurasi.
8. Pada kolom Add a record:
  • Fully Qualified Domain Name: -> masukkan www
  • Record Type: -> pilih Cname
  • Record Value: -> masukkan ghs.google.com *Gamber everydns4*
9. Kemudian klik button Add Record
10. Pada tahapan ini semua proses sudah selesai. Lihat pada kolom CurrentRecord: jika tampak seperti gambar dibawah maka setting Cname kitasudah berhasil.Lihat pada Current Record jika sudah ada tulisan ghs.google.com berarti sudah berhasil.


Sampai disini setting untuk dns selesai, maka nama server tujuan untuk
domain yang akan digukanan adalah sebagai berikut:
ns1.everydns.net
ns2everydns.net
ns3everydns.net
ns4everydns.net
ns5everydns.net


Mendaftar di Register.pandi.or.id


Sesudah anda melakukan konfigurasi DNS, sekarang anda tinggal
mendaftar di register.net.id, untuk caranya silahkan baca dibawah ini
1. Silahkan masuk di alamat https://register.pandi.or.id/
2. Akan muncul kofigurasi sertifikat dari register.net.id silahkan pilih yang
paling atas yang bertuliskan accept this certificate permanently dan klik OK
3. Silahkan klik Register
4. Silahkan isi formulir yang disediakan, kemudian klik tombol register (untuk nama web masukkan nama seperti yang anda masukkan pada everydns )
5. Anda akan dikirim sebuah email aktifasi di email yang anda daftarkan tadi
6. Ikuti perintah yang ada di email tersebut
7. Jika sudah anda aktifkan account anda silahkan masuk di account anda
8. Klik tulisan Domaint Management Domain List


9. Klik tombol Register, akan muncul Domain Check, pada Domain
silahkan isi dengan domain yang anda daftarkan di DNS Park tadi dan pada
menu dropdown pilih .web.id

10. Kemudian klik tombol Check >>
11. Bila domain belum terdaftar klik tombol register dan bila sudah terdaftar
silahkan mengganti nama domainnya (tentunya anda harus mengganti
nama domain yang ada di DNS Park)


12. Silahkan isi formulir yang disediakan, perlu diperhatikan pada

Primary Server : Isi dengan ns1.everydns.net
Net Address : Kosongi saja
Secondary Server : Isi dengan ns2. everydns.net
Net Address : Kosongi saja
Secondary Server : Isi dengan ns3. everydns.net
Net Address : Kosongi saja
Secondary Server : Isi dengan ns4. everydns.net
Net Address : Kosongi saja
Contohnya seperti gambar di bawah ini :

13. Kemudian klik register


14. Kemudian Klik tombol <<> Publikasi setelah berada di halaman
Publikasi silahkan klik Domain Kustom klik tulisan Beralihlah ke
pengaturan lanjut
3. Masukkan alamat domain anda di Domain Anda
(contoh: www.webanda.web.id)

4. Kemudian Klik tombol Simpan Pengaturan
5. Dan sampai disini setting domain anda telah selesai dan domain anda
segera aktif

 

Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com