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

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

Журнальный стиль шаблона Blogger

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

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

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

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><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='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Далее »</a></span></b:if></b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><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 != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div expr:id='"summary1" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb1("summary1<data:post.id/>");</script> <span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><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'>Далее »</a></span> </b:if></b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><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; } //]]>
****************************************

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

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <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, где я пробовал, всё работает и отображается журнальный стиль правильно.