ads

Slider[Style1]

Style2

Style3[OneLeft]

Style3[OneRight]

Style4

Style5

Cara Pasang Iklan Berdampingan Dibawah Postingan Blog


Cara Pasang Iklan Berdampingan Dibawah Postingan Blog


Berikut ini adalah Cara Pasang Iklan Berdampingan Dibawah Postingan Blog >>
1. Login ke blogspot sobat,
2. Buka Template => Edit HTML
3. Lalu cari kode berikut ini (lebih mudah dengan ctrl+F) :

    <data:post.body/>

4. Kalau sudah ketemu taruh kode berikut tepat di bawah kode di atas. Biasanya kode di atas ada 2-3 kode,taruh pada kode yang paling terakhir.

    <!-- Iklan bawah post start -->
    &lt;!-- Iklan bawah post start --&gt;
    <table><tr><td>
    KODE IKlan 1 Taruh di sini
    </td><td>
    KODE IKlan 2 Taruh di sini
    </td></tr></table>
    &lt;!-- Iklan bawah post end --&gt;

 Keterangan !!!!

Taruh kode iklan / banner sobat pada tulisan BIRU di atas untuk Iklan pertama, dan iklan ke-2 taruh di warna biru.

5. Sebelum template/settingan disimpan, pastikan dulu kode iklan sobat di parse jika diperlukan. Biasanya harus di parse terlebih dahulu. Parse DISINI
6. Jika sudah, Silahkan klik Save Template. Lalu lihat hasilnya di Blog sobat.


::Selamat Mencoba::





Cara Membuat Status Facebook Biru


Sekali lagi tentang Facebook, seperti tiada habisnya jika kita terus menggunakan facebook dan mengutak-atik di dalamnya, sangat banyak sekali fitur yang disediakan oleh facebook, baik yang sobat sadari atau yang tidak pernah sobat sadari.

Jejaring sosial yang satu ini sangat mengagumkan bagi saya, hampir semua orang di dunia mempunyai, bahkan mungkin 90 % remaja dunia berada di jejaring sosial yang satu ini.

Beberapa hari lalu saya melihat ada sebuah status temen kok seperti status, tapi bisa diklik, dan seperti link tapi menuju langsung ke akun facebook orang yang membuat status tersebut, akhirnya setelah browsing, nemu deh untuk cara ini, dan kali ini sakan share kepada sobat.

jadi begini, ketika sobat membuat status, status sobat akan berubah menjadi berwarna biru yang sebenarnya adalah sebuah link yang menuju langsung ke akun sobat, seperti berikut -> Status Biru

Lah jika sobat pengen coba membuatnya silahkan, caranya sangat mudah, pada kotak status tuliskan kode berikut :

KODE -->>   @@[0:[0:1: Tulis Status Sobat Disini]]

Ganti tulisan merah dalam kode diatas dengan status sobat, dan poskan deh ke facebook, mudah kan..

sekian saja dari saya untuk kali ini, semoga saja bermanfaat, jika sobat ingin bertanya atau menambahkan silahkan komen di bawah..



Cara Buat Aplikasi Facebook Untuk Update Status Facebook Buatan Sendiri


Hai sobat blogger, rasanya lumayan lama saya gak update di blog ini, dan kali ini saya mau mengawalinya lagi dengan tutorial tentang facebook,

Kali ini saya akan membagikan tips tentang cara membuat aplikasi untuk update status via macem-macem, sebelumnya saya sudah pernah membuat posting tentang bagaimana cara membuat aplikasi facebook untuk update status via macem-macem, tapi sayangnya beberapa hari yang lalu saya tes kembali cara tersebut ternyata sudah tidak bisa karena server pembuat aplikasi tersebut tidak bisa dibuka, entah tidak tau saya sebabnya. mungkin karena lagi maintenance, atau memang sudah tutup selamanya. artikelnya bisa dilihat disini

Jika server pembuat aplikasi update status tersebut benar-benar sudah mati, nah sekarang ini saya ingin share cara terbarunya, dan dijamin masih work untuk saat ini, karena yang saya berikan adalah link server pembuat aplikasi update status yang berbeda,. dan berikut adalah caranya :

Langkah pertama
-  yang pertama kali harus sobat lakukan adalah masuk ke Facebook.com
-  kemudian masuk disana dengan email dan pasword seperti biasa
-  konfirmasikan hp sobat disini

Langkah kedua
-  Buat aplikasi facebookmu disini
-  link diatas menuju ke tempat pembuatan aplikasi facebook
-  pada halaman tersebut disebelah kanan atas ada sebuah tombol Create New Aplication

-  klik tombol tersebut dan akan muncul popup seperti ini

-  Masukkan App Name dengan nama aplikasi yang akan sobat buat
-  masukkan App Namespace dengan nama aplikasi sebagai url aplikasi nantinya, misalkan saya isi dengan pro-duck maka url aplikasi nantinya akan jadi seperti http://apps.facebook.com/pro-duck/
-  pastikan agar app name valid, dan app namespace available, jika tidak sobat tidak akan bisa melanjutkannya
-  untuk Web hosting biarkan saja, jangan dicentang
-  setelah selesai klik Continue , dan akan muncul kotak rechapta, isi sesuai dengan gambar diatasnya.
-  setelah selesai klik lagi Continue
-  maka popup akan hilang dan sobat akan terdirect ke halaman aplikasi sobat yang baru saja sobat buat, seperti halaman app berikut
-  ambil dan copy App ID dan App Secret.
-  secara default aplikasi sobat sudah jadi, tapi masih belum bisa digunakan,lanjutkan ke langkah selanjutnya
-  jangan tutup dulu halaman ini, sebaiknya langkah ketiga dilakukan pada Tab baru

Langkah ketiga
-  masuk kesini, link tersebut menuju ke halaman pembuatan aplikasi (App Builder)
-  kemudian klik start untuk memulai membuat aplikasinya


-  kemudian sobat akan melihat form yang harus diisi seperti screenshot berikut :

-  isikan Application Name  dengan nama aplikasi yang ini sobat buat, misalkan saya ini dengan pro-duck
-  kemudian dibawahnya isikan dengan deskripsi tentang aplikasi sobat
-  Untuk Language pilih dengan bahasa indonesia, biarkan juga boleh
-  kemudian dibawahnya lagi pilih gambar sebagai gambar aplikasi sobat
-  dibawahnya ada tulisan No biarkan saja
-  setelah itu langsung klik Save 
-  kemudian sobat akan dialihkan ke step berikutnya, lihat screenshot dibawah

-  masukan App id dengan kode App ID yang sobat dapat dari langkah kedua diatas
-  masukan juga App Secret dengan kode App Secret yang sobat dapat juga dari langkah kedua
-  setelah terisi keduanya maka langsung saja klik pada Publish
-  halaman akan berganti dan akan ada tulisan Click Here To Open (Nama Aplikasi)>>
-  klik tulisan tersebut dan sobat akan dibawa lagi ke tab baru dengan halaman berbeda

-  langsung klik saja Skip this page 
-  aplikasi sobat sudah siap untuk digunakan buat update status, dan status sobat akan bertuliskan Via (Nama Aplikasi)


Kembangkan sendiri kreatifitas sobat, jika ada yang perlu ditanyakan silahkan saja beri komentar pada kotak komentar dibawah., sekian saja dari saya, semoga artikel diatas bermanfaat, dan teima kasih telah berkunjung.    ^_^.


Sumber : http://pro-duck.blogspot.com/2013/02/cara-buat-aplikasi-facebook-untuk.html#ixzz2QvwznmhI

Tips Membuat Daftar Isi Unik Yang Mirip Rak Buku


Hai sobat blogger, pernahkah sobat melihat daftar isi yang unik dan menarik, dan inilah salah satunya dari daftar isi yang unik itu,. kali ini saya akan membagikan cara membuat daftar isi yang unik, bentuknya mirip dengan rak buku, cuman ini agak sedikit berbeda, dan berikut adalah screenshotnya 

Tanpa basa-basi lagi, langsung saja berikut adalah script untuk membuat daftar isi seperti gambar diatas :


<style>
#daftar-isi-body
{
         width:760px!important;
         height:600px!important;
         padding:30px 40px;
         margin:0 auto;
}
 #daftar-isi-wrap
{
         margin: 0 auto;
}
 .box-posting
{
         background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDl7GXxmSfP6w4iKuFEymXUvj5vkAYNrefMyQGLWUzGFo1Xhfy7Q5X_ABPup1CUos1gam1JlL8cMK40EHnwi7Vu3RJSpnum8QQqZOMtgA2ojgXyOYj6BZaAdHpfp0HwFqmAp50_D8CiFE/s1600/bg-box.png);
         background-position:bottom center;
         background-repeat:no-repeat;
         overflow:hidden;
         cursor:pointer;
         float:left;
         height:140px;
         width:248px;
         margin:-50px 0 0 0;
}
 .box-posting img
{
         height:46px;
         width:46px;
         float:left;
         margin:20px 0 0 25px;
         background-color:#2E0700;
         border:1px solid #2E0700;
         -webkit-border-radius: 30px;
         -moz-border-radius: 30px;
         border-radius: 50%;
}
 .box-posting .judul-posting
{
         float:left;
         height:35px;
         margin:0;
         width:220px;
}
 .box-posting .judul-posting a
{
         font-family:arial,Serif !important;
         color:#774A34!important;
         text-shadow:0 0 1px rgba(0,0,0,0.9);
         margin:-40px 0 0 80px;
         display:block;
         font-size:13px !important;
         line-height:18px!important;
         font-weight:bold !important;
}
 .box-posting .judul-posting a:hover
{
         color:#333!important;
}
 .box-posting:hover
{
         border-left-color:#C6EB04;
}
 #totales
{
         text-align:center;
         color:#774A34 !important;
         text-shadow:0 1px rgba(0,0,0,0.2);
}
 #loadingscript
{
         color:#444;
         font-family:Century Gothic;
         font-size:100px;
         letter-spacing:-10px;
         text-align:center;
         text-shadow:-5px 0 1px #444;
}
 #paginacion
{
         color:#BBB;
         font-size:24px;
         font-weight:bold;
         height:35px;
         line-height:28px;
         padding:0;
         margin:0 auto;
         text-align:center;
}
 #paginacion span,#paginacion a
{
         display:inline-block;
         font-size:13px !important;
         line-height:24px;
         font-weight:bold;
         margin:0 1px;
         width:25px;
         height:25px;
}
#paginacion a, #paginacion span.actual
{
         background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv1f1Fs7I7g6YGCyhQz-sty3QNB9YxoMbH9AyoiO-bCI4W4pUr9TDqjFzXbvX_vq144bOSCmVWVHj53yVwgCTvgvEk6zBC3xdpcl7F1LKmZC8Gn2a4bPEJsOxmJxI697xdOgMXQYd2eQU/s1600/page-link.png);
         background-position:top center;
         background-repeat:no-repeat;
         color:#250700 !important;
         text-shadow:0px 1px 0px rgba(255,255,255,0.1);
}
 #paginacion span.actual
{
         color:#774A34 !important;
}
 #paginacion a:hover
{
         color:#FFF !important;
}
 #paginacion .nextprev-link,
 #paginacion span.nextprev-link
{
         border:none;
         color:#250700 !important;
         text-shadow:0px 1px 0px rgba(255,255,255,0.1);
         width:100px;
         background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-xOE9Wd0zAJRoXF18gysLvES2mI1U92nmbm07zPvoQ11XFT6miVJAhXmFivgvXkWt9KQXyd1vWkDIdaBeCaGZmUyKt2khCqhX5H5iGH29biGAGa8EbzY_pUw-L8tt9LTAdQjAkRA_xEw/s1600/nextprev.png);
         background-position:top center;
         background-repeat:no-repeat;
}
</style>
<script type="text/javascript">
                  var jumlahposting = 18;
                  var urlblog = "http://pro-duck.blogspot.com";
                  var minpaginas = 5;
                  var maxpaginas = 10;
                  var thumbs = "http://upload.wikimedia.org/wikipedia/commons/6/66/Colour_wheel_(black_background).JPG";
                                            </script>
<script language="javascript" src="http://hanjs.googlecode.com/files/sitemaps.js"></script>

Keterangan :

-  Ganti 18 dengan yang sobat inginkan, dia adalah jumlah post yang ditampilkan dalam satu halaman.
-  Ganti http://pro-duck.blogspot.com dengan Url blog sobat
-  dan 10 adalah jumlah nafigasi minimal dan maksimal yang ada di bawah post

Cara Pasangnya :

-  buka blog sobat
-  buat laman baru, atau bisa juga post baru
-  pada halaman penulisan blog ada Compose dan HTML, pilih yang HTML
-  kemudian masukan kode diatas ke dalam halaman HTML tersebut
-  Publikasikan dan lihat hasinya..

Selamat sobat berhasil membuat Daftar Isi seperti rak buku yang unik dan menarik,.

Sekian saja dari saya, semoga artikel diatas bermanfaat, thanks for visit    ^_^
Oh iya, satu lagi sob.. Jika sobat merasa artikel diatas bermanfaat bagi sobat, saya harap sobat juga mau membantu saya dengan cara mengklik iklan dibawah ini kemudian menunggu hingga halaman iklan terload sempurna, atas bantuannya saya ucapkan banyak terima kasih.





Sumber : http://pro-duck.blogspot.com/2013/02/cara-membuat-daftar-isi-unik-yang-mirip.html


Tips Merubah Tampilan Widget Popular Posts Dengan Grid Layout Style

Popular Posts Grid Layout Style
Pada tutorial sebelumnya saya telah mengetengahkan cara modifikasi popular posts dengan circel image style, dan tutorial kali ini akan mengetengahkan cara modifikasi popular posts dengan grid layout style seperti image/ screen shoot disamping.
Jika anda tertarik membuat popular posts dengan grid layout style pada blog anda, silahkan ikuti step by step tahap pembuatannya:

Tahap Pertama:


  • Login ke akun anda
  • Masuk pada menu template >> klik edit HTML dan jangan lupa centang / ceklist Expand Widget templates
  • Lalu lettakkan kode berikut diatas ]]></b:skin> :
.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}
.PopularPosts ul{padding:5px 0}
.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
.PopularPosts .item-content{position:relative;float:left;margin:0}
.PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
.PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
.PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}
.PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}
Kode berwarna merah diats adalah lebar dan tingggi item thumbnails, anda bisa ganti dan sesuaikan agar sesuai pada sidebar template anda.
  • Kemudian simpan template.
Tahap Kedua:
  • Masuk pada menu tata letak >> Tambah gadget pilih Popular posts seperti image berikut:
Popular Posts Widget
  • Setelah muncul halaman popular posts, konfigurasikan atau setting widget dengan mencentang/ceklists kotak kecil thumbnail dan biarkan kotak snippet kosong. Judul dan jumlah posts yang ingin ditampilkan terserah anda.
  • Simpan
Langkah keTiga:
  • Masuk lagi ke menu template >> edit HTML, jangan lupa ceklist Expand Widget Templates
  • Cari kode berikut:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
  • Setelah ketemu, ganti dengan kode  berikut:
<b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
  • Terakhir simpan template dan lihat hasilnya pada blog anda!



Tips Menambahkan Elemen Halaman Atau Kolom Full Widgets Pada Sidebar

Tutorial kali ini kita akan belajar lagi tentang desain template? Bagaimana menambahkan elemen halaman atau kolom full widget pada sidebar template blogger dengan menggunakan CSS, XHTML dan JavaScript hanya dalam empat langkah simple, kita juga bisa dengan mudah mengganti warna dan widget langsung pada area dashboard. Berikut sebuah screenshot simple hasil dari tutorial ini:  

Tabber Tab Styles

Tampilannya mirip tab view sederhana yang triknya pembuatannya pernah saya bahas sebelumnya hanya saja selain perbedaan yang sudah saya sebutkan diatas kolom widget ini ketika menu diklik tingginya akan menyesuaikan dengan tinggi widget. Untuk menguji dan meyakinkan sobat JavaScript ini bekerja silahkan lihat demonya dulu pada template yang masih dalam proses desain saya disini dan disini. Sekalian saya minta saran dan kritik teman-teman untuk kedua tampilan terbaik template sederhana itu!!!
O ya saya sarankan untuk mengetes tutorial ini pada minima template atau backup template sobat sebelum bereksperimen dengan template sobat saat ini.
Oke sekarang ikuti langkah-langkah berikut:

Cara menambahkan elemen halaman baru atau kolom full widgets pada sidebar template blogger/ Cara membuat tab view versi dua:
  • Loggin ke akun blogger anda, pada dashboard klik layout > edit html dan letakkan script berikut sebelum tag </head>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview-v2.js.js' type='text/javascript'/>
  • Selanjutnya cari kode berikut <div id='sidebar-wrapper'> just below there add the following code
 <div class='tabber'> 
<b:section class='tabbertab' id='tab1' maxwidgets='1'/> 
<b:section class='tabbertab' id='tab2' maxwidgets='1'/> 
<b:section class='tabbertab' id='tab3' maxwidgets='1'/> 
</div>
 

Kode diatas hanya untuk tiga tab jika ingin lebih tinggal tambah kode serupa, tapi ingat id tab harus unik tudak boleh sama.
  • Sekarang tambahkan kode CSS berikut diatas ]]></b:skin> 
/* start tab styles */
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:#F2F2F2;
border:1px solid $tbbxbrcolor;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
}
.tabbernav {
margin:0px;
padding: 5px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:7px 0.5em;
margin-right:4px;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:7px;
border-top:0;
background:$tbbxcolor1;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}
/* end tab styles */
  • Dalam kode CSS diatas terdapat 4 variables named tbbxbgcolor, tbbxbrcolor, tbbxcolor1 andtbbxcolor2 jadi kita akan mudah mengganti warna tab konten langsung pada dashboard. Terakhir kita tambahkan code variable berikut pada bagian atas template variable definitions:

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8"> 
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc"> 
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff"> 
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">
 
Sekarang simpan template! Klik elemen halaman/ page elemen jika sobat berhasil akan melihat kolom seperti screenshot berikut.

Sobat bisa menambahkan sebuah widget setiap klik nomer yang ada, jadi sobat dapat menambahkan sekian widget pada 1 kolom dengan mudah. Jangan lupa setelah melihat preview/ pratinjau blog untuk menyimpan atau save template.
Untuk mengganti warna tab menu, background atau border masuk pada menu layout (tata letak) klik tab font dan warna seperti screenshot berikut.

Now you should have a fully widgetized tabbed content box i hope you enjoyed this tutorial comments are welcome see my result.



sumber : www.tipstrikblogging.com

Top