Cara Membuat Menu Bar di Blog


YIS - Sangat Banyak blogger yang memberikan tutorial membuat menu bar pada bagian header blogspot. Namun bagi Anda yang kurang paham atau pemula dalam dunia blog, tidak perlu khawatir, karena menu bar tersebut bisa dengan mudah dibuat tanpa harus merubah HTML. Disini, saya akan membagikan kode menu bar yang lagi saya pakai ini untuk blog Anda dan memodifikasinya sesuai dengan template yang Anda pakai saat ini. Berikut adalah bagaimana caranya membuat menu bar di blog Anda.

Tutorial :


1. Masuk ke menu Template - Edit HTML
2. Cari kode ]]></b:skin> dan salin lalu tempelkan tepat diatas kode tersebut.

/* Menu by Yogi Irhandi Simamora*/

#YISmenu{background:#c0392b;width:100%;overflow:hidden;margin-bottom:16px;font-family:Federant}
#YISmenu ul{color:white;margin:0px;padding:0px;text-align:center}
#YISmenu li{display:inline-block;-webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;transition:all .6s ease-in-out;float:left}
#YISmenu a{display:block;padding:8px 15px 8px 15px;text-decoration:none;font-family: 'Stalinist One', cursive;text-transform:uppercase;text-align:center;font-size:12px;font-weight:200;color:white;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out}
#YISmenu a:hover{text-decoration:none;text-shadow:0px 0px 5px #c0392b;margin-top:-5px}
#YISmenu img{margin:-5px}
#search{float:right;margin-right:-22px}
#search input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA-HuhU2j6GrwtitqWsu_YSvuoh09KgjScWWSmafktScQT4XlNgZGljY8OQFllKyMehKmUyR1hBrB-yB_aF8d-iJW1HzY3Yynl0PoYZylHoRGl0k6vpi_tbb8GBNTs6xtnEAaAk2nU98Y/s1600/cari.png) no-repeat 10px 6px #e74c3c;float:right;width:1px;color:white;letter-spacing:-0.5px;font:16px 'Electrolize';font-variant:small-caps;margin:0;padding:8px 15px 8px 50px;overflow:hidden;border:0;border-radius:1px;-moz-transition:all 0.1s ease 0s;-webkit-transition:all 900ms ease-out;-moz-transition:all 900ms ease-out;-ms-transition:all 900ms ease-out;-o-transition:all 900ms ease-out;transition:all 900ms ease-out;}
#search input[type="text"]:focus{background:#e74c3c;width:300px;padding:8px 10px 8px 10px;}

Keterangan : sesaikan kode background, color, dan yang lainnya dengan template Anda.

3. Kemudian salin dan tempelkan kode berikut tepat di atas salah satu kode <div id='content-wrapper'> atau <div id='main-wrapper'> atau <div id='main-outer'> atau <div id='main'>

<!-- menus START -->

<div id='YISmenu'>
<ul>
<li><a expr:href='data:blog.homepageUrl' title='Homepage'><img src='http://shababsa7.net/images/PageImage-515435-3918738-home_icon.png' width='20px' height='20px'/></a></li>
<li><a href='http://yogismr.blogspot.co.id/p/about.html' title='About Me'>About</a></li>
<li><a href='http://yogismr.blogspot.co.id/p/contact.html' title='Contact'>Contact</a></li>
<li><a href='http://yogismr.blogspot.co.id/p/disclaimer.html' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://yogismr.blogspot.co.id/p/pasang-iklan.html' title='Pasang Iklan Termurah!'>Pasang Iklan</a></li>
<li><a href='http://yogismr.blogspot.co.id/p/yis-privacy-police.html' title='Privacy Police'>Privacy Police</a></li>
<li><a href='http://yogismr.blogspot.co.id/p/sitemap.html' title='Sitemap'>Sitemap</a></li>
<form action='/search' id='search' method='get'><input name='q' placeholder='search something here..' size='15' type='text'/></form>
</ul>
</div>

5. Ganti alamat blog yogismr.blogspot.com dengan alamat blog, label, atauapun alamat halaman Anda.
6.Modifikasi nama menu, ataupun  yang lainnya dengan memadukan kode dan design template Anda.
7. Simpan Template dan Selesai.


Begitulah cara memasang menu bar di blog, dan jika ada yang tidak dimengerti ataupun yang ingin Anda tanyakan, tinggalkan komentar Anda di bawah ini dan saya akan secepatnya membalas pertanyaan ataupun komentar Anda. Terima kasih :)

Cara Menghilangkan Navbar Blog



YIS - Navbar Blog atau biasa disebut Blogger Navigation Bar adalah sebuah alat navigasi yang berbentuk Frame dan berisi beberapa menu dan mempunyai kegunaan masing-masing. fungsi-fungsi pada navbar blog sangat membantu kita dalam ngeblog di blogger.

Namu, sebelum navbar dihapus, ada muncul 1 pertanyaan. Haruskah navar blog dihapus?. Untuk menjawab pertanyaan tersebut menurut YIS ada 3 alasan, yaitu pertama adalah sangat mengganggu, kedua adalah dapat membuat design yang kita buat jadi tidak terlalu mengesankan lagi, dan yang ketiga adalah blog akan terasa semakin ringan.

Jika merasa terganggu dengan penampakan widget navbar blog ini dan ingin membuat design Anda terlihat lebih bagus dan pastinya semakin ringan, maka cara menghapus, menghilangkan, dan menyembunyikannya adalah sebagai berikut.

Cara 1 :

1. Masuk ke menu Template - Edit HTML
2. Cari kode ]]></b:skin> dan letakkan kode berikut tepat diatasnya.

#navbar-iframe{display:none !important;}
#navbar, #navbar-iframe{height:0px;visibility:hidden;display:none}

3. Simpan Template dan Selesai.

Cara 2 :

1. Masuk ke menu Tata Letak/Layout - Klik edit pada bagian widget navbar
2. Klik off pada pilihan yang paling bawah.
3. Simpan/Save dan selesai.

Cara 3 :

1. Masuk ke menu Template - Edit HTML
2. Cari kode <b:widget='id='Navbar' locked='true' title='Navbar' type='Navbar'> 3. Hapus kode tersebut hingga kode </b:widget>
4. Simpan Template dan selesai.

Itu saja dari saya tentang bagaimana cara menghilangkan, menyimbunyikan, dan menghapus navbar dari blog. Bila ada pertanyaan atau yang tidak dimengerti, silahkan tinggalkan komentar Anda dan saya akan secepatnya menjawab pertanyaan Anda. Terima kasih :)

Kumpulan Gambar PNG Anime

Assalamualaikum Wr. Wb.

     PNG, yaitu gambar/photo yang banyak digunakan oleh Photo's Editor karena latar belakang/background dari gambar tersebut transparan. Oke, jika sobat tidak sabar Yuk~ cek tkp ^o^)~

  1. Death Note
     
  2. Naruto
     
  3. Yu - Gi - Oh!
     
  4. Air Gear
     
  5. Detective Conan
     
  6. Dragon Ball
     
  7. Eyeshield 21
     
  8. Gundam
     
  9. One Piece
     
  10. Bleach

     Saya rasa cukup segitu saja, jika ada tambahan tinggal komentar dibawah ini. Sampai jumpa di postingan berikutnya ^o^)~


Wassalamualaikum Wr. Wb.

Memasang Menu Vertikal Hover Style Keren Di Blog

Assalamualaikum Wr. Wb.

     Setelah saya kemarin membagikan Software Glary Utilities Versi Terbaru,maka kali ini saya akan membagikan sebuah Tutorial Blog, yaitu Memasang Menu Vertikal Hover Style Keren Di Blog. Oke, berikut sedikit mengenai Menu Vertikal Hover Style.

Mengenai Menu Vertikal Hover Style

     Menu vertikal ini mempunyai keunikan tersendiri dengan adanya hover aktif ketika mouse bersentuhan dengan widget tersebut. Disamping itu menu vertikal dengan hover style ini ditampilkan dengan beberapa warna, sehingga membuat tampilannya lebih menarik. Tak usah panjang lebar dan sekarang mari kita bahas cara pasang Menu Vertikal Hover Style di blogspot. Berikut Langkah - Langkahnya :

Cara Memasang Menu Vertikal Hover Style Di Blog :

  • Tentunya sobat harus login ke aku Blogger :D
  • Pilih Blog yang akan di isi Menu ini
  • Pilih Tata Letak
  • Klik Add a Gadget atau Tambahkan Gadget
  • Setelah itu Masukkan Kode berikut ke dalamnya
Ctrl + C Untuk Meng Copy

Keterangan :

  • Silahkan ubah Username atau ID Anda sesuai dengan data data Sobat :)

     Sekian Tutorial Blog yang saya bagikan kepada para sobat sekalian ^o^)~ semoga Tutorial ini bermanfaat bagi anda semua ;) Sampai jumpa kembali ^o^)~

Wassalamualaikum Wr. Wb.

Background Keren Dengan CSS3

Assalamualaikum Wr. Wb.


Okelah tanpa basa basi Yuk! cek tkp ^o^)~


  1. Log In Blogger
  2. Pergi Ke Template
  3. Klik Edit HTML
  4. Ctrl + F Lalu cari kode Body {
  5. Lihat Di Bawah Body { . Cari kode background

    Contoh:

    Body {
    ...
    ...
    Background:#fff;
    ...
    ...
    }

  6. Terus ganti code disamping background
     Misalkan:

    Background:#fff;

    Berubah jadi

    Background:#000 url('Link Background') repeat scroll top left;
Oke sekarang kita lihat background yang kerennya


http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMNjUwODUzYTgtM2FlMi00NjA0LWE4ZjEtM2VmNzI3NDE4Zjhm


 Link : http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMNjUwODUzYTgtM2FlMi00NjA0LWE4ZjEtM2VmNzI3NDE4Zjhm

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQGUsvjhyphenhyphenQ3NSX-BeOglJkodsrHOFwMeTvUoXFHPbD9cmMv3f1DcQsJDPCv8sigT6Umfsa2rZssmtsRlKtma4v3Cov_sdL_8AadvQqjYLKSgr-HSY8n36bAYkvhTIXw7M6oSdhN16k6s/h120/NE-Gen+BackGround.png

Link: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQGUsvjhyphenhyphenQ3NSX-BeOglJkodsrHOFwMeTvUoXFHPbD9cmMv3f1DcQsJDPCv8sigT6Umfsa2rZssmtsRlKtma4v3Cov_sdL_8AadvQqjYLKSgr-HSY8n36bAYkvhTIXw7M6oSdhN16k6s/h120/NE-Gen+BackGround.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeA1leggBxJbpaxFfyD78ySQ6Jp9D_HrNt_nv_94TDMXrqOMrxyVpbZpCEjqrj6dfIL7I_fyEU47eJiPednvnHXnhJFFJmhE_xgCTHods5aCkmVvDxglosU288p5N5Iy3GafzGlJooTFQ/s1600/grid.png'

Link : http://1.bp.blogspot.com/_HGekX55lw4E/TPjPMLM8
FcI/AAAAAAAAAS0/bED_PUlaJRs/s1600/grid.png


http://i1239.photobucket.com/albums/ff513/Ramapoetra24/Bg-1.png

Link : http://i1239.photobucket.com/albums/ff513/Ramapoetra24/Bg-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNoiTSAf8itPRxzlSKnHugAA-1ym3aJeTgmnIOts21wYZMqyjppYD1H8E75gMArJ5vBUSMn6eGqQhaX1mr7VLrCJS9F7-zv1GS9wSFumNTTXcPMrxcg5QQEZQApH_fTM5Ot7Z9wmAziNk/s1600/ramagif.gif

Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNoiTSAf8itPRxzlSKnHugAA-1ym3aJeTgmnIOts21wYZMqyjppYD1H8E75gMArJ5vBUSMn6eGqQhaX1mr7VLrCJS9F7-zv1GS9wSFumNTTXcPMrxcg5QQEZQApH_fTM5Ot7Z9wmAziNk/s1600/ramagif.gif

http://i1104.photobucket.com/albums/h328/bitxp86/th_333.jpg

Link : http://i1104.photobucket.com/albums/h328/bitxp86/th_333.jpg

     Oke ... Sekarang Cara Memasang Nya Gimana.. Itu Di Atas Sudah Di Jelaskan Di Nomor 6
Kalau Begitu, Sampai jumpa lagi di postingan berikutnya ^o^)~


Wassalamualaikum Wr. Wb.


Sumber

Cara Ampuh Menaikkan Pagerank dan Ribuan Backlink

Cara Ampuh Menaikkan Pagerank + Ribuan Backlink

Asalamualaikum Wr. Wb.

     cara paling ampuh menaikkan pagerank dan mendapat ribuan backlink SUDAH TERBUKTI - Pada pertemuan kita kali ini, saya akan posting artikel tentang bagaimana caranya agar mendapatkan Ribuan Backlink, supaya pagerank blog sobat lebih memuaskan dibandingan dengan sebelumnya. Dan cara ini sudah terbukti di blog lain! dan mungkin sobat juga ingin mencoba Tutorial ini :) Pastinya sobat pengen punya pagerank yang memuaskan, nah begitu juga dengan saya. Caranya cukup mudah kok langsung saja ikuti caranya berikut ini.

CARANYA :

  • Sobat tinggal copy paste link yang berada di bawah ini. 
  • Dengan syarat kamu harus menghapus link pada peringkat 1 dari daftar yaitu link google dan kalian tidak boleh mengganti link yang paling bawah secara langsung karna akan merugikan blog anda sendiri.
  • Kemudian pindahkan yang tadinya nomor 2 menjadi nomor 1, nomor 3 menjadi nomor 2, nomor 4 menjadi nomor 3, dst.
  • Kemudian masukan link blog kamu sendiri pada urutan paling bawah ( nomor 10).
  • Posting di Blog kamu Dan yang penting juga silahkan ajak teman-teman MWB yang lain untuk mengikuti cara ini serta sebarkan cara ini ke semua temanyang punya blog, baik blog versi Blogspot, WordPress, IndoWapBlog Dll.
1.Google
2.Facebook
3.Yahoo
4.Youtube
5.Alexa
6.Bloggers
7.Mypagerank
8.Mywapblog
9.Okezone
10.Twitter

Keterangan:


     Jika kamu mampu mengajak lima orang saja untuk mengcopy artikel di posting blog sobat,, maka jumlah backlink yang akan didapat adalah sebagai berikut:
• Posisi 10, jumlah backlink = 1
• Posisi 9, jumlah backlink = 5
• Posisi 8, jumlah backlink = 25
• Posisi 7, jumlah backlink = 125
• Posisi 6, jumlah backlink = 625
• Posisi 5, jumlah backlink = 3,125
• Posisi 4, jumlah backlink = 15,625
• Posisi 3, jumlah backlink = 78,125
• Posisi 2, jumlah backlink = 390,625
• Posisi 1, jumlah backlink = 1,953,125

     Dan nama dari alamat blog dapat dimasukan kata kunci yang kamu inginkan, yang juga bisa menarik perhatian untuk segera diklik. Dari sisi SEO kamu sudah mendapatkan 1,953,125 backlink gratis! dan efek sampingnya adalah meningkatnya Trafik blog kita serta Meningkatnya Pagerank Blog kita! jika pengunjung downline mengklik link kamu maka kamu juga mendapat traffik tambahan.

Penting :
Saya sangat menyarankan agar kamu mencoba cara ini dan silakan copy paste tulisan ini dan kemudian posting di blog sobat dan kemudian sebarkan Cara Menaikkan Pagerank ini ke teman-teman MWB lainnya.
Ingat! Hilangkan link nomor 1 dan masukan alamat blog sobat pada nomor 10.
     Sekian pertemuan kita pada posting kali ini, mengenai - Cara Ampuh Menaikkan Pagerank dan Ribuan Backlink. Terima kasih atas kunjungan sobat EG :) See You Next Time ^o^)~

Wassalamualaikum Wr. Wb.

Cara Mempercepat Loading Blg Dengan Script Lazy Load

Assalamualaikum Wr. Wb.

     Memang kebanyakan orang jika melihat blognya sangat berat alias Lola ( LOading LAma Hahaa~ :D ) bisa membuat authornya jadi tambah malas mengedit blognya dan panik bagaimana cara mengatasi berat blognya tersebut. Disini mimin EG akan bagi script Load Lazy dimana ia bisa dapat mempercepat loading blog kalian walaupun tidak fas banget. Oke kalau mau tahu hasilnya langsung aja praktekin sob :) dan memang tidak ada perubahan sama sekali, sobat bisa menghapus scriptnya kembali.

Tutorial :

  • Log in ke blog sobat
  • Masuk ke menu Template => Edit Html
  • Cari kode </head>
  • Pastekan kode berikut diatas kode </head>

    <!-- lazy load start -->
    <script type='text/javascript'>//<![CDATA[(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]>
    </script>
    <!-- lazy load end -->

  • Save Template

     Segitu dulu dari mimin EG ya sobat ;) semoga bisa bermanfaat bagi sobat bye ^o^)~



Wassalamualaikum Wr. Wb.

Cara Memodifikasi Tampilan Textarea Blog Dengan CSS Keren



Assalamualaikum Wr. Wb.

     Halo Sobat ^o^)~ bertemu lagi nih ;) kali ini saya ingin share tutorial blog, yaitu judul yang di atas :D sebelumnya sobat sudah tau belum apa itu Textarea ? Textarea adalah tempat atau ruang yang bisa digunakan untuk meletakan teks atau script. Untuk sekarang ini tag <textarea> sudah jarang dipergunakan, tidak tahu apa alasannya, tapi yang pasti jika peletakan dan tampilan textarea sesuai dengan kegunaanya tentu hal ini akan membantu fungsi dan tampilan dari blog bersangkutan. Untuk lebih jelasnya, di bawah ini adalah contoh dari textarea :



Bagaimana cara membuatnya supaya terlihat keren? Kita akan membuatnya keren dengan sentuhan Css. Bagaimana caranya? Langsung saja, berikut ini adalah caranya :
  • Masuk ke dasboard blog kalian
  • Buka Template, pilih Edit HTML
  • Masukkan kode Css di bawah ini tepat di atas kode ]]></b:skin>
textarea { background:#808080; width:400px; height:100px; color:ccc; padding:10px; border-radius:5px; border:2px solid #9c9c9c; } 
textarea:hover { box-shadow:0px 0px 25px #fff; }
  • Kemudian simpan
Keterangan :
Ganti kode yang berwarna MERAH dengan kode warna backgrond textarea yang kalian inginkan
Ganti kode yang berwarna KUNING dengan kode ukuran lebar textarea yang kalian inginkan
Ganti kode yang berwarna UNGU dengan kode ukuran tinggi textarea yang kalian inginkan
Ganti kode yang berwarna ORANGE dengan kode warna text dalam textarea yang kalian inginkan
Ganti kode yang berwarna PINK dengan kode ukuran kelengkungan border textarea yang kalian inginkan
Ganti kode yang berwarna BIRU dengan kode ukuran ketebalan border textarea yang kalian inginkan
Ganti kode yang berwarna AQUA dengan kode warna border textarea yang kalian inginkan
Untuk menggunakannya, kalian letakkan kode di bawah ini pada tempat yang kalian inginkan :

<textarea rows="3" cols="40" name="txt" onclick="this.form.txt.select()">ISI TEXAREA DISINI</textarea>

     Gimana ? mudah kan :) ya pastinya donggg Hahaha :D Sekian dulu pertemuan kita pada kali ini ;D sampai jumpa di postingan berikutnya ^o^)~

Wassalamualaikum Wr. Wb.


Sumber

Cara Membuat Presentase Pada Scroll Ala EG (Enziie Gekhizakii)

Assalamualaikum Wr. Wb.

     Akhir akhir ini saya sudah jarang sekali memposting/berbagi artikel kepada sobat, tetapi jangan khawatir. pada kali ini saya akan membagikan artikel yang cukup menarik bagi sobat. Uyee~ betul sekali, yaitu Cara Membuat Presentase Scroll Ala EG (Enziie Gekhizaki) yuk cek ke tkp aje ;)

Tutorial :

  1. Pastinya Log in ke Blog sobat
  2. Masuk ke Blog sobat
  3. Masuk ke Rancangan
  4. Pilih menu Template => Edit HTML
  5. Cari kode ]]></b:skin>
  6. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

    #scroll {
    display: none;
    position: fixed;
    top: 0;
    right: 20px;
    z-index: 500;
    padding: 3px 8px;
    background-color: #726E6D;
    font-family: 'Stalinist One', cursive;
    text-shadow: 1px 1px 0px black;
    color: #808080;
    border-radius: 3px;
    }

    #scroll:after {
    content: " ";
    position: absolute;
    top: 50%;
    right: -8px;
    height: 0;
    width: 0;
    margin-top: -4px;
    border: 4px solid transparent;
    border-left-color: #726E6D;
    }

  7. berikutnya cari kode </head> 
  8. lalu letakkan kode berikut dibawah kode </head>

    <div id='scroll'></div>
  9.  berikutnya kita pasang Javascript berikut ke atas </body>

    <script type='text/javascript'>
    //<![CDATA[
    var scrollTimer = null;
    $(window).scroll(function() {
       var viewportHeight = $(this).height(),
           scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
           progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
           distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
        $('#scroll')
            .css('top', distance)
            .text(' (' + Math.round(progress * 100) + '%)')
            .fadeIn(100);
        if (scrollTimer !== null) {
            clearTimeout(scrollTimer);
        }
        scrollTimer = setTimeout(function() {
            $('#scroll').fadeOut();
        }, 1500);
    });
    //]]>
    </script>
  10. Savee dannnnnn~ Tadaaa!


Keterangan :
  • warna Aqua adalah tutorialnya
  • warna Merah adalah code background yang ingin diganti
  • warna Hijau adalah Font (huruf) yang digunakan. Cara Mengganti Font (huruf) blog
  • warna Kuning adalah warna huruf yang ingin diganti



      Sekian dulu trik ini dari saya. Ingat ya! kalo mau copas silahkan buat sumbernya ;) mohon maaf atas kekurangan dari blog saya ini. Sampai jumpa di postingan berikutnya Bye~ ^o^)~
    Wassalamualaikum Wr. Wb.

    Cara Mengganti Font (huruf) Blog

    Assalamualaikum Wr. Wb.

         Mungkin saja belakangan ini sobat sudah mulai bosan dengan font (huruf) blog yang anda gunakan. Jika sobat kepengen banget nih untuk menggantisasi *ups! kok jadi vicky yah hahaha :D maksudnya mengganti Font (huruf) blog maka sobat beruntung! kenapa ? karena saya akan berbagi caranya untuk sobat semuanya :D yuk cek di tkp ^o^)~



    Tutorial :


    NB : ( Jika ingin melihat gambar lebih jelas, klik gambar tersebut )



    1. Pergi ke Google Web Font
    2. Pilih Jenis Font (huruf) yang sobat suka.


    3. Klik Pop Out jika ingin melihat contoh font
    4. Jika sudah klik Quick Use
    5.Kemudian anda seret scrollbar kebawah hingga bagian ke 3


    6. Jika sudah ketemu Copy code tersebut
    7. Log in lalu Masuk ke blog sobat
    8. Masuk ke bagian Template => Edit HTML
    9. Cari code ]]></b:skin>
    10. Pastekan code font yang sobat pilih tadi di bawah code  ]]></b:skin>


    11. Kemudian cari font yang ingin agan ubah, misalnya pada bagian Judul Postingan
    12. Cari kode .post h1 atau .post h2 atau .post h3
    13. kemudian copy code Google Web Font yang bagian ke 4


    14. lalu pastekan di bawah kode .post h1 atau .post h2 atau .post h3


    15. Save Template And.. Cool :D



         Oke ^_- sekian dulu trik blog yang saya bagikan kepada sobat sekalian semoga dapat membantu sobat untuk menjadi seorang Blogger yang handal :D Good Luck Sobat! sampai jumpa di postingan berikutnya! ^o^)~

    Wassalamualaikum Wr. Wb.

    Cara Memasang Tombol Back To Top Di Blog


    Cara Memasang Tombol Back To Top Di Blog

    Assalamualaikum Wr. Wb.

    Cara Memasang Tombol Back To Top Di Blog itu mudah - Kemarin saya sudah share cara membuat menu tab view di blog. Jadi kali ini saya akan share Cara Memasang Tombol Back To Top Di Blog.

    Apa yang dinamakan tombol back to top? Tombol back to top adalah tombol jika di klik akan kembali ke awal scroll dengan cepat. Jadi langsung saja kita ke pembahasan.

    Cara Memasang Tombol Back To Top Di Blog

    1. Login ke Blogger terlebih dahulu
    2. Masuk ke Tata Letak
    3. Klik add gadget
    4. Lalu klik menu Html/Java Script
    5. Lalu copy paste kode dibawah ini
    <a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Balik Ke Atas"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNLAsbPvnSY6tlm2nVSWB5peiwpqws70b38hnvjB5Ln2IPb9Xb_qzJkRGxBJ342OkMsu6F7zoOdVOsX2EBDyuJb1GwsHymcVBnXd0g51MgZMQFBJIdhWL93fdoO3JZFJoqS8rxnoJnj2cN/s1600/back+to+top3.png"/></a>
    Keterangan :
    1. Warna Abu-abu adalah Tutorialnya.
    2. Warna Aqua adalah kode gambar yang ingin diganti dengan gambar anda.
    OK, semoga bermanfaat untuk anda. Terima kasih sudah berkunjung.

     Wassalamualaikum Wr. Wb.

    Cara Membuat Menu Tab View Di Blog

    Cara Membuat Menu Tab View Di Blog
    Assalamualaikum Wr. Wb.

         Cara Membuat Menu Tab View Di Blog memang sangat mudah. Setelah kemarin saya sudah share Cara pasang widget translate google di blog. Kali ini saya akan share cara Membuat Menu Tab View Di Blog dengan cara sederhana tanpa masuk ke edit HTML template. Langsung saa kita bahas Cara Membuat Menu Tab View Di Blog  ini.

    Cara Membuat Menu Tab View Di Blog

    • Login ke blogger
    • Masuk ke tata letak
    • Klik add gadget
    • Lalu klik html/java
    • Copy paste kode dibawah ini

    <style type="text/css">
    div.TabView div.Tabs
    {height: 30px;overflow: hidden}
    div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
    text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
    padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
    border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
    font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ 
    -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
    div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
    div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
    div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    function tabview_aux(TabViewId, id)
    {
    var TabView = document.getElementById(TabViewId);
    //Tabs
    var Tabs = TabView.firstChild;
    while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
    var Tab = Tabs.firstChild;
    var i = 0;
    do
    {
    if (Tab.tagName == "A")
    {
    i++;
    Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
    Tab.className = (i == id) ? "Active" : "";
    Tab.blur();
    }
    }
    while (Tab = Tab.nextSibling);
    //Pages
    var Pages = TabView.firstChild;
    while (Pages.className != 'Pages') Pages = Pages.nextSibling;
    var Page = Pages.firstChild;
    var i = 0;
    do
    {
    if (Page.className == 'Page')
    {
    i++;
    if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
    Page.style.overflow = "auto";
    Page.style.display = (i == id) ? 'block' : 'none';
    }
    }
    while (Page = Page.nextSibling);
    }
    //Functions
    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
    function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
    //]]>
    </script>
    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 300px;" class="Tabs">
    <a>Judul 1</a>
    <a>Judul 2</a>
    <a>Judul 3</a>
    </div>
    <div style="width:300px; height:250px; " class="Pages">
    <div class="Page">
    <div class="Pad">
    Isi menu tab  1
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Isi menu tab  2
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Isi menu tab  3
    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>

    • Kemudian silahkan simpan kode tersebut
    Keterangan :
    • warna Abu-abu adalah Tutorialnya.
    • warna Biru adalah kode yang ingin anda edit sesuai dngan blog anda.
    • warna Merah adalah judul dari Tab tersebut.
    • warna Aqua adalah isi dari Tab tersebut.

         sekian tutorial kali ini, semoga bermanfaat untuk anda. Dan terima kasih sudah mau berkunjung dan membaca artikel..

    Wassalamualaikum Wr. Wb

    Cara Pasang Widget Translate Google Di Blog


    Assalamualaikum Wr. Wb.

         Cara Pasang Widget Translate Google Di Blog memang sangat mudah. Apa gunanya Translate Google? Sudah pasti untuk menerjemahkan konten blog kita. Bagaimana kalau orang luar negri baca artikel kita? nah, fungsi google translate ini sangat penting yaitu menerjemahkan konten yang berbahasa Indonesia menjadi bahasa yang mereka tentukan.

    Cara Pasang Widget Translate Google Di Blog

    OK, Jadi mari kita bahas langsung saja. Ikuti langkah-langkah berikut ini..
    • Login ke blogger terlebih dahulu
    • Silahkan masuk ke menu tata letak
    • Lalu klik add gadget
    • Kemudian klik HTML/Java Script
    • Silahkan copy kode dibawah ini, kemudian silahka paste di bagian konten
    <!-- Begin TranslateThis Button by seoterpadu.blogspot.com-->

    <a href="http://enziiegekhizakii.blogspot.com/" target="_blank">Enziie Gekhizakii</a><div id="translate-this"><a style="width:180px;height:18px;display:block;" class="translate-this-button" href="http://www.translatecompany.com/">translate</a></div>

    <script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
    <script type="text/javascript">
    TranslateThis();
    </script>

    <!-- End Code by enziiegekhizakii.blogspot.com -->
    • Kemudian silahkan klik Simpan
         Semoga artikel ini bermanfaat untuk anda. Dan Terima kasih sudah datang berkunjung dan membaca artikel...

    Wassalamualaikum Wr. Wb.

    Cara Membuat Sumber Link Otomatis Saat Artikel Di Copas

    Cara Membuat Sumber Link Otomatis Saat Artikel Di Copas
    Assalamualaikum Wr. Wb.

         Kali ini saya akan membahas tentang Cara Membuat Sumber Link Otomatis Saat Artikel Di Copas. Fungsi dari Link Sumber Otomatis ini adalah saat artikel kita di copas di bagian bawah akan ada link yang menuju ke postingan yang di copas. Ok, Langsung saja ke Cara Membuat Sumber Link Otomatis Saat Artikel Di Copas.

    Cara Membuat Sumber Link Otomatis Saat Artikel Di Copas

    • Login ke blogger.com
    • Pilih Template
    • Edit HTML Centang Expand Template Widget
    • Cari kode <body> atau </head>
    • Lalu copy kode di bawah ini dan paste tepat di atas kode <body> atau di bawah kode </head>


    • Simpan template
    • Catatan : Ganti tulisan Source Dengan kata-kata Yang anda Suka
         OK, mungkkin itu saja pembahasan kali ini dari saya. Semoga bermanfaat untuk anda. Terima kasih sudah berkunjung dan membaca artikel..

    Wassalamualaikum Wr. Wb.

    Cara Membuat Sumber Link Otomatis Saat Artikel Di Copas


    Cara Memasang Roll pada Archive Blog

    Cara Memasang Roll pada Archive Blog
    Assalamualaikum Wr. Wb.

         Cara memasang Roll pada Archive Blog memang sangatlah mudah. Dengan kita memasang Roll di Blog maka tidak akan memakan banyak tempat untuk Archive Blog kita, sehingga semua isi / konten (daftar isi) pada blog kita bisa di baca dan di lihat oleh pengunjung blog dengan tampilan yang dinamis, Nah, Kalian ingin tahu caranya bukan? 

    Silahkan ikuti langkah-langkah berikut...

    Cara Memasang Roll pada Archive Blog

    • Login ke Blogger
    • Di halaman Dasbor, pilih Template
    • Kemudian pilih Edit HTML
    • Cari kode ini : <div id='ArchiveList'> lebih cepatnya gunakan CTRL+F
    • Setelah ketemu taruh kode <div style='overflow:auto; width:ancho; height:200px;'> ini tepat diatasnya kode <div id='ArchiveList'>
    • Kemudian beri kode tambahan </div> sebelum kode <b:include name='quickedit'/>
    • Selesai!
    Catatan : Sebelum kalian menggunakan tutorial ini sebelumnya kalian harus tambahkan HTML/Java Script - Blog Archive pada Tata Letak kalian!

    Jika masih bingung kalian bisa melihat tata letak yang benar seperti dibawah ini :

    <b:includable id='main'>
      <b:if cond='data:title'>
        <h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
    <div style='overflow:auto; width:ancho; height:200px;'>
      <div id='ArchiveList'>
      <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
        <b:if cond='data:style == &quot;HIERARCHY&quot;'>
         <b:include data='data' name='interval'/>
        </b:if>
        <b:if cond='data:style == &quot;FLAT&quot;'>
          <b:include data='data' name='flat'/>
        </b:if>
        <b:if cond='data:style == &quot;MENU&quot;'>
          <b:include data='data' name='menu'/>
        </b:if>
      </div>
      </div></div>
      <b:include name='quickedit'/>
      </div>
    </b:includable>
    Keterangan :
    • Warna Merah adalah Tutorialnya
    • Warna Aqua adalah target Kode HTML
    • Warna Abu-abu adalah Kode HTML yang ditambahkan

         Semoga Bermanfaat artikel saya mengenai Cara Memasang Roll pada Archive Blog ini! Terima kasih sudah mau berkunjung dan membaca artikel...

    Wassalamualaikum Wr. Wb.

    Cara Memasang Roll pada Archive Blog

    Cara Membuat Widget Like Box Facebook di Blog


    Cara Membuat Widget Like Box Facebook di Blog
    Assalamualaikum Wr. Wb.

         Cara Membuat Widget Like Box Facebook di Blog memang sangat mudah - Manfaat widget Like Box Facebook di Blog adalah pengunjung di Blog anda tahu bahwa blog tersebut juga mempunyai halaman di Facebook dan pengunjung dapat menyukai halaman blog anda di Facebook.

         Sebelum membuat Widget Like Box Facebook di Blog, anda terlebih dahulu harus mempunyai halaman Blogspot sobat di Facebook. Jika anda sudah mempunyai sebuah halaman Blogspot anda di Facebook, maka sekarang anda bisa membuat Like Box Facebook di Blog.

         Jadi, ikuti langkah-langkah berikut untuk membuat Like Box Facebook di Blog:

    • Login ke Facebook dengan akun sobat.
    • Isikan URL http://developers.facebook.com/docs/reference/plugins/like-box/ dan langsung kunjungi URL tersebut.
    • Atur Tampilan.
    • Masukan URL halaman blogspot sobat di Facebook.
    • Width, atur lebar Widget.
    • Height, atur panjang Widget.
    • Show Faces, menampilkan foto Profil Likers atau tidak.
    • Color Scheme, pilih antara dark atau light.
    • Stream, tampilkan ringkasan halaman Facebook atau tidak.
    • Border Color, tentukan warna garis luar.
    • Show header, tampilkan header atau tidak.
    • Setelah selesai klik Get Code untuk mendapatkan kode HTML widget Like Box.
    Klik Get Code untuk mendapatkan kode nya
    • Mendapatkan kode html Like Box, agar lebih mudah masuk pada bagian iFrame. Copy seluruh kodenya.


    Copy seluruh kode dan paste kan ke blog
    • Selanjutnya, masuk pada akun Blogger sobat.
    • Masuk pada bagian Tata Letak.
    • Kllik tambah gadget, pilih posisi mana yang sobat inginkan untuk memasang Widget Like Box.
    • Pilih HTML/Javascript.
    • Pastekan kode iFrame dan klik simpan.
    Selesai, Widget Like Box Facebook di blog telah berhasil dipasang pada Blog anda. Silakan lihat hasilnya. Semoga artikel ini bermanfaat untuk anda, dan terima kasih sudah mau berkunjung dan membaca artikel...

    Wassalamualaikum Wr. Wb.

    Cara Membuat Widget Like Box Facebook di Blog

    Hal Penting Dalam Memilih Tema Blog

    Hal Penting Dalam Memilih Tema Blog
    Assalamualaikum Wr. Wb.

         Hal Penting Dalam Memilih Tema Blog saya rasa cukup penting. Dikarenakan bila salah menentukan tema dapat menghalangi anda sendiri. Saya pernah salah salam menentukan tema dengan kata lain niche situs (blog) saya. Efeknya yakni saya sukar untuk bikin tulisan. Tersebut disini perihal hal penting saat memilih tema blogspot kita

    1. Sesuai bakat anda sendiri

    Maksudnya yaitu bila anda mebuat situs (blog), temakan lah sesuai dengan apa yang anda dapat. perumpamaannya : anda yaitu seorang pakar photoshop tetapi bikin situs (blog) bertema tutorial ngeblog, sesaat anda tidak tahu situs (blog) itu sendiri. hingga selanjutnya anda dapat copas artikel orang lain

    2. Sesuai dengan kecepatan internet anda

    Maksudnya yaitu bila anda tidak mempunyai kecepatan internet yang kuat, saya anjurkan janganlah bikin situs (blog) yang download-downloadan file besar sampai 100mb. itu dapat bikin anda sukar mengupload file. buat situs (blog) layaknya tutorial-tutorial sesuai kekuatan anda.

    3. Sesuai dengan waktu senggang anda untuk ngeblog

    Buat situs (blog) dengan tema sesuai waktu kosong anda untuk ngeblog. bila waktu anda untuk ngeblog tidak terlampau lama buat situs (blog) dengan perihal yang dapat dicari selamanya. Perumpamaannya langkah daftar di google. Apabila waktu anda banyak buat saja situs (blog) software yang tiap-tiap hari up date version. namun terus memerhatikan kcepatan internet anda.

    Saya rasa hanya sekian perihal penting yang butuh di perhatikan sebelum saat atau setelah bikin situs (blog) supaya anda dapat bikin situs (blog) sesuai kekuatan anda serta tidak salah memastikannya.

    Jadi, sekarang anda bisa menentukan tema blog anda. Semoga artikel ini bermanfaat untuk anda, dan terima kasih sudah mau berkunjung dan membaca artikel...

    Wassalamualaikum Wr. Wb.

    Cara Membuat Recent Comment With Thumbnail


    Assalamualaikum Wr. Wb.

         Berminat dengan gambar yang diatas :/ ? ayo! ikuti langkah-langkah berikut :

    ✔ Login Blogger
    ✔ Masuk Ke Blog Sobat
    ✔ Pergi ke Tata Letak
    ✔ Klik Tambahkan Gadget atau Add a Gadget
    ✔ Pilih HTML/JavaScript
    ✔ Masukkan kode berikut :

    <div style="overflow:auto;width:auto;height:250px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;"> <style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} .w2b_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;} .w2b_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;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;} </style>
    <script type="text/javascript">
     //<![CDATA[
     // Recent Comments Settings
    var
    numComments = 10,
    showAvatar     = true,
     avatarSize      = 35,
     roundAvatar   = true,
    characters       = 250,
    defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-nZ8lcfOrPqUtciSJG_Hdm2cHl7TJiLlWP5BQMzejbi0ELp6_xb8fdnL0KxWm6_gOLff729TyORNh2mDQlFN4ZOdPNsqTxbWeSdWrlBmBapgh9bjObV_WJHPS2i2iAMCzrlKGOA4nu5sT/s1600/gravatar.jpg",
    hideCredits = true; 
    maxfeeds=20,
    adminBlog='Enziie Gekhizakii';
    //]]>
    </script>
    <script type="text/javascript" src=" http://rizaldipriantamascript.googlecode.com/files/Recent_Comments_.js "></script> <script type="text/javascript" src="http://enziiegekhizakii.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script></div>

    Keterangan :
    • Warna Abu-abu adalah jumlah komentar yang ingin ditampilkan.
    • Warna Hijau adalah ukuran gambar avatar yang ditampilkan (pixel).
    • Warna Biru adalah batas maksimum karakter yang ingin ditampilkan.
    • Warna Merah adalah gambar untuk Anonim/Anonymous.
    • Warna Kuning adalah Nama Author Blog Sobat.
    • Warna Aqua adalah alamat url blog sobat.
    ✔ Jika ingin membuat scrollnya tambahin aja kode berikut di atasnya :

    <div style='height:200px;overflow:auto;'>

    ✔ Lalu Diakhiri dengan Kode :

    </div>

         Gimana sob ? mudah kan ? So.. Pasti! Sekian dulu dari saya yah sobat ;) sampai bertemu kembali di lain waktu, jika ada pertanyaan silahkan berkomentar. Monggo ^o^)~

    Wassalamualaikum Wr. Wb.

    Cara mudah membuat scroll pada widget standar blogger

    Cara mudah membuat scroll pada widget standar blogger
    Assalamualaikum Wr. Wb.

         Cara mudah membuat scroll pada widget standar blogger - Terkadang saat kita pingin bikin menambahkan manfaat scroll pada widget standar blogger yang kita pasang tak tahu dihalaman sidebar serta footer layaknya arsip situs, artikel popular serta atau yang lain, bikin kita bingung bagaimana langkah memodifikasi tiap-tiap daftar widget tersebut ? supaya seluruh widget ada keseragaman serta hingga penampilan halaman situs (blog) kita lebih terkesan menarik dilihat.

         Disamping itu juga karenanya ada manfaat scroll pada tiap-tiap widget dapat menghemat area dihalaman sidebar atau pada halaman footer blog yang memanjang kebawah. lantas untuk memodifikasi seluruh widget yang sudah kita pasang pada mulanya, butuh dikerjakan sebagian trik yang amat sederhana. oleh sebab itu, untuk mengaplikasikan trik tersebut, silakan saudara ikuti uraian singkat di bawah ini : 

    ✔ Masuk terlebih dulu ke blog blogger yang anda kelola, apabila sebelumnya sudah masuk, pada halaman draft blogger klik menu Template.
    Backup template, untuk menjaga kemungkinan terjadi eror.
    ✔ Lalu klik Edit HTML.
    ✔Kemudian cari nama widget yang akan diberi fungsi scroll, caranya adalah sebagai berikut :

    • Tekan Ctrl F pada keyboard, lalu ketik nama widget. Sebagai contoh : daftar widget Artikel Populer, maka lihat nama widget pada blog yang anda kelola untuk mencari pada editor template.

    • Contoh struktur widget artikel populer pada editor template Blog ini adalah sebagai berikut :

    <b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'>
    <b:includable id='main'>
    <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content popular-posts'>

    Rangkaian kode disini :

    </div>
    </b:includable>
    </b:widget>

    • Atau contoh widget Like, Follow & Review seperti pada halaman sidebar disamping, struktur rangkaian kode dalam editor template blog ini adalah sebagai berikut :

    <b:widget id='HTML3' locked='false' title='Like, Follow &amp;amp; Review' type='HTML'>
    <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>

    </b:includable>
    </b:widget>

    • Apabila telah menemukan nama widget yang ingin anda tambahkan fungsi scroll, letakkan kode berikut :

    <div style='overflow:auto; width:auto; height:250px;'>

    tepat dibawah kode <div class='widget-content popular-posts'> atau <div class='widget-content'>.

    • Kemudian scroll kebawah cari lagi kode </b:includable> atau untuk mempermudah jika dalam editor template anda terdapat kode <b:include name='quickedit'/>, letakkan kode

    </div> 

    tepat diatas kode tersebut, sehingga terbentuk seperti struktur kode dibawah :

    <b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'>
    <b:includable id='main'>
    <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content popular-posts'>    <=== perhatikan bagian ini.
    <div style='overflow:auto; width:auto; height:250px;'>

    Rangkaian Kode disini :

    </div>
    </div>
    </b:includable>  <=== perhatikan bagian ini.
    </b:widget>

    Atau seperti contoh dibawah

    <b:widget id='HTML3' locked='false' title='Like, Follow &amp;amp; Review' type='HTML'>
    <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>   <=== perhatikan bagian ini.
    <div style='overflow:auto; width:auto; height:250px;'>
    <data:content/>
    </div>

    </div>
    </b:includable>  <=== perhatikan bagian ini.
    </b:widget>

    ✔ Untuk melihat hasilnya klik tombol Pratinjau.
    ✔ Jika sudah, Simpan Template anda dan Tutup kembali editor template.
    ✔ Selesai.

    Keterangan :

    • Untuk mempermudah cara mencari nama widget selalu gunakan Ctrl F, lalu ketik nama widget seperti pada contoh uraian diatas.

    250px adalah tinggi scroll, anda bisa menyesuaikan dengan kebutuhan, misalnya menjadi 100px, 150px atau 200px.

    <div class='widget-content'>, sebagai kunci utama untuk meletakkan kode pembuka <div style='overflow:auto; width:auto; height:250px;'>, dibawahnya. Anda bisa melihat perbedaannya pada contoh struktur widget Artikel Populer dan Like, Follow & Review.

    </b:includable> dan <b:include name='quickedit'/> sebagai tempat penutup kode </div>, diatasnya.

    • Jika sebelumnya anda pernah menghapus kode <b:include name='quickedit'/>, letakkan kode penutup </div> tepat diatas </b:includable>, seperti pada contoh diatas.

    OK, semoga bermanfaat untuk anda, dan terima kasih sudah mau berkunjung dan membaca artikel...

    Wassalamualaikum Wr. Wb.

    Cara mudah membuat scroll pada widget standar blogger

    Cara membuat link download di Ziddu


    Cara Membuat Link Download Di Ziddu
    Assalamualaikum Wr. Wb.

         Cara membuat link download di Ziddu - Ziddu adalah file sharing yang memiliki banyak kelebihan antara lain: proses penguploadan sangat cepat dibanding yang lain, kemudian jarang ada file yang rusak atau diblokir di ziddu, dst. Okelah tak perlu basa-basi lagi ya, kita langsung menuju pokok dari postingan blog ini yaitu membuat link download di ziddu. Dibawah ini adalah langkah-langkah untuk membuat link download di ziddu, silahkan:

    • Sign up ziddu. 
    • Masukkan data-data anda yang diminta yang meliputi nama, email, password, dan kode verivikasi.
    • Centang saya setuju syarat dan ketentuan/i agree terms and condition lalu klik submit/menyerahkan.
    • Kemudian sobat akan melihat tampilan berikut yang menandahkan akun sobat sudah jadi.
    go to my account
    • Klik pada go to my account dan sobat akan langsung menuju ke halaman upload file.
    • Untuk meng-upload file, tentuka dulu jumlah file yang ingin anda upload pada tulisan multiple files upload . kemudian klik browse dan pilih file yang akan anda upload.
    • Kemudian klik upload, tunggu beberapa saat hingga proses meng-upload selesai.
    • Setelah upload selesai, anda akan langsung mendapat url file (link download) yang tadi di upload. 
    • Selesai.

         Nah, setelah membuat link download di ziddu, sekarang kita tinggal memasukkan link download yang tadi di download di blog. Menurut saya, ada 3 model download

    • <a href="http://www.ziddu.com/download/21261806/SEOtemplatemaruf-blog.blogspot.com.rar.html" target="_blank"><b>DOWNLOAD</b></a>

    Nanti akan jadi seperti yang dibawah ini :


    • <a href="http://www.ziddu.com/download/21261806/SEOtemplatemaruf-blog.blogspot.com.rar.html" target="_blank"><img alt="Download Button" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5UOtTqdqV3bpAaqBAeDmFFgd8R4o5YypABBhs4U9vCGvJCLJb1X6uISX89LV-Z699cY1QDiZRbgfohRGPy0wZj7wks1x4vc3vzqdE5fWI33hAguH0LBSBCRhWVCuyqnqZibLSiFujJ3mK/s1600/download-button.jpg" /></a>

    Nanti akan jadi seperti yang di bawah ini :
     
    Download Button
    • <a href="http://www.ziddu.com/download/21261806/SEOtemplatemaruf-blog.blogspot.com.rar.html" target="_blank"><img alt="Download Button" src="http://maruf-blog.blogspot.com/-d94UwjQPxh8/T3plWl6fZNI/AAAAAAAAAyw/W_EAtXrMGY0/s1600/download-button.jpg" /></a>

    Nanti akan jadi seperti yang di bawah ini :

    Download Button  

    NB : Warna merah adalah link download yang tadi didapatkaan dari ziddu.

    Cara pemasangan di blog :

    • Pilih salah satu model download di atas.
    • Setelah anda memilih salah satu, kemudian salin/ copy kode html diatas.
    • Setelah di copy, masuk ke buat entri baru.
    • Kemudian klik HTML di sebelah compose.
    • Pastekan kode HTML model download tadi disitu.
    • Simpan.

    dan .. Lihat hasilnya :D kalau masih belum bisa, tinggalkan komentar yang ada dibawah, saya secepatnya akan membalas komentar anda. Itulah tips yang saya berikan  kepada kamu, saya rasa cukup sampai disini, kalau ada waktu kujung kesini lagi. Happy blogging.


    Wassalamualaikum Wr. Wb.
     
    - ©2013 - 2016 Yogi Irhandi Simamora V.3 -