Customize Your Favicon Blog

Today, we're pleased to announce that Blogger in Draft users can now add a customized favicon to their blog. Penjelasan singkat tentang cara baru dalam cara memasang Favicon di blog melalui Blogger In Draft. Untuk pengertian favicon sobat pastinya sudah banyak mengerti, seperti pada postingan saya sebelumnya, Cara mengganti/memasang Favicon, pada tread Kumpulan Trik/Hack Blogger, Favicon custom (gambar kecil yang ditampilkan di jendela browser atau tab) dan tentunya ini akan lebih mudah cara pemasangannya, cukup dengan melakukan langkah-langkah berikut:

1. dalam posisi Login di blogger sobat, langsung masuk ke http://draft.blogger.com.
lalu beri ceklis/centang (lihat gambar)


2. klik Design/Rancangan


3. Lalu lik Edit pada bagian Favicon (lihat gambar diatas)
4. Klik Browse dan Pilihlah gambar berekstensi .ico yang sobat punya dari komputer Sobat.
5. Terakhir Klik Save, dan lihat hasilnya.


Tambahan:
Peluncuran awal ini hanya mendukung file ico,. tapi Sobat dapat dengan mudah mengkonversi ke dalam file JPEG, PNG, atau berkas non-ico gambar dengan menggunakan software gambar Sobat sendiri. Ada juga banyak alat konversi online, dan Google Search cepat membawa beberapa pilihan seperti http://www.icoconverter.com/.

Nah, mudah kan, jadi kita tidak perlu repot-repot mengUpload gambar, memaang kode script'nya, cukup dengan langkah diatas, sobat sudah bisa mengganti Favicon Blog Sobat.
Untuk lebih jelasnya silahkan melihat langsung sumbernya di http://bloggerindraft.blogspot.com/

Sekian dari saya semoga bermanfaat, dan tinggalkan komentar bila mengalamai kesulitan. Thanks

Membuat Navigasi Breadcrumb Pada Postingan Blog

Menu Navigasi Breadcrumb ini merupakan salah satu penunjang SEO dalam sebuah blog. Dilihat dari pengertinya yaitu adalah sebaris link tautan internal pada bagian atas postingan atau dibawah halaman situs web yang memudahkan pengunjung untuk kembali ke bagian sebelumnya atau ke halaman dasar dengan cepat.

Saya yakin sudah banyak blogger yang sudah tidak asing dengan Navigasi Breadcrumb ini. Tapi siapa tahu masih ada yang belum tahu, dan juga bisa sebagai bookmark buat saya agar tidak repot2 mencari kesana kemari untuk membuatnya. jadi untuk para master blog lewati saja postingan ini. Hehehe
Untuk lebih jelasnya sobat bisa melihatnya dibagian atas setelah judul posting. atau perhatikan screenshot dibawah ini:

Demo

Berikut langkah-langkah membuatnya:

1. Masuk Rancangan/Layout
2. Pilih Edit HTML
3. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
4. Beri tanda centang "Expand Template Widget"
5. Tekan Ctrl+F (untuk mempermudah pencarian) Cari kode berikut:

]]></b:skin>

6. Copy lalu paste-kan kode dibawah ini tepat diatas kode diatas

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:11px;
line-height: 1.4em;
border-bottom:3px double #666;
}

7.Kemudian carilah kode:

<div class='post hentry uncustomized-post-template'>

8. Setelah ketemu, taruhlah kede berikut tepat diatasnya

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

9. Bila sudah, jangan lupa untuk Save Template.
Sekian, semoga bermanfaat.

Article Information:
Description: Membuat Navigasi Breadcrumb Pada Postingan Blog
Reviewer: Viyan Pradita - Itemreviewed: Membuat Navigasi Breadcrumb Pada Postingan Blog - Rating: 4.5

Cara Membuat Web Hosting Di Google Site

Hmm.. setelah pada beberapa hari kemarin blogger maintenance, yang membuat beberapa artikel dan komentar di blog saya hilang, hohoo... semoga saja hal tersebut tidak terulang kembali. Pada kesempatan kali ini saya berusaha menjawab pertanyaan dari sobat blogger "Imadudin" yang menanyakan "cara mendapatkan web hosting itu gmn bro, aqw bingung".
Karena blog ini juga ditujukan untuk para newbie/pemula seperti saya, jadi buat para master blog lewatin saja. hehehe

Pengertian sederhana tentang Web Hosting
Web Hosting merupakan sebuah rumah atau boleh dikatakan sebagai tempat penyimpanan file-file kita, baik itu berupa file, gambar, ataupun text sekalipun.
Dan yang penting, pasti kita berharap Web Hosting yang free alias gratisan. hohoho
Sekarang sudah tersedia banyak sekali penyedia Web Hosting gratisan, tinggal dipilih saja yang sesuai keinginan dan kebutuhan sobat. tp kali ini yang akan saya bahas yaitu Cara Membuat Web Hosting Di Google Site.

Sobat hanya perlu memiliki akun google, saran saya gunakanlah akun yang digunakan di blogger, ini tujuannya agar soba tidak ribet login dengan dua akun yang berbeda, praktisnya, bila sobat sudah loggin ke blogger, otomatis google site sobat jg sudah ikut aktif.
Berikut cara membuatnya:


1. Kunjungi situs: sites.google.com
2. Loggin menggunakan email dan password sobat, ( screenshot/gambar dibawah, bila sobat dalam keadaan offline di akun email/blogger)


3. Dan screenshot/gambar dibawah, bila sobat dalam keadaan Online di akun email/blogger, dan klik "Buat Situs"


4. Selanjutnya sobat akan langsung diantar ke halaman pembuatan situs, selanjutnya sobat disuruh untuk memilih template, memberi nama situs, memberi nama alamat URL situs, serta mengisi captcha/kode verifikasi pembuatan situs. Tapi berhubung kita hanya ingin membuat web untuk hostingan file saja, jadi gak perlu ribet.
Liahtlah gambar dibawah, dan perhatikan gambar yang di beri kotak warna merah. saya jelaskan berurutan mulai dari paling atas.


5. Pilih template untuk dipakai, silahkan pilih opsi "template kosong"

6. Lanjut untuk memberi nama situs sobat, serta nama alamat URL situs.
Contoh untuk nama situs "webhost-kodeblogger", lalu untuk nama alamat URL situs "webhostkodeblogger" penamaan alamat URL tsb, akan muncul secara otomatis.

7. Selanjutnya isikan capta (kode verifikasi)

8. Lalu klik Buat Situs.


Sipppp, sampai langkah diatas sobat sudah berhasil membuat dan memiliki web hosting sendiri.
Tapi belum selesai sob??
Langkah selanjutnya:

9. Sobat harus membuat laman baru (perhatikan pojok kanan atas) untuk menyimpan file apa saja yang sobat inginkan.

10. lalu silahkan pilih opsi "Lemari Berkas"

11. Dan silahkan beri nama laman sesuai keinginan sobat. Dan jangan lupa pilih opsi "letakkan laman di tingkat atas", dan diikuti dengan mengklik tombol "Buat Laman"

12. Oke halamn baru sudah di buat, selanjutnya tinggal mengUpload berkas, file yang ingin sobat upload. silahkan klik tombol "+Tambahkan Berkas" >> Pilih berkas >> Pilih berkas dari komputer anda >> lalu klik tombol "unggah"/ upload.

Selesai sob... Nah untuk yang belum tahu cara mengambil link dari file yang kita upload ?? caranya sbb:
Saya mabil contoh disini adalah file.js, setelah selesai meng-upload, klik kanan pada file yang sudah kita upload lalu klik "copy link location", hasilnya seperti contoh dibawah:

https://sites.google.com/site/webhostkodeblogger/javascript/smiley.js?attredirects=0&d=1

Untuk memnggunakannya, maka sobat harus menghapus ?attredirects=0&d=1

Sehingga akan menjadi seperti:

https://sites.google.com/site/webhostkodeblogger/javascript/smiley.js

Langkah terakhir tinggal pasangkan file.js tersebut pada kode script, contoh:

<script src='https://sites.google.com/site/webhostkodeblogger/javascript/smiley.js' type='text/javascript'/>

Oke, script diatas siap digunakan di template sobat.
Bila masih ada yang bingung dengan penjelasan saya diatas, mohon tinggalakan komentar. Semoga Bermanfaat.

Membuat Sliding Login/Register Form Panel di Blog

Selamat pagi sob, mumpung masih pagi dan masih ada waktu, pagi hari ini saya akan menepati janji saya kepada sobat @kuliksera, yang tadi malam req bagaimana cara membuat form login/register di dalam sebuah blog. berikut kutipan lewat komentar dari sobat @kuliksera "ow ya nih, sekalian bertanya. jika sobat tau,soalnya keliling2 di google udah sampe kesasar sasar + pusing tujuh keliling lebai deh :-). bikin register untuk blog kita sob,agar pengunjung dapat juga menuliskan pengetahuan mereka di blog kita. karena klo untuk login di blogger kan tidak semuanya yang memiliki akun di blogger"

Login Form yang akan saya bahas hanya Contoh dan tidak dapat digunakan layaknya Login Form seperti di Facebook, Twitter, atau yang lainnya. Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member.
Sebagai contoh sobat bisa melihat pada screenshot dibawah ini:

Sceenshot/Demo

Form tersebut berada di atas header blog/nafbar blog, dengan efek sliding.
Seperti itulah kiranya yang akan saya buat, bila sobat tertarik, langsung saja berikut langkah-langkah membuatnya:

1. Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Lalu carilah kode: </head>
7. Bila sudah ketemu, letakan kode berikut di atas kode </head>

<script src='http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js' type='text/javascript'/><script style='display:none' type='text/javascript'>$(document).ready(function() {

// Expand Panel
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

// Collapse Panel
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

// Switch buttons from &quot;Log In | Register&quot; to  &quot;Close Panel&quot; on click
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});
</script>

8. Setelah itu cari kode: ]]></b:skin> setelah ketemu copy paste-kan kode berikut tepat diAtasnya

/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}

.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}

.tab ul.login li.left {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.right {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
color: #15ADFF;
}

.tab ul.login li a:hover {
color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}

#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}

#panel p {
margin: 5px 0;
padding: 0;
}

#panel a {
text-decoration: none;
color: #15ADFF;
}

#panel a:hover {
color: white;
}

#panel a-lost-pwd {
display: block;
float: left;
}

#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}

#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}

#panel .content .right {
border-right: 1px solid #333;
}

#panel .content form {
margin: 0 0 10px 0;
}

#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}

#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}

#panel .content input:focus.field {
background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}

#panel .content input.bt_login {
width: 74px;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}

9. Lanjut lagi sob, cari lagi kode: </body> kemudian letakan kode dibawah ini tepat diAtasnya

<!-- Login -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<h1>Welcome In Kode Blogger</h1>
<h2>Contoh Sliding Login Dengan JQuery</h2>
<p class='grey'>Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member</p>
<h2>Tutorial Blog</h2>
<p class='grey'>Untuk membuatnya Silahkan : <a href='http://kode-blogger.blogspot.com/2011/05/membuat-sliding-loginregister-form.html' title='Download'>Klik Disini</a></p>
</div>

<div class='left'>
<form action='#' class='clearfix' method='post'>
<h1 class='padlock'>Member Login</h1>
<label class='grey' for='log'>Username:</label>
<input class='field' id='log' name='log' size='23' type='text' value=''/>
<label class='grey' for='pwd'>Password:</label>
<input class='field' id='pwd' name='pwd' size='23' type='password'/>
<label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label>
<div class='clear'/>
<input class='bt_login' name='submit' type='submit' value='Login'/>
<a class='lost-pwd' href='#'>Lost your password?</a>

</form>
</div>
<div class='left right'>
<form action='#' method='post'>
<h1>Not a member yet? Sign Up!</h1>
<label class='grey' for='signup'>Username:</label>
<input class='field' id='signup' name='signup' size='23' type='text' value=''/>
<label class='grey' for='email'>Email:</label>
<input class='field' id='email' name='email' size='23' type='text'/>
<label>A password will be e-mailed to you.</label>
<input class='bt_register' name='submit' type='submit' value='Register'/>
</form>
</div>

</div>
</div>
<!-- /login -->
<!-- The tab on top -->
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Halo Semuanya</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Masuk | Daftar</a>
<a class='close' href='#' id='close' style='display: none;'>Tutup Panel</a>
</li>

<li class='right'/>
</ul>
</div>
<!-- / top -->
</div>
<!-- panel -->

Perhatikan kode diatas yang diberi warna Kuning dan Hijau, gantilah tulisan tersebut sesuai keinginan sobat.

10. Seepp, selesai sob, jangan lupa klik Simpan/Save Template, dan lihat hasilnya.

Selamat mencoba, dan semoga bermanfaat. Salam Blogging... \m/
Sumber: http://www.maskolis.co.cc/

Article Information:
Description: Membuat Sliding Login/Register Form Panel di Blog
Reviewer: Viyan Pradita - Itemreviewed: Cara Membuat Sliding Login/Register Form Panel di Blogspot - Rating: 4.5

Membuat Teks Ucapan Terimakasih Untuk Komentator di Form Komentar

Sebenernya udah lama mau posting tentang cara ini, dan kebetulan kemarin ada temen nanya tentang cara membuat Teks Ucapan Terimakasih Untuk Komentator di Form Komentar.
Ne pertanyaan dari sobat Imaduddin "oya dan memberikan yang kayak:
Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... by Viyan Pradita

muncul setelah oran gposting tuh gmna y,,,,"
Langsung saja ke topik masalah, Membuat Teks Ucapan Terimakasih Untuk Komentator di Form Komentar, menurut saya sangatlah menarik dan bisa dibilang sangat kreatif. selain itu juga berfungsi untuk menggantikan komentar kita selaku admin blog/website, apabila kita tidak sempat untuk membalas komentar-komentar yang ada.
Biar makin jelas dengan penjelasan saya diatas, silahkan lihat screenshot dibawah ini:

Screenshot/Demo

Nah, perhatikan tulisan yang di blok warna merah pada gambar diatas, tiulah yang akan saya bahas, bila berkenan, berikut cara membuatnya:

1. Seperti biasa, Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Lalu Carilah kode: <p><data:comment.body/></p> (bisanya akan terdapat 2kode, pilih saja kode yang kedua)
Bila bingung, berickut contoh kode lengkapnya:

<p><data:comment.body/></p>
</b:if>
</dd>

7. Kemudian taruhlah kode berikut dibawah kode diatas

<span style='color: #FFFFFF;font-size:85%; float: left;'><span style='font-style: italic;'>Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini...</span></span><b><span style='color: #FFFFFF;font-size:90%;'><b> By Viyan Pradita </b></span></b>

8. Dan hasilnya jadi seperti ini (ini contoh pada template blog saya)

<p><data:comment.body/></p>
<span style='color: #FFFFFF;font-size:80%; float: left;'><span style='font-style: italic;'>Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini...</span></span><b><span style='color: #FFFFFF;font-size:80%;'><b> by Viyan Pradita </b></span></b>
   </b:if>
 </dd>

9. Nah sebelum di Save. sekarang tugas sobat tinggal edit-edit kode diatas

• #FFFFFF; font-size:85%; : huruf yang becetak warna merah itu adalah kode warna dari tulisan "Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini... " gantilah sesuai selera sobat,. dan untuk yang berwarna biru itu adalah ukuran font, ganti jg sesuai keinginan sobat. dan untuk #000000; font-size:90%; : sama juga dengan yang td, cuman ini untuk mengatur warna dan ukuran font pada ulisan "By Viyan Pradita"
  
• Nah Untuk kata yang di beri warna Hijau, "By Viyan Pradita" gantilah dengan nama admin di blog sobat. bisa jg sobat beri variasi tambahan sendiri.

10. Simpan dan lihat hasilnya.

Saya kira penjelasan saya diatas mengenai Membuat Teks Ucapan Terimakasih Untuk Komentator di Form Komentar, sudah sangatlah jelas, dan bila mengalami masalah, bisa langsung bertanya disini. dengan senang hati akan saya bantu.
Semoga Bermanfaat, Terimakasih.


Tambahan:
Karena tidak semua template itu sama, dan karena ada sedikit masukan dan problem dalam pemasangan kode, yang ucapan terimakasih itu muncul jg pada komentar admin, jadi saya tambahkan lagi caranya disini.

Berikut contoh kode dari template yang menurut saya beda/bermasalah:

<data:comment.author/>
      </b:if>
      <data:commentPostedByMsg/>
    </dt>
    <dd class='comment-body'>
      <b:if cond='data:comment.isDeleted'>
        <span class='deleted-comment'><data:comment.body/></span>
      <b:else/>
        <p><data:comment.body/></p>
      </b:if>
    </dd>

Perhatikan kode diatas, didalamnya hanya ada 1-buah kode:
<p><data:comment.body/></p>

Langsung saja, rubahlah semua kode diatas dengan kode dibawah ini:

             <data:comment.author/>
       </b:if>
       <data:commentPostedByMsg/>
     </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
     <dd class='comment-body'>
       <b:if cond='data:comment.isDeleted'>
         <span class='deleted-comment'><data:comment.body/></span>
       <b:else/>
         <p><data:comment.body/></p>
<span style='color: #fff;font-size:80%; float: left;'><span style='font-style: italic;'>Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini...</span></span><b><span style='color: #fff;font-size:80%;'><b> by Viyan Pradita </b></span></b>
       </b:if>
     </dd>
</b:if>

Nahh, sekarang sobat tinggal edit-edit sedikit untuk kode ditas yang diberi warna biru, itu kode untuk ucapan terimakasihnya, ubah juga sesuai keinginan sobat.
Semoga bisa membantu. bila masih mengalami masalah, jangan segan-segan untuk bertanya dengan meninggalkan komentar disini.
Terimakasih.

Cara Membuat Syntax Highlighter di Blog

Apa itu Syntax Highlighter, dan apa fungsinya??
Syntax Highlighter merupakan suatu fitur dari text editor, khususnya editor source code, html, php atau bahasa pemrograman apapun sehingga berbeda dengan tulisan lain di sekitarnya. Fungsinya untuk memudahkan programmer dalam membaca dan menganalisa source code tersebut.
Nah Buat Sobat yang sering posting source code pada Web/Blog, tentu fitur Syntax Highlighter akan sangat membantu agar source code yang kita posting mudah dibedakan sebagai source code dan tentunya lebih menarik bagi pengunjung.
Syntax Highlighter sebenarnya tidak jauh beda dengan Blockquote, hanya saja Syntax Highlighter ini tampilannya membedakan dari tulisan yang lainnya, namuan Syntax Highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh jQuery.

Oia ada juga fasilitas dari Syntax Highlighter ini, antara lain:

1. Adanya fasilitas print untuk kode.
2. Adanya fasilitas View Plain yaitu membuka barisan kode dalam popup windows.
3. Adanya fasilitas Help untuk melihat bantuan.
   

Untuk Memperjelas Lihatlah pada sceenshot dibawah ini:

screenshot

Bila Sobat berminat, berikut cara membuatnya:

1. Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Carilah kode </head>
7. Kalo sudah ketemu, copy paste kode berikut di bawah kode: </head>

<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js'  type='text/javascript'></script>

8. Kemudian cari lagi kode ]]></b:skin>
9. Simpan Code CSS berikut diatas kode ]]></b:skin>

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}

.dp-highlighter .bar
{
padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}

.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}

.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}

.dp-highlighter .columns div
{
padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}

.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
margin: 0px;
}

.dp-highlighter.collapsed ol li
{
display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
border: none;
}

.dp-highlighter.printing .tools
{
display: none !important;
}

.dp-highlighter.printing li
{
display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
border-left: 0;
}

.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}

.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

10. Langkah selanjutnya cari kode </body>
11. Simpanlah kode berikut diatas kode </body>

<!-- Add-in Script for syntax highlighting  -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

12. Simpan Template.


Penting!!
Untuk pemasangan script Kode JS gunakan kode berikut:

<pre name="code" class="JScript">
LETAKAN KODE SCRIPT YANG AKAN DIPASANG DISINI
</pre>

Untuk pemasangan kode CSS gunakan kode berikut :

<pre name="code" class="Css">
LETAKAN KODE CSS YANG AKAN DIPASANG DISINI
</pre>

Selesai sudah cara membuat Syntax Highlighter di Blog, Selamat mencoba, dan semoga bermanfaat.

Menu Horizontal Multi Level Menggunakan jQuery

Melanjutkan postingan saya yaitu masih seputar Cara Membuat Menu Horizontal Di Blog, nah pada tread kali ini saya akan membahas bagaimana membuat menu horizontal multi level dengan mmenggunakan JQuery dan PHP.
Penjelasannya gampangnya seperti ini, Di dalam sebuah website, seringkali kita menemukan/melihat penggunaan menu bertingkat seperti pada gambar dibawah. Menu yang bertingkat tersebut sebenarnya adalah sebuah struktur pohon/tree di mana suatu menu bisa memiliki anak (submenu), dan submenu tersebut juga bisa memiliki anak lagi dan seterusnya sampai level tak terbatas.

Screenshot

JIka berminat, silahkan ikuti langkah-langkah berikut:

1. Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Carilah kode: </head>
7. Kemudian copy paste kode berikut di bawah kode: </head>

<!--[if lte IE 7]>

<style type="text/css">

html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/

</style>

<![endif]-->

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

<script src='https://sites.google.com/site/kodeblogger/javascript/jqueryslidemenu.js' type='text/javascript'/>

7. Lalu masukkan CSS dibawah ini diatas code: ]]></b:skin>

.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}

8. Kode CSS diatas silahkan edit dan sesuaikan dengan blog sobat.
9. Kemudian cari kode berikut:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Kode Blogger (Header)' type='Header'>
<b:includable id='title'>
</b:section>

</div>

10. Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template
11. Kemudian taruhlah kode berikut tepat dibawah kode diatas:

<div id='footheader'>

<b:section class='footheader' id='footheader' preferred='yes'>

</b:section>

</div> 

12. Simpan Template dan lanjut lagi sob, masih ada tahapan berikutnya neh ??
13. Sekarang kembali ke bagian Menu "Page Elements"
14. Setelah sobat selesai dengan cara diatas, pasti di bagian Page element sudah terdapat menu kolom baru, lihat screenshot dibawah ini:

Screenshot

15. Nah terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik saja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code dibawah ini:

<div id="myslidemenu" class="jqueryslidemenu">

<ul>

<li><a href="/">Home</a></li>

<li><a href="http://kode-blogger.blogspot.com">Tutorial Blog</a></li>

<li><a href="#">Kategori</a>

<ul>

<li><a href="#">Sub Kategori 1</a></li>

<li><a href="#">Sub Kategori 2</a></li>

</ul>

</li>

<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>

<ul>

<li><a href="#">Sub Item 2.1</a></li>

<li><a href="#">Folder 2.1</a>

<ul>

<li><a href="#">Sub Item 2.1.1</a></li>

<li><a href="#">Sub Item 2.1.2</a></li>

<li><a href="#">Folder 3.1.1</a>

<ul>

<li><a href="#">Sub Item 3.1.1.1</a></li>

<li><a href="#">Sub Item 3.1.1.2</a></li>

</ul>

</li>

<li><a href="#">Sub Item 2.1.4</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="http://kode-blogger.blogspot.com">Tutorial Blog</a></li>

</ul>

<br style="clear: left" />

</div>

16. Ubahlah Alamat Link dan Nama dari masing-masing sub menu pada kode diatasa, sesuai dengan blog sobat
17. Sippp... Simpan/Save, dan lihatlah hasilnya.

Sekian dari saya, semoga bisa bermanfaat.

Cara Mudah Membuat Menu Horizontal Di Blog

Postingan saya kali ini akan membahas tentang bagaimana membuat menu horizontal di blog. menu horizontal sangatlah penting dalam sebuah blog, jadi wajib kiranya menu blog ini ada di blog kita, karena sangat berguna untuk memudahkan pengunjung membuka halaman-halaman tertentu. Biasanya pada template standart blog ada yang belum terpasang menu horizontal, Buat Blogger yang pada template-nya belum tersedia menu horizontal, sobat bisa menambahkan dengan cara berikut ini (ini cara simple-nya)

Screenshot

Langkah-langkahnya:

• Login ke akun blogger sobat
• Masuk Rancangan/Layout
• Edit HTML
• Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
• Beri tanda centang "Expand Template Widget"
• Carilah Kode Dibawah ini:

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

• Jika sudah ketemu, silahkan copy paste kode berikut tepat dibawah kode-kode pada langkah diatas

<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul>

• Lalu Simpan Template.
• Lanjut lagi sob... kalo dilihat pasti menunya bukan horisontal tapi vertikal, hehee.. Nah untuk itu kita perlu menambahkan kode css, agar menu menjadi horisontal dan lebih menarik tentunya.
• Masih pada bagian Edit HTML, dan carilah kode: ]]></b:skin>
• Lalu copy paste kode dibawah ini tepat diatas kode: ]]></b:skin>

/*CSS untuk menu horizontal*/

.menuhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.menuhor ul li{
list-style: none;
display: inline;
}

.menuhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #33FFCC;
border: 2px solid #33FFCC;
}

.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}

Keterangan:
.menuhor ul merupakan atribut class yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
.menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.

• Setelah itu sobat jg perlu merubah pada kode berikut (ini kode pada langkah diatas):

<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>About Me</a></li>
<li><a href='URL 3'>Tutorial Website</a></li>
</ul>

Sobat Ubah Menjadi:

<div class="menuhor">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>Tutorial Website</a></li>
<li><a href='URL 3'>About Me</a></li>
</ul>
</div>

Keterangan:
Silahkan ganti URL 1 dengan URL halaman yang akan dituju jika menu "Home" diklik. begitu jg seterusnya.

• Simpan template dan lihat hasilnya.

Selamat mencoba dan semoga bermanfaat.

Membuat Footer 3 Kolom Dengan Background

Met pagi sobat blogger, pagi ini saya akan membahas lagi pastinya tentang blogging, yaitu cara membuat/menambahkan 3 kolom di halaman foter dengan background. pastinya membuat lebih bayak ruang di blog kita, dan lagi dengan adanya penambahan halaman/kolom di foter ini, kita bisa menaruh widget yg lumayan berat loadingnya ke halaman foter tersebut, lumayan lho buat memperkecil berat loading blog... yang pasti di bandingkan ditaruh di sidebar dengan di halaman foter itu berbeda. [itu menurut pengalaman saya]... selebihnya sobat bisa buktikan sendiri.
Berikut contoh screenshotnya:

Screenshot

Berikut cara membuatnya:

1. Login ke akun blogger sobat
2. Masuk ke Rancangan/Design
3. Klik Edit HTML
4. Beri centang "Expand Widget Templates"
5. Jangan lupa, Back Up dulu template sobat! Klik "Download Full Template"
6. Lalu cari kode berikut: ]]></b:skin>
7. Letakan kode berikut tepat diatas kode ]]></b:skin>

#bottom{background:#444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHmDryUV9jejccBu0GjyXcP9p2db3z2ZgUNzbNrGOwEWEeBB1Z6_nFReG5R9M-Ism2JcZAnnZYdH5NGodEYaTgsG5_C5vRv7AW14Ngw9lCDvE84G-FPlUrqb5850t0KhsBQ3xD1s79yD2h/s1600/buttommenu-c.png) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff}
#bottom a:link{color:#fff; text-decoration:none}
#bottom a:hover{color:#C0C0C0; text-decoration:underline}
#bottom a:visited{color:#C0C0C0; text-decoration:none}
#bottom h2{padding:15px 0 0 10px; margin:0 0 10px 0; font-weight:bold; line-height:1.4em; text-transform:uppercase; border-bottom:0px dotted #fff}
#bottom ul{padding:0; margin:0; color:#F93}
#bottom ul li{list-style-type:square; border-bottom:0px solid #626200; padding-left:5px; margin:3px 0 0 22px}
#left-bottom{width:280px; float:left; padding-left:22px}
#center-bottom{width:280px; float:left; padding-left:0px}
#right-bottom{width:280px; float:left; padding:0 5px 0 50px}
#left-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#center-bottom2{width:760px; font-size:90%; padding-top:16px; float:left; padding-left:30px}
#right-bottom2{width:30px; padding-top:16px; float:left; padding-left:20px}
#category{width:860px; float:left; padding:0px 0 20px 20px}
#upper-footer{width:860px; margin:0 auto; padding:0px; clear:both; line-height:1.3em; letter-spacing:.0em; font-size:95%; border-top:1px solid #c0c0c0; padding-top:10px}

Penting!!
Perhatikan text yg saya beri warna pada kode diatas (harap disesuaikan semuanya dengan template sobat)
Warna merah: itu adalah link background, bisa sobat ganti sesuai kemauan sobat.
Warna hijau: itu adalah lebar dari template sobat, setelah sobat memasangnya bila masih kurang rapi, bisa sobat utak-utik sendiri lebarnya sampai seperti yang sobat harapkan.
Warna orange: itu adalah keterangan dari masing2 kolom. biar jelas saya beri warna.
Belum selesai sobb... lanjut...


8. Carilah kode: <!-- end content-wrapper --> atau </div> <!-- end content-wrapper-->
9. Letakan kode berikut diatas kode: </div> <!-- end content-wrapper-->

<div id='bottom'>

<b:section class='category' id='category'/>

<b:section class='left-bottom' id='left-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='center-bottom' id='center-bottom' preferred='yes' showaddelement='yes'/>
<b:section class='right-bottom' id='right-bottom' preferred='yes' showaddelement='yes'/>

</div>

10. Simpan template, dan lihat hasilnya.

Sippp... selamat mencoba dan semoga bermanfaat... Salam blogging \m/

Cara Menambah Dua [2] Kolom Dibawah Posting Blog

Next topik sob, kali ini saya akan membahas bagaimana cara membuat dua (2) kolom di bawah posting blog, lihat contoh gambar dibawah sob, kiranya seperti itulah yang kali ini akan saya buat.
Sebelum kita praktek, saya jelaskan terlebih dahulu apa kiranya fungsi dari kotak box dibawah posting itu. pertama, dengan kotak box tersebut, kita bisa menambahkan elemen-elemen penting agar pengunjung blog bisa lebih mudah menemukan apa yang mereka cari, bisa juga kita menaruh artikel-artikel penting didalamnya. tapi tentunya semua itu tergantung sama kreatifitas kita masing-masing. intinya mempermudah.

Oke, seperti yang sobat lihat pada gambar dibawah, kolom kiri berisi "langganan RSS FEED" sedangkan kotak ke dua berisi "artikel terkait/related post.

Demo

Cara membuatnya sebagai berikut:

• Login ke akun blogger sobat
• Masuk Rancangan/Layout
• Edit HTML
• Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
• Beri tanda centang "Expand Template Widget"
• Carilah Kode: ]]></b:skin>
• Lalu taruh kode dibawah ini, di atas kode: ]]></b:skin>

#related{background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqTxa8skeoatnQVTHzxHHpbq4_vU96LRVT4pXerDaAkV8Jk2oI-vbS8_CRZmODshW0fBYGsubIDQYmWRl-0s__5O_PEBYvpizuqtLoPk3S3EeUo7e8IH4VmEP5gdWdTXMfLV-rEcx5f-w/) 45% 0 repeat-y;border:1px solid #ddd;color:#000;margin:0 0 10px;padding:15px}
#related .related-posts{font-weight:400;width:53%;float:right}
#related .related-posts p{margin:0}
#related .related-posts h3,#related .related-posts h2,#related .related-posts h1{font-size:12pt;letter-spacing:0;margin:0}
#related .related-posts ol{font-weight:400;margin:2px 0 0}
#related .subscribe{width:43%;float:left;color:#000}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh95o3C-CNZS8lxzYmRb0xcB8-ZwTePxCEHD84oOp6_gvU6AGoW08v56RjhZCksSVnyFs14-l9cqC0k2DQdpHHTUEp_qNlSBTp2-uoJx6y0OIsMKADsYZhDEKsZcUQ7gwRodTIlJEs2BfE/) 0 50% no-repeat;vertical-align:middle}
#related .subscribe form{margin:0;padding:0}
.clearfix:after{content:".";display:block;
height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

• Kemudian cari kode beririkut:

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

• Letakkan kode di bawah ini diantara kode: <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> dan kode: </b:if>
  

<div class='clearfix' id='related'>
<div class='subscribe'>
<p class='feed'>
<a href='http://disini letakkan Link Feed Sobat/feeds/posts/default'>Berlangganan via RSS Feed</a></p><p class='intro'>disini letakkan kode Form Berlangganan Sobat</p></div>
<div class='related-posts'>disini letakan kode Related Post Sobat</div></div>

• Perhatikan text berwarna biru, gantilah dengan alamat feed sobat, dan untuk text warna merah ganti dengan kode script form berlangganan sobat, dan untuk warna hijau, ganti dengan kode script related post sobat. Buat tambahan, kode di atas di template saya, saya taruh di bawah kode:

<div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

Penting!!
Karena setiap template mempunyai kode script yang berbeda-beda, Bila sobat mendapat kesulitan menaruh kode di atas, sobat bisa tinggalkan komentar disini, sebisa mungkin insya4JJL, saya akan bantu.
Cukup sekian dari saya, semoga bermanfaat.

Membuat Blockquote Keren Di Blog

Artikel yang saya cari-cari dari dulu, yaitu blockquot yang tampilannya cantik dan menarik dilihat, saya kira itu bukan blockquote melainkan text area yang diberi background, tp ternyata saya salah... hehee
Nah, karna itulah kali ini saya akan bahas cara membuat blockquote.
Seperti yang sudah kita tahu Pada blogger sendiri sudah ada fitur Blockquote , tetapi setiap tampilannya berbeda tergantung kode CSS yang ada pada tempalte blog Sobat.
Bagi Sobat yang ingin membuat tampilan layaknya punya saya, silahkan ikuti langkah-langkah berikut :

Gambar

Contoh tampilannya seperti di bawah ini :

Contoh Blockquote Kode-Blogger

Cara Membuatnya Sebagai berikut :

• Login ke akun Blogger Sobat
• Masuk Tata Letak
• Edit HTML
• Beri centang pada "Expand template widget"
• BackUp template sobat dulu, dengan cara klik "download template lengkap"
• Cari kode Berikut : .post blockquote {
  
• Berilah imbuhan, sehingga kodenya jadi seperti berikut :

.post blockquote {
background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }

.post blockquote:hover {
background:#FFFFFF url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0
}

• Simpan Template.

Keterangan :
Cara menggunakannya, waktu buat postingan baru cukup klik gambar "blockquote" yg sudah ada di form posting blogger.
Semoga bermanfaat.

Cara Mudah Menambah Emoticon Pada Komentar Blogspot

Langsung saja ke topik, kesempatan kali ini saya akan menjawab dari pertanyaan Sobat blogger kita @Zhanas45, "mass mao nanya nich kalo membuat emoticon di bawah kotak komentar tuch gimana.." daripada bingung jelasinnya, mending jg langsung bikin tutorialnya. hehee....
Nah kali ini saya akan meberi tutorialnya, yaitu Cara Mudah Menambah Emoticon Pada Komentar Blogspot.

Gambar

Berikut Langkah-langkahnya :

• Login ke akun blogger Sobat
• Masuk tata Letak
• Edit HTML
• BackUp dulu templatenya, dengan cara klik "download template lengkap"
• Cari kode berikut: </body>
• Letakan kode css berikut, dan taruh di atas kode: </body>

<script src='https://sites.google.com/site/kodeblogger/javascript/smiley.js' type='text/javascript'/>

• Selanjutnya cari kode berikut, Lengkapnya perhatikan kode sibawah ini, (pehatikan kode berwarna merah) :

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

• Kalau sudah ketemu, lalu copy pastekan kode berikut, tepat dibawah kode: <p class='comment-footer'>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b>

• Simpan Template, dan lihat hasilnya.

Selamat mencoba, sukses slalu :)


Tambahan :
Karna gak bisa lewat komentar, jadi saya edit lagi postingannya.
@Buat sobat2 yang emoticon gak muncul,

• Coba cari kode dibawah ini :

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>

• Kalo sudah ketemu ,taruh kode Smile'na di ATAS kode: <b:include data='post' name='comment-form'/>
• Dan taruh java script berikut, di ATAS kode: </body>

<script src='https://sites.google.com/site/kodeblogger/javascript/smiley.js' type='text/javascript'/>

• Simpan template, dan lihat hasilnya.

Saya sudah coba di blog ini, dan sukses
Selamat mencoba.

Cara membuat Tag Cloud Dengan Background Effect

Sedikit Penjelasan tentang apa itu Tag Cloud, dan apa fungsinya.
Tag Cloud merupakan sebuah box yang berfungsi sebagai wadah untuk sekelompok link dalam sebuah web.
Fungsi dari tag could kurang lebih sebagai wadah beberapa link dari posting yang telah diterbitkan. Model penulisan setiap link judul posting pada tagcloud di buat dalam berbagai variasi bentuk, ukuran dan gaya. lebih jelasnya liaht gambar dibawah ini.

Gambar

Berikut cara membuat Tag Cloud menggunakan efek background :

1. Login ke akun blogger sobat
2. Masuk Tata Letak
3. Edit HTML dan ceklist/centang "Expand Template Widget"
4. Biasakan sebelum sobat mengedit template, backUp dulu templatenya, dengan cara klik "download template lengkap"
5. Carikode berikut : ]]></b:skin>
6. Letakan kode css berikut dan taruh di atas kode ]]></b:skin>

.tagcloud {
width:300px;
font-family:Times;
padding:15px 8px;
border:solid 1px #eee;
background:#fff;
}
.tcloud {
padding:3px 6px;
text-decoration:none;
}
.tcloud:link {
color:#003EBA;
}
.tcloud:visited {
color:#ff900;
}
.tcloud:hover {
color:#ffffff;
background:#003EBA;
}
.tcloud:active {
color:#ffffff;
background:#5D7CBA;
}

7. Simpan Template.

8. Kemudian masuk ke Elemen Halaman, Tambah gadget, pilih HTML javascript, dan pastekan kode berikut :

<div class="tagcloud">
<a style="font-size:10px" class="tcloud" href="Link-1" title="Title Link-1">Nama Link-1</a>
<a style="font-size:16px" class="tcloud" href="Link-2" title="Title Link-2">Nama Link-2</a>
<a style="font-size:18px" class="tcloud" href="Link-3" title="Title Link-3">Nama Link-3</a>
<a style="font-size:14px" class="tcloud" href="Link-4" title="Title Link-4">Nama Link-4</a>
<a style="font-size:27px" class="tcloud" href="Link-5" title="Title Link-5">Nama Link-5</a>
<a style="font-size:22px" class="tcloud" href="Link-6" title="Title Link-6">Nama Link-6</a>
<a style="font-size:14px" class="tcloud" href="Link-7" title="Title Link-7">Nama Link-7</a>
<a style="font-size:18px" class="tcloud" href="Link-8" title="Title Link-8">Nama Link-8</a>
<a style="font-size:10px" class="tcloud" href="Link-9" title="Title Link-9">Nama Link-9</a>
<a style="font-size:14px" class="tcloud" href="Link-10" title="Title Link-10">Nama Link-10</a>
</div>

9. Edit dan simpan.


Keterangan :
1. Link-1 s/d Link-10 : bisa diperbanyak disesuaikan dengan dengan jumlah link yang akan ditampilkan.
2. Link-1 s/d Link-10 : link posting yang telah diterbitkan dengan URL seperti misalnya :
http://..../....../judul posting.html
3. Nama Link-1 s/d Link-10 = Judul Posting.
4. Title Link : berisikan penjelasan singkat Nama Link.

Semoga Bermanfaat.

Cara Mudah Menambah No.Urut Komentar Di Blogspot

Tampilan Komentar akan lebih menarik bila kita kasih nomer urut pd setiap komentar, dan pastinya komentar-komentar akan terlihat lebih rapi dan dengan mudah kita bisa tahu berapa komentar yg sudah ada. mungkin itu fungsi dari judul diatas.
Bila sobat tertarik untuk membuatnya dan menaruh di blog sobat, silahkan ikuti beberapa cara dibawah ini.

Gambar

Berikut langkah-langkahnya :


1. Login ke Blogger Sobat

2. Pilih Tata Letak

3. Edit HTML dan ceklist/centang "Expand Template Widget"

4. Sebelum terlalu jauh, biasakan membackUp template sobat dulu, dengan cara klik "Download Template Lengkap"

5. Carilah kode berikut : <dl id='comments-block'> dan ternyata di template saya gak ada kode tersebut, jadi kalo di template sobat jg gak ada cari dengan kode berikut : <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

6. Kalu sudah ketemu kodenya, selanjutnya sobat simak baik-baik kode dibawah ini :

Cara 1. Karena masing-masing template pasti berbeda saya jg kasih contoh pada template saya sendiri :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<dt class='comment-author' expr:id='data:comment.anchorName' style='clear: both;'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='external'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='numberingcomments' style='float: right; font-size: 18px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

Cara 2. Nah ini alternatif kode CSS pada templates blog :

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<dt style='clear: both;' class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='numberingcomments' style='float: right; font-size: 18px;'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

<dd class='comment-body'>

7. Selanjutnya, sobat hanya perlu menambah kan kode yang di beri warna merah.
Oia di atas ada dua (2) cara, karena saya kode dimasing-masing template kita pastilah berbeda, jadi dari dua cara diatas mana kiranya yg cocok dengan template sobat.

8. Untuk merubah besar kecilnya No. komentar sobat cukup mengganti pada kode berikut : font-size: 18px;

9. Simpan Template, dan lihat hasilnya.


Kiranya cukup sekian dari saya, selamat mencoba dan semoga berhasil.
Sumber : http://anggasona-anotherbestblog.blogspot.com

Cara Membuat Modus Hemat Energi (Stand By) Di Blog

Saya kira cuma listrik yang bisa hemat energi, ternyata di blog jg ada istilah hemat energi, hahaa... entah apa pengertian rincinya tentang hemat energi ini, tapi menurut saya ini seperti mode stand by gitu. kalau sobat masih bingung coba aja open new tab blog saya ini dan biarkan kira-kira 1menit, dan lihat kembali tab yang td di buka, contohnya seperti itu. bila sobat berminat silahkan ikuti langkah-langkah berikut ini.

Gambar

Langkah-langkahnya :

1. Login ke akun blogger Sobat
2. Pilih Rancangan
3. Klik Edit HTML, dan centang pada kotak "Expand Template Widget"
4. Carilah kode </head>
5. Copy pastekan kode di bawah ini tepat di atas kode </head>

<script language="javascript" type="text/javascript" src="https://sites.google.com/site/kodeblogger/javascript/energy.js?lang=id"> </script>

6. Simpan Template.


Untuk melihat hasilnya sobat cukup membiarkan halaman blog sobat selama kurang lebih 1menit, setelah itu lihat kembali blog sobat. semoga bermanfaat.

Cara Pasang Tombol Tweet Di Setiap Postingan Blog

Yang akan saya bahas malam ini yaitu cara membuat widget TWEET di setiap postingan blog. apa keuntungan memasang widget ini ??
Dengan adanya widget tweet ini, kita bisa langsung mempublishkan postingan blog ke twitter. Pengunjung juga bisa melakukan retweet jika postingan itu dianggap bagus bagi mereka.
Dan Tentu saja Sob... akan sangat bermanfaat untuk meningkatkan visitor atau traffic blog kita. kalo sobat tertarik, langsung saja ikuti langkah-langkah berikut.

Gambar

Langkah-langkahnya :

1. Login ke blogger sobat

2. Klik Tata Letak

3. Edit HTML dan jangan lupa centang "expand widget template"

4. Carilah Kode Ini : <data:post.body/>

5. Selanjutnya copy dan paste code dibawah ini persis sebelum kode diatas

<div style='float:right; padding:10px 0 0 5px'><script type='text/javascript'>tweetmeme_url = &#39;<data:post.url/>&#39;;tweetmeme_service = &#39;bit.ly&#39;;</script><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>

6. Simpan Template, dan lihat hasilnya.


Tips : Bila sobat mengalami error biasanya terjadi dalam penaruhan script yang salah, kalo itu terjadi coba sobat perhatikan lagi kode berikut <data:post.body/> apabila ada dua kode yang sama, taruhlah script diatas pada kode <data:post.body/> yang kedua/terakhir.

Membuat Text Area Yang Keren

Postingan saya sebelumnya pernah membahas tentang cara membuat text area, untuk pengertian text area sendiri, pasti sobat blogger sudah pada tahu, sedikit ulasan text area kurang lebih adalah kotak aktif yang dapat digunakan untuk menempatkan teks atau kode atau script, untuk memudahkan dalam melakukan copy-paste.
Nah kali ini saya akan membahas kemabali cara membuat text area dengan berbagai macam dan bentuk yang lebih menarik tentunya, mungkin sobat akan tertarik.

Gambar

di bawah ini ada beberapa macam text area yang usudah di edit :


<textarea name="code" rows="2" cols="50" style="background: #EFF5FB; color: #000; border: 1px solid #ccc; border-left: 20px solid #0174DF; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;"> ISI TEKS AREA SOBAT DISINI</textarea>


<textarea name="code" rows="3" cols="42" style="background: #000; color: #fff; border: 2px inset #ccc; line-height: 1.5em; padding: 0 7px; -moz-border-radius: 5px;"> ISI TEKS AREA SOBAT DISINI </textarea>


<textarea name="code" rows="2" cols="40" style="background:#E0ECF8; color:#FF0000; border-bottom: 4px solid #FE2E2E; border-right: 4px solid #01DF01; border-top: 4px solid #01DF01; border-left: 4px solid #FE2E2E; line-height:1.5em; padding:5px; -moz-border-radius:10px;"> ISI TEXT/KODE </textarea>


<textarea name="code" rows="2" cols="42" style="background: #F8ECE0; color: #848484; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;"> ISI TEKS AREA SOBAT DISINI </textarea>


<textarea name="code" rows="2" cols="42" style="background:#A9F5A9; color:#295F00; border:2px #295F00 dashed; line-height:1.5em; padding:5px;"> ISI TEKS AREA SOBAT DISINI </textarea>


<textarea name="code" rows="2" cols="42" style="background: #FAAC58; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;"> ISI TEKS AREA SOBAT DISINI </textarea>


<textarea name="code" rows="2" cols="42" style="background:#AC58FA; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;"> ISI TEKS AREA SOBA DISINI </textarea>


Nah text area di atas merupakan sebagian yang telah di edit dari script aslinya, menarik bukan ?? silahkan edit menurut kesukaan sobat masing-masing.
Cukup sekian dari saya, semoga bermanfaat.