Membuat Sendiri Template Blogger

Sudah bosan dengan template Blogger yang itu-itu saja? Ada dua pilihan buat Anda. Cara pertama cukup praktis, cari dan download template Blogger dari pihak ketiga, lalu salin dan pasang kode template blogger baru pilihan Anda. Cara kedua lebih kreatif, modifikasi sendiri template Anda!

Berikut beberapa tip dasar yang bisa Anda gunakan untuk mengedit atau membuat template Blogger Anda:

Backup Template dan Komponen

Hal pertama yang harus Anda lakukan sebelum mengganti template Blogger adalah membackup template lama dan elemen-elemen halaman yang telah Anda miliki. Komponen selain posting, arsip, dan komentar cukup rawan dengan resiko hilang saat template baru diterapkan (Blogger akan memberi peringatan berupa daftar widget yang akan terhapus jika template baru Anda terapkan).

1. Login ke halaman pengelolaan blog, klik Layout > Edit HTML.
2. Untuk membackup template awal, seleksi seluruh kode di kotak Edit Template (Ctrl+A), lalu copy (Ctrl+C).
3. Buka Notepad, lalu salin kode ke dalam lembar kerja Notepad (Ctrl+V).
4. Simpan backup template awal Anda.

Sebagai catatan, jika Anda telah menambahkan elemen / widget pada halaman blog Anda, maka sebelum melakukan langkah ke-2, aktifkan dulu kotak pilihan Expand Template Widget (di bagian atas kotak Edit Template). Baru setelah itu salin seluruh kode dan Anda simpan sesuai langkah berikutnya.

Kini Anda sudah siap mengutak-atik template Blogger Anda. Jika hasilnya kurang memuaskan, Anda tetap dapat memulihkan template awal dengan cara menyalin kode backup dari Notepad ke kotak Edit Template.

Menghilangkan NavBar

Merasa tidak nyaman dengan tampilan NavBar di bagian atas halaman blog Anda? Singkirkan NavBar dan perluas tampilan halaman blog Anda dengan cara berikut:

1. Buka template Blogger Anda di Layout > Edit HTML.
2. Temukan titik penyisipan, letakkan kursor persis di atas baris body {.
3. Sisipkan baris kode di bawah ini untuk menghilangkan tampilan NavBar di halaman blog Anda:
   
   #navbar-iframe {
      height:0px;
      visibility:hidden;
      display:none
   }
4. Simpan perubahan template, preview blog dan nikmati hasilnya.

Memodifikasi Lebar Halaman

Hal pertama yang perlu Anda pahami dalam memodifikasi halaman blog Anda adalah mengenai penetapan lebar komponen halaman (header, halaman posting, sidebar, dan footer).

Berikut adalah rumusan yang bisa Anda jadikan pedoman dalam mengutak-atik lebar halaman blog Anda :

#header-wrapper = #outer-wrapper = #footer = #main-wrapper + 30 + #sidebar-wrapper

Temukan dan ubah nilai width: di bagian tersebut sesuai kebutuhan :

• #header-wrapper, #outer-wrapper, dan #footer menjadi patokan lebar seluruh halaman blog.
• #main-wrapper adalah ukuran kolom posting Anda.
• #sidebar-wrapper adalah ukuran kolom sidebar Anda.
• Nilai 30 digunakan untuk memberi jarak antara antara kolom posting dan kolom sidebar.

Dengan berpatokan pada rumusan di atas, maka Anda dapat mengubah ukuran halaman Anda dengan mengedit HTML dengan nilai seperti berikut :

Nilai width awal:
660px = 660px = 660px = 410px + 30px + 220px

Nilai width untuk modifikasi:
750px = 750px = 750px = 470px + 30px + 250px

Penjelasan langkah pengeditan:

1. Timpa nilai width pada bagian #header-wrapper, #outer-wrapper, dan #footer menjadi 750px.
2. Timpa nilai width pada bagian #main-wrapper menjadi 470px.
3. Timpa nilai width pada bagian #sidebar-wrapper menjadi 250px.

Nilai width #main-wrapper = 470px cocok untuk beriklan (ukuran ini bisa mengakomodasi banner 468x60 px). Silakan ubah ukuran sesuai selera dengan berpatokan pada rumusan di atas.

Memodifikasi Jumlah Kolom

Pilihan template yang disediakan Blogger umumnya tersusun atas dua kolom (kolom posting dan kolom sidebar). Anda dapat membuat kolom tambahan dengan menyalin kode sidebar dan mengatur ulang ukurannya.

Sebagai contoh, berikut cara membuat halaman blog dengan tiga kolom.

1. Buka template Blogger Anda di Layout > Edit HTML.
2. Kita gandakan kode kolom sidebar yang sudah ada. Umumnya kode sidebar dinamai sidebar-wrapper, namun ada juga template yang menggunakan nama sidebar-wrap atau sejenisnya.
3. Temukan, seleksi, dan salin bagian ini:
   
   #sidebar-wrapper {
     width: 220px;
     float: $endSide;
     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 */
   }
4. Pindahkan kursor di bawah kode tersebut, lalu sisipkan kode yang telah Anda salin. Kini anda memiliki 2 kode di atas.
5. Bedakan nama kode, edit nama #sidebar-wrapper yang telah Anda sisipkan menjadi #sidebar-wrapper2.
6. Ubah nilai width di #sidebar-wrapper dan #sidebar-wrapper2, dengan cara membagi 2 nilai yang ada. Misalnya nilai awal 220px Anda bagi menjadi masing-masing 110px.
7. Selanjutnya temukan, seleksi, dan salin bagian ini:
   
   <div id='sidebar-wrapper'>
   <b:section class='sidebar' id='sidebar' preferred='yes'>
   ...
   ...
   </b:section>
   </div>
8. Pindahkan kursor di bawah kode tersebut, lalu kembali sisipkan kode yang telah Anda salin. Kini anda memiliki 2 kode di atas.
9. Edit nama <div id='sidebar-wrapper'> yang telah Anda sisipkan menjadi <div id='sidebar-wrapper2'>.
10. Simpan Template. Preview blog Anda untuk memastikan tampilan 3 kolom telah berhasil Anda buat.

Catatan, jika lebar sidebar pertama dan kedua menjadi sempit, maka gunakan rumusan Memodifikasi Lebar Halaman.

Selamat mencoba !

Read more »

Kode Warna HTML

KODE WARNA HTML

KODE WARNA HTML Contoh:Putih =>#ffffff;

#FOF8FF Aliceblue

#FAEBD7 Antiquewhite

#00FFFF Aqua

#7FFFD4 Aquamarine

#F0FFFF Azure

#F5F5DC Beige

#FFE4C4 Bisque

#000000 Black

#FFEBCD Blanchedalmond

#0000FF Blue

#8A2BE2 Blueviolet

#A52A2A Brown

#DEB887 Burlywood

#5F9EAD Cadetblue

#7FFF00 Chartreuse

#D2691E Chocolate

#FF7F50 Coral

#64950 Cornflowerblue

#FFF8DC Cornsilk

#DC143C Crimson

#00FFFF Cyan

#00008B Darkblue

#008B8B Darkcyan

#B8860B Darkgoldenrod

#A9A9A9 Darkgray

#006400 Darkgreen

#8B008B Darkmagenta

#BDB76B Darkkhaki

#556B2F Darkolivegreen

#FF8C00 Darkorange

#9932CC Darkorchid

#8B0000 Darkred

#E9967A Darksalmon

#8FBC8B Darkseagreen

#483D8B Darkslateblue

#2F4F4F Darkslategray

#00CED1 Darkturquoise

#9400D3 Darkviolet

#FF1493 Deeppink

#00BFFF Deepskyblue

#696969 Dimgray

#1E90FF Dodgerblue

#B22222 Firebrick

#FFFAF0 Floralwhite

#228B22 Forestgreen

#FF00FF Fuchsia

#DCDCDC Gainsboro

#F8F8FF Ghostwhite

#FFD700 Gold

#DAA520 Goldenrod

#808080 Gray

#008000 Green

#ADFF2F Greenyellow

#F0FFF0 Honeydew

#FF69B4 Hotpink

#CD5C5C Indianred

#4B0082 Indigo

#FFFFF0 Ivory

#F0E68C Khaki

#E6E6FA Lavender

#FFF0F5 Lavenderblush

#7CFC00 Lawngreen

#FFFACD Lemonchiffon

#ADE8E6 Lightblue

#F08080 Lightcoral

#E0FFFF Lightcyan

#FAFAD2 Lightgoldenrodyellow

#90EE90 Lightgreen

#D3D3D3 Lightgray

#FFB6C1 Lightpink

#FFA072 Lightsalmon

#20B2AA Lightseagreen

#87CEFA Lightskyblue

#778899 Lightslategray

#B0C4DE Lightsteelblue

#FFFFE0 Lightyellow

#00FF00 Lime

#32CD32 Limegreen

#FAF0E6 Linen

#FF00FF Magenta

#800000 Maroon

#66CDAA Mediumaquamarine

#0000CD Mediumblue

#BA55D3 Mediumorchid

#9370DB Mediumpurple

#3CB371 Mediumseagreen

#7B68EE Mediumslateblue

#00FA9A Mediumspringgreen

#48D1CC Mediumturquoise

#C71585 Mediumvioletred

#191970 Midnightblue

#F5FFFA Mintcream

#FFE4E1 Mistyrose

#FFE4E1 Moccasin

#FFDEAD Navajowhite

#000080 Navy

#FDF5E6 Oldlace

#808000 Olive

#6B8E23 Olivedrab

#FFA500 Orange

#FF100%0 Orangered

#DA70D6 Orchid

#EEE8AA Palegoldenrod

#98FB98 Palgreen

#AFEEEE Paleturquoise

#DB7093 Palevioletred

#FFEFD5 Papayawhip

#FFDAB9 Peachpuff

#CD853F Peru

#FFC0CB Pink

#DDA0DD Plum

#B0E0E6 Powderblue

#800080 Purple

#FF0000 Red

#BC8F8F Rosybrown

#4169E1 Royalblue

#8B4513 Saddlebrown

#FA8072 Salmon

#F4A460 Sandybrown

#2E8B57 Seagreen

#FFF5EE Seashell

#A0522D Sienna

#C0C0C0 Silver

#87CEEB Skyblue

#708090 Slategray

#FFFAFA Snow

#00FF7F Springgreen

#4682B4 Steelblue

#D2B48C Tan

#008080 Teal

#D8BFD8 Thistle

#FF6347 Tomato

#40E0D0 Turquoise

#EE82EE Violet

#F5DEB3 Wheat

#FFFFFF White

#F5F5F5 Whitesmoke

#FFFF00 Yellow

#9ACD32 Yellowgreen

Read more »

Cara Membuat Tab Menu dan Sub Tab Menu

Sub menu sendiri berfungsi untuk mempertegas salah satu menu tersebut. misalnya dalam satu menu berjudul sport, maka sub menunya bisa berisi dari macam-macam olahraga semisal sepakbola,motogp,tinju,tennis dan masih banyak lagi. contohnya bisa dilihat disini atau lihat gambar di bawah ini.

 

Cara membuatnya silahkan ikuti langkah langkah di bawah ini:

1. Login ke blogger
2. Klik rancangan kemudiat edit html
3. Cari kode </head>
4. Copy dan paste kode dibawah ini sebelum atau diatas kode </head> kemudian simpan template

<style type='text/css'>
#foxmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg1rAKhFdqUIaz6R_CKwBc8XycGoE4GsOY47kUGfcrWfZhgLuQVk2ejw4wsBBDVPnJascnV0dAGbuJbOi6rjiLny4-wtQOdQRtvu0biX2FG_-j54PN-R7hYA4XP68kkbraahKr3C3z1Vf6/) repeat-x;
display:block;
padding:0px 0 0px 0px;
border-top:1px solid #474747;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
}

#menu ,#menu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#menu a {
color: #B3DBEF;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#menu a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWt9sKsJKZrXKgdFvlNl_FGPFopJYzML54-doPZgHX-gZRdNVMiJnLS-y6JNL0OoPXInNqY_PbXR6ITS7UiZ7D4Hp0ZyF1oHElmJzSp1OJmnJZTo0i9t5LczYT-i_fy1TKax6PCusui9lw/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}

#menu li li {
float: left;
margin: px 0px 0px 5px;
padding: 0px;
width: 130px;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg1rAKhFdqUIaz6R_CKwBc8XycGoE4GsOY47kUGfcrWfZhgLuQVk2ejw4wsBBDVPnJascnV0dAGbuJbOi6rjiLny4-wtQOdQRtvu0biX2FG_-j54PN-R7hYA4XP68kkbraahKr3C3z1Vf6/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
}

#menu li li a:hover, #menu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWt9sKsJKZrXKgdFvlNl_FGPFopJYzML54-doPZgHX-gZRdNVMiJnLS-y6JNL0OoPXInNqY_PbXR6ITS7UiZ7D4Hp0ZyF1oHElmJzSp1OJmnJZTo0i9t5LczYT-i_fy1TKax6PCusui9lw/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#06415F;
}

#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#menu li:hover ul {
left: auto;
display: block;
}

#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
</style>

5.  Kembali lagi ke rancangan kemudian page html dan klik "Add a gadget"
6. Setelah terbuka pilih  "html/java script" dan pastekan kode di bawah ini

<div id="foxmenucontainer">
<div id="menu">

<ul>
<li><a expr:href="data:blog.homepageUrl">Home</a></li>

<li><a href="#" title="#">About</a></li>

<li><a href="#" title="#">WebDesign</a>
<ul>
<li><a href="#" title="#">HTML</a></li>
<li><a href="#" title="#">CSS</a></li>
<li><a href="#" title="#">JavaScript</a></li>
</ul>
</li>

<li><a href="#" title="#">Subscribe</a></li>

<li><a href="#" title="#">Register</a></li>

<li><a href="#" title="#">Contact</a></li>

</ul>
</div>
</div>

7. Simpan dan lihat hasilnya

 apabila ada pertanyaan silahkan tinggalkan di dalam kotak komentar di bawah

Selengkapnya tentang : Membuat Tab Menu Horizontal Dengan Sub Menu | Satriacell http://www.satriacell.com/2011/03/membuat-tab-menu-horizontal-dengan-sub.html#ixzz1qtIpyWCs
Untuk Artikel Aslinya

Read more »

LINK E-BOOK

KUNJUNGI AJA KE http://ebooks88.com

Read more »

CARA MENGETAHUI UKURAN BLOG

Salam Kelikers....

Resiko jadi bloger pemula adalah "PENING".....ya itulah yang sering dihadapkan pada kode HTML, untuk kalangan awam membaca kode HTML sangatlah sulit. Eits jangan khwatir ya sobat neh aku ada sekelumit Tips untuk mengutak atik dan mengenali Ukuran Blog kalian....Coba aja pasti kalian bakal ngucapin....."ooooo gini to"

1. Mengetahui Ukuran / Lebar header

#header-wrapper{

background: #ffffff;

width: 900px;

height: 160px;

font-size: 12px;

margin: 0px auto 0px;

padding: 0px;

overflow: hidden;

}

2. Mengetahui Ukuran / Lebar halaman Posting

#main-wrapper{

float:left;

width:590px;

margin:0px 0px 5px 0px;

padding:13px 10px 0px 10px;

overflow: hidden;

}

3. Mengetahui Ukuran / Lebar sidebar

#sidebar-wrapper{

float:left;

width:320px;

margin:13px 0px 5px 0px;

padding:0px;

line-height:19px;

display: inline;

}

Update : Banyak sekali kode sidebar yang bisa dipakai misal #rsidebar-wrapper{ atau #right-sidebar-wrapper{ dll, jadi disesuaikan saja.

4. Mengethui Ukuran / Lebar Footer

/* Footer

----------------------------------------------- */

#footer {

  width:950px;

  clear:both;

  margin:0 auto;

  padding-top:15px;

  line-height: 1.6em;

  text-transform:uppercase;

  letter-spacing:.1em;

  text-align: center;

}

a. Untuk mengedit ukuran/lebar Halaman Blog

Cari kode di bawah ini:

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

b. Untuk mengedit ukuran/lebar Halaman Posting

Cari kode di bawah ini:

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

}

c. Untuk mengedit ukuran/lebar Sidebar Blog

Cari Code di bawah ini:

#sidebar-wrapper {

width: 220px;

float: $endSide;

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

}

d. Untuk mengedit ukuran Header Blog,

Cari Code di bawah ini:

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

e. Untuk mengedit ukuran Footer Blog

Cari Code di bawah ini:

#footer {

width:660px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

Kalo kesulitan cari bisa di search aja "CTRL+F" copy kata yang mw di cari trus paste disitu.

Tapi hati-hati ya kudu teliti salah-salah bisa bagian lain yang diedit....

SELAMAT MENCOBA

Read more »

TULISAN HEADER BERGERAK

Salam Keliker

Emang ngutak atik Blog supaya tampil keren gak ada matinya dah. dimulai dari hal kecil dulu ya kita bikin supaya tulisan pada header bisa gerak. Dicoba aja deh sobat..........

1.LOGIN ke blogger.

2.Kemudian klik Tata Letak Kemudian Klik Lagi Edit HTML.

3.Selanjutnya cari kode berikut ini.

<title><data:blog.pageTitle/></title>

4.Hapus Kode Tersebut dan ganti dengan Kode berikut ini>

<b:include data='blog' name='all-head-content'/>

<script language='JavaScript'>

var txt="<data:blog.pageTitle/>";

var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

segarkan=setTimeout("bergerak()",kecepatan);}bergerak();

</script>

5.Kamu bisa mengganti kecepatan gerak animasinya yaitu pada angka 100 yang berwarna HITAM tersebut dengan keinginan kamu.

5.Kalo udah selesai silakan klik SAVE TEMPLATE

Nah liat tuh hasilnya....klo belum berhasil coba cek lagi langkahnya dengan teliti

Read more »

Membuat Kotak Komentar Blogger di Bawah Postingan

Begini nih cara membuat kotak komentar blogger yang berada dibawah postingan.

1. Login ke http://draft.blogger.com, Ingat yang http://draft.blogger.com bukan blogger.com.
2. Trus ke menu Setting-->Comments. Kemudian ganti "Comment Form Placement" menjadi "Embedded below post" (lihat gambar dibawah)



3. Kemudian klik "Save Setting"

Sekarang coba kamu lihat blogmu dan coba di klik salah satu postinganmu kemudian lihat hasilnya, apakah sudah ada kotak komentarnya yg dibawah postingan atau belum. kalau sudah berarti langkahnya cukup disini. Kalau belum ikuti langkah berikut ini.
(ini karena kode HTML tiap2 template itu berbeda. Untuk template default dari blogger yang baru, kode HTMLnya sudah berubah, sedangkan template yg lama atau ambil dari luar ada yg belum dan ada juga yg sudah).

4. Selanjutnya pergi ke menu "Layout-->Edit HTML"
5. Beri tanda centang kotak "Expand widget templates".
6. Trus cari kode berikut ini :

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</p>
</b:if>

7. Kemudian ganti kode tersebut dengan kode dibawah ini:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/> <b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if> </b:if> </p> </b:if>

8. Lalu simpan template kamu.

Read more »

Cara Membuat Tab Menu dan Sub Tab Menu design BLOG

Sobat Keliker ....
Aku ada Tips nih buat kalian cara membuat Tab Menu dan Sub Tab Menu tanpa harus pusing-pusing edit kode HTML....Praktis koq moggo dicoba ya :


Login ke dasbord blogger KLIK Rancangan (design)
Pada Eleman Halaman KLIK edit pada Top Menu

1. Membuat Tab Menu
Maka akan muncul kotak pop up

Perhatikan :
Manyortir : Jangan Diurutkan
URL Situs Baru : Isikan dengan url (http://) yang ingin di tautkan.
Nama Situs Baru : Isikan Judul Tab menu tersebut, misalnya Facebook, Twitter atau About Us dll.
Contoh
Lihat Gambar :

Lalu KLIK Tambahkan Tautan

dan KLIK Simpan
Maka Hasilnya :

2. Membuat Sub Tab menu
Selanjutnya adalah cara membuat Sub tab menu,
Caranya sama seperti di atas hanya pada sub tab menu di beri “-” (tanpa tanda petik) sebelum Nama situs baru. Contoh :
Pada Top Menu KLIK Edit
Lihat gambar :

KLIK Tambahkan Tautan dan Simpan
note : untuk sub tab menu dapat di buat lebih dari satu, jangan lupa setiap kali membuat sub tab menu tanda “-” ikut di sertakan.
Jika sub tab menu di rasa sudah cukup, terakhir tutup dengan Tab Menu (tanpa tanda “-“) di atasnya :
lihat gambar :

Tambahkan Tautan
Susunannya kurang lebih seperti gambar di bawah ini :

Dan Simpan.
Maka hasilnya akan sepeti ini :

Nah gimana sobat mudah kan.........salam kelikers

Read more »

Membuat Auto read More

Kalo yang ini mesti sobat cobain deh, yap "Auto Read More" pastinya bertujuan agar postingan sobat lebih ringkas. Gak perlu lama-lama deh silakan coba langkah-langkah berikut ini :

1. login ke blog sobat, jika sudah masuk ke rancangan >> Edit Html

2. beri tanda centang pada "Expand Widget Templates"

3. lalu copy kode dibawah, letakkan tepat diatas </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 301; img_thumb_height = 150; img_thumb_width = 150; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtK-i8j6RDY10iUUDu8hha5snjB14og6NgmsW1QIMc-asWQWZLYu0nzDxc9QfSppbDnF31IeS1eDGno2grRGzOIoVtqSyzhTd-pQTCmH4q6lzAMqtES7oP4pFufi1E2lbV8e70g4Lt9A/s1600/def-thumb.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Perhatikan dan edit sesuai selera sobat:
summary_noimg = 300 menunjukkan jumlah karakter yang ditampilkan tanpa gambar
summary_img = 301 menunjukkan jumlah karakter yang ditampilkan termasuk gambar
img_thumb_height = 150 menunjukkan tinggi gambar thumbnail
img_thumb_width = 150 menunjukkan lebar gambar thumbnail
float:right menunjukkan posisi gambar thumbnail di kanan. Jika anda ingin gambar thumbnail berada di kiri ganti right menjadi left
img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtK-i8j6RDY10iUUDu8hha5snjB14og6NgmsW1QIMc-asWQWZLYu0nzDxc9QfSppbDnF31IeS1eDGno2grRGzOIoVtqSyzhTd-pQTCmH4q6lzAMqtES7oP4pFufi1E2lbV8e70g4Lt9A/s1600/def-thumb.png" adalah gambar cadangan yang muncul jika tidak ada gambar dalam postingan. Anda bisa ganti gambar cadangan dengan gambar lain atau hapus saja alamat gambarnya jika anda tidak mau menggunakan gambar cadangan.

4. lalu cari kode <data:post.body/> atau <p><data:post.body/></p>

5. Selanjutnya sobat ganti dengan kode dibawah :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'><b>Read more &#187;</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><p><data:post.body/></p>
</b:if>

6. Jika sudah SAVE template sobat

7. lalu lihat apakah berhasil atau tidak.

Read more »

MEMBUAT TEXT BERJALAN

http://www.textspace.net/lcd_text_maker/9.10/page_1

Read more »

Cara Membuat Menu Tab View di Blog

Menu Tab View biasa digunakan oleh para blogger yang ingin mempercantik dan menghemat space pada halaman webnya. Berikut ini merupakan salah satu tutorial sederhana yang juga banyak di share oleh para blogger di blog mereka.

Contoh Gambar Menu Tab View pada sebuah Blog

Tutorial Membuat Menu Tab View :

1. Login ke blogger kemudian pilih menu "Layout --> Edit HTML"

2. Cari kode berikut ( Tekan CTRL+F untuk mempermudah pencarian) ]]></b:skin>

3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau ke dalam tag CSS.

Spoiler:

***Text berwarna merah merupakan keterangan untuk melakukan editing menu tab view sesuai keinginan Anda.

5. Step selanjutnya yaitu memasang kode berikut ini sebelum kode </head>

Code:

<script type='text/javascript'>

function tabview_auxundefinedTabViewId, id)
{
  var TabView = document.getElementByIdundefinedTabViewId);

  // ----- Tabs -----

  var Tabs = TabView.firstChild;
  while undefinedTabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i  = 0;

  do
  {
    if undefinedTab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switchundefined'"+TabViewId+"', "+i+");";
      Tab.className = undefinedi == id) ? "Active" : "";
      Tab.blurundefined);
    }
  }
  while undefinedTab = Tab.nextSibling);

  // ----- Pages -----

  var Pages = TabView.firstChild;
  while undefinedPages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if undefinedPage.className == 'Page')
    {
      i++;
      if undefinedPages.offsetHeight) Page.style.height = undefinedPages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = undefinedi == id) ? 'block' : 'none';
    }
  }
  while undefinedPage = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switchundefinedTabViewId, id) { tabview_auxundefinedTabViewId, id); }

function tabview_initializeundefinedTabViewId) { tabview_auxundefinedTabViewId,  1); }

</script>

<script type='text/javascript'>tabview_initializeundefined'TabView');
</script>

6. Save

=========================
Next Step ==>
=========================

1. Cari menu Element yang terdapat pada blog
2. Pilih menu "Add a Gadget" --> "HTML/Javascript" (tata letak bisa disesuaikan)
3. Masukan script berikut :

Code:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1

Tab 1.2

Tab 1.3

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1

Tab 2.2

Tab 2.3

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1

Tab 3.2

Tab 3.3

</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan tambahan :

Code:

<div class="Pages" style="width: 350px; height: 250px;">

untuk mengatur lebar dan panjang kolom

Code:

<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

Merupakan Menu Utama

Code:

<div class="Page">
<div class="Pad">
Tab 3.1

Tab 3.2

Tab 3.3

</div>
</div>

Merupakan isi dari tav view yang bisa ditambahkan dengan link, gambar, dsb.


Selesai.

Read more »

Membuat Nav Bar Auto Hide dan menghilangkan nya

Kalau kita lihat header pada blogger bawaan akan terlihat satu kolom panjang yang terletak di bawah Nav Bar ...emang udah dari sono nya bentuk nya kayak gitu he he..ada suatu keinginan saya untuk membagi header menjadi dua kolom akhir nya saya cari di search engine dan setelah menemukan kode html trus saya coba untuk mengobok-obok blog saya ,,awal nya sih masih rada-rada susah maklum saya masih bodoh tentang kode-kode html dan setelah membanting tulang,memeras keringat dan menghabiskan berbatang-batang rokok ahh,,,akhir nya saya berhasil juga...

Bagaimana sih bentuk header dua kolom tersebut...kira-kira seperti sobat lihat di bawah ini....yang sebelah kiri merupakan header utama yang di potong sedangkan sebelah kanan header hasil potongan...ada keuntungan yang bisa kita ambil dengan adanya dua klom header ini mungkin kita bisa meletakan tulisan,gambar,maupun kode script di samping judul blog kita..

Di dalam postingan ini header yang akan di modifikasi adalah untuk blog yang memakai templete baru jika templete sobat memakai templete lama silahkan baca artikel selanjut nya di sini.

Jika sobat berminat untuk membelah header cara nya ga terlalu ribet cukup bawa pisau dapur atau celurit terus di belah bereskan..!!! he he sorry bercanda juragan....

Ok..!!! kita langsung aja mengikutin tahapan-tahapan nya...

1. Tahap PERTAMA

• seperti biasa anda login terlebih dahulu..kalau sudah login silahkan langsung ke RANCANGAN
• Anda klik Edit HTML
• sebelum nya anda download dulu templete agar jika ada kesalahan templete anda bisa di kembalikan seperti semula.
• Jangan lupa di centang Expand Template Widget
• Kalau sudah kita mulai mengobok-ngobok kode html nya

CARI KODE DI BAWAH INI..!!! cara cepat nya tekan (Ctr + F pada keyboard) fokus pencarian pada huruf bercetak tebal

.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}

anda hapus kode di atas dan ganti (replace) dengan kode di bawah ini...

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */}
#header {
width: 45%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left; }
#bgsGR_headerkanan {
float: right;
width: 49%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;}
#bgsGR_headerkanan .widget {margin: 3px;}

2.Tahap KEDUA

Cari kode di bawah ini

<div class='region-inner header-inner'>

Terus anda tambahkan dengan kode di bawah in...

<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

Hasil nya kayak di bawah ini..

<div class='region-inner header-inner'><b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

catatan :

• Untuk yang bercetak tebal merupakan kode yang di tambahkan tambahan 
• Untuk yang bercetak merah angka nya bisa anda bisa ganti dengan angka 2,3,4 atau lain nya..maksud nya untuk susunan kolom kebawah. 

3. Tahap KETIGA selesai dan simpan templete

Sekarang Lihat hasil nya...langsung anda kerancangan...semoga berhasil ya....jika ada kendala silahkan tinggalkan komentar nya di bawah...

Read more »

Cara Membuat Kotak Banner Di Header Blog

 Bikin Space Iklan pada blog kita kayaknya seru nih supaya ada yang mau pasang, ukuran dan bentuknya bisa kita sesuaikan. Nah berikut ini langkah-langkahnya:

1. Buka Dasbor blog

2. Klik tab Rancangan -> Edit HTML

3. Cari kode <b:skin><![CDATA[/* 
4. Letakkan kode CSS berikut setelah kode <b:skin><![CDATA[/*

div.adblock#ads125 A {
    BORDER-RIGHT: #ccc 1px solid;
    BORDER-TOP: #ccc 1px solid;
    BORDER-BOTTOM: #ccc 1px solid;
    BORDER-LEFT: #ccc 1px solid;
    WIDTH: 125px;
    COLOR: #666;
    HEIGHT: 125px;
    DISPLAY: block;
    FLOAT: left;
    MARGIN: 0px 0px 10px 0px;
    COLOR: #888;
    FONT-FAMILY: verdana,sans-serif;
    TEXT-DECORATION: none;
    FONT-WEIGHT: 700;
    FONT-SIZE: 12px;
    BACKGROUND: #e7e7e7;
    LINE-HEIGHT: 1000%;
    TEXT-ALIGN: center
}

div.adblock#ads125 {
    DISPLAY: block; WIDTH: 100%
}

div.adblock#ads125 A:hover {
    BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BACKGROUND: #ddd; BORDER-LEFT: #999 1px solid; COLOR: #333; BORDER-BOTTOM: #999 1px solid
}

5. Cari kode header "<div id='header-wrapper'></div>" yang biasanya diletakkan setelah kode <body>
6. Copy dan paste kode di bawah ini setelah kode <div id='header-wrapper'>

<table cellpadding='0' cellspacing='1'>
<tr>

<td>
<div class='adblock' id='ads125'>
     <a href='alamat tujuan' title='Advertise Here 125 x 125 px'>Advertise Here</a>
</div>
</td>

<td>
<div class='adblock' id='ads125'>
     <a href='alamat tujuan' title='Advertise Here 125 x 125 px'>Advertise Here</a>
</div>
</td>

<td>
<div class='adblock' id='ads125'>
     <a href='alamat tujuan' title='Advertise Here 125 x 125 px'>Advertise Here</a>
</div>
</td>

<td>
<div class='adblock' id='ads125'>
     <a href='alamat tujuan' title='Advertise Here 125 x 125 px'>Advertise Here</a>
</div>
</td>

<td>
<div class='adblock' id='ads125'>
     <a href='alamat tujuan' title='Advertise Here 125 x 125 px'>Advertise Here</a>
</div>
</td>

</tr>
</table>

7. Klik tombol Simpan Templates untuk menyimpan perubahan

8. Selesai, sebagai contoh lihat blog berikut

Perlu diingat bahwa kode header <div id='header-wrapper'> kode </div> dapat berisi berbagai macam kode. Jika header hanya ingin diisi oleh kotak banner maka hapus saja semua kode yang berwarna merah (kode).

Dan yang perlu diperhatikan bahwa tinggi dan lebar header untuk setiap blog berbeda-beda maka oleh sebab itu lakukan perubahan, jika tinggi header lebih kecil dari tinggi banner yang diinginkan melalui kode CSS-nya.

Kode CSS

#header-wrapper{width:960px;margin:30px auto 15px;height:80px;padding:15px 0px 15px 0px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuySyZKKhIGFE5LTO4npjMoZKx5S_3UXvS92pqmJVykMpOoqBiqyXUxykYVXtnxOGMptXgVvPVfw220lf1wDSxcsPZekiA6jmcATYNqC8CpD0kPPv3Y0uwsKz6rnVfXJyIsQbVTtgEcE5/s1600/header-bg.png) left top repeat-x;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;overflow:hidden;}

Read more »

Membuat Tab Menu Blog Sederhana

• Copy script di bawah ini masukan ke dalam new gadget=>HTML.

<ul class='glossymenu'> <li class='current'><a href='URL-Blog-Kamu'>Beranda</a></li>
<li><a href='URL-Link-Tujuan1'>JUDUL 1</a></li>
<li><a href='URL-Link-Tujuan2'>JUDUL 2</a></li>
<li><a href='URL-Link-Tujuan3'>JUDUL 3</a></li>
<li><a href='URL-Link-Tujuan4'>JUDUL 4</a></li>
<li><a href='URL-Link-Tujuan5'>JUDUL 5</a></li>
</ul> 

• Yang berwarna biru silahkan di ganti link url yang anda inginkan sedangkan yang berwarna merah silahkan di ganti dengan judul yang anda inginkan .
• Cara memasang silahkan Login ke Blogger >> Rancangan >> Edit Laman >> Add Gadget >> Save

Read more »