Стиль журнала для шаблона Blogger

Просмотров: 155

Как создать стиль журнала для шаблона BloggerПриветствую вас, дорогой читатель! Милых моих читательниц поздравляю с праздником 8 марта! Желаю здоровья, мира и благополучия, сочувствия и понимания, счастья и конечно любви! Я люблю Вас всех, без исключения! На этом короткая праздничная, моя речь, заканчивается и наступает обычная, рутинная писанина.

Сегодня инструкция для желающих превратить свой обычный, стандартный шаблон блога Blogger в журнальный стиль. Для справки: это когда на главной странице вашего блога записи идут не как обычно, друг за другом, а расположены в два ряда и над ними расположена запись в обычном, чуть изменённом стиле. Ну вообщем, как в новостных блогах. Вроде понятно объяснил. Да, что же это я, слова да слова, а изображения где?  Скриншот в студию - cтиль журнала для шаблона Blogger:

Как создать стиль журнала для шаблона Blogger
Журнальный стиль шаблона Blogger

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

Как стандартный шаблон Blogger переделать в журнальный

Первым делом, друзья, перед тем как, что то менять в шаблоне блога настоятельно рекомендую создать его резервную копию или как я всегда не устаю повторять, создайте для себя новый экспериментальный блог, где вы сможете проводить различные опыты над ним, без боязни повредить основной. И так, найдите в вашем шаблоне такую строку <data:post.body/> имейте ввиду, что таких строчек может быть 4, остановитесь на второй. Затем, замените её вот этим кодом:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Далее &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Я изменил подсветку кода на этом блоге, сделал его более компактным и добавил панельку управления, для удобства, пользуйтесь ей. Продолжим. Найдите другую строчку, вот такую - <b:include data='post' name='post'/> и так же удалите её и вместо, вставьте этот код:

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary1&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb1(&quot;summary1<data:post.id/>&quot;);</script>
<span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Далее &#187;</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Далее, ищем тег </head> и над ним (чуть выше) добавляем эту конструкцию:

<script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580;
first_thumb_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
  var summary = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = first_thumb_sum;
}
var summary1 = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}
//]]>
</script>

В начале скрипта есть настройки, на всякий случай: количество символов для сообщений, когда не будет миниатюр в статье; количество символов с изображениями; высота и ширина эскизов (картинок)  и так далее.  Продолжаем, последний и заключительный шаг. Нам надо добавить стили CSS, для этого добавим так же, чуть выше тега </head> код CSS:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.first-post-thumb {
    margin-right: 10px;
}
.summary {
    height: 100%;
}
#first { /* Styles for the First Post Container */
    width: auto;
    height: 250px;
    float: left;
    margin-bottom: 10px;
    background-color: #F4F4F4; /* background color for the first post */
    border: 1px solid #E5E5E5; /* border for the first post */}
.first-body { /* Style for the First Post summary */
    color: #545454;
    font-size: 13px;
    text-align: justify;
    padding: 5px 10px;
    line-height: 1.5em;
}
#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/
    border-bottom: 2px solid #DFDFDF;
    color: #515151;
    font-size: 20px;
    display: block;
    margin: 10px auto;
    width: 95%;
    font-size: 20px;
    padding: 0px 0px 4px 0px;
    font-weight: bold;
    text-align: left;
    line-height: 1.4em;
    background: none;
}
#first h3 a:hover { /* Color on mouseover for the First Post Title */
    color: #1061A1;
}
.post { /* Styles for the small posts container */
    float: left;
    margin: 0px 6px 2% 5px;
    width: 46%;
    height: 230px;
    padding: 0px 5px 5px 5px;
    background: #FCFCFC; /* background color for the small posts */
    border: 1px solid #E5E5E5; /* border for the small posts */
    overflow: hidden;
}
.posts-thumb { /* Style for the small posts thumbnails */
    margin-right: 10px;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}
h3.post-title a{ /* Style for the small posts titles */
    font-size: 14px;
    color: #747474;
    text-transform: uppercase;
}
h2.date-header { /* Hide the post date */
    display: none;
}
.post-footer {
    display: none;
}
h3.post-title {
    margin: 0px;
}
.readmorebutton {
    margin-top: 5px;
}
.readmorebutton a { /* Styles for the Read More link */
    color: #767676;
    border: 1px solid #E1E1E1;
    background: #EAEAEA; /* Background color for the Read More link */
    text-decoration: none;
    padding: 3px 5px;
    font-weight: bold;
    font-size: 11px;
    float: right;
    position: relative;
}
.post-comment-link { /* Style for the comment bubble of posts below */
    position: absolute;
    top: -35px;
    right: -10px;
    display: block;
    border: 1px solid #E1E1E1; /* border for the comment bubble */
    background: #EAEAEA; /* background color for the comment bubble */
    font-size: 11px;
    position: absolute;
}
#first .post-comment-link { /* Style for the comment bubble of first post */
    position: absolute;
    top: 10px;
    right: 0px;
}
.post-comment-link a { /* Link color for the comments bubble*/
    padding: 10px;
    color: #6A6A6A;
    text-decoration: none;
    font-weight: bold;
}
#blog-pager {
    clear: both;
}
</style>
</b:if>
</b:if>

Тут, есть строки width: auto; height: 250px; и  width: 46%; height: 230px; где можно в случае чего, подстроить стиль для правильного отображения макета. На стандартном шаблоне Simple, где я пробовал, всё работает и отображается журнальный стиль правильно. Вот и всё на этом, позвольте с вами попрощаться, совсем не надолго. Удачи и до новых встреч. Пока.


4 комментария к “Стиль журнала для шаблона Blogger”

  1. Здравствуйте, спасибо очень нравиться такой стиль, но у меня в блоге не получается выровнять высоты маленьких табличек с постами: когда просматриваешь ссылки ярлыков то первые две верхние таблички находящиеся рядом находятся не на одном уровне, т.е. первая выше вторая ниже, следующие за ними уже выстроены ровно на одном уровне. Надеюсь понятно объяснила, может подскажете как это можно исправить? спасибо

    Ответить
  2. Доброго времени! Сергей, шикарный стиль! Спасибо Вам большое!
    Искала газетный, перепробовала несколько вариантов. Ранее стоял с blogger4you.blogspot.ru/2009/08/blogger-read-more-for-laziest-bloggers.html Все отлично работало, но поменяла шаблон (водяной знак на простой) и все слетело….((( в том числе и LinkWithin. Кучу времени потратила на эксперименты с кодами для «Похожие сообщения». Ни один не заработал (( С газетным стилем было чуток проще, но код с blogger4you не заработал, а другой не делал пропорциональные фото (смотрелось тяп-ляп). Ваш стиль спас меня! Решил эти две задачи одним махом ))) И сообщения частично свернутые и наглядность хорошая (взамен LinkWithin). Есть вопрос: на главной странице на свернутых сообщениях не отображается количество комментариев — можно ли это решить? И второй вопрос: как можно увеличить фото, чтобы смотрелось и красиво и крупнее фото было?

    Благодарю Вас!!!

    Ответить

Оставьте комментарий

 необходимо принять правила конфиденциальности