logo blog

Membuat Menu Bar Blogger With CSS Effect Whirling

Membuat Menu Bar Blogger With CSS Effect Whirling
menu bar di blogger

Membuat Menu Bar Di Blogger Only With CSS Effect Whirling.

Cara membuat menu bar responsive di blogger dengan css efek berputar pada saat menu drop down di sentuh mouse atau cursor. Bagi agan-agan yang ingin membuat tampilan menubar lebih menarik dengan sedikif efek dari css, di sini mas tamvan akan kasih efek css beputar pada menu drop don pada saat di sentuk cursor.
Untuk yang ingin melihat tampilan dari menu bar drop down responsive efek berputar ini, silahkan lihat pada link di bawah ini.

Dan Jangan lupa untuk baca tutorial lainnya di blog mas tamvan ini.



Nah untuk tutorial cara memasang menu barnya sangat mudah, kalian uma menggunakan CSS dan HTML saja, jadi tidak akan terlalu memberatkan blog pada saat proses load halaman. Silahkan ikuti tutorialnya di bawah ini.

Membuat Menu Bar Blogger With CSS Effect Whirling / berputar

  • Login ke Blogger.com
  • Pilih Template -> Edit HTML, Cari Kode
  • ]]></b:skin> Atau </style>
  • Setelah ketemu, masukan CSS di bawah ini tepat di salah satu kode di atas!!

/*Menubar Efek Berputar*/
.menu, .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    height: 58px;
}
.menu li {
    background: -moz-linear-gradient(#292929, #252525);
    background: -ms-linear-gradient(#292929, #252525);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
    background: -webkit-linear-gradient(#292929, #252525);
    background: -o-linear-gradient(#292929, #252525);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
    background: linear-gradient(#292929, #252525);

    border-bottom: 2px solid #181818;
    border-top: 2px solid #303030;
    min-width: 160px;
}
.menu > li {
    display: block;
    float: left;
    position: relative;
}
.menu > li:first-child {
    border-radius: 5px 0 0;
}
.menu a {
    border-left: 3px solid rgba(0, 0, 0, 0);
    color: #808080;
    display: block;
    font-family: 'Lucida Console';
    font-size: 18px;
    line-height: 54px;
    padding: 0 25px;
    text-decoration: none;
    text-transform: uppercase;
}
.menu li:hover {
    background-color: #1c1c1c;
    background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
    background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
    background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
    background: -o-linear-gradient(#1c1c1c, #1b1b1b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
    background: linear-gradient(#1c1c1c, #1b1b1b);

    border-bottom: 2px solid #222222;
    border-top: 2px solid #1B1B1B;
}
.menu li:hover > a {
    border-radius: 5px 0 0 0;
    border-left: 3px solid #C4302B;
    color: #C4302B;
}
/* submenu styles */
.submenu {
    left: 0;
    max-height: 0;
    position: absolute;
    top: 100%;
    z-index: 0;

    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
}
.submenu li {
    opacity: 0;

    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);

    -webkit-transition: opacity .4s, -webkit-transform .5s;
    -moz-transition: opacity .4s, -moz-transform .5s;
    -ms-transition: opacity .4s, -ms-transform .5s;
    -o-transition: opacity .4s, -o-transform .5s;
    transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
    border-left: 3px solid #454545;
    border-radius: 0;
    color: #ffffff;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
    max-height: 2000px;
    z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
    opacity: 1;

    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}

.submenu li:nth-child(1) {
    -webkit-transition-delay: 350ms;
    -moz-transition-delay: 350ms;
    -ms-transition-delay: 350ms;
    -o-transition-delay: 350ms;
    transition-delay: 350ms;
}
.submenu li:nth-child(2) {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -ms-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
.submenu li:nth-child(3) {
    -webkit-transition-delay: 250ms;
    -moz-transition-delay: 250ms;
    -ms-transition-delay: 250ms;
    -o-transition-delay: 250ms;
    transition-delay: 250ms;
}
.submenu li:nth-child(4) {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -ms-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
.submenu li:nth-child(5) {
    -webkit-transition-delay: 150ms;
    -moz-transition-delay: 150ms;
    -ms-transition-delay: 150ms;
    -o-transition-delay: 150ms;
    transition-delay: 150ms;
}
.submenu li:nth-child(6) {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -ms-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
.submenu li:nth-child(7) {
    -webkit-transition-delay: 50ms;
    -moz-transition-delay: 50ms;
    -ms-transition-delay: 50ms;
    -o-transition-delay: 50ms;
    transition-delay: 50ms;
}
.submenu li:nth-child(8) {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}



  • Tahap selanjutnya, tinggal memasukan HTMLnya, silahkan cari kode <div class='outer-wrapper'> atau yang hampir sama seperti itu.
  • Lalu masukan HTML di bawah ini tepat di atasnya.

<ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="#s1">Menu 1</a>
        <ul class="submenu">
            <li><a href="http://mastamvan.blogspot.com/">Submenu a</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu b</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu c</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu d</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu e</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu f</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu g</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu h</a></li>
        </ul>
    </li>
    <li class="active"><a href="#s2">Menu 2</a>
        <ul class="submenu">
            <li><a href="http://mastamvan.blogspot.com/">Submenu a</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu b</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu c</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu d</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu e</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu f</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu g</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu h</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>
        <ul class="submenu">
            <li><a href="http://mastamvan.blogspot.com/">Submenu a</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu b</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu c</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu d</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu e</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu f</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu g</a></li>
            <li><a href="http://mastamvan.blogspot.com/">Submenu h</a></li>
        </ul>
    </li>
    <li><a href="http://mastamvan.blogspot.com/">Menu 4</a></li>
    <li><a href="http://mastamvan.blogspot.com/2015/10/membuat-menu-bar-blogger-with-css.html>Back To Tutorial</a></li>
</ul>


  • Silahkan Save template dan lihat hasilnya, Salam Tamvan
Silahkan ganti link  http://mastamvan.blogspot.com/

Mudah kan, kita hanya menggunakan CSS saja untuk membuat tampilan menu bar lebih bagus.

Cukup sekian dan terimakasih, tutorial dari mas tamvan ini tentang cara membuat menu bar di blogger ini, semoga bermanfaat, kalo ada kesulitan atau ada yang mau di tanyakan silahkan bertanya di kolom komentar, dengan senang hati kalo ada waktu saya akan blz.

Animasi Loading Halaman Jam Digital Di Blog

Animasi Loading Halaman Jam Digital Di Blog
loading page blogger

Cara Membuat Loading Jam Di Blogger seperti blog kang rian.com

Membuat Animasi Loading Halaman Jam Digital Di Blog Dengan CSS dan Jquery, bagi kalian yang suka mengunjungi blog kang rian.com sudah pasti akan melihat progres loading halaman yang sangat bagus, sebelum halaman terbuka akan tampil sebuah jam dan kopi yang menutupi halaman tersebut. Nah di sini saya akan berbagi CSS dan Jquery yang di gunakan oleh kang rian untuk membuat animasi loading halaman di blognya, yang membuat tampilan blog semakin bagus, jangan khawatir blog akan jadi berat karena ini tidak memerlukan banyak script yang akan membuat blog jadi berat. 

Tambahan, silahkan baca tutorial lainnya di blog mas tamvan ini.



Untuk cara pemasangan animasi loading page di blognya pun sangat mudah, silahkan ikuti langkah-langkah di blog ini.

Cara Membuat animasi loading blog Jam digital di blog

  • Login ke Blogger.com
  • Pilih Template -> Edit HTML, Cari Kode
  • ]]></b:skin> Atau </style>
  • Setelah ketemu, masukan CSS di bawah ini tepat di salah satu kode di atas!!

/*Loading Jam Digital*/
#clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(http://lh5.googleusercontent.com/-7FvgIJc3tfU/U6rOIebp0JI/AAAAAAAAFdQ/cU0C7gra8Hc/s90/ajaxloader.gif) no-repeat center 85%; z-index:+100000; cursor:default; display:none; } .wrapper-clockdate { padding:25px; max-width:600px; width:100%; text-align:center; -webkit-border-radius:3px; border-radius:3px; margin:0 auto; margin-top:15%; -webkit-box-shadow:inset 0px 0px 10px #222; box-shadow:inset 0px 0px 10px #222; -webkit-border-radius:5px; border-radius:5px; background-color:#2f2f2f; } #clock-large { font-family:Orbitron, sans-serif; font-size:60px; text-shadow:0px 0px 1px #fff; color:#fff; } #clock-large span { color:#888; text-shadow:0px 0px 1px #333;font-size:30px;position:relative;top:-27px;left:-10px; } #date-large { letter-spacing:15px; font-size:14px; font-family:arial,sans-serif; color:#fff; }


  • Langkah Terakhir, kalian tinggal memasukan Jquerynya.
  • Cari </body> lalu masukan jquery di bawah ini tepad di atasnya.

<script type='text/javascript'>
// Javascript Loading Halaman
//<![CDATA[
$(document.body).append('<div id="clockdate-full"><div class="wrapper-clockdate"><div id="clock-large"/><div id="date-large"/></div></div>');
$(window).on("beforeunload", function() {
    $('#clockdate-full').fadeIn(500).delay(8000).fadeOut(1000);
});

// Jam Besar
function showTime(){var a_p="";var today=new Date();var curr_hour=today.getHours();var curr_minute=today.getMinutes();var curr_second=today.getSeconds();if(curr_hour<12){a_p="<span>AM</span>"}else{a_p="<span>PM</span>"}if(curr_hour==0){curr_hour=12}if(curr_hour>12){curr_hour=curr_hour-12}curr_hour=checkTime(curr_hour);curr_minute=checkTime(curr_minute);curr_second=checkTime(curr_second);document.getElementById("clock-large").innerHTML=curr_hour+" : "+curr_minute+" : "+curr_second+" "+a_p}function checkTime(i){if(i<10){i="0"+i}return i}setInterval(showTime,500);
// Tanggal Besar
var months=["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];var myDays=["Minggu","Senin","Selasa","Rabu","Kamis","Jum&#39;at","Sabtu"];var date=new Date();var day=date.getDate();var month=date.getMonth();var thisDay=date.getDay(),thisDay=myDays[thisDay];var yy=date.getYear();var year=(yy<1000)?yy+1900:yy;document.getElementById("date-large").innerHTML="<b>"+thisDay+"</b>, "+day+" "+months[month]+" "+year;

 //]]>
</script>

  • Nah sekarang tinggal save templatenya.
Cukup itu saja tutorial dari mas tamvan tentang cara membuat loading halaman jam digital di blogger seperti blog kang rian semoga bermanfaat. Jika ada kesulitan atau ada yang mau di tanyakan, silahkan bertanya di kolom komentar ya.

Cara Mudah Memasang Menubar Drop Down Di Blogger

Cara Mudah Memasang Menubar Drop Down Di Blogger

Cara Mudah Membuat Menu Bar Drop Down Di Blogger

Mas Tamvan, cara mudah dan gampang membuat menubar dan sub menu bar drop down di blogger. Gimana sih cara membuat menu bar di blogger dan gimana cara mengganti tulisan di menubar dengan link label blog kita sendiri?,. Di sini saya bagikan menu bar yang sangat simple dan tentunya elegan untuk di pasang pada blog yang akan membuat blog tampil rapih dan akan membuat pengunjung blog nyaman untuk melihat semua category yang ada pada blog agan. Bagi kalian yang ingin membuat menu bar dan sub menu bar dengan mudah di blogger silahkan simak tutorial di blog mas tamvan ini.
Sebelum di pasang menubar pada blog kalian, sebaiknya lihat dulu tampilan menubar yang sudah jadi pada link berikut.

Selain menu bar di blog mas tamvan juga bagikan tutorial membuat widget keren di blogger, silahkan baca di link berikut ini.


Nah untuk tutorial cara membuat menubar dan sub menu barnya, silahkan ikuti tutorial di bawah ini.
  • Login ke Blogger.com
  • Pilih Template -> Edit HTML, Cari Kode
  • ]]></b:skin> Atau </style>
  • Setelah ketemu, masukan CSS di bawah ini tepat di salah satu kode di atas!!

/*Menubar Simple Elegan*/

#navbarborder {
 width:977px;
 height:31px;
 border:1px solid #191919;
 margin-top:-18px;
 padding:0px;
 border-radius:3px
}
#navbar {
 background:url(http://www.nonton.mobi/wp-content/themes/nonton.mobi/images/xaubxjmdt.png.pagespeed.ic.-8Wc2IaG-w.png);
 width:976px;
 height:30px;
 color:#fff;
 margin:0px;
 padding:0px;
 border-right:1px solid #333;
 background-repeat:repeat-x;
 font-family:Oswald,Arial,Helvetica,sans-serif
}
#navbarleft {
 width:100%;
 float:left;
 margin:0px;
 padding:0px;
 overflow:hidden
}
#nav {
 margin:0px;
 padding:0px
}
#nav ul {
 float:left;
 list-style:none;
 margin:0px;
 padding:0px
}
#nav li {
 float:left;
 list-style:none;
 margin:0px;
 padding:0px;
 border-right:1px solid #181818;
 border-left:1px solid #333
}
#nav li a,#nav li a:link,#nav li a:visited {
 color:#ccc;
 display:block;
 font-size:11px;
 font-weight:normal;
 line-height:24px;
 text-transform:uppercase;
 padding:4px 10px 2px 14px;
  text-decoration: black;
}
#nav li a:hover,#nav li a:active {
 color:#ccc;
 background:#333;
 margin-top:0px;
 padding:4px 10px 2px 14px;
 text-decoration:none
}
#nav li li a,#nav li li a:link,#nav li li a:visited {
 background:#333;
 width:156px;
 color:#ccc;
 font-size:11px;
 font-family:'Oswald',arial,serif;
 font-weight:normal;
 text-transform:uppercase;
 float:none;
 margin:0px;
 padding:3px 5px 3px 5px;
 border-bottom:1px solid #242424;
 border-left:1px solid #161616;
 border-right:2px solid #242424;
 border-top:1px solid #414141
}
#nav li li a:hover,#nav li li a:active {
 background:#333;
 color:#ccc;
 padding:3px 5px 3px 5px;
 border-bottom:1px solid #242424;
 border-left:1px solid #191919;
 border-right:2px solid #97c000;
 border-top:1px solid #414141
}
#nav li ul.sub-menu {
 float:left;
 margin-left:-2px;
 padding:0px;
 border:1px solid #0e0e0e;
 width:507px;
 box-shadow:0px 0px 2px 2px #111;
 position:absolute;
 z-index:10!important
}
#nav li ul {
 z-index:9999;
 position:absolute;
 left:-999em;
 height:auto;
 min-width:142px;
 overflow:hidden;
 margin:0px;
 padding:0px
}
#nav li li {
 border:none
}
#nav li ul a {
 width:140px
}
#nav li ul a:hover,#nav li ul a:active {
}
#nav li ul ul {
 margin:-32px 0 0 171px
}
#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul {
 left:-999em
}
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul {
 left:auto
}
#nav li:hover,#nav li.sfhover {
 position:static
}

Nah sekarang tinggal memasukan HTML untuk menampilkan menu bar pada blog kalian, Terserah mau pasang dimana, Entah itu di Widget [HTML/Javascript], entah mau memasangnya di Edit HTML. Namun di tutorial ini saya akan berikan cara memasang menu barnya pada Edit HTML yang akan di letakan di bawah Header.
  • Cari </head> dan masukan HTML di bawah ini tepat di bawahnya!! 

<div id="navbarborder">
 <div id="navbar">
  <div id="navbarleft">
   <ul id="nav">
   <li><a href="/" title="Home">Home</a></li>
   <ul id="menu-main-menu" class="menu"><li id="menu-item-77" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-77"><a href="#">Genres</a>
<ul class="sub-menu">
 <li id="menu-item-765" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-765"><a href="/search/label/action/">Action</a></li>
 <li id="menu-item-766" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-766"><a href="/search/label/adventure/">Adventure</a></li>
 <li id="menu-item-767" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-767"><a href="/search/label/animation/">Animation</a></li>
 <li id="menu-item-768" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-768"><a href="/search/label/biography/">Biography</a></li>
 <li id="menu-item-769" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-769"><a href="/search/label/comedy/">Comedy</a></li>
 <li id="menu-item-770" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-770">
 <a href="/search/label/crime/">Crime</a></li>
 <li id="menu-item-771" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-771"><a href="/search/label/documentary/">Documentary</a></li>
 <li id="menu-item-772" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-772">
 <a href="/search/label/drama/">Drama</a></li>
 <li id="menu-item-773" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-773"><a href="/search/label/family/">Family</a></li>
 <li id="menu-item-774" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-774"><a href="/search/label/fantasy/">Fantasy</a></li>
 <li id="menu-item-775" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-775"><a href="/search/label/horror/">Horror</a></li>
 <li id="menu-item-776" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-776"><a href="/search/label/musical/">Musical</a></li>
 <li id="menu-item-777" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-777">
 <a href="/search/label/mystery/">Mystery</a></li>
 <li id="menu-item-778" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-778"><a href="/search/label/romance/">Romance</a></li>
 <li id="menu-item-779" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-779"><a href="/search/label/sci-fi/">Sci-Fi</a></li>
 <li id="menu-item-780" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-780"><a href="/search/label/sport/">Sport</a></li>
 <li id="menu-item-781" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-781"><a href="/search/label/thriller/">Thriller</a></li>
 <li id="menu-item-784" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-784"><a href="/search/label/war/">War</a></li>
 <li id="menu-item-3663" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3663"><a href="h/search/label/tv-movie/">TV Movie</a></li>
</ul>
</li>
<li id="menu-item-782" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-has-children menu-item-782">
<a href="/search/label/tv-series/">TV Series</a>
<ul class="sub-menu">
 <li id="menu-item-19673" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19673"><a href="/search/label/complete/">Complete</a></li>
 <li id="menu-item-19674" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-19674">
 <a href="/search/label/on-going/">On Going</a></li>
</ul>
</li>
<li id="menu-item-1938" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1938"><a href="/search/label/anime/">Anime</a></li>
<li id="menu-item-1941" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1941"><a href="/search/label/mandarin/">Mandarin</a></li>
<li id="menu-item-1940" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1940"><a href="/search/label/korea/">Korea</a></li>
<li id="menu-item-1939" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1939"><a href="/search/label/jepang/">Jepang</a></li>
<li id="menu-item-2389" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2389"><a href="/search/label/india/">India</a></li>
<li id="menu-item-15540" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-15540"><a href="/search/label/trailer/">Trailer</a></li>
<li id="menu-item-3880" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3880"><a href="/search/label/request-film/">Request Film</a></li>
<li id="menu-item-952" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-952"><a href="/search/label/dmca-disclaimer-policy/">DMCA/Disclaimer</a></li>
<li id="menu-item-4330" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4330"><a href="/search/label/faq/">FAQ</a></li>
</ul>   </ul>
  </div>
 </div>
</div>

Note :
Silahkan sesuaikan / ganti /search/label/action/ dan yang lainnya dengan link label kalian. Bisa juga dengan link sosial media, sesuaikan juga judul menunya.


Kalo sudah tinggal di save dan lihat hasilnya.
Itulah tutorial cara membuat menubar drop down dan cara membuat sub menu bar di blogger, semoga bermanfaat.
Jangan lupa kritik dan sarannya, apabila da yang mau di tanyakan silahkan bertanya di kolom komentar.

Mega Menu Bar Drop Down For Blogger

Mega Menu Bar Drop Down For Blogger
mega-menubar

Ajax Mega Menu Bar Drop Down For Blogger

Mas Tamvan berbagi ajax menubar atau navigation mega drop down untuk blogger, mega menu drop down ini biasanya digunakan oleh website - website premium yang menyediakan berbagai macam barag elektronk atau tempat download game android, namun di blog mas tamvan ini saya bagikan secara geratis free jequery for menu mega drop down. Di menu ini kita bisa menampilkan beberapa label beserta isi dari label tersebut yang di sertai dengan gambar yang akan membuat blog kita tampil elegan dan pengunjung juga akan tertarik karena sebagian besar orang lebih suka melihat gambar ketimbang membacanya termasuk saya yang lebih suka melihat gambar.




Tutorial Membuat Mega Menu Bar Drop Down For Blogger

Untuk tutorialnya, silahkan simak di bawah ini. Ikuti dengan benar dan tepat + jangan ada yang terlewatkan Okeh.
  • Login ke Blogger.com
  • Pilih Template -> Edit HTML, Cari Kode
  • ]]></b:skin> Atau </style>
  • Setelah ketemu, masukan CSS di bawah ini tepat di salah satu kode di atas!!

/*Mega Menu Bar*/
.admenus *{margin:0;padding:0}ul.admenus{list-style:none;line-height:1;overflow:visible!important}ul.admenus:after{margin:0;padding:0;content:' ';display:block;height:0;clear:both}ul.admenus li{float:left;display:inline;position:relative;font-size:14px;font-weight:400;text-transform:uppercase}ul.admenus li a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#2c2c2c;font-family:'Oswald';font-size:13px;font-weight:400;transition:all .3s ease-in-out}ul.admenus li a:hover,ul.admenus li a.hoverover{background:#f54325;color:#fff}ul.admenus ul{position:absolute;display:none;top:100%;border:1px solid #ccc}ul.admenus li:hover > ul{display:block}ul.admenus ul li{z-index:72;float:none;min-width:160px;background:#f5f5f5;text-shadow:none}ul.admenus ul li a{text-transform:none;font-weight:400;color:#aaa;font-family:'Arial'}ul.admenus ul li a:hover,ul.adajaxmenu ul li a.hover{background:#f54325}ul.admenus ul ul{display:none;left:100%;top:0}ul.adajaxmenu li div.submenu{position:absolute;width:600px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;background:#f0f0f0;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#929292;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all .3s ease-in-out}ul.adajaxmenu li:hover div.submenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.adajaxmenu ul,ul.adajaxmenu ul li{display:block!important;border:0 none!important;margin:0!important;padding:0!important}ul.adajaxmenu ul li{background:none!important;float:none!important}ul.adajaxmenu ul.verticlemenu{position:absolute;width:33%;left:0;top:0;bottom:0;background:#202020}ul.adajaxmenu ul.postslist{position:relative;display:block;width:65%;float:right;margin:0 0 15px!important;background:none}ul.adajaxmenu ul.postslist li{display:block;overflow:hidden;position:relative;min-height:60px;padding:15px 8px 15px 110px !important}ul.adajaxmenu ul.postslist li .imgCont{position:absolute;left:0;top:15px;width:100px;height:70px;overflow:hidden;font-size:0;line-height:0;border:1px solid #929292}ul.adajaxmenu ul.postslist li .imgCont img{position:relative;top:-20px;padding:0;width:100px;height:100px;display:block}ul.adajaxmenu ul.postslist li a{display:block;line-height:1.4;padding:0!important;color:#666;font-family:'Arial';font-size:12px;transition:all .3s ease-in-out}ul.adajaxmenu ul.postslist li a:hover{color:#f54325;background:transparent}ul.adajaxmenu .loader{background:url(http://1.bp.blogspot.com/-CHnyuvNxRys/Vd11gDwxWeI/AAAAAAAAAxc/NArLcwZL-Jw/s1600/loading%2B%25282%2529.gif) no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.adajaxmenu .menuArrow{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #fff;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#adajaxmenu{background:#fff;height:50px;width:100%;position:relative;border:1px solid #e6e6e6;max-width:1100px;margin:0 auto;padding:0}li.search-form{float:right!important;line-height:50px;margin:0 20px 0 0}li.search-form .searchbar{border:none;padding:10px 5px;background:#f9f9f9;color:#fff;width:130px}li.search-form .searchbar:focus{border:none;outline:none;background:#fafafa;color:#666}li.search-form .searchsubmit{background:#f54325;border:none;color:#fff;cursor:pointer;padding:10px 5px;transition:all .3s ease-in-out}li.search-form .searchsubmit:hover{opacity:.9}.search-alert{color:#f9f9f9;padding:2px 15px 2px 40px;display:none;margin:5px;background:#333 url(http://2.bp.blogspot.com/-YwQrdhu_gJg/Vd11gFu4sLI/AAAAAAAAAxY/p3YYWFA-Fyo/s1600/Info.png) no-repeat;background-position:10px;border-radius:5px;text-transform:lowercase}

  • Lanjut, Sekarang Tinggal Memasukan Javascriptnya.
  • Cari </body> dan masukan Javascript di bawah ini tepat di atasnya!! 

<script src='https://rawgit.com/mastamvan/backup/master/megamenu.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
 $('#adajaxmenu').ajaxBloggerMenu({
  numPosts : 4, // Number of Posts to show
  defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image
 });
});

$(function(){
  $('.searchblog').submit(function(e){
    if($('.search-form .searchbar').val().length==0){
       $('.search-form .search-alert').fadeIn().css('display','inline-block');
      e.preventDefault();
    }
  });
});
</script>



  • Nah sekarang tinggal memasukan HTML untuk memanggil perintah Javascript di atas, terserah kalian mau di pasang dimana, enah itu di Edit HTMLnya / di Tataletak.
  • Tapi di sini mas tamvan akan memberikan tutorial untuk memasangnya di bawah HEAD ya.
  • Cari </head> dan masukan HTML di bawah ini tepat di bawahnya!! 

<ul id="adajaxmenu" class="admenus">
    <li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>    
<li>
<a href="#">Webtools</a>
<ul>
<li><a href="https://mastamvan.blogspot.co.id/search/label/Blogger">Blogger</a></li>
<li><a href="https://mastamvan.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="https://mastamvan.blogspot.com/search/label/HTML">HTML</a></li>
<li><a href="https://mastamvan.blogspot.com/search/label/Tools">Tools</a></li>
<li><a href="https://mastamvan.blogspot.com/search/label/Widget">Widget</a></li>
</ul>
</li>
<li>
<a href="#">Widgets</a>
<ul>
<li><a href="/search/label/Widgets">Widgets</a></li>
<li><a href="/search/label/SEO">SEO</a></li>
<li><a href="/search/label/CSS">CSS</a></li>
</ul>
</li>
<li>
<a href="#">Tutorials</a>
<ul>
<li><a href="/search/label/Tutorials">Tutorials</a></li>
<li><a href="/search/label/Blogger">Blogger</a></li>
<li><a href="/search/label/WordPress<">WordPress</a></li>
<li><a href="/search/label/Earning">Earning</a></li>
<li><a href="/search/label/Domain Finder">Domain Finder</a></li>
</ul>
</li>
<li><a href="/search/label/Password Maker">Password Maker</a></li>
<li><a href="/search/label/">Contact</a></li>
<li><a href="/search/label/">Contact</a></li>
<li class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='searchsubmit' type='submit' value='Search'/>
</form>
  <p class='search-alert'>Search form is empty!</p>
</li>    
</ul>
<div class='clear'/>    
<div class='clear'/>

Silahkan sesuaikan / ganti /search/label/Blogger dan yang lainnya dengan link label kalian.
Kalau Mega Menunya tidak tampil, silahkan tambahkan kode dibawah ini tepat diatas kode </head>

<script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
       //]]>
</script>

  • Tinggal di save dan done. salam tamvan.

Cukup sekian dan terimakasih tutorial dari mas tamvan tentang cara membuat mega drop down menu di blogger ini , semoga bermanfaat. jika da yang mau di tanyakan silahkan bertanya di kolom komentar. Kalo tidak ada yang mau di tanyakan saya sarankan untuk tetap berikan komentarnya ya :) sopaya saya jadi lebih semangat lagi.


Widget Recent Post Dengan Navigation

Widget Recent Post Dengan Navigation
recent posts navigation

Membuat Widget Recent Post With Navigation For Blogger

Mas Tamvan berbagi tutorial cara membuat widget recent posts with navigation responsive di blogger, saya sarankan kalian untuk memasang widget recent post ini di blogger karena akan memudahkan pengunjung untuk melihat daftar postingan kalian dengan mudah dan beda dari recent post pada umumnya yang menampilkan beberapa postingan saja, ko gitu, emang bedanya apa? widget recent posts ini sudah di lengkapi dengan Navigation yang akan memudahkan pengunjung buat memilih postingan yang ada pada sebuah blogger atau website dan tentunya widget ini sudah responsive cocok untuk blogger yang isinya tentang seluler, jadi kalo ada yang lebijh bagus nan seo kenapa engga di pasang :)



Tutorial Membuat Widget Recent Post With Navigation


Untuk pemasangannya sangat mudah.
  • Login ke Blogger.com
  • Pilih Template -> Edit HTML, Cari Kode
  • ]]></b:skin> Atau </style>
  • Setelah ketemu, masukan CSS di bawah ini tepat di salah satu kode di atas!!
/*Recent Post Navigation*/
a,
a:visited {
  color: #555;
  outline: none;
  text-decoration: none;
}

a:hover,
a:focus,
a:visited:hover {
  color: #22a1c4;
  text-decoration: none;
}

.terbaru-container {
  background: #fff;
  width: 320px;
  margin: 20px auto;
  padding: 15px;
  border: 1px solid #ccc;
}

#cg-terbaru {
  border: 1px solid #585858;
  width: 100%;
  margin: 0 auto;
}

#terbaru {
  margin: 0px;
}

.cg-elemen {
  margin: 5px 0;
  padding: 5px;
  height: 79px;
  background: #FFF url("http://smruthycollege.com/images/shadow2.png") no-repeat scroll center bottom;
overflow: hidden;
  padding-bottom: 20px;
}

.cg-elemen img {
  padding: 0;
  float: left;
  height: 70px;
  margin-right: 15px;
  width: 70px;
}

.cg-elemen h6,
.cg-elemen h6 a {
  font-size: 14px!important;
  font-weight: 500;
  margin: 0;
  color: #222;
  font-family:'Oswald';
  line-height: 18px;
  text-transform: uppercase;
  text-aligaln:'center';
}

.cg-elemen p {
  font-size: 12px;
  font-family: 'Oswald';
  text-align: left;
  color: #555;
  line-height: normal;
  margin: 5px 0;
}

#cg-loading {
  color: #888;
  font-family: inherit;
  font-size: 100px;
  letter-spacing: -10px;
  text-align: center;
  text-shadow: -5px 0 1px #444;
  background: #fff url(http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif) no-repeat 50% 50%;
  height: 470px;
}

#cg-navigasifeed {
  color: #bbb;
  font-family: Oswald;
  font-size: 12px;
  text-align: center;
  margin: 0px;
}

#cg-navigasifeed a {
  color: #141414!important;
  font-family: inherit!important;
  font-size: 12px!important;
  font-weight: 400!important;
  display: block;
  padding: 5px 10px;
}

#cg-navigasifeed span {
  padding: 5px 10px;
}

#cg-navigasifeed .next {
  float: right;
}

#cg-navigasifeed .previous {
  float: left;
}

#cg-navigasifeed .home {
  text-align: center;
}

#cg-navigasifeed a:hover,
#cg-navigasifeed span.noactived {
  color: transparant!important;
}
@media screen and (max-width:700px) {
    .terbaru-container, #terbaru, #cg-navigasifeed {
        width:auto;
    }
}


@media screen and (max-width:300px) {
    .cg-elemen img {
        display:none;
    }
}


  • Lanjut, Sekarang Tinggal Memasukan Javascriptnya.
  • Cari </body> dan masukan Javascript di bawah ini tepat di atasnya!! 
  • Kalo tidak tampil coba di pindah ke atas </head>

<script type='text/javascript'>
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://mastamvan.blogspot.com/";
var charac = 50;
var urlprevious, urlnext;

function cyberghost(ghost, banget) {
  var showfeed = ghost.split("<");
  for (var i = 0; i < showfeed.length; i++) {
    if (showfeed[i].indexOf(">") != -1) {
      showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">") + 1, showfeed[i].length);
    }
  }
  showfeed = showfeed.join("");
  showfeed = showfeed.substring(0, banget - 1);
  return showfeed;
}

function showterbaru(json) {
  var entry, posttitle, posturl, postimg, postcontent;
  var showblogfeed = "";
  urlprevious = "";
  urlnext = "";
  for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
      urlprevious = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
      urlnext = json.feed.link[k].href;
    }
  }
  for (var i = 0; i < numfeed; i++) {
    if (i == json.feed.entry.length) {
      break;
    }
    entry = json.feed.entry[i];
    posttitle = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    } else {
      postcontent = "";
    }
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = "http://1.bp.blogspot.com/-eiX9aalicz8/VWEORfDN71I/AAAAAAAAHdg/vfHyEfYKBh0/s1600/no_image.gif";
    }
    showblogfeed += "<div class='cg-elemen'>";
    showblogfeed += "<a =href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
    showblogfeed += "<p>" + cyberghost(postcontent, charac) + "...</p>";
    showblogfeed += "</div>";
  }
  document.getElementById("terbaru").innerHTML = showblogfeed;
  showblogfeed = "";
  if (urlprevious) {
    showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
  } else {
    showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
  }
  if (urlnext) {
    showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
  } else {
    showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
  }
  showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
  document.getElementById("cg-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url) {
  var p, parameter;
  if (url == -1) {
    p = urlprevious.indexOf("?");
    parameter = urlprevious.substring(p);
  } else if (url == 1) {
    p = urlnext.indexOf("?");
    parameter = urlnext.substring(p);
  } else {
    parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
  }
  parameter += "&callback=showterbaru";
  incluirscript(parameter);
}

function incluirscript(parameter) {
  if (startfeed == 1) {
    removerscript();
  }
  document.getElementById("terbaru").innerHTML = "<div id='cg-loading'></div>";
  document.getElementById("cg-navigasifeed").innerHTML = "";
  var archievefeed = urlblog + "/feeds/posts/default" + parameter;
  var terbaru = document.createElement('script');
  terbaru.setAttribute('type', 'text/javascript');
  terbaru.setAttribute('src', archievefeed);
  terbaru.setAttribute('id', 'MASLABEL');
  document.getElementsByTagName('head')[0].appendChild(terbaru);
  startfeed = 1;
}

function removerscript() {
  var elemen = document.getElementById("MASLABEL");
  var parent = elemen.parentNode;
  parent.removeChild(elemen);
}
onload = function() {
  navigasifeed(0);
}
</script>


Note:
Silahkan Ganti URL http://mastamvan.blogspot.com/ dengan url blog kalian


  • Silahkan Save Template.
  • Sekarang tinggal memasukan HTML [Pemanggil Javascript]
cara memasukan script ke widget
  • Masuk ke Tata Letak, Tambahkan Gadget, Terus cari HTML/Javascript.
  • Lalu masukan HTML di bawah ini ke dalam widgrt HTML/Javascrip.

<body>
  <div class="terbaru-container">
    <div id="terbaru"></div>
    <div id="cg-navigasifeed"></div>
  </div>
</body>

  • Tinggal save dan lihat hasilnya, Salam Tamvan.

Itulah cara membuat widget recent post plush navigation yang seo friendly dan responsive ini, semoga bermanfaat. jangan lupa tinggalkan komentarnya ya. biar saya semangat copas script lainnya :)

Memasang Syntax Highlighter Pre Code Di Blogger

Memasang Syntax Highlighter Pre Code Di Blogger
Membuat Syntax Highlighter Pre Code Di Blogger

Cara Membuat Syntax Highlighter Pre Code Di Blogger

Mas Tamvan bebrabgi tutorial cara memasang Syntax Highlighter Pre Code pada post di blogger, biasanya ini sering di sebut dengan nama syntax highlighting, Prism Syntax Highlighter, Pre Code Parser atau Pre Code Seleksi, fungsi dan keuntungan menggunakan Syntax Highlighterini adalah untuk membuat tampilan script lebih jelas pada sebuah post dan tentunya akan memudahkan si pembaca untuk mencopy dan membedakan mana Script HTML, CSS, Javascript dan Jquery. Jadi tidak akan bingung untuk meletakannya dimana. 

Jadi bagi kalian yang suka membagikan script di blognya, cocok sekali untuk menggunakan Prism Syntax Highlighterini yang akan membuat si pengunjung lebih jelas memahami perbedaan penempatan sebuah script. 

Untuk melihat tampilan Prism Syntax Highlighter dengan jelas silahkan lihat di link berikut ini.




Tutorial Cara Membuat Prism Syntax Highlighter

  • Login ke Blogger.com
  • Pilih Template -> Edit HTML, Cari Kode
  • ]]></b:skin> Atau </style>
  • Setelah ketemu, masukan CSS di bawah ini tepat di salah satu kode di atas!!

/* CSS Simple Pre Code */
pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
}

  • Lanjut, Sekarang Tinggal Memasukan Javascriptnya.
  • Cari </body> dan masukan Javascript di bawah ini tepat di atasnya!!

<script type='text/javascript'>
//<![CDATA[
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

  • Sekarang tinggal Save Template.
  • Sekarang Tinggal bagaimana penerapan Syntax Highlighter Pre Code Di Post Bloggernya?
Ini HTML untuk membungkus script dengan Syntax Highlighter.

<pre class='code code-html'><label>HTML</label><code>
Letakan HTMLnya Di Sini
</code></pre>

<pre class='code code-css'><label>CSS</label><code>
Letakan CSSnya Di Sini
</code></pre>

<pre class='code code-javascript'><label>JS</label><code>
Letakan Javascriptnya Di Sini
</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>
Letakan Jquerynya Di Sini
</code></pre>

memasukan script ke postingan
  • Silahkan masuk / bikin postingan baru.
  • Nanti tinggal masuk ke tab HTML pada postingannya.
  • Terus masukan HTML untuk membungkus scriptnya.
  • Masuk lagi ke tab Compose dan pastekan script yang mau agan bagikan.

Ok, sampai disini sudah tamvan, tinggal publikasikan.
Note :
Penulisan di Tab HTML cukup masukan script buat membungkus kode yang mau agan share, karena kalo di masukan pada mode HTML nantinya akan error.


Cukup sekian dan terimakasih, semoga artikel dari Mas Tamvan tentang Syntax Highlighter Pre Codeini bermanfaat, jika ada yang mau di tanyakan silahkan bertanya di kolom komentar ya :)

 

Sitemap Blogger Responsive Seo Friendly

Sitemap Blogger Responsive Seo Friendly
widget sitemap

Cara Membuat Widget Sitemap Responsive Seo Friendly

Mas Tamvan berbagi tutorial cara membuat sitemap atau Daftar Isi yang Seo Friendly Dan Responsive, Keuntungan menggunakan daftar isi atau sitemap di blog adalah untuk menampilkan semua artikel dalam sebuah widget atau laman. Jadi akan memudahkan pengunjung karena tidak perlu banyak membuka sebuah link next post / label satu - satu yang akan membuat pengunjung bosan dan males membukanya apalagi kalo koneksi si pengunjung lemoth. Maka dengan widget daftar isi / sitemap ini akan memudahkannya, karena tinggal membuka widget ini semua daftar bisa tampil di satu halaman. Widget sitemap ini juga bisa di letakan di laman atau halaman statistik.




Ok, Langsung ke Tutorialnya

Membuat Sitemap Blogger Responsive Seo Friendly


  • Login ke Blogger.com
  • Pilih Template -> Edit HTML, Cari Kode
  • ]]></b:skin> Atau </style>
  • Setelah ketemu, masukan CSS di bawah ini tepat di salah satu kode di atas!!

#wrapper{
  margin:30px auto;
  max-width:600px;
}

a:link {
color:#fc4f3f;
text-decoration:none;
outline:none;
transition:all .25s;
}

a:visited:hover {
color:#fc4f3f;
text-decoration:none;
}

a:visited,a:link:hover {
color:#444;
text-decoration:none;
}

table {
max-width:100%;
width:100%;
margin:1.5em auto;
}

table td,.post-body table caption {
border:1px solid #d9d9d9;
text-align:left;
vertical-align:top;
padding:10px;
}

table th {
border:1px solid #009abf;
text-align:left;
vertical-align:top;
padding:10px;
}

table.tr-caption-container {
border:1px solid #eee;
}

th {
font-weight:700;
}

table caption {
border:none;
font-style:italic;
}

td:hover {
background:#fafafa;
}

#bp_toc {
background:#334;
color:#666;
margin:0 auto;
padding:5px;
}

span.toc-note {
display:block;
text-align:center;
color:#fff;
font-family:'Open Sans';
font-weight:700;
text-transform:uppercase;
font-size:30px;
line-height:normal;
margin:0 auto;
padding:20px;
}

.toc-header-col1 {
background-color:#f5f5f5;
width:250px;
padding:10px;
}

.toc-header-col2 {
background-color:#f5f5f5;
width:75px;
padding:10px;
}

.toc-header-col3 {
background-color:#f5f5f5;
width:125px;
padding:10px;
}

.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited {
font-size:13px;
text-decoration:none;
color:#aaa;
font-family:'Open Sans';
font-weight:700;
letter-spacing:.5px;
}

.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover {
text-decoration:none;
}

.toc-entry-col1,.toc-entry-col2,.toc-entry-col3 {
background:#fdfdfd;
font-size:89%;
padding:5px;
}

.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a {
color:#666;
font-size:13px;
font-weight: 700;
}

.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover {
color:#e76e66;
}

#bp_toc table {
width:100%;
counter-reset:rowNumber;
margin:0 auto;
}

.toc-entry-col1 {
counter-increment:rowNumber;
}

#bp_toc table tr td.toc-entry-col1:first-child::before {
content:counter(rowNumber);
min-width:1em;
margin-right:.5em;
}

td.toc-entry-col2 {
background:#fafafa;
}


  • Sekarang Save Template
  • Lanjut ke tahap berikutnya
  • Nah di sini agan pilih mau di pasang di mana Sitemap / Daftar isi ini.
  • Bisa di halaman statistik [Laman] atau di widget [Tataletak]
  • Ini HTML yangharus agan masukan ke laman / widget

<sitemap-tamvan>
<div id='wrapper'>
<div id="bp_toc">
</div>
<script src="https://rawgit.com/mastamvan/backup/master/sitemap-seo.js" type="text/javascript"></script> <script src="http://mastamvan.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
  </div>
  </sitemap-tamvan>
  • Memasang HTML

Memasang Sitemap / Daftar Isi di Laman.

laman pada blogger
  • Masuk ke laman -> Klik laman baru, terus masukan HTML di atas.
  • Ingat, paste pada mode HTML, lihat pojok kanan atas ada Compose dan HTML, klik dulu HTMLnya, lalu paste scriptnya.
  • Silahkan kasih judul Sitemap

Memasang Sitemap / Daftar Isi di Widget.

cara memasukan script ke widget
  • Masuk ke Tata Letak, Tambahkan Gadget, Terus cari HTML/Javascript.
  • Klik Itu dan masukan HTML Sitemapnya, Lalu save

Note:
Silahkan Ganti URL http://mastamvan.blogspot.com/ dengan url blog kalian


Dan Selesai, Salam Tamvan.
Cukup sekian tutorial dari mas tamvan, tentang cara membuat sitemap / daftar isi di blog yang responsive dan seo friendly, semoga brmanfaat. Jangan lupa tuk share dan saya tunggu komentar kalian :) 

 

Membuat Widget About Me Dengan Tombol Pop Up

Membuat Widget About Me Dengan Tombol Pop Up
widget about me pop up

Cara Membuat Widget About Me Dengan Tombol Pop Up

Mas Tamvan Share Tutorial Blogger Membuat Widget About Me Dengan Tombol Pop Up, pada umumnya about me di letakan pada bagian sidebar dan footer yang membuat loading blog jadi berat karena harus meload widget tersebut untuk tampil di blog, namun dengan widget pop up ini semuanya akan menjadi lebih baik, karena yang akan di load terlebih dahulu oleh sebuah browser adalah tampilan conten terlebih dahulu. Widget About Me Dengan Tombol Pop Up
Nah di blog mas tamvan ini akan di berikan tampilan yang berbeda plus membuat halaman blog tidak terlalu berat karena harus meload widget di sidebar / footer, dengan tampilan yang simple nan elegan akan membuat blog semakin tamvan dan memudahkan pengunjung untuk melihat contat si pengurus web atau blogger.
Contoh Widget, Buka link di bawah dan klik pada menu Click About




Membuat Widget About Me Keren Di blogger

langsung aja ke tutorialnya :
  • Silahkan kalian masuk terlebih dahulu ke blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> atau </style> 
  • kalo sudah ketemu, masukan CSS di bawah ini tepat di atas kode yang tadi di cari

.boxinner{z-index:999999;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#eee;border-radius:3px;text-align:middle;top:20px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;border-bottom-left-radius:3px;border-bottom-right-radius:3px;box-shadow:0 3px 5px rgba(0,0,0,.3)}
.circle{float:left;height:10px;width:10px;margin:10px 0 0 10px;border-radius:50%}
.circle:first-child{background-color: #EE5C55; border: 1px solid #E93027;}
.circle:nth-child(2){background-color: #F8BC32;border: 1px solid #EFA908;}
.circle:nth-child(3){background-color: #62CB43;border: 1px solid #4CAC2F;}
kepala{background:#E38202;height:50px;width:100%;position:inherit}
#textlogo{color:#FFF;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:60.6%}
#left{background:#333;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}
#left a{color:#999;}#left a:hover{color:#fff;}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6{font-size:15px;padding:15px 25px;font-family:&#39;Roboto Slab&#39;,Arial,sans-serif;color:#999;border-bottom:1px solid #444;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out}
.taber1:hover{background:#f88c00;color:#fff}
.taber2:hover{background:#D92121;color:#fff}
.taber3:hover{background:#0B76B9;color:#fff}
.taber4:hover{background:#27C9E9;color:#fff}
.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#FFD100;color:#fff}
div i{margin-right:10px}
#aboutme{position:absolute;border-radius:50%;background-size:100%;width:30px;height:30px;margin-top:8px;right:5px;border:2px solid #FFCC89;background-image:url(&quot;http://1.bp.blogspot.com/-N3MXtJe8A4w/VYEprWQo0WI/AAAAAAAAA8o/fz57ZUrziMA/s1600/Favicon.png&quot;)}
#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:justify;position:inherit;float:left;font-size:11px}
#aboutus img{width:98%;border:3px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.3);margin-bottom:5px}
.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}
.scrollbarbox .innerone{height:480px;overflow:auto}}
a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}
#popup{visibility:hidden;opacity:0}
#popup:target{visibility:visible;opacity:1;background-color:rgba(0,0,0,0.8);position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:99999999999;-webkit-transition:all 1s;-moz-transition:all 1s;transition:all 1s}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}
.popup-container{position:relative;margin:0 auto;padding:5px 15px;}
a.popup-close{position:relative;top:-24px;border-radius:50px;margin:0 auto;padding:4px 7px;font-size:13px;text-decoration:none;float: right;line-height:1}

  • Kemudian masukan HTML di bawah ini tepat di atas </BODY>

<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'/>
<div class='circle'/>
<div class='circle'/>
<div class='contentbox'>
<kepala><span id='textlogo'>Mas Tamvan</span>
<span id='aboutme'/>
<a class='popup-close' href='#closed' title='Close'><i class="fa fa-power-off"></i></a>
</kepala>
      <br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img src='http://41.media.tumblr.com/5b9a6350da24e2b81caee71afea618d3/tumblr_nhxzb7baG21ska3iko1_400.jpg'/><br/>
  <center><b style="font-size: 17px;">Mas Tamvan</b></center>
  <br/>
Saya hanya membagikan script hasil COPAS, bukan hasil saya sendiri.
Semua script yang saya bagikan, ada yang premium namun banyak juga yang free. Tapi tidak di publikasikan oleh seoarang creatornya.<br/>
Awalnya saya hanya iseng tapi lama kelamaan karena nganggur jadinya ya begini.<br/>
  <br/>
<b>Saya Jadi Seorang COPASOR</b>
Sebetulnya saya juga ingin seperti mereka yang jago di bahasa pemerograman web design namun saya kurang komunikasi dan memang saya kurang pintar kali.<br/>
</div>
</div>
</div>
<div id='left'>
<div class='taber1'><a href='http://www.mastamvan.blogspot.com' target='_blank' title='mastamvan.blogspot.com'><i class="fa fa-child"></i> Blog Mas Tamvan</a></div>
<div class='taber2'><a href='https://plus.google.com/104271002030171539806' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus'/> Google Plus</a></div>
<div class='taber3'><a href='https://www.facebook.com/tejasukmana99' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook'/> Facebook</a></div>
<div class='taber4'><a href='https://twitter.com/Teja_7x' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter'/> Twitter</a> </div>
<div class='taber5'><i class='fa fa-phone'/> Phone: 081266632xxx</div>
  <div class='taber6'><a href='/' target='_blank' title='email'><i class='fa fa-envelope-o'/> email@gmail.com</a></div>
</div>
</div>
</div>
</div></div>

  • Sekarang tinggal meletakan tombol buat membuka widget itu. Saya sarankan letakan di NAVBAR
  • Masukan HTML berikut di navbar blogger kalian, terserah mau di sebelah mana

<li><a class='popup-link' href='#popup'><i class='fa fa-user-secret'/>About Me</a></li>

  • Ok, sekarang tinggal save templatenya and DONE.
  • Salam Tamvan

Note :
Silahkan Ganti informasi tentang about us /me di atas sesuai diri kalian masing - masing
Ganti juga link sosial media dengan link sosmed kalian
Jika Icon Sosial media dan tombol Exit tidak muncul, silahkan masukan font awesome di bawah ini.
Font Awesome Terbaru 4.2.0
Letakan font berikut di atas </head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>


Ok, Cukup sekian tutorial tentang cara membuat widget about me dengan tombol pop up ini, semoga bermanfaat.
Di tunggu kritik dan sarannya.

Membuat Komentar Disqus Show Hide

Membuat Komentar Disqus Show Hide
komentar disqus show hide

Cara Agar Komentar Disqus Menjadi Show Hide.

Mas Tamvan berbagi cara membuat komentar disqus show hide dan mobail friendly. Bagi kalian yang merubah komentar blog menggunakan komentar disqus, lebih baik di rubah menjadi show hide, supaya tidak memberatkan blog atau website pada saat pertama kali di buka atau di load dan tentunya akan membuat template blog menjadi ringan dan elegan tanpa kepanjangan untuk meringankan proses load di komputer atau handpone.




Tutorial Cara Membuat Komentar Disqus Show Hide

  • Login to your blogger.com
  • Next, Go to Template' open. Click on Edit HTML, Search Code ]]></b:skin> or </style>
  • Input css below right on top code ]]></b:skin> or </style>.


.disqus-title{margin:0;text-align:left;background:#efefef;padding:6px 10px;color:#444!important;font-size:100%;font-weight:500;border: 1px solid #ddd;}
.disqus-loader,#disqus-showhide{float:right;cursor:pointer}
#disqus-showhide{display:none}

  • Lanjut, Cari Kode <b:includable id='comments' var='post'>
  • Setelah ketemu, ganti semua kode di bawahnya dengan kode script berikut ini.

    <div class='disqus-title' id='disqus-title'>Disqus Comments<span class='disqus-loader' id='disqus-loader' onclick='loadDisqus()'>Load</span><span id='disqus-showhide' onclick='toggleDisqus(&apos;disqus-comments&apos;)'>Hide</span></div>
    <div id='disqus-comments'>
     <div class='comments' id='comments'>
    <script type='text/javascript'>
                    var disqus_shortname = &quot;DISQUS-USERNAME&quot;;
                    var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                    if (!disqus_blogger_current_url.length) {
                        disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                    }
                    var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                    var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
    </script>
    </div>
    </div>

Sehingga hasilnya akan menjadi seperti ini.

    <b:includable id='comments' var='post'>
    <div class='disqus-title' id='disqus-title'>Disqus Comments<span class='disqus-loader' id='disqus-loader' onclick='loadDisqus()'>Load</span><span id='disqus-showhide' onclick='toggleDisqus(&apos;disqus-comments&apos;)'>Hide</span></div>
    <div id='disqus-comments'>
     <div class='comments' id='comments'>
    <script type='text/javascript'>
                    var disqus_shortname = &quot;DISQUS-USERNAME&quot;;
                    var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                    if (!disqus_blogger_current_url.length) {
                        disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                    }
                    var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                    var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
    </script>
    </div>
    </div>
    </includable>

  • Langkah Terakhir gan, masukan script berikut di atas </BODY>

    <script type='text/javascript'>
    //<![CDATA[
    function toggleDisqus(e){var n=document.getElementById(e),l=document.getElementById("disqus-showhide"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="Hide"):(n.style.display="none",l.innerHTML="Show")};
    //]]>
    var disqus_shortname = "DISQUS-USERNAME";
    function loadDisqus(){var e=document.getElementById("disqus-loader");e.style.display="none";var e=document.getElementById("disqus-showhide");e.style.display="block";!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//"+disqus_shortname+".disqus.com/blogger_item.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}();}
    </script>

CATATAN:
Ganti DISQUS-USERNAME dengan Username Disqus Kalian Ok.

  • Terakhir Simpan template anda dan Done, Salam Tamvan
Cukup sekian dan terimakasih, semoga artikel ini membantu membuat tampilan blog kalian semakin tamvan ya :)
Jika ada yang mau di tanyakan silahkan bertanya di kolom komentar, insya allah nanti saya balas. 

http://www.antoncabon.us/2015/10/cara-memasang-tombol-show-hide-comment-disqus.html 

Widget Profil About Me Keren Di Blog

Widget Profil About Me Keren Di Blog
widget about me for blogger

Cara Membuat Widget Profil About Me Keren Di Blog

Mas Tamvan Berbagi Tutorial Memuat Widget Profil About Me Keren Di Blog Plus Sosial Media yang akan membuat tampilan blog kalian lebih elegan dan membuat para pengunjung betah memandangnya :)
Setiap tutorial yang saya bagikan sangat simple karena saya juga masih newbie belum bisa copas script yang lebih rumit. Anak kemarin sore bisanya apa sih kalo ga copas :3 . Tapi tidak semuanya copas si ada beberapa yang di tambah dan di kurangi supaya lebih maksimal :v


Tutorial Membuat Widget Profil About Me Keren Di Blog

  • Login to your blogger.com
  • Next, Go to Template' open. Click on Edit HTML, Search Code ]]></b:skin> or </style>
  • Input css below right on top code ]]></b:skin> or </style>.

@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

@font-face {
  font-family: 'Museo';
  src: url("http://rocket-design.fr/fonts/museo/museo.eot?") format("eot"), url("http://rocket-design.fr/fonts/museo/museo.woff") format("woff"), url("http://rocket-design.fr/fonts/museo/museo.ttf") format("truetype");
}
* {
  -webkit-font-smoothing: antialiased;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 300;
  line-height: 24px;
  letter-spacing: .02em;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #333333 url(http://sandbox.lucasbonomi.com/img/blur/Retina-Size/10.jpg) no-repeat center center;
  background-size: cover;
}

.profile_card {
  height: 460px;
  width: 260px;
  margin: 15vh auto;
  border-radius: 1px;
  box-shadow: 0 0 0 0.22em rgba(255, 255, 255, 0.35);
}
.profile_card .header-muka, .profile_card .profile {
  height: 230px;
  width: 100%;
  float: left;
}
.profile_card .header-muka {
  background: url(https://lh3.googleusercontent.com/-20w3clSNcfM/VhDM78h4TVI/AAAAAAAAAGI/46DSIH13z6Y/s630-fcrop64=1,00003fe6ffffffff/background-tamvan.jpg) no-repeat center center;
  background-size: 126% 100%;
  -webkit-transition: background-size 0.3s ease;
  -moz-transition: background-size 0.3s ease;
  transition: background-size 0.3s ease;
}
.profile_card .header-muka:before {
  content: '';
  display: block;
  width: 100px;
  height: 28px;
  background: #f9f9f9;
  position: relative;
  z-index: 1;
  margin: 15em auto 0;
}
.profile_card .header-muka .inner_head {
  position: relative;
  margin-top: -16.8em;
  width: 260px;
  height: 230px;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  transition: background 0.3s ease;
}
.profile_card .header-muka .inner_head a {
  font-size: 1.4em;
  padding: 1.5em 0.5em 0 1em;
  display: inline-block;
  color: transparent;
  text-decoration: none;
  width: 23%;
  text-align: center;
}
.profile_card .header-muka .inner_head a i {
  position: absolute;
  margin-top: 2em;
  text-align: center;
  display: block;
  display: none;
  font-style: normal;
  left: 0;
  right: 0;
  margin: 2.8em auto;
  font-family: "Museo", Helvetica, sans-serif;
  color: #fff;
}
.profile_card .header-muka .inner_head a:hover i {
  display: block;
}
.profile_card .header-muka .inner_head a span {
  margin-left: -.5em;
  margin-top: -1em;
  display: block;
}
.profile_card .header-muka:hover {
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  transition: background 0.3s ease;
  background-size: 252% 200%;
}
.profile_card .header-muka:hover a {
  color: #fff;
}
.profile_card .header-muka:hover a:nth-child(1) {
  -webkit-transition: color 0.1s ease;
  -moz-transition: color 0.1s ease;
  transition: color 0.1s ease;
}
.profile_card .header-muka:hover a:nth-child(1):hover {
  color: #2ecc71;
  -webkit-transition: color 0.1s ease !important;
  -moz-transition: color 0.1s ease !important;
  transition: color 0.1s ease !important;
}
.profile_card .header-muka:hover a:nth-child(2) {
  -webkit-transition: color 0.1s ease 0.1s;
  -moz-transition: color 0.1s ease 0.1s;
  transition: color 0.1s ease 0.1s;
}
.profile_card .header-muka:hover a:nth-child(2):hover {
  color: #ecf0f1;
  -webkit-transition: color 0.1s ease !important;
  -moz-transition: color 0.1s ease !important;
  transition: color 0.1s ease !important;
}
.profile_card .header-muka:hover a:nth-child(3) {
  -webkit-transition: color 0.1s ease 0.2s;
  -moz-transition: color 0.1s ease 0.2s;
  transition: color 0.1s ease 0.2s;
}
.profile_card .header-muka:hover a:nth-child(3):hover {
  color: #f1c40f;
  -webkit-transition: color 0.1s ease !important;
  -moz-transition: color 0.1s ease !important;
  transition: color 0.1s ease !important;
}
.profile_card .header-muka:hover a:nth-child(4) {
  -webkit-transition: color 0.1s ease 0.3s;
  -moz-transition: color 0.1s ease 0.3s;
  transition: color 0.1s ease 0.3s;
}
.profile_card .header-muka:hover a:nth-child(4):hover {
  color: #FF667A;
  -webkit-transition: color 0.1s ease !important;
  -moz-transition: color 0.1s ease !important;
  transition: color 0.1s ease !important;
}
.profile_card .header-muka:hover .inner_head {
  background: rgba(0, 0, 0, 0.5);
}
.profile_card .profile {
  background: #333333;
  font-family: "Museo",serif;
  box-shadow: 0 -0.2em 0 0 rgba(255, 255, 255, 0.5);
}
.profile_card .profile .avatar_image {
  width: 82px;
  height: 82px;
  background: url(https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-prn2/v/t1.0-9/10430851_462603853880977_7914483635301175019_n.jpg?oh=4caeb0be5ba17fc1d8c44afcf2a56888&oe=568E1E9D&__gda__=1452803175_704daaf1474881a9380f8c70b5981cac) no-repeat top right;
  background-size: 100%;
  border-radius: 100%;
  margin: -2.5em auto;
  box-shadow: 0 0 0 0.2em rgba(255, 255, 255, 0.85), 0 0 0 0.3em rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 3;
}
.profile_card .profile .inner_content {
  width: 92%;
  height: 194px;
  float: left;
  margin: 0.5em 4%;
  background: #f9f9f9;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 1px;
}
.profile_card .profile .inner_content:after {
  content: '';
  display: block;
  width: 100%;
  height: 16px;
  background: #f9f9f9;
  margin-top: -.8em;
  margin-left: -1px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 -0.15em 0 0 #f4f4f4, inset 0 -0.2em 0 0 rgba(0, 0, 0, 0.1), inset 0 -0.35em 0 0 #f4f4f4, inset 0 -0.4em 0 0 rgba(0, 0, 0, 0.1);
}
.profile_card .profile .inner_content .name {
  color: #959595;
  font-size: .9em;
  text-align: center;
  padding: .3em 0 .2em;
  line-height: 2;
  border-top: 0.1em solid rgba(0, 0, 0, 0.2);
  border-bottom: 0.1em solid rgba(0, 0, 0, 0.2);
  font-family: "helvetica neue";
  font-weight: 400;
  margin: 2.8em auto;
  width: 75%;
  margin-bottom: 1em;
}
.profile_card .profile .inner_content .description {
  font-size: .75em;
  text-align: center;
  line-height: .5;
  font-weight: 100;
  padding: .2em .5em -.1em;
  color: #ababab;
  text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.8);
}
.profile_card .profile .inner_content ul {
  list-style: none;
  padding: 0;
  width: 80%;
  height: 3.5em;
  display: block;
  margin: 1em auto;
}
.profile_card .profile .inner_content ul li {
  display: block;
  float: left;
  padding: 0;
  margin: .75em 0 0 1.25em;
  text-align: center;
}
.profile_card .profile .inner_content ul li:hover a {
  color: #7f8c8d;
}
.profile_card .profile .inner_content ul li a {
  color: #95a5a6;
  text-decoration: none;
  text-align: center;
}
.profile_card .profile .inner_content ul li a span {
  line-height: 1;
}

/* Buttons-Bawah */
.button-bawah {
  padding: 10px 11px;
  font-size: 1.1em;
  width: 30px;
  height: 28px;
  line-height: 1;
  position: relative;
  background: -webkit-linear-gradient(top, #fefefe, #f2f2f2);
  background: linear-gradient(to bottom, #fefefe, #f2f2f2);
  box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.1), inset 0 0.2em 0.2em rgba(255, 255, 255, 0.2), 0 0.1em 0.1em rgba(0, 0, 0, 0.1), 0 0.2em 0.1em rgba(0, 0, 0, 0.05);
  border-radius: 100%;
}
.button-bawah:hover {
  box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15), inset 0 0.2em 0.2em rgba(255, 255, 255, 0.2), 0 0.1em 0.1em rgba(0, 0, 0, 0.15), 0 0.2em 0.1em rgba(0, 0, 0, 0.05);
}
.button-bawah:active {
  top: .05em;
  box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.1), inset 0 0.2em 0.2em rgba(255, 255, 255, 0.2), 0 0.1em 0em rgba(0, 0, 0, 0.1), 0 0.1em 0.1em rgba(0, 0, 0, 0.05);
}


  • Save your template and go to Layout, open. Click on Add a Gadget, and scroll down to HTML/JavaScript.
  • and input code below in box HTML/Javascript

<jangan>
<div class="profile_card">
  <div class="header-muka">
    <div class="inner_head">
      <a href="#"><span class="entypo-plus"></span><i>Add</i></a>
      <a href="#"><span class="entypo-chat"></span><i>Chat</i></a>
      <a href="#"><span class="entypo-star"></span><i>Fav</i></a>
      <a href="#"><span class="entypo-heart-empty"></span><i>Like</i></a>
    </div>
  </div>
  <div class="profile">
    <div class="avatar_image"></div>
    <div class="inner_content">
      <h2 class="name" id="name">Teja Sukmana</h2>
      <span id="desc">
        <p class="description" id="desc_one">Bukan Creator Tapi Copasor</p>
      <p class="description" id="desc_two">Yang Penting Bisa Berbagi</p></span>

      <div class="social_links">
        <ul>
          <li ><a id="website" href="http://mastamvan.blogspot.com" class="button-bawah"><span class="entypo-attach"></span></a></li>
          <li ><a id="twitter" href="http://twitter.com/Teja_7x"  class="button-bawah"><span class="entypo-twitter"></span></a></li> 
          <li ><a id="dribbble" href="https://dribbble.com/mastamvan"  class="button-bawah"><span class="entypo-dribbble"></span></a></li> 
        </ul>
      </div>
    </div>

  </div>
</div>
</jangan>

  • Done, selamat salam tamvan.
Anjer gaya pake bahasa inggris :v buat yang ga ngerti maklumin aja masih belajar ya :3 jangan di buly nanti nyali Mas Tamvan Menciut :3

Cukup sekian dan terimakasih, Untuk tutorial bahasa indonesianya, di translate aja ya. Mudah2an bisa di pahami lebih mendalam.