Dewa Blogger: Hasil penelusuran untuk tag-kondisional-blogger-terbaru

Halaman

    Social Items

Home / Hasil penelusuran untuk tag-kondisional-blogger-terbaru
Berikut ini yaitu Tag Kondisional Blogger Terbaru yang dapat sahabat tambahkan pada tema untuk membungkus arahan tertentu.

yang dapat sahabat tambahkan pada tema untuk membungkus arahan tertentu Tag Kondisional Blogger Terbaru

Tag Kondisional Halaman Utama


Versi baru

<b:if cond='data:view.isHomepage'> … </b:if>

Versi lama

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

Tag Kondisional Halaman Index


Versi baru

<b:if cond='data:view.isMultipleItems'> … </b:if>

Versi lama

<b:if cond='data:blog.pageType == "index"'> … </b:if>

Tag Kondisional Halaman Item


Versi baru

<b:if cond='data:view.isSingleItem'> … </b:if>

Versi lama

<b:if cond='data:blog.pageType in ["item", "static_page"]'> … </b:if>

Tag Kondisional Halaman Postingan


Versi baru

<b:if cond='data:view.isPost'> … </b:if>

Versi lama

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

Tag Kondisional Halaman Statis


Versi baru

<b:if cond='data:view.isPage'> … </b:if>

Versi lama

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

Tag Kondisional Halaman Label


Versi baru

<b:if cond='data:view.isLabelSearch'> … </b:if>

Versi lama

<b:if cond='data:blog.searchLabel'> … </b:if>

Tag Kondisional Halaman Arsip


Versi baru

<b:if cond='data:view.isArchive'> … </b:if>

Versi lama

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

Tag Kondisional Halaman Pencarian


Versi baru

<!-- Termasuk halaman pencarian label --> <b:if cond='data:view.isSearch'> … </b:if>  <!-- Hanya halaman pencarian --> <b:if cond='data:view.isSearch and !data:view.isLabelSearch'> … </b:if>

Versi lama

<b:if cond='data:blog.searchQuery'> … </b:if>

Tag Kondisional Halaman Kesalahan / Error 404


Versi baru

<b:if cond='data:view.isError'> … </b:if>

Versi lama

<b:if cond='data:blog.pageType == "error_page"'> … </b:if>

Tag Kondisional Halaman Pratinjau


Versi baru

<b:if cond='data:view.isPreview'> … </b:if>

Versi lama

<!-- Tidak ada -->

Tag Kondisional Blogger Terbaru

Beberapa Fungsi Tag Kondisional Pada Widget - Ada beberapa trik untuk menyembunyikan elemen blog baik itu di halaman home / beranda, postingan, ataupun halaman statis ialah dengan menambahkan instruksi tag kondisional di setiap elemen yang ingin anda sembunyikan.

Beberapa Fungsi Tag Kondisional Pada Widget Beberapa Fungsi Tag Kondisional Pada Widget

Untuk versi terbaru dari tag kondisional blogger, dapat sahabat cek di sini Tag Kondisional Blogger Terbaru

Contoh penerapan : 

<b:if cond='data:blog.pageType != "static_page"'> ..... Isi konten yang akan di bungkus tag kondisional (Konten akan disembunyikan di halaman statis) ..... </b:if>

Bukan hanya menyembunyikan suatu elemen tapi dapat juga untuk menampilkan elemen tertentu hanya di satu halaman yang anda tentukan.

Contoh penerapan : 

<b:if cond='data:blog.url == data:blog.homepageUrl'> ..... Isi konten yang akan di bungkus tag kondisional (Konten hanya akan tampil di halaman beranda) ..... </b:if>

untuk lebih lengkapnya silahkan lihat beberapa fungsi tag kondisional untuk widget di bawah ini :

1. Menampilkan widget hanya di halaman beranda


<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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>

2. Menampilkan widget hanya di halaman postingan


<b:widget id='HTML1' locked='false' title='Recent Posts' 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 != ""'> <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>

3. Menampilkan widget hanya di halaman tertentu


<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.url == "URL Anda"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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>

Catatan : Ganti URL anda dengan alamat yang anda inginkan.

4. Menyembunyikan widget hanya di halaman tertentu


<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.url != " URL anda "'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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>

5. Menampikan widget di halaman statis


<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.pageType == "static_page"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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>

5. Menyembunyikan widget di halaman statis


<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.pageType != "static_page"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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>

7. Menampikan widget hanya di halaman arsip


<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.pageType == "archive"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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>

8. Menampikan widget hanya di halaman index


<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.pageType == "index"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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>

9. Menyembunyikan widget di halaman index


<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.pageType != "index"'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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>

Penerapan pada konten tertentu


Ini merupakan tag kondisional yang ingin Anda tambahkan pada kondisi tertentu, ibarat HTML, CSS, Javascript, dll.

Tag kondisional untuk label tertentu


<b:if cond='data:blog.searchLabel'>   <div class='arlinadesign'>KONTEN DI SINI</div> </b:if>

Contoh :

<b:if cond='data:blog.searchLabel == "NAMA LABEL"'>   <div class='arlinadesign'>KONTEN DI SINI</div> </b:if>

Tag kondisional untuk halaman pencarian tertentu


<b:if cond='data:blog.searchQuery'>   <div class='arlinadesign'>KONTEN DI SINI</div> </b:if>

Contoh :

<b:if cond='data:blog.searchQuery == "NAMA LABEL"'>   <div class='arlinadesign'>KONTEN DI SINI</div> </b:if>

Setelah anda menambahkan tag kondisional di atas, simpan template dan lihat hasilnya.

Tidak sebatas widget, dengan tag kondisional anda pun dapat membungkus elemen lain ibarat Script, CSS, dan HTML di dalam template untuk alasan mempercepat blog dengan mengurangi Script yang termuat di suatu halaman atau alasan privasi lainnya.

Semoga bermanfaat.

Beberapa Fungsi Tag Kondisional Pada Widget

Menandai Post Label Tertentu dengan Tag Kondisional - Seperti yang kita tahu sekarang Blogger mengupdate fitur-fitur terbaru yang dapat kita manfaatkan biar acara blogging menjadi semakin menarik. Salah satu fitur barunya yakni fitur Lambda Expression yang dapat mempersingkat penuisan markup pada tag kondisional tertentu sehingga akan menjadi lebih sederhana dan menghemat penulisan kode.

Menandai Post Label Tertentu dengan Tag Kondisional Menandai Post Label Tertentu dengan Tag Kondisional

Sebagai pola pada tutorial blog kali ini aku akan memanfaatkan fitur tersebut pada post label di halaman index.

Disini kita dapat menambahkan icon, gambar maupun tulisan. Pada pola ini aku akan memperlihatkan post label dengan icon fontawesome ibarat gambar di bawah ini.

Menandai Post Label Tertentu dengan Tag Kondisional Menandai Post Label Tertentu dengan Tag Kondisional

Bukan hanya ditambahkan pada satu label saja, teman juga dapat menambahkan beberapa label tertentu dan membedakan tampilannya dengan mudah.

Bagaimana cara membuatnya?


Di bawah ini yakni arahan yang dipakai untuk memunculkan icon kalau teman memilih label tertentu pada postingan. arahan di bawah ini dapat teman simpan sebelum arahan epilog head.

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'> //<![CDATA[ //Post Label function label_pilihan(e){labelku=new Array,labelku[1]="<div class='badge badge1'><div class='badge-img'><i class='fa fa-star'></i></div></div>",labelku[2]="<div class='badge badge2'><div class='badge-img'><i class='fa fa-video-camera'></i></div></div>",labelku[3]="<div class='badge badge3'><div class='badge-img'><i class='fa fa-camera'></i></div></div>",labelku[4]="<div class='badge badge4'><div class='badge-img'><i class='fa fa-music'></i></div></div>",labelku[5]="<div class='badge badge5'><div class='badge-img'><i class='fa fa-paint-brush'></i></div></div>","Hot"==e&&document.write(labelku[1]),"Video"==e&&document.write(labelku[2]),"Gambar"==e&&document.write(labelku[3]),"Musik"==e&&document.write(labelku[4]),"Lukisan"==e&&document.write(labelku[5])} //]]> </script> </b:if> </b:if>

Kode yang ditandai merupakan nama-nama label yang ditentukan dan arahan yang dapat teman ganti nantinya dengan kreasi sendiri.

Kode pemanggil

<b:loop values='data:post.labels' var='label'> <script type='text/javascript'>label_pilihan(&quot;<data:label.name/>&quot;);</script> </b:loop>

Untuk arahan pemanggilnya dapat teman simpan di dalam markup post.

<b:includable id='post' var='post'>...</b:includable>

Atau dapat juga disimpan di dalam markup ini

<b:includable id='main' var='top'>...</b:includable>

CSS

Agar menciptakan tampilannya lebih menarik, teman dapat menambahkan CSS ibarat di bawah ini

/* Post Label */ .badge{background:#95a5a6;color:#fff;position:absolute;font-weight:normal;line-height:1;bottom:0;right:0;left:0;display:block;text-align:center;width:100%;height:50px;line-height:50px;font-size:18px;z-index:1;transition:all .3s} .badge1{background:#e89c0f;opacity:.98} .badge2{background:#40d47e;opacity:.98} .badge3{background:#3498db;opacity:.98} .badge4{background:#1abc9c;opacity:.98} .badge5{background:#95a5a6;opacity:.98} .post:hover .badge{color:rgba(255,255,255,.6);font-size:44px;height:100%;line-height:100%} .post:hover .badge-img{margin:85px 0 0 0}

Cara kerja dari arahan di atas yakni kalau teman memperlihatkan label pada postingan tertentu, maka otomatis akan memunculkan icon yang sudah dimodifikasi ibarat pola di bawah ini.


Semoga dengan pola Menandai Post Label Tertentu dengan Tag Kondisional yang sudah aku bagikan akan memperlihatkan wangsit bagi teman semua. Terima kasih.

Menandai Post Label Tertentu Dengan Tag Kondisional

Kemarin ada yang request Cara Membuat Slot Iklan Sebelum dan Sesudah Isi Postingan di Blogger. Sebenarnya caranya sangat mudah, namun bagi teman yang sudah mengetahui caranya tidak perlu lagi mengikuti cara ini alasannya yaitu teman sudah melaksanakan cara ini sebelumnya.

Cara Membuat Slot Iklan Sebelum dan Sesudah Isi Postingan di Blogger Cara Membuat Slot Iklan Sebelum dan Sesudah Isi Postingan

Bagi teman yang ingin menampilkan iklan baik itu iklan banner atau unit iklan AdSense khusus menyerupai In-article Ads di dalam postingan dapat ikuti cara di bawah ini.

Cara Membuat Slot Iklan Sebelum dan Sesudah Isi Postingan


Pertama buka dasbor Blogger > klik hidangan Tema dan Edit HTML > Cari arahan ini di dalam template

<data:post.body/>

Atau menyerupai ini

<p><data:post.body/></p>

Lebih tepatnya, cari arahan <data:post.body/> di dalam markup ini

<b:includable id='post' var='post'> .... .... <data:post.body/> .... .... </b:includable>

Jika di dalam template teman mempunyai beberapa arahan <data:post.body/> cari arahan tersebut yang dibungkus dengan tag kondisional halaman postingan. Contohnya menyerupai ini

<b:if cond='data:blog.pageType == "item"'> <data:post.body/> </b:if>

Bisa juga diganti dengan format Tag Kondisional Blogger Terbaru

Jika tidak ada, teman hanya perlu menambahkan arahan gres menyerupai ini

<b:if cond='data:blog.pageType == "item"'> <data:post.body/> </b:if>

Selanjutnya tambahkan arahan di bawah ini untuk membungkus banner atau arahan iklannya

<b:if cond='data:blog.pageType == "item"'> <div class='kabaradd qu'> <!-- Your Ad Here --> </div> <data:post.body/> <div class='kabaradd'> <!-- Your Ad Here --> </div> </b:if>

Ganti arahan yang ditandai dengan banner atau arahan iklan sobat. Contohnya menyerupai ini, di sini aku memakai arahan In-article AdSense

<b:if cond='data:blog.pageType == "item"'> <div class='kabaradd qu'> <ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxx' data-ad-format='fluid' data-ad-layout='in-article' data-ad-slot='xxxxxxx' style='display:block; text-align:center;'/> <script> (adsbygoogle = window.adsbygoogle || []).push({});          </script> </div> <data:post.body/> <div class='kabaradd'> <ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxx' data-ad-format='fluid' data-ad-layout='in-article' data-ad-slot='xxxxxxx' style='display:block; text-align:center;'/> <script> (adsbygoogle = window.adsbygoogle || []).push({});          </script> </div> </b:if>

Tambahkan juga arahan CSS di bawah ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> .kabaradd{margin:20px auto 0 auto} .kabaradd.qu{margin:20px auto} </style> </b:if>

Selesai, klik tombol Simpan tema di editor template.

Demikian tips dari perihal Cara Membuat Slot Iklan Sebelum dan Sesudah Isi Postingan di Blogger. Semoga bermanfaat dan wassalam.

Cara Menciptakan Slot Iklan Sebelum Dan Setelah Isi Postingan

Pada postingan kali ini akan membuatkan sebuah widget Featured Slider dari Owl Carousel. Widget ini berkhasiat untuk menampilkan postingan terbaru menurut label dengan animasi slider yang halus dan sudah mendukung tampilan responsive.

akan membuatkan sebuah widget Featured Slider dari Cara Memasang Featured Slider Keren di Blogger

Widget ini mungkin kurang cocok bagi sahabat yang sangat "menjunjung tinggi" dengan kecepatan, alasannya alasannya yaitu memang akan membebani loading blog... Selalu ada harga yang mesti dibayar untuk sebuah keindahan dalam hal apapun dan itu sepadan, iya kan? Namun bagi sahabat yang tidak terlalu mementingkan hal tersebut dan kebetulan sedang mencari serta ingin memasang widget ini di blognya, mari kita simak Cara Memasang Featured Slider Keren di Blogger di bawah ini.

Cara Memasang Featured Slider Keren di Blogger


Sebelum melaksanakan tips di bawah ini, widget ini hanya dapat berjalan dengan baik dengan jquery library versi 2 ke atas.

Kaprikornus bagi sahabat yang ingin memasang isyarat ini, kalau di templatenya memakai jquery library versi ini

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Ganti terlebih dahulu dengan versi ini

https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js

Perlu diperhatikan, mungkin ada widget di template yang tidak akan berjalan dengan baik kalau sudah diganti ke versi 3.1.1.

Kode yang akan aku bagikan ini juga memakai ikon dari Fontawesome, kalau belum ditambahkan. Tambahkan isyarat di bawah ini sebelum </head> pada Template editor.

<script type='text/javascript'> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); //]]> </script>

Sudah selesai? Lanjut... Pertama buka dasbor Blogger > Klik hidangan Tema dan Edit HTML > Tambahkan isyarat ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style id='owl-carousel' type='text/css'> *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .ct-wrapper{padding:0;position:relative;max-width:970px;width:auto;margin:20px auto} #featured-slider h2.title,#featured_slider .widget h2.title{display:none} #featured_slider{margin:0 0 30px} .slider-wrappper{max-width:970px;margin:0 auto;padding:0} .owl_carouselle.owl-carousel.owl-loaded{margin:0 0 3em} .slider-item{position:relative;height:100%} .slider-item:before{display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:#2d3436;opacity:.4;z-index:1} a.slider-image{height:100%} .thumb.overlay{height:200px} .post-descript{background:#fff;position:absolute;bottom:-30px;left:8%;right:8%;z-index:99;padding:25px;box-shadow:0 3px 10px rgba(0,0,0,0.1);border-radius:6px;text-align:center;transition:all .3s} .slider-item:hover .post-descript{box-shadow:0 2px 10px rgba(0,0,0,0.1)} .slider-wrapp .post-inner{padding:0 40px;margin:auto} .slider-item h2.post-title{font-size:24px;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .slider-item h2.post-title a{color:#000;transition:all .3s} .slider-item h2.post-title a:hover{color:#aaa} .slider-item .post-date{display:inline-block;color:#aaa;font-size:10px;margin:10px auto 0 auto;text-transform:uppercase} .slider-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:3px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s} .slider-item .post-tag a:hover{background:#000;color:#fff} .feat-home .post-tag a,.feat-home a,.feat-home div,.feat-home h2 a{color:#fff} .featured-posts{display:inline-block;width:100%} .feature-item{position:relative;display:inline-block;float:left;width:24.2%;margin:0 10px 0 0} .feature-item:last-child{margin:0} .feature-item .thumb.overlay{height:150px;width:100%;position:static} .feature-item .thumb.overlay a.slider-image{} .feature-item .post-descript{background:#fff;position:static;height:100px;margin:auto;border-radius:0;box-shadow:0 2px 10px rgba(0,0,0,0.1);padding:10px;overflow:hidden;transition:all .3s} .feature-item .post-descript:before{content:&#39;&#39;;position:absolute;bottom:0;left:0;right:0;height:30px;background-image:linear-gradient(to top,#fff,rgba(255,255,255,0));background:linear-gradient(to left,#ffffff 0,#ffffff 100%,rgba(255,255,255,0) 100%);overflow:hidden} .feature-item:hover .post-descript{box-shadow:0 1px 5px rgba(0,0,0,0.1)} .feature-item h2.post-title{font-size:14px;margin:auto;line-height:normal;font-weight:400} .feature-item h2.post-title a{color:#000} .feature-item:hover h2.post-title a{color:#aaa} .feature-item .post-meta{margin:0} .feature-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:2px 8px;font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s} .feature-item .post-tag a:hover{background:#000;color:#fff} .feat-home{height:320px;margin:0 0 50px;position:relative} .feat-home:before,.slider-item:before{content:&quot;&quot;;right:0} .feat-home:before{display:block;position:absolute;top:0;width:100%;height:100%;background:#000;opacity:.35;z-index:1} .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative} .owl-carousel{display:none;width:100%;z-index:1} .owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden} .owl-carousel .owl-stage:after{content:&quot;.&quot;;display:block;clear:both;visibility:hidden;line-height:0;height:0} .owl-carousel .owl-stage-outer{position:relative;-webkit-transform:translate3d(0,0,0)} .owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)} .owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none} .owl-carousel .owl-item img{display:block;width:100%} .owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none} .no-js .owl-carousel,.owl-carousel.owl-loaded{display:block} .owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .owl-carousel.owl-loading{opacity:0;display:block} .owl-carousel.owl-hidden{opacity:0} .owl-carousel.owl-refresh .owl-item{visibility:hidden} .owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .owl-carousel.owl-grab{cursor:move;cursor:grab} .owl-carousel.owl-rtl{direction:rtl} .owl-carousel.owl-rtl .owl-item{float:right} .owl-carousel .animated{animation-duration:1s;animation-fill-mode:both} .owl-carousel .owl-animated-in{z-index:0} .owl-carousel .owl-animated-out{z-index:1} .owl-carousel .fadeOut{animation-name:fadeOut} .owl-height{transition:height .5s ease-in-out} .owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease} .owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d} .owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000} .owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(https://4.bp.blogspot.com/-9jaG9YO21Qs/W9rimdnu-mI/AAAAAAAACyQ/Tcv3-DtVm9kOlk73vTnBG6x_1a60wchuwCLcBGAs/s1600/play-icon.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease} .owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)} .owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none} .owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease} .owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} .owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent} .owl-theme .owl-nav{margin-top:10px} .owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px} .owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none} .owl-theme .owl-nav .disabled{opacity:.5;cursor:default} .owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px} .owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1} .owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px} .owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} .owl-carousel .owl-item{height:420px;box-shadow:0 20px 10px -15px rgba(0,0,0,0.1)} .owl-prev{left:20px;transform:translate(-50px,0)}.owl-next{right:20px;transform:translate(50px,0)} .owl-prev,.owl-next{color:#fff;font-size:36px;height:65px;line-height:65px;padding:0 14px;position:absolute;top:42%;visibility:hidden;opacity:0;transition:all .3s} .owl-nav button.owl-prev,.owl-nav button.owl-next{background:none;border:0} .owl-carousel:hover .owl-prev,.owl-carousel:hover .owl-next{opacity:1;visibility:visible;transform:translate(0,0)} #HTML33 .widget-content{overflow:visible} @keyframes fadeOut{0%{opacity:1}100%{opacity:0}} @media screen and (max-width: 768px){ .feature-item{width:50%;margin:0 auto 15px auto}} @media screen and (max-width: 640px){ .owl-prev,.owl-next{top:18%} .owl-carousel .owl-item{height:auto} .post-descript{padding:15px 10px;left:5%;right:5%} .slider-wrapp .post-inner{padding:0 10px} .slider-item h2.post-title{font-size:16px} .feature-item{display:inline-block;float:none;width:100%;margin:0 auto 15px auto}} @media screen and (min-width:580px){.thumb.overlay{display:block;position:absolute;width:100%}.thumb.overlay{height:100%;top:0;left:0;bottom:0}} </style>

Dan isyarat ini

<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ function postarea4(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,postnum4<=e.feed.entry.length?maxpost=postnum5:maxpost=e.feed.entry.length,document.write('<div class="ct-wrapper"><div class="owl_carouselle owl-carousel">');for(var t=0;t<maxpost;t++){for(var r,i,l=e.feed.entry[t],n=l.title.$t,o="",c=0;c<e.feed.entry[t].category.length;c++)o=o+'<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>",i='<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>";if(t==e.feed.entry.length)break;for(var m=0;m<l.link.length;m++)if("alternate"==l.link[m].rel){r=l.link[m].href;break}for(m=0;m<l.link.length;m++)if("replies"==l.link[m].rel&&"text/html"==l.link[m].type){l.link[m].title.split(" ")[0];break}if("content"in l)var g=l.content.$t;else if("summary"in l)g=l.summary.$t;else g="";postdate=l.published.$t,j>imgr.length-1&&(j=0),img[t]="",s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),k=s.indexOf('"',b+5),d=s.substr(b+5,k-b-5),-1!=a&&-1!=b&&-1!=k&&""!=d&&(img[t]=0==t?'<img class="owl-lazy" min-width="620" min-height="240" class="odd-img" src="'+d+'"/>':'<img class="alignright" min-height="100" src="'+d+'" width="150"/>');for(var f=[1,2,3,4,5,6,7,8,9,10,11,12],p=["January","February","March","April","May","June","July","August","September","October","November","December"],h=postdate.split("-")[2].substring(0,2),u=postdate.split("-")[1],y=postdate.split("-")[0],v=0;v<f.length;v++)if(parseInt(u)==f[v]){u=p[v];break}var k=e.feed.entry[t].content.$t,A=(v=$("<div>").html(k)).find("img:first").attr("src"),w=e.feed.entry[t].media$thumbnail.url;-1!=w.indexOf("img.youtube.com")&&(w=e.feed.entry[t].media$thumbnail.url.replace("default","maxresdefault")),w=w.replace("/s72-c/","/s1600/");k="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBnWAsCRJXc1-Gwe5y09uRnlrtE94Pt1UEvjI860ahAe6nEmiH4M8q4AcNUxMyh4RAHvS-9T0cyOEkfig5CKDgDMI3qDpsx-oXxeW7Jfmu4qPEhyphenhyphenXB63g0dWgAuZGZub0xxp8QLhEV-cg/s1600/image-not-found-4a963b95bf081c3ea02923dceaeb3f8085e1a654fc54840aac61a57a60903fef.png";if(void 0===A)if(e.feed.entry[t].media$thumbnail)var x='<a href="'+r+'" class="slider-image" style="background:url('+w+') no-repeat center center;background-size: cover;width: 100%;height: 420px;display:block;image-rendering: -webkit-optimize-contrast;"/>';else x='<a href="'+r+'" class="noimg slider-image" style="background:url('+k+') no-repeat center center; display:block;"/>';else x='<a href="'+r+'" class="slider-image" style="background:url('+w+') no-repeat center center;background-size: cover; display:block;"/>';var z='<div class="slider-item"><div class="slider-wrapp"><div class="thumb overlay">'+x+'</div><div class="post-descript"><div class="post-inner"><div class="post-meta"><div class="post-tag">'+i+'</div></div><h2 class="post-title"><a href="'+r+'">'+n+'</a></h2><div class="post-date">'+(h+" "+u+" "+y)+'</div></div></div><div class="clear"></div></div></div>';document.write(z),j++}document.write("</div></div>")}function postarea5(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,postnum4<=e.feed.entry.length?maxpost=postnum4:maxpost=e.feed.entry.length,document.write('<div class="ct-wrapper"><div class="row"><div class="featured-posts">');for(var t=0;t<maxpost;t++){for(var r,i,l=e.feed.entry[t],n=l.title.$t,o="",c=0;c<e.feed.entry[t].category.length;c++)o=o+'<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>",i='<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>";if(t==e.feed.entry.length)break;for(var m=0;m<l.link.length;m++)if("alternate"==l.link[m].rel){r=l.link[m].href;break}for(m=0;m<l.link.length;m++)if("replies"==l.link[m].rel&&"text/html"==l.link[m].type){l.link[m].title.split(" ")[0];break}if("content"in l)var g=l.content.$t;else if("summary"in l)g=l.summary.$t;else g="";postdate=l.published.$t,j>imgr.length-1&&(j=0),img[t]="",s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),y=s.indexOf('"',b+5),d=s.substr(b+5,y-b-5),-1!=a&&-1!=b&&-1!=y&&""!=d&&(img[t]=0==t?'<img min-width="620" min-height="240" class="odd-img" src="'+d+'"/>':'<img class="alignright" min-height="100" src="'+d+'" width="150"/>');for(var f=[1,2,3,4,5,6,7,8,9,10,11,12],p=["January","February","March","April","May","June","July","August","September","October","November","December"],h=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<f.length;u++)if(parseInt(h)==f[u]){h=p[u];break}var y=e.feed.entry[t].content.$t,v=(u=$("<div>").html(y)).find("img:first").attr("src"),k=e.feed.entry[t].media$thumbnail.url;-1!=k.indexOf("img.youtube.com")&&(k=e.feed.entry[t].media$thumbnail.url.replace("default","maxresdefault")),k=k.replace("/s72-c/","/s1600/");y="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBnWAsCRJXc1-Gwe5y09uRnlrtE94Pt1UEvjI860ahAe6nEmiH4M8q4AcNUxMyh4RAHvS-9T0cyOEkfig5CKDgDMI3qDpsx-oXxeW7Jfmu4qPEhyphenhyphenXB63g0dWgAuZGZub0xxp8QLhEV-cg/s1600/image-not-found-4a963b95bf081c3ea02923dceaeb3f8085e1a654fc54840aac61a57a60903fef.png";if(void 0===v)if(e.feed.entry[t].media$thumbnail)var A='<a href="'+r+'" class="slider-image" style="background:url('+k+') no-repeat center center;background-size: cover;width: 100%;height: 420px;display:block;image-rendering: -webkit-optimize-contrast;"/>';else A='<a href="'+r+'" class="noimg slider-image" style="background:url('+y+') no-repeat center center; display:block;"/>';else A='<a href="'+r+'" class="slider-image" style="background:url('+k+') no-repeat center center;background-size: cover; display:block;"/>';var w='<div class="feature-item"><div class="thumb overlay">'+A+'</div><div class="post-descript"><div class="post-inner"><div class="post-meta"><div class="post-tag">'+i+'</div></div><h2 class="post-title"><a href="'+r+'">'+n+'</a></h2></div></div><div class="clear"></div></div>';document.write(w),j++}document.write("</div></div></div>")}function postarea1(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,postnum4<=e.feed.entry.length?maxpost=postnum4:maxpost=e.feed.entry.length,document.write('<div class="ct-wrapper"><div class="featured-posts">');for(var t=0;t<maxpost;t++){for(var r,i,l=e.feed.entry[t],n=l.title.$t,o="",c=0;c<e.feed.entry[t].category.length;c++)o=o+'<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>",i='<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>";if(t==e.feed.entry.length)break;for(var m=0;m<l.link.length;m++)if("alternate"==l.link[m].rel){r=l.link[m].href;break}for(m=0;m<l.link.length;m++)if("replies"==l.link[m].rel&&"text/html"==l.link[m].type){l.link[m].title.split(" ")[0];break}if("content"in l)var g=l.content.$t;else if("summary"in l)g=l.summary.$t;else g="";postdate=l.published.$t,j>imgr.length-1&&(j=0),img[t]="",s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),k=s.indexOf('"',b+5),d=s.substr(b+5,k-b-5),-1!=a&&-1!=b&&-1!=k&&""!=d&&(img[t]=0==t?'<img class="owl-lazy" min-width="620" min-height="240" class="odd-img" src="'+d+'"/>':'<img class="alignright" min-height="100" src="'+d+'" width="150"/>');for(var f=[1,2,3,4,5,6,7,8,9,10,11,12],p=["January","February","March","April","May","June","July","August","September","October","November","December"],h=postdate.split("-")[2].substring(0,2),u=postdate.split("-")[1],y=postdate.split("-")[0],v=0;v<f.length;v++)if(parseInt(u)==f[v]){u=p[v];break}var k=e.feed.entry[t].content.$t,A=(v=$("<div>").html(k)).find("img:first").attr("src"),w=e.feed.entry[t].media$thumbnail.url;-1!=w.indexOf("img.youtube.com")&&(w=e.feed.entry[t].media$thumbnail.url.replace("default","maxresdefault")),w=w.replace("/s72-c/","/s1600/");k="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBnWAsCRJXc1-Gwe5y09uRnlrtE94Pt1UEvjI860ahAe6nEmiH4M8q4AcNUxMyh4RAHvS-9T0cyOEkfig5CKDgDMI3qDpsx-oXxeW7Jfmu4qPEhyphenhyphenXB63g0dWgAuZGZub0xxp8QLhEV-cg/s1600/image-not-found-4a963b95bf081c3ea02923dceaeb3f8085e1a654fc54840aac61a57a60903fef.png";if(void 0===A)if(e.feed.entry[t].media$thumbnail)var x='<a href="'+r+'" class="slider-image" style="background:url('+w+') no-repeat center center;background-size: cover;width: 100%;height: 420px;display:block;image-rendering: -webkit-optimize-contrast;"/>';else x='<a href="'+r+'" class="noimg slider-image" style="background:url('+k+') no-repeat center center; display:block;"/>';else x='<a href="'+r+'" class="slider-image" style="background:url('+w+') no-repeat center center;background-size: cover; display:block;"/>';var z='<div class="feat-home"><div class="thumb overlay">'+x+'</div><div class="post-descript"><div class="post-inner"><div class="post-meta"><div class="post-tag">'+i+'</div></div><h2 class="post-title"><a href="'+r+'">'+n+'</a></h2><div class="post-date">'+(h+" "+u+" "+y)+'</div></div></div><div class="clear"></div></div>';document.write(z),j++}document.write("</div></div>")}cat1="Featured",imgr=new Array,imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpUAETP9VjQoUy9ez7ykX2MGgsJ-F93bE9fmDZoY4Bw5FAYvKtfWYx8SmqLiMFjUqwyYRZgeRX7405mm46gf9kl8Ee0yvYDaStvIigcbeMWaus2ZcuyxVFkLLsud2UM2oEIp81zRQ_PxY/s1600/picture_not_available.png",showRandomImg=true,aBold=true,summaryPost=150,summaryTitle=50,postnum1=1,postnum4=4,postnum5=5; // Options $(document).ready(function(){$(".owl_carouselle").owlCarousel({autoplay:true,loop:true,lazyLoad:true,nav:true,dots:false,video:true,navText:["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"],smartSpeed:1200,responsiveClass:true,responsive:{0:{items:1},600:{items:1},1e3:{items:1}}})}); //]]> </script>

Ganti isyarat yang ditandai sesuai dengan kebutuhan.

Setelan

TipeKeterangan
autoplay:trueGanti nilai menjadi false kalau ingin menonaktifkan fitur autoplay
nav:trueGanti nilai menjadi false kalau ingin menonaktifkan fitur navigasi
items:1Ganti angka 1 dengan jumlah postingan yang akan tampil di depan pada media responsive
postnum4=4,postnum5=5Ganti angka 4 dan 5 dengan jumlah post yang akan ditampilkan pada widget

Untuk setingan selengkapnya, dapat kunjungi Owl Carousel

Selanjutnya tambahkan isyarat ini bebas dimanapun diantara isyarat <body> dan </body>, misalnya di dalam <div class='content-wrapper'> ibarat ini

<div class='content-wrapper'> ... ... ---KODE_WIDGET_DI_SINI--- ... ... </div>

Berikut isyarat widgetnya

<div class='slider-wrappper'> <b:section class='featured-slider' id='featured-slider' maxwidgets='2' showaddelement='no'>   <b:widget id='HTML32' locked='true' title='Slider' type='HTML' version='1'>     <b:widget-settings>       <b:widget-setting name='content'>Featured</b:widget-setting>     </b:widget-settings>     <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'>                           <div class='widget-inner'>                             <script>                               document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+postnum5+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=postarea4\&quot;&gt;&lt;\/script&gt;&quot;);                             </script>                           </div>                         </div>         </b:includable>   </b:widget>   <b:widget id='HTML33' locked='true' title='Featured Post' type='HTML' version='1'>     <b:widget-settings>       <b:widget-setting name='content'>Fashion</b:widget-setting>     </b:widget-settings>     <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'>                           <div class='widget-inner'>                             <script>                               document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+postnum4+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=postarea5\&quot;&gt;&lt;\/script&gt;&quot;);                             </script>                           </div>                         </div>         </b:includable>   </b:widget> </b:section> </div>

Bungkus isyarat widget di atas dengan Tag Kondisional kalau hanya ingin menampilkan di halaman index saja. Contohnya ibarat ini

<b:if cond='data:view.isMultipleItems'> <div class='slider-wrappper'> <b:section class='featured-slider' id='featured-slider' maxwidgets='2' showaddelement='no'>   <b:widget id='HTML32' locked='true' title='Slider' type='HTML' version='1'>      ------   </b:widget>   <b:widget id='HTML33' locked='true' title='Featured Post' type='HTML' version='1'>      ------   </b:widget> </b:section> </div> </b:if>

Setelah itu klik tombol Simpan tema. Refresh halaman dan abaikan kalau ada peringatan, lanjut ke hidangan Tata Letak > Klik Edit pada widget dengan judul Slider dan Featured Post > Ganti nama label dengan nama label yang akan ditampilkan pada widget Featured Slider dan Selesai!


Demikian dari wacana Cara Memasang Featured Slider Keren di Blogger. Terima kasih dan wassalam.

Cara Memasang Featured Slider Keren Di Blogger

Langganan: Postingan (Atom)