Gudang Tutorial Blog

Ada Dua CSS

Seperti pada postingan terdahulu, jika kita menggunakan trik ini maka akan ada 2 css untuk satu id widget atau section. Yang pertama dipanggil tanpa syarat dalam keadaan umum. Yang kedua adalah dipanggil untuk syarat tertentu saja, dalam hal ini kita memberikan syarat untuk alamat postingan yang kita tentukan. Yang perlu diperhatikan ketika kita nanti menambah css jangan hilangkan css asli.



Lebar Area Postingan

Untuk mengatur lebar area postingan Anda harus mengetahui kodenya terlebih dahulu. Pada umumnya memiliki kode main-wrapper. Nah, yang perlu Anda ketahui, main-wrapper ini berada pada bagian outer-wrapper atau bisa hanya dengan kode wrap saja yang istilahnya sebagai wadah/nampan bagian-bagian template yang terdiri dari main wrapper dan sidebar. Oleh karena itu main-wrapper tidak boleh lebih lebar dari outer-wrapper. Saya misalkan kode-kode dari template minima. Jika pada bagian css ada titik-titik itu berarti kode css lain yang tidak saya tuliskan. Dalam hal ini yang saya sertakan adalah dalam hal lebar saja (berkode: width)

CSS Outer
 #outer-wrapper {
  width: 660px;
...............................
  }

CSS Main-wrapper
#main-wrapper {
  width: 410px;
...............................
  }

Nah, pada kode di atas lebar main-wrapper adalah 410px, lebih kecil dari lebar nampannya yakni 660px. Bukankah masih ada sisa? Ya kita pastikan sisa lebar itu adalah milik sidebar. Jika kita tulis cssnya



#sidebar-wrapper {

  width: 220px;

..............................

}



Jadi lebar area sidebar (220) ditambah area postingan (410) adalah 630px, masih lebih kecil dari batas yakni 660px. Sisa 30 px adalah untuk margin, yakni jarak antara tepi kiri dengan area postingan, jarak area postingan dengan sidebar dan jarak area sidebar dengan tepi kanan.





Cara Membuat Postingan Tanpa Sidebar

1. Login ke blogger

2. Tata Letak

3. Edit HTML

4. Cari kode </head>

5. Letakkan kode berikut ini di atas </head>

 <b:if cond='data:blog.url == &quot;http://urlpostingananda.com/urlpostingananda.html&quot;'>

 <style>

.sidebar{

display: none !important;

}

 #main-wrapper, .post {

width: 640px;

  }

  </style>

  </b:if>

Ganti yang berwarna merah pertama dengan alamat postingan yang ingin Anda buat penuh area postingannya dan hilangkan sidebarnya. Ganti warna merah kedua dengan lebar yang telah Anda perhitungkan.

Template SEO ala batak musik ini adalah template blogspot yang SEO Frendly ringan loading dengan tampilan elegan dan rapi. Setelah melakukan pengujian dengan beberapa blog termasuk blog saya ini, template SEO frendly saya berfungsi maksimal membuat trafik blog saya semakin hari semakin meningkat. Tidak hanya SEO frendly, template keren :D ini juga memiliki tampilan seluler atau mobile view yang lumayan bagus dengan menu navigasi, popular post dan kategori label terlihat pada tampilan mobile/seluler.



Template blogger SEO ini dilengkapi beberapa fitur dan kelebihan, diantaranya :

• Meta Tag Deskripsi dan Meta Tag Keyword yang dinamis


• Breadcrumbs : breadcrumbs terindeks oleh google.


• Auto Readmore : Readmore otomatis ini tidak mengganggu atau berpengaruh pada laman blog.


• Artikel Terkait atau Related Post : Artikel terkait merupakan salah satu syarat penting agar template benar-benar SEO frendly. Artikel terkait pada template ini disertai dengan thumbnail atau gambar kecil yang membuat blog semakin menarik.


• Permalink Tag dibawah postingan.


• Share Facebook, Twitter dan Google Plus dibawah postingan


• Loading ringan dan cepat.


• Template ini bisa 2 Kolom bisa juga 3 kolom


• Threaded Comment (komentar bertingkat)

img.label_thumb{

float:left;

width:80px;

height:80px;

margin-left:4px;

margin-bottom:10px;

-webkit-border-radius: 210px;

-moz-border-radius: 210px;

border-radius: 50%;

text-align: center;

overflow: hidden;

-webkit-box-shadow:

inset 0 0 1px 230px rgba(0,0,0,0.6),

inset 0 0 0 3px #111111;

-moz-box-shadow:

inset 0 0 1px 230px rgba(0,0,0,0.6),

inset 0 0 0 3px #111111;

box-shadow:

inset 0 0 1px 230px rgba(0,0,0,0.6),

inset 0 0 0 3px #111111;

-webkit-transition: box-shadow 400ms ease-in-out;

-moz-transition: box-shadow 400ms ease-in-out;

-o-transition: box-shadow 400ms ease-in-out;

-ms-transition: box-shadow 400ms ease-in-out;

transition: box-shadow 400ms ease-in-out;

/*For IE < 9 so that we have some kind of effect */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

display: block;

outline: none;

-moz-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out; border:0

}

img.label_thumb:hover{

-webkit-box-shadow:

inset 0 0 0 0 rgba(0,0,0,0.6),

inset 0 0 0 20px #0dc3ff,

0 0 10px rgba(0,0,0,0.3);

-moz-box-shadow:

inset 0 0 0 0 rgba(0,0,0,0.6),

inset 0 0 0 20px #0dc3ff,

0 0 10px rgba(0,0,0,0.3);

box-shadow:

inset 0 0 0 0 rgba(0,0,0,0.6),

inset 0 0 0 20px #0dc3ff,

0 0 10px rgba(0,0,0,0.3);

/*For IE < 9 so that we have some kind of effect */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

-moz-transform:rotate(360deg); -o-transform:rotate(360deg); -webkit-transform:rotate(360deg); transform:rotate(360deg); border:0; }

table.game_grid {font-family: "Trebuchet MS",tahoma,arial; margin: 10px 0px 10px 0px; width: 410px; border-width: 1px 1px 0px 1px; border-style: solid; border-color: #333;}

table.game_grid td { border-bottom: 1px solid #333; padding: 2px 4px 2px 6px; }

table.game_grid td.grid_heading { letter-spacing: 1px; font-weight: bold; color: #eee; font-size: 1.1em; background-color: #0dc3ff; text-align:center; }

table.game_grid td.grid_sysreqs { letter-spacing: 1px; font-weight: bold; color: #333; font-size: 1.1em; background-color: #ccc; text-align:center; }

table.game_grid td.grid_row_title { background-color: #eee; border-right: 1px solid #333;}

4. Letakkan kode berikut di atas </head>

<script type='text/javascript'>

    //<![CDATA[

    function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}

    if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}

    var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)

    {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}

    else thumburl='';}

    document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');

    if(i!=(numposts-1))

    document.write('');}

    document.write('</div>');}

    //]]>

    </script>

5. Save template

6. Layout "html/javascript" dain letakkan script berikut

<script type='text/javascript'>var numposts = 8;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 70;</script>

<script type="text/javascript" src="/feeds/posts/default/-/Tutorial%20Blog?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

 

kode kuning pada script ganti dengan nama label yang ingin di tampilkan.

7.  save dan lihat hasilnya



Silahkan dicoba, semoga bermanfaat..

Jika kita ingin mengedit judul post, link blog atau hover pada template blog,

kita harus nguprek css nya.

Kali ini saya ingin berbagi cara membuat judul post warna pelangi pada blog.



1. Tentunya login blog sobat dan menuju template edit html

2. cari kode .post h2  ,ini kode untuk judul postingan

3. Letakkan kode berikut di dalamnya

-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-image:-webkit-gradient(linear,left top,right top,from(#00C5FF),to(#FFCC00)); background-image:-webkit-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-moz-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-ms-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-o-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400);

Hasilnya ntar seperti ini

.post h2 {-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-image:-webkit-gradient(linear,left top,right top,from(#00C5FF),to(#FFCC00)); background-image:-webkit-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-moz-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-ms-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); background-image:-o-linear-gradient(left,#5EFF00,#FF0008,#2400FE,#00FF77,#FFA400); font:18px Architects+Daughter;line-height:1.2em;margin:.25em 0 0;padding:0 0 4px;}

6. Save



Sobat dapat memodifikasi warna sesuai keingin. Pada tutorial saya kali ini hanya mencontohkan warna pelangi. Jika ada kode css lain yang lebih simple dari yang saya bikin, dapat di share melalui reply komentar.