Tampilkan postingan dengan label membuat. Tampilkan semua postingan
Tampilkan postingan dengan label membuat. Tampilkan semua postingan

Jumat, 08 November 2013

Cara Membuat Animasi Loading Page Blog dengan jQuery



Tutorial Belajar Blog - Cara Membuat Animasi Loading Page Blog dengan jQuery,Merupakan Tutorial edit blog tidak beda jauh dari tips sebelum nya Cara Membuat Animasi Loading Page di Blog dan  , Untuk membedakan coba sendiri ataupun liat dari gambar yang sudah ada.

Sekilas Tentang  Animasi loading page memberikan tampilan yang penuh dan sesuai, artinya setelah loading page selesai, maka animasi loading juga selesai. Waktu loading page bisa diukur dengan adanya animasi ini, karena animasi ini menggunakan hitungan persen.


Script animasi loading page ini saya dapat dari om Google yang merupakan versi awal dari script tersebut. Untuk membuat dan memasang animasi loading page pada blog Anda, langsung saja ikuti tutorial/panduan di bawah.

  1. masuk ke Design > Edit HTML lalu cari kode ]]></b:skin> dan letakan kode berikut ini diatas ]]></b:skin>.
  2. /* ---------------
    jquery animation loading page
    ---------------------------------- */
    .QOverlay {
    background-color: #000000; /* background color loading */
    z-index: 9999;
    }
    .QLoader {
    background-color: #CCCCCC; /* color bar loading */
    height: 10px;
    }
    .QAmt {
    color:#FF530D; /*loading Color number*/
    font-size:50px;
    font-weight:bold;
    line-height:50px;
    height:50px;
    width:100px;
    margin:-60px 0 0 -50px;
    }
  3. kemudian cari kode </head> dan letakan kode berikut ini di atasnya.
  4. <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js type=text/javascript/>
    <script src=http://googlecode.com/files/loadingpage.js type=text/javascript/>
  5. Untuk kode yang diberi warna merah (jQuery), tidak usah dipasang lagi jika sudah terdapat di template Anda (cukup 1 saja).
  6. Selanjutnya cari kode </body> dan letakankode berikut ini di atasnya.
  7. <script>
    QueryLoader.selectorPreload = &quot;body&quot;;
    QueryLoader.init();
    </script>
  8. Save template Anda dan coba buka blog Anda untuk melihat hasilnya.
  9. Bila script tidak berfungsi silakan cek ulang apakah Anda sudah mengukuti langkah di atas dengan benar. Jika Anda sudah mengikuti semua langkah dengan benar namun scriptnya tidak berfungsi juga, berarti script tersebut bentrok dengan script yang lain.
ReadFull Article ..

Bgaimana membuat TEMPAT BERTELUR lovebird

TEMPAT BERTELUR lovebird


Dalam berkembang biak lovebird memerlukan tempat untuk meletakkan telurnya. Tempat tersebut harus kita sediakan dengan baik sehingga lovebird bisa mengeram dengan tenang dan telur lovebird dapat menetas dengan baik.Tempat bertelur lovebird berbentuk kotak dengan ukuran bervariasi. Untuk kotak yang ideal berukuran 20cmx20cmx25cm. Penempatan kotak tersebut harus terhindar dari terik matahari dan hujan. Selain kotak tempat bertelur jangan lupa disediakan pula bahan sarang, bisa berupa rumput kering, serutan kayu dll. Bahan tersebut diletakkan di dasar kandang, jika sudah mendekati masa bertelur lovebird akan membawa bahan sarang tersebut ke dalam kotak tempat bertelur untuk ditata sebagai dasar untuk meletakkan telur dan berguna untuk menghangatkan telur.
ReadFull Article ..

Kamis, 07 November 2013

Cara Membuat Navbar Menu Berputar

Kawan masih ingat dengan postingan saya Cara Membuat Navbar Menu Menggulung yang tampilannya cukup unik, tapi yang sekarang ini jauh lebih unik lagi yang saya temukan pada Blogger Zhinto yang diberi nama Css3 Circle System Menu perhatikan screenshotnya




Oke langsung saja ke cara membuatnya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML 
  • Cari tag  ]]></b:skin> 
  • Copas kode berikut tepat diatasnya 
/* Name : Css3 Circle System Menu
 Author : zhinto
 URL : http://zhinto.blogspot.com/
*/
.hapus:after {
visibility: hidden;
display: block;
font-size: 0;
line-height: 0;
content: " ";
clear: both;
height: 0;
width: 0;
}
.hapus { display: inline-block; } * html .hapus { height: 1%; }
.hapus {
display: block;
}
ul.system-menu {
 margin: 0 auto 10px;
 padding: 0;
 position: relative;
 -moz-user-select: none;
 -webkit-user-select: none;
 user-select: none;
 width: 390px
 }
ul.system-menu li {
 list-style-type: none;
 margin: 0 5px 0 0;
 padding: 0;
 float: left;
 position: relative;
 width: 70px;
 height: 80px;
 -moz-transition: all 500ms linear;
 -o-transition: all 500ms linear;
 -webkit-transition: all 500ms linear;
 transition: all 500ms linear
 }
ul.system-menu li a {
 position: absolute;
 margin: -30px 0 0 -43%;
 text-decoration: none;
 font: bold 13px/40px Arial, sans-serif;
 padding: 0;
 background: #21D319;
 color: transparent;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px;
 display: block;
 width: 50px;
 height: 50px;
 text-align: center;
 top: 45%;
 left: 50%;
 outline: none;
 border: 5px inset #F8FBFC;
 -moz-box-shadow: 0 0 10px 4px #5E5E5E,
inset 0 0 20px rgba(0, 0, 0, 0.52);
-webkit-box-shadow: 0 0 10px 4px #5E5E5E,
inset 0 0 20px rgba(0, 0, 0, 0.52);
 box-shadow: 0 0 10px 4px #5E5E5E,
inset 0 0 20px rgba(0, 0, 0, 0.52);
 -moz-transition: all 100ms linear;
 -o-transition: all 100ms linear;
 -webkit-transition: all 100ms linear;
 transition: all 100ms linear
 }
ul.system-menu li a:hover {
 line-height: 130px;
 color: #000;
 border-color: #C5B386;
 background: #FAC800;
 -moz-transition-delay: 0.5s;
 -o-transition-delay: 0.5s;
 -webkit-transition-delay: 0.5s;
 transition-delay: 0.5s
 }
ul.system-menu li span.pembuka {
 position: absolute;
 left: 50%;
 margin: 0 0 0 -29%;
 top: 11px;
 width: 25px;
 height: 30px;
 background: #949596;
 -moz-box-shadow: 3px -3px 0 0 #ECECEC;
 -webkit-box-shadow: 3px -3px 0 0 #ECECEC;
 box-shadow: 3px -3px 0 0 #ECECEC
 }
ul.system-menu li span.satu, ul.system-menu li span.dua, ul.system-menu li span.tiga {
position: absolute;
background: #F0F0F0;
padding: 2px; width: 15px; left: 3px
 }
ul.system-menu li span.satu { top: 5px }
ul.system-menu li span.dua { top: 13px }
ul.system-menu li span.tiga { top: 22px }
.empat, .lima, .enam { position: absolute }
.empat {
 border: 15px solid;
 border-color: transparent transparent #EEE transparent; top: -7px; left: 10px
 }
.lima { padding: 4px; background: #EEE; height: 5px; top: 22px; left: 14px }
.enam { padding: 4px; background: #EEE; height: 5px; top: 22px; left: 28px }
.abot, .abit { position: absolute; left: 15px }
.abot {
 width: 20px;
 height: 20px;
 background: #EEE;
 top: 20%;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px
 }
.abit { border: 10px solid; border-color: transparent transparent #EEE transparent; top: 33% }
.a, .b, .c, .d { position: absolute; padding: 5px; background: #FFF7F7; top: 26% }
.a { left: 25px; background: #39FF13 }
.b { top: 27px; left: 13px; background: #0070FF }
.c { left: 25px; top: 27px; background: #FFE000 }
.d { left: 13px }
.e, .f { position: absolute }
.e { width: 15px; height: 17px; background: rgb(171, 185, 163); top: 35%; left: 32%; border: 2px solid rgb(255, 255, 255) }
.f { border: 10px solid; border-color: transparent transparent rgb(255, 255, 255) transparent; top: -2px; left: 30% }
ul.system-menu:hover li:not(:hover) {
 -moz-transform: rotate(360deg) scale(0.7);
 -ms-transform: rotate(360deg) scale(0.7);
 -o-transform: rotate(360deg) scale(0.7);
 -webkit-transform: rotate(360deg) scale(0.7);
 transform: rotate(360deg) scale(0.7)
 }
  • Sampai disini simpan Template kawan
  • Selanjutnya pilih Tata Letak - Tambahkan Gadget
  • Pilih tanda [+] pada HTML / JavaSript
  • Copas kode berikut kedalamnya
<ul class=system-menu hapus>
<li><a href="#">
<span class=empat></span>
<span class=lima></span>
<span class=enam></span>Depan</a></li>
<li><a href="#"><span class=pembuka>
<span class=satu></span>
<span class=dua></span>
<span class=tiga></span></span>Artikel</a></li>
<li><a href="#"><span class=abot></span><span class=abit></span>Tentang</a></li>
<li><a href="#"> <span class=a></span>
<span class=b></span>
<span class=c></span>
<span class=d></span>Kategori</a></li>
<li><a href="#"><span class=e></span><span class=f></span>Coretan</a></li>
</ul>
    • Simpan Blog kawan

    ReadFull Article ..

    Selasa, 05 November 2013

    Cara membuat efek bintang jatuh dari cursor di blog

    Cara membuat efek bintang jatuh dari cursor di blog, animasi bintang jatuh adalah sebuah animasi kursor yang berupa bintang bertaburan yang jatuh dari cursor atau mouse ketika digerakkan, hal ini sangat menarik untuk dipasang di sebuah blog atau website karena animasi nya yang indah dan unik sehingga akan menarik visitor blog untuk betah tinggal lama-lama untuk membaca blog sobat
    Cara Buat Bintang Jatuh dari Kursor
    Buat sobat yang senang me-modifikasi blog nya dengan sesuatu yang beda dan unik mungkin perlu mencoba animasi bintang jatuh yang satu ini. Cara membuat bintang jatuh ini juga tidak susah-susah amat dan sobat tidak perlu meng-edit kode yang ada di template, cukup hanya copy paste kode-kode yang akan saya berikan dibawah nanti ke edit html pada bagian add gadget dan juga untuk mengganti warna bintang nya pun sobat bisa rubah sesuai dengan warna background template blog sobat dengan bantuan Colorpic software, tertarik? silahkan ikuti tutorial blogger dibawah ini

    Pemasangan Efek Bintang Jatuh Pada Cursor di Blogger

    • Login di Blogger
    • Pilih Design > Add gadget > HTML/Javascript
    • Masukkan kode dibawah ini ke kolom HTML/Javascript
    <script type=text/javascript>
    // <![CDATA[
    var colour="#52D8ED";
    var sparkles=100;
    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var tiny=new Array();
    var star=new Array();
    var starv=new Array();
    var starx=new Array();
    var stary=new Array();
    var tinyx=new Array();
    var tinyy=new Array();
    var tinyv=new Array();
    window.onload=function() { if (document.getElementById) {
    var i, rats, rlef, rdow;
    for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="3px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="3px";
    document.body.appendChild(star[i]=rats);
    }
    set_width();
    sparkle();
    }}
    function sparkle() {
    var c;
    if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
    star[c].style.left=(starx[c]=x)+"px";
    star[c].style.top=(stary[c]=y)+"px";
    star[c].style.clip="rect(0px, 5px, 5px, 0px)";
    star[c].style.visibility="visible";
    starv[c]=50;
    break;
    }
    }
    for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
    }
    setTimeout("sparkle()", 40);
    }
    function update_star(i) {
    if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
    if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    if (stary[i]<shigh+sdown) {
    star[i].style.top=stary[i]+"px";
    starx[i]+=(i%5-2)/5;
    star[i].style.left=starx[i]+"px";
    }
    else {
    star[i].style.visibility="hidden";
    starv[i]=0;
    return;
    }
    }
    else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
    }
    }
    function update_tiny(i) {
    if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
    }
    if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    if (tinyy[i]<shigh+sdown) {
    tiny[i].style.top=tinyy[i]+"px";
    tinyx[i]+=(i%5-2)/5;
    tiny[i].style.left=tinyx[i]+"px";
    }
    else {
    tiny[i].style.visibility="hidden";
    tinyv[i]=0;
    return;
    }
    }
    else tiny[i].style.visibility="hidden";
    }
    document.onmousemove=mouse;
    function mouse(e) {
    set_scroll();
    y=(e)?e.pageY:event.y+sdown;
    x=(e)?e.pageX:event.x+sleft;
    }
    function set_scroll() {
    if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
    }
    else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
    }
    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
    }
    else {
    sdown=0;
    sleft=0;
    }
    }
    window.onresize=set_width;
    function set_width() {
    if (typeof(self.innerWidth)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
    }
    else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
    }
    }
    function createDiv(height, width) {
    var div=document.createElement("div");
    div.style.position="absolute";
    div.style.height=height+"px";
    div.style.width=width+"px";
    div.style.overflow="hidden";
    div.style.backgroundColor=colour;
    return (div);
    }
    // ]]>
    </script>
    Cari kode yang berwarna merah diatas dan gantilah sesuai dengan kode warna keinginan sobat
    Terakhir simpan dan efek bintang jatuh dari cursor sudah dapat sobat lihat
    ReadFull Article ..

    Sabtu, 02 November 2013

    Trik Cepat Membuat Bingkai Ijazah Dengan CorelDRAW

    Dengan CorelDRAW Mas Bro sekalian bisa membuat bingkai/border ijazah dengan cepat bahkan anda bisa berkreasi dengan bermacam-macam model sesuai dengan yang anda kehendaki dengan trik yang sederhana yang menurutku layak jual sebagai koleksi template atau blangko ijazah, piagam atau sertifikat. Motif seperti ini disebut Guilloché yang biasa dipakai pada desain uang, surat berhaga, sertifikat, ijazah dan sebagainya.

    MasBro sekalian mungkin akan terkejut betapa mudahnya cara membuat motif yang seperti ini dengan CorelDRAW, sebagai contoh, perhatikan cara buatnya dibawah ini;


    Langkah 1;
    Buat Lingkaran, ukurannya terserah, trus gandakan dan drag/geser ke dalam untuk mengecilkan, select kedua lingkaran kemudian tekan huruf C di keyboard;



    Langkah; 2
    Kemudian gandakan/copas lingkaran yang kecil, dan tekan Shift+klik pada lingkaran yang gede trus tekan huruf T di keyboard untuk memposisikan lingkaran kecil hasil copas ke posisi atas, hasilnya akan seperti gambar dibawah ini;

    Langkah; 3
    Selanjutnya lingkaran yang gede gepengkan menjadi bentuk elips seperti dibawah ini, dan Combine semua object;


    Langkah; 4
    Kemudian tekan Ctrl+D di keyboard untuk menduplikat (ingat Ctrl+D, Copy Paste tidak bisa), selanjutnya pada Property Bar isikan 5 derajat pada Angle of rotation tekan Enter;


    Langkah; 5
    Selanjutnya tekan Ctrl+D sampai terbentuk object seperti gambar dibawah ini dan Group semua object (Ctrl+G);


    Langkah; 6
    Atau dengan langkah cepat anda bisa menggunakan Docker Transformation, anda select object (langkah; 3) anda pilih tab Rotate dan ikuti langkah urut nomor maka akan terbentuk seperti gambar diatas dan Group semua object (Ctrl+G);



    Langkah;7
    Selanjutnya buat kotak dan posisikan pada  object, kemudian klik object yang warna merah itu dan aktifkan Efects > PowerClip arahkan panah pada object kotak;


    Langkah; 8
    Gandakan dan geser kesamping, buat object segitiga sama sisi gunakan untuk memotong salah satu object, caranya klik object potong dan Shift+klik object yang dipotong dan tekan Trim pada Property Bar;


    Langkah; 9
    Selanjutnya gandakan dan mirror ke bawah;

    Langkah;10
    Rotate 90 derajat pada Angle of rotation di Property Bar

    Langkah;11
    Posisikan pada object yang satunya;

    Langkah;12
    Gandakan satu saja ke samping, yang bawah dua seperti dibawah ini;

    Langkah;13
    Select semua object, gandakan dan mirror kesamping;


    Langkah;14
    Select semua object, gandakan dan mirror kebawah;


    Langkah;15
    Selanjutnya beri pelengkap terserah Mas Bro sekalian, seperti gambar dibawah ini kalau di dilihat sebagian sisi sudutnya;



    Selesai; selamat mencoba


    Di publikasikan oleh :Zainoel Arifin Isyai
    Ide tutorial :  Andri Dnd
    ReadFull Article ..

    Rabu, 30 Oktober 2013

    Cara Sharing Internet Dan Membuat Wifi Hostpot di Windows 8

    Bagaimana cara share internet pada windows 8?, itu adalah pertanyaan yang masuk ke inbok email saya beberapa hari yang lalu. Pada kesempatan ini saya coba untuk menjawab pertanyaan tersebut, dan mudah-mudahan tulisan ini dapat bermanfaat juga buat yang lainnya.

    Sebelumnya mungkin ada yang beranggapan bahwa cara sharing internet di windows 8 sama saja dengan di windows 7, perlu anda ketahui ada sedikit perbedaan cara share internet pada windows 8 dimana tidak adanya pengaturan untuk membuat jaringan Ad Hoc pada Network dan Sharing Center. 

    Persiapan
    Laptop/ PC dengan fitur wireless / wifi
    Koneksi internet
    OS Windows 8

    Cara Sharing Internet pada Windows 8

    Masuk ke Command Prompt sebagai Administrator atau tekan keyboard Windows+X dan pilih Command Prompt (Admin), YES.

    Ketikkan perintah : netsh wlan set hostednetwork mode=allow ssid=InternetSaya key=abcd12345

    Ket:
    InternetSaya adalah nama SSID 
    abcd12345 adalah password

    Silahkan gunakan ssid dan password yang anda inginkan, itu hanya contoh saja.

    Kemudian ketikkan kembali di Command Prompt seperti ini: netsh wlan start hostednetwork
    Sekarang kita telah selesai sharing internet pada windows 8, selanjutnya kita akan membuat wi-fi Hospot untuk berbagi jaringan internet yang ada pada perangkat lainnya yang memiliki jaringan wi-fi.

    Membuat Wifi Hostpot di Windows 8

    Masuk ke Network and Sharing Center pada Control Panel, caranya bisa dengan mengetikkan langsung pada start menu "Network and Sharing" atau masuk ke Control Panel dan pilih Network and Sharing.

    Cara Sharing Internet Dan Membuat Wifi Hostpot di Windows 8

    Cara Sharing Internet Windows 8

    Klik link Change Adapter Settings, anda akan dibawa ke tampilan semua perangkat Network Connections.
    Coba perhatikan anda akan melihat jaringan dengan nama "InternetSaya" yang sebelumnya telah kita buat.
    Selanjutnya klik kanan pada koneksi yang sedang anda gunakan, disini saya menggunakan koneksi speedy via Ethernet. Masuk ke tab sharing, dan berikan centang pada kotak "Allow other network users to connect through this computers Internet connection" dan "Allow other network users to control or disable the shared Internet connection"

    Finish

    Untuk mencoba jaringan yang telah kita buat, silahkan aktifkan wifi smartphone atau laptop anda dan coba hubunkan koneksi, jika koneksi berhasil maka anda akan dapat membuka internet.

    Cara sharing internet pada windows 8 ini mungkin akan terlihat sedikit lebih sulit dibanding pada windows 7, mungkin ada cara yang lebih simple dan lebih mudah untuk dipahami. Silahkan tanya om google untuk mengetahui cara mudah sharing internet dan membuat hostpot pada windows 8.
    ReadFull Article ..

    Minggu, 27 Oktober 2013

    Resep dan Cara Membuat Jamur Crispy Balado

    Resep Jamur Crispy Balado - Bismillah, kita kali ini ingin coba berbagi resep dan cara membuat Jamur Crispy Balado yang enak dan gurih. Jamur crispy memiliki tekstur berserat seperti daging ditambah dengan pengolahannya menjadi crispy membuat jamur crispy ini banyak digemari untuk dijadikan cemilan di saat santai. Jenis jamur yang digunakan adalah jamur tiram dan banyak sekali manfaat jamur tiram bagi kesehatan.


    Bagaimana cara membuat Jamur Crispy Balado?, simak resep berikut ini.

    Bahan Jamur Crispy Balado

    • 200 gram jamur tiram, disuwir panjang dan dicuci bersih
    • minyak untuk menggoreng

    Bahan Pelapis

    • 40 gram maizena
    • 300 gram tepung terigu protein sedang
    • 1/2 sendok makan garam
    • 1 sendok teh kaldu ayam bubuk
    • 1/2 sendok teh baking powder

    Bahan Pencelup (aduk Rata)

    • 75 gram tepung terigu protein sedang
    • 10 gram maizena
    • 1 sendok teh baking powder
    • 200 ml air es
    • 1/2 sendok teh garam
    • 1/2 sendok teh merica bubuk
    • 1/2 sendok makan minyak goreng

    Bahan Taburan

    • 2 1/2 sendok teh bumbu balado siap pakai

    Cara Membuat Jamur Crispy Balado

    1. Cuci bersih jamur dan peras sampai benar-benar tiris.
    2. Pelapis, aduk rata tepung terigu, maizena, baking powder, garam, dan kaldu ayam bubuk.
    3. Gulingkan jamur di atas bahan pelapis. Celupkan ke dalam bahan pencelup. Gulingkan lagi di atas bahan pelapis.
    4. Goreng di dalam minyak yang dipanaskan di atas api sedang sampai matang.
    5. Sajikan jamur bersama bahan taburan.
    Selamat Mencoba...!
    ReadFull Article ..

    Jumat, 25 Oktober 2013

    Cara Membuat 2 Kolom Elemen di bawah Header

    Cara Membuat 2 Kolom Elemen di bawah Header - Menambahkan 2 Kolom Elemen dibawah header mungkin adalah salah satu cara untuk menambah tempat untuk kita meletakkan gadget. Saya sendiri telah mempraktekannya, hasilnya lumayan juga, tapi ada bagian yang tidak memuaskan, makannya saya menambahkan sedikit CSS. Contohnya sobat bisa lihat gambar dibawah ini :

     

    Berikut Tutorialnya :

    1. Login ke Account Blogger sobat
    2. Pilih Dasbor, lalu Rancangan
    3. Klik Edit HTML > Centang "Expand Template Widget"
    4. Cari kode ]]></b:skin> (Tekan Ctrl+f untuk mempermudah pencarian kodenya)
    5. Copy kode dibawah ini tepat diatas kode ]]></b:skin>

    #box-main-container {
    clear:both;
    }
    .box-column {
    padding:0px 10px 10px 10px;
    border:1px dotted $bordercolor;
    }

    6. Cari kode  <div id=main-wrapper>, bila sudah Copy kode berikut tepat diatasnya

    <div id=box-main-container>
    <div id=box1 style=width: 50%; float: left; margin:0; text-align: left;>
    <b:section class=box-column id=col1 preferred=yes style=float:left;/>
    </div>
    <div id=box2 style=width: 50%; float: right; margin:0; text-align: left;>
    <b:section class=box-column id=col2 preferred=yes style=float:right;/>
    </div>
    <div style=clear:both;/>
    </div>


    7. Klik Simpan Template. dan lihat hasilnya :D
     

    ReadFull Article ..

    Membuat Menu Recent Post keren Model Tayang Slide

    Menbuat menu recent post keren
    Membuat Menu Recent Post Keren Model Tayang Slide.Pagi ini saya akan share cara membuat menu racent pos dengan tampilan keren dan juga terbaru buat sohib semua yang baru membuat website khususnya blogger. Recent post adalah salah satu cara untuk menghemat pada halaman home para bloger saat ini pasti melakukan teknik ini untuk memperindah blognya, bukan hanya recent post tapi juga menyertakan seperti arcive blog,daftar label dan lain lain tujuannya agar para pembaca bisa melihat hal-hal yang penting menurut pemilik blog sekaligus agar para pembaca merasa krasan di blog tersebut, untuk membuat daftar recent post ini cukup mudah dan gak pake lama juga gak pake ribet, caranya yaitu

    • pertama anda masuk dulu bada bagian tata letak
    • klik tambahkan gedget sesuai dengan keinginan sobat
    • lalu cari gedget yang namanya HTML/Java Script
    • lalu kopi script berikut ini di gedget tersebut
    • <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
      </script>
      <style media="screen" type="text/css">
      <!--
      #spylist {
      overflow:hidden;
      margin-top:5px;
      padding:0px 0px;
      height:245px;
      }
      #spylist ul{
      width:300px;
      overflow:hidden;
      list-style-type: none;
      padding: 0px 0px;
      margin:0px 0px;
      }
      #spylist li {
      width:280px;
      padding: 5px 5px;
      margin:0px 0px 5px 0px;
      list-style-type:none;
      float:none;
      height:70px;
      overflow: hidden;
      background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
      border:1px solid #ddd;
      }
      #spylist li a {
      text-decoration:none;
      color:#4B545B;
      font-size:11px;
      height:18px;
      overflow:hidden;
      margin:0px 0px;
      padding:0px 0px 2px 0px;
      }
      #spylist li img {
      float:left;
      margin-right:5px;
      background:#EFEFEF;
      border:0;
      }
      .spydate{
      overflow:hidden;
      font-size:10px;
      color:#0284C2;
      padding:2px 0px;
      margin:1px 0px 0px 0px;
      height:15px;
      font-family:Tahoma,Arial,verdana, sans-serif;
      }
      .spycomment{
      overflow:hidden;
      font-family:Tahoma,Arial,verdana, sans-serif;
      font-size:10px;
      color:#262B2F;
      padding:0px 0px;
      margin:0px 0px;
      }
      -->
      </style>
      <script language="JavaScript">
      imgr = new Array();
      imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
      imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
      imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
      imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
      imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
      showRandomImg = true;
      boxwidth = 255;
      cellspacing = 6;
      borderColor = "#232c35";
      bgTD = "#000000";
      thumbwidth = 70;
      thumbheight = 70;
      fntsize = 12;
      acolor = "#666";
      aBold = true;
      icon = " ";
      text = "comments";
      showPostDate = true;
      summaryPost = 40;
      summaryFontsize = 10;
      summaryColor = "#666";
      icon2 = " ";
      numposts = 10;
      home_page = "http://.blogspot.com/";
      limitspy=4
      intervalspy=4000
      </script>
      <div id="spylist">
      <script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
      </script></div>
    • Kemudia di klik simpan
    keterangan :
    •  untuk yang berwarna Biru ganti dengan jumlah artikelnya
    • untuk yang berwarna Merah ganti dengan alamat URL blog sobat
    gima gampang kan seperti yang saya bilang, coba lihat di blog sobat pasti merasa puas dengan arikel Membuat Recent Post keren Model Tayang Slide ini. Sekian dulu ya sobat semoga artikel Membuat Menu "Recent Post" keren Model Tayang Slide bermanfaat untuk semua

    ReadFull Article ..

    Cara Membuat Search Engine Pada Blog

    Jumpa lagi sobat, kali ini mari kita bahas soal Search Engine. Tau gak apa itu Search Engine. Ya kalau menurut saya yang dimaksud dengan Search Engine adalah media atau tempat buat mencari bahan entah artikel dll di internet. Itu menurut saya lho. Tau dech menurut sobat semuanya apa itu Search Engine. Untuk saat ini Search Engine memang tidak bisa dipisahkan di dunia networking atu di dunia blogger. Ya pokoknya gitu dech. Dah langsung aja yach sobat di kasih tau caranya :

    1.    Login ke blogger terus klik Layout terus pilih page elements nha disitu kan banyak tulisan Add a page
    elements klik link tersebut dan sesuaikan dimana tempatnya menaruh search engine.






    2.    Kemudian pada layar baru yang muncul pilih HTML/Javascript kemudian copy/paste script/kode berikut ini di dalam kolom content.

    <form action="http://nama-blogmu.blogspot.com/search"
    method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

    Ganti nama-blogmu dengan nama blog kamu. Aangka 30 menunjukkan panjang kotak (text box) semakin banyak angkanya maka semakin panjang textbox-nya

    Contoh nya :

    <form action="http://.blogspot.com/search"
    method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

    Hasilnya yaitu :



    Semoga sukses ya
    ReadFull Article ..