Menambah Kolom Dibawah Postingan Blogspot

enambah Kolom Dibawah Postingan Blogspot

Menambah Kolom Dibawah Postingan Blogspot

Teman-teman semua pasti ingin memasang iklan atau kode javascript lainnya dibawah postingan. Karena kalau dipasang di sidebar terlalu ramai maka dibawah ini saya akan memberikan cara-cara bagaimana menambah elemen di bawah postingan untuk pasang iklan atau lainnya. untuk membuatnya anda sedikit menambahkan kode CSS ke dalam tamplate. ikuti langkah-langkah di bawah ini.

• Seperti biasa Log in dulu ke blogger temen.
• Tata letak
• Edit HTML
• Download tamplate anda terlebih dahulu untuk menghindarkan hal-hal yang tidak diinginkan.
• Beri tanda centang di kotak kecil atas
• Kemudian cari kode

  #main-wrapper {
  width: 410px;
  float:$startSide;
  

  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 */

  }

• Tambahkan kode berikut di bawah kode tadi

  #mainbottom {
  background:#ffffff;
  border:1px solid #0B610B;
  margin:0 0 0.5em;
  padding:0.5em;
  }

• Sekarang kita membuat id untuk mainbottom tersebut. Cari kode ini:

  <div id='main-wrapper'>
  

  <b:section class='main' id='main' showaddelement='no'>

  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

  </b:section>
  </div>

• Sisipkan kode berikut di bawah </b:section>

  <b:section class='main' id='mainbottom' showaddelement='yes'/>

• Sehingga menjadi seperti ini

  <div id='main-wrapper'>
  

  <b:section class='main' id='main' showaddelement='no'>

  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

  </b:section>

  <b:section class='main' id='mainbottom' showaddelement='yes'/>

  </div>

• Sekarang simpan tamplate anda dan lihat hasilnya

Selamat mencoba

Membuat Images Bubbles di Bawah Postingan Blogspot

di Bawah Postingan Blogspot

Membuat Images Bubbles di Bawah Postingan Blogspot

Bukankah teman-teman semua pengin blog yang dibuat itu kelihatan menarik? Kali ini saya akan memberikan cara yang membuat blog Anda semua lebih menarik. Dari sekian banyak pembuatan social bookmark, cara ini yang paling saya suka disamping simpel, gambar logonya lebih menarik.  Yang akan saya bahas disini adalah css image bubbles transitions, dan sekedar info bahwa tutorial ini hanya bisa diterapkan pada browser firefox versi 3.5+, opera 9.5+, safari dan chrome. Untuk demo bisa anda lihat disini.

 

Sebelum memulai ada baiknya anda backup template anda terlebih dahulu, biasakan untuk melakukan hal ini jika ingin melakukan pengeditan template.

1. Login ke Blogger.
2. Klik Rancangan.
3. Masuk ke Edit HTML centang expand widget templates
4. Jika terjadi kesalahan sebaiknya download terlebih dahulu template anda
5. Copas kode css berikut sebelum kode ]]></b:skin> 

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px;
height: 60px;
border:0;
margin-right: 12px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8);
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

Cari kode yang mirip seperti ini :

<data:post.body/></b:if>
</div>

Kemudian letakkan kode berikut setelah kode diatas :

<div class='bubblewrap'>
<ul>

<li><a href='#'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkRZT8XHI/AAAAAAAAEpU/boHguF0HbX0/stumbleupon_thumb%5B2%5D.png' title='Add to Stumbleupon'/></a></li>

<li><a href='#'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkLgpPqKI/AAAAAAAAEpE/MoiG31eV3gg/facebook_thumb%5B2%5D.png' title='Add to Facebook'/></a></li>

<li><a href='#'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkJCcKt5I/AAAAAAAAEo8/6LdMi30Ms0o/digg_thumb%5B2%5D.png' title='Add to Digg'/></a></li>

<li><a href='#'><img src='http://lh6.ggpht.com/_7Y9pl24WpQY/TKYkGo-lIBI/AAAAAAAAEo0/v8uQduCj814/twitter_thumb%5B2%5D.png' title='Add to Twitter'/></a></li>

<li><a href='#'><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkOKs2gnI/AAAAAAAAEpM/atV8KDhqKcI/rss_thumb%5B2%5D.png' title='Add RSS Feed'/></a></li>

</ul>
</div>

Simpan Template.

Untuk kode yang berwarna ungu adalah kode url untuk gambarnya, anda bisa ganti dengan gambar social bookmark yang sobat punya.

Semoga bermanfaat

Menambah Kolom Dibawah Postingan Blogspot

Teman-teman semua pasti ingin memasang iklan atau kode javascript lainnya dibawah postingan. Karena kalau dipasang di sidebar terlalu ramai maka dibawah ini saya akan memberikan cara-cara bagaimana menambah elemen di bawah postingan untuk pasang iklan atau lainnya. untuk membuatnya anda sedikit menambahkan kode CSS ke dalam tamplate. ikuti langkah-langkah di bawah ini.

• Seperti biasa Log in dulu ke blogger temen.
• Tata letak
• Edit HTML
• Download tamplate anda terlebih dahulu untuk menghindarkan hal-hal yang tidak diinginkan.
• Beri tanda centang di kotak kecil atas
• Kemudian cari kode

  #main-wrapper {
  width: 410px;
  float:$startSide;
  

  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 */

  }

• Tambahkan kode berikut di bawah kode tadi

  #mainbottom {
  background:#ffffff;
  border:1px solid #0B610B;
  margin:0 0 0.5em;
  padding:0.5em;
  }

• Sekarang kita membuat id untuk mainbottom tersebut. Cari kode ini:

  <div id='main-wrapper'>
  

  <b:section class='main' id='main' showaddelement='no'>

  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

  </b:section>
  </div>

• Sisipkan kode berikut di bawah </b:section>

  <b:section class='main' id='mainbottom' showaddelement='yes'/>

• Sehingga menjadi seperti ini

  <div id='main-wrapper'>
  

  <b:section class='main' id='main' showaddelement='no'>

  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

  </b:section>

  <b:section class='main' id='mainbottom' showaddelement='yes'/>

  </div>

• Sekarang simpan tamplate anda dan lihat hasilnya

Selamat mencoba......

Menambah Kolom dibawah Header Blogspot

Menambah Kolom dibawah Header Blogspot

Apa kabar teman-teman blogger semua, pada siang hari yang mendung ini saya akan memberikan  tutorial bagaimana cara menambahkan kolom dibawah header blog. Jika menurut temen-temen menambah kolom di bawah header membuat blog kita kelihatan ramai, ya pasang aja di bawah postingan atau di atas footer. Baik, langsung saja pada inti permasalahannya.

Menambahkan 1 Kolom dibawah Header

Pada umunnya kolom di bawah header di gunakan untuk memasang gambar, navbar, teks, atau teman ingin memasang foto-foto temen yang paling narsis  heeeee. Langkah - langkah yang perlu sobat perhatikan adalah :

1.  Login bloger teman.
2.  Klik tata letak atau layout.
3.  Pilih Edit HTML.

4.  Sebelum memulai pengeditan alangkah baiknya temen sekalian membackup datanya terlebih dahulu, caranya pilih Download Template Lengkap.

5.  Cari kode ]]></b:skin> ,agar lebih mudah anda bisa menekan Ctrl + F, kemudian paste kode tersebut di sebelah tulisan Find.

6.  Paste copy berikutdan paste diatas kode ]]></b:skin>

#satu_kolom{
margin:10px 0;
padding:1%;
width:98%;
}

7.  Copy kode berikut ini

<div id="satu_kolom">
<b:section class='header' id='satukolomajah' preferred='yes'/>
</div>

8.  Paste di bawah kode ini

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidget="1" showaddelement="no">

<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>

</b:section>
</div>

9.    Simpan template
10.  Lihat perubahannya pada tata letak.

Menambah 2 Kolom Dibawah Header

Sebelumnya saya sudah pernah menjelaskan bagaimana caranya menambah widget di bawah kolom header, kali ini saya akan menerangkan sedikit tentang bagaimana caranya menambah 2 kolom widget dibawah header..

1.  Login bloger teman.
2.  Klik tata letak atau layout.
3.  Pilih Edit HTML.
4.  Sebelum memulai pengeditan alahkah baiknya temen sekalian membackup datanya terlebih dahulu, caranya pilih Download Template Lengkap.
5.  Centang Expand Template Widget
6.  Cari kode ]]></b:skin>,agar lebih mudah  anda bisa menekan Ctrl + F, kemudian paste kode tersebut di sebelah tulisan Find.
7.  Paste kode berikut di atas kode ]]></b:skin>;

#dua-kolom-dibawah-header {
clear:both;
}
.dua-kolom {
}

8.  Copy kode berikut ini

</div>

<div id='dua-kolom-dibawah-header'>

<div id='kolom1' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='dua-kolom' id='kolom1' preferred='yes' style='float:left;'/>

</div>

<div id='kolom2' style='width: 50%; float: right; margin:0; text-align: left;'>

<b:section class='dua-kolom' id='kolom2' preferred='yes' style='float:right;'/>

</div>

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

9.   Paste di atas kode ini <div id='main-wrapper'>
10. Simpan tempalte.
11. Lihat perubahannya pada tata letak.

Menambah 3 Kolom Dibawah Header

1.  Login bloger teman.
2.  Klik tata letak atau layout.
3.  Pilih Edit HTML.

4.  Sebelum memulai pengeditan alahkah baiknya temen sekalian membackup datanya terlebih dahulu, caranya pilih Download Template Lengkap.

5.  Centang Expand Template Widget

6.  Cari kode ]]></b:skin>,agar lebih mudah anda bisa menekan Ctrl + F, kemudian paste kode tersebut di sebelah tulisan Find.

7.  Paste kode berikut di atas kode ]]></b:skin>

#tiga-kolom-dibawah-header {
clear:both;
}
.tiga-kolom {
}

8.  Copy kode berikut

<div id='tiga-kolom-dibawah-header'>

<div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>

<b:section class='tiga-kolom' id='kolom1' preferred='yes' style='float:left;'/>

</div>

<div id='kolom2' style='width: 35%; float: center; margin:0; text-align: left;'>

<b:section class='tiga-kolom' id='kolom2' preferred='yes' style='float:center;'/>

</div>

<div id='kolom3' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='tiga-kolom' id='kolom3' preferred='yes' style='float:right;'/>

</div>

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

9.  Paste di atas kode ini <div id='main-wrapper'>

Catatan

Jika sobat awalnya mengikuti dari membuat 2 kolom di bawah header, (sekali lagi hanya bagi yang mengikuti dari cara membuat 2 kolom di bawah header) sobat hanya tinggal mengganti kode berikut :

</div>
<div id='dua-kolom-dibawah-header'>
<div id='kolom1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

menjadi :

</div>
<div id='dua-kolom-dibawah-header'>
<div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 35%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom2' preferred='yes' style='float:center;'/>
</div>
<div id='kolom3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

(tempatnya tetap sama di atas kode <div id='main-wrapper'> jangan ditambah tapi di ganti>

10. Simpan tempalte. 

11. Lihat perubahannya pada tata letak.

Itu tadi sedikit  tutorialnya, bagi temen-temen yang punya cara yang lebih bagus, saya mau kok dikasih tahu. Semoga bermanfaat

Cara Membuat Teks Berjalan di Menu Bar

Cara Membuat Teks Berjalan di Menu Bar

Dalam tutorial saya sebelumnya mengenai membuat text berjalan (marquee), teman-teman semua sudah saya jelaskan bagaimana cara penggunaannya. Tidak lupa kan? Kalau lupa teman-teman semua bisa buka kembali postingan itu disini. Selain membuat teks berjalan di blog, kita juga bisa membuat teks berjalan di menu bar. Belum tahu apa itu menu bar? Nah itu loh teks yang berada dipojok paling atas layar dan di nav bar browser seperti yang ditunjukkan pada gambar dibawah ini.

Nah bagi anda yang ingin mencobanya. Silahkan ikuti langkah-langkah dibawah ini:

1.  Pertama kali yang harus kita lakukan adalah login ke blogger
2.  Pada menu Design -> Edit HTML
3.  Letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'>
//<![CDATA[

msg = " -- Selamat datang di Bikin Website ";

msg = " | www.helmiikhwanul.co.cc -- " + msg;pos = 0;

function scrollMSG() {

document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;

if (pos > msg.length) pos = 0

window.setTimeout("scrollMSG()",200);

}
scrollMSG();
//]]>
</script>

Ganti teks yang dicetak tebal dengan teks yang ingin anda tampilkan. Angka 200 menunjukkan kecepatan gerak dari teks. Semakin kecil nilainya semakin cepat gerakan teksnya dan sebaliknya. Ganti bila perlu.

4.  Jika sudah, klik Save Template. Selesai

Jika berhasil anda akan melihat teksnya berjalan di menu bar anda. Untuk lebih jelasnya bisa anda lihat hasilnya disini. Demikian tadi tutorial singkat membuat teks berjalan di menu bar, selamat mencoba.

Cara Membuat Teks Berjalan di Menu Bar

Cara Membuat Teks Berjalan di Menu Bar

Dalam tutorial saya sebelumnya mengenai membuat text berjalan (marquee), teman-teman semua sudah saya jelaskan bagaimana cara penggunaannya. Tidak lupa kan? Kalau lupa teman-teman semua bisa buka kembali postingan itu disini. Selain membuat teks berjalan di blog, kita juga bisa membuat teks berjalan di menu bar. Belum tahu apa itu menu bar? Nah itu loh teks yang berada dipojok paling atas layar dan di nav bar browser seperti yang ditunjukkan pada gambar dibawah ini.

Nah bagi anda yang ingin mencobanya. Silahkan ikuti langkah-langkah dibawah ini:

1.  Pertama kali yang harus kita lakukan adalah login ke blogger
2.  Pada menu Design -> Edit HTML
3.  Letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'>
//<![CDATA[

msg = " -- Selamat datang di Bikin Website ";

msg = " | www.helmiikhwanul.co.cc -- " + msg;pos = 0;

function scrollMSG() {

document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;

if (pos > msg.length) pos = 0

window.setTimeout("scrollMSG()",200);

}
scrollMSG();
//]]>
</script>

Ganti teks yang dicetak tebal dengan teks yang ingin anda tampilkan. Angka 200 menunjukkan kecepatan gerak dari teks. Semakin kecil nilainya semakin cepat gerakan teksnya dan sebaliknya. Ganti bila perlu.

4.  Jika sudah, klik Save Template. Selesai

Jika berhasil anda akan melihat teksnya berjalan di menu bar anda. Untuk lebih jelasnya bisa anda lihat hasilnya disini. Demikian tadi tutorial singkat membuat teks berjalan di menu bar, selamat mencoba.

Cara Membuat Teks Berjalan di Menu Bar

Cara Membuat Teks Berjalan di Menu Bar

Dalam tutorial saya sebelumnya mengenai membuat text berjalan (marquee), teman-teman semua sudah saya jelaskan bagaimana cara penggunaannya. Tidak lupa kan? Kalau lupa teman-teman semua bisa buka kembali postingan itu disini. Selain membuat teks berjalan di blog, kita juga bisa membuat teks berjalan di menu bar. Belum tahu apa itu menu bar? Nah itu loh teks yang berada dipojok paling atas layar dan di nav bar browser seperti yang ditunjukkan pada gambar dibawah ini.

Nah bagi anda yang ingin mencobanya. Silahkan ikuti langkah-langkah dibawah ini:

1.  Pertama kali yang harus kita lakukan adalah login ke blogger
2.  Pada menu Design -> Edit HTML
3.  Letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'>
//<![CDATA[

msg = " -- Selamat datang di Bikin Website ";

msg = " | www.helmiikhwanul.co.cc -- " + msg;pos = 0;

function scrollMSG() {

document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;

if (pos > msg.length) pos = 0

window.setTimeout("scrollMSG()",200);

}
scrollMSG();
//]]>
</script>

Ganti teks yang dicetak tebal dengan teks yang ingin anda tampilkan. Angka 200 menunjukkan kecepatan gerak dari teks. Semakin kecil nilainya semakin cepat gerakan teksnya dan sebaliknya. Ganti bila perlu.

4.  Jika sudah, klik Save Template. Selesai

Jika berhasil anda akan melihat teksnya berjalan di menu bar anda. Untuk lebih jelasnya bisa anda lihat hasilnya disini. Demikian tadi tutorial singkat membuat teks berjalan di menu bar, selamat mencoba.