Cara Mengatur Ukuran Lebar Template Blog

Cara Mengatur Ukuran Lebar Template Blog - Bagi sobat yang sedang mencari artikel informasi mengenai cara mengatur ukuran lebar template blog atau juga ingin tau bagaimana cara merubah lebar kolom template blog agar sesuai dengan keinginanan sobat, kali ini KUCOPAS akan memberikan trik-triknya secara gamblang agar sobat lebih mudah untuk mengerti.

Ada banyak sekali template blog yang bagus dan sangat menarik bagi sobat, namun kemungkinan sobat tidak menyukai karena salah satunya disebabkan oleh ukuran lebar dari suatu template blog tersebut. Hal ini biasanya sobat kurang cocok pada ukuran lebar kolom template yang meliputi kolom postingan, sidebar, footer, header dan masih banyak lagi.

Dalam mengatur ukuran suatu template blog tentu saja ada beberapa kode yang harus sobat ketahui, diantaranya adalah kode untuk template bagian keseluruhan atau dari beberapa kolom seperti ukuran lebar postingan, sidebar, header dan footer.

Agar sobat bisa lebih dengan mudah untuk mengatur ukuran template blog, sobat bisa mengikuti arahan dari contoh yang akan saya berikan dibawah ini:

1. Silahkan sobat Masuk atau Login ke >> Blogger.com menggunakan akun sobat.
2. Pilih menu >> Template >> klik Cadangkan / Pulihkan (Lihat bagian kanan atas) >> Download template lengkap. Guna untuk berjaga-jaga, jika ada kesalahan saat edit template.
3. Klik >> Edit HTML
4. Kemudian cari kode-kode berikut yang berwarna Biru, untuk mengatur ukuran lebar kolom dalam template blog. (Tekan CTRL+F untuk mempercepat pencarian kode dalam Edit HTML Template).

1. #header-wrapper adalah kode untuk ukuran lebar header suatu template blog, Header bagian atas meliputi kolom Judul atau nama blog. Biasanya ada dua kolom kanan dan kiri.
Contoh:

#header-wrapper {
width:1000px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Keterangan:

• Warna Biru adalah Kode Header dalam template blog.
• Warna Merah adalah Ukuran lebar Header dalam template blog.

Catatan:
Bila Header dalam template blog memiliki dua kolom kanan dan kiri, pastikan kedua ukurannya disesuaikan dengan ukuran #header-wrapper diatas.

Contoh Kode Kolom Header Bagian Kiri:

#header{
margin:0;border:0 solid $bordercolor;
color:$pagetitlecolor;
float:left;
width:179px;
overflow:hidden}

Keterangan:

• #header adalah kode Header sebelah kiri, biasanya kolom untuk tempat Judul blog.
• float:left; adalah posisi kolom berada dibagian kiri.
• width:179px; adalah ukuran lebar kolom. Ganti nilainya agar sesuai dengan keinginan sobat dan ukuran template blog sobat.

Contoh Kode Kolom Header Bagian Kanan:

#header2{
float:right;
width:728px;
margin-right:0px;
padding-right:0px;
overflow:hidden}

Keterangan:

• #header2 adalah kode Header sebelah kanan, biasanya kolom untuk tempat iklan atau sponsor blog.
• float:right; adalah posisi kolom berada dibagian kanan.
• width:728px; adalah ukuran lebar kolom. Ganti nilainya agar sesuai dengan keinginan sobat dan ukuran template blog sobat.

2. #outer-wrapper adalah kode bagian untuk semua ukuran lebar suatu template blog, biasanya memiliki ukuran yang sama dengan ukuran pada #header-wrapper diatas. Karena ukuran #outer-wrapper didalamnya biasanya berisi ukuran #main-wrapper (Kolom postingan), #sidebar-wrapper (Kolom Sidebar).

Contoh Kode:

#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

Keterangan:

• #outer-wrapper adalah Kode untuk mengatur keseluruhan lebar template blog.
• width: 1000px; adalah ukuran lebar keseluruhan template blog, Ganti nilainya sesuai dengan ukuran template blog yang sobat inginkan.

3. #main-wrapper adalah kode template bagian kolom postingan blog. Sobat bisa mengatur ukuran lebarnya sesuai dengan keinginan sobat, namun sesuaikan dengan ukuran #outer-wrapper yang dibagi untuk kolom postingan dan juga sidebar.

Contoh Kode:

#main-wrapper {
width: 655px;
margin-left: 20px;
margin-right: 20px;
float: left;
}

Keterangan:

• #main-wrapper adalah Kode bagian Postingan dalam template blog.
• width: 655px; adalah ukuran lebar kolom postingan blog, Ganti dan tentukan nilainya sesuai dengan keinginan sobat.
• float: left; adalah letak posisi kolom postingan blog berada dibagian kiri dalam template blog.

4. #sidebar-wrapper adalah kode bagian Sidebar dalam template blog, yang biasanya dalam kolom di isi dengan widget-widget yang diterapkan. Sidebar bisa berada dibagian posisi kanan dan kiri atau salah satunya.

Contoh Kode:

#sidebar-wrapper {
width: 310px;
float: right;
}

Keterangan:

• #sidebar-wrapper adalah kode bagian Sidebar dalam template blog.
• width: 310px; adalah ukuran lebar kolom sidebar blog, Ganti dan tentukan nilainya sesuai dengan keinginan sobat.
• float: right; adalah letak posisi kolom sidebar blog berada dibagian kanan dalam template blog.

Catatan:
Bila dalam template blog sobat memiliki dua sidebar yang berada dibagian kanan dan kiri, maka penentuan ukuran lebar yang meliputi kolom postingan, sidebar kanan dan kiri harus sesuai dengan ukuran lebar #outer-wrapper yang dibagi menjadi tiga kolom.

Contoh membagi ukuran kolom dalam template agar tepat dan sesuai dengan ukuran #outer-wrapper.

#outer-wrapper = 1000px
#main-wrapper = 450px
#sidebar-wrapper = 300px
#newsidebar-wrapper = 200px

Berikut contoh gambar screenshot dalam kolom Tata Letak template blog KUCOPAS.

Demikian tutorial cara mengatur ukuran template blog yang dapat KUCOPAS share untuk sobat semua, bila ada kekurangan mohon diberitahukan karena trik ini untuk para blogger pemula. Bila ada pertanyaan mengenai tutorial ini, silahkan sobat bertanya dalam kotak komentar yang tersedia.

Selamat Berkarya...

---

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

---

06.37 | 0 komentar | Read More

Cara Membuat Widget Recent Comments With Thumbnail

Tutorial Belajar Blog - Cara Membuat widget Recent Comment With Thumbnail - Recent Comment kalau diartikan ke dalam bahasa Indonesia yaitu komentar terakhir, Maksud widget recent comment ini berfungsi agar sobat atau pengunjung blog sobat dapat melihat para readers yang berkomentar di blog sobat. Selain itu, widget ini juga bisa untuk meningkatkan pageview blog sobat. Karena setiap komentar yang telah di publish lalu diklik dan dilihat oleh seseorang.

Widget ini Dibuat oleh Way2Blogging. Kelebihan dari widget ini adalah Widget Yang Stylish dari pada versi sebelumnya, Memiliki Avatar yang dibingkai bulat dibandingkan dengan versi sebelumnya yang tidak memiliki avatar, Widget ini juga bisa diatur dengan anda seberapa anda ingin menampilkan Komentar, Anda juga bisa mengatur avatar, Dan Widget ini juga mudah dipasang. Untuk Itu saya akan menjelaskan kepada anda cara untuk membuatnya. Untuk itu berikut cara untuk membuatnya:

• Silahkan Login Ke Blogger Anda.
• Setelah itu, Klik Menu Tata Letak, --> Klik Tombol Add Gadget, Lalu Tambahkan Gadget HTML.
• Masukan kode berikut ini :

<style type="text/css">
    ul.asharexp_recent_comments{list-style:none;margin:0;padding:0;}
    .asharexp_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .asharexp_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .asharexp_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .asharexp_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 11px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=100,
 adminBlog='Oktri Darmadi';
//]]>
</script>
<script type="text/javascript" src="http://tutorialbelajarblogger.googlecode.com/files/Recent%20Comments%20thumbnail.js"></script>
<script type="text/javascript" src="http://tutorialbelajarblogger.blogspot.com/feeds/comments/default?alt=json&callback=asharexp_recent_comments&&max-results=100"></script>
<div style="text-align:center">
<span style="float:left;font:italic 10px Arial, Sans-Serif; color:#3D3D3D;"><a target="_blank" href="http://tutorialbelajarblogger.blogspot.com/2013/05/cara-membuat-widget-recent-comments.html">.:Get Widget:.</a></span>
</div>

Keterangan:

• numComments = 5 adalah jumlah komentar yang ditampilkan pada widget recent comment with thumbnailnya. Bisa ditambah atau dikurang sesuai keinginan
• characters = 40 adalah jumlah isi komentar yang ditampilkan. Bisa sobat tambahkan atau dikurang sesuai keinginan
• adminBlog='Oktri Darmadi' adalah nama admin yang ada di blog sobat. Silahkan ganti dengan nama author/admin yang ada di blog sobat
• Tulisan yang berwarna merah ganti dengan url blog sobat

Semua kode script itu tinggal sobat copy lalu sobat pasang di blog sobat. Lalu atur dari jumlah yang sobat tampilkan, isi komentar, admin blog, url blog dan lain lain, simpan widget lalu lihat hasilnya. Oke sob, sekian dulu untuk membuat widget recent comment with thumbnail. Sampai Jumpa ;)

21.00 | 0 komentar | Read More

Cara Membuat Facebook Recommendations Bar di Blog

Cara Membuat Facebook Recommendations Bar di Blog - Kali ini Blog Tutorial Blogz akan share tentang "Cara Membuat Facebook Recommendations Bar di Blog". Widget ini sama seperti widget Recommendations Posts, bedanya adalah ini merupakan widget dari Facebook. Widget ini sejenis dengan widget Related Posts atau 'Artikel Terkait' yang menampilkan Artikel/postingan terkait dengan artikel yang sedang dibaca. Widget ini tampil melayang (Float) di sisi kanan blog. Untuk lebih jelasnya, silahkan liat gambar berikut ini.

Berikut Cara Membuat Facebook Recommendations Bar di Blog :

1. Login ke Akun Blogger Anda.
2. Silahkan masuk ke Halaman Template.
3. Lalu pilih 'Edit HTML'.
4. Selanjutnya, silahkan cari kode : <html
5. Letakkan kode berikut tepat setelah kode tadi.

xmlns:fb='http://ogp.me/ns/fb#'

Contoh : <html xmlns:fb='http://ogp.me/ns/fb#' 

6. Kemudian, cari kode <body>.
7. Letakkan kode berikut tepat dibawah kode tadi.

<div id='fb-root'/>
<script>
//Facebook Recommendation bar
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=226266264125353";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://tutorial-blogz.blogspot.com' trigger='50%'/></div>
</b:if></b:if>

Keterangan :
- (226266264125353) = Silahkan Ganti dengan App ID Anda. 
- (3) = Jumlah tampilan Artikel/Post, silahkan ganti sesuai keinginan.
- (right) = Posisi Widget. Jika ingin widget berada di sisi kiri blog, ganti dengan 'left'.
- (http://tutorial-blogz.blogspot.com) - Silahkan ganti dengan Link blog Anda.

Bila belum mempunyai App ID Facebook, Anda bisa daftarkan disini : https://developers.facebook.com/apps/

Setelah selesai daftar, untuk mengetahui App ID silahkan lihat pada menu Pengaturan (Setting). 

8. Jika sudah selesai, Klik Save Template.

00.42 | 0 komentar | Read More

Cara Membuat Widget Entri Populer Keren

Cara Membuat Widget Entri Populer Keren - Sesuai dengan judul tersebut belajar blog ingin berbagi membuat tips blog membuat widget entri populer lebih keren, mungkin Cara Membuat Widget Entri Populer Keren dan Cantik ini bisa menjadi salah satu pilihan. entri popular kalau dari google tentunya biasa saja,, tanpa ada variasi  yang menarik dan keren. dengan tambahan script pada artikel ini sobat dapat Membuat Widget Entri Populer Keren

Nah,,, waktunya ke TKP Cara Membuat Widget Entri Populer Keren dan Cantik , untuk lebih lanjut nih,,,, baca tutorialnya :

1. Login ke blog anda
2. Klik Tata letak >> Tambah Gadget >> Entri Populer >> tampilkan entri populer hanya judulnya saja. Jangan menggunakan tubnail dan cuplikan. Atur jumlah judul posting yang akan dimunculkan.
3. Klik simpan
4. Selanjutnya klik Template
5. Klik Edit Html >>klik lanjutkan
6. Cari kode  ]]></b:skin> Jika sudah ketemu kopi paste kode css berikut ini tepat diatas kode ]]></b:skin>

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

7. Sobat Preview dahulu, setelah berhasil baru di SAVE

Sekian Dulu Sobat  Cara Membuat Widget Entri Populer Keren  semoga bermanfaat. Good Luck 

11.45 | 0 komentar | Read More

Cara Membuat Forum Tanya-Jawab di Blog

Cara Membuat Forum Tanya-Jawab di Blog - Kali ini saya akan membagikan Cara Membuat Forum Tanya-Jawab di Blog. Forum Tanya-Jawab ini sangat berguna untuk blog kita, karena apabila pengunjung belum mengerti tentang yang dibaca mereka bisa menanyakannya kepada Anda melalui Forum Tanya-Jawab ini, Dan Anda sebagai Admin blog pun dapat menjawab pertanyaan yang diberikan oleh pengunjung blog Anda. Forum Tanya-Jawab ini dibuat oleh Situs FormSpring.Me, jadi bila ingin melakukan Tanya-Jawab harus memiliki akun FormSpring terlebih dahulu. Silahkan lihat contoh gambar dibawah ini.

Cara Membuat Forum Tanya-Jawab di Blog :

1. Silahkan kunjungi situs www.formspring.me

2. Kemudian isi data pada kotak pendaftaran (sign up), bisa juga melalui facebook.

3. Klik Get started

4. Pada Step 1, Klik Skip > Step 2, Klik  Skip > dan seterusnya.

 

5. Silahkan Upload foto untuk profile Anda melalui Komputer Anda, bisa melalui facebook atau webcam.

 6. Selanjutnya, klik Account settings

 

 7. Klik Widgets

 

 8. Silahkan copy kodenya.

9. Untuk langkah terakhir silahkan masukkan kode yang telah Anda copy ke Blog Anda.

• Login Blogger.
• Dashboard Blog.
• Layout >> Add a Gadget.
• HTML/JavaScript.
• Paste-kan kode tadi didalamnya.
• Save.

10. Selesai.

Sebagai contohnya Anda bisa lihat pada blog ini >> demo-previews.blogspot.com

21.02 | 0 komentar | Read More

Cara Membuat Menu Tab Multi Widget Di Blog

Cara Membuat Menu Tab Multi Widget Di Blog - Setelah cukup lama tidak update postingan, kali ini saya akan kembali memberikan tips dan trik tentang tutorial blog yang berhubungan dengan widget. Karena kemarin ada pesan yang masuk kedalam contact us blog ini, yang menanyakan tentang cara membuat menu tab view seperti blog kucopas ini, maka sekarang saya akan share tips dan triknya untuk sobat semua.

Mungkin bagi para master blogger cara ini sudah sangat kuno alias sudah di kenal sejak lama, oleh karena itu mohon di benarkan bila ada kesalahan dalam memberikan tips dan trik. Sebab cara ini saya peruntukkan bagi para blogger pemula seperti saya ini yang masih newbie.

Agar selalu ingat dan tidak kehilangan cara untuk menerapkannya ke dalam blog saya di lain waktu, maka saya sengaja membuat catatan posting ini untuk saya share, Siapa tahu para sobat juga ingin menerapkannya kedalam blog kesayangannya. Pada artikel sebelumnya yang sudah saya share adalah tentang Cara Mengatasi Widget Alexa Rank No Data, silahkan dibaca jika sobat juga mengalami hal yang sama seperti yang pernah saya alami di blog ini.

Fungsi membuat Menu Tab Multi Widget di blog ini terbukti bisa membuat tampilan widget blog menjadi simpel dan tidak amburadul atau acak-acakan. Karena dengan membuat menu tab multi widget di blog, maka widget akan menjadi satu tampilan atau memiliki efek show hidden widget. Intinya adalah dapat menghemat tempat dalam blog, sebab menu tab multi widget ini dapat berisi banyak widget. Tentunya hal ini sangat berguna sekali bagi blogger yang mengutamakan kerapian, apalagi blog yang banyak sekali memasang widget.

Agar sobat tidak penasaran tentang tampilan menu tab multi widget di blog ini seperti apa, sobat bisa langsung melihat contoh dan efeknya pada widget followers blog KUCOPAS ini. Lihat gambar screenhot berikut.

Sedikit penjelasan untuk sobat tentang Menu Tab Multi Widget ini tampilannya sekilas hampir sama dengan menu tab view tanpa edit HTML, namun perbedaannya adalah cara penerapannya yang sangat simpel dan mudah untuk di lakukan oleh para blogger pemula seperti saya ini, oleh sebab itu cara ini juga di sebut dengan Simple Tab View JQuery. Karena sifatnya menu tab multi widget ini akan secara otomatis membuat widget menjadi multi tab atau show hidden widget.

Untuk Cara Membuat Menu Tab Multi Widget Di Blog, caranya sangat mudah. silahkan sobat mengikuti langkah-langkahnya dengan teliti dan benar seperti berikut di bawah ini:

1. Langkah yang pertama, silahkan sobat >> Login atau Masuk ke Blogger.com menggunakan akun sobat.

2. Pada "Dashboard" tampilan blogger baru, pilih menu >> Template >> Edit HTML >> Lanjutkan.

3. Silahkan sobat cari kode </head> (Gunakan CTRL+F untuk mempermudah pencarian) Jika sudah ketemu, sekarang sobat tambahkan kode warna Merah berikut tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

4. Simpan Template.

Catatan:

• Jika dalam template sobat sudah ada kode warna Merah diatas, maka sobat tidak perlu menambahkan lagi kedalam template blog sobat. Karena efeknya Menu Tab Multi Widget tidak bisa berfungsi dengan baik bahkan bisa menjadi eror.

• Setelah kode di atas tersimpan di dalam template blog, sekarang kita menuju ke penerapan kode CSS-nya ke dalam widget blog sobat. Silahkan sobat perhatikan baik-baik trik berikut.

5. Kembali ke "Dashboard" blog, pilih menu >> Tata Letak >> Tambah Gadget >> HTML/JavaScript.
Masukkan semua kode CSS warna Biru di bawah ini kedalam kotak HTML/JavaScript.

<style type="text/css"> .blogtabs {padding: 0px !important;border: 0 solid #bbb;} .blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 13px;color:white;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: green;cursor:pointer;} html .blogtabs h2.active {background: #fff;color:green;} .blogtabs .widget-content {border: 1px solid #bbb;padding: 0px;background: #fff;clear:both;margin:0;} .btab, #showtabs {display:none;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script type="text/javascript" src="http://kucopas-js.googlecode.com/files/SimpleTabViewJQuery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#showtabs').simpleBlogTab ({organictabs: 4}); }); </script> <div id="showtabs"></div>

6. Simpan Gadget.

Agar widgetnya dapat menyatu dan menjadi multi tab widget, maka cara penerapan widget di blog harus tersusun seperti gambar screenshot berikut di bawah ini.

Keterangan:

• color:white adalah warna relatif judul menu tab multi widget.

• background: green adalah warna background relatif menu tab multi widget.

• color:green adalah warna aktif judul menu tab multi widget saat di klik.

• background: #fff adalah warna background aktif menu tab multi widget saat di klik.

• organictabs: 4 adalah banyaknya jumlah widget yang akan menjadi multi tab widget. Silahkan sobat ganti nilainya sesuai dengan jumlah widget yang ingin sobat jadikan multi tab widget.

Untuk mengetahui KODE WARNA HTML, sobat bisa melihatnya DISINI.

Demikian tips dan trik tutorial blog yang mengulas tentang Cara Membuat Menu Tab Multi Widget Di Blog, jika ada kekurangan dan pertanyaan yang berhubungan dengan trik ini, silahkan sobat berkomentar dalam form komentar yang tersedia. Semoga artikel yang saya share ini bisa sangat bermanfaat bagi sobat KUCOPAS semua.

Selamat Berkarya

---

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

---

12.31 | 0 komentar | Read More

Cara Mengatasi Alexa Rank No Data Di Blog

Cara Mengatasi Widget Alexa Rank No Data Di Blog - Bagi sobat yang sedang kebingungan mencari tahu tentang penyebab Alexa Rank No Data, disini nanti akan saya jelaskan apa penyebab widget Alexa Rank No Data di blog. Pada artikel sebelumnya saya sudah pernah share yaitu tentang Cara Membuat Dan Memasang Widget Alexa Di Blog, dan kali ini saya akan share artikel posting tentang Cara Mengatasi Widget Alexa Rank No Data Di Blog.

Penyebab Widget Alexa Rank No Data
Pengalaman pribadi yang pernah saya alami dalam beberapa waktu yang lalu saat melihat widget alexa blog KUCOPAS ini tiba-tiba menunjukkan Rank: No Data. Saya pun sempat bingung dan bertanya-tanya dalam hati, ada apakah gerangan yang sedang terjadi pada blog saya, widget alexa rank menunjukkan No Data?

Dari pada berdiam diri dan hanya memandangi widget alexa rank yang selalu menampilkan No data di blog, kemudian saya melakukan pengecekkan secara langsung pada situsnya alexa.com, namun pada situsnya saya lihat alexa rank untuk blog KUCOPAS ini tetap normal-normal saja. Lihat gambar screenshot di bawah ini.

Meski kelihatan normal pada situsnya alexa.com, tapi terjadi sebaliknya pada blog saya, widget Alexa Rank tetap menunjukkan tampilan No Data.

Setelah saya melakukan search di google.com untuk mencari tahu tentang penyebab widget Alexa Rank No Data, ternyata penyebab widget Alexa Rank No Data adalah karena saya belum pernah melakukan Claim Blog dan Verify my ID untuk widget alexa yang saya pasang di blog KUCOPAS ini. Alhasil widget alexa rank pada blog ini tiba-tiba menjadi No data.

Cara Mengatasi Widget Alexa Rank No Data Di Blog
Setelah kita mengetahui apa yang menjadi penyebab widget Alexa Rank No Data di blog, ternyata semua itu di karenakan kita belum pernah melakukan Claim Blog (Claim Site) dan Verify my ID, sekarang saya akan memberikan solusi untuk mengatasi widget Alexa Rank No Data di blog dengan cara Claim Blog dan Verify my ID di situs resminya alexa.com.

Untuk cara melakukan Claim Site dan Verify my ID agar widget Alexa Rank tidak lagi menampilkan No Data alias kembali normal lagi di blog, caranya sangat mudah sekali untuk dilakukan dan di praktekkan, asalkan sobat mengikuti langkah-langkah yang saya berikan dengan cermat dan teliti di bawah ini:

1. Langkah yang pertama, silahkan sobat >> Masuk atau Login ke situs www.alexa.com menggunakan akun sobat.

2. Kemudian silahkan sobat klik pilihan Menu >> Products >> Site Owners >> Tools. Untuk lebih cepat sobat bisa langsung klik DISINI.

3. Silahkan sobat klik pilihan Tools >> Claim Your Site, seperti gambar screenshot yang saya beri tanda panah di atas.

4. Lalu sobat akan dibawa kehalaman seperti di bawah ini, masukkan alamat URL situs atau blog sobat ke dalam form. Kemudian sobat klik lagi >> Claim Your Site. Lihat contoh gambar berikut.

5. Lihat >> Status: Not Claimed Yet. Itu artinya widget Alexa Rank yang terpasang di blog sobat belum di Verifikasi oleh sobat. Sehingga mengakibatkan widget Alexa Rank di blog sobat menjadi No Data.

Ada dua Option untuk melakukan verifikasi widget Alexa Rank pada blog sobat. Namun untuk lebih mudahnya melakukan Verifikasi, saya sarankan sobat menggunakan Opsi yang kedua.

Option 1

Option 2

6. Silahkan sobat ambil Kode ID Verifikasi widget Alexa Rank untuk blog sobat, lihat gambar diatas yang saya beri tanda kotak hijau. Contoh kode Verifikasi untuk blog KUCOPAS ini adalah

SQhAGdSPiuUlASEX8sTsFa418nc

Cara penerapan Kode ID Verifikasi widget Alexa Rank kedalam template blog

• Silahkan sobat Masuk atau Login ke >> Blogger.com menggunakan akun sobat.

• Pada Dashboard tampilan blogger baru, pilih Menu >> Template >> Edit HTML >> Lanjutkan.

• Kemudian cari kode <head> (Gunakan CTRL+F untuk memudahkan pencarian).

• Langkah selanjutnya letakkan Kode ID Verifikasi Alexa Rank tepat di bawah kode <head>

Cara penerapannya seperti contoh dibawah ini:

<head>

<meta name="alexaVerifyID" content="SQhAGdSPiuUlASEX8sTsFa418nc" />

• Ganti kode warna Merah dengan Kode ID Verifikasi Alexa Rank sobat, seperti pada langkah yang ke 6 di atas.

• Kemudian klik >> Simpan Template.

7. Setelah Kode ID Verifikasi Alexa Rank sudah terpasang dan tersimpan pada template blog sobat, silahkan sobat kembali lagi ke Alexa.com untuk melakukan Verifikasi dengan klik >> Verify my ID pada option 2 seperti gambar di atas.

8. Selesai dan buka blog sobat di tab browser yang baru untuk melihat hasilnya dengan sempurna.

Catatan:

• Setelah selesai melakukan Claim Site dan Verify my ID, Namun widget Alexa Rank masih belum berubah dan tetap menampilkan No Data, silahkan sobat ganti saja kode widget alexa rank-nya dengan yang baru.

Berikut dibawah ini saya cantumkan widget alexa rank yang aktif hasil dari keberhasilan setelah saya melakukan Claim Site dan Verify my ID untuk widget Alexa Rank di blog KUCOPAS ini.

---

---

Semoga artikel posting ini yang membahas tentang Cara Mengatasi Alexa Rank No Data Di Blog, bisa sangat berguna dan bermanfaat bagi sobat KUCOPAS semua.

Selamat Berkarya

14.37 | 0 komentar | Read More

Cara Membuat Komentar Admin Berbeda dengan Komentar Pengunjung

Cara Membuat Komentar Admin Berbeda dengan Komentar Pengunjung - Salah satu cara untuk mempercantik tampilan Kotak Komentar pada Blog kita yaitu dengan Membuat Komentar Admin Berbeda dengan Komentar Pengunjung. Maksud dari Komentar Admin Berbeda dengan Komentar Pengunjung adalah membuat warna pada komentar admin berbeda, hal ini untuk mempermudah pengunjung untuk mengetahui Admin di suatu blog.

Berikut Cara Membuat Komentar Admin Berbeda dengan Komentar Pengunjung : 

1. Silahkan Anda masuk ke Akun Blogger Anda.
2. Masuk ke Dashboard Blog.
3. Pergi ke Template > Edit HTML.
4. Centang "Expand Template Widget"
5. Cari kode </body>
6. Lalu copy kode dibawah ini diatas kode </body>

<script src='http://code.jquery.com/jquery-latest.js'/>
<!-- Admin comment -->
<script>
$(function() {
function highlight(){
$(&#39;.user.blog-author,.ssyby&#39;).closest(&#39;.comment-block&#39;)
.css(&#39;border&#39;, &#39;1px solid #e1e1e1&#39;)
.css(&#39;background&#39;,&#39;#f1f1f1 url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMS1bXKta4sm6SypEab1Kwj1E0tCEyyduNnh3Kf1HTulKTDMluPqWUKnm-KmNH3HuJfCuyaDtPCURT8Fb9dQ13nQFh3baVSauKvtHBha47C_BXDawu1gJP0gz9fRnvJ4f5heGU6mtKO3U/s1600/admin2.png&quot;) no-repeat bottom right&#39;)
.css(&#39;padding&#39;, &#39;10px&#39;);
}
$(document).bind(&#39;ready scroll click&#39;, highlight);
});
</script>
<!-- admin comment end-->

7. Terakhir klik Save Template.

Selamat Mencoba !

17.10 | 0 komentar | Read More

Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog

 Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog - Gallery foto atau gambar di blog memang banyak sekali kita jumpai pada halaman blog yang mengutamakan promosi melalui gambar maupun foto image, Biasanya dipasang pada widget blog situs jual beli online. Namun pada tutorial blog yang akan saya share kasih trik dan tips-nya berikut ini adalah cara membuat gallery foto di blog dengan efek bergerak atau berjalan, Efek ini populer disebut efek Marquee. Jadi hasilnya tidak seperti gallery foto yang biasa, Karena gallery foto ini akan bergerak atau berjalan.

 Untuk cara membuat gallery foto gambar bergerak berjalan di blog, Caranya sangat mudah sekali. Ukuran lebar dan tinggi foto atau gambar bisa di atur agar sesuai dengan keinginan sobat. Karena cara ini adalah cara manual dan sobat bisa sesuka hati mengaturnya. Silahkan sobat mengikuti langkah-langkah yang akan saya berikan nanti.

 Tampilan dari gallery foto gambar bergerak berjalan di blog, Tentu saja akan mengikuti sesuai dengan gambar atau foto yang sobat terapkan. Sobat bisa melihat dalam Blog Demo yang sudah saya pasang widget Gallery foto gambar bergerak berjalan di blog. Silahkan klik DISINI.

DEMO

 Ada beberapa opsi pilihan dari gallery foto gambar bergerak berjalan di blog yang bisa sobat pilih, Diantaranya:

• Gallery foto gambar bergerak berjalan di blog default (Biasa).
• Gallery foto gambar bergerak berjalan di blog dengan Url Link tujuan bila di klik.
• Dan masih banyak lagi, Tergantung pandai-pandainya sobat untuk berexperiment menambahkan kode-kode tertentu dalam gallery.

 Agar sobat tidak bingung dengan penjelasan saya di atas, Nanti akan saya jelaskan caranya satu-persatu, Agar sobat bisa mengerti dengan mudah.

Cara Membuat Gallery foto gambar bergerak berjalan di blog default (Biasa)

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

2. Pada Dashboard tampilan blogger baru, Pilih Menu >> Tata Letak >> Tambah Gadget >> HTML/JavaScript.

3. Beri judul widget, Contoh "My Foto Gallery". Kemudian letakkan semua kode di bawah ini pada kotak HTML/JavaScript.

<marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHmZUzbXYdpVQBYy40ghLoj223DdnfDTUjPL3G4htMOK6NSRJiC2uU-ChtbZW_mfOywTGpuoKWpAXPCsr7u7gmgJz92jOCIOlZxRJIyQmRmTEOP1zraGt0hVCrWN0WWOBG3rBJRhxwVdI/s1600/PINK1.jpg" width="120" height="120" /><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2b2edXvRNZtGgcBRw7fgOYEDGKF0GXO1P6Q3ldustPRWPrb-9OD9V7WT4jCv9nkLuwpgQZjzN0wPgSQ1FWr624KddD5jsRwv7SxEYqTzy1gkO9E-94Tn1lbHn2ea_1X5Xp3-uYgoySCU/s1600/HT3.jpg" width="120" height="120" /><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBRGhTlnO_s0_Xh13QC3c66EvOO4y8WMWMPugZkoTbJ4zK_bgVLHQAJ1anWDiBWOu6oFdVNb7z8NFGjLgFIPsej76ppob6Fdpm3VO8_b2_a5K77oHY2sSTwHcz7ljsU1HhWr-Ae1t4-_M/s1600/sonal_chauhan.jpg" width="120" height="120" /></marquee>

<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank"><b>Get Widget</b></a>

Keterangan:

• Warna Merah adalah Alamat URL gambar atau foto image. Silahkan sobat ganti dengan alamat URL gambar atau foto image sobat.

• Warna Biru, width="120" dan height="120" adalah ukuran Lebar dan Tinggi image gambar atau foto. Silahkan sobat atur nilainya sesuai dengan keinginan sobat agar sesuai dengan widget blog sobat.

•  <marquee direction="up" adalah arah bergerak berjalan ke atas. Silahkan sobat ganti up jadi down jika ingin arah berjalan bergerak ke bawah.

Cara Membuat Gallery foto gambar bergerak berjalan di blog dengan Url Link tujuan bila di klik.

 Cara yang berikut ini adalah cara yang mudah dilakukan oleh para blogger mania, Sebab cara ini hanya menambahkan beberapa kode saja. Namun agar sobat tidak kesulitan dalam menambahkan kode, Di sini akan saya kasih contoh penerapan kode yang benar.

Berikut kode yang menggunakan alamat url link tujuan bila image gambar foto di klik.

<marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()"><a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank" title="Cara membuat Galeri foto Gambar bergerak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHmZUzbXYdpVQBYy40ghLoj223DdnfDTUjPL3G4htMOK6NSRJiC2uU-ChtbZW_mfOywTGpuoKWpAXPCsr7u7gmgJz92jOCIOlZxRJIyQmRmTEOP1zraGt0hVCrWN0WWOBG3rBJRhxwVdI/s1600/PINK1.jpg" width="270" height="270" /></a><br />
<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank" title="Cara membuat Galeri foto Gambar bergerak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2b2edXvRNZtGgcBRw7fgOYEDGKF0GXO1P6Q3ldustPRWPrb-9OD9V7WT4jCv9nkLuwpgQZjzN0wPgSQ1FWr624KddD5jsRwv7SxEYqTzy1gkO9E-94Tn1lbHn2ea_1X5Xp3-uYgoySCU/s1600/HT3.jpg" width="270" height="270" /></a><br />
<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank" title="Cara membuat Galeri foto Gambar bergerak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBRGhTlnO_s0_Xh13QC3c66EvOO4y8WMWMPugZkoTbJ4zK_bgVLHQAJ1anWDiBWOu6oFdVNb7z8NFGjLgFIPsej76ppob6Fdpm3VO8_b2_a5K77oHY2sSTwHcz7ljsU1HhWr-Ae1t4-_M/s1600/sonal_chauhan.jpg" width="270" height="270" /></a></marquee>

<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank"><b>Get Widget</b></a>

Keterangan:

• Warna Hijau adalah Alamat Url tujuan bila image gambar foto di klik. Silahkan di ganti dengan alamat url tujuan sobat.

• Warna Orange adalah Title teks yang keluar jika Mouse pointer menyantuh gambar image foto pada gallery. Silahkan sobat ganti dengan title teks sesuai keinginan sobat.

• Kode yang saya berikan di atas adalah contoh untuk tiga gambar image foto saja. Sobat bisa menambahkan kode image-nya sesuai dengan keinginan sobat.

 Demikian tutorial blog tentang Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog secara manual. Jika ada pertanyaan mengenai tutorial ini, Silahkan sobat bertanya pada form kotak komentar yang tersedia. Senang bisa berbagi dan membantu sobat KUCOPAS semua. Semoga bisa sangat bermanfaat.

Selamat Berkarya

---

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

---

03.05 | 0 komentar | Read More

Cara Membuat Recent Post Berdasarkan Kategori

Cara Membuat Recent Post Berdasarkan Kategori - Pada Tutorial Blogger kali ini, saya akan membahas tentang Cara Membuat Recent Post Berdasarkan Kategori. Widget ini berfungsi untuk menampilkan Artikel Terbaru (Recent Post) Sesuai/Berdasarkan Kategori (Label). Untuk itu, silahkan simak tutorial Cara Membuat Recent Post Berdasarkan Kategori.

Cara Membuat Recent Post Berdasarkan Kategori : 

1. Login ke Akun Blogger terlebih dahulu.
2. Lalu pergi ke Layout.
3. Klik Add a Gadget.
4. Lalu pilih yang Feed.

5. Lalu masukkan URL di bawah ini di dalamnya

http://tutorial-blogz.blogspot.com/feeds/posts/default/-/Template

Keterangan : 
- Ganti URL yang berwarna merah dengan URL blog kamu.
- Dan yang berwarna biru ganti dengan Nama Kategori (Label) blog kamu.
- Untuk Label yang memiliki dua kata, seperti Tutorial Blogger. Anda harus memberikan %20 di antara kata tersebut, misalnya menjadi : Tutorial%20Blogger. 

6. Klik Continue.

7. Tentukan Judul dan Tampilannya, kemudian klik Save.

8. Selesai.

Demikian Cara Membuat Recent Post Berdasarkan Kategori,

Semoga bermanfaat bagi semua!

00.05 | 0 komentar | Read More

Cara Membuat Daftar Isi Label Tertentu Atau Banyak Label Di Blog

 Cara Membuat Daftar Isi Label Tertentu Atau Banyak Label (Category) Di Blog - Daftar Isi by label (Category) itulah kata familiarnya dalam dunia blogger untuk artikel yang akan saya share ini. Membuat daftar isi dalam blog merupakan keinginan dari setiap blogger maupun design web. Sebab dengan cara ini akan dapat mempermudah para pengunjung atau visitor yang datang ke blog kita, Agar bisa dengan cepat menemukan saat mencari artikel posting apa yang di inginkan.

 Tampilan dari daftar isi by label ini kurang lebih seperti daftar isi Jquery Accordion, Kerena fungsinya juga sama-sama daftar isi by label. Namun untuk daftar isi dengan Jquery Accordion sudah menggunakan efek Jquery dan akan menampilkan daftar isi dari isi keseluruhan blog itu sendiri, Sedangkan daftar isi by label atau banyak label ini bisa di atur manual perlabel atau banyak label yang kita ingin tampilkan di halaman posting, laman maupun widget blog.

 Agar sobat tidak bingung dan ingin melihat seperti apa daftar isi dengan Jquery Accordion, Silahkan sobat bisa lihat pada artikel posting yang sudah pernah saya share dan perbarui sebelumnya, Yaitu tentang Cara Membuat Daftar Isi Jquery Accordion Di Blog.

 Oke sekarang kita kembali ke pokok bahasan cara membuat daftar isi label tertentu atau banyak label di blog. Cara pemasangannya di blog sangat mudah sekali, Karena sobat tidak usah repot-repot Edit HTML dalam template blog sobat yang tentunya sangat rumit dan membingungkan. Cukup hanya menaruh kodenya dalam rancangan atau Tata Letak blog melalui Tambah Gadget, Jadi sangat gampang sekali untuk di pindah-pindah widgetnya seperti yang sobat inginkan agar sesuai dengan tampilan blog sobat.

Lihat contoh gambar screenshot berikut atau lihat pada blog DEMO KUCOPAS.

DEMO

Cara memasangnya di blog ada dua cara yaitu:
1. Memasang Daftar isi label tertentu atau banyak label pada Widget blog.
2. Memasang Daftar isi label tertentu atau banyak label pada Posting dan Laman blog.

Untuk cara memasangnya silahkan sobat ikuti langkah-langkahnya sebagai berikut.

1. Cara memasang Daftar isi Label tertentu atau banyak Label pada Widget Blog

• Silahkan sobat >> Login atau Masuk ke Blogger.com menggunakan akun sobat.

• Pada Dashboard tampilan blogger baru, Pilih Menu >> Tata Letak >> Tambah Gadget >> HTML/JavaScript.

• Kemudian masukkan semua kode berikut ke dalam kotak HTML/JavaScript.

<script>
var numposts = 100;
var standardstyling = true;
</script>
<script src="http://kucopas-js.googlecode.com/files/DaftarIsiByLabel.js" type="text/javascript"></script>
<div style="border: 1px solid #000000; height: 200px; overflow: auto; padding: 5px; width: auto;">
<h3>
TUTORIAL BLOG</h3>
<ul><script src="http://kuc0pas.blogspot.com/feeds/posts/default/-/TUTORIAL%20BLOG?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>
<h3>
TRIK FACEBOOK</h3>
<ul><script src="http://kuc0pas.blogspot.com/feeds/posts/default/-/trik%20facebook?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>
<h3>
TECHNO</h3>
<ul><script src="http://kuc0pas.blogspot.com/feeds/posts/default/-/trik%20komputer?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999"></script> </ul>
</div>

• Jika sudah di masukkan semua kodenya, Silahkan sobat klik >> Simpan dan lihat hasilnya.

Catatan:

- Warna Hijau : Silahkan sobat ganti dengan alamat URL blog sobat.
- Warna Merah : Nama Judul Label, Silahkan sobat ganti sesuai dengan keinginan sobat.
- Warna Biru : Nama label blog yang daftar isinya akan di tampilkan, Silahkan sobat ganti dengan label blog sobat, Besar kecil huruf harus sesuai dengan label blog sobat. Gunakan %20 untuk label yang ada space atau spasinya.
- Jika sobat ingin menambahkan atau mengurangi daftar label yang di tampilkan, Silahkan sobat bisa menambah atau mengurangi kode script-nya.
- Warna Pink adalah ukuran box atau kotak scroll. Silahkan sobat ganti sesuai dengan keinginan sobat.

2. Cara Memasang Daftar isi label tertentu atau banyak label pada Posting dan Laman blog.

• Silahkan sobat >> Login atau Masuk ke Blogger.com menggunakan akun sobat.
• Pada Dashboard pilih >> Buat Entri Baru Untuk posting.
• Untuk Laman pilih Menu >> Laman >> Laman Baru.
• Pada Kotak Posting atau Laman, Pilih Mode HTML. Bukan Compose.
• Kemudian masukkan semua kode di atas tadi.
• Jika sudah, Silahkan sobat klik >> Publikasikan dan lihat hasilnya.

 Jika sobat mengikuti cara dan langkah-langkahnya dengan benar, Maka dapat saya pastikan trik dan tips ini berhasil dengan sempurna. Namun jika sobat mengalami kesulitan, Silahkan bertanya pada form komentar yang tersedia.

 Semoga artikel tentang Cara Membuat Daftar Isi Label Tertentu Atau Banyak Label Di Blog, Bisa sangat bermanfaat bagi sobat KUCOPAS semua. Selamat Berkarya...

---

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

---

10.33 | 0 komentar | Read More

Cara Membuat Footer 2 Kolom Di Blog

 Cara Membuat Footer 2 Kolom Di Blog - Footer adalah kolom widget yang biasa berada paling bawah di bagian blog, dan tentunya sobat bisa mengisinya dengan berbagai widget yang sobat inginkan. Kali ini saya akan memberikan tutorial bagaimana caranya membuat dan memasang footer 2 (dua) kolom diblog dengan fungsi bisa langsung tambah gadget atau Add Gadget tanpa harus susah-susah membuat atau menambah kolom lagi. Karena sobat bisa langsung tambah gadget di atas atau di bawah kolom widget yang sobat inginkan.

 Untuk lebih jelasnya sobat bisa melihat contoh gambar screenshot berikut di bawah ini.

 Keterangan dari gambar di atas adalah tampilan yang terlihat pada bagian tata letak blog yang sudah di pasangi footer 2 (dua) kolom. Lihat gambar yang sudah saya kasih lingkaran warna merah. Jadi sangat gampang untuk tambah gadget, Karena sobat hanya tinggal klik tambah gadget atau add gadget saja bila ingin mengisinya dengan widget blog yang sobat inginkan.

 Untuk cara membuat dan memasang footer 2 (dua) kolom di blog, caranya sangat mudah. Silahkan sobat ikuti langkah-langkahnya sebagai berikut:

1. Silahkan sobat >> Login atau Masuk ke blogger.com menggunakan akun sobat.
2. Pilih blog, Lalu pada Dashboard pilih menu Template.
3. Sebelum sobat klik Edit HTML, Ada baiknya sobat Unduh template lengkap, Guna untuk berjaga-jaga jika ada kesalahan saat Edit HTML dan sobat bisa mengembalikan template seperti semula. Caranya klik >> Cadangkan / Pulihkan (Tombol berada di bagian kanan atas)>> Unduh template lengkap. Jika sudah di unduh, silahkan klik tutup atau close.
4. Sekarang kita kebagian Edit HTML. Silahkan sobat klik >> Edit HTML >> Lanjutkan >> Centang "Expand Template Widget".
5. Jika sudah, Silahkan sobat cari kode ]]></b:skin> (Gunakan CTRL + F untuk mempermudah pencarian).
6. Kemudian tambahkan semua kode berikut diatas atau sebelum kode ]]></b:skin>

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

7. Langkah yang selanjutnya, Sobat cari kode berikut di bawah ini. (Gunakan CTRL + F kembali untuk mempercepat pencarian). Cari salah satu kode saja.

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

atau

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/></div>

8. Jika sudah ketemu, Kemudian sobat tambahkan kode berikut dibawah atau sesudah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

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

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

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

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

Catatan:
Jika pada template yang sobat gunakan tidak ada kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode-nya dibawah atau sesudah kode <div id='footer'>


9. Sebelum sobat klik Simpan, Ada baiknya klik dulu Preview atau pratinjau. Jika tidak terjadi eror pada template blog sobat, Langkah yang terakhir silahkan sobat klik Simpan template.

10. Selesai dan lihat hasilnya pada Dashboard Tata letak blog sobat. Jika sudah seperti yang ada pada contoh gambar screenshot diatas, Berarti sobat sudah berhasil Membuat Dan Memasang Footer 2 (Dua) Kolom Di Blog sobat.

 Jika ada pertanyaan mengenai tutorial ini, Sobat jangan sungkan-sungkan untuk bertanya melalui form komentar yang tersedia. Semoga bermanfaat bagi sobat KUCOPAS semuanya, Selamat berkarya.

---

| Source By www.maskolis.com | Supported by http://kuc0pas.blogspot.com |

---

04.13 | 0 komentar | Read More

Cara Menerapkan Snap Shots Pada Blogger

Cara Menerapkan Snap Shots Pada Blogger - Kali ini Tutorial Blogz akan membahas Cara Menerapkan Snap Shots Pada Blogger. Snap Shots dapat digunakan untuk menampilkan isi link sebelum kita meng-klik link tersebut. Jadi, bila kita arahkan kursor ke link, maka akan muncul animasi berupa jendela yang didalamnya berisi tampilan link yang akan dituju.

Cara Menerapkan Snap Shots Pada Blogger : 

1. Kunjungi Situs www.Snap.com
2. Klik Get Starterd >>

3. Klik Continue >>

4. Silahkan masukkan informasi data yang diminta seperti email, alamat blog, password dan centang "I agree to Terms & Conditions Above". Selanjutnya klik Continue >>

5. Kemudian, klik Install Now.

6. Jika muncul kotak dialog peringatan, klik Continue.

7. Selanjutnya, akan muncul halaman baru pada browser anda, klik Add Widget.

8. Selesai.

Sebagai contohnya, jika anda arahkan kursor ke link di blog anda, maka akan tampil jendela berupa animasi yang berisikan tampilan link yang akan dituju, seperti gambar dibawah ini. 

Atau anda juga bisa melihatnya disini >> http://demo-previews.blogspot.com

Semoga bermanfaat..

01.13 | 0 komentar | Read More