TV online

.more.

Membuat Tampilan Gambar Profile Blog Penuh Gaya

Askum all..!!!
Sesuai judul di atas ,b-arjem akan mencoba menjelaskan bagaimana cara membuat gambar profile blog penuh gaya , yang di maksud dengan penuh gaya adalah saat cursor berada di atas  gambar profile maka gambar akan bergeser ke kanan lalu jatuh dan berputar, begitu juga saat cursor menjauh maka gambar akan bergeser ke kiri lalu naik dan berputar, untuk lebih jelasnya arahkan cursor sobat pada gambar profile blog ini,

Bagi sobat yang ingin mencobanya silahkan ikuti tutorial berikut ini

1. Login ke blog sobat tentunya
2. Masuk dasboard klik panah kebawah pilih template lalu klik Edit HTML
3. Cari kode ]]></b:skin> tekan ctrl+f untuk mempermudah pencarian
4. Copy  kode di bawah ini & pastekan tepat di atas kode ]]></b:skin>  

.profile-img{
-webkit-transition-property: left, top, background, -webkit-transform;
-webkit-transition-duration: 2s, 2s, 1s, 1s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-delay: 0, 0, 0, 1s;
}
.profile-img:hover {
left: 100px;
top: 100px;
background: red;
-webkit-transform: rotate(360deg);
}

    5. Terahir save/simpan template & lihat hasilnya

.more.

Cara Membuat Tampilan Gambar Post Lebih Cantik

Pada kesempatan kali ini arjem akan mencoba menjelaskan bagaimana membuat tampilan gambar pada artikel/post menjadi lebih cantik dengan effect transparent sebelum di sorot kursor namun setelah kursor berada di atasnya  gambar menjadi terang  dan berlahan berubah bentuk, gimana penasan kan..?? heheheh, silahkan arahkan panah pada gambar di bawah ini:

Ok untuk menerapkannya ikuti langkah-langkah berikut ini

1. Login / sasuk ke blog sobat
2. Plih rancangan Edit HTML
3. Kemudian cari kode ]]></b:skin> tekan ctrl+f untuk mempermudah pencarian
4. Setelah ketemu copy kode di bawah ini dan pastekan tepat di atas kode ]]></:bskin>

.post img{max-width:auto;}
.post img dd{float:center;margin:0;margin-top:8px;background:none;display:block;}
.post img{border-radius:30px 0 30px 0;-moz-border-radius:30px 0 30px 0;-webkit-border-radius:30px 0 30px 0;-o-border-radius:30px 0 30px 0;float:center;opacity:0.5;filter:alpha(opacity=70);background:none;border:2px solid #000ddd;border-bottom:2px solid #444;border-right:2px solid #333;padding:3px;margin:1px;transition:all 0.5s;
-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}
.post img:hover{cursor:move;-moz-transform:scale(1.1) rotate(-0deg);-webkit-transform:scale(1.1) rotate(-0deg);-o-transform:scale(1.1) rotate(-0deg);-ms-transform:scale(1.1) rotate(-0deg);transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:2.2;border:2px solid #ccc;border-right:2px solid #000ddd;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);border-bottom:2px solid #0274be;box-shadow:1px 1px 5px #0274be}
.post img ul{padding:0;overflow:none;margin:0
}

1. Yang terahir save template dan klihat hasilnya ( semoga bermanfaat )

.more.

Cara Membuat Read More Otomatis Pada Blog

Kali ini b.arjem  akan membahas bagaimana cara membuat read more otomatis pada blogspot, sebelum kita menuju keTKP b.arjem akan menjelaskan apa fungsi read more untuk blog kita, fungsi read more adalah meminimaliskan  halaman beranda blog agar terlihat lebih rapi dan simpel , read more otomatis ini sanggup memotong tampilan artiel yang panjang sesuai dengan pengaturan berapa banyak jumah huruf  yang ingin di tampilkan, bagaimana cara membuat read more otomatis, langsung menuju TKP :

- Login ke blog sobat >> dashoard  / jangan lupa backup template >> rancangan Edit HTML
- Cari kode </head> tekan ctrl+f untuk mempermudah pencarian
- Copas kode di bawah ini dan letakkan tepat di bawah kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 410; summary_img = 320; img_thumb_height = 110; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

- Kemudian cari lagi kode <data:post.body/> jika ketemu 2 atau 3 kode yang sama silahkan sobat hapus yang pertama dan ganti dengan script di bawah ini,

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

- Terahir save template

: Keterangan: summary_noimg = 410 (jumlah huruf pada artikel tanpa gamabar) | summary_img = 320 (jumlah huruf pada artukel dengan gambar) |  img_thumb_height = 110 (tinggi gambar) | img_thumb_width = 120 (lebar ambar)

:  jika sobat ingin mengganti icon read more silahkan sobat ganti url http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif  atau mungkin sobat ingin mengganti icon gambar dengan tulisan read more maka sobat tinggal  hapus kode berikut ini<img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> dan ganti dengan tulisan read more

the source: Blog amz

.more.