2013 ~ tips dan trick

Sunday, August 4, 2013

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

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

Super Accordion Widged Memeperindah Tampilan Blog

10:46 AM tips dan tricks, widget 2 comments

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(http://1.bp.blogspot.com/-69-QqA5WTog/UIgt60nz0TI/AAAAAAAAANI/FQL2BK6hA4Q/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...

Konsep Logo Blog Menggunakan CSS

10:37 AM css No comments

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,&quot;URW Bookman L&quot;,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...

Tooltip Sederhana on Related Post

10:33 AM all post, tooltip No comments

Pada Postingan ini saya kana share mengenai tooltip on related post mungkin agan sudah tau maksudnya yaitu memberi efek tooltip pada related post untuk penggunaannya sebagai berikut..

Masuk blog agan
pilih menu template
kemudian cari kode ]]></b:skin> gunakan ctrl + f untuk memudahkan pencarian
setelah ketemu letakan kode dibawah ini tepat diatasnya

/* EMP-BLOG Related Posts --- */
        .related-post .post-thumbnail {
        z-index: 1;
        position: relative;
        width: 98px;
        height: 98px;
        margin: 0;
        display: block;
        border-right: 1px solid #333;
        border-bottom: 1px solid #333;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: inset 2px 2px 5px #444;
        -moz-box-shadow: inset 2px 2px 5px #444;
        box-shadow: inset 2px 2px 5px #555;
        }
        .related-post {
        float: left;
        position: relative;
        width: 98px;
        height: 98px;
        margin: 0 10px 10px 0;
        background: #333;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        }
        .related-post .related-post-title {
        display: none;
        float: left;
        background: #000;
        color: #fff;
        text-shadow: none;
        font-weight: bold;
        padding: 10px;
        position: absolute;
        top: -75px;
        left: 40px;
        z-index: 2;
        width: 200px;
        -webkit-box-shadow: 0 0 2px #444;
        -moz-box-shadow: 0 0 2px #444;
        box-shadow: 0 0 2px #444;
        }
        .related-post:hover .related-post-title {display: block;}

Selanjutnya paste kode dibawah ini dimana anda ingin menempatkan related postnya
misalnya agan ingin menempatkan dibawah postingan maka cari kode <data:post.body/>
kemudian paste kode dibawah ini tepat diatasnya

<div id='related-posts'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>//<![CDATA[
    var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
    var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
    //]]></script>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
    </b:if>
    </div>
    <div class='clear'/>

untuk penyusuaiannya silahkan di edit lagi kode yang diatas ]]></b:skin> sesuaikan dengan tampilan blog agan,selamat mencoba semoga bermanfaat...

Membuat Floating Formulir Kontak Blogger

10:32 AM floating, tips dan tricks 1 comment

Pada postingan ini saya akan share mengenai cara membuat floating kontak widged terbaru dari blogger ini untuk pemasangganya cukup simple silahkan ikuti langkah dibawah ini...

masuk blog anda telebih dahulu
kemudian menuju halaman tata letak/add gadged
kemudian pilih gaged lainnya
setelah itu pada urutan kedua pilih Formulir Kontak

Setelah itu simpan widged

kemudian kita beralih ke menu template/edit html

jika sudah cari kode ]]></b:skin> gunakan ctrl + f

setelah itu letakan kode dibawah ini tepat diatas tag ]]></b:skin>

/*Floating Contact by empblogspot.com*/
.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 255px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a {
 padding: 5px 10px;
 background: #2E9AFE;
 color: white;
 font-weight: bold;
 display: inline-block;
 *display: block;
 zoom: 1;
}
.floating-ct-body {
 height: 285px;
 background: white;
 border: 2px solid #848484;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: left;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}

Setelah itu cari kode </body> dan letakan kode dibawah ini tepat diatas tag </body>

<script type='text/javascript'>
//<![CDATA[
/*Floating Contact by empblogspot.com*/
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>
</script>

Silahkan di edit sendiri kode yang saya tandai sesuai selera agan masing masing
terakhir Simpan template agan dan lihat hasilnya...
selamat mencoba semoga bermanfaat....

tips dan trick

This is default featured slide 1 title

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title

Sunday, August 4, 2013

Widget Entri Populer dengan Gambar Berputar

Wednesday, July 31, 2013

Super Accordion Widged Memeperindah Tampilan Blog

Konsep Logo Blog Menggunakan CSS

Tooltip Sederhana on Related Post

Membuat Floating Formulir Kontak Blogger

Labels

Blog Archive

Followers

Blogger news

About

Sunday, August 4, 2013

Wednesday, July 31, 2013

Social Profiles

Labels

Blog Archive

Followers

Blogger news

About