Membuat Daftar Isi Otomatis keren Pada Blog Dengan JQuery

Pengen punya daftar isi blog yang keren ?, Pastinya maudong...!. Kali ini Dapur Tutorial Blogspot Akan Shere lagi tetang cata Memasang Daftar Isi Otomatis di Halaman Blog sedikit berbeda dengan Daftar Isi Blog Otomatis Yang sebelumnya, Daftar Isi Blog Otomatis kali ini sangat keren Seperti ini

Demonya bisa anda cek di daftar ini blog ini

Sebelum masuk langkah lankahnya kita tinjau sekilas Manfaat daftar isi pada blog. Daftar ini pada blog bukan hanya sekedar hiyasan saja tetapi masih memiliki manfaat lain untuk orang yang mengunjungi blog anda ataupun untuk SEO Blog. Bagi orang yang mengunjungi halaman blog anda akan diberikan kemudahan untuk mencari artikel yang mereka butuhkan dengan demikian berpengaruh pada SEO blog anda sebagai sarana Untuk meningkatkan Page View blog anda.

Yup's langsung saja ke langkah-langkahnya :

Lankah 1  : Obtimasi Kode CSS

1. Tetap seperti biasa, Silahkan Masuk Keakun Blog anda
2.  Pilih Template





3. Klik Tombol Edit HTML





4. Klik Tombol Next/Lanjutkan





5. Cari Kode ]]></b:skin> (Gunakan tombol ctrl + f untuk memudahkan pencarian kode)





6. Copy kode berikut dan letakan di Atas kode ]]></b:skin>

#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC8ZKvLesb_IU2fjRGFh85GCFNlWeQh_WVFWhpV-Ac9G9siYerQMpXoFAcW0Zt9cB_S4D8lWfs7QOQhSjUycGKSrZ38FmHKOQCHV5NrM6MEJhmRwudRpGbWzqyZHqhyphenhyphenRe85lCm-2zxuMk/s320/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.dafis-label{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLtnLBqc2-vhxbDy79YXPFF9ywAuhRVcNdI443Q01zTmNdQQGuAThCbnNdOn032Px08J0BqHLqDyVGtAH__ClvWE8sB05rPu1Np6QBpp_CeRWy6XSq9H3eO1lAsoxSFHYXDOiCwrSe8RM/s1600/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
font-weight:bold;
line-height:1.4em;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 1px 3px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 2px 10px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #2F94BA;
}
.dafis-label:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm-c2zGAEnSl6lhMrCwlNZtPqzzFGbZjruCmLjnPpN1wDKNUZOMknPtlpPfpJ9HgjPaVBj0LWGRaAr35GqY_wT992gu7LQq_U4XbeeDgvQxifuIWn78VAoqS36BrX__cfWHlMJQtSGnow/s320/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
color:#003366;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background-color:#C9E9F4;
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #339DC6;
}
.dafis-daf ol li a{
text-decoration: none !important;
color:#333 !important;
display:block;
padding-left:10px;
}
.dafis-daf ol li a:hover{
background: #7BC4DF;
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

7.  Sekarang Cari Kode </head>





8. Copy dan paste kode berikut Diatas Kode </head>

<script src='http://dapurtutorial8.googlecode.com/files/Scriptdaftarisi1.js' type='text/javascript'/>

9. Jika Sudah Klik Tombol Simpan Template

Anda Dapat Menampilkan daftar ini baik di postingan seperti pada Blog ini ataupun di kolom Sidebar blog anda.

Lankah 2 : Menampilkan daftar isi pada postingan

1. Buat Entri Baru atau postingan baru
2. Pilih mode Entri Pada Bagian HTML





3. Copy kode berikut

<script type="text/javascript" src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script>
<script src="http://tanpa-isi.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ket : 
Perhatikan URL yang Berwarn merah ganti menggunakan URL blog Anda


4. Paste Kode tersebut di halaman Entri Pada Mode HTML tadi





5. Klik Tombol Publikasikan

Lankah 3 : Menapilkan daftar isi kolom sidebar

1. Pilih Tata Letak





2. Klik Tambah Gadget/Widget





3. Pilih HTML JavaScript





4. Copy Kode Berikut

<script type="text/javascript" src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script>
<script src="http://tanpa-isi.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ket : 
Perhatikan URL yang Berwarn merah ganti menggunakan URL blog Anda



5. Paste kode Pada box HTML/JavaScript tadi





6. Klik Simpan
7. Selesai

Demikian tutorial kali ini tetang cara membuat daftar isi blog otomatis keren dengan JQuery semoga bermanfaat. jangan lupa berikan tanggapan anda tetang daftar isi otomatis ini.

Read More

Tutorial Blog | Widget Blog | Tips Trik Blogspot

Cara Membuat Tanggal Posting Keren

21April

Membuat kalender di blog mempunyai banyak variasi untuk memberikan tampilan yang menarik. Salah satunya membuat tampilan kalender pada posting atau tanggal posting. Mungkin ini akan memberikan daya tarik tersendiri pada posting anda, dan cara membuat tanggal pada posting anda dapat anda pelajari dengan mudah. Ok gan langsung saja...silahkan ikuti langkah berikut ini.

Log in ke blog anda
Klik Rancangan

Klik Edit HTML

Masukkan kode berikut di atas kode ]]></b:skin> lalu Simpan Template

.calendar{
    margin:.25em 10px 10px 0;
    padding-top:5px;
    float:left;
    width:80px;
    background:#ededef;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc));
    background: -moz-linear-gradient(top,  #ededef,  #ccc);
    font:bold 30px/60px Arial Black, Arial, Helvetica, sans-serif;
    text-align:center;
    color:#000;
    text-shadow:#fff 0 1px 0; 
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px; 
    position:relative;
    -moz-box-shadow:0 2px 2px #888;
    -webkit-box-shadow:0 2px 2px #888;
    box-shadow:0 2px 2px #888;
    }
.calendar em{
    display:block;
    font:normal bold 11px/30px Arial, Helvetica, sans-serif;
    color:#fff;
    text-shadow:#00365a 0 -1px 0; 
    background:#04599a;
    background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a));
    background:-moz-linear-gradient(top,  #04599a,  #00365a);
    -moz-border-radius-bottomright:3px;
    -webkit-border-bottom-right-radius:3px; 
    border-bottom-right-radius:3px;
    -moz-border-radius-bottomleft:3px;
    -webkit-border-bottom-left-radius:3px; 
    border-bottom-left-radius:3px; 
    border-top:1px solid #00365a;
    }
.calendar:before, .calendar:after{
    content:'';
    float:left;
    position:absolute;
    top:5px; 
    width:8px;
    height:8px;
    background:#111;
    z-index:1;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-box-shadow:0 1px 1px #fff;
    -webkit-box-shadow:0 1px 1px #fff;
    box-shadow:0 1px 1px #fff;
    }
.calendar:before{left:11px;} 
.calendar:after{right:11px;}
.calendar em:before, .calendar em:after{
    content:'';
    float:left;
    position:absolute;
    top:-5px; 
    width:4px;
    height:14px;
    background:#dadada;
    background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa));
    background:-moz-linear-gradient(top,  #f1f1f1,  #aaa);
    z-index:2;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    }
.calendar em:before{left:13px;} 
.calendar em:after{right:13px;}   

Ketika anda ingin memposting artikel masuk ke Edit HTML, klik pojok kanan atas di area posting (samping Compose). Masukkan kode berikut ke dalamnya.

<p class="calendar">7 <em>February</em></p>

Setelah itu silahkan tulis artikel anda seperti biasanya. Jangan lupa Tampilkan Entri. Yuuuuhhhhuuuuuuu...anda sudah memiliki tanggal keren yang terselip di artikel anda. Selamat mencoba dan sukses selalu.

Read More

Tutorial Blog | Widget Blog | Tips Trik Blogspot

Cara Menghilangkan Bingkai atau Border Gambar

Pembatas yang ada pada gambar blog, sering di sebut dengan istilah bingkai gambar, border gambar, shadow image, bayang gambar atau border image. Di negara kita sendiri (Indonesia), pembatas yang ada pada gambar blog lebih banyak menggunakan istilah atau kata bingkai gambar. Jadi, supaya supaya tidak terlalu banyak istilah yang digunakan untuk pembatas gambar ini, kita pakai saja kata "Bingkai Gambar".

Bingkai yang terdapat pada gambar blog, terkadang memperindah tampilan gambar blog tersebut dan terkadang malah menghilangkan keindahan dari tampilan gambar tersebut. Yang membuat bingkai gambar terlihat indah atau tidak di blog adalah background dari blog tersebut. Kalau background blog berwarna cerah, misalkan putih, biasanya gambar yang berbingkai tidak terlihat bagus. Dan sebaliknya, kalau background blog berwarna gelap, misalkan hitam atau coklat, biasanya gambar yang berbingkai akan terlihat sangat bagus. Sebenarnya... Bagus tidaknya gambar di blog itu tergantung dari gambar yang digunakan. Coba sobat blogger perhatikan gambar di bawah ini! Di bawah ini adalah contoh gambar yang menggunakan bingkai dan contoh gambar yang tidak menggunakan bingkai.

Contoh gambar tanpa bingkai

Contoh gambar dengan bingkai

Dari kedua contoh di atas, apakah sobat blogger lebih suka gambar yang berbingkai atau gambar yang tidak berbingkai? "Saya lebih suka gambar yang tanpa bingkai". Kalau seperti itu kenyataanya, sekarang saya akan memberitahu sobat blogger tentang "cara menghilangkan bingkai gambar" atau "cara menghilangkan border gambar".

Cara menghilangkan Bingkai Gambar pada blog :

• Seperti biasa, login terlebih dahulu di http://www.blogger.com
• Di bagian menu drop down, klik Template

• Selanjutnya, klik Costumize untuk masuk ke halaman Blogger Template Designer

• Klik Advanced
• Bawa scrollingnya ke bawah sampai ketemu kata Add CSS

• Kalau sudah ketemu, letakkan kode berikut di dalam kotak tersebut.

.post-body img, .post-body .tr-caption-container, .Profile img,
.Image img, .BlogList .item-thumbnail img {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}

• Klik Apply to blog

Apakah sobat blogger sudah berhasil menghilangkan bingkai gambar yang ada pada gambar blog sobat? Tentu saja kita harus buka salah satu postingan kita untuk melihat hasilnya. Kalau sobat blogger berhasil, Jangan lupa tinggalkan saran atau komentar blog sobat di kolom komentar yang tersedia. Ya... Hitung-hitung sebagai ucapan terima kasih.

Read more at http://lenterablogger.blogspot.com/2012/05/cara-menghilangkan-bingkai-border.html#xk5fk8ugKtCVLWqu.99

Read More