На самом деле все очень просто – этот гаджет устанавливается просто, как и все коды, которые я выкладываю.
Главное знать что и куда ставить. Можно конечно в конце каждой статьи прописывать свои же ссылки в ручную, но с гаджетом это делается проще. Кроме того ссылка вашего ресурса при установке прописывается на другом большом сайте, что улучшает рейтинг вашего домена для поисковиков. Да и посетитель, задержат вам для роботов поисковых систем. При формировании поисковой выдачи они учтут эти моменты.
Итак, к делу:
Регистрируем ваш ресурс на сервисе Linkwithin. Переходим по ссылке и указываем, ваш E-mail, адрес блога, выбираем платформу Blogger и количество статей, которые будет отображать гаджет (для своего блога я выбрал 5 stories). После этого нажмите кнопку «Get Widget!».
Сверху вы увидите ссылку «Install Widget», переходим по ней. Ссылка перекидывает нас уже в блогер, где мы выбираем блог, на который хотим водрузить данный гаджет. выбираем свой блог, пишем название и нажимаем «Редактировать содержание».
Далее копируем выделенный синим фрагмент кода.
Все. Далее действия с HTML кодом нашего блога:
Войти в Blogger > перейти в Шаблон > Изменить HTML.
Войти в Blogger > перейти в Шаблон > Изменить HTML.
в поиске кода шаблона (CTRL + F) вводим фразу:
<div class='post-footer-line post-footer-line-1'>
Внимание! Таких строчек в шаблоне две. Вставлять скопированный код необходимо именно под вторую строчку:
Теперь добавьте под этот фрагмент такую строчку <script>linkwithin_text='Похожие статьи:'</script> ,
(Фразу "Похожие статьи" в коде я специально выделил красным. Ее можно менять по своему усмотрению.)
(Фразу "Похожие статьи" в коде я специально выделил красным. Ее можно менять по своему усмотрению.)
нажмите «Сохранить шаблон», а затем откройте ваш блог и увидите, что на Главной странице появились ссылки на ваши другие статьи.
Но так быть не должно – гаджет нуждается в доработке. Исправляем ситуацию с помощью условных тегов <b:if>. Создадим условие, при котором на Главной странице виджет «Похожие статьи» отображаться не будет, а будет находится там, где надо нам. А именно внизу каждой статьи и нигде более.
Для этого перед кодом поставьте строку
<b:if cond='data:blog.pageType == "item"'> ,
после него – закрывающий тег:
</b:if> .
Вот как это должно выглядеть:
Теперь осталось только добавить стиль для нашего гаджета.
Для того чтобы добавить стиль, необходимо вновь зайти в HTML, вызвать строку поиска(CTRL + F), вставить туда такой фрагмент:
]]></b:skin> - и нажать «Enter».
]]></b:skin> - и нажать «Enter».
Сразу перед этой строчкой добавьте следующий код:
Посмотреть код:
*****************************************
Name : Widget LinkWithin Style
******************************************/
body{text-align:center;}
.linkwithin_div {
background: #EEEEEE; /* Цвет фона контейнера */
padding: 0 10px;
border-top: 1px solid #DBDBDB; /* Верхняя граница*/
border-bottom: 1px solid #DBDBDB; /*Нижняя граница*/
}
.linkwithin_text {
font-family: Cambria,Georgia,sans-serif;
padding-left: 180px !important;;/*отступление названия блока надо подстраивать*/
font-size:30px; /* размер текста названия блока */
color:#0565c9; /* цвет названия блока*/
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3,
a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7,
a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11,
a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15,
a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19,
a#linkwithin_logolink_20 {
display:none;
}
.linkwithin_posts {
width: 720px !important;/* Ширина контейнера надо подстраивать*/
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 32px !important;text-align:center;;/* отступление меж кругами надо подстраивать*/
}
.linkwithin_posts a:hover {
background: #FFFFFF !important; /* Цвет фона при наведении мыши*/
}
.linkwithin_img_0 {
background: #F5F5F5;
border: 1px solid #C1C1C1;
padding: 2px !important;
transition:all .2s linear;
-o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.linkwithin_img_0:hover {
background: #ffffff;
padding: 2px !important;
opacity:.6;
filter:alpha(opacity=60)
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
.linkwithin_title {
color: #ed1c24 !important; /* Цвет заголовков*/
font-family: Verdana,Georgia,sans-serif;
font-size: 12px !important; /* Фронтальный размер заголовков*/
line-height: 24px !important;
text-align:center !important;
text-decoration: none;
}
.linkwithin_title:hover {
color: #000 !important; /* Цвет блока при наведении*/
}
/* Widget Style CSS End */
Все! Наш гаджет готов и настроен!
P.S.: В последнем коде переведены и проставлены маркеры для подгонки размеров и цветов под размеры вашего ресурса и по вашему вкусу, разобраться несложно.
