(( See my Instagram at https://www.instagram.com/ajibondhan_k/ )) or ID= aji bondhan kottama ?:) 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 :
No comments:
Post a Comment