________________________________________________________________________________________________________________________________
Tampilkan postingan dengan label edit template. Tampilkan semua postingan
Tampilkan postingan dengan label edit template. Tampilkan semua postingan

Selasa, 12 April 2011

meluaskan header blog

Gimana dari keterangan diatas apakah Anda ingin mengubah header blog Anda menjadi penuh dengan body?



Oke langsung saja ke tutorial cara membuat header blog penuh dengan body blog

Pertama yaitu pastikan sudah log in ke blogger blogspot. Lalu masuk menu Layout/tata letak kemudian pilih Edit HTML

Lalu cari code dibawah ini

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<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='For example (Header)' type='Header'/> </b:section> </div>

Nah kalau sudah ketemu pindah code yang berwarna hijau dibawah code <body> dan diatas code yang berwarna merah. sehingga kurang lebih codenya menjadi seperti dibawah


<body><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='For example (Header)' type='Header'/> </b:section> </div>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>


Kalau langkah pertama sudah selesai sekarang atur juga CSSnya

Cari code CSS dibawah ini


#header-wrapper {
width:880px;
height:100px;
margin-bottom:2px;
padding-bottom:15px;
background:#FFFFFF;
border:1px solid #E0E0E0;

Nah ganti tulisan 880px yang berwarna merah diatas dengan 100%. Dan silahkan otak-atik CSS diatas sesuai bentuk yang Anda inginkan.

Nah selesai deh kemudian save.

HTML diatas berdasarkan template minima default blogspot. berhubung semua template tidak sama HTML-Nya silahkan kamu sesuaikan menurut template kamu sendiri. Silahkan berexperimen sendiri sobat semoga berhasil.

Sabtu, 09 April 2011

Membagi Side Bar Menjadi 2 Kolom







Artikel membagi sidebar blogspot menjadi 2 kolom ini sebenarnya sudah banyak sobat blogger yang menulis di blognya namun berhubung ada sobat pengunjung blog Belajar Ilmu Komputer yang menanyakan maka saya juga ikutan menulis cara membagi sidebar menjadi 2 kolom ini agar pengunjung blog BIK Pemula ini tidak susah mencari lagi kesana-kemari.

Membagi sidebar menjadi dua kolom atau dengan kata lain sidebar 1 kolom di atasnya kemudian sidebar di bawahnya diubah menjadi 2 kolom. Kalau belum jelas juga perhatikan contohnya di sini.

Perhatikan di sample blog tersebut terdapat 3 buah sodebar yang terdiri dari 1 kolom dan 1 buah sidebar yang saya bagi menjadi 2 kolom yg letaknya di bawah gadget follower.


Bagimana apakah sobat sudah melihat contoh hasil dari 1 sidebar menjadi 2 kolom ? kalau sudah lihat dan tertarik untuk mengubah sidebar sobat menjadi 2 kolom silahkan ikuti caranya berikut ini.

Pertama-tama login terlebih dahulu ke blogger dengan akun sobat sendiri, kemudian klik Design dan Edit HTML.

Setelah masuk ke halaman Edit HTML, cari kode seperti berikut :


#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

setelah menemukan kode di atas, blok semua kode di atas dan copy kemudian paste di bagian bawah kode di atas sehingga hasilnya menjadi seperti berikut :

#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Selanjutnya karena kita hendak membagi 1 kolom sidebar menjadi 2 kolom sidebar, maka lebar (width) sidebar hasil copyan tadi yg seharusnya 240px dibagi 2 sehingga menjadi 120px. Berhubung antara 2 kolom tersebut harus ada jarak maka lebar kolom tersebut dikurangi lagi menjadi 115px, sedangkan sisanya merupakan jarak antar kedua kolom yaitu 10px.
Selain mengubah ukuran lebar sidebar, definisi sidebar jg harus diubah, yg sebelumnya bernama #sidebar-wrap kita ubah menjadi #kolom1-wrap sehingga hasil kode perubahan menjadi seperti berikut :

#kolom1-wrap {
width:115px;
padding:0;
float:$endSide;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Selanjutnya karena masih 1 kolom maka copy kembali kode tersebut dan namakan #kolom2-wrap sehingga kode keseleruhannya seperti berikut :

#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#kolom1-wrap {
width:115px;
padding:0;
float:$endSide;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#kolom2-wrap {
width:115px;
padding:0;
float:$Left;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Sampai di sini belum selesai sobat, mari kita lanjutkan untuk mencari kode seperti berikut :

<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>

Perhatian !!!, untuk kode yg berwarna merah, tentu tidak sama dengan kode yang ada di blog sobat, jadi kode tersebut tidak usah dihiraukan saja, yg terpenting adalah kode di atas dan di bawah kode berwarna merah tersebut, karena kode yang berwarna merah adalah merupakan sebuah gadget, jadi anggap saja kode tersebut tidak ada.
Copy kode di atas kemudian pastekan di bawah kode di atas sebanyak 2 kali, hal ini dilakukan karena kita akan mengubah menjadi 2 kolom, sehingga kode selengkapnya menjadi seperti berikut :

<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>
<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>
<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>

Setelah itu, ubah id kode hasil copy-an pertama menjadi kolom1-wrap dan hasil copy-an 2 menjadi kolom2-wrap sehingga hasil akhirnya menjadi seperti kode berikut :

<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>

<div id='kolom1-wrap'><div id='kolom1-wrap'>
<b:section class='sidebar' id='sidebar2klm1' preferred='yes'>
<b:widget id='Text1' locked='false' title='Kolom 1' type='Text'/>
</b:section>
</div></div>

<div id='kolom2-wrap'><div id='kolom2-wrap'>
<b:section class='sidebar' id='sidebar2klm1' preferred='yes'>
<b:widget id='Text1' locked='false' title='Kolom 1' type='Text'/>
</b:section>
</div></div>

Nah dengan berakhirnya menjalankan langkah di atas maka berakhir sudah langka untuk mengubah 1 kolom sidebar menjadi 2 kolom sudah selesai, selamat mencoba semoga artikel ini bisa membantu.

membuat artikel terkait dengan scroll box




 
Cara Membuat Artikel Terkait Dengan Fungsi Scroll
Hari ini saya akan menjelaskan tentang membuat Artikel Terkait. Contoh nya bisa lihat di bagian bawah postingan ini atau di atas komentar. Langsung saja kita mulai :
  1. Login ke blogger
  2. Pilih Rancangan , Lalu Edit Html .
  3. Lalu beri Centang Pada Expand Template Widget,
  4. Letakkan Kode di bawah ini tepat Di atas kode ]]></b:skin>
.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}
5. Simpan , dan cari kode ini : <data:post.body/>
(Jika ada 2 , pilih saja yang kedua.)

6. Letakkan kode di bawah ini tepat di bawah kode tersebut.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 999;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>
<br/>
7. Simpan dan lihat Hasil nya.

semoga bermanfaat

Pasang Widget 2 Kolom Di Bawah Posting




Pasang2 widget mungkin bermanfaat untuk,,artikel terkait dan juga bisa untuk iklan
tak panjang lebar,Buat sobat yang sudah mau mampir di blog saya ,,terimakasih banyak,jangan lupa tinggakan komentar heheheheheheh...........

Nah ga banyak kata saya mulai ja, Sebagai contohnya lihat gambar do bawah ini :


Pertama untuk mengatur tata letaknya yaitu dengan kode CSS. Dengan CSS kita dapat mengatur semua itu,  lebar kolom, warna dasar kolom dan yang lainnya. Kolom utama adalah kode .bawahpost kolom kiri .bawahkiri, kolom kanan .bawahkanan. Jadi kode CSS class lihat dibawah ini :

.bawahpost {   

}

.bawahkiri {

}

.bawahkanan {

}

Kedua Sobat  harus  mengetahui berapa ukuran lebar kolom posting, untuk menentukan lebar kolom kiri dan kolom kanan.
Contoh misalkan kolom posting selebar 550px, maka kolom kiri dan kanan tinggal di bagi dua, Sobat juga harus memperhitungkan besarnya padding dan margin, Contoh ukuran lebar lihat kode yang berwarna biru di bawah ini :

 .bawahpost {
margin:15px 0px 10px 0px;
padding:5px 0;
clear:both;
}

.bawahkiri {
float:left;
width:265px;
margin-right:15px;
}

.bawahkanan {
float:right;
width:265px;
}

Selanjutnya kode HTML untuk mengfungsikan CSS tadi. Kata Om KR karena dalam kode tadi yang dipakai adalah tanda titik ( . ) maka ini adalah fungsi class, jadi contoh kode HTML dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='bawahpost'>

           <div class='bawahkiri'>

            Kode Iklan anda yang ingin ada di sebelah kiri disini

           </div>

          <div class='bawahkanan'>

          Kode Iklan anda yang ingin ada di sebelah kanan disini

           </div>

</div>

</b:if>

Nah berikutnya lanhkah untuk memasukan kode-kode tadi:

1. Login ke blogger
2. Klik Tata Letak/Layout
3. Klik Edit HTML
4. Backup dulu sebelum melakukan editting template mengantisipasi jika terjadi kesalahan dengan klik Download Template Lengkap.
5. Klik kotak Expand Widget Template.
6. Carilah kode ]]></b:skin>, Untuk memudahkan tekan ctrl F/ F3, kemudian copy kode di bawah ini persis diatas kode ]]></b:skin> 

 .bawahpost {
margin:15px 0px 10px 0px;
padding:5px 0;
clear:both;
}

.bawahkiri {
float:left;
width:265px;
margin-right:15px;
}

.bawahkanan {
float:right;
width:265px;
}

7 Carilah kode berikut :

<data:post.body/>

8. Kemudian copy paste kode di bawah ini persis di bawahnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='bawahpost'>

           <div class='bawahkiri'>

            Kode Iklan anda yang ingin ada di sebelah kiri disini

           </div>

          <div class='bawahkanan'>

          Kode Iklan anda yang ingin ada di sebelah kanan disini

           </div>

</div>

</b:if>

9. Klik tombol Simpan Template.

Nah sudah selesai, selamat mecobanya Sobat....
Semoga bermanfaat.

Minggu, 03 April 2011

Mengganti "Posting lama dan Posting baru" dengan Icon

Untuk mengganti Posting lama serta Posting baru dengan icon, langkah pertama tentu saja anda harus mempersiapkan icon-icon yang akan di pakai. Sebagai contoh iconnya seperti ini :




Nexthomeprevious

Uploadlah icon-icon yang anda miliki ke server tempat anda biasa menyimpan gambar, kemudian catat URL nya. Khusus contoh icon di atas link bannernya sebagai berikut :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsH2dXPqKGFDtYU9VdKC97oKqk5KneRydlgHdGeRfPyR7HB25NVZqsD2xAWKg5283bTHbUnRQvKswhfV2ZyT9s8tI2PzUvxNF_YlsNVAn3THmigTODzFgyXQhjXbJXoq6XDSl6EOUbdws/?imgmax=800

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQBPlFiF2NuLJ85uL7KmXRRxVL94fy_PlsmiJb2KoPsrdUtaGv9gAca-Lr-CQORVdcglUdBsaApbnEONpLZ8pq-EtNrpFR6rKNh-47YYuH8Nx0qm-KZwd0EQim8foEaD8cPtrlmk-ydPU/?imgmax=800

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQYuC3a0_6TmFEbVi1o0UtcUEy-musjueUYgA2Q9v7X7f8hTLbif60FYunI0beQao_h1HC2wOvifXuljueAd_KjwK_iGw4Bd4MOe14uH7fhG1in4bZv2hNg0OUOWOHOCvFdNkIK6FprEs/?imgmax=800

Ubahlah kode di atas menjadi seperti ini :

<img alt='next' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsH2dXPqKGFDtYU9VdKC97oKqk5KneRydlgHdGeRfPyR7HB25NVZqsD2xAWKg5283bTHbUnRQvKswhfV2ZyT9s8tI2PzUvxNF_YlsNVAn3THmigTODzFgyXQhjXbJXoq6XDSl6EOUbdws/?imgmax=800' title='Next'/>

<img alt='previous' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQBPlFiF2NuLJ85uL7KmXRRxVL94fy_PlsmiJb2KoPsrdUtaGv9gAca-Lr-CQORVdcglUdBsaApbnEONpLZ8pq-EtNrpFR6rKNh-47YYuH8Nx0qm-KZwd0EQim8foEaD8cPtrlmk-ydPU/?imgmax=800' title='previous'/>

<img alt='home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQYuC3a0_6TmFEbVi1o0UtcUEy-musjueUYgA2Q9v7X7f8hTLbif60FYunI0beQao_h1HC2wOvifXuljueAd_KjwK_iGw4Bd4MOe14uH7fhG1in4bZv2hNg0OUOWOHOCvFdNkIK6FprEs/?imgmax=800' title='home'/>

Kemudian langkah selanjutnya adalah tinggal memasukannya ke kode template anda, caranya seperti ini :

1. Login ke blogger dengan ID anda
2. Klik "Tata Letak"
3. Klik tab "Edit HTML"
4. Klik tulisan "Download Full Template", silahkan di backup dulu template anda (ini penting)
5. Beri tanda centang pada kotak kecil di samping tulisan "Expand Widget Template"

expand-widget

6. Tunggu beberapa saat sampai proses selesai.
7. Cari kode berikut pada template anda :


<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>


8. Perhatikan kode yang saya cetak merah.
9. Gantilah kode <data:newerPageTitle/>, <data:homeMsg/> dan kode <data:homeMsg/> dengan kode icon anda. Contoh hasil perubahannya akan menjadi seperti ini :


<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img alt='next' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsH2dXPqKGFDtYU9VdKC97oKqk5KneRydlgHdGeRfPyR7HB25NVZqsD2xAWKg5283bTHbUnRQvKswhfV2ZyT9s8tI2PzUvxNF_YlsNVAn3THmigTODzFgyXQhjXbJXoq6XDSl6EOUbdws/?imgmax=800' title='Next'/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img alt='previous' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQBPlFiF2NuLJ85uL7KmXRRxVL94fy_PlsmiJb2KoPsrdUtaGv9gAca-Lr-CQORVdcglUdBsaApbnEONpLZ8pq-EtNrpFR6rKNh-47YYuH8Nx0qm-KZwd0EQim8foEaD8cPtrlmk-ydPU/?imgmax=800' title='previous'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img alt='home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQYuC3a0_6TmFEbVi1o0UtcUEy-musjueUYgA2Q9v7X7f8hTLbif60FYunI0beQao_h1HC2wOvifXuljueAd_KjwK_iGw4Bd4MOe14uH7fhG1in4bZv2hNg0OUOWOHOCvFdNkIK6FprEs/?imgmax=800' title='home'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>


10. Klik tombol "Simpan Template"

11. Proses selesai, begitu mudah dan sederhana :)

Contoh hasil yang akan anda dapatkan seperti ini :

Menambah 2 kolom di bawah post body

Mengotak-atik template blogspot adalah hal yang paling menyenangkan apalagi kalau kita berhasil mengotak-atik template blogspot sehingga menjadi bagus dan menarik, pasti lebih senang lagi. Nah kembali ke topik yaitu "Menambah dua kolom dibawah/diatas post body", pengertian post body sendiri yaitu area di blog Anda untuk postingan Anda.

Coba perhatikan gambar dibawah ini muncul dua kolom baru dibawah post blog.






Apakah Anda ingin menambahkan dua kolom diatas/bawah post body blog Anda?
coba ikuti langkah dibawah ini..

Pastikan Anda sudah Log In ke blogspot lalu pilih menu Layout kemudian masuk menu Edit HTML

Taruh Code CSS dibawah ini diatas Code ]]></b:skin>


/*Under Post
-----------------------------*/
#underpost h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#underpost{
width:530px;
}
#underleft{
width:257px; /*lebar kolom kiri*/
float:left;
margin:4px;
}
#underright{
width:250px; /*lebar kolom kanan*/
float:right;
margin:4px;
}

Perhatikan code yang berwarna merah diatas, samakan dengan lebar (width) post body atau main-wrapper di blog Anda. Untuk mengetahhui lebar post body cari code css dibawah ini

#main-wrapper {
width: 410px;

Nah ukuranya adalah yang tercetak tebal diatas.
Jangan lupa untuk membagi dua area kolom kiri dan kanan, perhatikan code yang berwarna biru diatas tadi, misalnya lebar post body atau main wrapper blog anda 410px maka bagi antara kolom kiri dan kanan. Jangan lupa atur margin dan padding untuk jarak tepi antara kolom kiri dan kanan (baca disni untuk tutorial padding dan marginya).

Setelah langkah pertama selesai mari ke langkah selanjutnya, masih di area Edit HTML, lalu cari code dibawah ini

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

Jika ingin menambahkan dua kolom dibawah post body maka tambah code yang berwarna merah tepat dibawah code yang berwarna biru dan masih didalam code yang berwarna hijau diatas.

Dan jika ingin menambah dua kolom diatasnya maka taruh
code yang berwarna merah diatas code yang berwarna biru dan didalam code yang berwarna hijau


<div id='underpost'>
<b:section class='underleft' id='underleft'/>

<b:section class='underright' id='underright'/>
</div>

Sehingga kurang lebih codenya menjadi seperti

Dua kolom dibawah post body

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

<b:section class='underright' id='underright'/>
</div>
</div>

Dua kolom diatas post body

<div id='main-wrapper'>
<div id='underpost'>
<b:section class='underleft' id='underleft'/>

<b:section class='underright' id='underright'/>
</div>

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

Nah jika semuanya sudah beres tinggal SAVE.

Coba lihat di area page element muncul dua kolom dibawah/diatas post body.

Code-codenya sesuiakan saja dengan template Anda, karena semua template codenya agak berbeda-beda.

Nah jika kolom kiri dan kanan tidak bisa sejajar maka atur lebar (width) kolom kiri dan kanan, juga atur padding dan marginya.


semoga bermafaat

Sabtu, 26 Maret 2011

Membuat featured posts slider

image


Tutorial kali ini merupakan tutorial membuat featured posts slider  yang terispirasi dari free blogger template Glory. Bagi yang ingin mencoba menggunakan featured post slider ini pada salah satu blognya atau sekedar untuk latihan desain template silahkan ikuti tutorial berikut:
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan kode CSS berikut diatas ]]></b:skin>
/* featured fade */
#wrapper-featured{
    padding:10px 0 ;
    width:650px;
    height: 326px;
    margin:0 ;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkcCiukdSWO1KIpudmzaY-oknJYVFBXBaIXavvRaj0KyqnELcrF4dXRZnjPCOuDQcZZEGABaYgSMTsAQ91w1sEsHbBa_VPSAPyg6u1dcLPoGDw_5b1QXvl-faSRFOPO8mHTSjFiWzZTyhb/s1600/bg_featured.jpg) no-repeat;
    position:relative;
    }
#wrapper-myslides {
    width:550px;
    height:210px;
    padding: 0 0 ; 
    margin:  3px 0 0 10px;
    position:relative;
    float:left;
    }
#myslides {
    width:550px;
    height:210px;
    padding: 0 0 50px; 
    margin:  0 18px ;
    overflow:hidden;
    }
.panel{
    width:550px;
    height:210px;
    }
#myslides img.crop-foto { 
    margin:8px 10px 10px 9px;
    border:1px solid #fff;
    display:block;
    position:absolute;
    right:3px;
    top:0;
    }
.featured-entry {
    text-align:left;
    line-height:1.5em;
    font-style:italic;
    font-size:12px;
    font-family: georgia,Arial,Verdana, Helvetica, sans-serif;
    padding: 20px 10px 0;
     width:280px;
    color:#fff;
    position:absolute;
    top:0;
    left:0;
    }       
h3.featured-title {
    font-size:22px;
    text-align:left;
    font-family:Georgia, Arial,Verdana, Helvetica, sans-serif;
    margin:10px 0 5px;
    padding:0 0 5px;
    font-weight:normal;
    line-height:1em;
    font-style:normal;
    }
h3.featured-title a:link, h3.featured-title a:visited{
    color:#fff;
    }       
h3.featured-title a:hover {
    color:#b1e1ff;
    }
#nav-slides  a#prev  {
    position:absolute;
    bottom:105px;
    left:135px;
    z-index:1;
    color:#800;
    width:14px;
    height:15px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiWZYk4Bl6Oykz4ONwwPRlioy9r1ceh9qGtl-bqsrur90xnyA1B3T2KX2MszTepH6cKsJUonompQSybuebGofI1SRyJHB_V4Dfwe081ILWHU-T2KL7pgHOD0YXuWjFc9QpdKfG0xdFzP77/s400/prev.jpg) no-repeat;
    }
#nav-slides  a#prev:hover{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI0edvJ1Seyz-ZzB2r8l8Rnqz0LE1b0Vgj5OIuTgqugg0ENkP56b22-i7n10J4bozQD2ZxLH_w-s5W1XVqirB5uM9j80qOMhr_JMKeZbnRDRQ8HNv1Z_TOaFWv7AhbBz3ZFOJIU_eJvtiS/s400/prev_hover.jpg) no-repeat;
    }
#nav-slides  a#next  {
    position:absolute;
    bottom:105px;
    left:160px;
    z-index:1;
    color:#800;
    width:14px;
    height:15px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUNvVvtre8Dasb_EnrYkcklHmgPhUbcABHit6zxwmW2vdEf7MXHbiTABzjeYfdJRaxevrLFhDAU5oiP_KzSzuserY95CkpfG0V14MNRbh1jWSwSCtUlIKnQF2k3T37CWiv60nT3sGhHdE2/s400/next.jpg) no-repeat;
    }
#nav-slides  a#next:hover{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBiTLH5Sm4b-bfxjGysJriBqXRo0wlcIj8ao2JOYyQLXxVkRs32wbtH0T4-dGN8lee6KJhT4pM8nX2Zzwve6qtj0NS3MsnIarwl84MVCXUMbDX2BzHPQ8nNAfPPgZWNgmCXLCCqgVBIttv/s400/next_hover.jpg) no-repeat;
    }   
Catatan: untuk yang terbiasa ngedit CSS, kode diatas masih memungkinkan untuk diedit dan modifikasi termasuk background image silahkan ganti dan sesuaikan dengan template blog sobat. Oke, selanjutnya...
3. Tambahkan Script JQuery berikut sebelum tag atau kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
catatan: Bagi sobat yang pernah menambahkan atau ditemplate sobat sudah terdapat script JQuery maka langkah ketiga abaikan saja,
4. Tambahkan juga script berikut: (Script berikut bisa sobat upload lagi pada tempat hosting masing masing)
<!-- start slider script -->
<script src='http://btemplatescripts.googlecode.com/files/jquery.cycle.all.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" hover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" hover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#myslides&#39;).cycle({
fx: &#39;fade&#39;,
speed: 700,
timeout: 3000,
next:   &#39;#next&#39;,
prev:   &#39;#prev&#39;
});
});
</script>
<!-- end slider script -->
5. Tambahkan Kode HTML berikut diatas <div id='main-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget
<div id='wrapper-featured'>
<div id='wrapper-myslides'>
<div id='myslides'>
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2745/4053275401_98d09abea1.jpg' width='205'/></a>
</div>
<div class='featured-entry'> 
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>POST TITLE</a></h3>
<p>WRITE YOUR POST DESCRIPTION HERE</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title='POST TITLE'>
<img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2676/4053275587_d21ffaab15.jpg' width='205'/></a>
</div>
<div class='featured-entry'> 
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>POST TITLE</a></h3>
<p>WRITE YOUR POST DESCRIPTION HERE</p>
</div><!--end featured-entry-->
</div><!--end panel-->
<div class='panel'>
<div class='image-frame'>
<a href='#' rel='bookmark' title=POST TITLE>
<img alt='IMAGE TITLE' class='crop-foto' height='185' src='http://farm3.static.flickr.com/2477/4054018014_c5e93695f4.jpg' width='205'/></a>
</div>
<div class='featured-entry'> 
<h3 class='featured-title'>
<a href='#' rel='bookmark' title='POST TITLE'>POST TITLE</a></h3>
<p>WRITE YOUR POST DESCRIPTION HERE</p>
</div><!--end featured-entry-->
</div><!--end panel-->
</div><!--end myslides-->
</div><!--end wrapper-myslides-->
<div id='nav-slides'>
<a href='#' id='prev'/>
<a href='#' id='next'/>
</div>
</div><!-- wrapper featured-->
Catatan: Silahkan isi tulisan berwarna merah dengan titel postingan, deskripsi singkat postingan dan ganti url image atau thumbnails dari menu slider diatas
Selesai, jangan lupa save/ simpan template dan lihat hasilnya.

semoga bermanfaat...

Senin, 14 Maret 2011

Membuat 3 kolom dibawah header

Langsung saja, jika Anda ingin menambah 3 (tiga) kolom di bawah header blog Anda, berikut ini Cara Membuat 3 (tiga) Kolom di Bawah Header:



  1. Login dulu ke Blogger, pilih Rancangan/Layout => Edit HTML, kasih tanda centang pada Expand Template Widget;
  2. Cari kode ]]></b:skin>;
  3. Sebelum atau di atas kode ]]></b:skin>, letakkan kode di bawah ini:
    /* Top Header
    ---------------------------- */
    #topheader {
    width:930px;
    clear:both;
    float:left;
    color:#333;
    background:#fff;
    margin:0 auto;
    padding:0 0 10px;
    }

    #topheader a:visited {
    color:gray;
    text-decoration:none;
    }

    #topheader h2 {
    font-size:11px;
    font-weight:700;
    line-height:1.4em;
    text-transform:uppercase;
    border-bottom:1px dotted silver;
    margin:0 0 10px;
    padding:20px 0 2px;
    }

    #topheader ul {
    color:#333;
    margin:0;
    padding:0;
    }

    #topheader ul li {
    list-style-type:none;
    background:fff;
    border-bottom:1px dotted #ccc;
    padding-left:17px;
    margin-top:2px;
    }

    #left-topheader {
    width:360px;
    float:left;
    padding-left:15px;
    }

    #center-topheader {
    width:230px;
    float:left;
    padding:0 20px;
    }

    #right-topheader {
    width:260px;
    float:right;
    padding-right:15px;
    }

    Keterangan:
    #topheader adalah kode untuk kolom secara keseluruhan;
    #left-topheader adalah kode untuk kolom sebelah kanan;
    #center-topheader adalah kode untuk kolom pada posisi tengah;
    #right-topheader adalah kode untuk kolom sebelah kiri;
    Width: px adalah kode untuk ukuran lebar kolom;
    Padding adalah jarak sela antara kolom satu dengan lainnya;

    Silahkan dimodifikasi, dengan catatan harus sama dengan jumlah lebar pada template Anda dan untuk mengetahui ukuran lebar template, cari kode: #outer-wrapper dan lihat nilai width-nya;
  4. Selanjutnya cari kode di bawah 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>
  5. Tepat di bawah kode di atas, tambahkan kode di bawah ini:
    <div id='topheader'>
    <b:section class='topheader' id='left-topheader' preferred='yes'/>
    <b:section class='topheader' id='center-topheader' preferred='yes'/>
    <b:section class='topheader' id='right-topheader' preferred='yes'/>
    </div>
  6. Simpan Tamplate, selesai.
Demikianlah tutorial cara menambah 3 (tiga) kolom di bawah header blog ini, semoga bermanfaat.

Rabu, 02 Maret 2011

Membuat footer 3 kolom

Para lyfariArt'siders kali ini saya akan memposting untuk membuat footer,mungkin ini tidak penting tapi cukup untuk memeperindah blog anda
Langkah pertama
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Lagkah kedua 
ganti code"<b:section class='footer' id='footer'/>"dengan code di bawah ini

----------------------------------------------------------------------------------
<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>
</div>

---------------------------------------------------------------------------------------------------------------
Langkah ketiga
cari code"</b:skin>"
dan letakan code ini dibawahnya"#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}"


keterangan: ganti tulisan warna merah sesuai keinginan anda................ 


Selamat mencoba para lyfariArt'siders

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Dcreators