Меню по-корейски


В поисках нового подопытного кролика наткнулся на корейский сайт, и скажу, что это уже не кролик, а целый заяц.

Называется изделие Yuna Kim, его можно оценить, сходив по адресу www.iamyuna.com.

По чесноку, ничего нового в этих треугольниках нет, но поковыряться всё равно захотелось.

Для начала я сохранил страничку на рабочий стол. При копировании увидел, что всё добро весит 15 метров за счёт видеороликов.

И чем бы здесь поживиться? С треугольниками неинтересно, а вот javascript меню всё-таки любопытно.

Опустим неинтересные подробности в виде вытаскивания и посмотрим переработанный код для блоггера.

Для начала глядим готовое демо (там нижний виджет под названием yuna).

Все пункты меню, для упрощения корректировки, подписаны, не разберётся только ленивый, главное - понять логику меню. Весь код можно спровадить в html виджет, либо унести скрипты и стили в /head, а дивы в виджет, либо всё меню засунуть в шаблон по тому же принципу.

Состав кода (заранее согласен, что громоздко):

<script type="text/javascript" src="http://planeta.omg-linux.ru/docs/yuna/jquery-1.js"></script>
<script type="text/javascript" src="http://planeta.omg-linux.ru/docs/yuna/jquery-ui-1.js"></script>

<script src='http://planeta.omg-linux.ru/docs/yuna/jquery_002.js' type='text/javascript'/></script>

Скрипты расположены на моём хостинге, качайте и кладите на свой.
Скрипт jquery-1 представляет собой переименованную jQuery JavaScript Library v1.5.1. Остальные два - дополнения.

Скрипт меню:
<script type="text/javascript">

$(document).ready(function() {
 
 $('header').hide().fadeIn(500);
 $( "#hello_hide1, #hello_hide2, #submenu_all, #submenu_digital, #submenu_branding, #submenu_print,#work").hide();

 
 $('div[id^=mywork]').each(function(index) {
  $('#mywork'+ (index+1)).hide();
 });
 
 
 
 /* thumbnail */
 shapes = $('.thumbnail_wrapper');  
 $('.thumbnail_wrapper, nav').show();
 $('.thumbnail_wrapper').animate({top:'-20px', opacity:0});
 var z = 0;  
 var refreshId = setInterval(function() {  
     
     shapes.eq(z).animate({top:'15px', opacity:100},{duration:1000, easing: 'easeOutBounce'});
      
      z++;  
      if (z > shapes.length) {  
         clearInterval(refreshId);  
      }  
 }, 200);
 
 
 /* menu */
 $("#submenu_all,#submenu_digital,#submenu_branding,#submenu_print,#hello_hide1, #hello_hide2").mouseover(function(e)
     {
     $(this).addClass("over");
     });
 
 $("#submenu_all,#submenu_digital,#submenu_branding,#submenu_print,#hello_hide1, #hello_hide2").mouseout(function(e)
     {
     $(this).removeClass("over");
     });




  /* hello */
 
  $("#hello").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#hello_hide1").slideDown({duration:300 , easing: 'easeOutCirc'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#hello_hide1");
   });
  }); 
  
  $("#contact,#tweets").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#hello_hide2").slideDown({duration:300 , easing: 'easeOutCirc'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#hello_hide2");
   });
  }); 
 
 
 
 
 
  /* icons rollover */
  $("#sort_all,#submenu_all").mouseover(function() {
   if (!$("#allRollover").hasClass ('selected')) {
    $("#sort_all,#submenu_all").hover(function() {
      $("#allRollover").addClass("over");
    },function() {
       $("#allRollover").removeClass("over");
     });
   }
  });
  
  $("#sort_digital,#submenu_digital").mouseover(function() {
   if (!$("#digitalRollover").hasClass ('selected')) {
    $("#sort_digital,#submenu_digital").hover(function() {
      $("#digitalRollover").addClass("over");
    },function() {
       $("#digitalRollover").removeClass("over");
       
      
     });
   }
  });
  $("#sort_branding,#submenu_branding").mouseover(function() {
   if (!$("#brandingRollover").hasClass ('selected')) {
    $("#sort_branding,#submenu_branding").hover(function() {
      $("#brandingRollover").addClass("over");
    },function() {
       $("#brandingRollover").removeClass("over");

     });
   }
  });
  $("#sort_print,#submenu_print").mouseover(function() {
   if (!$("#printRollover").hasClass ('selected')) {
    $("#sort_print,#submenu_print").hover(function() {
      $("#printRollover").addClass("over");
    },function() {
       $("#printRollover").removeClass("over");
       
      
     });
   }
  });
  
  
  /* submenu rollover */
 
  $("#sort_all").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_all").slideDown({duration:300 , easing: 'easeInOutCubic'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_all");
   });
  });
  
  $("#sort_digital").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_digital").slideDown({duration:300 , easing: 'easeInOutCubic'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_digital");
   });
  });
  $("#sort_branding").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_branding").slideDown({duration:300 , easing: 'easeInOutCubic'});
   }); 
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_branding");
   });
  });
  $("#sort_print").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_print").slideDown({duration:300 , easing: 'easeInOutCubic'});
   }); 
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_print");
   });
  }); /* submenu ends */
  
  
  /* rollover icons ends */
  
  /* thumbnails hover action */
  $(".thumbnail_wrapper").hover(function(){
   $(".cover", this).stop().animate({top:'240px'},{queue:false,duration:300,easing: 'easeOutBack'});
   $(this).animate({top:'3px'},{duration:300 , easing: 'easeInQuad'});
  }, function() {
   $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:100, easing: 'easeInBack'});
   $(this).animate({top:'15px'},{duration:300, easing: 'easeOutBounce'});
   
  }); /* end thumbnails hover action */
  
  
  /* ends */
  $('div[id^=slideImg]').each(function(index) {
  
   $('#slideImg'+ (index+1)).cycle({
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    next:   '.next,#slideImg'+ (index+1),
    prev:   '.prev'
   });
  });
 
});
 
function myMouseOut(id){
      if ($(id).hasClass("over")){
       $(id).mouseleave(function(){
        $(id).slideUp({duration:300 , easing: 'easeInOutCubic'});
       });
      } else{
       $(id).slideUp({duration:300 , easing: 'easeInOutCubic'});
      }
} 
 
 /* scroll */

function goToByScroll(id){
 if( $.browser.opera ){
  $('html').animate({scrollTop: $("#"+id).offset().top},'slow');

 }else {
   $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); 
  }
}

/* show work */
 function showWork(id1,id2){
  /* rollover icons */
  $("#allRollover, #digitalRollover, #brandingRollover, #printRollover").removeClass();
  $("#"+id2).addClass('selected');
  
  /* loading animation */

  if( $.browser.opera ){
    $('html').animate({scrollTop: $("#nav").offset().top},'slow');
   }else {
     $('html,body').animate({scrollTop: $("#nav").offset().top},'slow'); 
  }
    
  $("#divider:first").hide();
  $("#work_loading2").css('width','0%').show();
  $(".menu_"+id1).css('color','#ff4d4d'); /* highlight color - submenu selected */
  
  $("#work_loading").animate({height:'5px'},{queue:false,duration:300, easing: 'easeInOutQuad'});
  
  /* close work */
  
  $('div[id^=mywork]').each(function(index) {
   if( $('#mywork'+ (index+1)).is(":visible") ) {
       $('#mywork'+ (index+1)).fadeOut().hide();
       $("#work").slideUp({duration:200 , easing: 'easeInOutCubic'});
       $(".menu_mywork"+(index+1)).css('color','#333');
   }
  });/* end close work */
  
  $("#work_loading1").animate({height:'5px'},300, function() {
   $("#work_loading2").animate({width:'100%'},1000, function(){
    $("#"+id1).show();
    $("#work").slideDown({duration:700 , easing: 'easeInOutQuad'});
    $("#work_loading1").height(0);
   }); /* end working_loading2 */
  }); /* end working_loading1 */

    
}/* end show work */

function closeWork(id){
  $('html,body').animate({scrollTop: $("#top").offset().top},'slow', function() {
  $("#work").slideUp(500,function(){
   /* rollover icons */
   $("#allRollover, #digitalRollover, #brandingRollover, #printRollover").removeClass();
   $("#allRollover").addClass('selected');
   
   /* close animation */
   $("#"+id).hide();
   $("#work_loading2").slideUp({duration:200 , easing: 'easeInOutQuad'});
   $("#work_loading").animate({height:'0px'},{queue:false,duration:100, easing: 'easeInBack'});
   $("#divider:first").show();
   $(".menu_"+id).css('color','#333'); /* remove color - submenu selected */
  });
 });
}


</script>

Стили:
<style>

#sort_all {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0px 30px 0 15px;
 float: left;
}
#sort_digital {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0 30px 0 0;
 float: left;
}
#sort_branding {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0px 30px 0 0;
 float: left;
}
#sort_print {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0;
 float: left;
}

.icon_desc {
 margin-bottom: 15px;
 margin-top: 5px;
 font-size: 12px;
 color: #959595;
}
#sort_digital img{
 position: relative;
 bottom: +1px;
}
#sort_branding img{
 position: relative;
 bottom: +1px;
}

/** rollover icons **/
#allRollover {
 display: block;
 width: 40px;
 height: 12px;
 #background: url(../img/allRolloverImage.gif) no-repeat 0 0;
 overflow: hidden;
 text-indent: -10000px;
 font-size: 0px;
 line-height: 0px;
}

.over#allRollover{
 background-position: 0 -24px;
}
.selected#allRollover{
 background-position: 0 -12px;
}

.active#allRollover {
 background-position: 0 -24px;
}

#nav{
 position: relative;
 top: -20px;
}

#mywork3 .next,#mywork3 .prev{
 visibility: hidden;
}
#mywork4 .next,#mywork4 .prev{
 visibility: hidden;
}
#mywork14 .next,#mywork14 .prev{
 visibility: hidden;
}
#mywork16 .next,#mywork16 .prev{
 visibility: hidden;
}

#submenu_all{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_all .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 3px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_all .col2 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_all .col3 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_all .col4 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}
#submenu_digital{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_digital .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0 0;
 float: left;
}
#submenu_digital .col2 {
 width:209px;
 border-top: 3px solid #555555;
 margin: 0 30px 0 0;
 float: left;
 padding: 17px 0;
}
#submenu_digital .col3 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0 30px 0 0;
 padding: 17px 0;
 float: left;
}
#submenu_digital .col4 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}

#submenu_branding{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_branding .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_branding .col2 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0 0;
 float: left;
}
#submenu_branding .col3 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 3px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_branding .col4 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}

#submenu_print{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_print .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_print .col2 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_print .col3 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_print .col4 {
 width:210px;
 border-top: 3px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}


</style>

И основная часть, в которой нужно проставить/исправить ссылки (и удалить пробелы, если берёте отсюда):
<a name="nav" id="nav"></a>

<nav style="display: block;"> <!-- nav -->
<div id="sort_all">
<div id="allRollover" class="selected">
all</div>
<div class="icon_desc">
Всё</div>
</div>

<div id="sort_digital">
<div class="" id="digitalRollover">
Пункт1</div>
<div class="icon_desc">
Описание1</div>
</div>

<div id="sort_branding">
<div class="" id="brandingRollover">
Пункт2</div>
<div class="icon_desc">
Описание2</div>
</div>
<div id="sort_print">

<div class="" id="printRollover">
Пункт3</div>
<div class="icon_desc">
Описание3</div>
</div>

<div style="display: none;" id="submenu_all">
<div class="col1">
<a href="#" class="menu_mywork1" onclick="showWork('mywork1', 'digitalRollover'); return false;">Ссылка_пункта_всё
</a>
<a href="#" class="menu_mywork5" onclick="showWork('mywork5', 'printRollover'); return false;">Ссылка_пункта_всё
</a>

<a href="#" class="menu_mywork9" onclick="showWork('mywork9', 'brandingRollover'); return false;">Ссылка_пункта_всё
</a>
<a href="#" class="menu_mywork13" onclick="showWork('mywork13', 'printRollover'); return false;">Ссылка_пункта_всё
</a>

</div>
<div class="col2">
<a href="#" class="menu_mywork2" onclick="showWork('mywork2', 'brandingRollover'); return false;">Ссылка_пункта_всё1
</a>
<a href="#" class="menu_mywork6" onclick="showWork('mywork6', 'digitalRollover'); return false;">Ссылка_пункта_всё1
</a>

<a href="#" class="menu_mywork10" onclick="showWork('mywork10', 'printRollover'); return false;">Ссылка_пункта_всё1
</a>
<a href="#" class="menu_mywork14" onclick="showWork('mywork14', 'digitalRollover'); return false;">Ссылка_пункта_всё1
</a>


</div>
<div class="col3">
<a href="#" class="menu_mywork3" onclick="showWork('mywork3', 'digitalRollover'); return false;">Ссылка_пункта_всё2
</a>
<a href="#" class="menu_mywork7" onclick="showWork('mywork7', 'brandingRollover'); return false;">Ссылка_пункта_всё2
</a>
<a href="#" class="menu_mywork11" onclick="showWork('mywork11', 'digitalRollover'); return false;">Ссылка_пункта_всё2
</a>

<a href="#" class="menu_mywork15" onclick="showWork('mywork15', 'printRollover'); return false;">Ссылка_пункта_всё2
</a>
</div>
<div class="col4">
<a href="#" class="menu_mywork4" onclick="showWork('mywork4', 'printRollover'); return false;">Ссылка_пункта_всё3
</a>
<a href="#" class="menu_mywork8" onclick="showWork('mywork8', 'digitalRollover'); return false;">Ссылка_пункта_всё3
</a>
<a href="#" class="menu_mywork12" onclick="showWork('mywork12', 'printRollover'); return false;">Ссылка_пункта_всё3
</a>



</div>
</div>
<div style="display: none;" id="submenu_digital">
<div class="col1">

</div>
<div class="col2">
<a href="#" class="menu_mywork1" onclick="showWork('mywork1', 'digitalRollover'); return false;">Ссылка_пункта1</a>

<a href="#" class="menu_mywork6" onclick="showWork('mywork6', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
<a href="#" class="menu_mywork11" onclick="showWork('mywork11', 'digitalRollover'); return false;">Ссылка_пункта1
</a>

<a href="#" class="menu_mywork8" onclick="showWork('mywork8', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
<a href="#" class="menu_mywork3" onclick="showWork('mywork3', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
<a href="#" class="menu_mywork14" onclick="showWork('mywork14', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
</div>
<div class="col3">


</div>

<div class="col4">

</div>
</div>
<div style="display: none;" id="submenu_branding">
<div class="col1">
</div>
<div class="col2">
</div>
<div class="col3">
<a href="#" class="menu_mywork2" onclick="showWork('mywork2', 'brandingRollover'); return false;">Ссылка_пункта2
</a>
<a href="#" class="menu_mywork7" onclick="showWork('mywork7', 'brandingRollover'); return false;">Ссылка_пункта2
</a>

<a href="#" class="menu_mywork9" onclick="showWork('mywork9', 'brandingRollover'); return false;">Ссылка_пункта2
</a>
</div>
<div class="col4">
</div>
</div>
<div class="" style="display: none;" id="submenu_print">
<div class="col1">
</div>
<div class="col2">
</div>
<div class="col3">





</div>
<div class="col4">
<a href="#" class="menu_mywork15" onclick="showWork('mywork15', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork4" onclick="showWork('mywork4', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork13" onclick="showWork('mywork13', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork5" onclick="showWork('mywork5', 'printRollover'); return false;">Ссылка_пункта3
</a>

<a href="#" class="menu_mywork12" onclick="showWork('mywork12', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork10" onclick="showWork('mywork10', 'printRollover'); return false;">Ссылка_пункта3
</a>
</div>
</div>

</nav>

Весь код целиком
<script type="text/javascript" src="http://planeta.omg-linux.ru/docs/yuna/jquery-1.js"></script>
<script type="text/javascript" src="http://planeta.omg-linux.ru/docs/yuna/jquery-ui-1.js"></script>

<script src='http://planeta.omg-linux.ru/docs/yuna/jquery_002.js' type='text/javascript'/></script>

<style>
#sort_all {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0px 30px 0 15px;
 float: left;
}
#sort_digital {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0 30px 0 0;
 float: left;
}
#sort_branding {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0px 30px 0 0;
 float: left;
}
#sort_print {
 width:210px;
 padding-bottom: 10px;
 padding-left: 0;
 margin: 0;
 float: left;
}

.icon_desc {
 margin-bottom: 15px;
 margin-top: 5px;
 font-size: 12px;
 color: #959595;
}
#sort_digital img{
 position: relative;
 bottom: +1px;
}
#sort_branding img{
 position: relative;
 bottom: +1px;
}

/** rollover icons **/
#allRollover {
 display: block;
 width: 40px;
 height: 12px;
 background: url(../img/allRolloverImage.gif) no-repeat 0 0;
 overflow: hidden;
 text-indent: -10000px;
 font-size: 0px;
 line-height: 0px;
}

.over#allRollover{
 background-position: 0 -24px;
}
.selected#allRollover{
 background-position: 0 -12px;
}

.active#allRollover {
 background-position: 0 -24px;
}

#nav{
 position: relative;
 top: -20px;
}

#mywork3 .next,#mywork3 .prev{
 visibility: hidden;
}
#mywork4 .next,#mywork4 .prev{
 visibility: hidden;
}
#mywork14 .next,#mywork14 .prev{
 visibility: hidden;
}
#mywork16 .next,#mywork16 .prev{
 visibility: hidden;
}

#submenu_all{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_all .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 3px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_all .col2 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_all .col3 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_all .col4 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}
#submenu_digital{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_digital .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0 0;
 float: left;
}
#submenu_digital .col2 {
 width:209px;
 border-top: 3px solid #555555;
 margin: 0 30px 0 0;
 float: left;
 padding: 17px 0;
}
#submenu_digital .col3 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0 30px 0 0;
 padding: 17px 0;
 float: left;
}
#submenu_digital .col4 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}

#submenu_branding{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_branding .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_branding .col2 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0 0;
 float: left;
}
#submenu_branding .col3 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 3px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_branding .col4 {
 width:210px;
 border-top: 1px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}

#submenu_print{
 width: 930px;
 margin-left: 15px;
 font: 12px/15px Georgia, "Times New Roman", Times, serif;
 clear: both;
 float: left;
 display: none;
}
#submenu_print .col1 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_print .col2 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_print .col3 {
 width:210px;
 margin: 0 30px 0 0;
 border-top: 1px solid #555555;
 padding: 17px 0;
 float: left;
}
#submenu_print .col4 {
 width:210px;
 border-top: 3px solid #555555;
 margin: 0;
 padding: 17px 0;
 float: left;
}
</style>

<script type="text/javascript">

$(document).ready(function() {
 
 $('header').hide().fadeIn(500);
 $( "#hello_hide1, #hello_hide2, #submenu_all, #submenu_digital, #submenu_branding, #submenu_print,#work").hide();

 
 $('div[id^=mywork]').each(function(index) {
  $('#mywork'+ (index+1)).hide();
 });
 
 
 
 /* thumbnail */
 shapes = $('.thumbnail_wrapper');  
 $('.thumbnail_wrapper, nav').show();
 $('.thumbnail_wrapper').animate({top:'-20px', opacity:0});
 var z = 0;  
 var refreshId = setInterval(function() {  
     
     shapes.eq(z).animate({top:'15px', opacity:100},{duration:1000, easing: 'easeOutBounce'});
      
      z++;  
      if (z > shapes.length) {  
         clearInterval(refreshId);  
      }  
 }, 200);
 
 
 /* menu */
 $("#submenu_all,#submenu_digital,#submenu_branding,#submenu_print,#hello_hide1, #hello_hide2").mouseover(function(e)
     {
     $(this).addClass("over");
     });
 
 $("#submenu_all,#submenu_digital,#submenu_branding,#submenu_print,#hello_hide1, #hello_hide2").mouseout(function(e)
     {
     $(this).removeClass("over");
     });




  /* hello */
 
  $("#hello").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#hello_hide1").slideDown({duration:300 , easing: 'easeOutCirc'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#hello_hide1");
   });
  }); 
  
  $("#contact,#tweets").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#hello_hide2").slideDown({duration:300 , easing: 'easeOutCirc'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#hello_hide2");
   });
  }); 
 
 
 
 
 
  /* icons rollover */
  $("#sort_all,#submenu_all").mouseover(function() {
   if (!$("#allRollover").hasClass ('selected')) {
    $("#sort_all,#submenu_all").hover(function() {
      $("#allRollover").addClass("over");
    },function() {
       $("#allRollover").removeClass("over");
     });
   }
  });
  
  $("#sort_digital,#submenu_digital").mouseover(function() {
   if (!$("#digitalRollover").hasClass ('selected')) {
    $("#sort_digital,#submenu_digital").hover(function() {
      $("#digitalRollover").addClass("over");
    },function() {
       $("#digitalRollover").removeClass("over");
       
      
     });
   }
  });
  $("#sort_branding,#submenu_branding").mouseover(function() {
   if (!$("#brandingRollover").hasClass ('selected')) {
    $("#sort_branding,#submenu_branding").hover(function() {
      $("#brandingRollover").addClass("over");
    },function() {
       $("#brandingRollover").removeClass("over");

     });
   }
  });
  $("#sort_print,#submenu_print").mouseover(function() {
   if (!$("#printRollover").hasClass ('selected')) {
    $("#sort_print,#submenu_print").hover(function() {
      $("#printRollover").addClass("over");
    },function() {
       $("#printRollover").removeClass("over");
       
      
     });
   }
  });
  
  
  /* submenu rollover */
 
  $("#sort_all").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_all").slideDown({duration:300 , easing: 'easeInOutCubic'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_all");
   });
  });
  
  $("#sort_digital").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_digital").slideDown({duration:300 , easing: 'easeInOutCubic'});
   });
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_digital");
   });
  });
  $("#sort_branding").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_branding").slideDown({duration:300 , easing: 'easeInOutCubic'});
   }); 
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_branding");
   });
  });
  $("#sort_print").hover(function() {
   $(this).doTimeout('hover',300, function(){
     $("#submenu_print").slideDown({duration:300 , easing: 'easeInOutCubic'});
   }); 
  },function() {
   $(this).doTimeout('hover',300, function(){
     myMouseOut("#submenu_print");
   });
  }); /* submenu ends */
  
  
  /* rollover icons ends */
  
  /* thumbnails hover action */
  $(".thumbnail_wrapper").hover(function(){
   $(".cover", this).stop().animate({top:'240px'},{queue:false,duration:300,easing: 'easeOutBack'});
   $(this).animate({top:'3px'},{duration:300 , easing: 'easeInQuad'});
  }, function() {
   $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:100, easing: 'easeInBack'});
   $(this).animate({top:'15px'},{duration:300, easing: 'easeOutBounce'});
   
  }); /* end thumbnails hover action */
  
  
  /* ends */
  $('div[id^=slideImg]').each(function(index) {
  
   $('#slideImg'+ (index+1)).cycle({
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    next:   '.next,#slideImg'+ (index+1),
    prev:   '.prev'
   });
  });
 
});
 
function myMouseOut(id){
      if ($(id).hasClass("over")){
       $(id).mouseleave(function(){
        $(id).slideUp({duration:300 , easing: 'easeInOutCubic'});
       });
      } else{
       $(id).slideUp({duration:300 , easing: 'easeInOutCubic'});
      }
} 
 
 /* scroll */

function goToByScroll(id){
 if( $.browser.opera ){
  $('html').animate({scrollTop: $("#"+id).offset().top},'slow');

 }else {
   $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); 
  }
}

/* show work */
 function showWork(id1,id2){
  /* rollover icons */
  $("#allRollover, #digitalRollover, #brandingRollover, #printRollover").removeClass();
  $("#"+id2).addClass('selected');
  
  /* loading animation */

  if( $.browser.opera ){
    $('html').animate({scrollTop: $("#nav").offset().top},'slow');
   }else {
     $('html,body').animate({scrollTop: $("#nav").offset().top},'slow'); 
  }
    
  $("#divider:first").hide();
  $("#work_loading2").css('width','0%').show();
  $(".menu_"+id1).css('color','#ff4d4d'); /* highlight color - submenu selected */
  
  $("#work_loading").animate({height:'5px'},{queue:false,duration:300, easing: 'easeInOutQuad'});
  
  /* close work */
  
  $('div[id^=mywork]').each(function(index) {
   if( $('#mywork'+ (index+1)).is(":visible") ) {
       $('#mywork'+ (index+1)).fadeOut().hide();
       $("#work").slideUp({duration:200 , easing: 'easeInOutCubic'});
       $(".menu_mywork"+(index+1)).css('color','#333');
   }
  });/* end close work */
  
  $("#work_loading1").animate({height:'5px'},300, function() {
   $("#work_loading2").animate({width:'100%'},1000, function(){
    $("#"+id1).show();
    $("#work").slideDown({duration:700 , easing: 'easeInOutQuad'});
    $("#work_loading1").height(0);
   }); /* end working_loading2 */
  }); /* end working_loading1 */

    
}/* end show work */

function closeWork(id){
  $('html,body').animate({scrollTop: $("#top").offset().top},'slow', function() {
  $("#work").slideUp(500,function(){
   /* rollover icons */
   $("#allRollover, #digitalRollover, #brandingRollover, #printRollover").removeClass();
   $("#allRollover").addClass('selected');
   
   /* close animation */
   $("#"+id).hide();
   $("#work_loading2").slideUp({duration:200 , easing: 'easeInOutQuad'});
   $("#work_loading").animate({height:'0px'},{queue:false,duration:100, easing: 'easeInBack'});
   $("#divider:first").show();
   $(".menu_"+id).css('color','#333'); /* remove color - submenu selected */
  });
 });
}


</script>

<a name="nav" id="nav"></a>

<nav style="display: block;"> <!-- nav -->
<div id="sort_all">
<div id="allRollover" class="selected">
all</div>
<div class="icon_desc">
Всё</div>
</div>

<div id="sort_digital">
<div class="" id="digitalRollover">
Пункт1</div>
<div class="icon_desc">
Описание1</div>
</div>

<div id="sort_branding">
<div class="" id="brandingRollover">
Пункт2</div>
<div class="icon_desc">
Описание2</div>
</div>
<div id="sort_print">

<div class="" id="printRollover">
Пункт3</div>
<div class="icon_desc">
Описание3</div>
</div>

<div style="display: none;" id="submenu_all">
<div class="col1">
<a href="#" class="menu_mywork1" onclick="showWork('mywork1', 'digitalRollover'); return false;">Ссылка_пункта_всё
</a>
<a href="#" class="menu_mywork5" onclick="showWork('mywork5', 'printRollover'); return false;">Ссылка_пункта_всё
</a>

<a href="#" class="menu_mywork9" onclick="showWork('mywork9', 'brandingRollover'); return false;">Ссылка_пункта_всё
</a>
<a href="#" class="menu_mywork13" onclick="showWork('mywork13', 'printRollover'); return false;">Ссылка_пункта_всё
</a>

</div>
<div class="col2">
<a href="#" class="menu_mywork2" onclick="showWork('mywork2', 'brandingRollover'); return false;">Ссылка_пункта_всё1
</a>
<a href="#" class="menu_mywork6" onclick="showWork('mywork6', 'digitalRollover'); return false;">Ссылка_пункта_всё1
</a>

<a href="#" class="menu_mywork10" onclick="showWork('mywork10', 'printRollover'); return false;">Ссылка_пункта_всё1
</a>
<a href="#" class="menu_mywork14" onclick="showWork('mywork14', 'digitalRollover'); return false;">Ссылка_пункта_всё1
</a>


</div>
<div class="col3">
<a href="#" class="menu_mywork3" onclick="showWork('mywork3', 'digitalRollover'); return false;">Ссылка_пункта_всё2
</a>
<a href="#" class="menu_mywork7" onclick="showWork('mywork7', 'brandingRollover'); return false;">Ссылка_пункта_всё2
</a>
<a href="#" class="menu_mywork11" onclick="showWork('mywork11', 'digitalRollover'); return false;">Ссылка_пункта_всё2
</a>

<a href="#" class="menu_mywork15" onclick="showWork('mywork15', 'printRollover'); return false;">Ссылка_пункта_всё2
</a>
</div>
<div class="col4">
<a href="#" class="menu_mywork4" onclick="showWork('mywork4', 'printRollover'); return false;">Ссылка_пункта_всё3
</a>
<a href="#" class="menu_mywork8" onclick="showWork('mywork8', 'digitalRollover'); return false;">Ссылка_пункта_всё3
</a>
<a href="#" class="menu_mywork12" onclick="showWork('mywork12', 'printRollover'); return false;">Ссылка_пункта_всё3
</a>

</div>
</div>
<div style="display: none;" id="submenu_digital">
<div class="col1">

</div>
<div class="col2">
<a href="#" class="menu_mywork1" onclick="showWork('mywork1', 'digitalRollover'); return false;">Ссылка_пункта1</a>

<a href="#" class="menu_mywork6" onclick="showWork('mywork6', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
<a href="#" class="menu_mywork11" onclick="showWork('mywork11', 'digitalRollover'); return false;">Ссылка_пункта1
</a>

<a href="#" class="menu_mywork8" onclick="showWork('mywork8', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
<a href="#" class="menu_mywork3" onclick="showWork('mywork3', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
<a href="#" class="menu_mywork14" onclick="showWork('mywork14', 'digitalRollover'); return false;">Ссылка_пункта1
</a>
</div>
<div class="col3">
</div>

<div class="col4">
</div>
</div>
<div style="display: none;" id="submenu_branding">
<div class="col1">
</div>
<div class="col2">
</div>
<div class="col3">
<a href="#" class="menu_mywork2" onclick="showWork('mywork2', 'brandingRollover'); return false;">Ссылка_пункта2
</a>
<a href="#" class="menu_mywork7" onclick="showWork('mywork7', 'brandingRollover'); return false;">Ссылка_пункта2
</a>

<a href="#" class="menu_mywork9" onclick="showWork('mywork9', 'brandingRollover'); return false;">Ссылка_пункта2
</a>
</div>
<div class="col4">
</div>
</div>
<div class="" style="display: none;" id="submenu_print">
<div class="col1">
</div>
<div class="col2">
</div>
<div class="col3">

</div>
<div class="col4">
<a href="#" class="menu_mywork15" onclick="showWork('mywork15', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork4" onclick="showWork('mywork4', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork13" onclick="showWork('mywork13', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork5" onclick="showWork('mywork5', 'printRollover'); return false;">Ссылка_пункта3
</a>

<a href="#" class="menu_mywork12" onclick="showWork('mywork12', 'printRollover'); return false;">Ссылка_пункта3
</a>
<a href="#" class="menu_mywork10" onclick="showWork('mywork10', 'printRollover'); return false;">Ссылка_пункта3
</a>
</div>
</div>

</nav>
Код исправлен ради приемлемого юзабилити, больше не трогал. Заусенцы шлифуем сами :).

31 комментарий:

  1. Скопировал этот огромный скрипт и поставил в до закрытого head и потом туда же стили. из последнего сделал виджет. При предпросмотре виджета показало все в столбик вверху, ну думаю сейчас посмотрю в предпросмотре html, но ничего он не показал, и решил я сохранить. Выдал он мне ошибку с кодом ее, и написали что бы отправить ее им.
    Что я не правильно сделал? Меню очень понравилось хочу его к себе поставить.

    ОтветитьУдалить
  2. Отлаживайте на тестовом блоге.
    У меня это меню пара месяцев стояло на этом блоге, всем нравилось.

    В статье под спойлером приведён "весь код целиком". Прямо, как есть (вместе со стилями и т.д.), вставьте в html гаджет блога (вот образец только что сделал на шаблоне, который отлаживаю, http://livestreet-blogger.blogspot.com/). Только не забывайте копировать код через кнопку viewsource, а не просто так.

    Если заработает, тогда можете стили перенести в шаблон, а скрипт в отдельный файл, или оставить, как есть.

    ОтветитьУдалить
  3. Да я именно в тестовом и делаю http://kaushkatemporal.blogspot.com/
    Если получится перенесу уже в постоянный.
    Оооо, весь одним текстом?! В гаджет? Отлично сейчас попробую.
    Спасибо!
    Потом отпишусь.

    ОтветитьУдалить
  4. Вот правильно.
    Вижу, что меню работает :).

    ОтветитьУдалить
  5. Ага! Спасибо!!!
    Сначала третий пункт сполз на вторую строку, хотел тебя спросить где в коде ширину поменять, но потом дай думаю ползунок поняну немного в права и все, получилось!
    По поводу мета тэгов в blogspot хотел тебя спросить, но что то уже тему не могу найти, читал, пробовал, но что то продвижений мало, также на всех страницах одно и тоже показывает.

    ОтветитьУдалить
  6. Это спасибо изобретателю-корейцу за меню.

    Тема метатегов здесь - http://blogger.omg-linux.ru/2011/11/description-v-blogger.html

    Я для Description использую такую конструкцию:

    <meta expr:content='data:blog.pageName + &quot; :: &quot; + data:blog.title' name='description'/>

    Тот, что стоит сейчас, конечно надо убрать.

    Метатег keywords не использую. Правильно это или нет, пока не знаю.
    Как справитесь с метатегом, подскажу, как сделать правильные заголовки и правильную очерёдность этих тегов в разделе <head></head>, по крайней мере, как я сделал это у себя.

    ОтветитьУдалить
  7. А я там уже кое что добавлял, теперь даже не знаю что удалять, ты не мог бы глянуть и сказать от куда до куда удалять? http://kaushka.blogspot.com

    ОтветитьУдалить
  8. Удалить все, что касается description.
    И вставить:
    <b:if cond='data:blog.pageType == &quot;index&quot;'><meta content='Blogger не для чайников, скрипты, секреты, виджеты для платформы blogspot' name='description'/><b:else/><meta expr:content='data:blog.pageName + &quot; :: &quot; + data:blog.title' name='description'/>
    </b:if>

    Только "Blogger не для ... скрипты.." изменить на свои слова для главной страницы. На остальных страницах метатеги будут генерироваться автоматически.

    ОтветитьУдалить
  9. Сделал, Спасибо!
    Как сделать правильную очередность...
    Blogger не для чего?.. то что в скрипты могут что то занести?

    ОтветитьУдалить
  10. meta content='Наши услуги' name='description'/>

    < meta expr:content='data:blog.pageName + " :: " + data:blog.title' name='description'/>

    Вот это не получается удалить, там тоже есть descripiton
    Может это я сам туда добавил я уже не помню

    ОтветитьУдалить
  11. Удалил, это я с ними удалял какие то закрывающие тэги, без них удалил спокойно.
    А у тебя что то есть на сайте "Похожие статьи" она автоматом ищет похожие статьи и под статьей их ставит. У меня глюк в том что "аппетит" не могу ограничить, может даже больше десяти статей найти, но там же я ничего не менял как стоял ограничитель 5 статей так и остался. Max5 так вроде.

    ОтветитьУдалить
  12. У меня в "Читателям тоже нравится" стоит виджет от outbrain.com. Довольно полезная вещь. Может отображаться как текстом, так и с картинками.

    ОтветитьУдалить
  13. (((Как справитесь с метатегом, подскажу, как сделать правильные заголовки и правильную очерёдность этих тегов в разделе < head>, по крайней мере, как я сделал это у себя.)))Подскажешь как дальше быть с этим делом?

    ОтветитьУдалить
  14. Тег заголовков (в шапке вкладки браузера).
    Вместо "Название сайта:Название статьи" должно быть "Название сайта" на главной странице, и только "Название статьи" на внутренних страницах.
    Поэтому тег

    <title><data:blog.pageTitle/></title>

    Надо изменить на:

    <b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/></title><b:else/><title><data:blog.pageTitle/></title> </b:if>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <link expr:href='data:blog.homepageUrl' rel='canonical'/>
    </b:if>

    Эту конструкцию я поставил выше всех, прямо перед открывающим тегом head, она - самая главная.
    После неё идёт метатег Description.

    Кстати, я посмотрел, у меня оказывается есть метатег keywords, но только для главной страницы:

    <b:if cond='data:blog.url == data:blog.homepageUrl'><meta content='виджеты, blogger, blogspot, js, jquery, код, скрипты, гаджеты, кнопка, блог, сео, оптимизация, шаблон, яндекс, youtube, индексация' name='keywords'/></b:if>

    Keywords идёт третьим, после Description.

    Потом метатег robots.txt (если будете ставить, уберите предыдущий метатег robots.txt):

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta content='index,follow' name='robots'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <meta content='index,follow' name='robots'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <meta content='index,follow' name='robots'/>
    <b:else/>
    <meta content='noindex,follow' name='robots'/>
    </b:if></b:if></b:if>

    Здесь мы разрешаем поисковым роботам индексировать и следовать на внутренних страницах, главной и статических. Разрешаем следовать по архивам, но запрещаем их индексировать, чтобы не было дублей.

    ОтветитьУдалить
  15. Спасибо за помощь! Теперь у меня практически везде выходят свои Титлы по названию темы!
    Туда же я вчера себе поместил мета от Яндекса. Поисковик таким образом предлагает пройти верификацию, подтверждения что это мой сайт, блог.
    Далее этот тэг meta content='77a4322849fda5a6' name='yandex-verification'/> остается на месте но Яндекс не может его найти. Вопрос нужен ли мне этот тэг там или же есть какие другие способы что ты этот поисковик находил меня чаще?

    Хочу задать вам вопрос о Ярлычках. Мой блог находится в шаблоне разбитом на три колонки, две постоянные узкие по краям и один постоянный для публикации постов, тем. Каждый раз когда я кликаю по ярлыкам (до 10 ссылок) меня без проблем перебрасывает на них. Но есть один из них в нем самое большое количество ссылок 36, вот с ним и начинаются проблемы, а именно. Левый блок шаблона вообще исчезает куда то, правый же блок полностью смещается в самый низ, под эти 36 результатов поиска. Можно ли это как то поправить, если это проблема скриптов, где нужно искать зацепку что найти решение проблемы. Спасибо за Вашу помощь!

    ОтветитьУдалить
  16. Метатег Яндекса нужен, чтобы у вас в Яндекс Вебмастер был доступ к статистике своего блога. Если Вебмастер ругается, что не нашёл метатег (есть такой баг), то удалите из шаблоны нынешний, сходите в вебмастер за новым и поставьте в шаблоны перед тегом /head. К частоте сканирования роботом Яндекса вашего блога он не имеет никакого отношения.

    Посмотрел я на ваш ярлык "Турин".
    Есть подозрение, что одно из сообщений (статей) содержит элемент, который вылезает за свои границы. Проверьте каждую, из эти 37 статей. Не сползает ли блок сайдбара внутри этих страницах.
    Карты, типа гугл мапс, желательно прятать под кат (блоггеровская обрезалка more), на страницах ярлыков они могут вести себя непредсказуемо и очень утяжеляют эти страницы.

    ОтветитьУдалить
  17. Спасибо, вы правы! Когда у меня было мало времени, я многие материалы постил на скорую руку, сейчас уже неделю сижу все исправляю, перелинковка, вывод самых популярных ярлычков, с html в визуальный редактор перехожу что бы поудалять лишний мусор и разместить с новостном блоке все в соответствии с размером шаблона в Блоггере.
    Да и счетчик уникальных посетителей от Яндекса что то тоже не могу получить.

    ОтветитьУдалить
  18. Счётчик в Метрике, там где редактируется ссылка на ваш блог.

    ОтветитьУдалить
  19. Привет!Раньше при публикации статьи в соцсетях было название статьи потом название блога потом название блога и опять название статьи.Теперь сделал как ты советуешь.Теперь при публикации идёт только название статьи, название блога нет.А в гугле плюс анонс статьи повторяется два раза потом название блога.Чего мне нужно поправить?

    ОтветитьУдалить
  20. Это когда жмёшь на кнопку и выбираешь share?
    Там фавикон + название поста
    А внизу название поста:название блога
    Вроде так и должно быть.
    Вконтакте по крайней мере всё время так любую ссылку определял.

    ОтветитьУдалить
  21. Я когда нахожу мой блог в гугле то там почему то не как у всех, указываются первые две три строки статьи найденой поисковиком, а дискрипция, описание всего блога? Что это может быть, что нужно поправить в мета тэгах?

    ОтветитьУдалить
  22. Вопрос по менюшкам.
    Стандартно созданные страницы с стандартным меню сверху, активная кнопочка на моем постоянном рабочем блоге синего цвета, я хотел бы ее сделать более подходящей под фон блога допустим вот такой серой #CCCCCC. Где в коде шаблона можно найти такой параметр по изменению фона активной кнопочки. Спасибо.

    ОтветитьУдалить
  23. Я когда нахожу мой блог в гугле то там почему то не как у всех...
    Описание, которое в метатеге Description? Или описание, которое располагается под заголовком блога?

    Чтобы повлиять на снипет поисковика, нужно описание под заголовком убрать, а статью начинать с интересных предложений и выделять ключевые фразы жирным тегом b.

    Кстати, у меня было тоже самое в Яндексе, потом поменялось на предложение из статьи.

    Вопрос по менюшкам...
    Не знаю, надо видеть пример на самом блоге и инспектировать через браузер Опера (функция Dragonfly).

    ОтветитьУдалить
  24. @aldous
    Раньше через кнопки соцсетей выводилось название статьи потом название блога.Сейчас только название статьи,а название блога нету.Правильно это или нет?Я имею ввиду название блога должно быть?А в гугле плюс анонс добавляю не через кнопку, а вручную сначала добавляю анонс статьи,потом указываю ссылку на статью.И автоматически появляется двойное название статьи и название блога.Теперь не знаю что делать.

    ОтветитьУдалить
  25. Это потому что в title, заголовке страницы, теперь только название статьи.

    Грамотные сеошники подсказали, что название блога каждый раз таскать на внутренних страницах не надо, это вредит блогеру (дублирование информации).

    Название блога должно быть только на главной странице, ну может ещё на статических (они вообще не важны для поиска).

    Насчёт анонса Гугл +1. Я вставляю ссылку, она автоматически определяется. Я жму "удалить описание", остаются только название поста и фото. Дублей нет). Тут, честно говоря, я вообще новичёк. Первый раз это делаю (до этого только акк зарегил и страницу блога создал, но благополучно "потерял" её).

    ОтветитьУдалить
  26. Да что-то не найду страницу с настройками. Где настраивать созданный бренд.

    ОтветитьУдалить
  27. @aldous
    Я и в Facebook создал две страницы. И при написание поста при помощи приложения RSS Graffiti прям из блога
    автоматически публикуются анонсы статей на страницах Facebook.Если интересно посмотри:http://new-school-blogger.blogspot.com/2012/01/rss-graffiti-transljacii-stranicu.html

    ОтветитьУдалить
  28. Посмотрел, хороший способ.
    А у меня один сайт постит на фейсбук через сервис tweetmeme (вроде так, точно не помню, год не проверял).

    ОтветитьУдалить
  29. @aldous
    RSS Graffiti настроек много.Можно поставить задержку публикации,можно полностью статью,можно как в твиттере и т.д.

    ОтветитьУдалить
  30. Этот комментарий был удален автором.

    ОтветитьУдалить