Modifikasi widget popular posts blogger

✔ Unknown 3 Comments
Mungkin anda berencanda untuk merubah tampilan widget popular posts yang biasa aja?berikut saya akan memberikan tutorial tentang merubah tampilan widget popular posts keren pada blogger,caranya sangat mudah sob,hanya perlu menambah beberapa code CSS pada tempelate kita,dan hasilnya tampilan popular post pun lebih menarik. . :)
costum popular post blogger

Berikut cara merubah tampilan popular posts pada blogger:

  • Pastikan anda sudah memasang popular post
  • Edit widget popular post pada blog anda tanpa thumnail dan cuplikan pada popular post
  • Kalau sudah sekarang ke menu tempelate>>edit HTML
  • Lalu cari kode ]]></b:skin>
  • Copy CSS dibawah ini
  • Letakan tepat diatas kode ]]></b:skin> pada tempelate anda
.popular-posts ul li a {
background: none repeat scroll 0 0 #DDDDDD;
color: #444444;
display: block;
margin: 0 0 0.5em;
padding: 0.4em;
position: relative;
text-decoration: none;
transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
background: none repeat scroll 0 0 #CCCCCC;
font-weight: 700;
height: 2em;
left: -2.5em;
line-height: 2em;
margin-top: -1em;
position: absolute;
text-align: center;
top: 50%;
width: 2em;
}
.popular-posts ul li a:after {
border: 0.5em solid transparent;
content: "";
left: -1em;
margin-top: -0.5em;
position: absolute;
top: 50%;
transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
background: none repeat scroll 0 0 #CCCCCC;
}
.popular-posts ul li a:hover:after {
border-left-color: #CCCCCC;
left: -0.5em;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}
.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}
.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}
.popular-posts ul li:first-child + li + li + li a:before{content:"4"}
.popular-posts ul li:first-child + li + li a:before{content:"3"}
.popular-posts ul li:first-child + li a:before{content:"2"}
.popular-posts ul li:first-child a:before{content:"1"}
  • Kalau sudah previeuw dulu tempelate anda
  • Bila tidak ada yang error langsung "Save"
  • Dan lihat hasilnya. .
Nah begitulah cara simple dan mudah,merubah tampilan popular post pada blogger.selamat mencoba dan Happy blogging. . ! ! :D

Modifikasi Kotak Pesan Komentar Admin

✔ Unknown 2 Comments
Cara mudah Memodifikasi tampilan pesan formulir komentar di blog kita, mungkin bagi anda yang bosan dengan tampilan pesan komentar pada blog anda yang biasa-biasa saja karena tidak ada warna background atau yang lainya. Dengan sedikit modifikasi mungkin ini bisa jadi solusi, kita bisa merubah warna background, warna font, jenis font dan ukuran font. Memodifikasinya sangat mudah dilakukan karena hanya sedikit perubahn pada kode HTML dan sedikit penambahan kode CSS pada tempelate.
Berikut cara memodifikasi Tampilan Pesan Komentar:
Modifikasi kotak pesan komentar
  • Masuk ke dasbord blogger
  • Tempelate >> Edit HTML
  • Cari kode <p><data:blogCommentMessage/></p>
  • Lalu ganti dengan kode dibawh ini
<div id='pra-comment'><data:blogCommentMessage/></div>
  • Biasanya dalam tempelate kode <p><data:blogCommentMessage/></p> ada dua,ganti semua kode tersebut
  • Kalau sudah sekarang cari kode ]]></b:skin>
  • Copy CSS dibawah ini dan letakan diatas ]]></b:skin>
/*-- modifikasi pesan komentar--*/ #pra-comment{ position: relative; background:#F3C5C5; width:100%; padding:10px; font:normal 12px trebuchet ms; text-align:justify; border:3px solid #AD3000; margin:0 10px 10px 0; margin-top: 10px; line-height: 1.3em; } #pra-comment::after, #pra-comment::before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none } #pra-comment::before { border-top-color: #AD3000; border-width: 15px; left: 10%; margin-left: -36px } #pra-comment::after { border-top-color: #F3C5C5; /* Samakan dengan warna background */ border-width: 9px; left: 10%; margin-left: -30px }
Kalau sudah,SIMPAN tempelate anda,dan sesuaikan pesan pada kotak pesan komentar dengan kata-kata yang anda inginkan. .
selamat mencoba. . .

Test posting

✔ Unknown 2 Comments
image from google

» A normal paragraph
Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.]]></b:skin&gt
» A paragraph format
Et posse meliore definitiones (strong) his, vim tritani vulputate (italic) pertinacia at. Augue quaerendum (Acronym) te sea, ex sed sint invenire erroribus. Cu vel ceteros scripserit, te usu modus fabellas mediocritatem. In legere regione instructior eos. Ea repudiandae suscipiantur vim, vel partem labores ponderum in blogger templates (link).

 » A paragraph as code
Mel putent quaeque an, ut postea melius denique sit. Officiis sensibus at mea, sea at labitur deserunt. Eam dicam congue soluta ut.

 » A paragraph as blockquote
Eu mei solum oporteat eleifend, libris nominavi maiestatis duo at, quod dissentiet vel te. Legere prompta impedit id eum. Te soleat vocibus luptatum sed, augue dicta populo est ad, et consul diceret officiis duo. Et duo primis nostrum.
@import "compass/reset";

// variables
$colorGreen: #008000;
$colorGreenDark: darken($colorGreen, 10);

@mixin container {
    max-width: 980px;
}

// mixins with parameters
@mixin button($color:green) {
    @if ($color == green) {
        background-color: #008000;
    }
    @else if ($color == red) {
        background-color: #B22222;
    }
}

button {
    @include button(red);
}

div,
.navbar,
#header,
input[type="input"] {
    font-family: "Helvetica Neue", Arial, sans-serif;
    width: auto;
    margin: 0 auto;
    display: block;
}
» Unordered list
  • Blogger templates
  • Templates
  • Blogs
  • Layouts
  • Skins
  • BTemplates
» Ordered list
  1. Login
  2. Visit GBTemplates
  3. Download template
  4. Install
  5. Enjoy!
» Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Info text message here

Info text message here

Box Message / message box / alert message box dapat berupa pesan kesalahan (error box message), pesan peringatan (warning box message), pesan informasi ( information box message), pesan sukses/gagal (successful operation box message), pesan pengumuman dst. Penggunaan warna yang berbeda pada box (kotak pesan) juga dapat memperjelas tentang maksud dari status pesan itu sendiri, misalkan: warna merah pada pesan error, situs facebook biasa menggunakan kotak pesan yang mirip dengan type pesan sukses.

The border-color property is used to set the color of the border. The color can be set by: name - specify a color name, like "red" RGB - specify a RGB value, like "rgb(255,0,0)" Hex - specify a hex value, like "#ff0000" You can also set the border color to "transparent". Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.

No:Merk ponselTipe
01MITO680
02MITO319
20VISIOV999
21ISISi 9
22VITEL519
23VITEL517
24CSL BLUEBERRY120
25MAXISMX700
26G-STAR198
27VENERA AKTIV105
28extreme hapy- - - -

Form Elements







12cm 30%
Disabled Form Eements






Readonly Form Eements

Placeholders 

 pre {
    background-color:#233948;
    font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    color:#333;
    border:1px solid #f1c40f;
    position:relative;
    padding:0 7px;
    margin:10px 0;
    overflow:auto;
    word-wrap:normal;
    white-space:pre;
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
    position:relative;
}

pre[data-codetype] {
    padding:23px 1em 7px 1em;
}

pre[data-codetype]:before {
    content:attr(data-codetype);
    display:block;
    position:absolute;
    top:0;
    right:0;
    left:0;
    background-color:#95a5a6;
    padding:0 7px;
    font:bold 12px/20px Arial,Sans-Serif;
    color:white;
}

pre[data-codetype="HTML"]       {border-color:#27ae60;color:#8FE6B3;}
pre[data-codetype="CSS"]        {border-color:#16a085;color:#7DDECA;}
pre[data-codetype="JavaScript"] {border-color:#2980b9;color:#91C8ED;}
pre[data-codetype="JQuery"]     {border-color:#34495e;color:#889CAF;}


pre[data-codetype="HTML"]:before          {background-color:#27ae60;}
pre[data-codetype="CSS"]:before           {background-color:#16a085;}
pre[data-codetype="JavaScript"]:before    {background-color:#2980b9;}
pre[data-codetype="JQuery"]:before        {background-color:#34495e;}


pre code,
pre .line-number {
  display:block;
  font:normal normal 12px/15px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  color:#006699;
}

pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  color:#ecf0f1;
  background-color:#243342;
  border-right:2px solid #3E5770;
  text-align:right;
  min-width:2.5em;
}

pre .line-number span {
  display:block;
  padding:0 .5em 0 1em;
}

pre .line-number span:nth-child(even) {background-color:#243342}

pre .cl {
  display:block;
  clear:both;
} 

<pre data-codetype="CSS"><code>...........</code></pre> /* Untuk CSS */
<pre data-codetype="HTML"><code>...........</code></pre> /* Untuk HTML */
<pre data-codetype="JavaScript"><code>...........</code></pre> /* Untuk JavaScript */
<pre data-codetype="JQuery"><code>...........</code></pre> /* Untuk kode JQuery */
dst...

 <script type='text/javascript'>
(function() {
    var pre = document.getElementsByTagName('pre'),
        pl = pre.length;
    for (var i = 0; i < pl; i++) {
        pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
        var num = pre[i].innerHTML.split(/\n/).length;
        for (var j = 0; j < num; j++) {
            var line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += '<span>' + (j+1) + '</span>';
        }
    }
})();
</script> 

 <pre data-codetype="HTML"> ... </pre>
<pre data-codetype="CSS"> ... </pre>
<pre data-codetype="JavaScript"> ... </pre>
<pre data-codetype="JQuery"> ... </pre>

class="update"
class="note"
class="catatan"
class="alert"
class="tip"
class="instruction"


Lihat Demo
Langganan: Postingan (Atom)