Карта на блога – още възможности

Днес ще ви представя още три варианта на карта на блога. За този задължителен елемент на всеки блог вече ще имате многообразие от варианти за избор. Този първи вариант на карта на блога е на карта, която е много симпатична, с автоматично отразяване на вашите нови публикации. Картата, както и многото други нейни варианти, се допълва автоматично, по етикети, при всяка нова публикация.

Първи вариант

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

<link href="http://dl.dropbox.com/u/5453630/sitemap_css.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://dl.dropbox.com/u/5453630/sitemap.js">
</script>
<script src="http://www.домейн.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Вариант с миниатюри и наименование на публикациите

Кодът е:

<div>

<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   = 22,

numChars       = 150,

imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";

</script>

<script src="http://yourjavascript.com/16094131351/sitemaps.js"></script>

</div>

Не забравяйте да замените #### с адреса на вашия блог.

Карта на блога по наименование, дата и етикети на публикациите 

е поредният вариант, който искам да ви представя днес.
Ето и кода.

<style scoped="" type="text/css"> #bp_toc {background:#2288BB;color:#666;margin:0 auto;padding:5px;} span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#FAFAFA;font-family:'Trebuchet MS';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;} .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;} .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;} .toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;} .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px; text-decoration:none;color:#aaa;font-family:'Trebuchet MS';font-weight:700;letter-spacing: 0.5px;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { text-decoration:none;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%} .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;} #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;} .toc-entry-col1 {counter-increment:rowNumber;} #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;} td.toc-entry-col2 {background:#fafafa;} #comments {display:none;} </style> <br />

<div id="bp_toc" style="max-height: 3600px; overflow-x: auto; overflow: scroll;">

</div>

<script src="https://cdn.rawgit.com/BloggerSpice/Sitemap/master/sitemap.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

Вижте как изглеждат тези варианти тук. Разгледайте Карта на блога - 5.

Успех! До следващия път.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: