Elegant Black Color For Sitemap Theme

Elegant Black Color For Sitemap Theme

CSS Concept
Tampilan yang dinamis dengan gaya Klise Film namun terlihat elegan dengan warna hitam samar, sedangkan untuk tampilan pagination (Tombol Sebelumnya - Berikutnya) menggunakan background warna transfaran left-position dengan hover light aqua color. Sangat cocok buat mempercantik tampilan daftar isi blog Anda yang bernuansa warna hitam.

Temukan kode ]]></b:skin> pada Template Anda, salin kode berikut lalu letakkan tepat diatasnya..

Elegant Black Color

#toc-outer {
  font:normal 11px/12px Arial,Sans-Serif;
  color:#999;
  text-align:left;
  background-color:#333;
  overflow:hidden;
  border-top:2px solid #333;
  margin:0 auto;}

#toc-outer a {color:orange;}
#toc-outer a:hover {color:#7FFFD4;}
#loadingscript {
  padding:0px 0px;
  height:37px;
  text-indent:-9999px;
  color:transparent;
  height:200px;}

.itemposts, #itempager {
  overflow:hidden;
  padding:0px 10px 7px;
  color:#bbb;
  border-top:3px dotted #fff;
  background-color:#333;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333333');
  background-image:-webkit-linear-gradient(#3c3c3c, #333);
  background-image:-moz-linear-gradient(#3c3c3c, #333);
  background-image:-o-linear-gradient(#3c3c3c, #333);
  background-image:linear-gradient(#3c3c3c, #333);}

.itemposts h6 {
  margin:0px 0px 0px;
  padding:0px 2px 0px;
  font:bold 11px/28px 'Verdana',Arial,Sans-serif;
  line-height:28px !important;
  height:28px;
  overflow:hidden;
  color:#ccc;
  text-transform:none;
  text-shadow:0px 1px 0px black;
  border-bottom:1px solid #222;}

.itemposts h6 a {color:#ccc !important;}
.itemposts img {
  float:left;
  height:72px;
  width:72px;
  margin:2px 10px 2px 0px;
  padding:0px 0px;
  background:transparent;
  border:3px double #3c3c3c;
  padding:0px;
  border-radius:50%;
  outline:none;}

.itemposts .iteminside {
  padding:10px 0px 10px;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  overflow:hidden;}

.itemposts .itemfoot {
  clear:both;
  padding:5px 10px;
  color:#e06666;
  background-image:-webkit-linear-gradient(#333, #444, #333, #222);
  background-image:-moz-linear-gradient(#333, #444, #333, #222);
  background-image:-ms-linear-gradient(#333, #444, #333, #222);
  background-image:-o-linear-gradient(#333, #444, #333, #222);
  background-image:linear-gradient(#333, #444, #333, #222);
  border-top:1px solid #444;
  overflow:hidden;
  position:relative;}

.itemposts .itemfoot a.itemrmore {
  font-weight:bold;
  color:red;
  position:absolute;
  top:5px;
  right:10px;}

.itemposts .itemfoot a.itemrmore:hover {color:aqua;}
#itempager {
  background-image:-webkit-linear-gradient(#333, #444, #333, #222);
  background-image:-moz-linear-gradient(#333, #444, #333, #222);
  background-image:-ms-linear-gradient(#333, #444, #333, #222);
  background-image:-o-linear-gradient(#333, #444, #333, #222);
  background-image:linear-gradient(#333, #444, #333, #222);
  padding:20px 0px;}

#pagination, #totalposts {
  text-align:left;
  color:orange;
  margin:0px 15px 10px;}

#pagination span, #pagination a {
  display:inline;
  text-indent:0px;
  font-weight:bold;
  border:1px solid #ccc;
  padding:3px 5px;
  margin:0px 3px;
  color:orange;}

#pagination a:hover,
#pagination span.actual {color:red;background:#7FFFD4;}
#pagination span.hidden {display:none;}

JavaScript Code
Coba Anda perhatikan kode script yang sudah saya beri warna MERAH, siteUrl="http://sahabatblogger77.blogspot.com". Ganti kode tersebut dengan URL blog Anda, selanjutnya Copy kode script berikut, lalu letakkan pada formulir baru halaman posting mode HTML seperti ini:

<script>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://sahabatblogger77.blogspot.com",
    postPerPage    = 10,
    numChars       = 370,
    imgBlank       = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibhIQv1bVU1YhM9b0ru8Eg2VzcvKD6cU_7_-debPuOgux7f1MoI-e1ptd6kc5iAzDv24bc5PZBFedXS1Q_mhWuJO6AQxc6jm_AOomYWf_Ep_4-CBT0Njl7nitPftHxTZQh7jtjO6KUL9A/s1600/sb77-image6.jpg";
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/sitemap-theme-design.js"></script>

Referensi URL ➟ 2 Desain Daftar Isi Untuk Blog Bernuansa Hitam