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^^