Template Johny Wusss ini dibuat untuk bisa mengoptimalkan para blogger, template ini dikategorikan SEO Friendly dan sudah termasuk ciri-ciri diatas, yaitu menggunakan beberapa meta tags sehingga membuat template ini seo friendly. template ini sudah banyak yang dipakai oleh para blogger indonesia, atau luar.
- dibawah adalah fitur yang dimiliki oleh template ini:
- Loading yang lumayan cepat.
- Mempunyai fitur sebunyikan dan tampilkan pada sidebar widget.
- Memiliki 2 Navigasi Bar (di atas dan di bawah).
- Sudah Dilengkapi Dengan Beberapa Meta Tags.
- Dilengkapi dengan related artikel.
Sobat pasti sudah pernah melihatnya daftar isi sesuai label dengan thumbnail bulat berputar yang seperti contoh gambar di atas.
Penasaran cara membuatnya?
Ea deh saya share...
1. Login blogger
2. Template dan edit html
3. Letakkan kode berikut di atas
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.
Bisa ngga seh bikin theme chrome sendiri?
Jawabnya tentu bisa...hoho.
simak caranya berikut ini:
1. Download extension "my chrome theme"
2. Add to my chrome
3. Setelah instalasi selesai buka new tab dan klik "my chrome theme"
4. Dan akan di arahkan ke jendela edit tema chrome
5. Upload foto sobat dan set posisi foto juga warna background
6 Selanjutnya simpan dengan menamai tema yang barusan sobat bikin dan
instal
7. add to my chrome klik yes n taraa..tema sudah terpasang pada chrome
sobat.
Silahkan mencoba, semoga tutorialnya bermanfaat!
Gimana seh cara mengubah skin winamp dengan foto atau gambar apapun yang kita pengen?
Simak yee..
1. Download SkinnerToo SE 2.4
2. Instal dan buka pilih winamp classic dan full transparent
3. Klik file dan load gambar sobat
4. Edit warna dan jika sudah manteb save di folder skin "C:\Program Files\Winamp\Skins\” dan ber-extention *.wsz."
5. Hasil punya saia
6. selanjutnya buka winamp sobat dan klik kanan,pilih skin yang sudah di simpan tadi.
Selamat mencoba!
Dalam membuat kalender sendiri, sobat bia menggunakan corel draw dan excel.
Tapi yang ini saya bahas yg lebih mudah.
Karena imikimi.com menyediakan layanan kalender maker online.
Kunjungi websitenya di sini
dan upload foto sobat.
Kalau sudah selesai klik "save"
Jadi deh kalender yang sobat inginkan.
Selamat mencoba ヅ
Hai sobat blogger..
Masih melaksanakan ibadah puasa?
Semoga tetep semangad ya...
Kali ini saya ingin share Cara Mengubah Lagu MP3 menjadi karaoke.
Tentunya menghilangkan sura vokalnya dan cuma instrument yang tertinggal.
Banyak software pemisah audio dan vokal, tapi saat ini kit akan menggunakan software bernama audacity.
Simak caranya:
1. Download audacity
2. Instal dan open toolnya kemudian import lagu yang akan di buat karaoke.
3. Klik efek dan pilih vocal remover.
4. Kemudian klik export dan pilih file penyimpanan.
Untuk mendapatkan kualitas karaoke yang bagus, anda dapat setting sendiri sesuai keinginan.
Ternyata mudah ya Cara Mengubah Lagu MP3 menjadi karaoke..Semoga infonya bermanfaat!