0

Карта на блога с изображения и брой коментари

Карта на блога
Здравейте скъпи мои читатели и гости. Днес искам да ви предложа за вашите блогове вариант на карта на блог. Ще разгледаме два вида на представянето на картата: с публикации в една или две колони, както ви харесва. Недостатъкът тук е, че картата не представя разделянето на публикации според етикетите. Първата възможност е да се показват най-новите публикации по датата, като последните са написани по-рано. По принцип, този от вас, който има малко публикации, може да постави този вариант. Но за тези, които имат написани повече от сто публикации, за читателите им със сигурност е по-удобна за използване картата, в която материалите са разделени по категории или етикети. Решението е ваше.

Вижте скриншот: карта на блога, в която публикациите са в една колона




 А ето как изглежда карта на блога с две колони



 Копирайте кода по-долу.

<style scoped="" type="text/css">
#toc-outer {
color:black;
font:normal 11px/14px Arial,Sans-Serif;
height:auto;
margin:0 auto;
overflow:hidden;
padding:0;
text-align:left;
}
#loadingscript {
padding:0px 0px;
height:37px;
text-indent:-9999px;
color:transparent;
background:white url('data:image/gif;base64,R0lGODlhEAALALMMAOXp8a2503CHtOrt9L3G2+Dl7vL0+J6sy4yew1Jvp/T2+e/y9v///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCwAMACwAAAAAEAALAAAEK5DJSau91KxlpObepinKIi2kyaAlq7pnCq9p3NZ0aW/47H4dBjAEwhiPlAgAIfkECQsADAAsAAAAAAQACwAABA9QpCQRmhbflPnu4HdJVAQAIfkECQsADAAsAAAAABAACwAABDKQySlSEnOGc4JMCJJk0kEQxxeOpImqIsm4KQPG7VnfbEbDvcnPtpINebJNByiTVS6yCAAh+QQJCwAMACwAAAAAEAALAAAEPpDJSaVISVQWzglSgiAJUBSAdBDEEY5JMQyFyrqMSMq03b67WY2x+uVgvGERp4sJfUyYCQUFJjadj3WzuWQiACH5BAkLAAwALAAAAAAQAAsAAAQ9kMlJq73hnGDWMhJQFIB0EMSxKMoiFcNQmKjKugws0+navrEZ49S7AXfDmg+nExIPnU9oVEqmLpXMBouNAAAh+QQFCwAMACwAAAAAEAALAAAEM5DJSau91KxlpOYSUBTAoiiLZKJSMQzFmjJy+8bnXDMuvO89HIuWs8E+HQYyNAJgntBKBAAh+QQFFAAMACwMAAIABAAHAAAEDNCsJZWaFt+V+ZVUBAA7') no-repeat 50% 50%;
}
.itemposts {
float: left;
height: 157px;
overflow: hidden;
width: 47%;
box-shadow: 1px 1px 5px #C3C3C3;
background: none repeat scroll 0% 0% #F9F9F9;
border: 1px solid #ссс;
margin: 3px 5px 8px;
padding: 0px 3px;
}
.itemposts h6 {
border-bottom: 1px solid #CCC;
color: #333;
font: bold 12px Arial;
height: 15px;
overflow: hidden;
text-transform: none;
margin: 0px 0px 5px;
padding: 2px 6px !important;
}
.itemposts h6 a:hover {
color:#38f;
text-decoration:none;
}
.itemposts img {
background-color:#fff;
border:1px solid #ccc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
float:left;
height:65px;
margin:0 7px 5px 0;
padding:3px;
width:65px;
z-indent:99999px;
}
.itemposts .iteminside {}



.itemposts .itemfoot {
border-top: 1px solid #CCC;
clear: both;
overflow: hidden;
padding: 4px 5px;
}
.itemposts .itemfoot a.itemrmore {
color:#333;
float:right;
font-weight:bold;
text-decoration:none;
}
.itemposts .itemfoot a.itemrmore:hover {text-decoration:underline}



#itempager {
clear:both;
padding:10px 0;
}
#pagination,



#totalposts {
color:#000;
display:block;
font:bold 10px Verdana,Arial,Sans-Serif;
margin-bottom:10px;
text-align:center;
padding:0;
}
#pagination span, #pagination a {
color: #FFF;
display: inline;
margin: 0px 1px;
padding: 2px 5px;
text-indent: 0px;
background-color: #068BC9;
background-image: linear-gradient(#068BC9 0%, #3161C2 50%, #3059AB 51%);
border: 1px solid #3161C2;
text-decoration: none;
border-radius: 10px;
}
#pagination a:hover {background-color:#333}



#pagination span.actual {background-color:black}



#pagination span.hidden {display:none}
</style>
<script>
var showPostDate   = true,
showComments   = true,
idMode         = true,
sortByLabel    = false,
labelSorter    = "JQuery",
loadingText    = "Loading...",
totalPostLabel = "Number of posts:",
jumpPageLabel  = "page",
commentsLabel  = "comment",
rmoreText      = "Прочети повече&#9658;",
prevText       = "previous",
nextText       = "next",
siteUrl        = "####",
postPerPage   = 8,
numChars       = 150,
imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script src="http://yourjavascript.com/16094131351/sitemaps.js"></script>

</div>


Създайте страница, по начин, който вече знаете. В HTML режим поставете копирания код. Вие ще трябва да промените само адреса на блога си, и да регулирате ширината на картата. Преди публикуването на страница няма да виждате на дисплея си картата. Този код е за карта на блога с две колони.
Означенията са:

➤в червено-височина на блока;

➤в синьо - ширината на блока;

➤в лилаво - размерът на изображенията;

➤в зелено-URL адрес на вашия блог;

➤в оранжево-брой публикациите на страницата.


За да бъде картата в една колона, регулирайте ширината width: 47% на 97%.



Както можете да видите нищо трудно няма в това да се инсталира такава карта на блога ви. Аз я тествах на всички мои блогове и нестандартни шаблони също. Инсталира се без проблеми. Регулирах само ширината, защото размера на страниците е различна в различните блогове.

Споделете с приятелите си в социалните мрежи, а аз не за дълго ви казвам довиждане.

Няма коментари :

Публикуване на коментар


Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита