Modifikasi Template Blogger

by besinikel - 2:17:00 PM

Daripada gw marah-marah (ini kenapa sih gw marah-marah meluluuuk hahaha) gegara smiley. How come gw ga bisa masang javascript buat smiley disindang ya Ceu? Pengen kaya punyanya Bebe, ada smileynya, LUCUK! Been trying to do all codes about smiley javascript, nothing success. Syalalalalalaaaaa... Et smiley, Y!M Smiley. Nonononoooo....thing is going good here. SIYAL.

[Ini smileynya pake acara kopas. Asem ik..]

Yaudah deh, mau share aja how I modify this blogger template.

Current template:

Pertamanya gegara nge-add extension buat si chrome, bookmark manager, trus rapih-rapihin bookmark, eh nemu link blogger template yang ciamik -yang bahkan gw ga inget pernah nge-bookmark itu :)))))

Ini linknya : ini loh iniiii :P

Ca'em yaaaa..

Lanjut.

So, how?

Setelah di donlot, gw buka dulu pake Notepad++ (sebelum gw apply) biar bisa gw trace gampang ga nih modifikasinya, terutama bagian header slider *cailaaaah!*, aslinya bisa sih pake notepad biasa, tapi ga warna-warni, klo pake Notepad++ lebih enakeun liatnya

Kaya gini tampilannya :

Warna-warni kan? Enak kan bacanya? Ya kaleeee.. *muntah berlian* *tadahin pake ember*

Trus setelah gw trace itirasi pertama (bahasa lo Feeen! hyakakakaka) alias scanning code di Notepad++ akhirnya gw memutuskan untuuuk..

Okelah kita coba apply yah!

Sebelum di aplot, gw donlot dulu template sebelumnya, jikalau ternyata gagal atau hasilnya tidak seperti yang gw inginkan pan bisa di restore :D

Nah, setelah apply, next step is benerin lebar body sama sidebar. Kenapa? Karena popotoan gw, seringnya gw adjust lebarnya 600px, ternyata si template ini lebih kecil, jadi kudu di ubah.

Here is:

( pake CTRL + F, searchmain)

This point :

/** Main **/
#primary { width: 960px; margin: 0 auto; background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRN1fTD0gTZQi66PwzSfnOwLHfCgegNihOSqkiK9o03axOPJRGPonTCmUoJGC-NX7MXeZoKu8tZ6fqHSK_PUX7LOUrbBBF8clL_FzxwZAzBDU_Yh78X-FEAv6cBBXh_GVOmEKZ_Q46Cns/s0/bd-dots-v.png') 600px -1px repeat-y; }
#main { width: 570px; float: left; }
#sidebar { width: 328px; float: right; }

Changes into:

/** Main **/
#primary { width: 960px; margin: 0 auto; background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRN1fTD0gTZQi66PwzSfnOwLHfCgegNihOSqkiK9o03axOPJRGPonTCmUoJGC-NX7MXeZoKu8tZ6fqHSK_PUX7LOUrbBBF8clL_FzxwZAzBDU_Yh78X-FEAv6cBBXh_GVOmEKZ_Q46Cns/s0/bd-dots-v.png') 700px -1px repeat-y; }
#main { width: 700px; float: left; }#sidebar { width: 250px; float: right; }

Dan sebagainya, kalo mau ditambahin dikurangin sesuai selera ajuah.. Trus adjust side bas kalo-kalo masih kurang pas.

Nah dari situ gw benerin slider deh. Karena ini nih yang menurut gw signifikan bikin template jadi ciamik.

CTRL + F lagi, pake kata kunci slider. Sampe nemu ini:

<div id='slideshow-box'>
    <div class='list'>
     <div class='item'>
      <div class='image clear-fix'>
      <a href='#' title='Permanent Link to Scelerisque scelerisque amet sit augue?'>
      <img alt='Colorful stripes' class='attachment-neonsential-reloaded-slideshow wp-post-image' height='269' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgl2SDYbyVfbiD05YSYlB5Q9RHMxGBz7O5he3IIqQTtPwavqa9ma0PDJC6iLcca0AVI1fHIlLwkBozW8I05szr9nal75XAPr7EaA_Av3pSP6b09roYvfpWuLuvkMOY5f0x0gVs38t0-wk/s0/artroll-550x269.jpg' title='Amet ac. Urna risus augue, nunc placerat nunc rhoncus! Amet pid aliquet diam! Turpis sit, dapibus in facilisis nascetur? In mid, magna augue eu odio. Nec duis tincidunt urna, augue porta sit augue adipiscing sit' width='550'/> </a>
      </div>
      <div class='meta clear-fix'>
      <h3><a href='#' title='Permanent Link to Scelerisque scelerisque amet sit augue?'>Scelerisque scelerisque amet sit augue?</a></h3>
      <p><span class='interior'>Amet ac. Urna risus augue, nunc placerat nunc rhoncus! Amet pid aliquet diam! Turpis sit, dapibus in facilisis nascetur? In mid, magna augue eu odio. Nec duis tincidunt urna, augue porta sit augue adipiscing sit</span></p>

Nah, dari situ ketahuan deh, gimana cara ganti slider :D

Bikin gambar di photoshop, ukurannya samain dengan

'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgl2SDYbyVfbiD05YSYlB5Q9RHMxGBz7O5he3IIqQTtPwavqa9ma0PDJC6iLcca0AVI1fHIlLwkBozW8I05szr9nal75XAPr7EaA_Av3pSP6b09roYvfpWuLuvkMOY5f0x0gVs38t0-wk/s0/artroll-550x269.jpg'

If i'm not mistaken 550 * 269 px. Bikin deh gegambaran di potosop. Gw ga mahir hahahaha, jadi ya seadanya segitu doangan :))) Bikin 3 macem header karena gw mau nampilin 3 postingan gw (MPASI, Arinka's, sama Our Stories Babap & Bubup).

Ah yaaaa.. Ini keterangan kode yang tadi ya (yang slider):

Click to enlarge

Kalo gw diubah jadi kayak gini:

Click to enlarge

Itu satu set kode untuk satu slider, klo bikin3, yaaaaa 3 kali bikin gituan. Yang males sih bikin gambar sama aplot ke photobucket hihihi..

Rempong sih, tapiii.. di sisi gw: bikin blog bukan cuma menyalurkan hobi pamer (halusnya sih sharing, kan katanya sharing is caring, rite? :P), tapi menyalurkan hasrat otak-atik code, bikin gegambaran, aplot ini itu, de el el. Hihihihihi..

Udah ah, gw masih gemes kenapa ga bisa pake smiley di blog gw siiiih..
IIIHHH! Ada yang tau? Kasi tau doooooong!

Tags : IT, Me

6 comments

adit5/13/2013
wuaaa, jago kali wak kodingnya
ReplyDelete
Replies
besinikel5/13/2013
DIAAAMM!!! :))
ReplyDelete
Replies
Bebe5/13/2013
haiiikkss.. sampe ganti2 kode? T__T untunglah di WP ga perlu gitu.. ;P *minta ditimpuk*
ReplyDelete
Replies
besinikel5/15/2013
Haeee Mba Bebe.. Aku udah lama punya WP tapi nganggur wae, keenakan pake ini hihihihi.. Siyal ini kudu pake kode sagala heu heu..

BUt, I'm done! :r
ReplyDelete
Replies
desieria5/17/2013
Mak, ini pusiang otak atik kode ginian bisa bikin kontraksi ga?
Aku mau deh kalo bisa...
Huahaha salah fokus gara2 ngarep kontraksi
maaf agak kacau :P
ReplyDelete
Replies
besinikel5/20/2013
Kayaknya ga deh, yg bikin kontraksi itu induksi alami, huahuahuahauhauhau..

Beneran, in my case berhasil :D

Silakeun di coba ya Mak :k
ReplyDelete
Replies