Cara Membuat Atau Menambah 3 Kolom Dibawah Header

hari ini akhirnya berkesempatan Lagi untuk mengurus Dapur setelah beberapa hari ini Dapur Ditinggalkan karna disibukkan Dengan Proyek Akhir dan Tugas Akhir Skripsi jadi Sekedar istrahat dan menghilangkan Jenuhnya Pikiran yang dipres selama satu bulan maka Dapur Tutorial Blogspot Sempatkan untuk membuat tutorial lagi.

Tutorial blog kali ini kembali membahas tetang cara menambah Eleman Halaman Pada Blog. Buat anda yang senang menambahkan aksesoris  dihalaman blog atau sobat ingin Memasang Space iklan300 x 250 trik ini sangat cocok untuk diterapkan. Tema Kali ini Dapur Tutorial Blogspot Akan Membahas Tetang  Cara Membuat Atau Menambah 3 Kolom Dibawah Header.

Cara Membuat Atau Menambah 3 Kolom Dibawah Header berhubungan dengan tutorial sebelumnya tentang Cara Membuat Atau Menambah 2 Kolom Dibawah Header. Dari tutorial tersebut kita akan menambahkan sedikit kode untuk Merubahnya menjadi 3 kolom.

Berikut Lankah-Langkah Untuk Menambah 3 Kolom Dibawah Header :

1.  Pastikan anda sudah login ke akun blogger/blogspot
2. Setelah ada berada pada halaman Panel Blog anda Pilih " Template"





3. Klik Tombol Edit HTML





4. Klik Tombol Proceed atau Tombol Lanjutkan  kemudian akan muncul halaman Edit HTML seperti berikut





5. Jangan lupa Centang Expand Template Widget.





6. Sebelum melakukan Edit HTML download lengkap template anda terlebih dahulu baca caranya Disini 
7. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode)
8. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin> 

<div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
</div> 

9. Selanjutnya Cari kode <div id='main-wrapper'> atau <div id="main-outer"> atau <div class='main-outer'>
10. Copas kode dibawah ini dan letakan diatas salah satu kode <div id='main-wrapper'>   atau <div id="main-outer"> atau <div class='main-outer'>

<div id='box-kolom-widget'>
<div id='box1' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

12. Lankah terakhir klik Tombol Simpan Template 





13. Selesai dan lihat hasilnya

Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak atau Layout  jika ada Elemen tambahan Diatas Header Seperti dibawah ini berarti lankah-langkah diatas sudah anda lakukan dengan benar

Demikian Tutorial Kali ini tetang Cara Membuat atau Menambahkan 3 Kolom Dibawah Header Semoga bisa bermanfaat

Cara Membuat Facebook Kronologi Atau Timeline

 Cara Membuat Facebook Kronologi Atau Timeline - Hallo Sobat semua, Jumpa lagi dengan saya. Pada kesempatan kali ini saya tidak akan membahas tentang Tips dan trik seputar Tutorial blog, Tapi saya akan sedikit share tentang Trik Facebook, Yaitu Cara Buat Facebook Kronologi Timeline atau Cara Membuat tampilan Kronologi Facebook.

 Jika sobat suka akses, Hobi dan gemar main dengan situs jejaring social Facebook, Silahkan sobat update untuk Tampilan kronologi facebook yang baru. Karena banyak sekali fitur-fitur baru yang ditampilkan di dalamnya. Diantaranya ada tampilan foto profil, Foto sampul dan lain sebagainya. tampilan pada Facebook Kronologi Timeline ini sangat mirip dengan situs web yang fresh.

 Untuk melihat dan juga mengetahui bagaimana tampilan aslinya, Silahkan sobat login atau masuk dulu menggunakan akun facebook sobat, Kemudian klik DISINI untuk melihat LIVE DEMO.

Cara untuk mengaktifkan Kronologi Facebook, Silahkan sobat ikuti petunjuk saya berikut ini:

1. Silahkan sobat Login atau Masuk ke akun Facebook.
2. Setelah itu sobat klik atau kunjungi alamat url ini http://www.facebook.com/about/timeline/
3. Kemudian akan tampil gambar seperti screenshot di bawah ini.

4. Setelah itu sobat klik tombol warna hijau yang bertuliskan Dapatkan Kronologi.
5. Maka tampilan Profil Facebook sobat akan berubah menjadi seperti di bawah ini :

Mudah sekali bukan... Tampilannya seperti blog atau website, Itulah Trik Facebook dari saya sobat... yaitu trik facebook tentang Cara Buat Facebook Kronologi (Timeline) / Cara Membuat tampilan Kronologi Facebook.
Selamat menikmati tampilan wajah baru facebook sobat semua.

PENTING :
 Sebelum sobat merubah Tampilan Facebook menjadi Kronologi/Timeline, Sebaiknya di fikir-fikir dahulu, karena setelah sobat merubah Tampilan Facebook menjadi Kronologi/Timeline, Sobat tidak akan bisa untuk mengembalikan Tampilan nya ke facebook Seperti Semula.
karena sampai saat ini dari Tim facebook belum menyediakan pengaturan Cara Untuk mengembalikan Tampilan Facebook Kronologi/Timeline ke Tampilan Semula. Mungkin Lain waktu Akan saya Share lagi tentang Cara Untuk mengembalikan Tampilan Facebook Kronologi/Timeline ke Tampilan Semula.

 Dan sepertinya Tampilan Kronologi Timeline Facebook untuk sekarang telah di aktifkan untuk semua akun facebook. Tampilan Profil Facebook Kronologi Timeline hanya bisa di lihat pada www.facebook.com, Jika di akses dari m.facebook, Tampilannya akan seperti biasa namun lebih mudah di pahami.

 Semoga bermanfaat bagi Sobat KUCOPAS semua...

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Dan Memasang Widget Alexa Rank Di Blog

 Cara Membuat Dan Memasang Widget Alexa di Blog - Setelah kemarin saya share tips dan trik blog tentang Cara pasang Auto Read More di blog. Sekarang tips dan trik blog kali ini akan mengulas tentang Cara Membuat Widget Alexa di Blog atau Cara Memasang Widget Alexa di Blog.

 Tentunya sobat para webmaster semua sudah tahu apa itu widget Alexa rank, Karena tips dan trik ini di per-untuk-kan buat Blogger pemula, Ya seperti saya ini yang masih NdesO... hehehehe...

 Perlu sobat ketahui bahwa kegunaan alexa rank di pasang di blog adalah untuk di jadikan sebagai alat pengukur tingkat Ranking dalam sebuah blog. Dan salah satu contohnya Widget Alexa Rank ya seperti di bawah ini.

---

---

 Jika sobat ingin mendaftar, Membuat dan memasang Widget Alexa Rank di blog, Caranya sangat mudah sekali. Silahkan sobat simak baik-baik caranya yang akan saya jelaskan dengan detail sebentar lagi.

Ok sobat, Berikut langkah-langkahnya Cara Membuat dan Memasang Widget Alexa di Blog:

1. Silahkan sobat Login atau Masuk ke www.alexa.com

2. Kemudian Klik Menu >> Site Tools, Lihat contoh gambar screenshot di atas.

3. Lalu sobat pilih >> Alexa Site Widgets >> Atau biar lebih cepat silahkan sobat klik saja DISINI

4. Langkah yang selanjutnya, Silahkan sobat masukkan Alamat Blog Sobat pada kolom yang tersedia, contoh : http://kuc0pas.blogspot.com/ , = (Kotak no 1)
Klik gambar di atas untuk melihat contoh lebih jelas.

5. Kemudian klik >> Build Widget ( Kotak no 2).

6. Lalu silahkan sobat Copy Kode HTML yang tertera di dalam kotak, Seperti gambar screenshot di bawah ini. Kemudian paste atau pasang ke blog sobat. Pilih salah satu saja yang sobat kehendaki.

Cara Memasang Widget Alexa Rank Di Blog Sobat:

1. Silahkan sobat >> Login atau Masuk ke blogger.com menggunakan akun sobat.

2. Pada Dashboard tampilan blog baru, Pilih menu >> Tata Letak >> Tambah atau Add Gadget >> HTML/JavaScript >> Kemudian Taruh semua Kode HTML Widget Alexa Rank yang sobat buat tadi pada kotak HTML/JavaScript.

2. Agar dapat tampil pada blog sobat, Jangan lupa klik >> Save atau Simpan.

3. Selesai dan lihat hasilnya.

 Sangat mudah sekali kan sobat... Selamat mencoba dan Semoga berhasil.

 Semoga trik dan tips ringan tutorial blog pemula yang mengulas tentang Cara Membuat Dan Memasang Widget Alexa Rank Di Blog, Bisa sangat bermanfaat bagi sobat KUCOPAS semua.

Selamat Berkarya.

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat Dan Memasang Auto Read More Di Blog

 Cara Membuat dan Memasang Auto Read More Di Blog - Oke sobat langsung saja saya akan terangkan Cara Membuat dan Memasang Auto Read More di blog. Pada Artikel yang sebelumnya saya sudah share tips dan trik tentang Cara buat menu di bawah Header blog/Menu horizontal Dropdown, dan kali ini saya akan share tips dan trik lagi tentang Cara Membuat dan Memasang ReadMore Otomatis di blog.

 Sedikit pengetahuan untuk sobat, Bahwa Fungsi Read More yang akan saya share kali ini memang sangat berbeda dengan versi Read More yang lama. Bila pada Read More versi terdahulu, Cara membuatnya kita harus meng-cut tulisan menggunakan cara manual. Yaitu dengan cara melakukan pemangilan fungsi <div class="fullpost">...</div> atau <span class="fullpost">...</span>

 Penjelasan dari kode diatas adalah biasanya kode tersebut di pasang dan di tanamkan secara manual kedalam halaman postingan. Jadi sobat harus selalu ingat untuk memasangnya setiap mau update atau membuat postingan artikel terbaru blog sobat.

 Namun jika sobat membuat dan memasang versi Auto Read More yang ini, Sobat tidak perlu lagi melakukan membuat readmore secara manual lagi. Karena versi Auto ReadMore kali ini akan lebih canggih, Sebab fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode Read More yang terdahulu atau cara manual diatas.

 Hebatnya lagi sob, Fungsi Read More ini mampu menampilkan image atau gambar pertama yang ada dalam postingan dan mem-fload image atau gambar tersebut di awal paragraf awal, Meskipun gambar atau image yang sobat letakan berada di tengah atau akhir postingan blog sobat.

 Tidak hanya itu saja, Sobat juga bisa mengatur jumlah karakter atau tulisan yang akan ditampilkan dalam readmore. Disini ada dua opsi pilihan untuk jumlah karakter atau tulisan.

1.  Jumlah karakter atau tulisan yang ditampilkan, Jika ada gambar atau image yang di ikutsertakan dalam postingan.
2.  Jumlah karakter atau tulisan tanpa gambar atau image dalam postingan.

 Ok sobat, Kita Langsung saja ke intinya Cara Membuat Dan Memasang Read More Otomatis di Blog. Silahkan sobat ikuti langkah-langkah dan cara-caranya sebagai berikut :

1. Silahkan sobat >> Login atau Masuk ke blogger.com menggunakan akun sobat.

2. Pada Dashboard tampilan blogger baru, Pilih Menu >> Template >> Edit HTML >> Lanjutkan.
Kemudian beri tanda Centang pada >> Expand Widget Templates.

3. Lalu silahkan sobat cari kode </head> (Gunakan CTRL+F untuk memudahkan pencarian).

4. Jika sudah ketemu, Silahkan sobat tambahkan Kode script di bawah ini tepat diatas kode </head>
Langsung saja sobat copy dan paste kode dibawah ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2012 by KUCOPAS

visit http://kuc0pas.blogspot.com to get more code
********************************************/
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");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><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>

Catatan:

• img_thumb_height = 120; = (Ukuran Tinggi Thumbnail atau gambar dalam piksel), Ganti nilainya sesuai dengan keinginan sobat.

• img_thumb_width = 120; = (Ukuran Lebar Thumbnail atau gambar dalam piksel), Ganti nilainya sesuaikan dengan blog sobat.

• var thumbnail_mode = "float"; = Sobat dapat mengatur letak thumbnail atau gambar berada di (float) kiri atau jika tidak silahkan sobat ganti dengan (no-float).

• summary_noimg = 250; = (Banyaknya karakter atau tulisan yang akan di tampilkan pada posting tanpa gambar atau thumbnail). Silahkan sobat ganti nilainya untuk mengatur banyak-sedikitnya karakter atau tulisan yang akan ditampilkan dalam blog sobat.

• summary_img = 250; = (Banyak karakter atau tulisan yang akan di tampilkan pada posting dengan gambar atau thumbnail). Silahkan sobat ganti nilainya untuk mengatur banyak-sedikitnya karakter atau tulisan yang akan ditampilkan dalam blog sobat.

5. Kalau sobat sudah selesai meng-edit kodenya, Jangan di simpan dahulu.

6. Masih dalam Edit HTML, Silahkan sobat cari lagi kode <data:post.body/>
Jika sudah ketemu, Silahkan sobat ganti kode <data:post.body/> dengan semua kode dibawah ini:

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

Catatan:

• Ganti READ MORE dengan kata-kata yang sobat inginkan. Seperti contoh, "Selanjutnya", "Lanjutkan", "Baca Selanjutnya" atau yang lain.

7. Langkah yang terakhir, Sekarang sobat klik >> Preview atau Pratinjau terlebih dahulu, Jika hasilnya sudah pas seperti yang sobat inginkan dan template tidak mengalami eror, Silahkan sobat klik >> Simpan Template dan lihat hasilnya.

Penting.!!!

 Bagi sobat yang sudah terlanjur memasang Read More versi lama sebaiknya kodenya di kembalikan dahulu seperti semula.
Caranya sangat mudah, Silahkan sobat hapus kode yang berwarna BIRU dibawah ini.

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Nb :
Setiap template mungkin kodenya berbeda, Jadi tinggal sobat sesuaikan saja dengan template blog sobat.

 Demikian tutorial blog yang mengulas tentang Cara Membuat Dan Memasang Auto Read More di Blog. Semoga sobat tidak mengalami kesulitan dan berhasil.

---

| Supported by http://kuc0pas.blogspot.com |

---

Kanata Blogger Template

Kanata Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	Kanata Blogger Template
Description	Kanata is a free blogger template adapted from WordPress with 2 columns, left sidebar and grunge style.
Template Author	http://btemplates.com/author/deluxe-templates/
Designer	9th Sphere
Instructions URL	How to install Blogger Template

Source : btemplates.com

Cara Membuat Menu Di Bawah Header Blog

 Cara Membuat Menu Di Bawah Header Blog - Hallo sobat, Selamat berkunjung ke blog saya KUCOPAS yang Ndeso ini. hehehe... Setelah kemarin saya share dan posting Tips dan Trik tentang Cara buat Menu Vertikal Dengan Icon/gambar, Sekarang saya akan kasih tips dan trik lagi buat sobat semua tentang Cara membuat menu dibawah header blog.

 Pada  menu dibawah header blog yang versi ini kelebihannya adalah ketika pointer mouse di arahkan, maka hasil nya akan tampil menu-menu lainnya yang mengarah ke bawah alias Menu Horisontal DropDown, Seperti yang sobat lihat di gambar dan pada menu Blog KUCOPAS ini.

Gimana.??? Sobat tertarik dan ingin membuat nya.!!!
Oke sobat, Mari kita langsung menuju ke TKP, hehehehe...
Langkah-Langkah yang harus sobat lakukan untuk membuat menu dibawah header blog adalah:

1. Silahkan sobat >> Login atau Masuk ke blogger.com menggunakan akun sobat.

2. Pada Dashboard tampilan blogger baru, Pilih dan klik Menu >> Template >> Edit HTML >> Lanjutkan.

3. Jangan lupa sobat Centang pada >> "Expand Widget Templates".

4. Kemudian silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL + F untuk memudahkan pencarian).
Kemudian taruh Kode Script di bawah ini tepat diatas atau sebelum kode ]]></b:skin>

 #catmenucontainer{
height:33px;
width:1000px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi60JNJjye0EwEGPjG4qdf5qeR91CVOOPLQWRHmzhlYJ4ITaGpucdzHXKoEwbYTKLkAYJRrA6ubtu0yB8t8tgBwVG1Qzzh56ksdvbpv6GTpYJ0HiyEhtXX6sKT1tuYmNYaQcke2yPkNdb6V/s1600/2.gif) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi914NiSwBOY0jdlxHHddZWOM0y36z_wyXb354IHuVKl82sGMyTRtYSNlG1TZAaR54YoQ4nQP1lHt1baO8d8nk7sUNMBLot8pZTMe5rN72e5uhGXmXYswei_e966vhQv82y31kZR4mMqfnW/) repeat-x;
height:33px;
}


#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}


#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}


#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}


#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuT4-zvkuj6f8hyphenhyphenHYZADPazQNMNnA3w0M34giqGwK_cB5WNK_B875r5VWZGlkfCzC4FLZw-nbozMWtKkShcb9mYOj4HZchAjI47SR4LXslDZzwbKzaIZrthVq_QA_3pkUzZH69Q_uAdKpZ/) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}


#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:#ED4A05;
width: 150px;
color: #fae7df;
font-family:Tahoma,century gothic,Georgia, sans-serif;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 1px solid #FF7800;


}


#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuT4-zvkuj6f8hyphenhyphenHYZADPazQNMNnA3w0M34giqGwK_cB5WNK_B875r5VWZGlkfCzC4FLZw-nbozMWtKkShcb9mYOj4HZchAjI47SR4LXslDZzwbKzaIZrthVq_QA_3pkUzZH69Q_uAdKpZ/) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}


#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}


#catmenu li li {
}


#catmenu li ul a {
width: 140px;
}


#catmenu li ul a:hover, #catmenu li ul a:active {
}


#catmenu li ul ul {
margin: -34px 0 0 170px;
}


#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}


#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}


#catmenu li:hover, #catmenu li.sfhover {
position: static;
}

Catatan:

• width:1000px; adalah Ukuran Lebar menu, Silahkan sobat ganti nilainya agar sesuai dengan ukuran lebar template blog sobat.

5. Jika sudah, Masih dalam Edit HTML Template, Silahkan sobat cari lagi kode <div id='content-wrapper'> (Gunakan CTRL+F  untuk mempercepat pencarian).

6. Kemudian copy kode dibawah ini dan paste-kan tepat di bawah atau sesudah kode <div id='content-wrapper'>

 <div id='catmenucontainer'>
<div id='catmenu'>


<ul>
<li><a href='http://NAMA LINK BLOG ANDA'>Home</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
</ul>
</div>
</div>
<div class='clear'/>

Catatan:

• Your-Link-Here Ganti dengan Link target tujuan isi menu sobat.
• Link-Title Ganti dengan title yang sobat inginkan.
• Link-Name Ganti dengan Nama menu sobat yang ingin di tampilkan.

7. Setelah sobat selesai mengedit, Silahkan sobat klik >> Pratinjau atau Preview dulu sebelum di SAVE template-nya, Lalu lihat hasilnya. Jika sudah berhasil dan cocok seperti yang sobat inginkan, Jangan Lupa di Save atau Simpan yach...

NB:

 Jika sobat tidak menemukan kode yang dicari template blog sobat, Berarti cara di atas tidak berlaku untuk Template blog yang sobat gunakan. Namun sobat masih bisa memasangnya di blog sobat.

Caranya:

• Masuk >> Dasboard >> Tata letak >> Tambah Gadget >> pilih >> HTML/JavaScript >> Taruh semua kode script yang ke dua diatas di dalam kotak HTML/JavaScript >> Simpan dan lihat hasilnya.

 Semoga artikel tutorial blog yang membahas tentang Cara Membuat Menu Di Bawah Header Blog, Bisa sangat bermanfaat bagi sobat KUCOPAS semua. selamat Berkarya...

---

| Supported by http://kuc0pas.blogspot.com |

---

Cara Membuat atau Menambahkan 2 Kolom Dibawah Header

Sudah hampir satu bulan blog ini tidak di update dan sekarang mumpung lagi ada kesempatan jadinya saya duduk sejenak untuk berbagi informasi tetang cara membuat atau menambahkan 2 kolom di bawah header. Seblumnya Dapur Tutorial Blogspot Sudah Pernah Menyampaikan Tetang tutorial Cara Menambahkan Elemen Halaman Baru Dibawah Header Blog dan Cara Menambahkan Elemen Halaman Baru Di Atas Header Blog

Nah...Untuk menambahkan 2 kolom dibawah header tidak begitu sulit kita hanya memodifikasi sedikit dari kode tersebut.

Berikut langkah-langkah yang harus anda lakukan :

1. Login menggunkan akun blog anda
2. Setelah anda masuk ke Dashboard pilih Menu "Template"





3. Klik  Tombol Edit HTML





4. Klik Tombol Proceed atau Tombol Lanjutkan  kemudian akan muncul halaman Edit HTML seperti berikut





5. Centang Expand Template Widget.





6. Sebelum melakukan Edit HTML download lengkap template anda terlebih dahulu baca caranya Disini
7. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode) 
8. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin>

#box-kolom-widget { clear:both; } .box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor; }

9. Sekaran Anda cari Kode <div id='main-wrapper'>   atau <div id="main-outer"> 
10. Apabila sudah ketemu copas kode dibawah ini dan letakan diatas salah satu kode <div id='main-wrapper'>   atau <div id="main-outer">

</div>
<div id='box-kolom-widget'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
</div>

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

11. Lankah terakhir klik Tombol Simpan Template





12. Selesai dan lihat hasilnya

Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak atau Layout  jika ada Elemen tambahan Diatas Header Seperti dibawah ini berarti lankah-langkah diatas sudah anda lakukan dengan benar

Demikian Tutorial Kali ini tetang Cara Membuat atau Menambahkan 2 Kolom Dibawah Header Semoga bisa bermanfaat

Red Light Blogger Template

Red Light Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	Red Light Blogger Template
Description	Red Light is a free blogger template adapted from WordPress with 3 columns, sidebar on the right and left, grunge style and vectorial elements.
Template Author	http://btemplates.com/author/falcon-hive/
Designer	TemplateLite
Instructions URL	How to install Blogger Template

Source : btemplates.com

Menu Dropdown dengan Background

Menu Dropdown dengan Background | Tutorial Blog

Dulu saya pernah posting cara Membuat Menu Dropdown, pada postingan ini kita akan membuat menu dropdown dengan background image.

Buat Sobat yang ingin mencoba silakan ikuti tutorial berikut :

• Login ke blogger Anda, klik menu Design > Edit HTML.
• Lalu beri centang expand widget templates, sebaiknya backup dulu template Anda.
• Cari kode <b:skin><![CDATA[, lalu letakkan kode berikut diatasnya.
  <script>
  var last_expanded = &#39;&#39;;
  function showHide(id)
  {
  var obj = document.getElementById(id);
  var status = obj.className;
  if (status == &#39;hide&#39;) {
  if (last_expanded != &#39;&#39;) {
  var last_obj = document.getElementById(last_expanded);
  last_obj.className = &#39;hide&#39;;
  }
  obj.className = &#39;show&#39;;
  last_expanded = id;
  } else {
  obj.className = &#39;hide&#39;;
  }
  }
  </script>
• Kemudian cari kode ]]></b:skin>, letakkan kode berikut ini diatasnya.
  .dropdown-b {
  background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
  text-align:center;
  width:165px;
  font-family: georgia, Helvetica, sans-serif;
  padding-left:20px;
  padding-right:20px;
  padding-top:10px;
  padding-bottom: 10px;
  margin-top: 4px;
  display:block;
  text-decoration: none;
  color: #000000;
  height: 8px;
  }
  .dropdown-bg {
  background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
  text-align:center;
  width:165px;
  font-family: georgia, Helvetica, sans-serif;
  padding-left:20px;
  padding-right:20px;
  padding-top:13px;
  padding-bottom: 10px;
  display:block;
  text-decoration: none;
  color: #000000;
  height: 8px;
  }
  .hide{
  display: none;
  }
  .show{
  display: block;
  }
  a{cursor: hand}
• Lalu klik Save Template.
• Kemudian klik menu Design > Page Element > Add a Gadget.
• Pilih HTML/Javascript, lalu masukkan kode berikut ini :
  <a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
  <div id="dropdown-b-1" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
  <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div>
  <a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
  <div id="dropdown-b-2" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
  <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
  <div id="dropdown-b-3" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
  <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
  <div id="dropdown-b-4" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
   <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div>
• Terakhir klik tombol Save. Selesai...

Silakan dicoba Sob, semoga berhasil membuat Menu Dropdown dengan Background.

Photoplus Blogger Template

Photoplus Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	Photoplus Blogger Template
Description	Photoplus is a free premium blogger template with 3 columns, gallery-styled, perfect for photologs and minimalist. Excellent layout for blogs about photography.
Template Author	http://btemplates.com/author/dante-araujo/
Designer	Dante Araujo
Instructions URL	How to install Blogger Template

Source : btemplates.com

Kumpulan Icon-Icon Keren

 Kumpulan Icon-Icon Keren - Sobat mau icon menarik yang cantik, menawan dan keren, Jika mau saya akan berikan. Disini tempatnya untuk pilih-pilih icon yang sobat inginkan, Ada berbagai jenis icon dan berbagai jenis ukurannya pula. Semuanya di jamin gratis, Masih kurang apalagi coba? hehehe...

 Sedikit pengetahuan untuk sobat KUCOPAS, Sebenarnya Icon-icon ini bisa berfungsi untuk mengganti Favicon bawaan asli Blog sobat. Sebagai contoh, Sobat bisa melihat Favicon blog KUCOPAS ini. Ada icon huruf K yang saya jadikan sebagai Favicon blog ini. Namun icon-icon ini juga bisa untuk di jadikan image url agar bisa tampil dalam kode script yang akan di pasang dalam blog.

 Kegunaan url image icon diantaranya bisa digunakan untuk Menu blog atau web, Icon Emotion, Smiley dan juga bisa di buat untuk yang lainnya yang masih berhubungan dengan url image icon tersebut. Tentunya sobat tidak usah susah-susah lagi untuk membuat url image dengan cara meng-upload gambar atau icon ke situs tertentu, Dan baru menyalin url image-nya untuk di jadikan icon untuk blog sobat. Karena disini sobat tinggal salin url image-nya saja dan langsung bisa dipasang atau di terapkan ke dalam blog sobat.

 Jika sobat semua ingin memiliki Icon yang keren, Di bawah ini saya kasih contoh gambar image icon, Sobat tinggal salin saja URL image-nya, Atau mungkin jika sobat ingin pilihan gambar icon yang lebih banyak lagi, Sobat bisa lihat langsung ke sumber situsnya www.iconarchive.com

Icon 16x16 px

Icon 32x32 px

Icon By http://www.iconarchive.com

Shared by KUCOPAS

Silahkan Sobat pilih icon yang sobat inginkan

Kalau sobat ingin yang lebih banyak pilihannya dan lengkap, Silahkan sobat visit ke situs-nya langsung.

Semoga bermanfaat.

Cara Membuat Menu Dengan Icon Gambar Di Blog

 Cara Membuat Menu Dengan Icon Gambar Di Blog - Setelah kemarin saya posting artikel tentang trik Cara buat Daftar Isi Dengan Label Tertentu Di Blog, Dan kali ini saya akan berbagi  artikel tentang trik lagi, Tentunya supaya Blog sobat semua jadi makin tambah terlihat lebih bagus, menarik dan juga cantik. Caranya yaitu dengan menambahkan Menu Vertikal Dengan Icon atau gambar.

 Mungkin biasanya yang sering sobat lihat, jumpai dan temui hanyalah menu vertikal biasa saja tanpa di lengkapi tampilannya dengan icon gambar.

 Nah sekarang saya punya trik untuk sobat semua supaya tampilan menu di blog sobat jadi lebih menarik dan bagus lagi, Sobat bisa membuat dan memasang Menu Vertikal Dengan Icon gambar.


 Agar sobat tidak penasaran dengan tampilan menu yang menggunakan icon gambar, Sobat bisa melihat contoh gambar screenshot di bawah ini, Atau melihat langsung pada blog DEMO KUCOPAS.

DEMO

 Jika sobat sudah tidak sabar lagi ingin membuat dan memasang Menu Vertikal Dengan Icon gambar di blog sobat, Nanti saya akan kasih tahu caranya. Karena caranya terbilang sangat mudah sekali untuk di pahami, Asalkan sobat mengikuti langkah-langkahnya yang akan saya jelaskan dengan cermat. Okelah kalau begitu kita langsung saja menuju ke TKP. huahh...

Berikut langkah-langkahnya cara membuat dan memasang Menu Vertikal dengan Icon Gambar di Blog:

1. Silahkan sobat >> Login atau Masuk >> Ke Blogger.com menggunakan akun sobat.

2. Pada Dashboard tampilan blog baru, Pilih menu >> Tata Letak >> Tambah Gadget >> HTML/Java Script.

3. Kemudian masukkan semua Kode di bawah ini pada kotak HTML/Java Script.
Masukkan semuanya dan jangan sampai ada yang terlewatkan ya sobat.

<style>
.list {
background:none; no-repeat left center;
border-bottom:1px dotted #ccc;
line-height:1.2em;
padding:2px 2px 2px 20px;
}
</style>
<div style="overflow:auto; padding:2px; margin:1px 1px 1px 1px; width:auto; height:auto; background:-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#ffffff)); border:1px solid #ccc;">
<ul><table width="100%" border="0">
<tr>
<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/32/Home-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://kuc0pas.blogspot.com">Home</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmLUo9bBRDHzEYfl2iXmf4f_nBr9WYNzZpBvrJ-NhaiSTj-rePutDNaSuhxrXZ997ZmSFXNpQisFwdTq4wjS0CcHBRdnBzf5Pg5MoOsQUCd3jI7o7YGsyCwqT5n3ze9PAsNcXeSxO6Iq3c/s1600/report_magnify.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://kuc0pas.blogspot.com">Daftar Isi</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/32/Graphics-Painting-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Download Template Blog</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/kyo-tux/soft/32/Tutorial-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://kuc0pas.blogspot.com">Tutorial Blog</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/emey87/social-button/32/blog-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Tips Blog</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/iconshock/brilliant-graphics/32/colors-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Kode Warna</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwItpoUtvHaTH6YJWcZKY9o6_hmfEJJ-idTLXydIeuvFzMsFVsUa2PSTeUCjUK_Q8nWnDGPK7BBcVlBhqCbVMAPW5wnidPm39oqRZ03k9TcX8LX_9AuiQhNr05gIxaeUUs9_h5GWdF-o8/" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Twitter</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-insert-link-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Tukar Link</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg01mhnU4PkC5LRXKA09QfeLxS5JKFNJoKQblaG-gdyG19qDFnmboOUpqkj9oXE5qV8_oODow12sQQ05fbkhDRn-vp787_S7N1wzUslwPB-LnKAVXnr2oUJY9h0SNcxssHwkqdq8jOilPDK/" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Facebook</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/iconshock/real-vista-web-design/32/Banner-design-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Advertise</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUVpD9SczL20EPQI9uXcYbKWxfhx8P31QsyAQb4wXcSrDFuY8mdQbHZtSXS4WQH4pScXo6dUEL-PY14Re75Wm5I1SwbJa_HJVUKTqNrpR739lcx_Mk6gdkWROkO2mPGPuqp0U8oaihPGpP/s1600/feed_burner.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Feedburner</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/kyo-tux/phuzion/32/Misc-Misc-Box-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://kuc0pas.blogspot.com">Kumpulan Icon</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/fatcow/farm-fresh/32/book-addresses-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://kuc0pas.blogspot.com">Contact Us</a></li></td>
</tr>
</table>
</ul>
</div>

4. Setelah semua kode sudah sobat masukkan pada kotak HTML/Java Script, Silahkan sobat klik >> Simpan dan lihat hasilnya.

Keterangan :

• Berikut keterangan beberapa Kode yang bisa sobat edit atau ganti:

- Warna Biru silahkan sobat ganti warna backgroundnya sesuai dengan selera sobat.

- Warna Pink silahkan sobat ganti dengan URL Icon gambarnya sesuai dengan keinginan sobat.

- Warna Hijau silahkan sobat ganti dengan alamat URL tujuan atau target Menu.

- Warna Merah silahkan sobat ganti dengan Nama Menu yang ingin sobat tampilkan.

 Jika sobat tidak punya atau belum punya alamat URL Icon atau gambar, Silahkan Sobat bisa lihat dan pilih-pilih Kumpulan Icon Keren DISINI. Sobat bisa memodifikasi icon atau gambarnya sesuai dengan keinginan dan selera sobat.

 Semoga tips dan trik blog tentang Cara Membuat Menu Dengan Icon Gambar Di Blog, Bisa sangat bermanfaat bagi sobat KUCOPAS semua. Selamat Berkarya...