Kali ini saya akan berbagi tips tentang cara membuat tab view di sidebar blog. Cara membuatnya cukup mudah karena tidak perlu mengedit html. Widget ini sangat bermanfaat bagi para blogger, karena widget ini akan menampilkan update postingan dari blog teman, sehingga akan mempererat persahabatan para blogger.
widget ini berisi 3 tab sekaligus, yaitu postingan blog teman, recent comment, dan arsip blog. widget tab view juga berfungsi untuk menghemat space pada blog anda, jadi loading blog menjadi semakin ringan. oke langsung saja simak caranya di bawah ini :
langkah pertama : buat widget "EFEK JQUERY" , dengan cara :
1. masuk ke akun blogger anda, lalu klik tata letak
2. lalu klik add gadget
3. pilih html / javasript
4. JANGAN DIBERI JUDUL
5. lalu copy code di bawah ini dan paste kan disana
langkah kedua : buat gatget "blog teman" dengan cara :
1. masuk ke tata letak
2. klik add gadget
3. pilih "Daftar blog"
4. akan muncul kotak daftar blog, beri judul : "Blog Teman" , lalu klik tambahkan ke daftar , lalu ketik alamat blog yang akan ditampilkan di blog anda,
5. lalu klik simpan
Langkah ketiga : Buat widget "recent comment, Dengan cara :
1. masuk ke tata letak
2. klik add gadget
3. pilih html / javasript
4. beri judul " Recent comment"
5. lalu copy code di bawah ini dan paste kan disana
3. pilih "Arsip Blog"
4. Beri judul : "ARSIP"
4. lalu klik simpan
PASTIKAN SUSUNANNYA SEPERTI INI :
widget ini berisi 3 tab sekaligus, yaitu postingan blog teman, recent comment, dan arsip blog. widget tab view juga berfungsi untuk menghemat space pada blog anda, jadi loading blog menjadi semakin ringan. oke langsung saja simak caranya di bawah ini :
langkah pertama : buat widget "EFEK JQUERY" , dengan cara :
1. masuk ke akun blogger anda, lalu klik tata letak
2. lalu klik add gadget
3. pilih html / javasript
4. JANGAN DIBERI JUDUL
5. lalu copy code di bawah ini dan paste kan disana
<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #FF4500;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #FFB6C1;
border-bottom: 1px solid #fff;
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #FFD700;
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><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'>
<a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></div>
.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #FF4500;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #FFB6C1;
border-bottom: 1px solid #fff;
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #FFD700;
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><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'>
<a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></div>
langkah kedua : buat gatget "blog teman" dengan cara :
1. masuk ke tata letak
2. klik add gadget
3. pilih "Daftar blog"
4. akan muncul kotak daftar blog, beri judul : "Blog Teman" , lalu klik tambahkan ke daftar , lalu ketik alamat blog yang akan ditampilkan di blog anda,
5. lalu klik simpan
Langkah ketiga : Buat widget "recent comment, Dengan cara :
1. masuk ke tata letak
2. klik add gadget
3. pilih html / javasript
4. beri judul " Recent comment"
5. lalu copy code di bawah ini dan paste kan disana
<script style="text/javascript" src="https://problogizjs.googlecode.com/files/comments.js"></script>
<script style="text/javascript">var numcomments = 4;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script>
<script src="http://ajibondhankottama.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
<script style="text/javascript">var numcomments = 4;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script>
<script src="http://ajibondhankottama.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
5. sebelumnya ganti tulisan "http://ajibondhankottama.blogspot.com" dengan alamat blog anda
6. lalu klik simpan
Langkah keempat : Buat widget "arsip blog", Dengan cara
1. masuk ke akun blogger anda, lalu klik tata letak
2. lalu klik add gadget3. pilih "Arsip Blog"
4. Beri judul : "ARSIP"
4. lalu klik simpan
PASTIKAN SUSUNANNYA SEPERTI INI :
Lalu klik Simpan setelan ,
- SELASAI , SEMOGA BERMANFAAT -
Download GAME dan APLIKASI lainnya :
nice info, mampir disiang hari...
BalasHapussip, thanks
Hapusinformasinya sangat bermanfaat sobatku...
BalasHapusLink Blog sobat sudah dipasang... silahkan diintip yah hehehe.... :)
ok, sob trimakasih ,,
Hapusblog kamu udah ku pasang link nya liat aja di bawah, silahkan kunjungi http://ichibanha.blogspot.com/
BalasHapusthx
makasih mbak,,,
Hapussemoga blog anda tambah ramai ya ,,
wah keren nih info dan caranya... ada blog Mang Yono lagi eheheh... makin keren deh
BalasHapusiya mang, terimakasih ya,
Hapusmakasih banyak gan.. udah saya pasang di blog saya.. cek... here..
BalasHapusmuhamadfariz84.blogspot.com
makasih,, membantu and gampng banget diaplikasiin untuk pmula
BalasHapusiya gan tidak ribet kok, tutorialnya
Hapusmakasih banyak buat tutornya gan,, sangat bermanfaat sekali
BalasHapushttp://goo.gl/FiqB2R
Terimakasih banyak sob, sangat membantu sekali artikelnya..
BalasHapus