Привет друзья тут недавно потерялся в дебрях интернет паутины, плюс чуть голову не сломал) пока искал выход из положения. Но все же нашел путь, и он оказался верен приготовил много разных занятных плюшек для вас, одна из них это таб -менюшка и не одна). Начнем с того что это такое, и с чем это едят это обычно виджет на JQueru, нужен он для удобства размещения в нем каких либо виджетов.
Или какой либо иной информации, какой именно решать вам конечно же, к примеру у вас много гаджетов как у меня ну и соответственно они мне все нравятся, и терять их не хочется а места катастрофически не хватает, приходится искать пути решения поставленных задач. И вот решение было найдено им оказались Tab - меню, они бывают разные такие менюшки но мне нужна была определенная, а именно для боковой, или нижней колонки. Слева, или справа, или в подвал как вы её разместите это не важно самое главное то что бы она справлялась с поставленной задачей, и на моём примере а его вы можете увидеть на правой колонке моего ресурса, вы можете убедится что работает она на пять с плюсом. И как раз плюсов от нее больше чем минусов, кстати что характерно на просторах всемирной паутины есть масса примеров как такое меню можно сделать, но для вас мои уважаемые читатели я нашел самый скажем так хитрый, и простой вариант. А именно установку кодов, о которых я расскажу чуть ниже именно в гаджет не мучаясь, и не ковыряясь с кодом шаблона. А по тем вариантам что увидел я за прошедшее время, и убедился на личном примере могу сказать что есть такие способы установок, и настроек таких менюшек что можно голову себе сломать. А оно это Tab-меню так и не заработает, и так приступим начну с самого интересного по моему мнению меню. Не оставил его себе лишь только потому что, оно имеет 3 вкладки переключения, и по этому назовем его тройкой. А мне их показалось мало,и пришлось мудрить дальше) и так Тройка):
Выгдядит оно так
А код установки у него такой, и не забываем что код надо вставлять просто в гаджет.
<script type='text/javascript'>
//<![CDATA[
function NewBloggerTips_oom(NBTID, id)
{
var NewBloggerTips = document.getElementById(NBTID);
var NBTs = NewBloggerTips.firstChild;
while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;
var NBT = NBTs.firstChild;
var i = 0;
do
{
if (NBT.tagName == "A")
{
i++;
NBT.href = "javascript:NewBloggerTips_ubah('"+NBTID+"', "+i+");";
NBT.className = (i == id) ? "Active" : "";
NBT.blur();
}
}
while (NBT = NBT.nextSibling);
var Halamans = NewBloggerTips.firstChild;
while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
var Halaman = Halamans.firstChild;
var i = 0;
do
{
if (Halaman.className == 'Halaman')
{
i++;
if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
Halaman.style.overflow = "auto";
Halaman.style.display = (i == id) ? 'block' : 'none';
}
}
while (Halaman = Halaman.nextSibling);
}
function NewBloggerTips_ubah(NBTID, id) { NewBloggerTips_oom(NBTID, id);
}
function NewBloggerTips_inisial(NBTID) { NewBloggerTips_oom(NBTID, 1);
document.write('');}
//]]>
</script>
<style>
div.NewBloggerTips div.NBTs {
height: 24px;
overflow: hidden;
}
div.NewBloggerTips div.NBTs a:hover, div.NewBloggerTips div.NBTs a.Active {
background-color: #eee;
}
div.NewBloggerTips div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.NewBloggerTips div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.NewBloggerTips div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.NewBloggerTips div.NBTs a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>
<form action="NewBloggerTips.html" method="get">
<div id="NewBloggerTips" class="NewBloggerTips">
<div style="width: 300px;" class="NBTs"> <a>Tab 1Тут вставляем название гаджетов</a> <a>Tab 2Тут вставляем название гаджетов</a> <a>Tab 1Тут вставляем название гаджетов</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 тут размещаем контент
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 тут размещаем контент
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 тут размещаем контент
</div>
</div>
</div>
<small><a style='margin-left:10px;align:right;' href='http://www.newbloggertips.com/2013/02/add-multi-tabbed-widget-to-blogger.html' target='_blank'>Tab-меню</a> | <a href='http://www.zarnakoom.blogspot.com/' target='_blank'>zarnakoom</a></small>
</div>
</div></form>
<script type="text/javascript">NewBloggerTips_inisial('NewBloggerTips');</script>
Теперь по пунктам:
В коде видим Tab 1,2,3Тут вставляем название гаджетов (как уже понятно из того что написано до этого вставляем название виджетов).
Теперь : Tab 1,2,3 тут размещаем контент (Наш код контента)
И на последок ширина гаджета Tab-меню это параметр width: 300
А высота Tab-меню это параметр height: 300
И фоновой цвет меню тут #ffffff
Так же от себя добавлю что то место в коде куда вставляется контент, в него в каждое из Tabов можно всавить не по одному гаджету, а по несколько если вам надо. Только делайте пробелы в коде, если вам надо добавить по несколько кодов потому как если потом будете заменять какой либо из них что бы не запутаться. Если в одном Tabе у вас будет по несколько виджетов то просто появится полоска прокрутки в самом виджете.
А теперь следующее твоерение, назавем его сразу же пятеркой ) такое как стоит у меня.
Вид у меню такой
А код к его установке такой
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(document).ready(function() { $("#tabs").tabs(); });
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css" />
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab-1</a></li>
<li><a href="#tabs-2">Tab-2</a></li>
<li><a href="#tabs-3">Tab-3</a></li>
<li><a href="#tabs-4">Tab-4</a></li>
<li><a href="#tabs-5">Tab-5</a></li>
</ul>
<div id="tabs-1">Your Tab-1 Script or Text Here</div>
<div id="tabs-2">Your Tab-2 Script or Text Here</div>
<div id="tabs-3">Your Tab-3 Script or Text Here</div>
<div id="tabs-4">Your Tab-4 Script or Text Here</div>
<div id="tabs-5">Your Tab-5 Script or Text Here</div>
</div>
Где помечено желтым пишем названия гаджетов,а где почемено зелёным вставляем свой контент. А где я пометил цветом аква, вот так ( start ) - тут мы можем менять внешний вид самой таб менюшки, и для этого нам надо зайти вот по этой ссылке
Далее прокрутить чуть ниже, и там мы увидим названия тем копируем любое название темы, и вставляем вместо нашей темы ( start ). В результате менюшка будет выглядеть с пременением той темы что вы выберите.
Заметьте что сверху в этом коде есть скрипт jquery , отмеченный зеленым маркером и дело в том что если он у вас установлен уже в шаблоне, то этот код надо копировать без него и вставлять в гаджет, например у меня это таб-меню работает без этого скрипта jquery.
Следующая таб менюшка, и последняя на сегодня и так вставлять код надо так же в гаджет. Сама менюшка не боковая, а скорее её можно поставить где то или сверху блога, или в подвал блога. Имеет очень интересный эффект переключения, и так же как и таб менюшка выше имеет 5 вкладок.
Сама она такая:
А вот и сам скрипт от нее:
<style>
#tabbed_box_1 {margin: 0px auto 0px auto;width:500px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd2F9ED3Mxr8f19FK8A7crLvA0gXpbhw4ZCcoItkoQWMPxh0BXTBpv2ae83x3bte3sTYmIlwuVlJt8COjun7U3BWKhaSVBfsK_0WCLo1we7wMYHmPvQ6RW_VIkt_uGccR7uJWS2o6tyrg/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXDnz8phQmUQPFr6wOzOgM94qRwUtg-tg-ZtngP-q-aknJDzi6eEdwbCrHzFKx3wNZIZrT3xJGClFs-s22jpH_GxNlh7iiiM0wGw2KtJ9GLkvPxjzBG57lFHwpt9XksoqG3-PPic1Bg9g/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinDrq0RAO8h-2FqJWgnY3IFXHG2O6G0iUsusqcKmce8PIekhtbznIo7GvOIJnDI145DWJVAnsKXZ4VOnsWn8SyxQbD0aQYX2-qyXh0qwXmwqfxIjMcvX2yWTd7HW-8ARtpPGCi9EPSKWo/s1600/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#Part_2, #Part_3, #Part_4, #Part_5 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a.tab").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<br />
<div class="tabbed_box" id="tabbed_box_1">
<div class="tabbed_area">
<ul class="tabs">
<li><a class="tab active" href="javascript:void(0);" title="Part_1">1Названме гаджета</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_2">2Названме гаджета</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_3">3Названме гаджета</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_4">4Названме гаджета</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_5">5Названме гаджета</a></li>
</ul>
<div class="content" id="Part_1">
Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.
</div>
<div class="content" id="Part_2">
Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.
</div>
<div class="content" id="Part_3">
Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.
</div>
<div class="content" id="Part_4">
Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.
</div>
<div class="content" id="Part_5">
Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.
</div>
<span style="color: #dddddd; font-family: arial; font-size: 11px; font-weight: bold;">Widget by: <a href="http://www.zarnakoom.blogspot.com/" style="color: #f7f7f7; font-weight: bold;">zarnakoom</a></span>
</div>
</div>
И так друзья где отмечено вот так 1,2,3,4,5Названме гаджета , пишем название своих гаджетовили еще чего либо.
А где отмечено так: Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем. Вставляем свой контент.
Или какой либо иной информации, какой именно решать вам конечно же, к примеру у вас много гаджетов как у меня ну и соответственно они мне все нравятся, и терять их не хочется а места катастрофически не хватает, приходится искать пути решения поставленных задач. И вот решение было найдено им оказались Tab - меню, они бывают разные такие менюшки но мне нужна была определенная, а именно для боковой, или нижней колонки. Слева, или справа, или в подвал как вы её разместите это не важно самое главное то что бы она справлялась с поставленной задачей, и на моём примере а его вы можете увидеть на правой колонке моего ресурса, вы можете убедится что работает она на пять с плюсом. И как раз плюсов от нее больше чем минусов, кстати что характерно на просторах всемирной паутины есть масса примеров как такое меню можно сделать, но для вас мои уважаемые читатели я нашел самый скажем так хитрый, и простой вариант. А именно установку кодов, о которых я расскажу чуть ниже именно в гаджет не мучаясь, и не ковыряясь с кодом шаблона. А по тем вариантам что увидел я за прошедшее время, и убедился на личном примере могу сказать что есть такие способы установок, и настроек таких менюшек что можно голову себе сломать. А оно это Tab-меню так и не заработает, и так приступим начну с самого интересного по моему мнению меню. Не оставил его себе лишь только потому что, оно имеет 3 вкладки переключения, и по этому назовем его тройкой. А мне их показалось мало,и пришлось мудрить дальше) и так Тройка):
Выгдядит оно так
А код установки у него такой, и не забываем что код надо вставлять просто в гаджет.
<script type='text/javascript'>
//<![CDATA[
function NewBloggerTips_oom(NBTID, id)
{
var NewBloggerTips = document.getElementById(NBTID);
var NBTs = NewBloggerTips.firstChild;
while (NBTs.className != "NBTs" ) NBTs = NBTs.nextSibling;
var NBT = NBTs.firstChild;
var i = 0;
do
{
if (NBT.tagName == "A")
{
i++;
NBT.href = "javascript:NewBloggerTips_ubah('"+NBTID+"', "+i+");";
NBT.className = (i == id) ? "Active" : "";
NBT.blur();
}
}
while (NBT = NBT.nextSibling);
var Halamans = NewBloggerTips.firstChild;
while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
var Halaman = Halamans.firstChild;
var i = 0;
do
{
if (Halaman.className == 'Halaman')
{
i++;
if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
Halaman.style.overflow = "auto";
Halaman.style.display = (i == id) ? 'block' : 'none';
}
}
while (Halaman = Halaman.nextSibling);
}
function NewBloggerTips_ubah(NBTID, id) { NewBloggerTips_oom(NBTID, id);
}
function NewBloggerTips_inisial(NBTID) { NewBloggerTips_oom(NBTID, 1);
document.write('');}
//]]>
</script>
<style>
div.NewBloggerTips div.NBTs {
height: 24px;
overflow: hidden;
}
div.NewBloggerTips div.NBTs a:hover, div.NewBloggerTips div.NBTs a.Active {
background-color: #eee;
}
div.NewBloggerTips div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.NewBloggerTips div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.NewBloggerTips div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.NewBloggerTips div.NBTs a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>
<form action="NewBloggerTips.html" method="get">
<div id="NewBloggerTips" class="NewBloggerTips">
<div style="width: 300px;" class="NBTs"> <a>Tab 1Тут вставляем название гаджетов</a> <a>Tab 2Тут вставляем название гаджетов</a> <a>Tab 1Тут вставляем название гаджетов</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 тут размещаем контент
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 тут размещаем контент
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 тут размещаем контент
</div>
</div>
</div>
<small><a style='margin-left:10px;align:right;' href='http://www.newbloggertips.com/2013/02/add-multi-tabbed-widget-to-blogger.html' target='_blank'>Tab-меню</a> | <a href='http://www.zarnakoom.blogspot.com/' target='_blank'>zarnakoom</a></small>
</div>
</div></form>
<script type="text/javascript">NewBloggerTips_inisial('NewBloggerTips');</script>
Теперь по пунктам:
В коде видим Tab 1,2,3Тут вставляем название гаджетов (как уже понятно из того что написано до этого вставляем название виджетов).
Теперь : Tab 1,2,3 тут размещаем контент (Наш код контента)
И на последок ширина гаджета Tab-меню это параметр width: 300
А высота Tab-меню это параметр height: 300
И фоновой цвет меню тут #ffffff
Так же от себя добавлю что то место в коде куда вставляется контент, в него в каждое из Tabов можно всавить не по одному гаджету, а по несколько если вам надо. Только делайте пробелы в коде, если вам надо добавить по несколько кодов потому как если потом будете заменять какой либо из них что бы не запутаться. Если в одном Tabе у вас будет по несколько виджетов то просто появится полоска прокрутки в самом виджете.
А теперь следующее твоерение, назавем его сразу же пятеркой ) такое как стоит у меня.
Вид у меню такой
А код к его установке такой
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(document).ready(function() { $("#tabs").tabs(); });
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css" />
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab-1</a></li>
<li><a href="#tabs-2">Tab-2</a></li>
<li><a href="#tabs-3">Tab-3</a></li>
<li><a href="#tabs-4">Tab-4</a></li>
<li><a href="#tabs-5">Tab-5</a></li>
</ul>
<div id="tabs-1">Your Tab-1 Script or Text Here</div>
<div id="tabs-2">Your Tab-2 Script or Text Here</div>
<div id="tabs-3">Your Tab-3 Script or Text Here</div>
<div id="tabs-4">Your Tab-4 Script or Text Here</div>
<div id="tabs-5">Your Tab-5 Script or Text Here</div>
</div>
Где помечено желтым пишем названия гаджетов,а где почемено зелёным вставляем свой контент. А где я пометил цветом аква, вот так ( start ) - тут мы можем менять внешний вид самой таб менюшки, и для этого нам надо зайти вот по этой ссылке
Далее прокрутить чуть ниже, и там мы увидим названия тем копируем любое название темы, и вставляем вместо нашей темы ( start ). В результате менюшка будет выглядеть с пременением той темы что вы выберите.
Заметьте что сверху в этом коде есть скрипт jquery , отмеченный зеленым маркером и дело в том что если он у вас установлен уже в шаблоне, то этот код надо копировать без него и вставлять в гаджет, например у меня это таб-меню работает без этого скрипта jquery.
Следующая таб менюшка, и последняя на сегодня и так вставлять код надо так же в гаджет. Сама менюшка не боковая, а скорее её можно поставить где то или сверху блога, или в подвал блога. Имеет очень интересный эффект переключения, и так же как и таб менюшка выше имеет 5 вкладок.
Сама она такая:
А вот и сам скрипт от нее:
<style>
#tabbed_box_1 {margin: 0px auto 0px auto;width:500px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd2F9ED3Mxr8f19FK8A7crLvA0gXpbhw4ZCcoItkoQWMPxh0BXTBpv2ae83x3bte3sTYmIlwuVlJt8COjun7U3BWKhaSVBfsK_0WCLo1we7wMYHmPvQ6RW_VIkt_uGccR7uJWS2o6tyrg/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXDnz8phQmUQPFr6wOzOgM94qRwUtg-tg-ZtngP-q-aknJDzi6eEdwbCrHzFKx3wNZIZrT3xJGClFs-s22jpH_GxNlh7iiiM0wGw2KtJ9GLkvPxjzBG57lFHwpt9XksoqG3-PPic1Bg9g/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinDrq0RAO8h-2FqJWgnY3IFXHG2O6G0iUsusqcKmce8PIekhtbznIo7GvOIJnDI145DWJVAnsKXZ4VOnsWn8SyxQbD0aQYX2-qyXh0qwXmwqfxIjMcvX2yWTd7HW-8ARtpPGCi9EPSKWo/s1600/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#Part_2, #Part_3, #Part_4, #Part_5 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a.tab").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<br />
<div class="tabbed_box" id="tabbed_box_1">
<div class="tabbed_area">
<ul class="tabs">
<li><a class="tab active" href="javascript:void(0);" title="Part_1">1Названме гаджета</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_2">2Названме гаджета</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_3">3Названме гаджета</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_4">4Названме гаджета</a></li>
<li><a class="tab" href="javascript:void(0);" title="Part_5">5Названме гаджета</a></li>
</ul>
<div class="content" id="Part_1">
Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.
</div>
<div class="content" id="Part_2">
Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.
</div>
<div class="content" id="Part_3">
Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.
</div>
<div class="content" id="Part_4">
Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.
</div>
<div class="content" id="Part_5">
Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем.
</div>
<span style="color: #dddddd; font-family: arial; font-size: 11px; font-weight: bold;">Widget by: <a href="http://www.zarnakoom.blogspot.com/" style="color: #f7f7f7; font-weight: bold;">zarnakoom</a></span>
</div>
</div>
И так друзья где отмечено вот так 1,2,3,4,5Названме гаджета , пишем название своих гаджетовили еще чего либо.
А где отмечено так: Тут вставляем свои скрипты, или же текст,или фото что хотим то и вставляем. Вставляем свой контент.
0 коммент. :