Modifikasi, Mempercantik, Merubah, Merombak, HTML, Blog, Blogger, Blogspot, Website, Chrome, krom: Maret 2013

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 :

Login ke Blogger dengan ID sobat
Di halaman Dasbor, kita pilih Tata Letak.
Kemudian pilih Edit HTML.
Jangan lupa Backup Template sobat agar mudah mengembalikan jika terjadi kesalahan.
Beri tanda centang pada cekbox “expand template widget”.
Gunakan F3 pada keyboard komputer anda untuk mencari kode widget anda. Contoh: 'Artikel Terbaru'.
Setelah ketemu, berikut cara memodifikasiny :

..:: Membuat Widget Tampil di HomePage ::..

Sisipkan kode : <b:if cond='data:blog.url == data:blog.homepageUrl'> dibawah kode <b:includable id='main'>
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'>  <b:if cond='data:title != ""'> <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 ::..

Sisipkan kode :

<b:if cond='data:blog.pageType == "item"'> dibawah kode <b:includable id='main'>
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"'>

<b:if cond='data:title != ""'>
<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.

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 != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </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 == "item"'><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 :

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

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

6. Langkah selanjutnya cari lagi kode di bawah ini atau yang mirip dengan kode ini :

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

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


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



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



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


</div>

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 != "item"'>
<a expr:href='data:post.url'>
<div style='padding:6px 0 6px 5px;margin-bottom:2px;background:#eeeeee;color:#000000;'>
<img alt='>>>' 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

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

<b:if cond='data:title != ""'>

<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 == "item"'>

<b:if cond='data:title != ""'>

<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 == "item"'> 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 Memasang Floating Spoiler Menu Pada Blog

Cara Memasang Floating Spoiler Menu Pada Blog, Trik Pasang Floating Spoiler Menu di Blog. Floating Spolier Menu adalah salah satu fitur blog yang menampilkan menu blog dengan tampilan melayang dan dalam bentuk spoiler. Kalau Floating Spolier Menu dibayangi crusor, maka Floating Spolier Menu secara otomatis terbuka. Mungkin sobat blogger jarang menemukan blog yang memasang menu blog-nya dengan tampilan menu seperti ini, Floating Spolier Menu bisa dijadikan salah satu solusi pengganti menu horizontal atau menu vertikal. Fitur blog yang keren ini saya dapatkan dari salah satu blog yang berbahasa Inggris, Tapi maaf, saya lupa alamat blog tersebut.

Cara buat Floating Spolier Menu sebagai berikut :

Log In di http://www.blogger.com/
Pada Dashbor klik Design
Klik Add a Gadget dan HTML Java Script
Copy kode di bawah ini dan paste pada kolom yang tersedia

Klik Save

Tambahan :

right:5px; dan center:0px; adalah posisi dari Floating Spolier Menu, silahkan sobat blogger sesuaikan
Ganti kata TITLE dengan kata yang sobat inginkan
Sesuaikan Link dan title link dari kode atas

Sekian dulu Artikel sayafafan tentang Cara Memasang Floating Spoiler Menu Pada Blog

Baca selengkapnya..