Tutorial Blogger | Tab Widget Vs Multi Tab Box Post

Tutorial Blogger | Tab Widget Vs Multi Tab Box Post. Konten Box tab atau tab view adalah cara yang bagus untuk memaksimalkan penggunaan layar real estat berharga di blog Anda.

Ada cukup banyak tutorial di luar sana yang menunjukkan cara membuat tab dengan CSS dan jQuery. Namun, sebagian besar dari mereka mengharuskan Anda untuk mengubah blog Anda kode template. Di atas semua itu Anda juga harus secara manual menambahkan isi dari setiap tab. 

Untungnya, dengan tutorial ini Anda tidak perlu pergi ke semua masalah itu. Semua harus Anda lakukan adalah menambahkan kode tabber kami ke widget HTML / Javascript. Setelah ditambahkan, maka akan mengubah widget yang ada Blogger blog ke dalam tab, otomatis!

Berikut adalah beberapa fitur dari kotak isi tab:

1. Mengakomodasi terbatas jumlah widget.
2. Menjaga penampilan asli widget tab .
3. Sepenuhnya widgetized untuk kemudahan instalasi dan penghapusan. Jika Anda tidak menyukai apa yang dilakukannya, cukup menghapus HTML / Javascript gadget.  

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'>
<p>
Get this <a href="http://cms.indotrading.biz/2012/10/tutorial-blogger-tab-widget-vs-multi.html" target="_blank">tabber widget</a></p>
</div>

Instalasi

1. Pergi ke Layout dan klik sebuah Tambahkan Gadget .
2. Pilih HTML / Javascript widget.
3. Biarkan kosong kotak judul.
4. Copy kode berikut dan tempel di dalam kotak konten.
5. Posisikan gadget HTML / Javascript di atas gadget yang ingin Anda tabify.
6. • Baris kode 34 adalah untuk memuat library jQuery. Hapus baris ini jika Anda sudah dimuat di tempat lain di blog Anda. Petunjuk: Jika blog Anda memiliki slider, pengendara sepeda atau sesuatu dengan efek fading berjalan, kemungkinan besar hal ini didukung oleh jQuery.
   • Tentukan nilai dari  tabCount sejalan 39. Nilai ini sama dengan jumlah widget (di bawah widget tabber) bahwa Anda ingin berubah menjadi tab.
   • Kotak warna default latar belakang putih (# fff). Anda dapat mengubahnya dalam baris kode 25. Terapkan warna yang sama untuk latar belakang tab aktif dan batas bawah (di baris 19 dan 20).
7. Klik Simpan dan melihat blog Anda.

Pasca-instalasi

• Pastikan Anda setiap judul widget yang ingin Anda tabify. Tabber tidak akan bekerja dengan baik tanpa judul widget.
• Mengurangi lebar tab sehingga semua tab masuk ke dalam satu baris. Hal ini dapat dicapai dengan menggunakan judul widget singkat.
• Anda mungkin perlu untuk mengurangi lebar dari widget tabified untuk menyesuaikan mereka ke dalam kotak.
• Jangan lupa untuk menguji di Internet Explorer. Widget ini dapat menyebabkan "Operasi dibatalkan" error di IE untuk beberapa non-desainer template. Jika itu yang terjadi, widget ini bukan untuk Anda: (
• Nikmati!
• Berlangganan gratis
• Dapatkan artikel terbaru kami dikirim ke kotak masuk email Anda.

Trik CMS | Tutorial WAMP Server Windows

Trik CMS | Tutorial WAMP Server Windows . Belajar wordpress yang efektif dan efisien adalah dengan menggunakan localhost di personal PC, karena tidak memerlukan nama domain, web hosting serta koneksi internet, yang diperlukan adalah software seperti Wampserver, Xampp, AppServ dan lain sebagainya. WampServer, Xampp, AppServ adalah gabungan dari beberapa software seperti Apache, PHP, MySQL, dan PhpMyadmin, sehingga dengan software tersebut anda dapat menginstall software berbasis aplikasi web seperti WordPress, Joomla, Drupal,dan lain sebagainya.

More Details

Tutorial WAMP Server Windows |Top Basic Blogging Tips

Tutorial WAMP Server WIndows |Top Basic Blogging Tips. Belajar wordpress yang efektif dan efisien adalah dengan menggunakan localhost di personal PC, karena tidak memerlukan nama domain, web hosting serta koneksi internet, yang diperlukan adalah software seperti Wampserver, Xampp, AppServ dan lain sebagainya. Berikut ini Tutorial WAMP Server WIndows |Top Basic Blogging Tips.
WampServer, Xampp, AppServ adalah gabungan dari beberapa software seperti Apache, PHP, MySQL, dan PhpMyadmin, sehingga dengan software tersebut anda dapat menginstall software berbasis aplikasi web seperti WordPress, Joomla, Drupal,dan lain sebagainya. Software-software tersebut dapat membuat komputer anda seakan-akan menjadi web server sungguhan seperti yang ada di Internet.

Cara Install WampServer

Salah satu software yang banyak di gunakan untuk local host adalah WampServer. Install WampServer sangatlah mudah dan hanya perlu waktu yang sangat singkat. Berikut adalah cara menginstall WamServer:

1. Download terlebih dahulu WampServer pada situs resmi mereka di http://www.wampserver.com/en/
2. Setelah filenya berhasil anda download, silahkan dobel klik pada file tersebut dan Akan muncul jendela untuk memulai Instalasi. Klik tombol Next untuk meneruskan.
   
3. Silahkan piliah I Accept the Agreement sebagai tanda anda setuju. Teruskan dengan klik tombol Next kembali.
   
4. Lanjutkan dengan klik Next kembali.
   
5. Lanjutkan kembali dengan klik Next.
   
6. Klik tombol Install. Silahkan tunggu beberapa saat sampai proses instalasi selesai.
   
7. Silahkan akhiri dengan klik tombol Finish.
   
8. Selesai.

Dengan terinstalnya WampServer di komputer anda, kini anda dapat menginstal berbagai aplikasi web termasuk juga WordPress.

Tutorial WAMP Server WIndows - Top Basic Blogging Tips. Belajar wordpress yang efektif dan efisien adalah dengan menggunakan localhost di personal PC, karena tidak memerlukan nama domain, web hosting serta koneksi internet, yang diperlukan adalah software seperti Wampserver, Xampp, AppServ dan lain sebagainya. WampServer, Xampp, AppServ adalah gabungan dari beberapa software seperti Apache, PHP, MySQL, dan PhpMyadmin, sehingga dengan software tersebut anda dapat menginstall software berbasis aplikasi web seperti WordPress, Joomla, Drupal,dan lain sebagainya.