Cara Menampilkan Widget / CSS / Script Pada Halaman Tertentu





Banyak cara mempercepat loading blog, seperti yang sudah saya post sebelumnya tentang Cara Mempercepat Loading Blog | Percepat Loading blog dengan cara compress template | Memasang "Join this Site" dengan HTML. Sekarang saya juga akan membahas satu topik yang fungsinya juga mengoptimalkan loading blog. Cara kerja yaitu dengan menampilkan widget atau CSS dan/atau Script hanya pada halaman yang dibutuhkan.

Misalnya saja kebanyakan memasang widget akan membuat blog anda berat. Terlebih lagi jika banyak widget social yang menampilkan gambar followersnya. Maka anda perlu mencoba widget social Mashable. Tetapi ada cara lain yang dapat kita gunakan yaitu dengan menampilkan widgetnya pada halaman tertentu saja? Misalnya saja kode iklan, newslatter atau sebagainya.

Caranya cukup gampang, anda cukup memasukan fungsi b:if pada widget yang akan diatur. Sebenarnya fungsi ini adalah fungsi kondisional pada blogspot. Kita dapat mengatur widget yang akan ditampilkan pada 5 type halaman berbeda, yaitu :
  • Beranda alias homepage
  • Posting artikel
  • Halaman page statis (blog archive > berdasarkan tanggal publikasi)
  • Halaman arsip
  • Halaman artikel tertentu

Mengenal berbagai fungsi b:if

1# Menampilkan widget pada halaman homepage                                           

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Kode Widget....
</b:if> 

2# Menampilkan widget di semua halaman kecuali homepage                       

<b:if cond='data:blog.url != data:blog.homepageUrl'>
Kode Widget.... 
</b:if> 

3# Menampilkan widget di semua halaman posting                                          

<b:if cond='data:blog.pageType == "item"'>
Kode Widget.... 
</b:if> 

4# Menampilkan widget di semua halaman kecuali halaman posting             

<b:if cond='data:blog.pageType != "item"'>
Kode Widget.... 
</b:if> 

5# Menampilkan widget di semua halaman page statis                                    

<b:if cond='data:blog.pageType == "static_page"'>
Kode Widget.... 
</b:if>

6# Menampilkan widget di semua halaman kecuali page statis                       

 <b:if cond='data:blog.pageType != "static_page"'>
Kode Widget.... 
</b:if> 

7# Menampilkan widget di semua halaman archive                                          

<b:if cond='data:blog.pageType == "archive"'>
Kode Widget.... 
</b:if> 

8# Menampilkan widget di semua halaman kecuali halaman archive             

<b:if cond='data:blog.pageType != "archive"'>
Kode Widget.... 
</b:if> 

9# Menampilkan widget di halaman tertentu                                                     

<b:if cond='data:blog.pageType == "Url halaman"'>
Kode Widget.... 
</b:if> 

10# Menampilkan widget di semua halaman kecuali satu url tertentu           

<b:if cond='data:blog.pageType != "Url halaman"'>
Kode Widget.... 
</b:if> 

Menemukan ID widget & memasang fungsi b:if

Sebenarnya mudah menemukan ID sebuah widget dan bisa dilakukan dengan berbagai cara. ID widget bisa kita temukan karena sama dengan judul widget yang diberikan. Misalnya widget blog saya (Categories) itu adalah judul widget (title), nah disampingnya ntar ada kode Id='bla-bla-bla'. 


Letak ID widget di template biasanya tersusun sama dengan posisinya pada blog. Anda dapat melihatnya di bagian Layout. Nah jika permasalahannya widget anda tidak mempunyai judul, beri judul saja dulu, nanti bisa dihapus.
<b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>

<!-- only display title if it's non-empty ->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Sekarang mari kita tambahkan fungsi b:if :
 <b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'> 
<!-- only display title if it's non-empty ->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Memasang fungsi b:if pada script

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>$(document).ready(function(){$(&quot;.toggle_container&quot;).hide();$(&quot;.trigger&quot;).click(function(){ $(this).toggleClass(&quot;triggeractive&quot;).next().slideToggle(&quot;slow&quot;); }); });</script>
</b:if>

Memasang fungsi b:if pada CSS

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
Kode CSS anda
</style>
</b:if>

Tips & Last word from admin

Anda terlebih dahulu harus dapat membedakan mana script/css yang hanya berfungsi pada halaman tertentu. Harus mengetahui terlebih dahulu fungsi script/css tersebut. Misalnya saja lihat page navigation (posting baru/posting lama) dibawah postingan saya hilangkan, karena tidak begitu penting menurut saya.

Bagaimana? mengerti cara-cara diatas? Jika Anda masih menghadapi masalah untuk Cara Menampilkan Widget / CSS / Script Pada Halaman Tertentu. Maka jangan ragu untuk bertanya kepada saya. Tinggalkan komentar di bawah posting ini dan saya pasti akan membalas Anda jika ada waktu yang memungkinkan.

Sekian post tentang Cara Menampilkan Widget / CSS / Script Pada Halaman Tertentu.  Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!






Artikel Menarik Lainnya :



28 comments

avatar
06 September, 2013

Untuk dipasangin CSS bisa juga gak mas ?

BalasHapus
avatar
yoyo suharyo Author
06 September, 2013

bisa mas.. maaf saya salah ngasih judul pada bagian memasang kode b:if. sudah ada diatas mas..

BalasHapus
avatar
Anonymous
08 September, 2013

Wah ini dia yang sedang saya butuhkan, saya akan menyembunyikan widget tertentu agar hanya tampil di postingan ^_^ thanks bro, hehehe

From : mestiqui.blogspot.com ^_^

BalasHapus
avatar
15 September, 2013

bermanfaat saya izin membaca yah :)

BalasHapus
avatar
02 October, 2013

makasih gan informasi nya ya,.
ntar kpn2 ane coba deh,.

BalasHapus
avatar
11 October, 2013

nice share..
Ditunggu kunjungannya mas
http://indradp-
share.blogspot.com

BalasHapus
avatar
01 November, 2013

niche-share ditunggu di ikerenki.blogspot.com

BalasHapus
avatar
05 November, 2013

Terima kasih sharingnya mas, bermanfaat banget.
Salam kenal dan kalau sempat mampir balik sekalian mengundang untuk meramaikan launchingnya Direktori Blog Dofollow terbaru dengan submit URl dan artikel gratis :)

BalasHapus
avatar
Anonymous
13 November, 2013

Berarti bisa disetting widget apa saja yang muncul dan tidak pada halaman homepagenya dan halaman artikelnya.

BalasHapus
avatar
Anonymous
15 November, 2013

artikelnya sangat bermanfaat sekali
makasih udah share ya :)

BalasHapus
avatar
08 December, 2013

Thanks gan infonya, bagi saya ini sangat bermanfaat dan ilmu blogging saya bertambah, soalnya masih newbie. Kunbal http://mulapop.blogspot.com

BalasHapus
avatar
30 December, 2013

terima kasih gan atas infonya,. sangat bermanfaat,.
Di tunggu gan kunjungan baliknya http://ekoariw27.blogspot.com/

BalasHapus
avatar
11 January, 2014

Sangat bermanfaat sob untuk blog saya,Soalnya Suka pasang widget banyak :D

BalasHapus
avatar
14 January, 2014

mantab bang isin bork mark bang thank infone n trim dah mampir ke blog ane

BalasHapus
avatar
Anonymous
15 January, 2014

izin praktek ya gan, pokoknya ditunggu postingan berikutnya

BalasHapus
avatar
09 February, 2014

wah,..ternyata disini dia artikel lengkap tentang belajar HTMl, terima kasih ya mas ujang

BalasHapus
avatar
10 February, 2014

apakah cara tsb tidak mengganggu kecepatan loading blog?

BalasHapus
avatar
25 February, 2014

mantap gan artikelnya & tipsnya
Blogger Copast

BalasHapus
avatar
30 March, 2014

Terima kasih informasiny, oh iya kalau tidak keberatan mampir ya ke blog saya, menurut kang Yoyo loading blog saya oke belum... hehe maklum saya newbie :)

BalasHapus
avatar
07 October, 2014

izin blog walking ya gan,, salam kenal dan salam blogger
Cara Mengobati Penyakit Kista

BalasHapus
avatar
20 October, 2014

Salam Mas Ujang.. wow keren tutorial tag kondisionalnya
Saya bisa belajar banyak nih Mas. makasih atas share nya :)

BalasHapus
avatar
20 October, 2014

Ikutan nyimak sambil saya belajar Mas Ujang
Makasih ya atas tutorial yang bermanfaat ini

BalasHapus
avatar
05 December, 2014

Keren sob artikelnya sangat bermanfaat. Terimakasih

BalasHapus
avatar
13 December, 2014

klo satu widget di dua halaman tertentu gmana gan?

BalasHapus
avatar
15 March, 2015

Makasih infonya sob.sangat membantu.

BalasHapus
avatar
22 April, 2015

Bagus, http://penuhmakanan.blogspot.com/

BalasHapus
avatar
Anonymous
17 May, 2016

terimakasih infonya kanda
http://nakama-world.blogspot.co.id/

BalasHapus
avatar
29 September, 2017

LIVECASINO338 HOT GAMES :
BACCARAT*ROULETTE*SICBO*DRAGON TIGER*SLOT GAME
Minimal deposit 25.000,- sudah bisa bermain disemua jenis game
Register/Pendaftaran bisa disini : http://livecasino3381.pkr69.com/

Bonus Rollingan 0.8%
Bonus Referral 3% [SEUMUR HIDUP!]
Proses Deposit dan WD cepat hanya 1 menit!

Contact Us :
BBM : 2AD88032
WA : +855965922558
YM : cs_livecasino338

BalasHapus