Windows

Recent Post

Tampilkan postingan dengan label Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Blog. Tampilkan semua postingan
Sabtu, 18 Januari 2014
Cara Mempercantik Widget Profil

Cara Mempercantik Widget Profil

di Tidak ada komentar:
Ini adalah screenshotnya "sebelum di sorot mouse"



dan ini adalah setelah di sorot oleh mouse "hover"


untuk demonya silahkan sobat lihat widget profil di blog ini, di bawah kiri blog ini tepatnya
bagaimana sobat tertarik untuk memakai trik ini di blog sobat?

jika tertarik silahkan ikuti langkah2 brikut :

1. Pertama, masuk dulu ke halaman Edit HTML

2. Cari kode ini ]]></b:skin>

3. Kemudian letakan kode berikut di atasnya
.profile-img {
border: 8px solid #aaa;
opacity: 0.8;
border-radius: 6px;
margin:0 5px 5px 0;
padding: 4px;
background: #eee;
box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
-webkit-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #F70000;
-o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
-moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in;
-webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in;
}
.profile-img:hover {
opacity: 1.0;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-moz-box-shadow: 1px 1px 1px #33F, -1px -1px 1px #33F, 0 0 16px #33F;
margin: 40px 0px 20px 10px;
-o-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-moz-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-webkit-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-o-transition: margin-left 1.5s ease-in 0.4s, margin-top 1.5s, -o-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-moz-transition: margin 1.5s ease-in 0.4s, -moz-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-webkit-transition: margin 1.5s ease-in 0.4s, -webkit-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
}
.profile-data {
margin:0;
color:red;
font-weight: bold;
line-height: 1.6em;
font: 25px  reenie Beanie;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
color:#fff;
}
.profile-link{ font: 13px IM Fell English,arial,serif; text-transform:none;letter-spacing:2px;line-height:1.2em;}
#menu {
background-color:#333333;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
height:29px;
margin:3px auto 0;
width:1001px;
margin-left:-1px;
}
5. Simpan dan lihat hasilnya
Diposting oleh di 00.04 0 komentar
Label:
Senin, 13 Januari 2014
Cara Membuat Widget Komentar Avatar Yang Cantik Di Blog

Cara Membuat Widget Komentar Avatar Yang Cantik Di Blog

di Tidak ada komentar:


  • Sign In di blogger.com
  • Pada Menu drop down, Pilih layout
  • Klik Add a gadget dan pilih HTML/JavaScript
  • Copy paste kode berikut pada kolom yang tersedia

    • <style type="text/css">
    ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
    .tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .tb_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
    </style>
    <p style="display:none;">Recent Comments Widget with Avatar by <a href="http://www.tutorialblogspot.com/">Tutorial Blogspot</a></p>
    <script type="text/javascript">
    //<![CDATA[
    // Recent Comments Settings
    var
    numComments  = 5,
    showAvatar  = true,
    avatarSize  = 60,
    roundAvatar = true,
    characters  = 40,
    showMorelink = false,
    moreLinktext = "More »",
    defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits = true;
    //]]>
    </script>
    <script type="text/javascript" src="http://tutorialblogspot.googlecode.com/files/recentcommentavatar.js"></script>
    <script type="text/javascript" src="http://contoh.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>
    • Jangan Lupa mengganti http://contoh.blogspot.com dengan URL blog sobat,lalu simpan Widget sobat

    Tambahan :
    Jika sobat blogger memasang komentar Google Plus, maka widget Komentar Avatar ini TIDAK BISA di pasang di blog sobat.
    Diposting oleh di 19.11 0 komentar
    Label:
    Cara Membuat Widget Social Subscription Penuh Warna

    Cara Membuat Widget Social Subscription Penuh Warna

    di Tidak ada komentar:
    • Masuk ke laman blogger.com
    • Pada menu drop down, pilih layout dan klik Add gadget
    • Add HTML/JavaScript dan Copy paste kode berikut pada kolom yang tersedia

    <h2 class='title'>Subscribe</h2> <div class='widget-content'> <style> #social { margin: 15px 0 5px -15px; width: 300px; height: 40px; text-align: center; } #social img { margin-left: 3px; margin-right: 3px; } #social img:hover { opacity: 0.6; } </style> <div id='social'> <a href='URL-TWITTER-SOBAT-DISINI'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk7BGaUu9BRr6J9W-PlcZT78kFHM-5EIiWAPDiSBALlRpZrviddOZ8ZalPrkyG3jqsJ7sgmD4U8suDOfgAKEEzntOOWB3Wplvgi3EFusBCbxk8Er-zXxABqnUoWWUlCRXVzUYEqaWa_fMn/s1600/twitter.png' title='Twitter'/></a> <a href='URL-FEEDBURNER-SOBAT-DISINI'><img alt='Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRMOOarVgtnw7fuABNtTFuObesxr_nbnIvKCssDbg6LoWzvC1vwc5dIuxeGoKD0k3dbhNo3ZMM7hTiFHyvcggJIvvsSYsqz1d1oURsCeHykdReDGQpV4bqSSXvj7dLOzxoKqssbMfhM-cV/s1600/rss.png' title='RSS'/></a> <a href='URL-FACEBOOK-SOBAT-DISINI'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnRWVZy37NHUNdL4G46oawr4BiLmCpo1f7lML5xDR6054NCQe4FUwUN9PfZztoeVM-EStdBWyZSsP2w72DTmObwmA45rm6C3zCo4q0CpDAojneXlSrw42Jo9kqydPpG0YQtYZoTDglgu9Q/s1600/facebook.png' title='Facebook'/></a> <a href='URL-GOOGLE-PLUS-SOBAT-DISINI'><img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE7J_6EarbsNh6h_WgmadkqWLaLvXDuwT2_t4FCjtoWZFqGIhFeqRvcJRUL_KSQVEDWIq5IseP5KkLje9cdH6_D3UWrHbc8Jej8F6ygJQEUS8HMt9uggAJP_xrdIlpw5FB-uiKjw7k5pMh/s1600/google%252B.png' title='Google Plus'/></a> <a href='URL-YOUTOBE-SOBAT-DISINI'><img alt='Youtube' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsCNJoPjASFZDHDjbqg9AJmCDLm0YZ4MrHzD1O0TU9OdbeSdSxDssTxsoZ05MJVkaAKrjSOjSRY9yqTolyHX5ePNFkAUI9kr5tpYu6PMY8UrDM11lPaHsMZhIbkHaIYClgqfOvCFzFwd-2/s1600/you_tube.png' title='Youtube'/></a>
    <script>
    <!--
    document.write(unescape("\x3C\x70\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x6E\x6F\x6E\x65\x3B\x22\x3E\x53\x6F\x63\x69\x61\x6C\x20\x53\x75\x62\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x20\x57\x69\x64\x67\x65\x74\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x74\x75\x74\x6F\x72\x69\x61\x6C\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x22\x3E\x54\x75\x74\x6F\x72\x69\x61\x6C\x42\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x3C\x2F\x61\x3E\x3C\x2F\x70\x3E"));
    //-->
    </script>
    • Simpan widget sobat

    Tambahan :
    Ganti URL yang menggunakan huruf Capital dengan URL sobat
    Diposting oleh di 19.09 0 komentar
    Label:
    Membuat Widget Popular Post Dengan Gambar Round Corner

    Membuat Widget Popular Post Dengan Gambar Round Corner

    di Tidak ada komentar:

    • Sign in di blogger.com
    • Pada menu drop down pilih template dan klik "Edit HTML"
    • Cari kode ]]></b:skin> lalu tempatkan kode berikut sebelum kode ]]></b:skin>
    /* Kode CSS tutorialblogspot.com */
    .popular-posts ul{padding-left:0}
    .popular-posts ul li{background:#FFF url() no-repeat scroll 5px 10px;list-style-type:none;border:1px solid #ddd;border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;-moz-box-shadow:3px 2px 5px #242424;-webkit-box-shadow:3px 2px 5px #242424;box-shadow:3px 2px 5px #242424;margin-bottom:5px;height:40px;padding:5px 5px 5px 20px !important}
    .popular-posts ul li a{font-style:italic}
    .popular-posts ul li:hover{border:1px solid #d10202;-moz-box-shadow:3px 2px 5px #d10202;-webkit-box-shadow:3px 2px 5px #d10202;box-shadow:3px 2px 5px #d10202}
    .popular-posts ul
    li a:hover{text-decoration:none}
    .popular-posts .item-thumbnail img{height:40px;width:40px;webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4)}
    .popular-posts .item-thumbnail img:hover{-moz-box-shadow:0 0 5px #d10202;-webkit-box-shadow:0 0 5px #d10202;box-shadow:0 0 5px #d10202}
    • Simpan template.

    Cara konfigurasi widget popular post
    1. Setelah menerapkan kode di atas, klik Layout (Tata letak)
    2. Klik add a gadget
    3. Tambahkan widget Popular Post

    4. Hilangkan tanda centang pada "Snippet" atau "Cuplikan"
    5. Klik Save
    Diposting oleh di 19.05 0 komentar
    Label:
    Widget Entri New Berwarna

    Widget Entri New Berwarna

    di Tidak ada komentar:

    Bagi yang ingin memasangnya, mari kita simak caranya :
    • Tahap Pertama :
    • Klik Desain.
    • Klik Tata Letak.
    • Klik HTML/Javascript.
    • Kemudian copy-paste kode dibawah ini :
    <div id='entrinewdjb'>
    <script src="http://djangkarubumi.googlecode.com/files/SerpihanWaktuEntriNew.js"></script>
    <script>var numposts = 5; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
    <script src="http://Blog-noname.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
    </script>
    </div> 
    • Ganti teks berwarna merah dengan nama/URL blog Sahabat.
    • Klik Simpan.

    Tahap Kedua :
    • Klik Desain.
    • Klik Template.
    • Klik Edit HTML
    • Kemudian cari kode ]]></b:skin> , dan letakan kode dibawah ini tepat diatasnya.
    #entrinewdjb ul li a:hover{color:#fff;text-decoration:none}
    #entrinewdjb ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
    #entrinewdjb ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
    #entrinewdjb ul li:first-child:after,#entrinewdjb ul li:first-child + li:after,#entrinewdjb ul li:first-child + li + li:after,#entrinewdjb ul li:first-child + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li + li + li + li + li:after,#entrinewdjb ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}#entrinewdjb ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
    #entrinewdjb ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
    #entrinewdjb ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
    #entrinewdjb ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
    #entrinewdjb ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
    #entrinewdjb ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
    #entrinewdjb ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
    #entrinewdjb ul li:first-child + li + li + li + li + li:after{content:"6"}
    #entrinewdjb ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
    #entrinewdjb ul li:first-child + li + li + li + li + li + li:after{content:"7"}
    #entrinewdjb ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
    #entrinewdjb ul li:first-child + li + li + li + li:after{content:"5"}
    #entrinewdjb ul li:first-child + li + li + li{background:#c7f25f;width:90%}
    #entrinewdjb ul li:first-child + li + li + li:after{content:"4"}
    #entrinewdjb ul li:first-child + li + li{background:#ffde4c;width:90%}
    #entrinewdjb ul li:first-child + li + li:after{content:"3"}
    #entrinewdjb ul li:first-child + li{background:#ff764c; width:90%}
    #entrinewdjb ul li:first-child + li:after{content:"2"}
    #entrinewdjb ul li:first-child{background:#ff4c54 ;width:90%}
    #entrinewdjb ul li:first-child:after{content:"1"}
    #entrinewdjb ul{margin:0;padding:0px 0;list-style-type:none}
    #entrinewdjb ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
    • Klik Pratinjau template, untuk mengetahui hasilnya.
    • Jika sudah berhasil, Klik Simpan template.
    Diposting oleh di 17.27 0 komentar
    Label:
    Cool Transition Css3 Menubar For Blogger 2013

    Cool Transition Css3 Menubar For Blogger 2013

    di Tidak ada komentar:
    1. Log in to blogger
    2. Pilih"Template"
    3. Click EDIT HTML Button"
    4. Sekarang click Proceed button.         
    1. Cari tag ini dengan menggunakan Ctrl+F    ]]></b:skin>
    2. Paste kode di bawah ini Sebelum ]]></b:skin> tag 

    Pergi ke blogger dan klik Layout

  • Klik Tambah Gadget dan pilih 'HTML/Javascript'.
  • Paste kode di bawah ini.

    • HTML Navigasi menu Code:

    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <ul class="navbar color1"> <li><a href="http://www.digitalhubinc.com/"><i class="icon20 home"></i><span>Home</span></a></li> <li><a href="#"><i class="icon20 upload"></i><span>Upload</span></a></li> <li><a href="#"><i class="icon20 download"></i><span>Download</span></a></li> <li class="drpdown"><a href="#"><i class="icon20 comments"></i><span>Posts</span></a>  <ul class="drpcontent">   <li><a href="#">Latest Posts</a></li>   <li><a href="#">Popular Posts</a></li>   <li><a href="#">Private Posts</a></li>  </ul> </li> <li><a href="#"><i class="icon20 login"></i><span>Login</span></a></li> <li class="drpdown"><a href="#"><i class="icon20 theme"></i><span>Themeselector</span></a>  <ul class="drpcontent" id="themeselect">   <li><a href="#" data-color="color1">Orange</a></li>   <li><a href="#" data-color="color2">Marine</a></li>   <li><a href="#" data-color="color3">Green</a></li>   <li><a href="#" data-color="color4">Purple</a></li>   <li><a href="#" data-color="color5">Red</a></li>  </ul> </li></ul>
    Ganti # dengan link Anda.

    10. Sekarang simpan Anda 'HTML / Javascript'.
     
    Selesai :P
    Diposting oleh di 17.01 0 komentar
    Label:
    Animated Drop Down Navigation Menu With Css3 For Blogger

    Animated Drop Down Navigation Menu With Css3 For Blogger

    di Tidak ada komentar:
    Step  1: Go to Blogger Dashboard >> Template >> Edit HTML >> Proceed
    Step 2: Cari code ]]></b:skin>
    paste code di bawah ini di atas code  ]]></b:skin>
    Step 3: Simpan
    Step 4: Layout >> Add a Gadget >> Edit HTML/JavaScript.


    <div id='cssmenu'>
    <ul>
       <li class='active'><a href='/'><span>Home</span></a></li>
       <li class='has-sub'><a href='#'><span>Products</span></a>
          <ul>
             <li class='has-sub'><a href='#'><span>Product 1</span></a>
                <ul>
                   <li><a href='#'><span>Sub Item</span></a></li>
                   <li class='last'><a href='#'><span>Sub Item</span></a></li>
                </ul>
             </li>
             <li class='has-sub'><a href='#'><span>Product 2</span></a>
                <ul>
                   <li><a href='#'><span>Sub Item</span></a></li>
                   <li class='last'><a href='#'><span>Sub Item</span></a></li>
                </ul>
             </li>
          </ul>
       </li>
       <li><a href='#'><span>About</span></a></li>
       <li class='last'><a href='#'><span>Contact</span></a></li>
    </ul>
    </div>


    • Ganti # dengan Link menu blog kamu
    • simpan kelar udah selesai
    Diposting oleh di 16.44 0 komentar
    Label:
    Cara Membuat Gallery Photo Keren Di Blog

    Cara Membuat Gallery Photo Keren Di Blog

    di Tidak ada komentar:



  • Login ke akun blogger anda
  • Pada dasbor pilih Template >> Edit HTML >> Proceed
  • Klik Ctrl+F cari kode ]]></b:skin
  • Tambahkan kode CSS berikut diatas kode ]]></b:skin>  



    • /* Photo Gallery styles */   
    .gallery {      
    margin: 100px auto 0;    
    width: 800px;    
    }      
    .gallery a {
    display: inline-block;
    height: 135px;
    position: relative;
    width: 180px;
    /* CSS3 Prevent selections */
    -moz-user-select: none;
     -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none; 
    } 
    .gallery a img { 
    border: 8px solid #fff;
    border-bottom: 20px solid #fff; 
    cursor: pointer;
    display: block; 
    left: 0px;
     position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;
    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     -o-box-sizing: border-box;
    box-sizing: border-box;
    /* CSS3 transition rules */ 
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease; 
     -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
    /* CSS3 Box Shadow */ 
    -moz-box-shadow: 2px 2px 4px #444;
     -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;
    }       

    /* Custom CSS3 rotate transformation */ 
    .gallery a:nth-child(1) img { 
     -moz-transform: rotate(-25deg); 
    -webkit-transform: rotate(-25deg); 
    transform: rotate(-25deg); 
    } 
    .gallery a:nth-child(2) img {  
    -moz-transform: rotate(-20deg); 
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
    }       

    .gallery a:nth-child(3) img { 
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
    }       

    .gallery a:nth-child(4) img {
     -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
     transform: rotate(-10deg);
    }       

    .gallery a:nth-child(5) img {
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg); 
     transform: rotate(-5deg);
    }       

    .gallery a:nth-child(6) img { 
    -moz-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg);
    }       

    .gallery a:nth-child(7) img {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    }       

    .gallery a:nth-child(8) img {
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg); 
    }       

    .gallery a:nth-child(9) img { 
    -moz-transform: rotate(15deg); 
    -webkit-transform: rotate(15deg); 
    transform: rotate(15deg);
    }       

    .gallery a:nth-child(10) img {
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
     transform: rotate(20deg);
    }       

    .gallery a:nth-child(11) img {
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
    }       

    .gallery a:nth-child(12) img {
    -moz-transform: rotate(30deg);
     -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    }       

    .gallery a:focus img { 
    cursor: default;
    height: 250%; 
    left: -150px;    
     top: -100px;   
    position: absolute;
    width: 250%;
    z-index: 25;
    /* CSS3 transition rules */ 
    -webkit-transition: all 1.0s ease;
        -moz-transition: all 1.0s ease;
     -o-transition: all 1.0s ease; 
        /* CSS3 transform rules */ 
    -moz-transform: rotate(0deg);  
    -webkit-transform: rotate(0deg); 
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    }
    • Simpan template.

    Cara Menampilkan Widget Ini Dalam Postingan

    Anda bisa menampilkan gallery photo keren ini dalam postingan atau pada halaman mandiri blog anda dengan menambahkan kode berikut pada bagian HTML.
    Ingat pada bagian HTML bukan bagian Compose!
    <div class="gallery">   
    <a tabindex="1"><img src="IMAGE LINK"></a>    
    <a tabindex="2"><img src="IMAGE LINK"></a>      
    <a tabindex="3"><img src="IMAGE LINK"></a>      
    <a tabindex="4"><img src="IMAGE LINK"></a>    
    <a tabindex="5"><img src="IMAGE LINK"></a>     
    <a tabindex="6"><img src="IMAGE LINK"></a>      
    <a tabindex="7"><img src="IMAGE LINK"></a>     
    <a tabindex="8"><img src="IMAGE LINK"></a>      
    <a tabindex="9"><img src="IMAGE LINK"></a>      
    <a tabindex="10"><img src="IMAGE LINK"></a>      
    <a tabindex="11"><img src="IMAGE LINK"></a>      
    <a tabindex="12"><img src="IMAGE LINK"></a>       
    </div>

    Kustomisasi

    Ganti IMAGE LINK dengan alamat gambar anda.
    Silahkan klik pratinjau, jika sudah sesuai dengan yang anda inginkan, silahkan publikasikan gallery photo anda.
    Diposting oleh di 16.29 0 komentar
    Label:
    Popular Post Widget on Blogger

    Popular Post Widget on Blogger

    di Tidak ada komentar:


    1. Seperti biasa login ke akun anda.
    2. Pilih edit HTML >> Cari kode ]]></b:skin>
    3. Setelah ketemu letakkan kode dibawah ini tepat diatas kode nomor dua tadi  


    Dashboard→Select Template→Edit HTML then CTRL + F to find ]]></b:skin>

    /* Multi colored - Numbered Popular  Post Widget By Digitalhubinc.com */
    #PopularPosts4 ul li:hover{
    background-color: #ffffff;
    }
    #PopularPosts1 ul li{border-bottom:2px dotted #999999;}
    #PopularPosts1 ul li .item-thumbnail{-webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    }
    #PopularPosts1 ul li .item-thumbnail:hover{
    -webkit-transform: rotate(-17deg);
    -moz-transform: rotate(-17deg);
    -o-transform: rotate(-17deg);
    }
    #PopularPosts1 ul li .item-title {color:#fff;}
    #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
    #PopularPosts1 ul li{position:relative;margin:5px 0;border-bottom:1px dashed #ffffff;padding:10px}
    #PopularPosts1 ul li:first-child{background:#eb1f0a;width:90%}
    #PopularPosts1 ul li:first-child:after{content:"1"}
    #PopularPosts1 ul li:first-child + li{background:#0ddb25;width:90%}
    #PopularPosts1 ul li:first-child + li:after{content:"2"}
    #PopularPosts1 ul li:first-child + li + li{background:#0d6edb;width:90%}
    #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
    #PopularPosts1 ul li:first-child + li + li + li{background:#eeac0f;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
    #PopularPosts1 ul li:first-child + li + li + li + li{background:#7d0fee;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
    #PopularPosts1 ul li:first-child + li + li + li + li + li{background:#e30d31;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
    #PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0Sg-LSdrEdW8b99p4hArVzf0SSm8ZyPVMOpOFPzJ4kYus178hYLHIMkytgiGrtx8CA8UKyVkzE1vh5fwuTM3P4vC1yL6e9hRrUJiazWmHb7kMWsKqz3rYMNFqHPEcyrqXs9WLQChKem_/s1600/waved-circle.png) no-repeat; width:32px;height:32px;text-align:center;font-size:15px; padding-top:13px; font-weight: bold; color:#ffffff;}
    #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px; border-radius: 5px; border: 2px solid #ffffff;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);}
    #PopularPosts1 ul li a{font-size:12px;color:#fff;text-decoration:none}
    #PopularPosts1 ul li a:hover{color:#e3dede;text-decoration:none}
    #PopularPosts1 {
    margin-left: 20px;
    }
    #PopularPosts1 h2 {color:white;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhThNjCDySVD-w3EFWmRrGRKSpJIxBmwz6RACuIP-2vc7UEUF5l43t1iTqf35CYSLmWOTW4XByEYUBo_d5MqhV_FRFEcKvdFUKSp7F0YrGmxTztLcrkD0Np1kq7FsunIvD25FSdANTfHDRX/s1600/layer2.png) no-repeat;
    height:30px;
    width: 287px;
    margin-left:-5px;
    padding-top:10px;
    font-size:18px;
    text-align: center;
    }



    4. Simpan.


    #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
    #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
    #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
    #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
    #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

    Tahap Kedua
    1. Pada menu tata letak >> Pilih add gadget/tambahkan gadget >> Pilih Entri populer/Popular posts >> hilangkan tanda centang cuplikan gambar dan keterangan, tampilkan minimal 9 posts.
    2. Simpan dan lihat hasilnya diblog anda!
    Demikian tutorial cara menambahkan widget popular posts dengan tampilan multi color pada blog. Semoga bermanfaat.
    Diposting oleh di 16.14 0 komentar
    Label:
    Jumat, 20 Desember 2013
    Cara Menampilkan File Docs (M. Word), PDF Di Postingan Blog

    Cara Menampilkan File Docs (M. Word), PDF Di Postingan Blog

    di Tidak ada komentar:

    Berikut Langkah-Langkahnya.

    Login ke Akun drive.google.com
    Upload File yang kan digunakan (Docs, atau Pdf).

    Tunggu Proses Upload File anda sampai selesai. Lama Proses Upload Tergantung Kecepatan internet.
    Setelah Selesai Proses Upload File, Ubah Settingan share anda Menjadi Public.

    Setelah Merubah Settingan Menjadi public, Klik kanan File >> Open with >> Google Drive Viewer.
    Setelah tampil file yang anda Upload tadi, Pilih Menu file >> Embed This PDF File.
    Embed google
    Dan muncul Pop Up berisi kode embeded, yang siap digunakan pada postingan blog, waktu menggunakan pada postingan blogger gunakan mode HTML.

    Semoga Bermamfaat.
    Diposting oleh di 20.41 0 komentar
    Label:
    Cara Membuat Forum di Blogger

    Cara Membuat Forum di Blogger

    di Tidak ada komentar:
    Tahap Pertama.
    1. Login ke akun Gmail
    2. Buka Halaman Groups.Google
    3. Klik Buat grup
    4. Isi Semua field sesuai di inginkan

    Tahap Kedua.


    1. Masuk ke akun Blogger
    2. Buat Halaman Baru (StaticPage)
    3. Pilih Mode HTML
    4. Copikan Semua code dibawah ini kehalaman yang akan dibuat tadi


    <iframe id="forum_embed"
    src="javascript:void(0)"
    scrolling="no"
    frameborder="0"
    width="900"
    height="700"><br />
    <br />
    </iframe><br />
    <br />
    <script type="text/javascript">
    document.getElementById('forum_embed').src =
    'https://groups.google.com/forum/embed/?place=forum/ForumBlogNoname'
    + '&showsearch=true&showpopout=true&showtabs=false'
    + '&parenturl=' + encodeURIComponent(window.location.href);
    </script><br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <style type="text/css">
    body{background:#eee;}
    #main-wrapper{width:100%;border:1px solid #ccc;}
    #sidebar-wrapper, .breadcrumbs, #comments, .post-footer, #blog-pager{display:none}
    </style>

    Tulisan Yang berwarna biru ganti dengan nama alamat grup yang anda buat pada proses tahap pertama.
    Klik Publikasikan.



    Jangan berterima kasih ke Saya  berTerima kasihlah ama Google
    Diposting oleh di 20.16 0 komentar
    Label:
    Kamis, 19 Desember 2013
    Cara Membuat Table Di Postingan/Artikel Blog

    Cara Membuat Table Di Postingan/Artikel Blog

    di Tidak ada komentar:


    Versi 1
     

    kolom 1 kolom 2

    "Lebar kolom akan otomatis menyesuaikan dengan panjangnya tulisan"

    Kode Versi 1
    <table border=”1″ width=”100%”>

    <tr>

    <td width=”30%”>kolom 1</td> <td>kolom 2</td>

    </tr>

    </table>
    Catatan: rubah Kolom 1 dan Kolom 2 dengan "Terserah Anda"
    Bila ingin membuat baris baru lagi dibawahnya copy kode yang berwarna merah tepat dibawah </tr> yang terakhir

    Versi 2

    OST AnimeVersiLink
    Naruto Full Download
    Bleach Full Download
    Fairy Tail Full Download

    "Sama seperti versi 1 lebar kolom akan menyesuaikan otomatis"

    Kode Versi 2
    <table border="1" style="width: 500px;">
        <tbody>
    <tr bgcolor="#F2F2F2">
        <td align="center"><b>OST Anime</b></td><td align="center"><b>Versi</b></td><td align="center"><b>Link</b></td>
        </tr>
    <tr>
        <td align="center" style="width: 100px;">Naruto</td>
        <td align="left" style="width: 300px;">Full </td>
        <td align="center" style="width: 100px;">Download</td>
        </tr>
    <tr>
        <td align="center" style="width: 100px;">Bleach</td>
        <td align="left" style="width: 300px;">Full </td>
        <td align="center" style="width: 100px;">Download</td>
        </tr>
    <tr>
        <td align="center" style="width: 100px;">Fairy Tail</td>
        <td align="left" style="width: 300px;">Full </td>
        <td align="center" style="width: 100px;">Download</td>
        </tr>
    </tbody></table>
    Keterangan:
    • 500 px adalah angka yang sudah dijumlahkan dari kode yang berwarna merah
    • 100 px pertama lebar kolom kiri
    • 300 px lebar kolom tengah
    • 100 px terakhir lebar kolom kanan 
    Catatan:
    • Untuk menambahkan baris baru copy kode yang berwarna BIRU tepat dibawah </tr> yang terakhir
    • Untuk merubah keterangan kolom bisa langsung melalui Compose
    Diposting oleh di 04.48 0 komentar
    Label:
    Jumat, 25 Oktober 2013
    Popular post dengan nomor urut otomatis

    Popular post dengan nomor urut otomatis

    di Tidak ada komentar:

    Cara memasang popular post blogger


    1. Pertama-tama masuk ke akun Blogger anda
    2. Masuk ke Layout dan klik "Add a Gadget"
    3. Pilih "Popular Posts" pada list yang ada
    4. Anda harus menyesuaikan settingan popular post seperti gambar dibawah ini: hilangkan tanda ceklis pada "image thumbnail" dan juga "snippet". Serta gunakan 7-9 post yang akan tampil pada postingan, karena akan lebih bagus seperti itu. Terlihat nyaman dan clean. Sebenernya anda bisa menampilkan gambar dan snippet pada popular post, hanya saja akan terlihat tidak menyatu, kurang rapi dan anda harus mengedit lagi kode CSS3nya untuk merapikannya.
    5.  Save jika sudah selesai.




    Cara memperindah popular post


    Sekarang Anda perlu mengubah gaya default dan mengubah tampilan popular post dengan desain yang kita inginkan dengan menggunakan gaya kustom. Yang dibawah ini adalah cara membuat nomor list dengan bentuk kotak.


    1. Pertama-tama masuk ke akun Blogger anda
    2. Masuk ke bagian Template
    3. Dan klik Edit HTML
    4. Search for </b:skin>.  Click the black arrow to expand the code.
    5. Simpan kode dibawah ini tepat diatas kode </b:skin>

    /*--- Ujangyoyo Popular Posts --- */ .popular-posts ul { padding-left: 0px; counter-reset: popcount; }.popular-posts ul li:before { list-style-type: none; margin-right: 15px; padding: 0.3em 0.6em; counter-increment: popcount; content: counter(popcount); font-size: 16px; background: #292D30; color: #ffffff; position: relative; font-weight: bold; font-family: georgia; float: left; border: 2px solid #dddddd; box-shadow: 1px 2px 9px #666666; }.popular-posts ul li { border-bottom: 1px dashed #dddddd; }.popular-posts ul li:hover { border-bottom: 1px dashed #696969; }.popular-posts ul li a { text-decoration:none; color:#5A5F63; }
    .popular-posts ul li a:hover { text-decoration:none; }

         Customalisasi:

    • Untuk mengubah background nomor kotak, edit #292D30
    • Kode #ffffff adalah kode warna dari nomor dalam kotak penomoran.
    • Secara default, kode diatas akan menghasilkan bentuk Kotak. Untuk mengubahnya kedalam bentuk bulat, anda cukup memasukan kode : border-radius:15px; setelah kode box-shadow: 1px 2px 9px #666666;


          6. Save your template and you are all done!
    Diposting oleh di 18.49 0 komentar
    Label:
    Langganan: Postingan (Atom)
    Breaking News
    Loading...
    Quick Message
    Press Esc to close

    Kontak Kami

    Nama

    Email *

    Pesan *

    Copyright © 2013 Blog Hendra All Right Reserved
    Back To Top