This is default featured slide 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Sunday, 6 December 2015

Cara Mengganti Tombol Home, Next, Previous Dengan Gambar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

http://lh4.ggpht.com/_7wsQzULWIwo/Sy66uDrNdvI/AAAAAAAACmo/LheCCdVr1MA/Previous-Next-and-Home-Butt%5B2%5D.png?imgmax=800



1. Masuk Blogger
2. Rancangan ➨ Edit HTML ➨ Lalu Centang  Expand Template Widget
3. Cari Tiap Kode Ini :

Untuk mengganti "NEXT" Cari Kode :

<data:newerPageTitle/>
Dan Ganti Dengan :

<img src="http://1.bp.blogspot.com/-CbTuVszu2Lc/T70VvOTErWI/AAAAAAAABic/kBPYxgW4h_o/s1600/otowebsite_prev.png"/>

Untuk mengganti "PREVIOUS" Cari Kode :

<data:olderPageTitle/>

Dan Ganti Dengan :


<img src="http://1.bp.blogspot.com/-_KWWnxFynzg/T70WaoQ94_I/AAAAAAAABik/DBo_CAHRPVE/s1600/otowebsite_next.png"/>

Untuk mengganti "HOME" Cari Kode :

<data:homeMsg/>

Ganti Dengan Ini :


<img src="http://1.bp.blogspot.com/-IZxUuMGGWhQ/T68dW8WcWVI/AAAAAAAABHk/3TqgPTvdU8I/s1600/otowebsite_home.png"/>

5. Simpan Template.

Keterangan :

-. Warna Merah (Ganti Dengan Gambar Read More Milik Sobat)



Cara Membuat Read More Versi 2 - Trik Blog 2013

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم


 

Berikut Cara Membuat Read More Dengan Javascript : 1.  Login Ke Akun Blogger

2.  Pilih Layout > Edit HTML > Expand Widget Templates.

3.  Cari Kode </head> Dan Letakkan Kode Ini Diatas Kode Tadi :

<script src='http://creatingwebsite.googlecode.com/files/readmorev2.js' type='text/javascript'/>
4. Cari Kode <div class='post-header-line-1'/>, Dibawahnyakan Ada Kode
 <div class='post-body entry-content'>. Ganti Kode Tersebut Menjadi Seperti Ini :
<div class='post-body entry-content' expr:id='"post-" + data:post.id'> <b:if cond='data:blog.pageType == "item"'>
 
5. Selanjutnya Cari Kode <p><data:post.body/></p>, Paste Kode Berikut Tepat Dibawahnya :

<div class='post-body entry-content' expr:id='"post-" + data:post.id'> <b:if cond='data:blog.pageType == "item"'>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
6.  Jadi, Seluruh Kode Akn Seperti Ini :
<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>

<b:else/>

<style>#fullpost {display:none;}</style>

<p><data:post.body/></p>

<span id='showlink'>

<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>

</span>

<span id='hidelink' style='display:none'>

<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>

</span>

<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>

</b:if>
Keterangan :
-. Tulisan Selengkapnya... Dan Ringkasan... Bisa Diganti Tulisan Sesuai Keinginan Dan Gambar Yang Sobat Miliki Seperti Pada Versi 1 Yang Sebelumnya

7.  Save Template
8.  Selanjutnya Pilih Menu Setting > Formatting
9.  Scroll Kebawah Dan Temukan Kotak Post Template, Lalu Paste Kode Berikut Kedalamnya :

<span id="fullpost">
</span>
10. Klik Save Settings


Cara Membuat Read More Versi 1 - Trik Blog 2013

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم


Berikut Cara Membuat Read More :

 
1. Login Ke Blogger
2. Pilih Layout > Edit HTML > Expand Template Widget
3. Cari Kode ]]></b:skin>, Paste Kode Berikut Dibawahnya :

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
4. Selanjutnya Cari Kode <p><data:post.body/></p>, Paste Kode Berikut Dibawahnya :

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>

Keterangan :

-. Tulisan Read More… Bisa Kamu Ganti Sesuai Selera Atau Bisa Juga Diganti Dengan URL/Link Gambar Read More, Contoh : <img src='http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_red.png'>


Cara Membuat Daftar Isi/Sitemap Manual - Trik Terbaru Tahun Ini

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم 




1. Login Ke Blogger, Klik Rancangan/Design
2. Pada Elemen Halaman, Klik Add Gadget
3. Cari Dan Pilih HTML/Javascript (Bisa Juga Post-->New Post-->HTML)
4. Masukkan Kode Dibawah Ini :

<style>
.list {
background: url("http://lh4.ggpht.com/_15FopxVONSo/ShYuf4RqUuI/AAAAAAAACxI/jcump2GgfLg/iconbullet.gif") no-repeat left center;
line-height:1.5em;
padding:3px 0px 3px 20px;
}
</style>
<div style="background-color: #f7f7f7; border: 1px solid rgb(68, 67, 67); height: 220px; margin: 0px; overflow: auto; padding: 3px; width: 300px;">
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/memasang-text-resizer-di-blog.html">Memasang Text Resizer di Blog</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-multi-level-drop-down-dengan.html">Membuat Multi Level Drop Down dengan jQuery</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-dtree-di-blogger.html">Membuat Menu dTree di Blogger</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-horizontal-animasi-di-blog.html">Membuat Menu Horizontal Animasi di Blog</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-navigasi-horizontal-glossy.html">Membuat Menu Navigasi Horizontal Glossy di Blog</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-effect-jquery-link-nudging-di.html">Membuat Effect JQuery Link Nudging di Blog</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-info-panel-slide-vertikal.html">Membuat Info Panel Slide Vertikal dengan jQuery</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-chatbox-slide-vertikal-dengan.html">Membuat Chatbox Slide Vertikal Dengan jQuery di Blog</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-daftar-isi-dengan-jquery.html">Membuat Daftar Isi Dengan jQuery Accordion</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-slider-gambar-ala-drakon.html">Memasang Slider Gambar ala Drakon Template</a></div>
<div class="list">
<a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-gambar-slide-ala-zinmag-primus.html">Memasang Gambar Slide Ala Zinmag Primus</a></div>
</div>
5. Klik Tombol Save/Simpan.
Keterangan :

Link dan Teks, (Ganti Sesuai Keinginan)
width : 230px; (Lebar Daftar Isi)
height : 180px;(Tinggi Daftar Isi)

 Sumbernya Juga Dikunjungi Dong : Maskolis


Cara Membuat Daftar Isi/Sitemap Otomatis - Trik Terbaru Tahun Ini

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

http://4.bp.blogspot.com/-PTjg1ain2Ko/UPUIH1bftLI/AAAAAAAAACM/sJKF9Py28PE/s1600/daftar-isi-tutorial-blogspot-lengkap.jpg

  1. Login Ke Blogger, Klik Layout/Tata Letak;
  2. Pada Elemen Halaman, Klik Add Gadget/Tambah Gadge
  3. Pilih HTML/Javascript;
  4. Masukkan Kode Dibawah Ini :

    Klik "Show" Untuk Melihat Kode -->
    <div style="overflow: auto; width: 300px; height: 200px; text-align: left;">
    <script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
    <script src="http://creatingwebsite-maskolis.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>


  • Klik Tombol Save/Simpan


  • Keterangan : 
     
    -. Link Yang Berwarna Merah
    (Ganti Dengan Blog Anda)
    -. Width: 300px; (Lebar Sitemap)
    -. Height: 200px; (Tinggi Sitemap)