Agussalikur: Tips dan Trik blog

Hai sobat Agussalikur berjumpa kembali ! Kali ini admin berbagi tips seputar blogger dalam topik Time Countdown, kebetulan admin contohkan mengenai menyambut Lebaran . Ikutin terus yo langsung saja.

Tahapannya :


1.Buka blogger edit tema cari </head> masukkan kode CSS dibawah ini
<style type="text/css" scoped="scoped">
#lebaran{background:#333;color:#37B185;font-family:Oswald, Arial, Sans-serif;font-size:18px;text-transform:uppercase;text-align:center;padding:10px 0;font-weight:normal;}
      .teks {color:white}
    </style>


2.  Cari kode <body> atau sebelum </body> masukan kode dibawah ini
<div id="lebaran">
    <span id="countdown">133
    <span class="teks">hari</span>23
    <span class="teks">jam</span>45 
    <span class="teks">menit</span> 40 
    <span class="teks">detik menuju Hari Raya Idul Fitri</span>1443 H / 2022 M</span>
    </div>


3. Cari footer masukan kode dibawah ini
<script type="text/javascript">
    //<![CDATA[
    // set the date we're counting down to
    var target_date = new Date("May 2, 2022").getTime();
    // variables for time units
    var days, hours, minutes, seconds;
    // get tag element
    var countdown = document.getElementById("countdown");
    // update the tag with id "countdown" every 1 second
    setInterval(function () {
        // find the amount of "seconds" between now and target
        var current_date = new Date().getTime();
        var seconds_left = (target_date - current_date) / 1000;
        // do some time calculations
        days = parseInt(seconds_left / 86400);
        seconds_left = seconds_left % 86400;
   
        hours = parseInt(seconds_left / 3600);
        seconds_left = seconds_left % 3600;
      
        minutes = parseInt(seconds_left / 60);
        seconds = parseInt(seconds_left % 60);
   
        // format countdown string + set tag value
      countdown.innerHTML = days + " <span class=\'teks\'>hari</span> " + hours + " <span class=\'teks\'>jam</span> "
      + minutes + " <span class=\'teks\'>menit</span> " + seconds + " <span class=\'teks\'>detik menuju Hari Raya Idul Fitri</span> 1443 H / 2022 M";
    }, 1000);
    //]]>
    </script>

Cara membuat Breadcrumb

Hai sobat jumpa lagi dengan Admin saya Agussalikur, kali ini ada yang baru lagi Sobat.Tips blog ini namanya cara membuat Breadcrumb untuk blog sobat. Tutorial ini didapat dari sang Master blog Arlina maksud Admin menyampaikan tips dan trik blogger, yang mungkin berguna untuk blog agan. Penasarankan, nah yuk langsung saja ikuti tips salikur :

Cara membuat Breadcrumb :
1.Anda harus punya blog dahulu.
2.Masuk ke Blogger.
3.Cari Template lalu Edit.
4.Cari kata ]]></skin> saran agar pencarian cepat menggunakan Ctrl+F.
5.Letakkan CSS dibawah ini sebelum ]]></skin>


.breadcrumbs {padding:5px 5px 5px 0px;margin:0px 0px 15px 0px;font size:90%;line-height: 1.4em;border:1px solid #ddd  ;}

Baca : Cara membuat breadcrumb

6.Cari kata <b:includable id='main' var='top'> saran agar pencarian cepat menggunakan Ctrl+F.
7.Jika sudah ditemukan hapus dan ganti dengan teks dibawah ini.


<b:includable id='breadcrumb' var='posts'>

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

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- Breadcrumb Untuk Halaman Pos -->

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<div class='breadcrumbs'>

agussalikur : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>

<b:loop values='data:post.labels' var='label'>

/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>

</b:loop>

/ <span><data:post.title/></span>

</div>

<b:else/>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<!-- Breadcrumb Untuk Label Search dan Search Pages -->

<div class='breadcrumbs'>

<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>

<b:else/>

<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

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

<b:include data='post' name='Breadcrumb'/>

8.Simpan dan lihat hasilnya.

Catatan: agussalikur kata ini silahkan ganti dengan nama sobat.

Sumber: Arlinadzgn.com

Agussalikur

iklanbanner

Countdown

Cara membuat Breadcrumb

Countdown