Как сделать Ваш блог привлекательней. Часть 2

    Доброго времени суток, мои дорогие читатели. 

Мое возвращение после длительного отпуска в мире блогинга ознаменовалось следующими событиями:

   Первое и наверное основное, что вывело меня из творческого кризиса и вернуло интерес к блогингу это то что мой друг предложил заняться созданием блогов/сайтов под заказ на бесплатных хостингах. И конечно же я согласилась. Первое что было сделано (и продолжаю заниматься) это создан сайт  Сайт визитка в Гомеле и его зеркальное отражение  Сайт визитка в Гомеле. Блоги, группы в соц сетях. 

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

Что из этого получилось Вы можете увидеть попутешествовав по страничкам Блога Велереи, а как проходил процесс прочитать ниже и может быть взять на заметку или применить у себя.

И так с чего же начались изменения:

1 - Эффект вращения картинок с зумом в популярных сообщениях

Первым я внесла маленькую изюминку в виджет популярных сообщений моего блога. Это вращающиеся картинки при наведении на них курсора. Мне кажется это заманчиво.
Как  я добавляла  в Blogger-Эффект вращения картинок с зумом в популярных сообщениях, с использованием CSS (Действо для не посвященных устрашающее, поэтому рекомендую перед каждым экспериментом делать резервную копии вашего блога)

Зашла в раздел -> Дизайн -> Изменить HTLM  Отметила галочкой “Расширить шаблоны виджетов” Далее с помощью поиска (Ctrl+F) нашла  вот эту строку в вашем шаблоне  ]]> и сразу перед ней вставила небольшой код (Если будете копировать код для себя будьте внимательны - окошко с прокруткой!):

<br /> <blockquote class="tr_bq"> <blockquote> <br /> <style type="text/css"> .PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;} .PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;} .PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;} </style></blockquote> </blockquote>

Сохранила шаблон. Вот и все мудрости, а смотрится необычно.

2 - Похожие статьи с миниатюрами виджет для Blogger

Давно хотела установить себе на блог  виджет Похожие статьи с миниатюрами для Blogger Для тех кто не представляет, что же это такое коротко скажу: "Похожие сообщения с миниатюрами для Blogger это отображение ссылки на соответствующие статьи, а также эскиз картинки на соответствующее сообщение."
Как я это сделала:
Зашла в раздел -> Дизайн -> Изменить HTLM .Отметила галочкой “Расширить шаблоны виджетов”  Далее с помощью поиска (Ctrl+F) нашла  эту строку в шаблоне: </head> 
и прямо над ней вставляем код:

<br /> <blockquote class="tr_bq"> <blockquote> <br /> <!--Related Posts with thumbnails Scripts and Styles Start--><br /> <b:if cond='data:blog.pageType == "item"'><br /> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style><br /> <script src='http://dl.dropbox.com/u/48089857/relatedthumbs19.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End--> </blockquote>

Следующим шагом я нашла вот эту строчку:  <div class='post-footer-line post-footer-line-1'>

(может у Вас таковой не найдется тогда поищите  такую:  <p class='post-footer-line post-footer-line-1'> ). Сразу после   <div class='post-footer-line post-footer-line-1'>  вставила этот код:

<blockquote class="tr_bq"> <blockquote> <!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='#' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='#' style='display:none;'>blogger widgets</a> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="Похожие сообщения"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script><br /> </div> <div style='clear:both'/> </b:if><br /> <!-- Related Posts with Thumbnails Code End--><br /> <br /> </blockquote>

Далее я настроила максимальное количество связанных сообщений для вывода под постом, для этого  отредактировала строку в коде: var maxresults=5;  указа вместо цифры 5 - 7. Также  заменила  слово "Похожие сообщения" на   "Предлагаю почитать еще:"

3 - Область текста с прокруткой для Blogger

Думаю Вы уже заметили такое изменение у меня в посте как -  появившиеся области с кодами которые следует прокручивать, что бы увидеть полный код. Не правда ли удобно? И не загромождает посты длинными текстами кодов.
Делается все очень и очень просто:

При написании поста в режиме NTML в теле поста (непосредственно там где нужен прокручиваемый текст) я вставляла:

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Выделить всё" /> </div><div align="center"><textarea cols="20" name="txt" rows="3" style="height: 50px; width: 550px;" wrap="VIRTUAL"><blockquote class="tr_bq"><blockquote>
ТЕЛО ВАШЕГО HTML КОДА
</blockquote></textarea></div></form></div>

___________________________________________________

P.S.  все эти хитрости я подсмотрела на блоге  Школа Blogger(а)

На сием на сегодня я с вами прощаюсь, но не надолго. Ждите Как сделать Ваш блог привлекательней. Часть 3