Stylish Ribbon

Malam All
Tutorial kali ini Ribbon New yang biasanya menandakan postingan terbaru dengan tulisan New disudut kanan atas postingan .Ribbon keren ini akan mendapatkan perhatian ketika ada yang berkunjung di blog sobat. ya itung-itung untuk menambah asesoris di blog sobat daripada bengong hehe .

DEMO

Tutorial :
Cari kode <head> dan masukan kode ini tepat diatasnya

<script type='text/javascript'>
        $(document).ready(function() {
            $(".dropdown img.flag").addClass("flagvisibility");
            $(".dropdown dt a").click(function() {
                $(".dropdown dd ul").toggle();
            });
            $(".dropdown dd ul li a").click(function() {
                var text = $(this).html();
                $(".dropdown dt a span").html(text);
                $(".dropdown dd ul").hide();
                $("#result").html("Selected value is: " + getSelectedValue("sample"));
            });
$('.blog-posts').find($('.post')).first().prepend("<span class='new1'/>")
            $("#flagSwitcher").click(function() {
                $(".dropdown img.flag").toggleClass("flagvisibility");
            });
        });
    </script>

Masih pada edit template , sekarang tempatkan kode dibawah ini tepat diatas kode ]]></b:skin>

.new1 {
width: 56px;
height: 56px;
position: relative;
left: 20px;
top: -5px;
float: right;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQbFMK3ByLfbS4FmsfCp48CERUDMtU-kuz94ayf7-PDQLfJnFPirq4fV2Dwe3bqWvhVVrkeZMVPsVFAhonNdGDcgPNyL67gCYFxnBBBgKccqVPueC4lTYJXaG1pKEfErDTcLGd4RNv3mE/s1600/New.png") no-repeat scroll 0% 0% transparent;
}

Pratinjau , kalau tidak terjadi eror pada template sobat lalu save

NB :
Sobat bisa mengatur ukuran 20px dan -5p dan sesuaikan

Oke sob , tutor ini aku dedikasikan buat penggila bloger hehe