Thesis Ver.2 Rock!

Responsive Style Template Thesis For Blogspot

By MUS LIM on 11 Jan 2013 at 9:56 pm

Tutor Responsive Thesis Blogger Template ini hanyalah sekedar ujicoba untuk mengkaji Template Thesis For Blogspot ini sememangnya User Friendly. Setiap bagian dari template ini mudah dikenali dan dimodifikasi hanya dengan CSS sederhana tanpa memerlukan kemampuan khusus dalam bidang coding.

Saya telahpun mencoba untuk menjadikan template thesis ini menjadi responsive yang dapat menyesuaikan tampilan blog sesuai dengan ukuran layar browser.

DEMO : Muslim Blog

SCREENSHOT:

Standart View

Responsive View

Untuk membuat Template Thesis For Blogspot Anda menjadi Responsive, silahkan bubuhkan script CSS ini diatas ]]></b:skin>

Coding CSS ini hanyalah "UJICOBA" semata, dan masih belum sempurna. Bagi Anda yang mencoba coding ini, Kami tidak bertanggung jawab terhadap segala hal yang disebabkan oleh coding ini.

@media screen and (max-width:959px){
body{width:100%;margin:0 auto}
.headerleft{width:90%;float:none;margin:0 auto;display:block}
.headerright{width:90%;float:none;margin:0 auto;display:block}
.nav-wrap,#header-wrapper{width:100%;margin:0 auto;text-align:center}
#header-wrapper{height:150px}
#sidebar-wrapper{width:32.75%;float:right;margin:0 auto}
#main-wrapper{width:60.025%;float:left;margin:0 auto;padding-left:0}
#head,.menuhorizontal,#content-wrapper,#outer-wrapper,#footer-wrapper,#credit{width:87.25%;margin:0 auto}
.comment-form{max-width:100%}
.comments{width:100%;margin:0 auto;padding:0 auto}
.credit span{display:block;text-align:center}
.credit .cr{float:none;margin-left:0}
.credit .dev{float:none;margin-right:0}
}

@media screen and (max-width:758px) {
#main-wrapper{width:100%;float:none;margin:0 auto;border-right:none}
#sidebar-wrapper{width:100%;float:none;margin:0 auto}
#menuhorizontal li a{border:1px solid #ccc;display:inline-block;float:none;width:100%;text-align:center;padding: 10px 0;font-size:2.5em}
.iklan-kanan{display:none}
}

@media screen and (max-width:524px) {
#commentBodyField{width:94.5%}
}

Additional 728x90 And 220x90 Widgets For Thesis For Blogspot

By MUS LIM on 12 Oct 2012 at 1:39 am

Pilih Salah Satu Dari Ketiga Opsi Ini:

1. Temukan dengan Ctrl+F dalam template TFB-V2 untuk meletakkannya diatas POSTS

<b:section class='hook-after-header' id='hook-after-header' maxwidgets='3' showaddelement='yes'/>

2. Temukan dengan Ctrl+F dalam template TFB-V2 untuk meletakkannya diatas HEADER

<b:section class='hook-before-header' id='hook-before-header' maxwidgets='3' showaddelement='yes'/>

3. Temukan dengan Ctrl+F dalam template TFB-V2 untuk meletakkannya diatas FOOTER

<!-- spacer for skins that want sidebar and main to be the same height-->

<div class='clear'>&#160;</div>

</div> 

Selanjutnya paste code ini tepat dibawahnya: 

<style>

#bottom-hook{padding:10px;clear:both;margin:0 auto;}

</style>

<div id='bottom-hook'>

<div id='bottom-hook1' style='width:728px;height:90px;float:left;margin-right:5px;text-align:left;'>

<b:section class='bottom-column' id='bt1' preferred='yes' style='float:left;'>

</b:section>

</div>

<div id='bottom-hook2' style='width:220px;height:90px;float:right;margin-left:5px;text-align:right;'>

<b:section class='bottom-column' id='bt2' preferred='yes' style='float:right;'>

</b:section>

</div>

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

</div>

Screenshot:

Demo: http://yanfizs.blogspot.com/#bottom-hook

Membuat Dua Kolom Pada Homepage Thesis

By MUS LIM on 20 Aug 2012 at 12:52 am

Untuk membuat template thesis for blogspot ini agar dapat menampilkan dua kolom pada halaman beranda (homepage), dapat dilakukan sedikit tweak pada css Thesis Ver.2 Rock! Blogger Template ini.

Perubahan yang dilakukan tidak akan mengurangi atau menghilangkan kualitas seo yang dimiliki dan menjadi ciri khas template, akan tetapi hanya memberikan pengaturan lebar dan tinggi dari setiap artikel pada halaman depan/ home saja.

Untuk membuat dua kolom pada halaman home, cukup letakkan kode ini diatas </head>

<b:if cond='data:blog.pageType == &quot;index&quot;'><style>
.blog-posts .post{display:inline-block;width:280px;min-height:10px;margin-left:10px;margin-right:10px}
.post-body h2{font-size:1.25em}
#outer-wrapper{font-family: &#39;Franklin Gothic Medium&#39;,Arial,sans-serif;font-size:0.75em;line-height:1.275em;}
.sidebar h2,.sidebar h3,.sidebar h4{font-size:2.5em}
</style></b:if>

Maka hasilnya akan menjadi seperti tampilan pada blog ini: DEMO

Styling Menu Thesis Ver.2 Rock!

By MUS LIM on 15 Aug 2012 at 2:15 pm

Bagi sebahagian pengguna template thesis for blogspot Thesis Ver.2 Rock!, horizontal menu dapat diberi sedikit gaya dengan merubah menu "Home" menjadi icon "Home". Perubahan ini sebenarnya tidaklah mempengaruhi penampilan dari Template Thesis For Blogspot ini, namun icon yang akan ditampilkan akan terlihat kecil karena ukuran horizontal menu yang tidak besar :D

Begitu juga halnya dengan styling fixed menuhorizontal thesis, mungkin pada browser Firefox dan Chrome akan terlihat indah dan rapi dan pada browser lainnya belum tentu akan tersusun indah.

Akan tetapi jika pengguna setia template thesis ingin merubahnya dan memberikan sedikit sentuhan gaya, Kami akan mempersembahkan tutor sederhana ini.

Home Icon Pada Menu Thesis For Blogspot

Untuk merubah menu Home menjadi icon Home, silahkan ikuti trik ini:
1. Edit template dan expand
2. Cari dengan Ctrl+F kode:

<li><a expr:href='data:blog.homepageUrl' style='border-left:1px solid #cccccc;'>HOME</a></li>

3. Replace dengan kode:

<li><a expr:href='data:blog.homepageUrl' style='border-left:1px solid #cccccc;'><img title="HOME" alt="HOME" style="width:11px;height:11px;" src="http://2.bp.blogspot.com/-Wa_i_AXZHOo/UCwKF1CzzVI/AAAAAAAAB9c/BMamGLN0o2c/s1600/home-icon-16x16.png"/></a></li>

4. Preview dan jika berhasil, Save perubahan yang telah dilakukan.

Fixed Style Menu Thesis For Blogspot

Untuk membuat menu horizontal menjadi fixed style (mengikuti scrolling pada browser), silahkan ikuti trik ini:
1. Edit template dan expand
2. Cari dengan Ctrl+F kode ]]></b:skin>
3. Letakkan kode css ini diatasnya:

.menuhorizontal{position:fixed;top:0;background:#ccc;margin-left:15px;margin-top:-20px;}
.menuhorizontal li a{padding:20px 20px 10px 10px;} 
#head{margin-top:32px;}

4. Preview dan jika berhasil, Save perubahan yang telah dilakukan.

Selamat mencoba :D

Highlight Author And Threaded Commenting Levels

By MUS LIM on 1 Aug 2012 at 6:01 am

Bagi Anda pengguna Thesis For Blogspot, sangat mudah sekali melakukan modifikasi dan memperindah threaded comment pada comment bar blogger.

Cukup dengan meletakkan CSS ini dalam /*-- :[ START THEREADED COMMENT STYLE BY FORBLOGGER.NET]: --*/ pada template Thesis For Blogspot.

Dalam tutor ini, terdapat dua bagian penting pada threaded commenting blogspot, yaitu Highlight Author Threaded Comment dan Threaded Comment Levels.

Dengan meletakkan css3 code ini pada template Anda, maka threaded comment default Thesis For Blogspot Anda akan menjadi seperti screenshot berikut:

Highlight Author And Threaded Comment Levels For Thesis For Blogspot

Highlight Author Dan Thread Comment Bertingkat Dengan CSS

.comment-block{position:relative;padding:8px;background:rgba(255,255,255,.7);border:1px solid #ddd;border-radius:4px;box-shadow:4px 4px 4px #444;text-shadow:0 1px 0 #dbdbdb;}
.comment-block .icon.blog-author{position:absolute;right:0;bottom:0;background:rgba(0,0,0,.3) url(http://2.bp.blogspot.com/-sTLnLHWJok8/UBUsV2ZjfxI/AAAAAAAABa4/V5JOMhS744Y/s1600/author.png) bottom right no-repeat !important;width:100% !important;height:100% !important;margin:0 !important;border-radius:4px;}
.comment-block:hover{box-shadow:0 10px 10px -10px #444;}
.comment-block:hover .icon.blog-author{width:60px !important;height:22px !important;background:url(http://3.bp.blogspot.com/-RU1Q-HwrfsU/T2CyurPWOtI/AAAAAAAABmY/S0uNp_lWCNw/s1600/admin2.png) bottom right no-repeat !important;background-size:60px 22px !important;}

.comments .thread-toggle {margin-bottom:10px;}
.comments .comment-thread.inline-thread .comment .comment-block {margin-left:52px;}
.comments .comment-thread.inline-thread .comment {margin:0px 0px 5px 30%;padding:10px 15px;color:#222;}
.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0px 0px 5px 25%;}
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px 0px 5px 20%;}
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px 0px 5px 15%;}
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px 0px 5px 10%;}
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px 0px 5px 5%; }
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px 0px 5px 0%; }

Terimakasih yang tak terhingga kepada:

Blogonol: http://blogonol.blogspot.com/2012/06/highlight-author-threaded-comments.html

Rahmadika Kuniawan: http://blog.uad.ac.id/rahmadika/2012/06/27/cascading-style-sheet-4/

Mengubah Menu Navigation TFBv2

By MRie RNie on 17 Jul 2012 at 12:32 am

Simple tutor untuk TFBv.2 khas buat pengguna-pengguna TFB. Tak kira pengguna lama mahupun baru. Ini merupakan tutor permintaan dari "New User of TFBv.2".

Macam biasalah, nak ubah apa-apa pun kena buat back up dulu ya. Macam mana nak buat back up tu. Sila bertanya sama Mr & Mrs Google yoo.

Mencari dan mengubah menu:

Biasalah, log in ke dahsboard > Template > Edit HTML > Proceed > Don't tick on Expand Widget Templates ya sahabat-sahabat sekalian.
Tekan "Ctrl + F" pada keyboard komputer anda. Cari word "HOME / TERM / DOWNLOAD / SUPPORT. Kalau tak jumpa tu. Cari jer code sebiji macam di bawah ni.

<li><a href='http://thesisforblogspot.blogspot.com/2011/11/thesis-for-blogspot-download.html'>DOWNLOAD</a></li>

<li><a href='https://www.facebook.com/groups/thesissupport/' target='_blank'>SUPPORT</a></li>

<a expr:href='data:blog.homepageUrl + "feeds/posts/default"' style='background-image: url(http://4.bp.blogspot.com/-Cjrjhse6Exc/T_YQ7dMaIpI/AAAAAAAACxg/3RqA3xoGSj0/s1600/subcribe%2Bthesis.gif); background-position: 100% 95%; background-repeat: no-repeat; color: #111111; display: block; font-family: georgia; font-size: 12px; padding: 7px 20px 0px 0px; text-align: right; text-decoration: none; text-transform: uppercase;'>SUBSCRIBE</a>

</ul>

</div>

Mengubah dan menambah menu:

Anda cuma perlu mengubah part yang berwarna merah tu jer. Yang lain-lain tu tak perlu diusik ya.
Kalau code di atas tu tak cukup untuk menu/page anda. Sila tambah code seperti dibawah ini

<li><a href='link-page-or-menu' target='_blank'>MENU TITLE</a></li>

Sila paste code di atas ni betul-betul selepas barisan code dibawah ni

<li><a href='https://www.facebook.com/groups/thesissupport/' target='_blank'>SUPPORT</a></li>

Bylines dan Comment Count Yang Kemas

By Shah Danial on 15 Jul 2012 at 1:07 am

1 more simple update. Design template yang menarik adalah simple dan selesa, juga kemas tidak semak mata memandang. Mari ikuti tutorial membuatkan Treaser nda kelihatan seperti dibawah :-