Fb like button untuk Thesis Blogger dan Wordpress

on 27 Oct 2013

Fb like button untuk Thesis Blogger dan Wordpress !! Hanya satu step, dan save !! Paling mudah di planet bumi.

Blogger Thesis

<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=true&amp;width=150&amp;action=like&amp;font=trebuchet+ms&amp;colorscheme=light&amp;height=21&quot;' scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:85px; height:21px;" allowTransparency="true"/>
Dari HTML template Blogger anda, cari kod <g:plusone size='medium'/> . Padam kod <g:plusone size='medium'/> , dan gantikan dengan kod diatas.

Atau anda boleh bermain-main dengan style sendiri mengikut tampilan button-button seperti anda inginkan.

Wordpress Thesis

function fb_like() {
if (is_single()) { ?>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px;"></iframe>
<?php }
}
add_action('thesis_hook_after_post','fb_like');
Masukkan sahaja kedalam file custom_functions.php Thesis anda. Boleh diakses melalui cpanel, atau terus sahaja dari dashboard Wordpress anda.

Notes:
Bagi user Thesis For Blogspot, Jika tak keberatan, mohon gantikan credit link template anda `Get smart with the Thesis Blogger Template from Forblogger.net`. `<a href='http://www.forblogger.net'>Forblogger.net</a>` kepada `<a href='http://www.photographermalaysia.my'>Photographer Malaysia</a>`. Kerana Forblogger.net berkurun lamanya sudah dijual kepada pemilik lain. - Thanks

Responsive Style Template Thesis For Blogspot

on 11 Jan 2013

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:

Muslim Blog
Standart View
Responsive Muslim Blog
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

on 12 Oct 2012


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:

Membuat Dua Kolom Pada Homepage Thesis

on 20 Aug 2012

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.

Muslim Blog


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!

on 15 Aug 2012

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.

Home Icon In Thesis For Blogspot

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

on 1 Aug 2012

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

on 17 Jul 2012

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.
<div class='menuhorizontal'>
<ul id='menuhorizontal'>
<li><a expr:href='data:blog.homepageUrl' style='border-left:1px solid #cccccc;'>Home</a></li>
<li><a href='http://www.forblogger.net/2011/07/terma-dan-syarat.html' target='_blank'>TERM</a></li>
<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 + &quot;feeds/posts/default&quot;' 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>