Gudang Tutorial Blog

Sebuah menu horizontal minimalis dan ringan dibangun dengan CSS murni. Menu ini juga responsif, mengubah dirinya menjadi menu vertikal pada perangkat mobile dengan layar kecil.

DEMO
Cara membuat menu responsive simple:

1. Login blog
2. Template > edit html
3. Letakkan kode css berikut di atas ]]></b:skin>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);

#cssmenu{ background:#f96e5b;  width:auto}

#cssmenu ul{ list-style:none;  margin:0;  padding:0;  line-height:1;  display:block;  zoom:1}

#cssmenu ul:after{ content:' ';  display:block;  font-size:0;  height:0;  clear:both;  visibility:hidden}

#cssmenu ul li{ float:left;  display:block;  padding:0}

#cssmenu ul li a{ color:#fff;  text-decoration:none;  display:block;  padding:15px 25px;  font-family:'Open Sans',sans-serif;  font-weight:700;  text-transform:uppercase;  font-size:14px;  position:relative;  -webkit-transition:color .25s;  -moz-transition:color .25s;  -ms-transition:color .25s;  -o-transition:color .25s;  transition:color .25s}

#cssmenu ul li a:hover{ color:#333}

#cssmenu ul li a:hover:before{ width:100%}

#cssmenu ul li a:after{ content:'';  display:block;  position:absolute;  right:-3px;  top:19px;  height:6px;  width:6px;  background:#fff;  opacity:.5}

#cssmenu ul li a:before{ content:'';  display:block;  position:absolute;  left:0;  bottom:0;  height:3px;  width:0;  background:#333;  -webkit-transition:width .25s;  -moz-transition:width .25s;  -ms-transition:width .25s;  -o-transition:width .25s;  transition:width .25s}

#cssmenu ul li.last >a:after,

#cssmenu ul li:last-child >a:after{ display:none}

#cssmenu ul li.active a{ color:#333}

#cssmenu ul li.active a:before{ width:100%}

@media screen and (max-width:768px){ #cssmenu ul li{ float:none}

 #cssmenu ul li a{ width:100%;  -moz-box-sizing:border-box;  -webkit-box-sizing:border-box;  box-sizing:border-box}

 #cssmenu ul li a:after{ display:none}

 #cssmenu ul li a:before{ height:1px;  background:#fff;  width:100%;  opacity:.2}

 #cssmenu ul li.last >a:before,

 #cssmenu ul li:last-child >a:before{ display:none}

}

anda bisa mengganti warna menu pink menjadi warna lain.

simpan template



3. Letakkan kode html berikut di layout

<div id='cssmenu'>

<ul>

   <li class='active'><a href='index.html'><span>Home</span></a></li>

   <li><a href='#'><span>Disclaimer</span></a></li>

   <li><a href='#'><span>About</span></a></li>

   <li class='last'><a href='#'><span>Contact</span></a></li>

</ul>

</div>

Ganti kode berwarna dengan url dan menu url anda.

4. simpan
Semoga tutorialnya bermanfaat.

Inject ISAT 06 Februari 2014



ini ane bikinin inject ISAT buat member yang belom bisa konek kemaren.

mudah-mudahan aja yang ini bisa konek.



Cara Pakai:



1. Download Inject ISAT 06 Februari 2014

2. Extract (password RAR: www.mig33eagle.com)

3. Copy dan Replace 'Injector.exe' yang ada di folder installan Eagle Vpn 'C:\Program Files\Eagle VPN\'

4. Jalankan seperti biasa.



Note: HANYA WORK BUAT MEMBER EAGLE SSH :D



Salam.

Tutorial blog kali ini tentang cara membuat orange menu vertikal.







 Dan berikut ini caranya:



1. Login blog

2. Template > edit html dan letakkan kode css berikut di atas ]]></b:skin>

#cssmenu {

  width: 200px;

  border-style: solid solid none solid;

  border-color: #D76100;

  border-size: 1px;

  border-width: 1px;

  padding: 0px;

}

#cssmenu ul {

  margin: 0px;

  padding: 0px;

  list-style: none;

}

#cssmenu li a {

  height: 32px;

  height: 24px;

  text-decoration: none;

  font-weight: normal;

  color: #9E3C02;

  display: block;

  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL1fxzkdxVVnP3i9I2aiVprPiEaDFmQWjI83IunDeI7bUFb3ZE1rmsoy-9mgk8jBH9jvBVgiGDCki7AVbogs5BbBOHm9E5rfrXDIKdxnl4xOU8WZvtMxvE6jiwpE6EsdJlceZq_KoiGww/s1600/mig33eaglemenu4.gif);

  padding: 8px 0 0 30px;

}

#cssmenu li a:hover {

  color: #fff;

  background: url(menu4.gif) 0 -32px;

  padding: 8px 0 0 30px;

}

#cssmenu li a:active {

  color: #fff;

  background: url(menu4.gif) 0 -64px;

  padding: 8px 0 0 30px;

}

3. Letakkan kode html berikut di layout

<div id='cssmenu'>

<ul>

   <li class='active'><a href='index.html'><span>Home</span></a></li>

   <li><a href='#'><span>Products</span></a></li>

   <li><a href='#'><span>About</span></a></li>

   <li class='last'><a href='#'><span>Contact</span></a></li>

</ul>

</div>

Ganti kode yang berwarna dengan url dan menu yang anda inginkan



4. selesai

Twitter buttons bermanfaat untuk membantu berbagi konten website dan terhubung pada Twitter.



cara memasang twitter button:

1. visit https://about.twitter.com/resources/buttons#tweet

2. pilih button ang di perlukan






3. Isi option






4. Copast kode di blog sobat.

5. selesai

Kadang saya lupa cara memasang facebook like button page site.

Tulis dah di sini biar tiap saat bisa di baca kembali. Facebook Like button adalah cara tercepat dalam berbagi konten.

Kalau anda belum tahu caranya bisa ikut nyimak.



1. visit https://developers.facebook.com/docs/plugins/like-button/

2. isi kolom, kalau saya sukanya yang kek di bawah ini, simpel

UPDATE 5 FEBRUARI 2014






Langsung sedot aja ye bagi member Eagle SSH



Link :DOWNLOAD Eagle Injector 05 Februari 2014



Cara pakai:



Replace Injector yang ada di dalam folder instalan Eagle SSH (C:\Program Files\Eagle VPN)



Salam :D

<b:if cond='data:blog.url != data:blog.homepageUrl'><script type='text/javascript'>

function autoLink(){

    this.keywdHref = new Object();

    this.add = function(keyword, href){

        if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}

        this.keywdHref[keyword] =  href;

    }

    this.createAnchor = function(){

        var objs = document.getElementsByTagName(&quot;div&quot;);

        for(var i=0; i&lt;objs.length; i++){

            var obj = objs[i];

            if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){

                var content = obj.innerHTML;

                for(var keyword in this.keywdHref){

                    var href = this.keywdHref[keyword];

                    var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);

                    obj.innerHTML = newstr;

                    content = newstr;

                }

            }

        }

    }

    this.startScript = function(){

        var onLoad = window.onload;

        window.onload = function(){

            if(onLoad){onLoad();}

            setTimeout(&quot;f.createAnchor()&quot;, 100);

        }

    }

}

</script>

<script type='text/javascript'>

var f = new autoLink();

f.add(&quot;blog&quot;, &quot;http://www.blogger.com/&quot;);

f.add(&quot;tutorial&quot;, &quot;http://mig33eagle.com/&quot;);

f.startScript();

</script></b:if>

5. Ganti kode berwarna cyan dengan keyword dan url yang anda inginkan.

6. simpan dan lihat hasilnya.