Blog Eksperimen

Tampilkan postingan dengan label Navigasi. Tampilkan semua postingan

Tooltip Kustom Otomatis untuk Semua Tautan

Salin kodenya dan letakkan di atas tag </body>

<script type="text/javascript">
//<![CDATA[
// Pure JavaScript Nested Tooltip Replacement for all Anchor Tag
// https://plus.google.com/108949996304093815163/about
(function() {

    var a = document.getElementsByTagName('a');
    var t = document.createElement('span');
        t.id = "tt";
        t.style.position = "absolute";
        t.style.zIndex = 999;
        t.style.backgroundColor = "#FFE13F";
        t.style.border = "1px solid #BC5F05";
        t.style.font = "bold 11px Tahoma,Arial,Sans-Serif";
        t.style.boxShadow = "0 1px 3px rgba(0,0,0,0.4)";
        t.style.padding = "5px 10px";
        t.style.color = "#000";
        t.style.maxWidth = "170px";
        t.style.wordWrap = "break-word";
        t.style.display = "none";
    document.body.appendChild(t);
    var tooltip = document.getElementById('tt');

    function over(e) {
        tooltip.style.display = "block";
        tooltip.innerHTML = this.title;
        tooltip.style.top = (e.pageY + 25) + 'px';
        tooltip.style.left = e.pageX + 'px';
        this.setAttribute('original', this.title);
        this.title = "";

    }

    function out() {
        tooltip.innerHTML = "";
        tooltip.style.display = "none";
        this.title = this.getAttribute('original');
        this.removeAttribute('original');
    }

    for (var i = 0; i < a.length; i++) {
        if (a[i].title) {
            a[i].onmouseover = over;
            a[i].onmouseout = out;
        }
    }

})();
//]]>
</script>

Segitu Saja!

Baca Selengkapnya...

Membuat Blog Pager/Navigasi Halaman Blogspot Melayang

Page Navigasi Melayang

Metode pembuatan blog pager/navigasi halaman melayang ini pada dasarnya sama dengan metode pembuatan navigasi breadcrumb melayang. Ada dua posisi peletakkan yang bisa kamu ambil, yaitu posisi melayang di atas atau di bawah jendela.

Pertama-tama masuklah ke halaman editor HTMLtemplatemu, lalu cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
Letakkan salah satu kode CSS ini di atas kode ]]></b:skin> atau </style>:

Navigasi Melayang di Sebelah Atas

/* 
Copyright September 2011 :: Taufik Nurrohman 
(http://hompimpaalaihumgambreng.bogspot.com) 
*/ 
#hompager           {position:fixed;z-index:1000;top:0;left:0;width:100%;height:24px;padding:5px 0 5px;background:#000;border-bottom:2px solid #999;text-align:left;-webkit-box-shadow:0 0 7px #000;-moz-box-shadow:0 0 7px #000;box-shadow:0 0 7px #000;} 
a .ikon-beranda     {background:transparent url(http://1.bp.blogspot.com/-WWh5YQJeXNI/TmMx8MUXfDI/AAAAAAAAAz0/JW5cUjwzMeg/s1600/Home2.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;float:left;margin-left:15px;opacity:0.7;filter:alpha(opacity=70);} 
.float-right        {float:right;width:100px;margin-right:13px;} 
.float-right span   {display:block;float:right;margin-right:2px;} 
a .ikon-kiri        {background:transparent url(http://3.bp.blogspot.com/-7d2gsBxHw_0/TmMxp8lSpVI/AAAAAAAAAzk/bbvChtbeJIk/s1600/Arrow2%2BLeft.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);} 
a .ikon-kanan       {background:transparent url(http://3.bp.blogspot.com/-udYjYLBXw4A/TmMxqOchFLI/AAAAAAAAAzs/JFOr359xcw0/s1600/Arrow2%2BRight.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);} 
a .ikon-beranda:hover,
a .ikon-kiri:hover,
a .ikon-kanan:hover {opacity:1;filter:alpha(opacity=100);} 
#blog-pager         {display:none !important;} /* menghilangkan blog pager bawaan dari template */

Navigasi Melayang di Sebelah Bawah

/* 
Copyright September 2011 :: Taufik Nurrohman 
(http://hompimpaalaihumgambreng.bogspot.com) 
*/ 
#hompager           {position:fixed;z-index:1000;bottom:0;left:0;width:100%;height:24px;padding:5px 0 5px;background:#000;border-top:2px solid #999;text-align:left;-webkit-box-shadow:0 0 7px #000;-moz-box-shadow:0 0 7px #000;box-shadow:0 0 7px #000;} 
a .ikon-beranda     {background:transparent url(http://1.bp.blogspot.com/-WWh5YQJeXNI/TmMx8MUXfDI/AAAAAAAAAz0/JW5cUjwzMeg/s1600/Home2.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;float:left;margin-left:15px;opacity:0.7;filter:alpha(opacity=70);} 
.float-right        {float:right;width:100px;margin-right:13px;} 
.float-right span   {display:block;float:right;margin-right:2px;} 
a .ikon-kiri        {background:transparent url(http://3.bp.blogspot.com/-7d2gsBxHw_0/TmMxp8lSpVI/AAAAAAAAAzk/bbvChtbeJIk/s1600/Arrow2%2BLeft.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);} 
a .ikon-kanan       {background:transparent url(http://3.bp.blogspot.com/-udYjYLBXw4A/TmMxqOchFLI/AAAAAAAAAzs/JFOr359xcw0/s1600/Arrow2%2BRight.gif) no-repeat left bottom;width:24px;height:24px;border:none !important;opacity:0.7;filter:alpha(opacity=70);} 
a .ikon-beranda:hover,
a .ikon-kiri:hover,
a .ikon-kanan:hover {opacity:1;filter:alpha(opacity=100);} 
#blog-pager         {display:none !important;} /* menghilangkan blog pager bawaan dari template */

Setelah itu temukan kode ini:

<a expr:name='data:post.id'/>

Tip: Tekan CTRL + F lalu ketik expr:name='data:post.id' untuk mempermudah pencarian.

Letakkan kode ini di atasnya:

<div class='hompager' id='hompager'> 
     <a expr:href='data:blog.homepageUrl'><div class='ikon-beranda'/></a> 
     <div class='float-right'> 
          <b:if cond='data:olderPageUrl'> 
               <a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Halaman Berikutnya'><span class='ikon-kanan'/></a> 
          </b:if> 
          <b:if cond='data:newerPageUrl'> 
               <a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Halaman Sebelumnya'><span class='ikon-kiri'/></a> 
          </b:if> 
     </div> 
</div>

Klik Pratinjau untuk melihat hasilnya.

Dalam sebuah template blogspot terkadang terdapat satu atau dua buah kode <a expr:name='data:post.id'/>. Jika apa yang telah kamu lakukan tidak menunjukkan hasil, cobalah untuk meletakkan kode tersebut di atas kode <a expr:name='data:post.id'/> yang kamu temukan berikutnya.

Terakhir tinggal klik Simpan Template.

Baca Selengkapnya...

Membuat Kotak Keterangan Penulis/Author Box di Bawah Posting

Mungkin kalian sudah pernah melihat kotak kecil berisi keterangan dan pesan penulis disertai judul posting dan tanggal terbit yang biasa ditampilkan di bawah posting, namun di sini Saya hanya ingin menawarkan tampilan yang sedikit berbeda seperti ini:

Di sini Saya telah menerapkan beberapa kode perwakilan yang umum terdapat di dalam sebuah widget posting seperti kode perwakilan judul, perwakilan link judul, perwakilan tanggal terbit dan nama penulis, sehingga kamu tidak perlu lagi menuliskan nama dan URL secara manual, karena kode-kode tersebut nantinya akan menyesuaikan diri berdasarkan data-data yang telah tersimpan menurut jenisnya. Yang perlu kamu lakukan hanya mengganti gambar dan ulasannya saja.

Pertama-tama, masuklah ke halaman editor HTML templatemu kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.

Temukan kode ini:

<div class='post-footer'>

TIP: Tekan CTRL + F lalu ketik class='post-footer' untuk mempermudah pencarian.

Salin kode ini, kemudian letakkan tepat di atas kode tadi:

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div class='admin-tulisan'>
          <h4>Penulis: <a expr:href='data:blog.homepageUrl'><data:post.author/></a> Lokasi: Sumpiuh, Banyumas</h4>
          <div class='kontainer'>
               <img src='http://1.bp.blogspot.com/_yGa4b5VGx6w/Skrkk_0ByLI/AAAAAAAAAC8/gJy0GYR_M08/S220/toilet.jpeg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a>, diterbitkan oleh <data:post.author/> pada hari <data:post.dateHeader/>. Semoga artikel ini dapat menambah wawasan Anda. <data:post.author/> adalah seorang penulis mahadahsyat yang masih suka pipis di celana dan maunya nenen sama mama. Suka minta jajan yang aneh-aneh dan suka kentut di depan mikrofon.
               <div style='clear:both;'/>
          </div>
     </div>
</b:if>
<!-- Akhir Kotak Admin -->

Sekarang gulung formulirnya ke atas, dan segera temukan kode ]]></b:skin> atau </style>. Letakkan kode ini tepat di atasnya:

.admin-tulisan {
  display:block;
  width:98%;
  background:#CFE2E0;
  border:2px solid #fff;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  padding:0;
  margin:30px auto 10px auto;
  font:normal 11px Arial, Sans-Serif;
  color:#222;
}

.admin-tulisan .kontainer {padding:5px;}

.admin-tulisan h4 {
  background:#8A9C04;
  border:none;
  border-bottom:1px solid #699019;
  color:#fff;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
  font:bold 11px Arial,Sans-Serif;
  padding:5px 10px;
  margin:0 0 0 0;
  display:block;
}

.admin-tulisan h4 a {color:#FEEA83;}

.admin-tulisan img {
  width:70px;
  height:70px;
  margin:0 10px 0 0;
  float:left;
  border:1px solid #954B02;
  padding:4px;
  background:#C36702;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

Ganti kode yang Saya beri warna merah dengan URL foto profilmu. Untuk mendapatkan URL foto profil caranya mudah. Cukup klik kanan pada foto profil di dasbormu, kemudian pilih copy image location:

Untuk selebihnya Saya yakin kamu bisa menyesuaikannya sendiri.
Klik Simpan Template.

Baca Selengkapnya...

Back To Top Smooth Scroll dengan JQuery

Smooth scroll back to top, adalah sebuah alternatif lain selain pembuatan elemen back to top biasa yang hanya akan mengantarkan Anda menuju ke atas saja tanpa adanya pemberian efek cantik. Untuk membuat tombol back to top biasa caranya sangat sederhana, yaitu dengan cara membuat sebuah tag hyperlink yang memiliki nilai href="#", sekedar untuk mengarahkan Anda ke atas. Intinya adalah, setiap kali Anda membuat sebuah link kosong, maka link tersebut secara otomatis akan membawa Anda menuju ke atas setiap kali Anda mengekliknya,

Tapi jika situs Anda sudah dilengkapi dengan JQuery, kenapa masih mencoba untuk menggunakan cara lama? Padahal sebuah paket JQuery bisa saja membuat puluhan efek dengan cara yang sangat singkat. Anda bisa melihat cara kerja sistem ini dengan mengeklik tombol di bawah ini:

Untuk membuatnya, pertama-tama masuklah ke Tab Rancangan kemudian tambahkan sebuah elemen halaman HTML/JavaScript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"/> 
<script type="text/javascript"> 
var scrolltotop={setting:{startline:100,scrollto:0,scrollduration:1e3,fadeduration:[500,100]},controlHTML:'<img src="http://4.bp.blogspot.com/-jqnu-lpoKyw/Tj98e4pj8eI/AAAAAAAAAkI/Idt4nuGUoIs/s1600/arrowTop.png" style="border:0;background:transparent;padding:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;" />',controlattrs:{offsetx:5,offsety:5},anchorkeyword:"#top",state:{isvisible:false,shouldvisible:false},scrollup:function(){if(!this.cssfixedsupport)this.$control.css({opacity:0});var a=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);if(typeof a=="string"&&jQuery("#"+a).length==1)a=jQuery("#"+a).offset().top;else a=0;this.$body.animate({scrollTop:a},this.setting.scrollduration)},keepfixed:function(){var a=jQuery(window);var b=a.scrollLeft()+a.width()-this.$control.width()-this.controlattrs.offsetx;var c=a.scrollTop()+a.height()-this.$control.height()-this.controlattrs.offsety;this.$control.css({left:b+"px",top:c+"px"})},togglecontrol:function(){var a=jQuery(window).scrollTop();if(!this.cssfixedsupport)this.keepfixed();this.state.shouldvisible=a>=this.setting.startline?true:false;if(this.state.shouldvisible&&!this.state.isvisible){this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]);this.state.isvisible=true}else if(this.state.shouldvisible==false&&this.state.isvisible){this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]);this.state.isvisible=false}},init:function(){jQuery(document).ready(function(a){var b=scrolltotop;var c=document.all;b.cssfixedsupport=!c||c&&document.compatMode=="CSS1Compat"&&window.XMLHttpRequest;b.$body=window.opera?document.compatMode=="CSS1Compat"?a("html"):a("body"):a("html,body");b.$control=a('<div id="topcontrol">'+b.controlHTML+"</div>").css({position:b.cssfixedsupport?"fixed":"absolute",bottom:b.controlattrs.offsety,right:b.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"Kembali ke Atas"}).click(function(){b.scrollup();return false}).appendTo("body");if(document.all&&!window.XMLHttpRequest&&b.$control.text()!="")b.$control.css({width:b.$control.width()});b.togglecontrol();a('a[href="'+b.anchorkeyword+'"]').click(function(){b.scrollup();return false});a(window).bind("scroll resize",function(a){b.togglecontrol()})})}};scrolltotop.init();
</script> 
<!-- Sumber kode: http://www.dynamicdrive.com -->

Klik Simpan.

Kode yang Saya beri warna merah adalah JQuery, jika template Anda sudah dilengkapi dengan JQuery, Anda boleh membuang script tersebut. Sedangkan kode yang Saya beri warna biru adalah alamat berkas gambar. Jika Anda menghendaki tampilan tombol back to top yang berbeda, Anda bisa mengganti URL tersebut dengan URL gambar-gambar di bawah ini. (Klik pada gambar yang dikehendaki lalu salin URL yang tampil pada address bar untuk menggantikan URL tersebut):

Baca Selengkapnya...

Membuat Blog Pager/Navigasi Halaman Blogspot

Gambar Navigasi Halaman

Untuk menciptakan navigasi halaman blog dengan tampilan yang luar biasa ganteng seperti ini, pertama-tama masuklah ke tab Rancangan kemudian pilih Edit HTML.
Cari kode yang tampak seperti ini: ]]></b:skin> atau seperti ini: </style>

Salin kode di bawah ini, kemudian letakkan tepat di atasnya:

#blog-pager {line-height:40px !important;} 

#blog-pager-older-link a,
#blog-pager-newer-link a,
#blog-pager a.home-link { 
  padding:5px 10px; 
  margin:2px 7px; 
  text-align:center; 
  background:#278100 url(http://4.bp.blogspot.com/-445SkQ6EG9g/TkIRpduys0I/AAAAAAAAAqI/1uUZnx_-3FY/s1600/rumput.png) repeat-x 0 -1px; 
  border:2px solid #fff; 
  font:bold small Arial,Sans-Serif; 
  text-decoration:none; 
  color:#fff; 
  text-shadow:1px 1px 1px #278100,0 0 5px #278100; 
  -webkit-box-shadow:0 1px 3px #aaa; 
  -moz-box-shadow:0 1px 2px #aaa; 
  box-shadow:0 1px 2px #aaa; 
  -webkit-border-radius:.5em; 
  -moz-border-radius:.5em; 
  border-radius:.5em; 
} 

#blog-pager-older-link a:hover,
#blog-pager-newer-link a:hover,
#blog-pager a.home-link:hover { 
  position:relative; 
  top:-1px; 
  color:#000; 
  background-position:0 0; 
} 

#blog-pager-older-link a:active,
#blog-pager-newer-link a:active,
a.home-link:active { 
  position:relative; 
  top:1px; 
  background-position:0 -2px; 
}

Klik Simpan Template.

Warna dominan yang disarankan untuk mengimbangi tampilannya adalah: #f5f8d8
Hasil tampilan akhirnya kira-kira akan tampak seperti ini:

Beberapa Gambar yang bisa digunakan sebagai background :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnq-NAO7dql6PD0Dj6-ivSq8Yfc68M57ghVU1KzioB3QJyaxb_CsLRXzdcefbUtqrNTHNZ0KB2NGS3Nm240L_uY7Li2QbhbgO8na6cfoGQWq3Bv6jDpiAG5WX1I1v6z1KiqplUnMT5xpEb/s320/BGMenu1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs0L9pg41RqJx9EZZ9DwgH4ylF35aXAmnXDSXXthmTJdHGs1J42SLps7xjQi0EZbFv4UM36HnOMXBK3aCz1qlIFyhW-O9meyMFbWWDbkCnGfwnKSVUomtX_CsZUXo2niyp7lXHJAlL_hH5/s320/rumput.png

Baca Selengkapnya...

Navigasi Breadcrumb Versi 2 - Melayang

Merasa bosan dengan tampilan navigasi breadcrumb yang begitu-begitu saja? Dengan memanfaatkan deklarasi position:fixed; kita bisa membuat sebuah objek (dalam hal ini navigasi breadcrumb) menjadi melayang. Untuk membuatnya lakukan beberapa langkah berikut ini:

Masuk ke tab Rancangan kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
Salin kode pemodel di bawah ini, kemudian letakkan di atas kode ]]></b:skin> atau </style>:

.alaihumcrumb { 
  position:fixed; 
  z-index:1000; 
  top:0; 
  left:0; 
  background:#333; 
  width:98%; 
  color:#ccc; 
  border-bottom:2px solid #999; 
  padding:1px 1% 1px 1%; 
  -webkit-box-shadow:0 0 7px #000; 
  -moz-box-shadow:0 0 7px #000; 
  box-shadow:0 0 7px #000; 
} 

.alaihumcrumb a,
.alaihumcrumb a:visited,
.alaihumcrumb a:active { 
  color:#fff; 
} 

.alaihumcrumb span.kanan { 
  float:right; 
}

Kemudian carilah kode yang tampak seperti ini:

<a expr:name='data:post.id'/>

TIP: tekan CTRL + F kemudian ketik expr:name='data:post.id' untuk mempermudah pencarian.

Salin kode di bawah ini, kemudian letakkan tepat di atas kode <a expr:name='data:post.id'/>:

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <div class='alaihumcrumb'> 
        <a expr:href='data:blog.homepageUrl'>Beranda</a> &#187; 
        <b:if cond='data:post.labels'> 
            <b:loop values='data:post.labels' var='label'> 
                <a expr:href='data:label.url' rel='tag'> 
                    <data:label.name/> 
                </a> 
                <b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> 
            </b:loop> 
        </b:if> &#187; <data:post.title/> 
        <span class='kanan'> 
            Konten Lain di Sini 
        </span> 
    </div> 
</b:if>

Dalam sebuah template blogspot terkadang terdapat satu atau dua buah kode <a expr:name='data:post.id'/>. Jika apa yang telah kamu lakukan tidak menunjukkan hasil, cobalah untuk meletakkan kode tersebut di atas kode <a expr:name='data:post.id'/> yang kamu temukan berikutnya.
Klik Simpan Template.

Sedikit Penyesuaian:Kamu bisa mengganti Beranda dengan Home atau yang lainnya. Letakkan juga konten lain seperti jam dinding, jumlah komentar, jumlah posting atau yang lainnya di dalam wilayah kekuasaan <span class='kanan'> ... </span>

Baca Selengkapnya...

Navigasi Breadcrumb Versi 1

Contoh Gambar Breadcrumb Versi 1

Breadcrumb merupakan suatu bentuk navigasi yang menunjukkan konten berada dalam suatu kategori yang mempermudah pembaca mengerti dimana letaknya dan tema persoalan artikel tersebu. Langsung saja mulai Tutorial Membuat Navigasi Breadcrumb Versi 1

Langkah 1 Login ke Blogger
Masuk ke "Rancangan - Edit HTML" Cheklist "Expand Template Widget"
Langkah 2 Letakan kode dibawah ini sebelum kode ]]></b:skin>

.breadcrumbs{
margin-left:10px;
padding: 5px 0;
border-bottom: 1px dotted;
line-height:1.4em;
}

Langkah 3 Kemudian cari kode <b:include data='top' name='status-message'/> biasanya ada 2 kode yang serupa, dan masing-masing diatasnya letakkan kode berikut:

<b:include data='posts' name='breadcrumb'/>

Langkah 4 Letakkan kode dibawah ini diatas kode <b:includable id='main' var='top'>

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if></div></b:if></b:if>
</b:if>
</b:if>
</b:if>
</b:includable>