Kumpulan Widget untuk Blogspot

 

1. Menampilkan widget hanya di Homepage

<b:if cond="data:blog.url == data:blog.homepageUrl">
.......ISI......
</b:if>

2. Menampilkan widget selain di Homepage

<b:if cond="data:blog.url != data:blog.homepageUrl">
.......ISI......
</b:if>

3. Menampilkan widget hanya di Archivepage

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
.......ISI......
</b:if>

4. Menampilkan Widget selain di Archivepages

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
.......ISI.....
</b:if>

5. Menampilkan Widget hanya di Itempages / Postingan

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

6. Menampilkan widget selain di Itempages

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

7. Menampilkan widget hanya di Staticpages

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
.......ISI......
</b:if>

8. Menampilkan widget selain di Staticpages

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.......ISI CSS......
</b:if>

9. Menampilkan widget pada URL atau halaman tertentu

<b:if cond='data:blog.url == &quot;alamatpostingan&quot;'>
.......ISI CSS......
</b:if>

10. Menampilkan widget selain di URL atau halaman tertentu

<b:if cond='data:blog.url != &quot;alamatpostingan&quot;'>
.......ISI CSS......
</b:if>

11. Menampilkan widget hanya halaman muka, tidak terlihat dihalaman posting

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.......ISI CSS......
.......ISI JAVASCRIPT......
</b:if>
</b:if>

12. Halaman ERROR

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<a expr:href='HALAMAN/LINK_POSTINGAN_ERROR'/></b:if>

13. Menampilkan widget di halaman mobile/seluler

<b:if cond='data:blog.isMobile'>
... Isi ...
</b:if>

14. Menampilkan widget di halaman perambaan label Semua/Umum

<b:if cond='data:blog.searchLabel'>
-----Isi-----------
</b:if>

15. Menampilkan widget di halaman perambaan label Tertentu/Spesifik

<b:if cond='data:blog.searchLabel == &quot;NAMA LABEL&quot;'>
-----Isi-----------
</b:if>

16. Menampilkan widget di halaman perambaan Keyword

<b:if cond='data:blog.searchQuery == &quot;KEYWORD&quot;'>
-----ISI-----------
</b:if>

17. Menampilkan widget di halaman Posting Pertama

<b:if cond='data:post.isFirstPost'>
-----ISI-----------
</b:if>

 Contoh cara penggunaan :

 <b:widget id='HTML2' locked='false' title='' 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:include name='quickedit'/>
</b:includable>
    </b:widget>

Cara Menambahkan Widget 3 Kolom Footer Pada Blogger Anda

Apakah Anda adalah seorang blogger yang ingin memiliki 3 kolom footer yang bagus yang terpasang di blog Anda? Jika ya Anda tidak sendirian, kami selalu ada untuk berbagi sedikit yang kami ketahui kepada Anda secara gratis. Jika 3 kolom footer ini memang benar-benar Anda butuhkan maka Anda dapat menambahkannya secara mudah dan sederhana pada blog Anda. Kami telah menyediakan kodenya untuk Anda semua, silahkan Anda terapkan dalam blog Anda semua dengan proses instalasi yang sangat sederhana.

Tapi sebelum kita melompat ke proses instalasi, saya ingin menjelaskan lebih lanjut tentang apa dan mengapa Anda perlu menginstal widget di footer blogger Anda. Pada awalnya dengan widget 3 kolom footer ini Anda dapat menambahkan banyak gadget yang Anda inginkan, widget footer ini juga membuat blog Anda terlihat bagus dan professional. Itu sebabnya banyak blogger menggunakan widget ini di blog mereka.

Baiklah langsung saja ikuti langkah-langkah di bawah ini untuk menambahkan widget 3 kolom footer di blog Anda.

Menambahkan 3 Kolom Footer di Blogger

• Login ke Dashboard blog Anda
• Pilih tab Template

• Backup dulu template Anda jika diperlukan
• Klik Edit HTML
• Kemudian cari kode ]]></b:skin> (Gunakan Ctrl + F untuk memudahkan pencarian)
• Lalu letakkan kode di bawah ini tepat di atas kode ]]></b:skin> tadi

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
}
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}
       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}
.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

• Setelah itu cari kode </body> dan letakkan kode di bawah ini tepat sebelum kode </body>

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

• Klik Save template kemudian masuk ke tab Layout - Gulir ke bawah dan Anda siap menambahkan gadget yang Anda inginkan di sana.

Pengaturan
Anda dapat dengan mudah menyesuaikan tampilan dan warna dari widget footer ini. Saya telah menandai dan mewarnai bagian-bagian penting dalam kode CSS di atas. Bacalah deskripsi di bawah ini dengan hati-hati untuk menyesuaikan widget 3 kolom ini sesuai keinginan Anda. Untuk mengetahui kode warna, gunakanlah Kode Warna Generator milik kami.

• background:#333434; Gantilah 6 digit kode warna pada bagian ini untuk mengubah warna background widget.
• width: 960px; Ini adalah lebar widget. Jika Anda mau, Anda dapat menyesuaikan nilai ini agar lebarnya sesuai dengan lebar blog Anda.
• background:#fff dan width: 32%; Ini adalah warna background dan lebar tiga kolom widget yang ditambahkan.
• color:#0084ce; Ini adalah warna Title Heading
• font: bold 14px Arial, Tahoma, Verdana; Edit bagian ini untuk mengganti ukuran font dan jenis font.
• border-bottom: 3px solid # 0084ce; Edit bagian ini untuk mengubah ketebalan, style, dan warna border yang muncul di bagian bawah Title Heading.
• border-bottom: 1px dotted # ccc; Edit bagian ini untuk mengubah ukuran, style, dan warna border yang muncul di bawah link.

Membuat Mode Grid Pada Post Homepage Blogger

Membuat Mode Grid Pada Post Homepage Blogger - Secara umum semua template blogger yang masih standar (default) pada post homepage menggunakan struktur list post. Walaupun sekarang sudah banyak penyedia template blogger yang gratis dengan fitur-fitur yang menarik, namun beberapa blogger terutama yang masih belajar dalam desain blog mungkin tidak menghalangi niat untuk mencari cara sendiri agar gaya template blognya memiliki tampilan grid atau bergaya galeri. Saya telah menerima beberapa email dari blogger yang berbeda bertanya, apakah ada cara untuk membuat template default blogspot bisa menampilkan post grid. Tentu saja bisa, cara ini tidak luput dengan adanya fungsi jQuery. Sekarang akan saya bahas disini bagaimana agar homepage blog dapat menampilkan pola grid dan bisa berfungsi dengan baik sekaligus kita lengkapi dengan tombol auto read more. jQuery ini yang nanti akan memposisikan posting thumbnail di bagian atas dan menyelaraskan ringkasan post di bagian bawahnya dengan disertai jump break atau read more secara otomatis yang akan muncul di akhir setiap ringkasan setelah jumlah karakter tertentu. Fungsi jQuery Hack hanya akan bekerja pada homepage, arsip, label dan mencari halaman (tidak dengan pencarian Google custom). Untuk lebih detailnya, berikut penjelasan cara Membuat Mode Grid Pada Post Homepage Blogger.
Demo
1. Pada bagian dashbord blog pilih menu Template kemudian Edit HTML.
2. Selanjutnya copy kode berikut ini, lalu pasang di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot; ;
summary_noimg = 400;
summary_img = 180;
img_thumb_height = 130;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[
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>
<style type='text/css'>
.post {width:44%;height:370px;float:left;margin:10px;position:relative;display: block;}
.post h3{height:32px;margin-top:60px; margin-bottom:-15px;padding:5px;font-family: Helvetica, Arial;line-height:1em;font-weight: bold;  font-size:16px;letter-spacing:-0.5px;}
.post-body {padding:5px;height:241.5px;font-family: Helvetica, Arial; font-size: 13px; margin:20px;}
.post-footer {margin-top:30px;height:20px;}
.post-labels {display:none;}
.mobile .post {width:auto;height:auto;}
.mobile .post-body {height:auto;}
.more {float:right;background:#52e052;color:#000!important;padding:5px 10px;text-decoration:none!important;transition: all 1s ease;}
.more:hover {background:#ff0000;color:#fff!important;text-decoration:none!important;}
</style>
</b:if>
</b:if>

Jika tidak ingin menampilkan thumbnail post, ubah "yes" menjadi "no".
Angka "400" merupakan jumlah karakter yang akan ditampilkan jika ada sebuah post tidak memiliki gambar.
Angka "180" merupakan jumlah karakter yang akan ditampilkan jika sebuah post memiliki gambar, tapi hanya gambar pertama dalam struktur post yang akan digunakan sebagai thumbnail.
Ketinggian thumbnail adalah "130" dan Lebar thumbnail adalah "220". Kedua ketinggian thumbnail dan nilai lebar dapat disesuaikan dengan nilai pilihan anda sendiri.

3. Kemudian cari kode <data:post.body/> kemungkinan terdapat 2-3 kode, lalu replace salah satu kode tersebut dengan kode berikut ini untuk memasang auto read more. Pada template yang saya gunakan, replace pada kode <data:post.body/> yang kedua.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> <b:else/> <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> <a class='more' expr:href='data:post.url'>Read More</a> </b:if> </b:if>

Anda dapat mengubah kata "Read More" agar menjadi lebih menarik seperti "Lanjutkan membaca" atau lainnya, bisa juga mengganti read more dengan tombol gambar.

4. Jika sudah, Simpan template.

Apabila mengalami masalah seperti tombol Home, Newer post, maupun Older post yang hilang. Caranya di perbaiki dengan masuk ke Edit HTML lagi lalu cari kode <b:includable id='nextprev'> kemudian paste kode berikut ini di bawahnya.

<div style='clear:both;'/>

Sekian dasar dari cara Membuat Mode Grid Pada Post Homepage Blogger, nanti anda bisa mengembangkannya dengan memberi background dan border atau lainnya agar lebih serasi dengan template blog yang di gunakan.

source : http://mas-andes.blogspot.com/2013/11/membuat-tampilan-grid-post-homepage-blog.html

Mengosongkan template blogger

Berikut ini adalah contoh untuk membuat template blogger :


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

    <b:skin><![CDATA[/*
-----------------------------------------------
Blank Blogger Template by Rose 91481
Name:        Blank Blogger Template
Designer:        Rose
URL:        http://widgetgenerators.blogspot.com
Get This:     http://widgetgenerators.blogspot.com/2012/11/blank-blogger-template-or-blank-html.html
----------------------------------------------- */



]]></b:skin>

  
  </head>

  <body>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>


<div style='margin-top:700px; '>
<br/>
<center><b><font color='#ffffff'>&#169; All Rights Resrved by <a href='http://www.widgetgenerators.blogspot.com' style="color: #ffffff">Widget Generators</a> 2012.</font></b></center>
</div>
  
</body>

</html>



Sekian dan terima kasih

Toko Online Blogspot dengan Template Catalogspot K2

Catalogspot K2 Ecommerce Blogger template adalah versi kedua dari Catalogspot shopping cart Blogger Template. Catalogspot K2 lebih simple dan memiliki fitur gambar slide, yang menggunakan plugin Juery Flexslider, dan dipadukan dengan animasi CSS3. Silhakan lihat demo template melalui link berikut :

Live Demo       Download

Jika anda berminat menggunakan template ini silahkan download langsung, dan berikut adalah cara optimasi Catalogspot Blogger Template ini.

Cara Intall Template

Untuk cara instal itu simpel.

1. Unzip file Catalog blogger template yang sudah anda download
2. Masuk ke Blogger Halaman Template, lalu klik EDIT HTML
3. Buka file XML Catalogspot K2 dengan HTML Editor seperti Notepad++ untuk Windows atau extWrangler untuk Mac.
4. Lalu Copy semua kode template dan Paste kedalam EDIT HTML Blogger
5. Klik Save Template

Setting Checkout

Untuk setting Paypal akun anda harus ke EDIT HTML lalu temukan kode berikut :

<script type='text/javascript'>
//<![CDATA[
/*----------------------------
SIMPLE CART SETTING
-----------------------------*/
  
  simpleCart({
    checkout: {
      type: "PayPal", 
      email: "joko-you@yours.com"
    }
  });
  
//]]>
</script>

ganti alamat email dengan alamat email akun paypal anda.

Format Post

Untuk Template ini, setiap posting atau entry harus menggunakan format post yang tersedia, agar template ini bekerja dengan maksimal.

<div class="item_image">
<img border="0" class="item_thumb" src="Your_Image-Url.jpg" /> 
<span class="item_price">$0.00</span>
</div>
<div class="item_Description">
Some text for description your item here! 
</div>

Yang perlu diganti adalah gambar sebagai preview dari item anda, harga item dan deskripsi dari item anda. setelah anda mengganti semuanya anda copy kode dan paste di post editor, klik tobol HTML di sebelah kiri atas post editor sebelum anda masukan kode diatas. dan pastikan juga lebar gambar lebih dari 700px

Membuat Halaman View Cart

1. Buka halaman PAGES di dasboard Blog anda,
2. Klik New Page Lalu Klik New Blank
3. Setelah Post editor terbuka klik HTML dan copy paste kode berikut
   

   <div class="simpleCart_items"></div>
   

   
   
4. Terkhir Klik tombol Publish

Setting Slider

Kode html untuk abar fitur slide ada didalah kode template, jadi anda harus ke halaman Edit HTMl, bentuk kode slidernya seperti berikut :



Anda dapat mengganti seua gambar dan textnya disini. sedangkan untuk pengaturan, javascriptnya diletakan dibawah tepat diatas penutup body (</body>)

Dan akhrinya,, terimakasih telah berkunjung dan semoga template ini dapat bermanfaat. Untuk Template selanjutnya saya ingin membuat template Blogger bertema Photography, Insya allah. hehe. salam

Update : Template bisa checkout lewat email, untuk anda yang ingin checkoutnya melalui email silahkan Download di Melius Nerwork, Matur suwun kepada melius Network yang sudah share dan modifikasi.

Source : http://www.loefa-cebook.com/2013/06/catalogspot-k2-e-commerce-blogger.html

Catalogspot K2 E-Commerce Blogger Template

Catalogspot K2 Ecommerce Blogger template adalah versi kedua dari Catalogspot shopping cart Blogger Template. Catalogspot K2 lebih simple dan memiliki fitur gambar slide, yang menggunakan plugin Juery Flexslider, dan dipadukan dengan animasi CSS3. Silhakan lihat demo template melalui link berikut :

Live Demo       Download

Jika anda berminat menggunakan template ini silahkan download langsung, dan berikut adalah cara optimasi Catalogspot Blogger Template ini.

Cara Intall Template

Untuk cara instal itu simpel.

1. Unzip file Catalog blogger template yang sudah anda download
2. Masuk ke Blogger Halaman Template, lalu klik EDIT HTML
3. Buka file XML Catalogspot K2 dengan HTML Editor seperti Notepad++ untuk Windows atau extWrangler untuk Mac.
4. Lalu Copy semua kode template dan Paste kedalam EDIT HTML Blogger
5. Klik Save Template

Setting Checkout

Untuk setting Paypal akun anda harus ke EDIT HTML lalu temukan kode berikut :

<script type='text/javascript'>
//<![CDATA[
/*----------------------------
SIMPLE CART SETTING
-----------------------------*/
  
  simpleCart({
    checkout: {
      type: "PayPal", 
      email: "joko-you@yours.com"
    }
  });
  
//]]>
</script>

ganti alamat email dengan alamat email akun paypal anda.

Format Post

Untuk Template ini, setiap posting atau entry harus menggunakan format post yang tersedia, agar template ini bekerja dengan maksimal.

<div class="item_image">
<img border="0" class="item_thumb" src="Your_Image-Url.jpg" /> 
<span class="item_price">$0.00</span>
</div>
<div class="item_Description">
Some text for description your item here! 
</div>

Yang perlu diganti adalah gambar sebagai preview dari item anda, harga item dan deskripsi dari item anda. setelah anda mengganti semuanya anda copy kode dan paste di post editor, klik tobol HTML di sebelah kiri atas post editor sebelum anda masukan kode diatas. dan pastikan juga lebar gambar lebih dari 700px

Membuat Halaman View Cart

1. Buka halaman PAGES di dasboard Blog anda,
2. Klik New Page Lalu Klik New Blank
3. Setelah Post editor terbuka klik HTML dan copy paste kode berikut
   

   <div class="simpleCart_items"></div>
   

   
   
4. Terkhir Klik tombol Publish

Setting Slider

Kode html untuk abar fitur slide ada didalah kode template, jadi anda harus ke halaman Edit HTMl, bentuk kode slidernya seperti berikut :



Anda dapat mengganti seua gambar dan textnya disini. sedangkan untuk pengaturan, javascriptnya diletakan dibawah tepat diatas penutup body (</body>)

Dan akhrinya,, terimakasih telah berkunjung dan semoga template ini dapat bermanfaat. Untuk Template selanjutnya saya ingin membuat template Blogger bertema Photography, Insya allah. hehe. salam

Update : Template bisa checkout lewat email, untuk anda yang ingin checkoutnya melalui email silahkan Download di Melius Nerwork, Matur suwun kepada melius Network yang sudah share dan modifikasi.