Perhatian : para pengunjung di Larang Pencet / klik judul iklan yg bertentangan dengan SYARIAH ISLAM, harap maklum karena pemilik website tidak bisa mengontrol penuh tampilan iklan. .. terimakasih dan anda berkunjung di blogger tentang modif motor efek chroom, krom, crom, semoga kita semua selalu diberi keselamatan dan kesehatan oleh Alloh SWT. amin ya robbal alamin.

Jumat, 22 Maret 2013

Cara Membuat Widget Hanya Tampil di Homepage atau posting

Cara Membuat Widget hanya tampil di Homepage atau posting, Tutorial widget cuma di homepage atau posting.
Atau pengertian lainnya adalah halaman default yang diset untuk sebuah browser. halaman ini ditayangan di Internet melalui media World Wide Web. Biasa digunakan orang untuk mempromosikan informasi, jasa, produk-produknya, dll. Tapi yang saya maksud disini adalah homepage pada blog atau website Agar blog tampil lebih dinamis dan terkesan profesional, sebaiknya beberapa widget yang dianggap pokok dan utama hanya ditampilkan di halaman utama atau Home page. Bagaimana cara membuat sebuah widget hanya tampil pada Homepage atau hanya tampil pada Postingan Saja, Langsung saja sob!!! berikut tipsnya :

  1. Login ke Blogger dengan ID sobat
  2. Di halaman Dasbor, kita pilih Tata Letak.
  3. Kemudian pilih Edit HTML.
  4. Jangan lupa Backup Template sobat agar mudah mengembalikan jika terjadi kesalahan.
  5. Beri tanda centang pada cekbox “expand template widget”.
  6. Gunakan F3 pada keyboard komputer anda untuk mencari kode widget anda. Contoh:  'Artikel Terbaru'.
  7. Setelah ketemu, berikut cara memodifikasiny :
..:: Membuat Widget Tampil di HomePage ::..
  1. Sisipkan kode : <b:if cond='data:blog.url == data:blog.homepageUrl'> dibawah kode <b:includable id='main'>
  2. Sisipkan kode : </b:if> diatas kode </b:includable>Contoh lengkapnya seperti ini : <b:widget id='HTML10' locked='false' title='Artikel Terbaru' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> </b:if> </b:includable> </b:widget>
..:: Membuat Widget Tampil di Posting ::..
  1. Sisipkan kode :
    <b:if cond='data:blog.pageType == "item"'> dibawah kode <b:includable id='main'>
  2. Sisipkan kode: </b:if> diatas kode </b:includable>
    Contoh lengkapnya seperti ini :
    <b:widget id='HTML10' locked='false' title='Artikel Terbaru' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.pageType == "item"'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>
    </b:if>
    </b:includable>
    </b:widget>
Jangan Lupa Save Templatenya.
Sekian dulu Artikel sayafafan tentang Cara Membuat Widget hanya tampil di Homepage atau posting
Baca selengkapnya..

Kamis, 21 Maret 2013

Cara Membuat Read More Jadi Lebih Keren

Cara Membuat Read More Jadi Lebih Keren, Membikin ReadMore dan mempercantik dengan Gambar. Artikel sayafafan membahas cara membuat readmore keren, yang mana ini merupakan jawaban atas pertanyaan teman blogger kita yang menanyakan kepada saya cara membuat readmore keren, baiklah untuk mempersingkat penjelasan mari kita simak penjelasan berikut ini :

1. Silahkan anda Login ID Blogger anda

2. Silahkan Klik Rancangan --> Klik Edit HTML, centang pada kotak Expand Widget Template.

3. Silahkan anda cari kode seperti ini < /head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ;summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://deddycamp.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Keterangan : Tulisan yang berwarna merah adalah yang bisa anda ganti.

  • Summary noimg 430 = tinggi artikel terpenggal tanpa image
  • Summar img 430 = tinggi artikel terpenggal dengan image

4. Cari kode html berikut ini :
      <data:post.body/> atau <p><data:post.body/></p>
, kalau di blog contoh menggunakan <p><data:post.body/></p>
 
Ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script> <span class='rmlink' style='float:right;padding-top:20px;'> <a expr:href='data:post.url'><img alt='read more' src='http://lh5.ggpht.com/_7Y9pl24WpQY/SuM7b-deOLI/AAAAAAAAB_4/PKYOsvyuCdc/readmore_thumb%5B2%5D.png?imgmax=800'/></a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan : Tulisan yang berwarna merah adalah link gambar, anda bisa ganti dengan link gambar sesuka anda, untuk mendapatkan gambar animasi Readmore anda bisa lihat Disini


Jika sudah semua silahkan Klik Simpan Template, selesai

Sekian dulu Artikel sayafafan tentang Cara Membuat Read More Jadi Lebih Keren
Baca selengkapnya..

Buat Read More Otomatis pada Template Blogger

Read More Otomatis pada Template Blogger, dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.
Yup,membuat read more/baca selengkapnya otomatis pada blogger adalah tema kita kali ini.

Langkah Cara Membuat Read More Otomatis tanpa jQuery pada Blogger dengan Bahasa Javascript

Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.

Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

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

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>


Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>


Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>


Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual tinggal hapus kode:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>


Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2

Sekian dulu Artikel sayafafan tentang Read More Otomatis pada Template Blogger
Baca selengkapnya..

Cara Membuat Read More Versi 2

Cara Membuat Read More Versi 2. Artikel sayafafan tentang bagaimana cara membuat readmore versi 2 (apapun namanya), tutorial ini pokoknya terusannya yang versi 1. Pada cara membuat read more sebelumnya atau boleh dibilang versi 1, jika kita klik link read more nya maka browser akan meload lagi halaman web kita. Di versi 2 ini, jika kita klik link read more maka keseluruhan isi artikel akan langsung tampak di bawahnya. Jadi tidak meload halaman baru. Mau tau gimana caranya?
Berikut Cara Membuat Read More Dengan Javascript:

1.  Login ke akun Blogger anda

2.  Pilih Layout > Edit HTML, lalu centang Expand Widget Templates.

3.  Cari kode </head> lalu pastekan kode berikut tepat di atasnya:

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

4.  Jika sudah, cari kode <div class='post-header-line-1'/>, di bawahnya kan 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.  Sudahkan? Selanjutnya cari kode <p><data:post.body/></p>, paste kode berikut tepat di bawahnya:
<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.  So, seluruh kode tadi menjadi 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>
 Tulisan Selengkapnya... dan Ringkasan... bisa anda ganti sesuai keinginan.

7.  Klik Save Template untuk menyimpan perubahan
8.  Selanjutnya pilih menu Setting > Formatting
9.  Scroll ke bawah dan temukan kotak Post Template, lalu paste kode berikut kedalamnya:

    <span id="fullpost">
    </span>

10. Klik Save Settings

NB: Dalam membuat postingan, letakkan abstraksi atau pembuka postingan anda sebelum kode <span id="fullpost"> dan sisa nya letakkan diantara kode <span id="fullpost"> dan </span>.

Lalu gimana buat yang sudah pakai read more versi 1? Ya tinggal update aja ke situs providernya… eh, kok malah kayak software? Begini, buat yang sudah pakai read more versi 1, anda tinggal mengubah sedikit kode read more yang lama..
Caranya:
1.   Kode read more yang lama kan seperti ini:

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


2.   Hapus kode yang berwarna merah lalu ikuti langkah-langkah di atas.

3.   Jangan lupa ubah juga isi Post Template dengan:

    <span id="fullpost">
    </span>


NB: Dalam membuat postingan, letakkan abstraksi atau pembuka postingan anda sebelum kode <span id="fullpost"> dan sisa nya letakkan diantara kode <span id="fullpost"> dan </span>.


Sekian dulu Artikel sayafafan tentang Cara Membuat Read More Versi 2
Baca selengkapnya..

2 Cara Membuat Read More Versi 1

2 Cara Membuat Read More Versi 1, Trik Bikin Readmore dibagian sekitar bawah Postingan. Tips cara membuat readmore. Setiap postingan baru pasti akan ditampilkan pada halaman utama atau home dari blog kita. Tapi jika postingan itu terlalu panjang maka akan membuat penuh halaman utama karena hanya satu postingan, dan itu sangat tidak efisien Maka sebaiknya kita hanya menampilkan abstraksi atau pembuka dari postingan tersebut. Lalu gimana cara mengatasinya? Mudah sekali, kita cukup membuat link read more  atau baca selengkapnya. Mau tau caranya?

Apa yang sobat tahu tentang readmore?? yap benar sekali.. readmore atau dalam bahasa indonesianya baca selengkapnya adalah fasilitas yang di buat untuk menghemat halaman utama serta memaksimalkan halaman postingan. Mengapa demikian??

Sebelum sobat memasang readmore otomatis di blog, postingan pada halaman utama akan di tampilkan full tanpa ada potongan sama sekali ( diskon kalee ) sedangkan ketika sobat mengklik salah satu artikel, di halamn posting akan muncul artikel yang sama dengan halaman utama, jadi pengunjung tak perlu lagi ke halaman postingan jika dia sudah membacanya di halaman utama. dengan kata lain,akan sedikit kemungkinan pengunjung akan ke halaman posting.

Jadi dapat saya simpulkan bahwa keberadaan Readmore di blog adalah hal yang mutlak di butuhkan. kali ini saya akan berbagi ke pada sobat blogger tentang bagaimana cara memasang readmore di blogspot. Sobat yang tertarik, silahkan ikuti tutorial berikut.

Cara Memasang Read More di Blog

1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML, lalu centang Expand Widget Templates. (Jangan lupa backup template sebelum mengeditnya)

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>

Tulisan Read More… bisa anda ganti dengan sesuai keinginan.

Bila langkah 2 – 3 tidak menghasilkan apa-apa, itu karena perbedaan karakteristik setiap template.
Solusinya:

* Cari kode <div class='post-header-line-1'/> <div class='post-body'>, paste kode berikut dibawahnya:
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

* Selanjutnya, cari kode <<p><data:post.body/></p>, paste kode berikut dibawahnya: 

<a expr:href='data:post.url'>Readmore..</a>
</b:if>


5. Klik Save Template

6. Sekarang pilih menu Setting > Formatting

7. Scroll ke bawah dan temukan kotak Post Template, lalu paste kode berikut kedalamnya:


<span class="fullpost">
</span>

8. Klik Save Settings

9. Ketika membuat postingan kan ada 2 tab, yaitu Compose dan Edit HTML. Klik tab Edit HTML maka akan langsung tampak kode yang telah kita masukkan di Post Template tadi.

10. Letakkan pembuka atau prolog postingan anda sebelum kode <span class="fullpost">, dan sisanya letakkan di antara <span class="fullpost"> dan </span>. Ini tahap yang paling penting.


 Sekian dulu Artikel sayafafan tentang 2 Cara Membuat Read More Otomatis 1
Baca selengkapnya..

Rabu, 20 Maret 2013

Cara membuat Slide Menu Horisontal Dibawah Posting

Cara Buat Slide Menu Horisontal Dibawah Posting, Slide menu horizontal efek halus. Menu horisontal ini terletak dibawah posting. Selain lebih fungsional karena letaknya dibawah posting, dilihat dari tampilannya menu horisontal ini memang sangat menarik. Sehingga tampilan web atau blog kita menjadi lebih bervariatif. Selain kelebihan diatas menu horisontal ini saya lengkapi dengan efek slide yang menggunakan fitur transition, agar tampil lebih dinamis.Slide Menu horisontal ini dibuat dengan menggunakan kode CSS dan beberapa kode HTML tanpa menggunakan kode javascript ataupun jQuery, sehingga menu ini akan bekerja lebih ringan.



SayaFafan  anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML
4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"
6. Cari kode di bawah ini atau yang mirip dengan kode ini :
</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

<style type='text/css'>
/*widget by noer cara buat web gratis.com*/
ul#menu-slide-cbwg {
    margin-left: 15px;
    padding: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
}

ul#menu-slide-cbwg li {
    width: 103px;
    display:inline;
    float:left;
}

ul#menu-slide-cbwg li a {
    display: block;
    float:left;
    width: 100px;
    height: 25px;
    background-color:#eee;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #aaa;
    text-decoration:none;
    text-align:center;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
}

ul#menu-slide-cbwg li a:hover{
    background-color:#4152A7;
    border:1px solid #bbb;
    padding-top: 80px;
}

ul#menu-slide-cbwg li a span{
     background-color:#4152A7;
     border-top:1px solid #fff;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    display: block;
    width: 100px;
    height: 25px;
    font-size:14px;
font-weight:bold;
    color:#fff;
}

ul#menu-slide-cbwg li a span:hover{
    font-size:14px;
    color:#4152A7;
    background-color:#eee;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>


8. Copy kode dibawah ini dan paste setelah kode diatas :
<style type='text/css'>

ul#menu-slide-cbwg .item-1 a:hover
{ background-image: url(https://lh3.googleusercontent.com/-8Ig-Nhj-zsU/TiHQPIkd_KI/AAAAAAAAA4I/KxPQ5iZgBXA/s104/home.png);}

ul#menu-slide-cbwg .item-2 a:hover
{ background-image: url(https://lh6.googleusercontent.com/-nuD-DiQQIq4/TiHQPhqCfCI/AAAAAAAAA4M/oDSH5xMZdc4/s104/id_card.png);}

ul#menu-slide-cbwg .nitem-3 a:hover
{ background-image: url(https://lh5.googleusercontent.com/-eZ55yl4Z_fQ/TiHQQX_WQuI/AAAAAAAAA4U/D4GjeJ2FLLg/s104/promotion_new.png);}

ul#menu-slide-cbwg .item-4 a:hover
{ background-image: url(https://lh6.googleusercontent.com/-seiG7u6dYL4/TiHQQmB6LEI/AAAAAAAAA4Y/9razNbNcvWc/s104/rss.png);}

ul#menu-slide-cbwg .item-5 a:hover
{ background-image: url(https://lh6.googleusercontent.com/-kAEzDRvNYlY/TiHQP2rBcRI/AAAAAAAAA4Q/GBw4l-UElWQ/s104/mail.png);}

</style>
Catatan :
  • Teks merah adalah ULR Icon yang ada pada setiap menu. Silahkan anda bisa ganti ULR dan Iconnya sesuai dengan menu yang anda buat.
  • Sebagai refrensi, anda bisa dapatkan macam - macam bentuk icon di http://dryicons.com/free-icons/
  • Anda bisa menambah dan mengurangi jumlah item menu, sesuai kebutuhan anda, tapi disesuaikan dengan lebar area yang ada.
9. Langkah selanjutnya cari kode di bawah ini atau yang mirip dengan kode ini :

<data:post.body/>

10. Copy kode dibawah ini dan paste setelah kode <data:post.body/>:

<ul id="menu-slide-cbwg">
 <li class="item-1">
<a href="ULR HALAMAN/ARTIKEL"><span>MENU-1</span></a>
</li>

 <li class="item-2">
<a href="ULR HALAMAN/ARTIKEL"><span>MENU-2</span></a>
</li>

 <li class="item-3">
<a href="ULR HALAMAN/ARTIKEL"><span>MENU-3</span></a>
</li>

 <li class="item-4">
<a href="ULR HALAMAN/ARTIKEL"><span>MENU-4</span></a>
</li>

 <li class="item-5">
<a href="ULR HALAMAN/ARTIKEL"><span>MENU-5</span></a>
</li>

</ul>
Catatan :
  • Bila sudah menggunakan fasilitas "read more" letakkan kode <data:post.body/> setelah kode yang kedua.
  • Teks warna BIRU pada kode ini harus sama dengan teks warna BIRU yang ada pada kode diatas
11.SIMPAN TEMPLATE.

sayafafan.... menu ini juga bisa diletakkan dimana saja seperti tab menu dibawah header. suwon pak Noer Cholis.

Sekian dulu Artikel sayafafan tentang Cara Buat Slide Menu Horisontal Dibawah Posting
Baca selengkapnya..

Cara Membuat Multi Tab Di Dalam Satu Gadget

Cara Membuat Multi Tab Di Dalam Satu Gadget, Cara Bikin Banyak Tab Di Masukkan Hanya 1 Gadget. Dilihat dari fungsi dan cara kerjanya, multi tab ini lebih efisien, terutama pada saat kita edit atau mengisi data pada konten multi tab. Dengan multi tab ini kita tinggal menambahkan gadget yang sudah ada didalam multitab tersebut. Misalnya kita ingin Arsip blog, entri populer, daftar blog, video atau yang lain ada dalam multi tab, maka kita tinggal add gadget. Tapi ingat, bila anda ingin memasukkan gadget yang sudah ada pada blog anda, misalnya Arsip blog, entri populer, daftar blog, sebaikya anda hapus dulu gadget yang sudah ada, kemudian baru menambahkan gadget baru yang ada pada multi tab.Ada sebuah contoh suatu website yang menggunakan multi tab, Klik Exp : DEMO

Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.
4. Cari kode di bawah ini atau yang mirip dengan kode ini :
]]></b:skin>
5. Copy kode di bawah ini dan taruh tepat setelah kode ]]></b:skin> :

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

<script type='text/javascript'>
//<![CDATA[

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(3(C){C.8={3o:{19:3(E,F,H){6 G=C.8[E].1h;21(6 D 3p H){G.1I[D]=G.1I[D]||[];G.1I[D].28([F,H[D]])}},2P:3(D,F,E){6 H=D.1I[F];5(!H){7}21(6 G=0;G<H.k;G++){5(D.b[H[G][0]]){H[G][1].1H(D.c,E)}}}},1l:{},n:3(D){5(C.8.1l[D]){7 C.8.1l[D]}6 E=C(\'<2a 3s="8-3r">\').j(D).n({3q:"3i",2g:"-2A",3g:"-2A",1r:"1w"}).22("2C");C.8.1l[D]=!!((!(/3I|3P/).12(E.n("3z"))||(/^[1-9]/).12(E.n("2T"))||(/^[1-9]/).12(E.n("2E"))||!(/2v/).12(E.n("3w"))||!(/3S|3C\\(0, 0, 0, 0\\)/).12(E.n("3D"))));3E{C("2C").2w(0).3B(E.2w(0))}3x(F){}7 C.8.1l[D]},3y:3(D){C(D).v("1p","2I").n("2q","2v")},3H:3(D){C(D).v("1p","3O").n("2q","")},3Q:3(G,E){6 D=/2g/.12(E||"2g")?"3N":"3M",F=e;5(G[D]>0){7 t}G[D]=1;F=G[D]>0?t:e;G[D]=0;7 F}};6 B=C.2e.W;C.2e.W=3(){C("*",2).19(2).z("W");7 B.1H(2,2M)};3 A(E,F,G){6 D=C[E][F].35||[];D=(1F D=="1E"?D.2h(/,?\\s+/):D);7(C.1j(G,D)!=-1)}C.1i=3(E,D){6 F=E.2h(".")[0];E=E.2h(".")[1];C.2e[E]=3(J){6 H=(1F J=="1E"),I=2D.1h.3J.2P(2M,1);5(H&&A(F,E,J)){6 G=C.i(2[0],E);7(G?G[J].1H(G,I):1n)}7 2.14(3(){6 K=C.i(2,E);5(H&&K&&C.3v(K[J])){K[J].1H(K,I)}o{5(!H){C.i(2,E,3e C[F][E](2,J))}}})};C[F][E]=3(I,H){6 G=2;2.15=E;2.2H=F+"-"+E;2.b=C.1A({},C.1i.1k,C[F][E].1k,H);2.c=C(I).u("1e."+E,3(L,J,K){7 G.1e(J,K)}).u("2j."+E,3(K,J){7 G.2j(J)}).u("W",3(){7 G.1b()});2.23()};C[F][E].1h=C.1A({},C.1i.1h,D)};C.1i.1h={23:3(){},1b:3(){2.c.1q(2.15)},2j:3(D){7 2.b[D]},1e:3(D,E){2.b[D]=E;5(D=="f"){2.c[E?"j":"r"](2.2H+"-f")}},1X:3(){2.1e("f",e)},1P:3(){2.1e("f",t)}};C.1i.1k={f:e};C.8.2J={3h:3(){6 D=2;2.c.u("3d."+2.15,3(E){7 D.2G(E)});5(C.x.13){2.2K=2.c.v("1p");2.c.v("1p","2I")}2.3c=e},38:3(){2.c.16("."+2.15);(C.x.13&&2.c.v("1p",2.2K))},2G:3(F){(2.V&&2.1o(F));2.1C=F;6 E=2,G=(F.39==1),D=(1F 2.b.25=="1E"?C(F.2f).2x().19(F.2f).y(2.b.25).k:e);5(!G||D||!2.2S(F)){7 t}2.1D=!2.b.26;5(!2.1D){2.3a=1x(3(){E.1D=t},2.b.26)}5(2.2m(F)&&2.1T(F)){2.V=(2.1U(F)!==e);5(!2.V){F.3b();7 t}}2.2n=3(H){7 E.2r(H)};2.2l=3(H){7 E.1o(H)};C(2N).u("2O."+2.15,2.2n).u("2t."+2.15,2.2l);7 e},2r:3(D){5(C.x.13&&!D.3j){7 2.1o(D)}5(2.V){2.1V(D);7 e}5(2.2m(D)&&2.1T(D)){2.V=(2.1U(2.1C,D)!==e);(2.V?2.1V(D):2.1o(D))}7!2.V},1o:3(D){C(2N).16("2O."+2.15,2.2n).16("2t."+2.15,2.2l);5(2.V){2.V=e;2.2u(D)}7 e},2m:3(D){7(29.3m(29.2z(2.1C.2L-D.2L),29.2z(2.1C.2s-D.2s))>=2.b.2F)},1T:3(D){7 2.1D},1U:3(D){},1V:3(D){},2u:3(D){},2S:3(D){7 t}};C.8.2J.1k={25:U,2F:1,26:0}})(27);(3(A){A.1i("8.4",{23:3(){2.b.Z+=".4";2.1m(t)},1e:3(B,C){5((/^d/).12(B)){2.1v(C)}o{2.b[B]=C;2.1m()}},k:3(){7 2.$4.k},1Q:3(B){7 B.2R&&B.2R.1g(/\\s/g,"2Q").1g(/[^A-4o-4x-9\\-2Q:\\.]/g,"")||2.b.2X+A.i(B)},8:3(C,B){7{b:2.b,4u:C,30:B,11:2.$4.11(C)}},1m:3(O){2.$l=A("1O:4p(a[p])",2.c);2.$4=2.$l.1G(3(){7 A("a",2)[0]});2.$h=A([]);6 P=2,D=2.b;2.$4.14(3(R,Q){5(Q.X&&Q.X.1g("#","")){P.$h=P.$h.19(Q.X)}o{5(A(Q).v("p")!="#"){A.i(Q,"p.4",Q.p);A.i(Q,"q.4",Q.p);6 T=P.1Q(Q);Q.p="#"+T;6 S=A("#"+T);5(!S.k){S=A(D.2d).v("1s",T).j(D.1u).4l(P.$h[R-1]||P.c);S.i("1b.4",t)}P.$h=P.$h.19(S)}o{D.f.28(R+1)}}});5(O){2.c.j(D.2b);2.$h.14(3(){6 Q=A(2);Q.j(D.1u)});5(D.d===1n){5(20.X){2.$4.14(3(S,Q){5(Q.X==20.X){D.d=S;5(A.x.13||A.x.43){6 R=A(20.X),T=R.v("1s");R.v("1s","");1x(3(){R.v("1s",T)},44)}4m(0,0);7 e}})}o{5(D.1c){6 J=46(A.1c("8-4"+A.i(P.c)),10);5(J&&P.$4[J]){D.d=J}}o{5(P.$l.y("."+D.m).k){D.d=P.$l.11(P.$l.y("."+D.m)[0])}}}}D.d=D.d===U||D.d!==1n?D.d:0;D.f=A.41(D.f.40(A.1G(2.$l.y("."+D.1a),3(R,Q){7 P.$l.11(R)}))).31();5(A.1j(D.d,D.f)!=-1){D.f.3V(A.1j(D.d,D.f),1)}2.$h.j(D.18);2.$l.r(D.m);5(D.d!==U){2.$h.w(D.d).1S().r(D.18);2.$l.w(D.d).j(D.m);6 K=3(){A(P.c).z("1K",[P.Y("1K"),P.8(P.$4[D.d],P.$h[D.d])],D.1S)};5(A.i(2.$4[D.d],"q.4")){2.q(D.d,K)}o{K()}}A(3U).u("3W",3(){P.$4.16(".4");P.$l=P.$4=P.$h=U})}21(6 G=0,N;N=2.$l[G];G++){A(N)[A.1j(G,D.f)!=-1&&!A(N).1f(D.m)?"j":"r"](D.1a)}5(D.17===e){2.$4.1q("17.4")}6 C,I,B={"3X-2E":0,1R:1},E="3Z";5(D.1d&&D.1d.3Y==2D){C=D.1d[0]||B,I=D.1d[1]||B}o{C=I=D.1d||B}6 H={1r:"",47:"",2T:""};5(!A.x.13){H.1W=""}3 M(R,Q,S){Q.2p(C,C.1R||E,3(){Q.j(D.18).n(H);5(A.x.13&&C.1W){Q[0].2B.y=""}5(S){L(R,S,Q)}})}3 L(R,S,Q){5(I===B){S.n("1r","1w")}S.2p(I,I.1R||E,3(){S.r(D.18).n(H);5(A.x.13&&I.1W){S[0].2B.y=""}A(P.c).z("1K",[P.Y("1K"),P.8(R,S[0])],D.1S)})}3 F(R,T,Q,S){T.j(D.m).4k().r(D.m);M(R,Q,S)}2.$4.16(".4").u(D.Z,3(){6 T=A(2).2x("1O:w(0)"),Q=P.$h.y(":4e"),S=A(2.X);5((T.1f(D.m)&&!D.1z)||T.1f(D.1a)||A(2).1f(D.1t)||A(P.c).z("2y",[P.Y("2y"),P.8(2,S[0])],D.1v)===e){2.1M();7 e}P.b.d=P.$4.11(2);5(D.1z){5(T.1f(D.m)){P.b.d=U;T.r(D.m);P.$h.1Y();M(2,Q);2.1M();7 e}o{5(!Q.k){P.$h.1Y();6 R=2;P.q(P.$4.11(2),3(){T.j(D.m).j(D.2c);L(R,S)});2.1M();7 e}}}5(D.1c){A.1c("8-4"+A.i(P.c),P.b.d,D.1c)}P.$h.1Y();5(S.k){6 R=2;P.q(P.$4.11(2),Q.k?3(){F(R,T,Q,S)}:3(){T.j(D.m);L(R,S)})}o{4b"27 4c 4d: 3n 49 4a."}5(A.x.13){2.1M()}7 e});5(!(/^24/).12(D.Z)){2.$4.u("24.4",3(){7 e})}},19:3(E,D,C){5(C==1n){C=2.$4.k}6 G=2.b;6 I=A(G.37.1g(/#\\{p\\}/g,E).1g(/#\\{1L\\}/g,D));I.i("1b.4",t);6 H=E.4i("#")==0?E.1g("#",""):2.1Q(A("a:4g-4h",I)[0]);6 F=A("#"+H);5(!F.k){F=A(G.2d).v("1s",H).j(G.18).i("1b.4",t)}F.j(G.1u);5(C>=2.$l.k){I.22(2.c);F.22(2.c[0].48)}o{I.36(2.$l[C]);F.36(2.$h[C])}G.f=A.1G(G.f,3(K,J){7 K>=C?++K:K});2.1m();5(2.$4.k==1){I.j(G.m);F.r(G.18);6 B=A.i(2.$4[0],"q.4");5(B){2.q(C,B)}}2.c.z("2Y",[2.Y("2Y"),2.8(2.$4[C],2.$h[C])],G.19)},W:3(B){6 D=2.b,E=2.$l.w(B).W(),C=2.$h.w(B).W();5(E.1f(D.m)&&2.$4.k>1){2.1v(B+(B+1<2.$4.k?1:-1))}D.f=A.1G(A.34(D.f,3(G,F){7 G!=B}),3(G,F){7 G>=B?--G:G});2.1m();2.c.z("2V",[2.Y("2V"),2.8(E.2k("a")[0],C[0])],D.W)},1X:3(B){6 C=2.b;5(A.1j(B,C.f)==-1){7}6 D=2.$l.w(B).r(C.1a);5(A.x.4n){D.n("1r","4t-1w");1x(3(){D.n("1r","1w")},0)}C.f=A.34(C.f,3(F,E){7 F!=B});2.c.z("33",[2.Y("33"),2.8(2.$4[B],2.$h[B])],C.1X)},1P:3(C){6 B=2,D=2.b;5(C!=D.d){2.$l.w(C).j(D.1a);D.f.28(C);D.f.31();2.c.z("32",[2.Y("32"),2.8(2.$4[C],2.$h[C])],D.1P)}},1v:3(B){5(1F B=="1E"){B=2.$4.11(2.$4.y("[p$="+B+"]")[0])}2.$4.w(B).4q(2.b.Z)},q:3(G,K){6 L=2,D=2.b,E=2.$4.w(G),J=E[0],H=K==1n||K===e,B=E.i("q.4");K=K||3(){};5(!B||!H&&A.i(J,"17.4")){K();7}6 M=3(N){6 O=A(N),P=O.2k("*:4s");7 P.k&&P.4v(":45(3R)")&&P||O};6 C=3(){L.$4.y("."+D.1t).r(D.1t).14(3(){5(D.1N){M(2).3l().1B(M(2).i("1L.4"))}});L.1y=U};5(D.1N){6 I=M(J).1B();M(J).3k("<2o></2o>").2k("2o").i("1L.4",I).1B(D.1N)}6 F=A.1A({},D.1J,{2U:B,2i:3(O,N){A(J.X).1B(O);C();5(D.17){A.i(J,"17.4",t)}A(L.c).z("2Z",[L.Y("2Z"),L.8(L.$4[G],L.$h[G])],D.q);D.1J.2i&&D.1J.2i(O,N);K()}});5(2.1y){2.1y.3f();C()}E.j(D.1t);1x(3(){L.1y=A.3u(F)},0)},2U:3(C,B){2.$4.w(C).1q("17.4").i("q.4",B)},1b:3(){6 B=2.b;2.c.16(".4").r(B.2b).1q("4");2.$4.14(3(){6 C=A.i(2,"p.4");5(C){2.p=C}6 D=A(2).16(".4");A.14(["p","q","17"],3(E,F){D.1q(F+".4")})});2.$l.19(2.$h).14(3(){5(A.i(2,"1b.4")){A(2).W()}o{A(2).r([B.m,B.2c,B.1a,B.1u,B.18].3G(" "))}})},Y:3(B){7 A.Z.3L({3t:B,2f:2.c[0]})}});A.8.4.1k={1z:e,Z:"24",f:[],1c:U,1N:"3F A;",17:e,2X:"8-4-",1J:{},1d:U,37:\'<1O><a p="#{p}"><2W>#{1L}</2W></a></1O>\',2d:"<2a></2a>",2b:"8-4-3K",m:"8-4-d",2c:"8-4-1z",1a:"8-4-f",1u:"8-4-30",18:"8-4-3T",1t:"8-4-4w"};A.8.4.35="k";A.1A(A.8.4.1h,{1Z:U,4r:3(C,F){F=F||e;6 B=2,E=2.b.d;3 G(){B.1Z=42(3(){E=++E<B.$4.k?E:0;B.1v(E)},C)}3 D(H){5(!H||H.4j){4f(B.1Z)}}5(C){G();5(!F){2.$4.u(2.b.Z,D)}o{2.$4.u(2.b.Z,3(){D();E=B.b.d;G()})}}o{D();2.$4.16(2.b.Z,D)}}})})(27);',62,282,'||this|function|tabs|if|var|return|ui|||options|element|selected|false|disabled||panels|data|addClass|length|lis|selectedClass|css|else|href|load|removeClass||true|bind|attr|eq|browser|filter|triggerHandler|||||||||||||||||||||null|_mouseStarted|remove|hash|fakeEvent|event||index|test|msie|each|widgetName|unbind|cache|hideClass|add|disabledClass|destroy|cookie|fx|setData|hasClass|replace|prototype|widget|inArray|defaults|cssCache|tabify|undefined|mouseUp|unselectable|removeData|display|id|loadingClass|panelClass|select|block|setTimeout|xhr|unselect|extend|html|_mouseDownEvent|_mouseDelayMet|string|typeof|map|apply|plugins|ajaxOptions|tabsshow|label|blur|spinner|li|disable|tabId|duration|show|mouseDelayMet|mouseStart|mouseDrag|opacity|enable|stop|rotation|location|for|appendTo|init|click|cancel|delay|jQuery|push|Math|div|navClass|unselectClass|panelTemplate|fn|target|top|split|success|getData|find|_mouseUpDelegate|mouseDistanceMet|_mouseMoveDelegate|em|animate|MozUserSelect|mouseMove|pageY|mouseup|mouseStop|none|get|parents|tabsselect|abs|5000px|style|body|Array|width|distance|mouseDown|widgetBaseClass|on|mouse|_mouseUnselectable|pageX|arguments|document|mousemove|call|_|title|mouseCapture|height|url|tabsremove|span|idPrefix|tabsadd|tabsload|panel|sort|tabsdisable|tabsenable|grep|getter|insertBefore|tabTemplate|mouseDestroy|which|_mouseDelayTimer|preventDefault|started|mousedown|new|abort|left|mouseInit|absolute|button|wrapInner|parent|max|Mismatching|plugin|in|position|gen|class|type|ajax|isFunction|backgroundImage|catch|disableSelection|cursor|8230|removeChild|rgba|backgroundColor|try|Loading|join|enableSelection|auto|slice|nav|fix|scrollLeft|scrollTop|off|default|hasScroll|img|transparent|hide|window|splice|unload|min|constructor|normal|concat|unique|setInterval|opera|500|not|parseInt|overflow|parentNode|fragment|identifier|throw|UI|Tabs|visible|clearInterval|first|child|indexOf|clientX|siblings|insertAfter|scrollTo|safari|Za|has|trigger|rotate|last|inline|tab|is|loading|z0'.split('|'),0,{}))

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {
$('#tabzine> ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });

});

//]]>
</script>

<style type='text/css'>
ul.tabnav{
padding:5px 0px 0px 0px;
height:28px;
margin:0px 0px;
background:#fff;
border:1px solid #fff;
}


.tabnav li {
display: inline;
list-style: none;
float:left;
text-align:center;
margin-right:2px;
margin-left:9px;
}


.tabnav li a {
text-decoration: none;
text-transform: uppercase;
font-weight: normal;
padding: 6px 8px;
width:80px;
font-weight:normal;
font-family:Georgia,Century gothic, Arial, sans-serif;
color: #2C2F32;
text-decoration: none;
display:block;
background:#9daab4;
}

.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {
text-decoration:none;
background: #42484d;
color: #C7C7C7;
}

.tabdiv {
margin-top:2px;
padding: 5px 5px 5px 5px;
font-family:Georgia,Century gothic, Arial, sans-serif;
background:#fff;
}
.tabdiv a:link,.tabdiv  a:visited {
color:#333;
}
.tabdiv a:hover{
color: #2676A1;
}
.tabdiv ul{
list-style-type:none;
margin:0px 5px;
padding:0px 0px;
}

.tabdiv ul li{
background:#F3F3F3;
display:block;
margin-left:5px;
overflow:hidden;
line-height:24px;
padding:2px 2px ;
margin:2px 0px;
color:#444;
font-size:13px;
}
.tabdiv li a:link,.tabdiv li a:visited{
height:100%;
line-height:28px;
padding: 0px 0px 0px 0px;
color:#333;
}

.tabdiv li a:hover {
color: #222;
text-decoration:none;
}
.ui-tabs-hide {
display: none;
}
</style>


6. Langkah selanjutnya cari lagi kode di bawah ini atau yang mirip dengan kode ini :
<div id='sidebar-wrapper'>

7. Copy kode di bawah ini dan taruh tepat setelah kode <div id='sidebar-wrapper'> :

<!-- Tabzine -->
<div class='widgets' id='tabzine'>
<ul class='tabnav'>
<li class='pop'><a href='#tab11'>DAFTAR BLOG</a></li>
<li class='fea'><a href='#tab22'>ARSIP</a></li>
<li class='rec'><a href='#tab33'>POPULER</a></li>
</ul>

<!-- tab1 -->
<div class='tabdiv' id='tab11'>
<b:section class='sidebar5' id='sidebar5' preferred='yes'>
<b:widget id='HTML223' locked='false' title='' type='HTML'/>
</b:section>
</div>
<!--/tab1-->

<!-- tab2 -->
<div class='tabdiv' id='tab22'>
<b:section class='sidebar4' id='sidebar4' preferred='yes'>
<b:widget id='HTML323' locked='false' title='' type='HTML'/>
</b:section>
</div>
<!-- tab2 -->

<!-- tab3 -->
<div class='tabdiv' id='tab33'>
<b:section class='sidebar3' id='sidebar3' preferred='yes'>
<b:widget id='HTML423' locked='false' title='' type='HTML'/>
</b:section>
</div>
<!-- /tab3 -->

</div>
<!-- /Tabzine -->
Catatan : Silahkan anda bisa mengganti Judul tab yang berwarna merah diatas.

8. SIMPAN TEMLPATE.

Kemudian silahkan anda tambah gadget  dan isi sesuai dengan Judul tab yang anda buat tadi.


Sekian dulu Artikel sayafafan Tentang Cara Membuat Multi Tab Di Dalam Satu Gadget
Baca selengkapnya..

Cara Cepat Memodifikasi Template Blogspot

Cara Cepat Memodifikasi Template Blogspot, Cara Cepat Membuat Template Blogspot, Cara Merombak Template bawaan blogger atau blogspot.Dikarenakan membuat template (dari nol) memang susah, maka yang bisa coba anda lakukan adalah, mulailah dengan berkreasi dengan mengedit template bawaan blogspot. Dengan cara mengedit template, termasuk membuang serta menambahkan elemen-elemen baru didalamnya maka nantinya kamu bisa menghasilkan tampilan yang makismal serta unik (dalam artian) tampilan blogmu tidak murahan seperti template kebanyakan orang.

Nah, jika kamu tertarik ingin membuat template blogspot, gunakan saja template standard blogspot, misalkan template tampilan sederhana/mudah. Kemudian, masuk ke pengaturan Design > Edit HTML dan mulailah mengekplorasi apa saja elemen-elemen dalam template kamu.


A. Pertama, mulailah mengedit tampilan halaman utama dengan menghilangkan posting artikel yang tampil sehingga nanti di halaman utama/home page hanya ditampilkan judul postingan saja.

Untuk menghilangkan artikel/hanya menampilkan judul posting saja dihalaman utama/home page lakukan hal berikut:

Mauk ke Design > Edit HTML

Lalu cari kode <b:include data='post' name='post'/>, lalu dan ganti dengan kode berikut:


<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div style='padding:6px 0 6px 5px;margin-bottom:2px;background:#eeeeee;color:#000000;'>
<img alt='&gt;&gt;&gt;' border='0' src='https://lh5.googleusercontent.com/-HP5XyclRQic/TXMMAKmlg5I/AAAAAAAAAQk/wrCGFu9jzmg/s1600/sidebar-icon.png'/>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>


Lalu Save template, lihat dulu hasilnya baru nanti kita lanjut ke langkah modifikasi template blogspot selanjutnya.

B. Langkah ke-2. Menambahkan 2 Kolom Widget dibawah atau diatas Posting

Masih di halaman Edit HTML, cari kode ]]></b:skin>, lalu paste kode berikut tepat diatas kode
 ]]></b:skin>


/*--bawah posting--*/
#underpost h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#underpost{
width:560px;
}
#underleft{
width:270px; /*lebar kolom kiri*/
float:left;
margin:5px;
}
#underright{
width:270px; /*lebar kolom kanan*/
float:right;
margin:5px;
}




Perhatikan kode yang berwarna merah width:560px, itu merupakan lebar dari kolom posting. Sesuaikan saja dengan lebar pada template kamu, biasanya untuk mengetahui lebar/width kolom posting, kita cari kode seperti ini :


#main-wrapper { width: 560px; 

Misalkan saja lebar/width kolom posting seperti contoh diatas yaitu 560px, maka bagi lebar tersebut menjadi dua, karena kita akan membuat dua kolom dibagian kiri dan kanan, sisakan nilainya untuk margin dan padding untuk memberi jarak antara gadget yang lain dengan gadget yang lain. Untuk itu pada lebar kolom kiri dan lebar kolom kanan saya beri angka 270px.


Lalu, cari kode seperti ini :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>



Kalau sudah kamu temukan, lalu lakukan langkah berikut:

- Untuk menambahkan dua kolom dibawah posting, masukkan kode berikut ini tepat dibawah kode yang saya beri warna merah.

<div id='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div>




- Sedangkan kalau mau menambahkan dua kolom diatas posting, pasang kode berikut ini tepat diatas kode yang saya beri warna hijau


<div id='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div>

Lalu, simpan template.

C. Langkah ketiga, tambahkan 2 kolom, 3 kolom, atau 4 kolom widget diatas Footer

Menambahkan banyak kolom diatas footer berguna untuk membuat tampilan home page blog layaknya situs berita populer atau seperti Blogazine/Blog model Magazine.

Caranya, Temukan kode <div id='lower-wrapper'> lalu:

1. Untuk membuat 4 kolom diatas footer, letakkan kode berikut dibawah <div id='lower-wrapper'>

<div id='footer-column-divide'>
<div id='footer1' style='width: 25%; 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: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>


2. Untuk membuat 3 kolom diatas footer, letakkan kode berikut dibawah <div id='lower-wrapper'>

<div id='footer-column-divide'>
<div id='footer1' style='width: 33%; 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: 33%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 33%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>


3. Untuk membuat 2 kolom diatas footer, letakkan kode berikut dibawah <div id='lower-wrapper'>

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


Jika sudah semuanya kamu lakukan, simpan Template, dan lihat hasilnya.

Cek pada Page element, seharusnya nanti diatas footer blog akan menjadi ada kolom-kolom untuk menempatkan widget.

Tambahkan widget-widget terbaik pilihan kamu disana, gunakan juga thumbnail gambar untuk mempercantik tampilan blog layaknya situs-situs besar yang bagus tampilannya.

Misalnya: menampilkan artikel terbaru dengan tampilan thumbnail yang menarik

Caranya: Dari halaman Page Elements, tambahkan widget HTML/Javascript, lalu masukkan kode berikut kedalam widget:

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 10;</script> 
<script type="text/javascript" src="/feeds/posts/default?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Atau, jika ingin menampilkan artikel dengan label tertentu saja maka gunakan kode berikut:

<script type='text/javascript'>var numposts = 2;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 10;</script> 
<script type="text/javascript" src="/feeds/posts/default/-/Download?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Download adalah label posting blog yang saya gunakan, kamu bisa menggantinya dengan Label yang kamu gunakan dalam posting-posting blog kamu.

Ok, sampai disini saya harapkan semua bisa mengikuti.
 
 
Selanjutnya, kita masuk ke tahap penting dalam mendesain tampilan blog yaitu memilih bagian mana saja yang ingin ditampilan di Home Page/halaman utama dan memilih mana saja yang ingin tampil di halaman posting.

Hal ini penting untuk memberi kesan profesional pada halaman utama serta meringankan loading blog saat berada pada halaman posting.



Menampilkan/Menyembunyikan Widget tertentu dihalaman utama blog

Untuk melakukan langkah-langkah tersebut, kamu harus memilih dulu widget mana saja yang ingin kamu tampilkan dihalaman utama/home page dan mana saja yang ingin kamu hilangkan dari halaman utama/home page.

Sebagai contoh, saya akan menghilangkan Recent Post/Posting terbaru dari sidebar halaman utama (namun tetap tampil di sidebar saat membuka halaman posting), maka saya cari kode: 

<b:widget id='HTML11' locked='false' title='Recent Post' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
 <b:include name='quickedit'/>

Lalu saya tambahkan beberapa kode didalamnya sehingga menjadi:

<b:widget id='HTML11' locked='false' title='Terbaru' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
 <b:include name='quickedit'/>
  </b:if>

Langkah tersebut berlaku pula jika kamu ingin menghilangkan widget yang lain.


Rahasianya:

Semua trik untuk memunculkan/menyembunyikan widget tertentu kuncinya adalah: 
Cari kode <b:widget id='(disini berisi kode widgetnya)'

Lalu tinggal tambahkan kode berikut, dengan ketentuan:

a. Untuk membuat widget hanya tampil di Home Page saja

Sisipkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> di bawah kode <b:includable id='main'>

Lalu tutup dengan kode </b:if> di bawah kode <b:include name='quickedit'/>

b. Sedangkan untuk membuat widget hanya tampil di halaman posting saja

Sisipkan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> di bawah kode <b:includable id='main'> 

Dan tutup dengan </b:if> di bawah kode <b:include name='quickedit'/>

Lalu simpan template.

Lakukan semua langkah-langkah diatas dengan hati-hati, pastikan backup dulu templatenya jika kamu kawatir nanti gagal dan menyembabkan eror. Atau jika belum yakin gunakan Preview dulu sebelum menyimpan templatenya.

Lakukan langkah-langkah diatas sesuai kebutuhan, semakin tinggi daya kreatifitas kamu maka template hasil desain kamu nantinya hasilnya pasti akan bagus dan maksimal. Sekian dulu Artikel sayafafan tentang Cara Cepat Memodifikasi Template Blogspot
Baca selengkapnya..

Cara Membuat Slide Infinite Carousel di Blogspot

Cara Membuat Slide Infinite Carousel di Blogspot, Dalam tutorial kali ini, kita akan membahas tentang bagaimana cara membuat Slide Show Infinite Carousel. Slide ini dapat dipakai dalam platform Blogger. Baik gambar maupun kode-kode disini hanya digunakan untuk pembelajaran, kalian dapat mengedit sendiri kode dan gambar nya sesuai dengan selera kalian.
Langkah 1
Masuk ke akun Blogger kamu, kemudian buka Edit HTML. Masukkan kode dibawah ini sesudah
<b:include data='blog' name='all-head-content'/>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
    <script charset='utf-8' src='http://blognusa-infinitecarousel.googlecode.com/files/jquery.js' type='text/javascript'/>



Langkah 2
Cari kode /head, kemudian masukkan kode dibawah ini sebelum kode /head,

    <style type='text/css'>
    #carousel_inner {
    float:left; /* important for inline positioning */
    width:630px; /* important (this width = width of list item(including margin) * items shown */
    overflow: hidden;  /* important (hide the items outside the div) */
    /* non-important styling bellow */
    background: #F0F0F0;
    }
    #carousel_ul {
    position:relative;
    left:-210px; /* important (this should be negative number of list items width(including margin) */
    list-style-type: none; /* removing the default styling for unordered list items */
    margin: 0px;
    padding: 0px;
    width:9999px; /* important */
    /* non-important styling bellow */
    padding-bottom:10px;
    }
    #carousel_ul li{
    float: left; /* important for inline positioning of the list items */                          
    width:200px;  /* fixed width, important */
    /* just styling bellow*/
    padding:0px;
    height:110px;
    background: #000000;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:5px;
    margin-right:5px;
    }
    #carousel_ul li img {
    .margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor so this is to fix that*/
    /* styling */
    cursor:pointer;
    cursor: hand;
    border:0px;
    }
    #left_scroll, #right_scroll{
    float:left;
    height:130px;
    width:15px;
    background: #C0C0C0;
    }
    #left_scroll img, #right_scroll img{
    /*styling*/
    cursor: pointer;
    cursor: hand;
    }</style>


Kemudian simpan dulu templatenya.

Langkah 3
Masuk ke Elemen Laman, kemudian pilih posisi widget dimana kalian akan menempatkan slide tersebut. Klik Tambahkan Widget, kemudian pilih HTML/JavaScript. Masukkan kode dibawah ini kedalam widget tersebut,

    <div id='carousel_container'>
      <div id='left_scroll'><img src='http://web.enavu.com/demos/left.png' /></div>
      <div id='carousel_inner'>
            <ul id='carousel_ul'>
                <li><a href='#'><img src='http://web.enavu.com/demos/item1.png' /></a></li>
                <li><a href='#'><img src='http://web.enavu.com/demos/item2.png' /></a></li>
                <li><a href='#'><img src='http://web.enavu.com/demos/item3.png' /></a></li>
                <li><a href='#'><img src='http://web.enavu.com/demos/item4.png' /></a></li>
                <li><a href='#'><img src='http://web.enavu.com/demos/item5.png' /></a></li>
            </ul>
      </div>
      <div id='right_scroll'><img src='http://web.enavu.com/demos/right.png' /></div>
    </div>


Keterangan :

    Langkah pertama merupakan setingan jquery dari slide ini. Kode tersebut harus terpasang diblog kamu.
    Langkah kedua merupakan setingan kode CSS. Kalian bisa mengubah sendiri sesuai dengan selera, namun hal ini hanya disarankan bagi kalian yang menguasai kode-kode CSS dan HTML.
    Langkah ketiga merupakan tampat kita menempatkan slide ini di blog kita. Kalian dapat mengubah gambar dan link sesuai dengan keinginan kalian.



Sekian dulu Artikel sayafafan tentang Cara Membuat Slide Infinite Carousel di Blogspot
Baca selengkapnya..

Menampilkan Judul Posting Saja Saat Label Di Klik

Menampilkan Judul Posting Saja Saat Label Di Klik, Hanya Judul Posting yang Muncul Ketika Label Di Pilih. Hal ini bisa membuat tampilan jadi lebih ringkas, padat dan fokus tertuju bagi anda yang suka tampilan tersebut.

Adapun cara membuat menampilkan judul posting saja pada label yang di klik adalah sebagai berikut :

Pertama, login ke akun blog blogger sobat.
Kedua, pilih Template.
Ketiga, untuk menjaga template, silahkan download template, klik Dawnload Template Lengkap yang berada pada samping pojok kanan.
Keempat, klik Edit HTML, klik Lanjutkan, kemudian jangan lupa untuk Expand Template Widget.
Kelima, gunakan Ctrl F atau F3 cari kode <b:include data='post' name='post'/> dan kalau sudah ketemu ganti kode <b:include data='post' name='post'/> dengan kode dibawah ini

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>


Keenam, klik Pritinjau untuk melihat tidak terjadi kesalahan eror pada saat edit template, jika sudah klik Simpan Template dan lihat hasilnya.

Sekian dulu Artikel sayafafan tentang Menampilkan Judul Posting Saja Saat Label Di Klik
Baca selengkapnya..

Senin, 18 Maret 2013

Cara Membuat Iklan Muncul Berbeda Sesuai Kategori

Cara Membuat Iklan Muncul Berbeda Sesuai Kategori,  bahwa kita dapat melakukan pengontrolan banyak hal dengan kategori termasuk pengontrolan munculnya iklan. Dengan kategori kita dapat mengatur iklan apa saja yang ingin muncul dalam kategori tertentu, sehingga iklan yang muncul akan berbeda sesuai dengan kategori yang diinginkan.

Hal diatas bisa anda lakukan dengan kode if conditional category seperti ini:


<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;kategori satu&quot;'>
Kode iklan 1
<b:else/>
<b:if cond='data:label.name == &quot;kategori dua&quot;'>
Kode iklan 2
</b:if>
<b:else/>
<b:if cond='data:label.name == &quot;kategori tiga&quot;'>
Kode iklan 3
</b:if>
</b:if>
</b:loop> 


Kode diatas adalah contoh kode pengontrolan iklan untuk tiga nama kategori saja, tentu bila anda ingin lebih banyak kategori, tinggal ditambahkan saja.

Beberapa contoh penerapan dalam mengontrol iklan.

Contoh 1

Iklan google adsense hanya muncul pada kategori ekonomi, selain dari itu yang muncul iklan kliksayacom :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;ekonomi&quot;'>
Kode iklan adsense (yg sudah diparse)
<b:else/>
Kode iklan KlikSayacom
</b:if>
</b:loop>



Kode diatas adalah contoh kode pengontrolan iklan untuk tiga nama kategori saja, tentu bila anda ingin lebih banyak kategori, tinggal ditambahkan saja.

Beberapa contoh penerapan dalam mengontrol iklan.

Contoh 2

Iklan google adsense tidak ingin muncul khusus pada kategori review :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;review&quot;'>
<b:else/>
Kode iklan adsense (yg sudah diparse)
</b:if>
</b:loop>


Cara membuat iklan muncul berbeda sesuai kategori

Agar sedikit lebih jelas, Coba contoh yang lebih spesifik. Misalkan kita mempunyai dua banner seperti di bawah ini :

<a href='http://www.sayafafan.blogspot.com/' title='sayafafan'><img alt='KR Tutor plus' border='0' src="http://i1156.photobucket.com/albums/p571/agamaislam/mobil.png' /></a>

<a href='http://sarangburungwaletrumah.blogspot.com/' title='KR Jobs'><img alt='KR Jobs' border='0' src='https://lh3.googleusercontent.com/-AEGnHv2wwMc/TYJBWT53V2I/AAAAAAAAACs/lSMIBXV6Tgo/s320/PointBlank_20110317_114129.jpg' /></a>



Banner pertama hanya ingin muncul pada kategori: teknologi, dan banner kedua hanya ingin muncul pada kategori: ekonomi, maka kode yang harus di pasang adalah seperti ini :

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;teknologi&quot;'>
<a href='http://www.krtutorplus.com/' title='KR Tutor plus'><img border='0' src='http://1.bp.blogspot.com/-xd4DJcOx4mc/T-kU_IKstXI/AAAAAAAAA64/G0qVlQvdyW8/s1600/krtutor.jpg' alt='KR Tutor plus'/></a>
<b:else/>
<b:if cond='data:label.name == &quot;ekonomi&quot;'>
<a href='http://lowongankerja.krtutorplus.com/' title='KR Jobs'><img border='0' src='http://3.bp.blogspot.com/-kHkIkDz5YGk/T-kVA32yewI/AAAAAAAAA7A/NR-jOiDxIUY/s1600/krjobs.jpg' alt='KR Jobs'/></a>
</b:if>
</b:if>
</b:loop>


Langkah selanjutnya adalah menentukan iklan itu akan disimpan di mana? Sebagai contoh iklan tersebut ingin ditempatkan diatas posting dan hanya muncul pada single post (di halaman depan tidak muncul), maka kode yang sesuai adalah seperti berikut:

<b:if cond='data:blog.pageType == "item"'>
<p>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;teknologi&quot;'>
<a href='http://www.krtutorplus.com/" title='KR Tutor plus'><img border="0" src="http://1.bp.blogspot.com/-xd4DJcOx4mc/T-kU_IKstXI/AAAAAAAAA64/G0qVlQvdyW8/s1600/krtutor.jpg" alt='KR Tutor plus'/></a>
<b:else/>
<b:if cond='data:label.name == &quot;ekonomi&quot;'>
<a href='http://lowongankerja.krtutorplus.com/' title='KR Jobs'><img border="0" src="http://3.bp.blogspot.com/-kHkIkDz5YGk/T-kVA32yewI/AAAAAAAAA7A/NR-jOiDxIUY/s1600/krjobs.jpg" alt='KR Jobs'/></a>
</b:if>
</b:if>
</b:loop>
</p>
</b:if>
 
Kode tersebut harus ditempatkan persis diatas kode <data:post.body/>. Langkah selengkapnya :

Cari kode berikut: <data:post.body/> (gunakan CTRL+F untuk pencarian cepat) :
Copy paste kode berikut persis diatas kode tadi:

<b:if cond='data:blog.pageType == "item"'>
<p>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;teknologi&quot;'>
<a href='http://www.krtutorplus.com/" title='KR Tutor plus'><img border="0" src="http://1.bp.blogspot.com/-xd4DJcOx4mc/T-kU_IKstXI/AAAAAAAAA64/G0qVlQvdyW8/s1600/krtutor.jpg" alt='KR Tutor plus'/></a>
<b:else/>
<b:if cond='data:label.name == &quot;ekonomi&quot;'>
<a href='http://lowongankerja.krtutorplus.com/' title='KR Jobs'><img border="0" src="http://3.bp.blogspot.com/-kHkIkDz5YGk/T-kVA32yewI/AAAAAAAAA7A/NR-jOiDxIUY/s1600/krjobs.jpg" alt='KR Jobs'/></a>
</b:if>
</b:if>
</b:loop>
</p>
</b:if>


Klik tombol Simpan Template.

simpan template>

Selesai.

Ketika anda membuat artikel yang di beri kategori teknologi atau ekonomi, maka iklan yang tadi akan muncul, selain kategori tersebut,  iklan tidak akan muncul.
Sekian dulu Artikel sayafafan tentang Cara Membuat Iklan Muncul Berbeda Sesuai Kategori
Baca selengkapnya..