25 January 2013

Cara Membuat Menu Vertikal di Blog

Cara Membuat Menu Vertikal di Blog



Cara memasang

1. Masuk ke Dasbor Blog >> Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript

2. Masukkan kode di bawah ini kedua nya.


Yang perlu sobat perhatikan antara lain;

1. Ukuran lebar menu disini adalah 300px, jangan lupa disesuaikan dengan ukuran sidebar blog sobat dgn mengurangi atau menambahnya.

2. Jumlah URL/Post maksimal 5 (saya gak tahu juga, kok cuma bisa segitu, hehe maklum super gaptek). Jika sobat mengisi dengan 6 Link, gak bakalan tampil semua.

3. Untuk menambah navigasi, silahkan copy saja kode yang sudah saya beri warna merah tebal sebagai contoh, kemudian ganti URL dan Judul Post

4. Kode berwarna hijau, sebagai judul/anchor text, sesuaikan dengan artikel sobat.

5. Untuk pewarnaan menunya silakan utak atik sendiri yee, hehehe. contoh pewarnaan nya ada pada kode color: #0A0A0A;

6. Selamat Mencoba. Salam Super.
cara mambuat Menu Sliding Vertikal Dengan CSS

cara mambuat Menu Sliding Vertikal Dengan CSS

Menu Sliding Vertikal Dengan CSS. Langsung saja masuk ke pembahasan :

Langkah 1
Masuk ke akun Blogger anda
Langkah 2
Masuk Ke Menu Rancangan atau Design
Langkah 3
Masuk ke EDIT HTML
Langkah 4
Silahkan Copy Paste kode dibawah ini tepat diatas kode ]]></b:skin>
 
Langkah 5
Setelah anda selesai memasukkan kode diatas. Sekarang memasukkan kode dibawah ini dengan cara menambahkan Gadget HTML/JavaScript.

Langkah 6
Simpan template anda dan lihat hasilnya. Sekian terima kasih trik kali ini.

Cara Menmbuat dan Menggunakan CSS-3 Accordion Menu Serba Guna

  • Login to Blogger (Login ke Blogger) : Tuliskan User Name (Nama Pengguna) atau Email Address kemudian tuliskan juga Password (Sandi) baru lanjutkan KLIK "Login".
  • Dasboard (Dasbor) : Setelah masuk di halaman "Dasboard" KLIK "Design (Rancangan)".
  • Design (Rancangan) : KLIK link "Add Gadget (Tambah Gadget)".
  • KLIK link "HTML/Javascript".
  • Copy-Paste kode CSS dan kode HTMl "CSS-3 Accordion Menu Serba Guna" di box Penambahan Widget.
  • KLIK "SAVE (Simpan)".
  • Buka Blog untuk melihat hasilnya.
Kode HTML: CSS-3 Accordion Menu Serba Guna

24 January 2013

Memasang Slide Carousel di Blogger

Memasang Slide Carousel di Blogger

langsung saja cara membuatnya
1. Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. Centangin checkbox Expand Widget Template.
3. kalian cari kode berikut :
]]></b:skin>
4. kalo udah ketemu, kalian ganti kode ]]></b:skin> dengan kode berikut:
 /*----------------------------------------------------
{--------}  carousel slider  {--------}
----------------------------------------------------*/
.carousel{
float:left;
margin: 0;
padding:0px;
}

.carousel .widget {
width: 920px;  /*sesuaikan dengan template*/
background:#000000;
margin: 0;
padding:0;
}

.carousel h2{
display:none;
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 980px;
height: 155px;
}

.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 2px;
width: 106px;
}

.stepcarousel .panel img{
float: left;
background:#666666;
margin: 0px;
padding:2px;
border:1px solid #ccc;
}

.stepcarousel .panel img:hover{
background:#000000;
}

]]></b:skin>

<script src='http://sites.google.com/site/anchamanproject/CopyjQuery-1.2.6.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anchamanproject/CopyStepCarouselViewer.js' type='text/javascript'/>
5. Klik Simpan deh.

Buat nambahin ke widgetnya. langkah-langkahnya :

1. Menu Dashboard, klik Tata Letak, klik Elemen Halaman.
2. Klik Tambah Gadget. Klik HTML/Javascript.
3. Copy Paste kode berikut :

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://sites.google.com/site/anchamanproject/Left-Arrow.png', 30, 60], rightnav: ['http://sites.google.com/site/anchamanproject/Right-Arrow.png', -65, 60]},statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})

</script>


<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- Ganti link dengan link kalian -->

<div class="panel">
<a href="URL-ANDA" title="TITLE"> <img src="URL-GAMBAR" width="100" height=" 148" title="TITLE"/></a>
</div>


<div class="panel">
<a href="http://klipinggame.blogspot.com/2011/11/explodemon.html" title="explodemon"> <img src="http://4.bp.blogspot.com/-tejrv68DIDw/TrZ2RxOBycI/AAAAAAAAAg0/-DWPBXZT6EU/s400/t-expdmon.jpg" width="100" height=" 148" title="explodemon"/></a>
</div>

<div class="panel">
<a href="http://klipinggame.blogspot.com/2011/10/pro-evolution-soccer-2012-reloaded.html" title="PES2012"> <img src="http://4.bp.blogspot.com/-jHOKtg3mdEs/TpgnFs9To7I/AAAAAAAAARk/sTYkh71FhHA/s400/2mOvk.jpg" width="100" height=" 148" title="PES2012"/></a>
</div>


<!-- copas code diatas untuk memperbanyak tampilan -->
</div>
</div>
 4. Klik Simpan.

nb:
  • widget ini biasanya dipasang di header.kalo susah pasang diheader.pasang atas posting aja,sesuaikan dengan lebar (width) template anda
  • untuk menghilangkan fungsi otomatis slider,autostep diganti jadi false,cth : autostep: {enable:false, moveby:1, pause:3000},
  • untuk ukuran gambar tampilan jg bs dirubah. pada gadget/widget sesuaikanlah width dan heigth.
  • selamat mencoba.trial n error ..............semoga bermanfaat. hehehehe

Cara Memasang Basmallah di Awal Postingan Blog

Cara Memasang Basmallah di Awal Postingan Blog

Baiklah kita langsung saja ke tutorial membuat bismillah di awal setiap postingan blog :   1.Masuk Ke Akun Blogger Anda Anda
  2.Pilih ke menu Template
  3.Kemudian klik Edit HTML
  4.Centang Expand Widget Template
  5.Kemudian cari kode   <data:post.body/>
  6.Lalu copas/copy paste script di bawah ini,Lalu letakan di bawah kode  <data:post.body/>


<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></span></span></div><br/>
 7.Simpan template !

Sekian tutorial untuk Cara Memasang Basmallah di Awal Postingan Blog dari saya.Semoga bisa bermanfaat bagi anda semua

22 January 2013

downloand temple blog full

downloand temple blog full

di sini kepsuk ingin berbagi temple blog yg pernah menjadi koleksi kepsuk,untuk blog kepsuk yg ada.temple blog kepsuk ini banyak nya -+ 1000 temple langsung saja di sedot dengan mengklik link downloand di bawah ini

DOWNLOAND

21 January 2013

Membuat Navigasi Dropdwon Menu Unik Style Kompas





  cara Memasang Menu Navigasi Ala Kompas.com
  1. Login Ke blogger anda
  2. Masuk ke halaman Edit HTML dengan cara, Dari dashboard pilih Template --> Edit HTML --> Proses/lanjutkan
  3. Download Lengkap Template  blog terlebih dahulu untuk antisipasi kesalanan
  4. Sekarang Cari Kode ]]></b:skin> (Gunakan CTRL + F dan F3 untuk mempermudah pencarian)
  5. Setelah Ketemu Copas kode berikut dan letakan diatas kode ]]></b:skin>
  6.  .nav {
    height:35px;
    background: url(http://3.bp.blogspot.com/-iYO_dq-SM3k/Ti1qX6kEh0I/AAAAAAAAE1g/riMnCYQz3_4/s1600/bg.gif) repeat-x;
    position:relative;
    font-family:arial, verdana, sans-serif;
    font-size:11px;
    width:100%;
    z-index:100;
    margin:0;
    padding:0;
    }
    .nav .table {
    display:table;
    margin:0 auto;
    }
    .nav .select,
    .nav .current {
    margin:0;
    padding:0;
    list-style:none;
    display:table-cell;
    white-space:nowrap;
    }
    .nav li {
    margin:0;
    padding:0;
    height:auto;
    float:left;
    }
    .nav .select a {
    display:block;
    height:35px;
    float:left;
    font-weight:bold;
    background: url(http://3.bp.blogspot.com/-iYO_dq-SM3k/Ti1qX6kEh0I/AAAAAAAAE1g/riMnCYQz3_4/s1600/bg.gif);
    padding:0 30px 0 30px;
    text-decoration:none;
    line-height:35px;
    white-space:nowrap;
    color:#2b3238;
    }

    .nav .select a:hover,
    .nav .select li:hover a {
    background: url(http://2.bp.blogspot.com/-nVl9muJMq7Q/Ti1qYHKkioI/AAAAAAAAE1k/-xo6sTlGN-A/s1600/hover.gif);
    padding:0 0 0 15px;
    cursor:pointer;
    color:#2b3238;
    }
    .nav .select a b{
    font-weight:bold;
    }
    .nav .select a:hover b,
    .nav .select li:hover a b {
    display:block;
    float:left;
    padding:0 30px 0 15px;
    background:url(http://2.bp.blogspot.com/-nVl9muJMq7Q/Ti1qYHKkioI/AAAAAAAAE1k/-xo6sTlGN-A/s1600/hover.gif) right top;
    cursor:pointer;
    }
    .nav .select_sub {
    display:none;
    }
    /* IE6 only */
    .nav table {
    border-collapse:collapse;
    margin:-1px;
    font-size:1em;
    width:0;
    height:0;
    }
    .nav .sub {
    display:table;
    margin:0 auto;
    padding:0;
    list-style:none;
    }
    .nav .sub_active .current_sub a,
    .nav .sub_active a:hover {
    background:transparent;
    color:#2b3238;
    }
    .nav .select :hover .select_sub,
    .nav .current .show {
    display:block;
    position:absolute;
    width:100%;
    top:35px;
    background:url(http://1.bp.blogspot.com/-ha6EhdiZxBI/Ti1qXa6bmsI/AAAAAAAAE1c/A7NU-qQ_-Ls/s1600/back.gif);
    padding:0;
    z-index:100;
    left:0;
    text-align:center;
    }
    .nav .current .show {
    z-index:10;
    }
    .nav .select :hover .sub li a,
    .nav .current .show .sub li a {
    display:block;
    float:left;
    background:transparent;
    padding:0 10px 0 10px;
    margin:0;
    white-space:nowrap;
    border:0;
    color:#2b3238;
    }
    .nav .current .sub li.sub_show a {
    color:#2b3238;
    cursor:default;
    }
    .nav .select .sub li a {
    font-weight:normal;
    }
    .nav .select :hover .sub li a:hover,
    .nav .current .sub li a:hover {
    visibility:visible;
    color:#73a0d2;
    }
    <!--[if IE]>
    .nav ul {display:inline-block;}
    .nav ul {display:inline;}
    .nav ul li {float:left;}
    .nav {text-align:center;}
    .nav .select a:hover b,
    .nav .select li:hover a b {float:none;}
    <![endif]-->
  7. Jika sudah cari salah satu kode dibawah ini
  8. <div id='header-wrapper'>  
    .............
    </b:section>
        </div>

    Jika Tidak Ketemu Kode Diatas Cari Kode Yang Ini

    <div class='header-outer'>
        ...............................
    </b:section>
        </div>
  9. Jika salah satu kode diatas sudah ketemu Copas kode berikut dan letakan disalah satu kode tersebut
  10. <div class="nav">
    <div class="table">
    <ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
    <ul class="select"><li><a href="#"><b>Sample Menu</b></a>
    <div class="select_sub">
    <ul class="sub">
    <li><a href="#">Sample Menu</a></li>
    <li><a href="#">Sample Menu</a></li>
    <li><a href="#">Sample Menu</a></li>
    <li><a href="#">Sample Menu</a></li>
    <li><a href="#">Sample Menu</a></li>
    </ul>
    </div>
    </li>
    </ul>
    <ul class="select"><li><a href="#"><b>Sample Menu</b></a>
    <div class="select_sub">
    <ul class="sub">
    <li><a href="#">Sample Menu 2</a></li>
    <li><a href="#">Sample Menu 2</a></li>
    <li><a href="#">Sample Menu 2</a></li>
    <li><a href="#">Sample Menu 2</a></li>
    <li><a href="#">Sample Menu 2</a></li>
    </ul>
    </div>
    </li>
    </ul>

    <ul class="select"><li><a href="#"><b>Sample Menu</b></a>
    <div class="select_sub">
    <ul class="sub">
    <li><a href="#">Sample Menu 3</a></li>
    <li><a href="#">Sample Menu 3</a></li>
    <li><a href="#">Sample Menu 3</a></li>
    <li><a href="#">Sample Menu 3</a></li>
    <li><a href="#">Sample Menu 3</a></li>
    </ul>
    </div>
    </li>
    </ul>

    <ul class="select"><li><a href="#"><b>Sample Menu</b></a>
    <div class="select_sub">
    <ul class="sub">
    <li><a href="#">Sample Menu 4</a></li>
    <li><a href="#">Sample Menu 4</a></li>
    <li><a href="#">Sample Menu 4</a></li>
    <li><a href="#">Sample Menu 4</a></li>
    <li><a href="#">Sample Menu 4</a></li>
    </ul>
    </div>
    </li>
    </ul>
    </div>
    </div>
  11. Silahkan menu Navigasi Dropdown diisi sesuai dengan kebutuhan.
  12. Terakhir Klik Simpan Template dan lihat hasilnya
  13. Selesai
Demikian Cara Membuat Navigasi Dropdwon Menu Unik Style Kompas.Selamat mencoba and Thanks !.

20 January 2013

membuat link pop up

membuat link pop up

1. Login ke Blogger
2. Pilih Design -> Page Element
3. Klik Add a Gadget -> HTML/Javascript lalu masukkan kode dibawah ini kedalam kotak

<div style="overflow: auto; width: 350px; height: 100px; padding: 10px; border: 2px solid rgb(238, 238, 238);">
<form onsubmit="window.open('http://udinkepsuk-media.blogspot.com/2011/08/bollywood24.html', 'popupwindow','scrollbars=no, width=500,height=450');return true">
<input value="bollywood24" type="submit" /></form>
<form onsubmit="window.open('http://udinkepsuk-media.blogspot.com/2011/08/sound-musik-model-teasers.html', 'popupwindow','scrollbars=no, width=480,height=550');return true">
<input value="music barat" type="submit" /></form>
<ul>

</ul></div>

ket..
warna hijau silahkan ganti link nya
warna kuning untuk judul nya