J-LMA

Yo, semuanya kali ini ane akan membahas tentang cara menambah background gambar populer post yang berbeda-beda, singkatnya bagian dua dari Cara menambah gambar/image pada gambar/image dipopuler post, sebelum memasuki tahap ini ente harus mengedit templete ente dulu.
Bagi ente yang sudah mengedit, simak lanjutannya. Bagi ente yang belum, ente masuk di Cara menambah gambar/image pada gambar/image dipopuler post sebelum melanjutkannya.

1. edit blog ente sesuai dengan Cara menambah gambar/image pada gambar/image dipopuler post
2. Ganti code  

li.jhoepop #jhoe-pop {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVOEABWbfFohZPnV4t8ZvVv6t3wxhjOuU4QloDxoFv-nyL4yklLVCDO5if_K72IjmiJ-Wwc63OZWDd5ng7QGNpcqv2C6AVsodM_DHajMXNxBxHGKFiDLtu-5i-2u4xcBbUJmGylemb6w/s320/urabe+1.jpg") no-repeat;
background-size: 100%;}   

dengan code di bawah ini



li.jhoepop:nth-child(1) #jhoe-pop {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVOEABWbfFohZPnV4t8ZvVv6t3wxhjOuU4QloDxoFv-nyL4yklLVCDO5if_K72IjmiJ-Wwc63OZWDd5ng7QGNpcqv2C6AVsodM_DHajMXNxBxHGKFiDLtu-5i-2u4xcBbUJmGylemb6w/s320/urabe+1.jpg") no-repeat;background-size: 100%;}
li.jhoepop:nth-child(2) #jhoe-pop {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8PIAS2XjW-YV1ACjuyAPEiM9LiibkTmbgds_PiInMvsf813YgCwWwI1II2cHNr1JsCtzLngpKWl10YC5m1ujeN_omvFZcmDntG2TjNwAxlxdwfFPPM_pDhBtopf2cXrk1fEOzqVqvRA/s320/Urabe+2.jpg") no-repeat;background-size: 100%;}
li.jhoepop:nth-child(3) #jhoe-pop {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHrB6EVh4aPJtoPsuZ8QIxY9WVL0J5Yv-Fxqx7lhxvX3grGmCd_8TVTF8iLTBPmYkRWcUNH3_zACPzla0SOE6igbq1W8X_RN4ZpqFKWjBsBskYsGHQnE1q4RlEWIx0emz1QzDpeg5bebM/s320/Urabe+3.jpg") no-repeat;background-size: 100%;}
li.jhoepop:nth-child(4) #jhoe-pop {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1T_vFyQAy8YreyMvUublT3t4uwSvJXBSQk8-M2JR2CxxkHco18wu5BoEMn_7hBbwCd_DdyeFH_0LHN9nuo0zNc7OmXBSPpq6yiW_eEdfihSVhImcn2WBvJc6PY3eR7opuqJHqmKX-Lr0/s320/Urabe+4.jpg") no-repeat;background-size: 100%;}
li.jhoepop:nth-child(5) #jhoe-pop {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitb3EFbJKaFNFuDXmgR29G3PtY-5bKMilOjEBPfqQd2DVNE8-lU4_ToeO9i3PTSzamw2EnJKyg4kLxD9qeMvsLSsdApadKpXtsc673OcuWRy5YvYeCpFRsKB_Fr4zF1HqfSj2JtSKa8sc/s320/Urabe+5.jpg") no-repeat;background-size: 100%;}
li.jhoepop:nth-child(6) #jhoe-pop {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjn2TMSIiypCUZY20T5JYCNc2lRCY0qpT7W8YKELkRdu52FeFjN7nR8psQUNje3jMEshijld9_iEwqYU0tgXr493AWiTcrl4neS1Y8D5o7515GwIHXYrVywr7HcwzLUwy6RWrh_XL_ero/s320/urabe+6.jpg") no-repeat;background-size: 100%;}
li.jhoepop:nth-child(7) #jhoe-pop {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwyyKH23zk97muXq9dT0Subl31l5IdPy6gfITDqKXjVDF99f_A6DR5lREzfJtUApx3ZE5CgBVqCuq0cF5T2USgzdybtm8NbwziencunqAwZ7tTiOVJNpbCtV3YMmrOjRRzDtaTDV7aAzM/s400/urabe+7.jpg") no-repeat;background-size: 100%;}
li.jhoepop:nth-child(8) #jhoe-pop {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdz9r5pj4dYxIgCf5-oX8g9aIKaCWQDlObI5b8L0fW-fqsrdz0OAwglgfEgkpWhG0yU9HEXPX6-uB1AtrBHTqlZPPeieQD-B-JAPK6EPsgjWed_AofIWA2Pn3LUgUdvDcBE0t6xR6BihA/s320/urabe+8.jpg") no-repeat;background-size: 100%;}
li.jhoepop:nth-child(9) #jhoe-pop {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNw6Al0xrnFpZvZ96Ym_ZZ0vRSILdRG98MOlofUiOWHplwpGNTTy0CCGWrPEwnM2x32xd2rSnDBYCc8jTY_lv4nmBtOPOY8_xPdrCABDr5pXo0XapYsUlDdaSVUMPNX2BbD1XUNIOX4dk/s320/urabe+9.jpg") no-repeat;background-size: 100%;}
li.jhoepop:nth-child(10) #jhoe-pop {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu5vv-8J3td61jeHOzaRlZavFNGQNe17Gi3phzHjU8somGiingATNKPTUEkbaXNJr3lQU5I16NoARNWRliN6IKZ9HKqrZg9TzCCtg_x8s_WacJxYWrnZptIKdUbxf0Zpcu8o4aexXEbQc/s320/Urabe+10.png") no-repeat;background-size: 100%;}  



3. lalu save

CATATAN : u/ warna kuning silahkan ganti gambar sendiri paling tidak ukurang gambarnya harus sama (pxl) dan setiap gambar berbeda-beda, jadi ente harus mencari minimal 10 gambar

Yo, udah lama ane gag ngepost. Banyak kesibukan di dunia nyata, dan juga akhir bulan bulan ini internet mahal. Jadi ane agak males sih buka laptop.
Mumpung ane masih inget triknya daripada ane lupa mending gua post aja.
Mungkin dari ente-ente semua banyak yang belum bisa atau belum mahir ataupun belum ngerti, bagi yang sudah tau, tolong ajarin bagi yang ingin belajar.

1. Login/buka blogger ente
2. Klik tema lalu klik edit HTML 

3. Tekan Ctrl+F (klik cursor di kotak HTML), lalu cari PopularPosts2
Bila ada tanda panah yang seperti ane lingkarin berwarna biru, klik saja panahnya

4. Lalu cari <li> lalu ganti dengan <li class='jhoepop'>

5. Lalu cari code <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>, lalu taruh code <div class='jhoe-pop'><div id='jhoe-pop'/></div> di atasnya

6. Tambahkan code di bawah ini, diatas code ]]></b:skin> 

.jhoe-pop {z-index: -1;position: relative;float: left}
#jhoe-pop {z-index: 1;opacity: 1;float: left;height: 72px;width: 72px;margin: 5px 5px 5px 0;}
li.jhoepop #jhoe-pop {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHVOEABWbfFohZPnV4t8ZvVv6t3wxhjOuU4QloDxoFv-nyL4yklLVCDO5if_K72IjmiJ-Wwc63OZWDd5ng7QGNpcqv2C6AVsodM_DHajMXNxBxHGKFiDLtu-5i-2u4xcBbUJmGylemb6w/s320/urabe+1.jpg") no-repeat;
background-size: 100%;}
.PopularPosts .item-thumbnail {
float: left;
margin: 5px 5px 5px 0;
position: absolute;}

7. Lalu klik save

CATATAN : u/ warna kuning silahkan ganti gambar sendiri paling tidak ukurang gambarnya harus sama (pxl)

Selamat mencoba

hallo semua, ane datang lagi, hahahaha
kali ini saya akan posting cara menambahakah background gambar pada judul footer dan sidebar, banyak template yang tidak menggunakan background gambar pada judul footer dan sidebar. mungkin itu di anggap kurang menarik. tapi untuk ane sih menarik dari pada polos atau warna doang.
untuk lebih jelasnya silahkan lihat klik disini

1. Buka blog kalian
2. klik kanan pada judul sidebar atau yang kalian inginkan, lalu pilih inspect Element (Q)
3. klik h2 dan ganti menjadi .sidebar h2
4. tambahkan css di bawah ini dan taruh di dalam kurung kurawal .sidebar h2 agar bisa melihat apakah gambar itu sudah pas apa belum

background: #000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikx07misgPcwVsmCAym_6Cd0C0mEwH_D2hPFX3qE-Yh5296PVQvcGGU6znexosaLNmbI5QST5fidtTlmp4DKbJhWv7xGVEmBowOVXAi1kQ3rkXARPMvaFtudnB81CIgJAMuhaFWZ2xfgkd/s320/boruto.png") no-repeat bottom right;
background-size: 30%;
padding: 15px 85px 15px 10px;
margin: 0;
font-family: 'Overlock SC', cursive;
font-size: 17px;
color: #3f8fc7;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
text-align: left;
height: 14px;
border-bottom: 1px solid #f2b802;

5. klik template
6. Copy kode tersebut dan taruh diatas kode ]]></b:skin>

.sidebar h2 {
background: #000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikx07misgPcwVsmCAym_6Cd0C0mEwH_D2hPFX3qE-Yh5296PVQvcGGU6znexosaLNmbI5QST5fidtTlmp4DKbJhWv7xGVEmBowOVXAi1kQ3rkXARPMvaFtudnB81CIgJAMuhaFWZ2xfgkd/s320/boruto.png") no-repeat bottom right;
background-size: 30%;
padding: 15px 85px 15px 10px;
margin: 0;
font-family: 'Overlock SC', cursive;
font-size: 17px;
color: #3f8fc7;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
text-align: left;
height: 14px;
border-bottom: 1px solid #f2b802;}

5. lalu simpan

Untuk warna kuning ganti kode tersebut sesuai warna keinginan kalian
Untuk warna biru ganti link sesuai keinginan kalian
Untuk warna Magenta ganti kode tersebut sesuai warna keinginan kalian
Untuk warna ungu ganti link sesuai dengan tinggi keinginan kalian
Untuk warna coklat ganti kode tersebut sesuai warna keinginan kalian
Untuk warna biru laut ganti ukuran tersebut sesuai tinggi ukuran judul tersebut


bila ada masalah atau pertanyaan,silakan tanyakan,dan berikan komentar'a,terima kasih,selamat mencoba^^

hallo semua, ane orang baru. hahahaha
kali ini saya akan posting cara menambahkan media sosial dengan icon/gambar pada blog, banyak cara menambahkan link media sosial pada blog, tapi ane akan memberi cara menambahkan media sosial dengan icon/gambar.


untuk lebih jelasnya silahkan lihat klik disini

1. Buka blog kalian
2. klik template
3. tambahkan css di bawah ini dan taruh diatas kode ]]></b:skin>

.Abox {display: inline-block;width: 1000px;}
.angel {list-style: none;margin: 0 0 0 10px;padding: 10px 0;width: auto;overflow: hidden;float: left;}
.angel li {float: left;margin-right: 10px;border: none;}
.icon-flickr a, .icon-instagram a, .icon-facebook a, .icon-gplus a, .icon-lastfm a, .icon-feed a, .icon-skype a, .icon-twitter a, .icon-youtube a {float: left;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WT3hf2fhfGDVt_1lxVAzQT5Hftfe4OaX9vrDoKSpg-Kx0yUhqeng6YlAQ4UeBEHf9LLB7YeWqNRB8LrbzLzt0C51z1GsRAsATY0M4D7ORpx44CWmsyQgpfZP6NoH6VMTiZRvMDlqKpQ/s1600/social-media.png) no-repeat left bottom;text-indent: -9999px;width: 32px;height: 32px;-o-transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;}
.icon-flickr a:hover, .icon-instagram a:hover, .icon-facebook a:hover, .icon-gplus a:hover, .icon-lastfm a:hover, .icon-feed a:hover, .icon-skype a:hover, .icon-twitter a:hover, .icon-youtube a:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WT3hf2fhfGDVt_1lxVAzQT5Hftfe4OaX9vrDoKSpg-Kx0yUhqeng6YlAQ4UeBEHf9LLB7YeWqNRB8LrbzLzt0C51z1GsRAsATY0M4D7ORpx44CWmsyQgpfZP6NoH6VMTiZRvMDlqKpQ/s1600/social-media.png) no-repeat left top;-o-transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;}
.icon-feed, .icon-feed a {background-position: -160px bottom;}
.icon-feed:hover, .icon-feed a:hover {background-position: -160px top;}
.icon-facebook, .icon-facebook a { background-position: -64px bottom;}
.icon-facebook:hover, .icon-facebook a:hover { background-position: -64px top;}
.icon-twitter, .icon-twitter a {background-position: -224px bottom;}
.icon-twitter:hover, .icon-twitter a:hover {background-position: -224px top;}
.icon-youtube, .icon-youtube a {background-position: -256px bottom;}
.icon-youtube:hover, .icon-youtube a:hover {background-position: -256px top;}
.icon-instagram, .icon-instagram a {background-position: -32px bottom;}
.icon-instagram:hover, .icon-instagram a:hover {background-position: -32px top;}
.icon-skype, .icon-skype a {background-position: -192px bottom;}
.icon-skype:hover, .icon-skype a:hover {background-position: -192px top;}
.icon-gplus, .icon-gplus a {background-position: -96px bottom;}
.icon-gplus:hover, .icon-gplus a:hover {background-position: -96px top;}
.icon-flickr, .icon-flickr a {background-position: 0px bottom;}
.icon-flickr:hover, .icon-flickr a:hover {background-position: 0px top;}
.icon-lastfm, .icon-lastfm a {background-position: -128px bottom;}
.icon-lastfm:hover, .icon-lastfm a:hover {background-position: -128px top;}
.angel li:last-child {margin: 0;}

4. tambahkan html dibawah ini dan taruh sesuai keinginan kalian, tapi ane saranin taruh di atas  <div id='header-wrapper'>

<div class='Abox'>  
<ul class='angel'>                       
<li class='icon-feed'><a href='http://anotherv2-template-blogger.blogspot.com/feeds/posts/default'>Feed</a></li>
<li class='icon-facebook'><a href='http://facebook.com/username'>Facebook</a></li>
<li class='icon-twitter'><a href='http://twitter.com/username'>Twitter</a></li>
<li class='icon-youtube'><a href='http://www.youtube.com/user/username'>Youtube</a></li>
<li class='icon-instagram'><a href='http://instagram.com/username'>instagram</a></li>
<li class='icon-skype'><a href='http://skype.com/username'>Skype</a></li>
<li class='icon-gplus'><a href='http://plus.google.com/username'>google plus</a></li>
<li class='icon-flickr'><a href='http://flickr.com/username'>flickr</a></li>
<li class='icon-lastfm'><a href='http://lastfm.com/username'>lastfm</a></li>
</ul>
</div>

5. lalu simpan

Untuk warna kuning ganti ukuran lebar sesuai keinginan kalian
untuk warna biru ganti link sesuai keinginan kalian

bila ada masalah atau pertanyaan,silakan tanyakan,dan berikan komentar'a,terima kasih,selamat mencoba^^

Demo

left: 0; 
width: 100%; 
background: rgba(0, 0, 0, 0.2 ); 
border-radius: 5px;
position: fixed; 
bottom: 0; 
z-index: 9999999999999999999999;

yo, kali saya akan posting cara menambah judul/tulisan di atas postingan, mungkin beberapa templete tak ada yang menggunakan ini, tapi templete yang saya gunakan menggunakan ini.



1. Buka blog kalian
2. klik template
3. tambahkan css di bawah ini dan taruh diatas kode ]]></b:skin>

h7.megared {
font-size: 16px !important;
padding: 5px;
color: rgb(255, 0, 0);
border-radius: 5px;
font-family: 'Baumans', cursive;
background: #000;
width: 780px;
margin: 3px 3px 10px 8px;
border: 1px solid rgb(255, 0, 0);
float: left;
position: relative;
text-align: center;
letter-spacing: 2px;
}

4. tambahkan html dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<h7 class='megared'>Postingan J-LMA || http://megaredrcn.blogspot.com ||</h7>
</b:if></b:if>

dan taruh taruh di atas <b:section class='main' id='main' showaddelement='no'>

5. lalu simpan

Untuk warna kuning ganti ukuran lebar sesuai keinginan kalian
Untuk warna biru ganti warna sesuai keinginan kalian
Untuk warna Hijau ganti left atau right
Untuk warna biru laut ganti tulisan tersebut sesuai keinginan kalian 

bila ada masalah atau pertanyaan,silakan tanyakan,dan berikan komentar'a,terima kasih,selamat mencoba^^

Yo, sob kali ini gua ngeshare tentang cara mengganti background gambar pada header blogger.

1. buka situs blogger Anda lalu klik kanan pada gambar header blog >> klik Inspect Element (Q)
3. Tambahkan background-size: 100%; di dlam kurung kurawal

Catatan: biasanya gambar header harus sesuai ukuran panjang dan lebar header, tapi aku hanya menggunakan background-size: 100%;. jadi ukuran berapapun gambar akan sesuai panjang dan lebar, jadi tidak harus sama dengan header. min-gambar harus width: 800px; agar tidak pecah2/ kotak2/ ngeblur.

4. buka blog Anda >> Templete >> Edit Templete

width: 960px;
margin: auto;
height: 480px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5t1QyvqlLrwmN8CbLtFDIatMpRJvwPm9IS7g6JeKpL6KP_VVFrzYSwSURgYJ9FTygSnd7P8sZBtENIZrdSrvb_wuayolu1tEAAYPsKuWEt9bXMcAAKEsqOiiWXfTSHbtbgwxHXR0xVMeG/s1600/Untitledh-2.png") no-repeat top center;
overflow: hidden;
background-size: 100%;
border: 2px solid #f0f;

5. tambahkan Copy css tersebut lalu cari sesuai nama header itu lalu ganti

contoh : #headerwinda
catatan: setiap header namanya berbeda-beda jadi anda cari sesndiri namanya dengan menggunakan Ctrl+F

6. Simpan

warna kuning ganti sesuai ukuran yang Anda inginkan
warna Hijau ganti sesuai link gambar yang Anda inginkan
warna biru ganti sesuai warna yang Anda inginkan

selamat mencoba

Yo, sob kali ini gua ngeshare tentang cara menambahkan background gambar pada header blogger.
mungkin beberapa templete susah ada gambarnya, tapi kebanyakan templete lama tak ada gambarnya

1. buka situs blogger Anda lalu klik kanan pada header blog >> klik Inspect Element (Q)
2. pilih HTML yang akan di kasih gambar >> klik Add New Rule
3. Tambahkan css di bawah ini ke dalam kurung kurawal #header

contoh:
#header {

}
menjadi

#header {
width: 998px;
position: relative;
margin: 0px;
height: 406px;
background: #000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7iG0svNV9pfDGykgaRV0mE8Q6JD8UoRGPtPWK8v3Go3eIUF9PySrlSCzg1qj_BoP7mbZdMUopU3D8X9RFaOfzHfT9aNLSRXwLi6rTQjodDhiNTT59POMZFzOSvOJzhqZDuc7PqMqbQsIA/s400/flow0.jpeg") no-repeat scroll center center / 100% auto;
border: 1px solid #FFF;
}

4. buka blog Anda >> Templete >> Edit Templete
5. tambahkan css tersebut di atas
6. Simpan

warna kuning ganti sesuai ukuran yang Anda inginkan
warna Hijau ganti sesuai link gambar yang Anda inginkan
warna biru ganti sesuai warna yang Anda inginkan

selamat mencoba

<b:loop values='data:labels' var='label'>

<span class='label-size'>

<b:if cond='data:blog.url == data:label.url'>

<a expr:dir='data:blog.languageDirection'><data:label.name/></a>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

</b:if>

<b:if cond='data:showFreqNumbers'>

<span class='label-count' dir='ltr'>(<data:label.count/>)</span>

</b:if>

</span>

</b:loop>

<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>

<b:if cond='data:blog.url == data:label.url'> 

<a expr:dir='data:blog.languageDirection'><data:label.name/></a>

<b:else/>

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

</b:if>

<b:if cond='data:showFreqNumbers'>

 <span class='label-count' dir='ltr'>(<data:label.count/>)</span>

</b:if>

</span>

.label-size-1, .label-size-2, .label-size-3, .label-size-4, .label-size-5 {font-size: 100%;filter: alpha(100);opacity: 10;}

.label-size a, .label-size span {display: inline-block;color: #ffffff !important;padding: 6px 8px;font-weight: bold;}

.label-size:hover {background: #333333;}

.label-size {background: #666; display: block; margin: 0 3px 3px 0; color: #ffffff;font-size: 11px;text-transform: uppercase;}

.label-count {float: right;white-space: nowrap; padding-right: 3px; margin-left: -3px; background: #333333;color: #fff !important;width: 25px;text-align: center;}

10. Lalu simpan

Yo sob, kali ini saya posting cara mendesign image /  gambar pada menu utama menjadi lebih menarik,

Contohnya pada blog saya ini, coba kali geser kursor ada pada postingannya. Gambarnya akan menjadi melingkar.



Caranya mudah koq, Anda tidak perlu pusing mencari-cari lagi, disini saya akan memberi tricknya:

1. Anda buka dulu blogger anda, lalu ke edit HTML,
2. Buka blog anda.
3. Arahkan kursor ke gambar postingan,
4. Klik kanan pada gambar postingan, lalu klik periksa elemen.
     Nantinya akan keluar seperti ini:

- Menggunakan Google Chrome:

- Menggunakan Mozilla Firefox :

5. tekan Ctrl+F pada Edit Elemen, lalu tulis nama yang akan anda tuju.

contohnya seperti ini : .thumb-post img

6. Copy CSS di bawah ini, pastekan didalam kurung kurawal / { } :

  padding:4px;
  margin:0 0 0 15px;
  width:75px;
  height:80px;
  background:none;
  border:3px solid transparent;
  box-shadow:0 0 8px rgba(255,0,255,0.5);
  -webkit-transition:all 0.65s ease-in-out;

Contohnya :

.thumb-post img {
  padding:4px;
  margin:0 0 0 15px;
  width:75px;
  height:80px;
  background:none;
  border:3px solid transparent;
  box-shadow:0 0 8px rgba(255,0,255,0.5);
  -webkit-transition:all 0.65s ease-in-out;
}

7. bila tidak ada hovernya, Anda buat hovernya sendiri.

Contohnya :
.thumb-post img menjadi .thumb-post img:hover / .post:hover:hover .thumb-post img

8. Copy CSS hovernya di bawah ini, pastekan didalam kurung kurawal / { } :

  border:3px solid transparent;
  box-shadow:0 0 8px rgba(255,0,255,0.5);
  -webkit-border-radius:90px;
  -moz-border-radius:90px;
  border-radius:90px;

Contohnya :

.post:hover:hover .thumb-post img {
  border:3px solid transparent;
  box-shadow:0 0 8px rgba(255,0,255,0.5);
  -webkit-border-radius:90px;
  -moz-border-radius:90px;
  border-radius:90px;
}

Atau

.thumb-post img:hover {
  border:3px solid transparent;
  box-shadow:0 0 8px rgba(255,0,255,0.5);
  -webkit-border-radius:90px;
  -moz-border-radius:90px;
  border-radius:90px;
}

9. save dan lihat hasilnya.

Catatan : trick ini tergantung sama templatenya, jadi bila ada kesalahan saya minta maaf, tapi kalau saya bisa bantu saya akan membantu Anda.

Sekian dan Terima Kasih

Buat sobat yang bingung mau nambah tempat gadget sepeti gambar diatas ...

ni saya punya sedikit tips untuk Membuat 3 kolom Widget di Bawah Postingan.


Kebanyakkan Blogging menggunakan  CSS dan HTML seperti di bawah ini

#CSS

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

#HTML

<div id='footer-column-divide'>


<div id='footer1' style='width: 30%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>


<div id='footer2' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>


<div id='footer3' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>


<div style='clear:both;'/>
</div>

Tapi saya menggunakan CSS dan HTML yang cukup berbeda dengan yg lainnya ....


1. Login ke blogger.
2. Klik Rancangan --> tata letak --> Edit HTML
3. Expand Widget Template tidak usah di beri centang
4. Cari kode ]]></b:skin> atau lebih tepatnya kode .footer
5. Copy kode dibawah ini dan paste di atas kode ]]></b:skin> atau lebih tepatnya kode .footer

#main1 .widget-content {
border-top: 3px solid white;
padding: 5px;
width: 270px;
overflow: hidden;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: black;
margin-bottom: 10px;
padding: 5px;
overflow-y: hidden;
margin-left: 15px;
margin-top: 10px;
background: #FEFEFD;}  
#main2 .widget-content {
border-top: 3px solid white;
padding: 5px;
width: 270px;
overflow: hidden;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: black;
margin-bottom: 10px;
padding: 5px;
overflow-y: hidden;
margin-left: 15px;
margin-top: 10px;
background: #FEFEFD;}
#main3 .widget-content {
border-top: 3px solid white;
padding: 5px;
width: 270px;
overflow: hidden;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: black;
margin-bottom: 10px;
padding: 5px;
overflow-y: hidden;
margin-left: 15px;
margin-top: 10px;
background: #FEFEFD;}
#main1 ,#main2 ,#main3 {width:305px;float:left;margin: 3px;margin-left: 6px;list-style-type:none;margin-top:20px;}
#main1 h2 ,#main2 h2 ,#main3 h2 {font-family: 'Cabin Condensed', sans-serif;
background: rgba(0, 0, 0, 0.1);
border-radius: 9px;
margin-left: 25px;
margin-top: 5px;
font-size: 21px;
line-height: 28px;
text-align: left;
font-weight: normal;
margin: auto;
padding: 0px 10px;
padding-left: 5px;
padding-right: 5px;
color: white;
letter-spacing: -1px;
}
#main1 ul li a:link, #main1 ul li a:visited{color:#666;}
#main2 ul li a:link, #main2 ul li a:visited{color:#666;}
#main3 ul li a:link, #main3 ul li a:visited{color:#666;}

6. Cari kode   

<div id='footer'>

Atau

<div id='footer-wrapper'> 
<b:section class='footer' id='footer'/> 
</div>

7. Taruh kode di bawah ini tepat di bawah <div id='footer'> atau Hapus kode <b:section class='footer' id='footer'/>

<b:section class='main1' id='main1' showaddelement='yes'>
<b:section class='main2' id='main2' showaddelement='yes'>
<b:section class='main3' id='main3' showaddelement='yes'>

 Contohnya :

   <div id='footer'>
<b:section class='main1' id='main1' showaddelement='yes'>
<b:section class='main2' id='main2' showaddelement='yes'>
<b:section class='main3' id='main3' showaddelement='yes'>

#KETERANGAN : 

- warna merah anda bisa ganti dengan kode warna yang lainnya
- warna biru muda anda bisa ganti dengan lebar sesuka anda
- warna ungu muda anda bisa ganti dengan kode warna yang lainnya

Hasilnya seperti gambar dibawah ini :

Membuat tulisan copyright di blog memang banyak manfaatnya. Salah satunya supaya blog kita anti pembajakan. Sebenarnya pembajakan tetap saja terjadi karena tulisan copyright ini hanya sebuah tulisan tanpa ada hukum yang mendampinginya.

Tulisan copyright ini sangat sering kita temui di bagian bawah sebuah blog atau website. Kalau menurut saya, tulisan ini memberikan informasi siapa pembuat template blog Sobat, siapa pemilik blog tersebut atau info-info lainnya.

Selain memberikan informasi, tulisan ini juga membuat blog atau website kita lebih profesional. Membuat tulisan copyright di blog cukup mudah karena tidak menggunakan kode HTML yang sulit. Kalau di blog Sobat belum ada tulisan Copyright kenapa ngga mulai memasang sekarang juga??? Okeh lah, langsung saja kita meluncur ke tutorial membuat tulisan copyright di blog.

Langkah 1
Login ke akun Blogger milik Sobat > Tata Letak > Edit HTML. Klik Download Full Template untuk membackup template blog Anda.

Copas kode berikut tepat di atas kode ]]></b:skin>

.copyright{
float: left;
padding-top:5px;
padding-bottom:5px;
font:normal 80% Verdana,Trebuchet,Arial,Sans-serif;
}

Ganti float menjadi right jika Sobat ingin meletakkannya pada bagian kanan blog, left pada bagian kiri. Jika ingin terletak di tengah, ganti dengan center

Langkah 2
Copas kode berikut ini tepat di atas kode </body>

<div class='copyright'>Copyright  &#169; 2013 | <a expr:href='data:blog.homepageUrl' title='All Rights Reserved'> <data:blog.title/></a> | Anime Sub Indo <a href='http://v-lux-subz.blogspot.com/' title='Anime Fansub Indonesia'>V - LUX_SUBz</a> | A _ZU By <a href='http://fvreddyjhoennyrieywantho.blogspot.com/' title='FVREDDY_JHOENNY_RIEWANTHO'>JHOE_Banqszatsz</a><br/></div>

Hasilnya bisa Sobat lihat pada bagian bawah blog ini.
Semoga Bermanfaat...

Kali ini saya akan memberikan bebrapa cara agar gambar yang anda upload di blog tidak melebihi wrapper pada postingan.
Biasanya ada beberapa template blog yang gambarnya melebihi postingan,

 
jadi kali ini saya akan memberikan beberapa CSS

Cari  .pst img
kalau kesulitan tekan dengan Ctrl+F untuk memudahkan pencarian
Tambahkan Max-width: 530px; 
Letakkan pada .pst img {  }
Contohnya :

.post { background:#FFFFFF;border:1px solid $bordercolor;padding: 7px;}

Menjadi seperti ini :

.post { background:#FFFFFF;max-width: 530px;border:1px solid $bordercolor;padding: 7px;}

Ganti warna merah itu dengan ukuran wrapper anda
Jangan Lupa Centang  Expand Template Widget
Kemudia Save 

Mudahkan, selamat mencoba