Showing posts with label membuat. Show all posts
Showing posts with label membuat. Show all posts

Wednesday, February 26, 2014

Cara Membuat Auto Page Scroller di Blog

Cara Membuat Auto Page Scroller di Blog

Nah postingan kali ini mengangkat tentang Cara Membuat Auto Page Scroller di Blog kita. Untuk contohnya anda bisa mengarahkan cursor anda ke gambar seperti tanda panah ke atas dan kebawah di pojok kanan bawah pada halaman blog ini.



Jika anda tertarik untuk menggunakannya, anda bisa mencoba cara-caranya dibawah ini :
-Pertama-tama Login dulu ke Blogger
-Masuk ke Layout/Tata Letak
-Terus menuju ke Edit HTML
-Jangan lupa download dulu templatenya, agar jika terjadi kesalahan bisa diperbaiki.
-Nah...sekarang cari code </body> , biasanya letaknya paling bawah.
-Copy code ini sebelum code </body>

<div id="staticbuttons" style="position:absolute;">
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_LeWjwQzV3LgqhB2g03IzzTqf34dd-VIxxawKx9LkKPEpsPEgZR8B9pFRKgvZ5nhmaX-C3quaz2Wn2WirhDyCLut6bDoekAALgCGEVsxzEi3KfMs66RtH0OXCKHL8DCXbM8bcuSNvmps/s320/BUTTONUP.png" border="0"/></a><br/>
<a href="javascript:" onmouseover="myspeed=thespeed"
onmouseout="myspeed=0"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BdldR7_-a9nwhtpW5fqcw8l4uQFZMU7ySG2eXnVV8TAJspswT6j1YH6TyqDHIcPutX000W5a-b2YL-4KlmQi7wg537gah0WrWrGHCNdHymFt1dG8yHK1rkJEjfAGt2uUmfVg6Ciz-IE/s320/BUTTONDOWN.png" border="0"/></a>
</div>
<script>
var Hoffset=70
var Voffset=80
var thespeed=3
ieNOTopera=document.all&amp;&amp;navigator.userAgent.indexOf("Opera")==-1
var
myspeed=0
var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons :
document.getElementById? document.getElementById("staticbuttons") :
document.staticbuttons
function iecompattest(){
return (document.compatMode &amp;&amp;
document.compatMode!="BackCompat")? document.documentElement :
document.body
}
function positionit(){
var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra
: window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? iecompattest().clientHeight :
window.innerHeight
if (document.all||document.getElementById){
cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)
-Hoffset+"px"
cross_obj.style.top=dsoctop+parseInt(window_height)
-Voffset+"px"
}
else
if (document.layers){
cross_obj.left=dsocleft+window_width-Hoffset
cross_obj.top=dsoctop+window_height-Voffset
}
}
function scrollwindow(){
window.scrollBy(0,myspeed)
}
function initializeIT(){
positionit()
if (myspeed!=0){
scrollwindow()
}
}
if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",20)
</script>

-Ganti tulisan berwarna merah dengan link gambar anda
-Sesuaikan Angka berwarna biru(kecepatan scroll) dengan selera anda
-Simpan dech....
-Coba lihat hasilnya...


Smoga Bermanfaat--

Matur Nuwun--....


Sunday, December 22, 2013

Membuat Fitur Gallery Pada Postingan

Fitur Gallery Template
Tutorial ini menanggapi pertanyaan melalui komentar di halaman sini dari seseorang yang tak menyebutkan mamanya, pertanyaan kiranya seperti ini "Bagaimana membuat postingan dua kolom" sebenernya ini juga kebetulan juga karena saya cari lewat search belum banyak yang membuat artikel seperti ini jadi pesaingnya masih sedikit juga, akhirnya saya jawab "Kalau bersedia menunggu tutorialnya silahkan" dan sekarang artikel ini spesial deh buat beliau mas Anomin walaupun sebenarnya saya sendiri bingung untuk menjelaskannya tapi seadanya dan sebisanya akan saya jelaskan. oke sekarang langsung aja dibahas tentang cara membuat posting dengan fitur gallery atau postingan dengan 2 kolom.  Kamu juga bisa melihat demo yang sudah jadi Disini


Sebagai bahan percobaan saya sarankan untuk membuat blog baru saja untuk uji coba ini, kemudian template yang akan kita gunakan yaitu template minima bawaan blogger karena simple dan mudah untuk di ubahsuaikan, untuk template minimanya saya sudah persiapkan Template Minimaxs yaitu template hasil nodifikasi dari Minima Template yang bisa didownload terlebih dahulu di sini...!!!
Kalau sudah di download silahkan upload template tersebut di blog uji coba yang tadi dibuat. 
Jika kamu belum Memasang Auto Read more silahkan terapkan dulu langkahnya ada disini.



1. Tetap berada dalam Edit HTML

2. Kemudian cari kode  ]]></b:skin>

3. Jika sudah ketemu letakkan kode CSS berikut tepat dibawah kode ]]></b:skin>

 <b:if cond=data:blog.pageType != &quot;item&quot;>

<style>



/*homepage styles

--------------------------------------------------------*/

#main-wrapper {

width:625px;

float:left;

margin-right:0px;

margin-top:0px;

background:none;

overflow:hidden;}



.post {

width:295px;

height:210px;

margin:0px 10px 10px 0;

padding:5px 0 0 5px;

border:1px solid #ccc;

display:inline;

float:left;

overflow:hidden;

position:relative; background-color:#F5F5F5; font-family:arial; font-size:12px; }



.post h3 {

width:290px;

font-family:arial;

font-weight:bold;

font-size:12px;

color:#424242;

text-align:left;

margin:0px; border-bottom:1px solid #ccc;

position:absolute;}



.post-body {

width:290px;


height:240px;

overflow:hidden;

padding:0px;

margin:25px 0 0;}



.post img {

height:100px;

width:100px;


margin-top:5px;

padding:1px;}



</style>

</b:if>
4.  Kemudian simpan template dan lihat hasilnya.



Penjelasan Kode Element yang wajib di Sesuaikan :



Yang perlu diperhatikan yaitu kode  #main-wrapper dan kode .post karena jika tidak hasilnya akan sangat buruk dan kolom saling bertabrakan.



1. #Main-wrapper yaitu yang akan ditempati kolom posting atau .post, dari kode diatas lebar #main-warpper 625px perhatikan dibawah ini.



2. .post kode ini yang akan dibagi menjadi 2 kolom dan akan menentukan tiap kolom posting yang akan tampil dalam area #main-wrapper diatas yaitu 625px maka lebar post dibagi menjadi 2 dan dikurangi margin 10px + 10px dan padding 5px + 5px  = maka hasilnya 295px dan tinggi 210px (tinggi bisa disesuikan) perhatikan kode .post (anda bisa membuat menjadi 3 kolom jika angka 295px diperkecil lagi)



3. .post h3 Ini kode judul posting anda bisa merubah angka  width:290px; dengan menyesuaikan lebar posting.



4.  .post-body  Ini kode untuk menyimpan  kontent post atau post body sesuaikan width:290px; dan height:240px;



5. .post img  kode ini menentukan besar kecil gambar thumbnail posting bisa disesuaikan dengan merubah nilai   height:100px; dan width:100px;







Tambahan :

Mungkin langkah diatas akan mudah dan langung bisa dilihat hasilnya, karena memang template Minimaxs sudah saya sesuaikan untuk dibuat fitur gallery atau posting 2 kolom atau lebih.
Sekarang yang jadi pertanyaan yaitu bagaimana menerapkan fitur gallery atau posting 2 kolom ini jika menggunakan template selain Minimaxs yang saya buat, mungkin jika anda menggunakan template bawaan blogger masih mudah untuk di sesuaikan, tetapi kalau template yang anda gunakan bukan bawaan blogger mungkin saya akan sulit untuk menjelaskannya dikarenakan Kode Element yang mungkin berbeda dan kemungkinan telah dirubah oleh pembuat template tersebut jadi saya sarankan anda menggunakan template Minimaxs tersebut atau template bawaan blogger.


Jika anda ingin membuat dengan template yang bukan bawaan blogger maka yang harus dilakukan yaitu :

  • Menambahkan Fitur Readmore Thumbnail Image (jika belum ada) anda bisa membaca di sini

  • Anda  harus tau kode Main-wrapper dan kode Post pada template anda karena kode ini bisa juga berbeda-beda

  • Kemudian ikuti dengan langkah-langkah diatas.

Seperti itulah yang bisa saya jelaskan tentang membuat fitur gallery atau 2 kolom postingan, semoga mudah dimengerti, jika ada kesulitan atau mungkin ada kekeliruan pada tutorial diatas silahkan tinggalkan komentar.

Saturday, October 26, 2013

Cara Membuat Menu Bootstrap pada Blogspot

Cara Membuat Menu Bar di Blog - Tentu anda sudah mengenal dan mengetahui dengan istilah Menu / Menu Bar ? Menubar adalah sebuah kotak tab disertai dengan bingkai garis yang berisi daftar isi mengenai kategori, istilah, komponen, dll yang berisi navigasi link. Fungsi dari menu ini akan memudahkan pengunjung saat membaca sebuah artikel dan ingin mencari sesuatu yang lainnya yang diinformasikan oleh menu bar tersebut.
cara membuat menu
Manfaat penting dari memasang menu horizontall ( berbentuk memanjang ke samping ) adalah akan memberikan kemudahan dalam mengarahkan pembaca menuju halaman-halaman lain di blog yang kita buat mulai dari Halaman Utama ( Homepage ), Contact Us, Sitemap, Tentang Kami, Ketentuan dan lain sebagainya. Membuat menu sangatlah penting karena dijadikan sebagai navigasi penunjuk utama untuk mengarahkan link yang satu dengan link lainnya.

Kesempatan singkat ini Media Blogger akan memberikan pengarahan Cara Memasang Menu yang lebih cantik, keren, dinamis dan menarik. Salah satunya adalah Menu Dropdown mirip fasilitas Bootstrap. Berikut ini adalah contoh hasil dari menu tersebut.
menu dropdown bootstrap
Anda juga dapat mendownload source code dan contoh demonya pada link ini.

Menubar ini juga bisa diisi bagian-bagian submenu lain yang dapat anda optimalkan. Jadi, ketika anda mengarahkan kursor di salah satu daftar menu tersebut, akan muncul submenu lainnya. Kesimpulannya, jadi misalkan sobat ingin memasang submenu dari sebuah link itu tinggal menambah sedikit kode yang akan dijelaskan dibawah. Oh iya, menubar di postingan ini tidak ada search box seperti digambar. Menubar ini sudah dibuat agar responsive terhadap penampakan di browser lainnya. Tetapi jika sobat ingin membuat menubar di blog dengan search box, silahkan kunjungi postingan disini. Sudah tau kan bagaimana tampilan menubar di blog itu? nah, cara membuat menubar di blog tidak sulit kok dan terbilang sederehana. Mau tau cara pembuatannya? Yuk, ikuti tutorial singkat panduan berikut :

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini di atas kode ]]></b:skin>
#menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;
    background: #111;
    background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 50px;
    border-radius: 50px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
    float: left;
    padding: 0 0 10px 0;
    position: relative;
}

#menu a{
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
    color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
    color: #fafafa;
}

#menu li:hover > ul{
    display: block;
}

/* Sub-menu */
#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */
    height: 10px;
    width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
    height: 10px;
    width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
    background: -moz-linear-gradient(#04acec,  #0186ba);
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background: -webkit-linear-gradient(#04acec,  #0186ba);
    background: -o-linear-gradient(#04acec,  #0186ba);
    background: -ms-linear-gradient(#04acec,  #0186ba);
    background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: ;
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
6. Langkah selanjutnya, carilah kode <div id="content-wrapper">
7. Pasang kode dibawah ini diatas kode yang berwarna merah tersebut :
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Categories</a>
        <ul>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Graphic design</a></li>
            <li><a href="#">Development tools</a></li>
            <li><a href="#">Web design</a></li>
        </ul>
    </li>
    <li><a href="#">WorkShop</a></li>
    <li><a href="#">About</a></li>
    <li><a href="http://.blogspot.com">Search Engine Optimization</a></li>
</ul>

8. Bagi kamu yang tidak menemukan kode di tahap ke 6, bisa mencari kode <div id=header....>
Anda dapat menaruh kodee no. 7 pada bagian div lainnya contohnya header-wrapper dll itu tergantung dari nama ID yang digunakan pada template kalian. Biasanya sang creator template memberi nama yang sama.
Letakkan kode no. 7 di bawah <div id=header> atau <div id=header-wrapper> atau diatas kode <div id=main

Simpan template dan lihat hasilnya.
Untuk membuat submenu (menu dropdown) anda peerlu menambahkan kode <ul> sebelum diakhiri penutup </li> dari menu utama. Contohnya pada script nomor 7, saya beri warna biru.

Pada umumnya setiap menu itu dibentuk atas perintah kode <li><a href.......>Nama Menu</a></li>
Jadi, untuk memasukkan submenu dibutuhkan script bagian <ul> dan penutup </ul>

Sedangkan untuk memasukkan link, silahkan ganti tanda pagar diatas dengan url link yang anda tujukan.
Ketelitian dan kecermatan dalam memasang menu bar akan membuat menu anda terpasang rapih dan teratur. Anda dapat mengubah sereta mencocokkan warna, style , text ( bentuk huruf ), ukuran pada template blog dan sebagainya. Semoga panduan dan tutorial singkat mengenai cara membuat menu dropdown bootstrap pada blogspot ini dapat bermanfaat banyak bagi semua orang.

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

CARA MEMBUAT GAMBAR SEJAJAR DI BLOG

cara membuat gambar sejajar di blog
Gambar yang berantakan di blog memang kurang sedap jika dipandang, apalagi jika suatu gambar mempunyai peranan yang penting cukup penting untuk menunjang isi posting atau widget, berikut ada sebuah cara membuat gambar sejajar di blog, yaitu dengan menambahkan sedikit kode table pada HTML.

 Kode yang dipasang :

<table><tr>
<td>Letakkan Url Gambar atau Widget</td>
<td>Letakkan Url Gambar atau Widget</td>
</tr></table>

Silahkan ganti Url gambar / Widget diatas dengan Url gambar / Widget anda. Dan hasilnya akan seperti pada gambar diatas.

Cukup sekian postingan saya tentang cara membuat gambar sejajar di blog, semoga bermanfaat.

Cara Membuat Dual Boot Windows 8 dan Windows 7

Dual Boot Windows 8 dan Windows 7
Microsoft secara resmi meluncurkan Windows 8 pada 26 Oktober. Sistem operasi terbaru ini membawa sejumlah perubahan dibandingkan dengan pendahulunya. Windows 8 menjanjikan pengalaman baru melalui antarmuka pengguna yang lebih segar. Jika Anda penasaran ingin mencoba Windows 8, tapi tidak ingin meninggalkan Windows 7 sepenuhnya, dual boot adalah solusinya.  Ini juga akan memungkinkan pengguna yang ingin transisi dari Windows 7 ke Windows 8.

Berikut ini adalah cara untuk menjaga kedua Windows dapat dijalankan dalam satu komputer:

1. Membuat partisi baru pada hard disk Sebelum memulai instalasi Windows 8. Untuk membuat partisi baru, bisa menggunakan manajemen disk pada Windows 7 atau aplikasi pihak ketiga seperti Partition Magic atau Easeus Partition Master. Pastikan bahwa Anda membuat partisi dengan menggunakan sistem file NTFS.

2. Menyiapkan perangkat boot awal Setelah selesai membuat partisi baru untuk instalasi Windows 8, hal berikutnya yang kita lakukan adalah setup perangkat boot awal yang akan digunakan untuk instalasi. Ketika Anda membeli Windows 8 dalam bentuk fragmen disc, setup perangkat boot pertama dengan optical drive. Pengaturan ini bisa dilakukan melalui menu BIOS.

3. Sekarang Anda siap untuk meng-instal Windows 8 melalui disk atau media lainnya yang Anda gunakan. Ikuti petunjuk untuk menyelesaikan proses instalasi. Setelah instalasi Windows 8 selesai, boot menu akan menampilkan menu untuk memilih OS sebagai peluncur. Akhirnya, sekarang Anda hanya perlu memilih OS yang ingin Anda gunakan.

Untuk keamanan sebelum memutuskan untuk melakukan dual boot Windows 8 dan Windows 7, ada baiknya untuk melakukan back-up ke file penting untuk mencegah kemungkinan kegagalan.