z33s Magazine v1 With Righty Sidebar

Bismillah... Alhamdulillah template z33s Magazine v1 sudah saya luncurkan pada artikel saya sebelumnya. Silahkan DOWNLOAD dan BACA DISINI.

Disini saya akan coba untuk membantu sahabat yang ingin memodifikasi z33s magazine dengan tampilan sidebar berada ditengah dan posisi halaman statis alias tidak ada perubahan posisi (Acobatic).

btw kalo dijadiin 2 right sidebar gimana gitu sob.. tapi sistemnya statis aja alias ga ada sidebar yg hilang. ke2 sidebar tetap ada ketika berada dlam mode posting (bukan home)


Kalo digambarkan akan seperti ini :

z33s magazine


MENJADI SEPERTI INI :

z33s magazine


Untuk melakukan modifikasi ada beberapa tahap yang harus diubah dan disesuaikan, diantaranya :

^^ Posisi Postingan (main) dan Sidebar ( menjadi sidebar di kanan)
^^ Ukuran Komentar
^^ Tampilan Homepage dan single page tetap
^^ Menyesuaikan Sexy Bookmark

Sekarang kita akan mulai untuk merubahnya, silahkan simak baik-baik dan jangan lupa untuk selalu membiasakan membackup template terlebih dahulu.

Untuk prosesnya kalian harus login terlebih dahulu, kemudian Masuk RANCANGAN--->EDIT HTML (centang expand template widget).

1. Merubah Posisi Main dan Sidebar

Karena sahabat meminta supaya tampilan sidebar berada disebelah kanan, maka kita akan menukar posisinya dari LEFT (kiri) menjadi RIGHT (kanan). Silahkan kalian cari kode berikut :

#main-wrapper{float:right;padding:0;width:660px;word-wrap:break-word;overflow:hidden;background:transparent;display:inline}

#sidebar-wrapper{padding:0 0 10px 0;float:left;width:300px;word-wrap:break-word;overflow:hidden;/* fix for long text &non-text content breaking sidebar float in IE */}


Perhatikan kode berwarna kuning diatas, silahkan sahabat tukar kode tersebut, sehingga menjadi seperti ini :

#main-wrapper{float:left;padding:0;width:660px;word-wrap:break-word;overflow:hidden;background:transparent;display:inline}

#sidebar-wrapper{padding:0 0 10px 0;float:right;width:300px;word-wrap:break-word;overflow:hidden;/* fix for long text &non-text content breaking sidebar float in IE */}


Simpan dulu templatenya.

Setelah selesai merubah posisi sidebar berada dikanan, sekarang kita harus menyesuaikan beberapa ukuran lainnya.

2. Merubah Ukuran Komentar dan Kotak komentar

Untuk merubah ukuran komentar, silahkan kalian cari kode berikut :

#comments{background:#000;float:right;width:628px;margin:0 0 10px 0; padding:10px;border:1px solid #e6e6e6;display:inline;border:1px solid #a5a5a5; font-family:'verdana';}


perhatikan kode berwarna kuning, silahkan ganti angkanya 628px menjadi 428px.

sekarang kita ganti ukuran kotak komentarnya, silahkan cari kode berikut :

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='650px'/> <data:post.friendConnectJs/> <data:post.cmtfpIframe/>


Perhatikan kode berwarna kuning, silahkan kalian ganti angka 650px menjadi 440px

3. TAMPILAN HOMEPAGE DAN SINGLE PAGE TETAP

Sebnarnya tahap yang ini adalah mengembalikan style magazine ke tampilan biasa, tapi karena sahabat yang meminta, jadi saya akan memberikannya. Supaya tampilan blog dihalaman utama dan dihalaman posting sama (tetap) dan tidak ada sidebar yang di Hilangkan, silahkan cari kode berikut (letaknya dibawah kode ]]></b:skin> )

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#main-wrapper{float:left;padding:0;width:660px;word-wrap:break-word;overflow:hidden;background:transparent;display:inline}
#main-left {display:none}
#main-right{float:left;width:650px;display:inline}
#sidebar-wrapper{padding:0 0 10px 0;float:right;width:300px;word-wrap:break-word;overflow:hidden;}
#top-sidebar-wrapper{}
#left-sidebar-wrapper{width:145px;float:left}
#right-sidebar-wrapper{width:145px;float:right}
</style>
</b:if>


HAPUS semua kode diatas dan simpan template

4. MENYESUAIKAN SEXY BOOKMARK

Karena z33s magazine sudah dilengkapi fitur sexy bookmark, maka jika kita akan merubah ukuran main (posting) kita harus merubah juga tampilan sexy bookmarknya. Pertama kita harus menyesuaikan posisinya, silahkan cari kode berikut :

.sexy-bookmarks {
height:54px;
background:url('http://i51.tinypic.com/6ifrbr.jpg') no-repeat left bottom;
position:relative;
margin-left:45px;
width:540px;
}


ganti margin-left:45px menjadi margin-left:5px

Meskipun sudah disesuaikan, kita juga harus membuang beberapa ikon sexy bookmark (disini kita akan membuang 3 ikon ), silahkan kalian cari kode berikut ( letaknya di bawah kode <data:post.body/>)

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>
</b:if>


Silahkan kalian buang 3 ikon yang ingin kalian hilangkan. caranya sebagai berikut :

1 ikon sexy bookmark kode seperti ini :

Contoh untuk facebook :

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>


jadi kode 1 ikon itu ada diantara tag <li> dan </li>. silahkan kalian hilangkan 3 ikon sexy bookmarknya dengan menghilangkan 3 bagian kode seperti contoh kode untuk FACEBOOK diatas. Setiap kode sudah ada nama untuk ikonnya seperti twitter, digg, email daln lain-lain.

Jika sudah selesai, simpan templatenya.

Mungkin itu saja yang bisa saya jelaskan, jika masih ada kesulitan atau bagian yang belum kerubah silahkan konfirm lagi aja. Terima kasih

donasiSilahkan kirimkan Donasi anda seikhlasnya berupa uang/pulsa (Klik Gambar kado disamping) untuk perkembangan blog ini dan Proses pembelajaran untuk sahabat.

Azis Lamayuda Penulis :  Azis Lamayuda | BLOG : Do The Best To Get The Best
Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.

Jika Anda ingin artikel z33s Magazine v1 With Righty Sidebar dikirim ke email anda, Silahkan masukan alamat email anda untuk berlangganan.

JANGAN LUPA CEK EMAIL ANDA UNTUK VERIFIKASI BERLANGGANAN VIA EMAIL

10 comments

sumpah sob keren banget templatenya,,, tapi pusing tu liat kode html yang begitu banyak,,, entar malah salah mengedit lagi,,, tapi saya maunya template saya postinganya berada di tengah,, dan windget di samping kiri kannanya,, bisa bantu gak sob....????

Keren akh. Kalau seandainya platform saya blogspot, sudah saya jajal mungkin. Hehehehe.

Kunjungan di pagi hari.

Mas ahli HTML.
keren ah...
kapan-kapan kalau saya punya blog BP, boleh pakai themes ini ya mas.

keren juga nih, boleh !!!

@5517818275874396184.0
hehehe...

saya juga klo liat kode begit pusing ....

oia template sudah saya kirim balik, dan semoga bermanfaat

@3126229599573349882.0
Iya mbak...

tp WP juga sekarang tambah keren koq mbak... klo mau beralih ke blogspot juga bisa koq, soal postingan kan bisa di import

@3786707705564936910.0
Klo ahli kaya nya masih jauh ...
soalnya masih belajar...

untuk templatenya silahkan dicoba ...

semoga bermanfaat

@5940917908175545380.0
Boleh apa tuvhhhh....

hehehehe, thx sob

keren sob, bisanggak htmlnya yg sudah di edit di kirim ke email aku soalnya pusing lihatnya , klw nda' bisa nda' pa2 kok dan link sobat sudah aku pasang di blog aku mohon link back nya sob, makasih.

sudah seo friendly tu nggak sob soalnya lagi nyari template keren tapi seo friendly kayak templatenya sob , keren buanget.

 
 
footerline
© Copyright 2010 AZIS LAMAYUDA | powered by Blogger
Say hello to me.