0

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

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



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

    Създава се върху статична страница, в редактора на 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>


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

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


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

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


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