Продолжаем тему создания облака тэгов в блоге. В предыдущем посте мы уже научились делать простое облако меток. Кто не читал, прошу перейти сюда. Я уже писала, что минус облака в том, что в нем отображаются все наши опубликованные сообщения. В этом посте предлагаю простой способ создания Flush облака, где мы можем настроить количество отображаемых меток. Стараюсь находить по возможности самые простые решения, чтобы не менять шаблон, так как Html код, для нас-это как ходить по джунглям. Итак приступим, выполняем те же действия. В черновике blogger нажимаем дизайн-добавить гаджет-добавить свой собственный, смотрите на скриншоте в предыдущем посте. Вставляем скопированный ниже адрес, смотрите, там в строке уже есть http:// так что удаляйте.

И точно также нажимаем-добавить по URL

Добрый день друзья! Все вы видели на сайтах или блогах прокрутку тэгов или ещё можно назвать ключевых слов, в виде красивого облака. Давайте и мы сделаем такое облако для своего блога. В черновике blogger нажимаем - добавить гаджет, в открывшейся вкладке слева вверху - добавить свой собственный.  Перед Вами откроется вот такое окно

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

Также в дизайне при добавлении гаджета вы видели, что ярлык можно добавить обыкновенным гаджетом, То есть можно сделать еще одно-меню для блога. Гаджет можно настроить по разному: в виде простого списка и в виде облака. Давайте разберем подробнее. В дизайне нажимаете-добавить гаджет, выбираете-ярлыки. Перед Вами откроется такая вкладка

Сегодня предлагаю код, вставив который в черновике blogger обычным гаджетом-дизайн-добавить гаджет-Html/JavaScript - вставить - сохранить, Вы сможете воспользоваться нумерацией страниц вашего блога. У себя в блоге не вставляла, как то пока нет необходимости. Код нашла на этом сайте, спасибо автору. Заинтересовало то, что не нужно изменять шаблон. Со временем может и сама воспользуюсь, но пока нет такой необходимости, у меня и так достаточно гаджетов и скриптов, которые как известно сильно влияют на загрузку страниц блога. Решать как всегда Вам. Итак, кому интересно копируем код ниже.

text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}</style><script type='text/javascript'>
var home_page_url = location.href;
var pageCount 6;
var displayPageNum=10;
var upPageWord ='Назад';
var downPageWord ='Вперёд';
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
  html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span  class="showpageOf"> Страниц ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
 thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
 html = labelHtml+'1</a></span>';
}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}

}

</script>
<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>

Доброй ночи друзья! В своих постах я уже много внимания уделила картинкам и изображениям. Мы научились изменять размеры картинок, умеем узнавать адреса ссылок на изображения, делать баннер на фоне картинки, вставлять их на страницы нашего блога. В сегодняшнем посте напишу ещё об одной маленькой, но важной детали. 

Мы научимся делать изображения с закругленными углами, смотрите слева, прикольно правда ?, вернее за нас это сделает одна программа. Кликните по изображению слева, вас перекинет на сайт, там сразу-выбрать файл. Загрузите любое изображение, сохраненное у Вас  на компьютере, или вставьте адрес ссылки на картинку. Нажимаете - вокруг него. На следующей странице можно настроить изображение. Я выбрала-закруглить со всех четырех сторон. Здесь уже решайте сами, какая вам нужна картинка, с закругленными углами справа-слева, или справа-внизу, слева-вверху. Так же можно настроить и размер, увеличить либо уменьшить. Дальше Вам предложат-скачать. Я нажимала правой кнопкой мыши-сохранить картинку как. Результат вы видите.  На этом всё, до встречи на страницах моего блога.  Пишите комментарии.

Почитайте как узнать адрес ссылки на картинку;

Как сделать изображение ссылкой;

Изменение размера изображений;