Widget Entri Populer dengan Gambar Berputar

Langsung aja caranya, Berikut:
1.Pertama login dulu ke akun Blogger
2.Lalu klik Rancangan
3.Edit Html, jangan lupa centang expand widget template
4.Lalu cari kode ]]></b:skin>, untuk mempermudah pencarian tekan Ctrl+F

5.Setelah dapat kode ]]></b:skin>, letakkan kode di bawah ini pada kode tadi

<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

6.Lalu klik simpan

7.Setelah itu klik tambah gadget pilih entri populer

8.konfigurasi seperti gambar di bawah ini

atur tampilkan centang Thumbnail Gambar lalu tampilan entri 9 

Lalu klik simpan

Read More

Super Accordion Widged Memeperindah Tampilan Blog

Pada postingan ini saya akan share mengenai cara membuat super accordion widged untuk lebih memperindah tampilan blog sebenarnya accordion widged ini adalah pengembangan dari accordion sebelumnya yang saya bagikan tempo hari fungsinya tergolong sama namun ada sedikit perbedaan pada tampilannya dan desainnya..

CSS

#page-wrap {
    width: 300px;
    margin: 10px auto;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

.box {
    background: #a7a7a7;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 10px;
    margin: 0 0 15px 0;
}

.box ul li {
    font-size: 11px;
    margin: 0;
    border-bottom: 1px solid #666;
}

.box ul li a {
    color: #222;
    display: block;
    padding: 4px 4px;
    margin: 0;
    border-bottom: 1px solid #ccc;
}

.box ul li:last-child,
.box ul li:last-child a {
    border: none;
}

.box ul li a:hover {
    background: #ccc;
    text-decoration: none;
}

#catNav {
    background: #494949;
    padding: 5px 5px 5px 37px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    margin: 0 0 10px 0;
}

#catNav li {
    display: inline;
}

#catNav li a {
    display: block;
    width: 50px;
    height: 50px;
    text-indent: -9999px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_tLciaeJwVsLQ9hIZWaKT_6lhOKGZO2frLjVdXo8Ji5WfRVHgJPAzZuP6MTmyXc5PA0FxgXITfekJpkso18SCK8tLfhh3JOU06WfcfHGSOKydAQknwDo9xO1AXNsEvYBEP1Fluvfq5OU/s1600/catSprite.png);
    float: left;
    border: none;
    padding: 0;
}

#catNav li a#list-one-button {
    background-position: -50px -50px;
}

#page-wrap #catNav li.activeCatButton a#list-one-button {
    background-position: -50px -100px;
}

#catNav li a#list-one-button:hover {
    background-position: -50px 0;
}

#catNav a#list-two-button {
    background-position: -100px -50px;
}

#page-wrap #catNav li.activeCatButton a#list-two-button {
    background-position: -100px -100px;
}

#catNav li a#list-two-button:hover {
    background-position: -100px 0;
}

#catNav a#list-three-button {
    background-position: 0 -50px;
}

#page-wrap #catNav li.activeCatButton a#list-three-button {
    background-position: 0 -100px;
}

#catNav li a#list-three-button:hover {
    background-position: 0 0;
}

#catNav a#list-four-button {
    background-position: -150px -50px;
}

#page-wrap #catNav li.activeCatButton a#list-four-button {
    background-position: -150px -100px;
}

#catNav li a#list-four-button:hover {
    background-position: -150px 0;
}

Javascript

<script type="text/javascript">
    //<![CDATA[
    $(function () {

        $("#list-two").hide();
        $("#list-three").hide();
        $("#list-four").hide();

        $("#list-one-button").click(function () {
            $(".cat-list").slideUp(600);
            $("#list-one").slideDown(600);
        });

        $("#list-two-button").click(function () {
            $(".cat-list").slideUp(600);
            $("#list-two").slideDown(600);
        });

        $("#list-three-button").click(function () {
            $(".cat-list").slideUp(600);
            $("#list-three").slideDown(600);
        });

        $("#list-four-button").click(function () {
            $(".cat-list").slideUp(600);
            $("#list-four").slideDown(600);
        });

        $("#catNav li a").click(function () {
            $("#catNav li").removeClass("activeCatButton");
            $(this).parent().addClass("activeCatButton");
        });
    });
    //]]>
</script>

HTML

<div id="page-wrap">
<div class="box">
<ul id="catNav">
<li class="activeCatButton"><a href="https://www.blogger.com/null" id="list-one-button" title="menu 1">Menu 1</a>
            </li>
<li><a href="https://www.blogger.com/null" id="list-two-button" title="menu2">Menu 2</a>
            </li>
<li><a href="https://www.blogger.com/null" id="list-three-button" title="menu 3">Menu 3</a>
            </li>
<li><a href="https://www.blogger.com/null" id="list-four-button" title="menu 4">Menu 4</a>
            </li>
</ul>
<ul class="cat-list" id="list-one">
<li><a href="http://imronfhatoni94.blogspot.com/">EMP-BLOG</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 2 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 3 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 4 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 5 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 6 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 7 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 8 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 9 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 10 .........</a>
            </li>
</ul>
<ul class="cat-list" id="list-two">
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 1 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 2 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 3 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 4 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 5 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 6 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 7 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 8 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 9 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 10 .........</a>
            </li>
</ul>
<ul class="cat-list" id="list-three">
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 1 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 2 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 3 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 4 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 5 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 6 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 7 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 8 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 9 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 10 .........</a>
            </li>
</ul>
<ul class="cat-list" id="list-four">
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 1 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 2 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 3 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 4 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 5 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 6 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 7 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 8 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 9 ..........</a>
            </li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2960446593561217907#">Link 10 .........</a>
            </li>
</ul>
</div>
</div>

Sedikit penjelasan :

Letakan CSS nya diatas kode ]]></b:skin>
Letakan  Javascript nya diatas kode  </head>   untuk lebih efektif  bisa juga diatas kode  </body>
Letakan HTML nya dimanapun anda ingin menampilkan accordion widgednya..

Silahkan di edit lagi cssnya untuk modifikasi tampilan accordionnya...



Selamat mencoba semoga bermanfaat...

Read More

Konsep Logo Blog Menggunakan CSS

Pada kesempatan ini share mengenai cara memperindah logo blog sebenarnya ada banyak cara namun jika agan berminat tidak ada salahnya mencoba cara ini,,sebelumnya dalam membuat logo ini saya terinspirsi dari Maz-waone dan Opic-Blog yang keren dan menarik..nah untuk caranya ikuti langkah dibawah ini..

Masuk blog agan
pilih menu template/edit html
kemudian letakan kode dibawah ini pada bagian header blog agan
kalau di template ini saya meletakannya dibawah kode <div id='header-wrapper'>

<a class='emp-logo' href='http://digratisan.blogspot.com/'>
<span class='char char-e'>a</span>
<span class='char-hidden'>rie</span>
<span class='char char-b'>a</span>
<span class='char-hidden'>die</span>
</a>

dan seperti biasanya letakan kode cssnya diatas ]]></b:skin>

.emp-logo {display : block;width : 170px;height : 40px;margin :5px;
position : relative;}
.emp-logo span {display : block;float : left;margin : 0;height : 35px;margin-left :-3px; font-family:Alike,Georgia,"URW Bookman L",Serif;}
.emp-logo .char-e, .emp-logo .char-b{text-shadow :0 2px 2px #000;
color : #eee;font-size:48px;font-weight:bold !important;
transition : all 1s ease-out;}
.emp-logo .char-b {}
.emp-logo .char-b {left : -2px;border-color :none;}
.emp-logo .char-b + span {margin-left :0px;}
.emp-logo .char-hidden {font-size:28px;font-weight:bold !important;
text-decoration : none;letter-spacing : 0px;color : #58FAF4 ;width : 0;
opacity : 0;margin-top : 12px;overflow : hidden;
transition : width 0.5s 0.5s ease-in-out, opacity 0.5s 0.5s ease-out;
text-shadow :0 2px 2px #000;}
.emp-logo:hover .char-hidden {width : 50px;opacity : 1;
transition : width 0.6s 0.5s ease-in-out, opacity 0.3s 0.3s ease-out;} 
.emp-logo:hover .char-e, .emp-logo:hover .char-b{color:red;transition-duration: 1s;}
  .emp-logo:hover .char-m{margin-left :-12px;}

sampai langkah ini memang sudah selesai...
tetapi judul blog agan yang sebelumnya akan berbenturan dengan logo yang agan pasang

untuk menyembunyikan judul blog agan yang sebelumnya tambahkan kode display:none
pada script header sebelumnya

dan untuk beberapa script yang saya tandai  bisa agan sesuaikan atau dimodifikasi lagi sesuai kemauan dan selera masing - masing....

Selamat mencoba semoga bermanfaat...

Read More