Salah satu widget hemat ruang untuk blog, tentu saja adalah widget multi-tab, yang hampir merupakan keharusan bagi blog mana pun. Anda dapat menggunakannya untuk posting populer, komentator top, posting terbaru, posting terbaru atau widget apa pun yang Anda suka.
Meskipun Anda dapat menemukan beberapa metode lain di Internet, tetapi mereka semua cukup membingungkan, sehingga Anda dapat menggunakan metode ini, yang cukup mudah, tetapi tentu saja perlu mengubah template. Proses lengkap terutama memiliki dua langkah:
LANGKAH 1
Masuk ke Blogger. Sekarang pergi ke Layout dan kemudian klik tab " Edit HTML ".
Kemudian unduh templat yang ada sebagai cadangan.
Sekarang temukan [CTRL + F] kode ini:
Kemudian segera DI ATAS / SEBELUM, tempel kode ini:
Sekarang klik Simpan Templat dan Klik tab "Elemen Halaman".
Kemudian klik "Tambahkan Gadget" dan pilih sebagai jenis "HTML / JavaScript".
Dalam widget baru, rekatkan salah satu dari 3 kode yang ditampilkan di bawah ini (tangkapan layar ditampilkan di atas kode, dan tautan demo telah diberikan di atas):
Kode di sini:
Kode di sini:
Meskipun Anda dapat menemukan beberapa metode lain di Internet, tetapi mereka semua cukup membingungkan, sehingga Anda dapat menggunakan metode ini, yang cukup mudah, tetapi tentu saja perlu mengubah template. Proses lengkap terutama memiliki dua langkah:
Masuk ke Blogger. Sekarang pergi ke Layout dan kemudian klik tab " Edit HTML ".
Kemudian unduh templat yang ada sebagai cadangan.
Sekarang temukan [CTRL + F] kode ini:
</head>
Kemudian segera DI ATAS / SEBELUM, tempel kode ini:
<! - MUTITABBED-MULAI BARU -> <tautan href = 'http: //dsai.588.googlepages.com/tabcontent.css' rel = 'stylesheet' type = 'text / css' />
<script src = 'http: //dsai.588.googlepages.com/tabcontent.js' type = 'text / javascript'>
/ ************************* ************************
* Skrip Konten Tab v2.2- & # 169; Pustaka kode Dynamic Drive DHTML (www.dynamicdrive.com)
* Pemberitahuan ini HARUS tetap utuh untuk penggunaan yang sah
* Via http://BloggerStop.Net
* Kunjungi Dynamic Drive di http://www.dynamicdrive.com/ untuk kode sumber lengkap
* ******************************************** /
</ skrip > <! - NEW-MUTITABBED-STOPS ->
Sekarang klik Simpan Templat dan Klik tab "Elemen Halaman".
Kemudian klik "Tambahkan Gadget" dan pilih sebagai jenis "HTML / JavaScript".
Dalam widget baru, rekatkan salah satu dari 3 kode yang ditampilkan di bawah ini (tangkapan layar ditampilkan di atas kode, dan tautan demo telah diberikan di atas):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <span style="font-family: Courier New, Courier, monospace;"><h3>Demo <ul id="countrytabs" class="shadetabs"><li><a href="#" rel="country1" class="selected">Tab 1</a></li><li><a href="#" rel="country2">Tab 2</a></li><li><a href="#" rel="country3">Tab 3</a></li><li><a href="#" rel="country4">Tab 4</a></li></ul><div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px"><div id="country1" class="tabcontent">Tab content 1 hereTab content 1 here</div><div id="country2" class="tabcontent">Tab content 2 hereTab content 2 here</div><div id="country3" class="tabcontent">Tab content 3 hereTab content 3 here</div><div id="country4" class="tabcontent">Tab content 4 hereTab content 4 here</div></div><script type="text/javascript">var countries=new ddtabcontent("countrytabs")countries.setpersist(true)countries.setselectedClassTarget("link") //"link" or "linkparent"countries.init()</script><p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a></p></span> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| <span style="font-family: Courier New, Courier, monospace;"><h3>Demo <div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">Arbitrary DIV 1</div><div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">Arbitrary DIV 2</div><div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">Arbitrary DIV 3</div><div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px"><div id="tcontent1" class="tabcontent">Tab content 1 hereTab content 1 here</div><div id="tcontent2" class="tabcontent">Tab content 2 hereTab content 2 here</div><div id="tcontent3" class="tabcontent">Tab content 3 hereTab content 3 here</div><div id="tcontent4" class="tabcontent">Tab content 4 hereTab content 4 here</div></div><div id="flowertabs" class="modernbricksmenu2"><ul><li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li><li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li><li><a href="#" rel="tcontent3">Tab 3</a></li><li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li></ul></div><br style="clear: left" /><script type="text/javascript">var myflowers=new ddtabcontent("flowertabs")myflowers.setpersist(true)myflowers.setselectedClassTarget("link") //"link" or "linkparent"myflowers.init()</script><p><b><a href="javascript: myflowers.expandit(2)">Click here to select 3rd tab</a></b></p><p><b><a href="current.htm?flowertabs=1">Reload page and select 2nd tab using URL parameter</a></b></p></span> |
Kode di sini:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| <div style="text-align: left;"><span style="font-family: Courier New, Courier, monospace;"><h3>Demo <div style="text-align: left;"><span style="font-family: Courier New, Courier, monospace;"><div id="pettabs" class="indentmenu"></span></div><span style="font-family: Courier New, Courier, monospace;"><ul></span><div style="text-align: left;"><span style="font-family: Courier New, Courier, monospace;">>Tab 1</a></li><li><a href="#" rel="dog2">Tab 2</a></li></span></div><span style="font-family: Courier New, Courier, monospace;"><li><a href="#" rel="dog1" class="selected"<li><a href="<li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li></span><div style="text-align: left;"><span style="font-family: Courier New, Courier, monospace;">e="border:1px solid gray; width:550px; height: 150p</span></div><span style="font-family: Courier New, Courier, monospace;"><li><a href="http://www.google.com">Google</a></li></ul><br style="clear: left" /></div><div stylx; padding: 5px; margin-bottom:1em"><div id="dog1" class="tabcontent">Tab content 1 hereTab content 1 here</span><div style="text-align: left;"><span style="font-family: Courier New, Courier, monospace;"><div id="dog2" class="tabcontent">Tab content 2 hereTab content 2 here</div><div id="dog3" class="t</span></div><span style="font-family: Courier New, Courier, monospace;"><p><b><a href="javascript: mypets.expandit('myfavorite')">Click here to select tab with id="myfavorite"</a></b></p></div>abcontent">Tab content 3 hereTab content 3 here</div><div id="dog4" class="tabcontent">Tab content 4 hereTab content 4 here</div></div><script type="text/javascript">var mypets=new ddtabcontent("pettabs")</span><div style="text-align: left;"></div><span style="font-family: Courier New, Courier, monospace;">mypets.setpersist(true)mypets.setselectedClassTarget("link")mypets.init(2000)</span><div style="text-align: left;"></div><span style="font-family: Courier New, Courier, monospace;"></script></span> |
SEKARANG KLIK HEMAT
0 komentar:
Posting Komentar