Dewa Blogger: Hasil penelusuran untuk beberapa-fungsi-tag-kondisional-pada-widget

Home / Hasil penelusuran untuk beberapa-fungsi-tag-kondisional-pada-widget

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

Concept Phone Senin, 15 Januari 2018

Memasang Fungsi Sticky Pada Widget Blogger Memasang Fungsi Sticky Pada Widget Blogger

Memasang Fungsi Sticky Pada Widget Blogger - Sebelum membahas perihal tips kali ini, Saya selaku admin mengucapan selamat menjalankan ibadah puasa bagi umat muslim yang menjalankannya, dan semoga ibadah kita diterima oleh Allah SWT.

Ok, pada kesempatan kali ini Saya akan menyebarkan tips perihal cara memasang fungsi sticky pada widget blogger, fungsi dari sticky pada widget ini berkhasiat bagi sahabat yang menginginkan sebuah widget pada blog semoga dapat melayang mengikuti halaman ketika digulirkan ke bawah dan akan kembali ke posisi semula ketika halaman digulirkan ke atas.

Kita eksklusif saja ke cara penerapannya :

CARA 1

1. Buka Blogger > Klik Template > Edit HTML > Salin dan terapkan arahan di bawah ini sempurna sebelum </body>

Sebagai teladan widget yang akan dibentuk sticky yaitu widget dengan ID #HTML1

<script type='text/javascript'> //<![CDATA[ // Sticky Widget function makemeSticky(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky("HTML1"); //]]> </script>

Tentukan ID widget pada arahan yang ditandai.

Baca juga : Beberapa Fungsi Tag Kondisional Pada Widget

2. Selanjutnya simpan arahan di bawah ini sebelum ]]></b:skin> atau </style>

.makesticking{background:none!important;position:fixed!important;top:25px;z-index:99;-webkit-transform:translateZ(0);} #HTML1 .widget-content {padding:0;margin:auto;}

Silakan atur arahan di atas sesuai selera.

3. Simpan template dan lihat hasilnya.

CARA 2

1. Atau dapat juga memakai arahan ini, sebagai teladan widget yang akan dibentuk sticky yaitu widget dengan ID #sidecontent

<script type='text/javascript'> //<![CDATA[ // Sticky Widget $(function() {   var top = $('#sidecontent').offset().top - parseFloat($('#sidecontent').css('marginTop').replace(/auto/, 0));   var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));    var maxY = footTop - $('#sidecontent').outerHeight();    $(window).scroll(function(evt) {     var y = $(this).scrollTop();     if (y > top) {       if (y < maxY) {         $('#sidecontent').addClass('fixed').removeAttr('style');       } else {         $('#sidecontent').removeClass('fixed').css({           position: 'absolute',           top: (maxY - top) + 'px'         });       }     } else {       $('#sidecontent').removeClass('fixed');     }   }); }); //]]> </script>

Tentukan ID widget pada arahan yang ditandai.

2. Simpan arahan di bawah ini sebelum ]]></b:skin> atau </style>

#sidecontent {   width: 255px;   height: 200px;   margin: auto;   background: #fc4f3f;   position: absolute; } #sidecontent.fixed {   position: fixed;   top: 20px; }

Tambahkan atribut position: absolute; pada widget dan atur posisi widget ketika halaman digulirkan top: 20px;

3. Simpan template dan lihat hasilnya.

Pada widget

Result

Pada sajian horizontal

Result

Pada widget dan sajian horizontal

Result

Untuk menonaktifkan fungsi sticky pada media query tertentu

#sidecontent@media only screen and (max-width:640px){ .makesticking{position:relative!important;z-index:initial}}

Penggunaan sticky ini dapat sahabat pasang di widget atau konten apa saja sesuai kebutuhan.

Tambahan :

Penerapan fungsi sticky pada sajian horizontal hanya dengan CSS

4. Tentukan class atau ID pada arahan di bawah ini sesuai template yang sahabat pakai

.arlinatop-wrapper{width:100%;max-width:970px;background:rgba(255,255,255,.98);z-index:99;position:fixed;overflow:hidden;margin:auto;border-bottom:1px solid #e6e6e6;-webkit-transform:translateZ(0)}

Cukup sekian mengenai cara Memasang Fungsi Sticky Pada Widget Blogger, selamat mencoba.

Memasang Fungsi Sticky Pada Widget Blogger

Concept Phone Selasa, 29 Mei 2018

Tentang bagaimana cara memperbesar thumbnail pada Memperbesar/Mengubah Ukuran Thumbnail Posting

Pertanyaan Al-Firouz: Tentang bagaimana cara memperbesar thumbnail pada posting auto read-more tanpa JavaScript dengan jQuery:

Pertama-tama, Saya tidak akan menunjukkan metode mengubah ukuran thumbnail Picasa dengan jQuery terlebih dahulu alasannya yaitu ada cara sederhana yang dapat dilakukan dengan gampang memakai JavaScript mentah. Pada intinya, kita hanya mencoba mengubah ukuran thumbnail kecil dari path-nya ibarat yang pernah Saya ulas dengan cukup terperinci di artikel Optimasi Thumbnail pada Posting Auto Read-More dan Widget Blogger, yaitu dengan cara mengubah ukuran standar thumbnail 72 × 72 piksel s72-c menjadi ukuran yang lain, contohnya s200-c.

Metode 1: Menggunakan JavaScript Murni

Salin isyarat ini dan letakkan di atas tag </body>:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <script> //<![CDATA[ function resizeThumb(parentID, size) {     var parent = document.getElementById(parentID),         image = parent.getElementsByTagName('img');     for (var i = 0; i < image.length; i++) {         image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");         image[i].width = size;         image[i].height = size;     } } resizeThumb('main-wrapper', 200); //]]> </script> </b:if> </b:if>

Fungsi dihukum pada bab ini:

resizeThumb('main-wrapper', 200);

main-wrapper yaitu ID kolom posting, dan 200 yaitu ukuran thumbnail baru. Kode di atas akan mengubah ukuran thumbnail dari 72 × 72 piksel menjadi 200 × 200 piksel.

Ganti juga ukuran width dan height thumbnail posting dalam isyarat CSS ini:

.post-thumbnail {   width:72px;   height:72px;   float:left;   margin:0 10px 0 0; }

… menjadi berukuran sama dengan ukuran pembesaran thumbnail. Menyesuaikan pola di atas, maka ukuran lebar dan tinggi thumbnail harus diubah menjadi 200px.

Simpan semua perubahan dan lihat hasilnya.

Lihat Sampel

Metode 2: Menggunakan jQuery

Pada pada dasarnya cara kerjanya sama, hanya metodenya saja yang berbeda. Salin isyarat ini dan letakkan di atas isyarat </head> atau </body>:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <script> //<![CDATA[ function resizeThumb(el, from, to) {     $(el).each(function() {         $(this).attr({             'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),             'width': to, 'height': to         });     }); } $(function() {     resizeThumb('.post-thumbnail', '72', '200'); // Ubah ukuran thumbnail dari 72 menjadi 200 }); //]]> </script> </b:if> </b:if>

Di sini Saya memakai selektor $('.post-thumbnail') untuk menargetkan thumbnail posting secara langsung. Anda dapat saja mengubah selektornya menjadi $('#main-wrapper img') atau $('.post img:first') atau bahkan yang lainnya bila template Anda mempunyai struktur elemen yang unik. Pada intinya, targetkan gambarnya! Alasan Saya tidak memakai nama kelas thumbnail pada versi manipulasi JavaScript yaitu alasannya yaitu Saya tidak ingin mengambil resiko mengingat document.getElementsByClassName tidak didukung oleh beberapa peramban bau tanah - When can I use getElementsByClassName?

Lihat Sampel

Thumbnail Lain?

Bukan hanya thumbnail pada posting saja yang dapat diubah ukurannya, tapi juga thumbnail-thumbnail pada widget lain, contohnya pada widget Posting Populer yang caranya juga pernah dituliskan oleh MS-Potilas di artikelnya (Kebetulan Saya mendapat inspirasi JavaScript mentahnya dari sana). Di sini Saya hanya mengonversi kodenya menjadi plugin. Asalkan thumbnail tersebut diunggah pada direktori Picasa, maka kita dapat menemukan ciri khususnya dalam path lokasi gambar ibarat s72-c, s200, s1600 dan lain sebagainya. Dari kunci itulah kita dapat mengubah ukuran-ukuran gambar memakai JavaScript dengan cara mengganti besarannya. berikut ini yaitu pola sederhana bagaimana cara memperbesar thumbnail pada widget Posting Populer:

Versi JavaScript

<script> //<![CDATA[ function resizeThumb(parentID, size) {     var parent = document.getElementById(parentID),         image = parent.getElementsByTagName('img');     for (var i = 0; i < image.length; i++) {         image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");         image[i].width = size;         image[i].height = size;     } } // Mengubah ukuran thumbnail widget Posting Populer resizeThumb('PopularPosts1', 200); //]]> </script>

Versi jQuery

<script> //<![CDATA[ function resizeThumb(el, from, to) {     $(el).each(function() {         $(this).attr({             'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),             'width': to, 'height': to         });     }); } // Mengubah ukuran thumbnail widget Posting Populer $(function() {     resizeThumb('#PopularPosts1 img', '72', '200'); }); //]]> </script>

Tag kondisional dapat dilepaskan bila tujuan kita yaitu untuk mengubah ukuran thumbnail widget, alasannya yaitu umumnya widget muncul pada semua tipe halaman.

Catatan Tambahan: Saya melihat beberapa pembaca yang mendeklarasikan fungsi resizeThumb() berkali-kali pada daerah yang berbeda. Padahal fungsi ini cukup dinyatakan satu kali saja (Saya sarankan untuk meletakkannya di area <head>):

function resizeThumb(parentID, size) { ... }

Setelah itu Anda dapat memakai fungsi tersebut sebanyak yang Anda mau pada elemen mana saja:

resizeThumb('Blog1', 300); resizeThumb('PopularPosts1', 200); resizeThumb('Widget1', 50); ...

Sumber https://www.dte.web.id/

Blogger Dasar Gambar Javascript jQuery Regex

Memperbesar/Mengubah Ukuran Thumbnail Posting

Concept Phone Sabtu, 14 Juli 2018

Baiklah kali ini aku akan menyebarkan perihal cara memasang recent post slider yang sudah res Memasang Responsive Recent Post Slider

Memasang Responsive Recent Post Slider - Baiklah kali ini aku akan menyebarkan perihal cara memasang recent post slider yang sudah responsive.

Langsung saja dengan cara penerapannya.

1. Silahkan login ke blog anda > Template > Edit HTML

Kemudian salin dan pastekan instruksi di bawah ini sempurna sebelum ]]></b:skin> atau </style>

/* CSS Responsive Slider Recent Post */ #featuredpost {margin:15px auto;} #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative} #slides ul{height:320px} #slides li{width:50%;height:100%;position:absolute;display:none} #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block} #slides li:nth-child(1){left:0;top:0} #slides li:nth-child(2){left:50%;width:25%;height:50%} #slides li:nth-child(3){left:75%;width:25%;height:50%} #slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%} #slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%} #slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%; padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3); height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;} #slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px; padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);} #slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px; background:#ff6553;margin:0;} #slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff; padding:5px 21px;text-transform:uppercase;margin:0;} #slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;} #slides a{display:block;width:100%;height:100%;overflow:hidden} #slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;} #slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;} #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background:none;background-position:50% 40%;background-repeat:repeat-x;} #slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;; left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal; background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;} #slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px; position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;; text-transform:uppercase;} #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;} #slides .overlayx,#slides li{transition:all .4s ease-in-out} #slides li:nth-child(1) .overlayx{display:none;} #slides li:hover .overlayx{opacity:0.1} @media only screen and (max-width:800px){ #slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}} @media only screen and (max-width:600px){   #slides ul{height:600px}   #slides li:nth-child(1){width:100%;height:50%}   #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}   #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}   #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}   #slides li:nth-child(5){display:none;}} @media only screen and (max-width:480px){ #slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

Pada CSS di atas aku memakai font Oswald, silahkan ganti dan sesuaikan dengan tema blog anda.

2. Salin dan pastekan instruksi di bawah ini sempurna di atas </body>

<script type="text/javascript" src="https://cdn.rawgit.com/Arlina-Design/frame/18274fc5/slider-posts.js"></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { FeaturedPost({ blogURL:"URL-BLOG-ANDA", MaxPost:8, idcontaint:"#featuredpost", ImageSize:500, interval:10000, autoplay:true, tagName:false }); }); //]]> </script>

Ganti goresan pena URL-BLOG-ANDA dengan url blog anda.

3. Salin dan pastekan instruksi di bawah ini dimana saja bebas. Bisa sebelum content-wrapper atau di bawah menu-wrapper

<div id="featuredpost"></div>

4. Terakhir simpan template dan lihat hasilnya.

Jika anda ingin memunculkan recent post slider ini hanya di halaman utama saja, silahkan bungkus instruksi HTML-nya dengan tag kondisional khusus halaman utama. Contoh :

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id="featuredpost"></div> </b:if>

Selengkapnya perihal penerapan tag kondisional Bisa anda lihat disini

Beberapa Fungsi Tag Kondisional Pada Widget

Dan kalau ada yang merasa kesulitan dengan penerapannya, disini aku sudah menyediakan versi praktisnya. Anda cukup menyalin semua instruksi di bawah ini ke Tata Letak > Tambahkan Gadget > HTML/JavaScript dan pastekan semua kodenya disitu > Simpan

<style> /* CSS Slider Recent Post */ #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative} #slides ul{height:320px} #slides li{width:50%;height:100%;position:absolute;display:none} #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block} #slides li:nth-child(1){left:0;top:0} #slides li:nth-child(2){left:50%;width:25%;height:50%} #slides li:nth-child(3){left:75%;width:25%;height:50%} #slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%} #slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%} #slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%; padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3); height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;} #slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px; padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);} #slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px; background:#ff6553;margin:0;} #slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff; padding:5px 21px;text-transform:uppercase;margin:0;} #slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;} #slides a{display:block;width:100%;height:100%;overflow:hidden} #slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;} #slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;} #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-position:50% 40%;background-repeat:repeat-x;} #slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald'; left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal; background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;} #slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px; position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald'; text-transform:uppercase;} #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;} #slides .overlayx,#slides li{transition:all .4s ease-in-out} #slides li:nth-child(1) .overlayx{display:none;} #slides li:hover .overlayx{opacity:0.1} @media only screen and (max-width:800px){ #slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}} @media only screen and (max-width:600px){   #slides ul{height:600px}   #slides li:nth-child(1){width:100%;height:50%}   #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}   #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}   #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}   #slides li:nth-child(5){display:none;}} @media only screen and (max-width:480px){ #slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}} </style> <div id="featuredpost"></div> <script type="text/javascript" src="https://cdn.rawgit.com/Arlina-Design/redvision/cab7a72d/sliderekomendasi.js"></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { FeaturedPost({ blogURL:"URL-BLOG-ANDA", MaxPost:8, idcontaint:"#featuredpost", ImageSize:500, interval:10000, autoplay:true, tagName:false }); }); //]]> </script>

Untuk penerapannya, simpan sempurna diatas widget Posting Blog di Tata Letak.

Jika anda ingin memunculkan recent post slider ini hanya di halaman utama saja, silahkan bungkus widgetnya dengan tag kondisional khusus halaman utama. Contoh :

Klik Template > Buka edit HTML > Misal instruksi widget slider anda ialah #HTML4

<b:widget id='HTML4' 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:includable>     </b:widget>

Tambahkan tag kondisional pada widget tersebut menjadi ibarat ini :

<b:widget id='HTML4' locked='false' title='' 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 != &quot;&quot;'>     <h2 class='title'><data:title/></h2>   </b:if>   <div class='widget-content'>     <data:content/>   </div> </b:if> </b:includable>     </b:widget>

Result

Keterangan :

MaxPost : Jumlah semua postingan yang akan tampil dalam list
ImageSize : Ukuran maksimal dari gambar (Semakin besar ukurannya maka akan semakin terang kerapatan pixel gambar yang akan tampil, namun akan semakin banyak waktu yang diharapkan dalam proses memuat halaman)
Interval : Waktu yang diharapkan dikala post berpindah (Contoh : 10000 yang berarti 10 detik)
Autoplay : (True) Post akan berpindah secara otomatis, (False) Post tidak akan berpindah secara otomatis.

Cukup sekian dan selamat mencoba.

Source :

CSS HTML Javascript Tips Blogger Widget

Memasang Responsive Recent Post Slider

Concept Phone Rabu, 24 Januari 2018

Cara Praktis Memasang SEO Smart Link di Blog Cara Praktis Memasang SEO Smart Link di Blog

Cara Praktis Memasang SEO Smart Link di Blog - Kali ini akan mengembangkan plugin SEO Smart Link yang merupakan sebuah plugin WordPress yang berfungsi mengubah setiap kata yang ditentukan dalam suatu artikel menjadi sebuah link.

Cara Kerja Plugin SEO Smart Link

Plugin ini akan membaca setiap kata yang teman tentukan di dalam artikel. Contohnya jikalau teman menambahkan kata SEO atau Blogger pada plugin, maka otomatis setiap kata tersebut akan menjelma sebuah link itupun jikalau di artikel blog teman terdapat kata tersebut.

Cara Memasang SEO Smart Link

Buka Blogger > Template > Kemudian tambahkan instruksi di bawah ini sebelum </body>

<script type='text/javascript'> function smartLink(){     this.keywdHref = new Object();     this.add = function(keyword, href){         if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}         this.keywdHref[keyword] =  href;     }     this.createAnchor = function(){         var objs = document.getElementsByTagName(&quot;div&quot;);         for(var i=0; i&lt;objs.length; i++){             var obj = objs[i];             if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){                 var content = obj.innerHTML;                 for(var keyword in this.keywdHref){                     var href = this.keywdHref[keyword];                     var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);                     obj.innerHTML = newstr;                     content = newstr;                 }             }         }     }     this.startScript = function(){         var onLoad = window.onload;         window.onload = function(){             if(onLoad){onLoad();}             setTimeout(&quot;f.createAnchor()&quot;, 100);         }     } } </script> <script type='text/javascript'> var f = new smartLink(); f.add(&quot;SEO&quot;, &quot;http://www.arlinadzgn.com/&quot;); f.startScript(); </script>

Jika ingin plugin di atas hanya tampil di halaman postingan saja, silakan tambahkan tag kondisional khusus halaman post

Referensi : Beberapa Fungsi Tag Kondisional Pada Widget

Simpan template

Pada instruksi yang ditandai, ganti SEO dengan kata kunci yang teman tentukan dan ganti http://www.arlinadzgn.com/ dengan url blog sobat.

Pada instruksi di atas teman sanggup menambahkan kata kunci lain dibawahnya, sebagai teladan

f.add(&quot;SEO&quot;, &quot;http://www.arlinadzgn.com/&quot;); f.add(&quot;Template&quot;, &quot;http://www.arlinadzgn.com/&quot;); f.add(&quot;Blogger&quot;, &quot;http://www.arlinadzgn.com/&quot;);

Sobat juga sanggup menambahkan kata menjadi abjad tebal, sebagai contoh

f.add(&quot;&lt;b&gt;SEO&lt;/b&gt;&quot;, &quot;http://www.arlinadzgn.com/&quot;);

Catatan

Disarankan untuk tidak menambahkan kata kunci yang berlebihan, 1 hingga 3 kata kunci sudah cukup.

Contoh Penerapan

Perhatikan kata Mobile dan Friendly pada artikel di halaman demo

Result

Demikian wacana Cara Praktis Memasang SEO Smart Link di Blog, agar bermanfaat.

Javascript SEO Tips Blogger

Cara Gampang Memasang Seo Smart Link Di Blog

Concept Phone Minggu, 12 Agustus 2018

Widget Countdown Timer Menjelang Idul Fitri Widget Countdown Timer Menjelang Idul Fitri

Widget Countdown Timer Menjelang Idul Fitri - Tak terasa detik-detik menjelang hari raya Lebaran Idul Fitri 1436 H semakin erat saja, khususnya bagi umat muslim lebaran idul fitri merupakan momen yang sangat ditunggu-tunggu. Dimana hari tersebut ialah hari kemenangan sesudah menjalankan ibadah puasa selama sebulan.

Berkaitan dengan hal ini akan memperlihatkan sebuah widget countdown timer / hitung mundur menjelang hari raya idul fitri yang dapat teman terapkan di blog.

Bagi yang ingin mencobanya, silakan ikuti langkah sederhana berikut ini :

1. Buka dashboard blogger > Klik tata letak > Tambahkan widget gres lalu salin semua arahan di bawah ini di dalamnya > Simpan widget.

<style scoped="" type="text/css">  #idulfitri{background:#31acce;color:#ffe8a0;font-size:120%;text-align:center;padding:20px 0;font-weight:normal;border-radius:3px;line-height:normal;font-family:'Open Sans',Verdana,Arial,sans-serif} .digital,.idjudul {color:#fff} </style> <div id="idulfitri"> <span id="hitungmundur"></span> </div> <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/idul-fitri.js" type="text/javascript"></script>

2. Selesai, silakan lihat hasilnya.

Result

Tambahan :

Untuk mengatur widget hanya muncul di halaman utama saja silakan mampir dimari Beberapa Fungsi Tag Kondisional Pada Widget

Semoga bermanfaat.

Referensi : https://sangdewablogger.blogspot.com//search?q=widget-countdown-timer-menjelang-idul-fitri

Widget

Widget Countdown Timer Menjelang Idul Fitri

Concept Phone Sabtu, 09 Juni 2018

Halaman

Social Items

Dewa Blogger

1. Menampilkan widget hanya di halaman beranda

2. Menampilkan widget hanya di halaman postingan

3. Menampilkan widget hanya di halaman tertentu

4. Menyembunyikan widget hanya di halaman tertentu

5. Menampikan widget di halaman statis

5. Menyembunyikan widget di halaman statis

7. Menampikan widget hanya di halaman arsip

8. Menampikan widget hanya di halaman index

9. Menyembunyikan widget di halaman index

Penerapan pada konten tertentu

Tag kondisional untuk label tertentu

Tag kondisional untuk halaman pencarian tertentu

Beberapa Fungsi Tag Kondisional Pada Widget

Memasang Fungsi Sticky Pada Widget Blogger

Metode 1: Menggunakan JavaScript Murni

Metode 2: Menggunakan jQuery

Thumbnail Lain?

Versi JavaScript

Versi jQuery

Memperbesar/Mengubah Ukuran Thumbnail Posting

Memasang Responsive Recent Post Slider

Cara Kerja Plugin SEO Smart Link

Cara Memasang SEO Smart Link

Catatan

Contoh Penerapan

Cara Gampang Memasang Seo Smart Link Di Blog

Widget Countdown Timer Menjelang Idul Fitri