Saturday, August 27, 2011

Widget Selamat Idul Fitri 1432 Hijriah
Tidak terasa Idul Fitri 1432 Hijriah sudah tinggal beberapa hari lagi permakblogs mengucapkan Selamat Idul Fitri 1432 H ya.. mohon maaf lahir batin... dan special nich dari oRiD widget yaitu widget selamat Idul fitri... contohnya ada tuh di atas kanan blog ini ... mau tau kodenya nich aku kasih dapetnya juga gratis... :)







<p align="right"><embed src="http://www.widgipedia.com/widgets/orido/wiDget-bedug-Lebaran-6270-8192_134217728.widget?__install_id=1248336094072&__view=expanded" width="400" height="200" flashvars="&col1=d89b09&col2=7cc034&dayAdd=0&cal=true&gig_lt=1248336103578&gig_pt=1248336182359&gig_g=1&gig_n=blogger" swliveconnect="true" quality="best" loop="false" menu="false" wmode="transparent" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"></embed> </p>



cara pasangnya mudah kok cuma pake widget blogspot html/javascript tinggal copas aja kode di atas. Untuk merubah ukuran tinggal ubah width dan height nya. Jangan lupa di simpen ya... oke coy....



Thanks oRiD Widget...



Monday, August 8, 2011

Featured Content Slider jQueryHai.. hai... sesuai permintaan pembaca PermakBlogs yang bertanya cara pemasangan slideshow menggunakan jQuary berikut aku kasih dah caranya. Sebenarnya sudah banyak kode Slideshow jQuery di perlintasan internet, tapi demi kelancaran bersama dan indahnya berbagi aku kasih dah cara pemasangan slideshow jQuery yang pernah ane coba. Lumayan panjang sich jadi simak baik-baik ya cara pemsangan slideshow jQuery ini.



Ikuti langkah dibawah ini ya :

  1. Seperti biasa masuk ke account Blogspot kamu.
  2. Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML. Cari kode ]]></b:skin> jika sudah dapat copy paste kode dibawah ini diatasnya.

    #featured{

    width:400px;

    padding-right:250px;

    position:relative;

    height:250px;

    background:#fff;

    border:5px solid #ccc;

    }
    ini digunakan untuk mengatur ukuran box slideshow untuk disesuaikan dengan ukuran blog kita.



    #featured ul.ui-tabs-nav{

    position:absolute;

    top:0; left:400px;

    list-style:none;

    padding:0; margin:0;

    width:250px;

    }

    #featured ul.ui-tabs-nav li{

    padding:1px 0; padding-left:13px;

    font-size:12px;

    color:#666;

    }

    #featured ul.ui-tabs-nav li span{

    font-size:11px; font-family:Verdana;

    line-height:18px;

    }

    Ini digunakan untuk mengatur tab navigasi sebelah kanan yang ada gambar kecilnye. :)





    #featured .ui-tabs-panel{

    width:400px; height:250px;

    background:#999; position:relative;

    overflow:hidden;

    }

    #featured .ui-tabs-hide{

    display:none;

    }





    #featured li.ui-tabs-nav-item a{/*On Hover Style*/

    display:block;

    height:60px;

    color:#333; background:#fff;

    line-height:20px;

    outline:none;

    }

    #featured li.ui-tabs-nav-item a:hover{

    background:#f2f2f2;

    }

    #featured li.ui-tabs-selected{ /*Selected tab style*/

    background:url('images/selected-item.gif') top left no-repeat;

    }

    #featured ul.ui-tabs-nav li.ui-tabs-selected a{

    background:#ccc;

    }

    Ini untuk mengatur background dari tab sebelah kanan.





    #featured ul.ui-tabs-nav li img{

    float:left; margin:2px 5px;

    background:#fff;

    padding:2px;

    border:1px solid #eee;

    }





    #featured .ui-tabs-panel .info{

    position:absolute;

    top:180px; left:0;

    height:70px; width: 400px;

    background: url('images/transparent-bg.png');

    }

    #featured .info h2{

    font-size:18px; font-family:Georgia, serif;

    color:#fff; padding:5px; margin:0;

    overflow:hidden;

    }

    #featured .info p{

    margin:0 5px;

    font-family:Verdana; font-size:11px;

    line-height:15px; color:#f0f0f0;

    }

    #featured .info a{

    text-decoration:none;

    color:#fff;

    }

    #featured .info a:hover{

    text-decoration:underline;

    }



    trus klik simpan template dulu.

    Kode CSS lengkapnya seperti dibawah ini :



    #featured{

    width:400px;

    padding-right:250px;

    position:relative;

    height:250px;

    background:#fff;

    border:5px solid #ccc;

    }

    #featured ul.ui-tabs-nav{

    position:absolute;

    top:0; left:400px;

    list-style:none;

    padding:0; margin:0;

    width:250px;

    }

    #featured ul.ui-tabs-nav li{

    padding:1px 0; padding-left:13px;

    font-size:12px;

    color:#666;

    }

    #featured ul.ui-tabs-nav li span{

    font-size:11px; font-family:Verdana;

    line-height:18px;

    }

    #featured .ui-tabs-panel{

    width:400px; height:250px;

    background:#999; position:relative;

    overflow:hidden;

    }

    #featured .ui-tabs-hide{

    display:none;

    }

    #featured li.ui-tabs-nav-item a{/*On Hover Style*/

    display:block;

    height:60px;

    color:#333; background:#fff;

    line-height:20px;

    outline:none;

    }

    #featured li.ui-tabs-nav-item a:hover{

    background:#f2f2f2;

    }

    #featured li.ui-tabs-selected{ /*Selected tab style*/

    background:url('images/selected-item.gif') top left no-repeat;

    }

    #featured ul.ui-tabs-nav li.ui-tabs-selected a{

    background:#ccc;

    }

    #featured ul.ui-tabs-nav li img{

    float:left; margin:2px 5px;

    background:#fff;

    padding:2px;

    border:1px solid #eee;

    }

    #featured .ui-tabs-panel .info{

    position:absolute;

    top:180px; left:0;

    height:70px; width: 400px;

    background: url('images/transparent-bg.png');

    }

    #featured .info h2{

    font-size:18px; font-family:Georgia, serif;

    color:#fff; padding:5px; margin:0;

    overflow:hidden;

    }

    #featured .info p{

    margin:0 5px;

    font-family:Verdana; font-size:11px;

    line-height:15px; color:#f0f0f0;

    }

    #featured .info a{

    text-decoration:none;

    color:#fff;

    }

    #featured .info a:hover{

    text-decoration:underline;

    }

  3. Kemudian tambahkan kode jQuerynya di bawah ini sebelum </head>



    <code><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'>

    </code>

    <script type='text/javascript'>

    $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

    </script>


    Kemudian klik Simpan Template
  4. Kemudian langkah terakhir masukan kode html dibawah ini sesuai posisi yang diinginkan misal diatas posting dengan menambah widget HTML/Javascript.



    <div id="featured" >

    <ul class="ui-tabs-nav">

    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>

    <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>

    <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>

    <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>

    </ul>

    <!-- First Content -->

    <div id="fragment-1" class="ui-tabs-panel" style="">

    <img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image1.jpg" alt="" />

    <div class="info" >

    <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>

    </div>

    </div>

    <!-- Second Content -->

    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">

    <img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image2.jpg" alt="" />

    <div class="info" >

    <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>

    <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>

    </div>

    </div>

    <!-- Third Content -->

    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">

    <img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image3.jpg" alt="" />

    <div class="info" >

    <h2><a href="#" >35 Amazing Logo Designs</a></h2>

    <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>

    </div>

    </div>

    <!-- Fourth Content -->

    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">

    <img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image4.jpg" alt="" />

    <div class="info" >

    <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>

    <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>

    </div>

    </div>

    </div>



    jangan lupa disimpan ya..


nahh proses menambahkan slideshow sudah selesai coba cek blogspot kamu... EXPECTO PATRONUM (sindrom harry potter)... :)

bagaimana berhasil khan... mudah ya... kalau masih belum bisa jangan malu bertanya ya... :)

ok dechhh.. sekian dulu cerita dari kakak sampai ketemu lagi di cerita berikutnya... salam PermakBlogs ya ...

Sunday, July 24, 2011


Membuat Link Berkedip Di Blog
Aregnoz Blog - Berikut ini adalah contoh atau cara membuat setiap link di blog anda jika mendapat area dari cursor maka akan menjadi berkedip berganti warna pelangi.

Silahkan anda ikuti langka-langkahnya yang sangat simple dibawah ini :
1. Silahkan Anda log in di blog anda
2. Masuk tab rancangan (untuk template lama) kemudian pilih edit html
3. Masuk Tempalte (untuk template baru) kemudian pilih edit html
4. Kemudian cari <body> agar lebih cpat gunakan ctrl+f dan tulis <body>
5. Letakkan kode dibawah ini diatas kode <body>
<script src='http://hbhost.googlecode.com/files/rainbow-link.js'/>
Sampai disini sudah selesai, dan jangan lupa save template anda.

Monday, July 11, 2011

Menghilangkan Gambar Obeng dan Tang di Blog
Menghilangkan Gambar Obeng dan Tang di Blog
Menghilangkan Gambar Obeng dan Tang di Blog Aregnoz Tutorial - Ketika kita baru membuat blog atau baru mengganti template blog biasanya kita jumpai gambar obeng dan tang yang bersilang.

Jika anda ingin menghapusnya / menghilangkannya ikuti langkah-langkahnya sebagai berikut.









Silahkan Ikuti langkah Menghilangkan Gambar Obeng dan Tang di Blog :

1. Masuk atau login ke blogger kamu
2. Masuk ke tata letak --> Edit html --> centang kolom expand widget template
3. carai kode ini
]]></b:skin>

4. copy n paste kode dibawah ini tepat diatas kode nomer 3 tersebut

.quickedit{
display:none;
}
5. Save template anda.

Semoga bermanfaat bagi anda.


Sunday, July 10, 2011

Hai hai.. apa kabar semua ada berita bagus nich buat pecinta Blogspot.com sekarang blogspot ngeluarin widget baru. Apa tuch??? nah penasaran kan... jadi sekarang kalau mau pasang atau merubah favicon di blog tidak usah menggunakan kode macem2, cukup pake widget ini aja cepat, mudah dan memuaskan hehehe....

Mau tau caranya ?? baca terus artikel ini .

Begini caranya :
  1. Masuk ke Account Blogspot kamu.
  2. Lihat pada elemen halaman kiri atas sebelum navbar seperti gambar dibawah ini. lalu klik edit.
  3. akan muncul form Konfigurasikan Icon Favorit klik Browse untuk memilih favicon yang kamu punya. Setelah selesai klik Simpan. catatan : gambar favicon tidak perlu berupa file .ico. JPG pun bisa asal tidak terlalu besar. :)
  4. Favicon kamu sudah berubah seperti dibawah ini.


BagaiMana mudah kan?? ok selamat merubah favicon kamu ya...
Membuat Zoom Image dengan CSS
Membuat Zoom Image Di Blog - Zoom Image dengan CSS ini Untuk memperbagus tampilan di blog anda, rasanya tidak ada salahnya jika anda mencoba triks yang satu ini, yaitu membuat zoom image. Jadi setiap postingan yang ada gambarnya maka ketika ada cursor mendekat maka image tersebut akan memperbesar sendiri.



Ikuti langkah-langkahnya debawah ini :
1. Masuk blogger
2. Pilih rancangan dan masuk pada edit html
3. Cari ]]</b:skin> dengan menggunakan ctrl+f
4. Copykan script dibawah ini tepat diatasnya ]]<b/:skin>
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }
5. Selesai, silahkan save template anda.

Contohnya :

Membuat Zoom Image dengan CSS
Zoom Image
Semoga bermanfaat bagi anda.

Tuesday, April 5, 2011

Halo wahhh lama sudah menanti ya lanjutan Cara Membuat template sederhana Blogspot Part 10, maklumlagi banyak job jadi ke pending. Langsung deh dilanjut untuk menampilan postingan pada template blogspot perlu menambahkan kode khusus.. kode apaan ya? Lanjutin aja bacanya nanti juga tau... hehe.. Untuk yang ketinggalan artikel baca dulu artikel di bawah ini yak :

Cara Membuat Template Sederhana Blogspot :
Part 1, Part 2 , Part3, Part4, Part 5, Part 6, Part 7, Part 8, Part 9

Yuk kita mulai.... Pada artikel sebelumnya cara membuat template Sederhana Blogspot Part 9 sudah kita buat sidebar dan sekarang kita akan menambah kode untuk menampilan posting di template Blogspot, ikuti langkah-langkah di bawah ini :
  1. Masuk Ke Account Blogspot kamu.
  2. Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML. jangan lupa beri tanda cek pada Expand Template Widget.Cari kode di bawah ini :
    <div id='content'>...... </div>

    Lalu tambahkan didalamnya Kode berikut :
    Sidebar-kiri :

    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
    </b:widget>
    </b:section>

    Jangan lupa hapus tulisan judul-postingan, isi-posting, metatag, kolom-komentar, form-komentar ya..
  3. Sekarang kita atur posisinya dengan kode CSS, Cari kode dibawah ini :
    #content {
    Overflow:hidden;
    margin:2px;
    padding:3px;
    width:492px;
    border:1px solid #000;
    background:#eee;
    float:left;text-align: left;
    }

    Tambahkan di bawah kode tersebut kode CSS di bawah ini :
    /* Posts */
    h2.date-header { margin:0;padding:0;display:none; }
    .post {margin: 0px 0px 14px 5px; padding: 2px 7px; background: #fff; border: 1px solid #ddd; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; overflow:hidden; }
    .post h3 {color: #444; font-size: 140%; font-weight:100; padding: 6px 0 5px 5px;
    margin: 3px 5px 3px 5px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    }

    .post h3 a, .post h3 a:visited, .post h3 strong {
    color: #333;
    text-decoration:none;
    font-weight:100;
    }

    .post h3 strong, .post h3 a:hover {
    text-decoration:none;
    color: #333;
    }
    .post-body {
    margin:0 0 .75em;
    line-height:1.6em;
    padding:0 15px;
    }
    .post-body blockquote {
    line-height:1.3em;
    }
    .post-footer {
    font-size:90%;
    padding: 1px 8px 1px 5px;
    margin: 0 5px;
    border-top: 1px solid #ddd;
    }
    .comment-link {
    margin-$startSide:.6em;
    }
    .post img, table.tr-caption-container {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding: 5px;
    margin: 5px 10px;
    /* optional rounded corners for browsers that support it */
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    }
    .tr-caption-container img {
    border: none;
    padding: 0;
    }
    .post blockquote {
    padding: 10px 35px 5px 35px;
    margin: 3px 30px;
    background: #F5F4F0 url("http://2.bp.blogspot.com/_xpQK9GsnDPs/TO2X8pm8LnI/AAAAAAAAApc/bNEtp-A_v1I/s000/quotes.gif") top left no-repeat;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

    }
    .post blockquote p {
    margin:.75em 0;
    }

    .authordata{
    float:left;
    font-size:90%;
    padding: 1px 0px;
    margin: 0;
    }

    .authordata p{
    line-height: 14px;
    padding: 0;
    margin: 0 0 2px 0;
    }

    .commentsdata{
    float:right;
    font-size:90%;
    padding: 0 4px 0 0;
    }
    .commentsdata img{
    padding: 0;
    border:none;
    }

    /* Comments
    ----------------------------------------------- */
    #comments h4 {
    font-size: 105%;
    font-family: verdana, arial, helvetica, sans-serif;
    margin: 5px 0;
    }

    #comments, #comments ol, #comments ol li, #comments ol li.alt {
    font-size: 100%;
    }
    #comments {
    margin:0px auto;
    padding: 10px 0px 10px 10px ;
    width:670px;
    }

    #comment-list {
    padding:0;
    margin:0;
    border:0;
    list-style-type: none;
    margin: 0 0 20px;
    font-size: 1.75em;
    }
    .commentlistdiv {
    padding:0;
    margin:0;
    border:0;
    list-style-type: none;
    margin-bottom: 20px;
    font-size: 1.75em;
    }
    .commentlistdiv h1 {
    font-size: 1.3em;
    color: #366799;
    line-height: 1.5em;}

    .commentlist li {
    padding:0;
    margin:0;
    border:0;
    border:1px solid #d3d3d3;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    padding: 10px;
    margin-top: 10px;
    background: #F7F6F3;
    }

    ul.commentlist {list-style-type: none;margin:0 auto;padding:0;width: 100%;}
    .commentlist li.alt {
    padding:0;
    margin:0;
    border:0;
    border: 1px solid #eee;
    padding: 0px;
    margin-top: 0px;
    }
    .pane_l {
    float: left;
    clear: left;
    width: 40px;
    text-align: center;
    color: #444444;
    font-size: 1em;
    overflow: hidden;
    padding:0px;
    }
    * html .pane_l{margin-top:15px; }
    .pane_r {
    float: left;
    clear: right;
    width: 590px;
    overflow: hidden;
    padding:5px 0 0 10px;
    }
    .c_author { width: 590px;
    margin: 0px 0px 0px 0px;
    color: #000;
    font-size: 12px;
    font-weight:bold;
    }

    .c_avatar {display: block;margin: 0px 0px 7px 0px;}
    .avatar-image-container img{height:30px;width:30px; padding: 1px;
    background: #fff url(http://3.bp.blogspot.com/_xpQK9GsnDPs/TO2X8wawA9I/AAAAAAAAApg/VeTCfun6bPk/s000/no_avatar-small.jpg) no-repeat center;
    border: 1px solid #eee;
    }
    .c_date {float:right;
    font-size:90%;
    padding: 0 4px 0 0;
    font-weight:bold;
    }
    .c_approved {color: #aaa;font-size: 0.9em;}
    .comment-form { background:transparent; border:0px solid #FF8A00;
    margin:0 10px 20px 0px; padding:10px 0 0;}
    * html .comment-form { width:87%; }
    .comment-number{
    font-weight: bold;letter-spacing:0em;
    font-style: italic;
    color: #333;
    font-size: 1.167em; float:left;margin-right:5px;
    }

    .owner-Body {color:#f00;font-weight:bold;}
    .deleted-comment {
    font-style:italic; color:gray;
    }
    .deleted-comment {
    font-style:italic;
    color:gray;
    }
    .deletkomen {
    background:#ddd;
    border:1px solid #aaa;
    padding:2px 10px;
    text-align:center;
    width:65px;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color:#3D72C0;
    font-weight:bold;
    }
    .deletkomen:hover {
    background:#f3f3f3;
    border:1px solid #aaa;
    }



    #blog-pager-newer-link {
    float: $startSide;
    }

    #blog-pager-older-link {
    float: $endSide;
    }

    #blog-pager {
    text-align: center;
    }

    .feed-links {
    clear: both;
    line-height: 2.5em;
    }
    /*-- Finish Post --*/
  4. Setelah selesai klik simpan template.
  5. Langkah selanjutnya uncheck Expand Template Widget, lalu klik Elemen laman maka akan muncul seperti gambar dibawah ini, nah berarti tandanya element/bagian posting sudah berhasil kita pasang.
  6. Ok posting sudah berhasil... bagaimana mudah bukan?

ok memasang memasang posting sudah, untuk artikel selanjutnya mengatur bagian footer (Part 11) jangan sampai ketingglan ya... pantengin terus.... permak blogs..

Friday, March 4, 2011

Cara Membuat template sederhana Blogspot Part 9 ini membahas pembuatan SIDEBAR. Untuk menampilan sidebar pada template blogspot yang kita buat, perlu menambahkan kode khusus.. kode apa itu? Lanjutin aja bacanya nanti juga tau... hehe.. Untuk yang ketinggalan artikel baca dulu artikel di bawah ini yak :

Cara Membuat Template Sederhana Blogspot :
Part 1, Part 2 , Part3, Part4, Part 5, Part 6, Part 7, Part 8

Ayo kita kemon.... Pada artikel sebelumnya cara membuat template Sederhana Blogspot Part 8 sudah kita buat top menu dan sekarang kita akan menambah kode untuk sidebar di template Blogspot, ikuti langkah-langkah di bawah ini :

  1. Masuk Ke Account Blogspot kamu.
  2. Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML. jangan lupa beri tanda cek pada Expand Template Widget.Cari kode di bawah ini :
    <div id='sidebar'>...... </div>

    Lalu tambahkan didalamnya Kode berikut :
    Sidebar-kiri :
    <b:section class='sidebar' id='sidebar1' preferred='yes'>
    </b:section>

    Sidebar-kanan :
    <b:section class='sidebar' id='sidebar2' preferred='yes'>
    </b:section>

    Dan lengkapnya seperti di bawah ini :
    <div id='sidebar'>
    <b:section class='sidebar' id='sidebar1' preferred='yes'>
    </b:section>
    </div>
    <div id='content'>
    judul-postingan
    isi-posting
    metatag
    kolom-komentar
    form-komentar
    </div>
    <div id='sidebar'>
    <b:section class='sidebar' id='sidebar2' preferred='yes'>
    </b:section>
    <br class='clear'/>
    </div>

    Jangan lupa hapus tulisan sidebar-kiri dan sidebar-kanan ya..

    Keterangan :
    Ini digunakan untuk menampilkan widget pada blogspot pada posisi sidebar.
  3. Setelah selesai klik simpan template.
  4. Langkah selanjutnya uncheck Expand Template Widget, lalu klik Elemen laman maka akan muncul seperti gambar dibawah ini di kanan dan dikiri.
    contoh sidebar
    Nah ini menandakan sidebar kanan dan kiri sudah jadi. Tinggal klik tambah gadget pilih dah gadget yang mau kamu tampilin di sidebar... ok coy...
    Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/
Mudah bukan? Ok untuk artikel selanjutnya kita akan memasukan kode agar posting asrtikel dapat tampil di template blogspot yang kita buat... jadi terus kunjungi blog ini ya biar tuntas bikinnya.. jangan lupa komentarnya... thanku everybody.... seee uuu..

Wednesday, March 2, 2011

Cara Membuat template sederhana Blogspot Part 8 ini membahas pembuatan TOP MENU. Sebenernya membuat top menu ini bisa kamu baca pada artikel Cara Membuat Top Menu di Blogger, tapi karena ini sederhana jadi aku tulis lagi deh top menu yang paling sederhana ok? Sekali lagi jangan lupa bagi yang ketinggalan artikel baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot :
Part 1, Part 2 , Part3, Part4, Part 5, Part 6, Part 7

Ayo kita kemon.... Pada artikel sebelumnya cara membuat template Sederhana Blogspot Part 7 sudah kita masukan kode untuk menampilakan judul dan diskripsi Blog. Dan sekarang kita akan menambah kode untuk top menu di template Blogspot, ikuti langkah-langkah di bawah ini :

  1. Masuk Ke Account Blogspot kamu.
  2. Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML. jangan lupa beri tanda cek pada Expand Template Widget.Cari kode di bawah ini :
    #top-menu {
    ...........
    }

    Lalu tambahkan dibawahnya Kode CSS berikut :
    #top-menu a, #top-menu a:visited {
    color: #000000;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0px 0px 0px 3px;
    font-weight:bold;
    }
    #top-menu a:hover {
    color: #000000;
    text-decoration: underline;
    padding: 0px 0px 0px 3px;
    }
    #topleft {
    width: 500px;
    float: left;
    margin: 5px 0 0 3px;
    padding: 0px;
    }

  3. Langakah selanjutnya cari kode di bawah ini :
    <div id='top-menu'>
    Home |
    About Me |
    Contact Us
    </div>
    Tambahkan kode seperti di bawah ini :
    <div id='top-menu'>
    <div id='topleft'>
    <a href='http://tempfor.blogspot.com/'>Home</a> |
    <a href='http://tempfor.blogspot.com/'>About Me</a> |
    <a href='http://tempfor.blogspot.com/'>Contact Us</a>
    </div>
    </div>

    kemudian ganti tulisan yang berwarna merah dengan link yang kamu kehendaki.
    Misal :
    <a href='http://tempfor.blogspot.com/'>Home</a>
    ganti http://tempfor.blogspot.com dengan alamat blog kamu.
  4. Setelah selesai klik simpan template. Uuntuk melihat hasilnya klik kanan mouse kamu pada tulisan Lihat Blog lalau pilih open new tab (kalau pake mozzila) bimsalabim jadi deh top menunya di bawah ini :
    Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/

    Jika panah mouse berada pada tulisan home di top menu akan keluar garis bawah yang menandakan ada linknya :)


Tambahan : Merapikan bagian Navbar. Kenapa harus dirapikan ? ini sebabnya : kalau kamu lihat navbarnya masih ada jarak dengan browser untuk itu kita buat nempel ke browser aja... caranya ?
Ikuti langkah-langkah di bawah ini :
  1. Masih pada posisi Edit HTML, cari kode CSS si bawah ini :
    body {
    padding:3px;
    background:#fff;
    font-family:Century gothic, Arial,Tahoma,sans-serif;
    color:#126A9B;
    font-size:13px;
    text-align: center;
    margin:2px;
    }

    Ubah padding dari 3px menjadi auto dan margin dari 2px ke auto. Kemudian klik simpan template. Setelah proses selesai silahkan lihat blog ada dannnnn sudah rapi deh... :)

Ok sampai disini dulu ya... terus kunjungi blog ini ya biar tuntas bikinnya.. jangan lupa komentar ya... thanku everybody....

Part 9 - Membuat Sidebar Template Blogspot

Friday, February 25, 2011

Cara Membuat template sederhana Blogspot Part 7Cara Membuat template sederhana Blogspot Part 7 ini mau kasih tau bagaimana nambah kode khusus untuk menampilkan Judul dan Diskripsi pada Header Blog kita. Sekali lagi jangan lupa bagi yang ketinggalan artikel baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot : Part 1, Part 2 , Part3, Part4, Part 5, Part 6

Yuks kita mulai... Pada artikel sebelumnya cara membuat template Sederhana Blogspot Part 6 sudah kita pasang template yang kita buat ke Blog kamu. Dan sekarang kita akan menambah kode-kode yang di gunakan untuk template Blogspot, kita tidak lagi menggunakan HTML Kit tapi langsung edit di blog kita. Ikuti langkah-langkah di bawah ini :
  1. Masuk Ke Account Blogspot kamu.
  2. Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML jangan lupa beri tanda cek pada Expand Template Widget. Cari kode CSS di bawah ini :
    #header {
    ...........
    }

    Lalu Tambahkan di bawahnya kode html di bawah ini :

    #header h1 {
    margin:5px 5px 0 0;
    padding:15px 20px 5px 20px;
    line-height:1.2em;
    text-transform:uppercase;
    letter-spacing:.2em;
    font-family: Georgia, Serif;
    font-size:24px;
    font-weight:bold;
    }
    #header .description {
    color: #f3f2e8;
    margin-left: 0px;
    padding-left: 20px;
    font-family:Georgia, Times New Roman;
    font-size:14px;
    font-style:normal;
    font-weight:bold;
    }
  3. langkah berikutnya cari kode di bawah ini :
    <div id='header'>
    header
    </div>

    ganti tulisan heade yang di apit <div id='header'>... </div> ganti dengan kode dibawah ini :
    <b:section class='header' id='gadgetheader' preferred='yes'/>

    Kemudian klik tombol Simpan Template

  4. Selanjutnya uncheck pada Expand Template Widget
  5. Klik pada tab Element halaman, dan akan terlihat struktur dari template blog kamu. Pada posisi header terdapat tulisan Tambah Gadget,
    klik disana maka akan muncul jendela baru untuk memilih gadget pilih header halaman klik tanda (+)
    Cara Membuat template sederhana Blogspot Part 7
    Lalu isi judul blog maupun diskripsinya lalu klik simpan.
    untuk melihat hasilnya klik kanan mouse kamu pada tulisan Lihat Blog lalau pilih open new tab (kalau pake mozzila) taraa akan muncul seperti gambar di bawah ini :
    Cara Membuat template sederhana Blogspot Part 7Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/

    di sana terdapat navbar, judul blog dan diskripsi blog... bagaimana serukan... ? makanya disimak terus... jangan lupa coment ya... tanya juga boleh...

ok sekian dulu ya artikel cara membuat template sederhana blogspot Part 7 tunggu tanggal mainya Part 8.. cauuuu

Part 8 - Membuat Top Menu Template Blogspot

Sunday, February 20, 2011

Part 6 kita akan merubah kode HTML template menjadi XML agar dapat di pasang pada blogspot, OK sudah siap lanjut? Jangan lupa bagi yang ketinggalan artikel baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot : Part 1, Part 2 , Part3, Part4, Part 5

Let’s Go... Setelah semua urusan kode html dan kode css selesai kita buat, ini saatnya menambahkan kode khusus untuk Blogspot supaya dapat kita pasang template yang kita buat di Blogspot. OK.. ikuti langkah-langkah di bawah ini :

  1. Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
  2. Muncul halaman yang kita buat kemarin. Cari kode :

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>

    Yang ada di bagian paling atas, lalu ganti kode tersebut dengan kode di bawah ini :

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>


  3. Kemudian dibawah kode <head>tambahan kode di bawah ini :

    <b:include data='blog' name='all-head-content'/>

    Lalu pada kode :

    <title>Desain Template Blog</title>

    Tulisan Template Blog Sederhana ganti dengan kode dibawah ini :

    <data:blog.pageTitle/>

    Dan kode :

    <style type="text/css">
    diganti dengan kode
    <b:skin><![CDATA[

    Kode Lengkapnya seperti gambar dibawah ini :
    cara membuat template blogspot
    Kemudian cari kode
    </style>
    untuk mempermudah pencarian silahkan tekan tombol ctrl+f dan copas kode tadi. Kalau sudah ketemu ganti kode tersebut dengan kode
    ]]></b:skin>


  4. Nah kalau proses ini sudah selesai coba klik file> save as beri nama template diikuti .xml lalau klik save. Nah jadi sudah file template kita dan siap di upload di blog kamu. Untuk cara upload bisa baca artikel Cara Ganti Template Blogspot. setelah di upload klik kanan pada lihat blog lalu klik “Open Link in new Tab” bagaimana sudah muncul template hasil karya kamu sendiri? Untuk sementara seperti itu ya dan tampilannya seperti gambar di bawah ini :
    cara membuat template blogspot
    Kalau ada yang menemukan sidebar-kanannya masih di bawah sidebar-kiri masuk ke Edit HTML lalu cari #content. Untuk mempermudah silahkan tekan F3 pada keyboard untuk mencarinya. Kalau sudah ketemu ubah width nya menjadi 492px, lalu klik tombol Simpan Template.
    Contoh jadinya silahkan kunjungi : http://tempfor.blogspot.com/

Lihat kembali blog kamu bim salabimmmm... jadi seperti gambar diatas kan?... ok berhasil... berhasil... berhasil... ada yang kurang paham? komen aja ya atau contact us nanti kami jawabnya...
Untuk berikutnya Cara Membuat Template Sederhana Blogspot akan menambahkan kode khusus Blogspot untuk menampilkan judul Blog dan Diskripsi. Baiklah kawan Permak Blogs tunggu tutorial blog selanjutnya ya... cauuuuuuu....

Part7 - Cara Menambah Kode Khusus Header dan Diskripsi Template Blogspot

Monday, February 14, 2011

Tuorial template Part 5 mengatur bagian Footer Blogspot, lanjutkan nyimaknya ya.. jangan lupa bagi yang ketinggalan baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot : Part 1, Part 2 , Part3, Part4

Lansung kita mulai aja ya? Setelah kita mengatur sidebar dan kontent, kali ini kita akan bagian akhir dari suatu blog yaitu footer. Bagian footer biasanya diisi dengan copyright atau pembuat design. OK sudah siap? Jangan lupa sediakan minum dan cemilan dulu ya biar semangat heheheh.. kalau sudah ikuti langkah-langkah di bawah ini :

  1. Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
  2. Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan footer lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIVDIV_footer
    Setelah muncul boks TagsWizard ketik footer pada kotak isian di samping “id” kemudaian klik ok.
    DIv_Sidebar1
    Ganti tulisan footer dengan tulisan " (&#169;) 2011 Design by nama kamu ". Jangan lupa hapus kurung buka dan tutup yang menyertai &amp....copyright.png
  3. Langkah selanjutnya kita buat code CSS untuk bagian footer. scroll layar ke atas sampai terlihat #content {..... } copy paste code CSS dibawah ini untuk footer.
    #footer {
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    text-align: center;
    color: $footerTextColor;
    font: $footerTextFont;
    line-height: 1.2em;
    }

    Sudah dan haslinya seperti dibahah ini.. betul?CSS_footer.png
  4. OK sudah selesai pengaturan sidebar dan content, jangan lupa di simpan ya... crtl+s trus kalau mau lihat klik tab preview dan hasilnya seperti dibawah ini
Tambahan :

Untuk menghilangkan efek float silahkan tambahkan kode ini

<br class="clear"/>

sebelum </div> sidebar dan <div id="footer"> seperti dibawah ini
Dan juga tambahkan kode CSS untuk clear di bawah ini di bawah kode CSS #footer{....} :
.clear {
clear: both;
text-align: center;
}
kemudian tekan tombol crtl+s.

Nah selesai sudah pembuatan template tahap awal, untuk artikel berikutnya kita akan memasukan kode khusus blogspot ke template agar dapat dipasang di blog kamu. lho kok tampilannya cuma begitu kalau mau nambah gambar, background dll bagaimana? Terus simak aja ya biar lebih jelas... kalau ada yang masih bingung comment aja ya... ok ciau

Part 6 - Merubah kode HTML menjadi XML

Saturday, February 12, 2011

Yuhuuuu Part 4 mengatur bagian Sidebar dan Content Blogspot sudah hadir... silahkan di simak ya.. jangan lupa bagi yang ketinggalan artikel baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot : Part 1, Part 2 , Part3

OK kita mulai setelah kita bermain di header dan top Menu, kaliini kita akan bermain air di sidebar dan content. Sudah siap? Ambil minum dan cemilan dulu ya biar semangat heheheh.. kalau sudah ikuti langkah-langkah di bawah ini :
  1. Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
  2. Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan ruang-sidebarkiri lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIV
  3. Setelah muncul boks TagsWizard ketik sidebar pada kotak isian di samping “id” kemudaian klik ok.Pindah </div> ke bawah tulisan sidebar-kiri .
  4. Lakukan langkah-langkah pada poin ke 2 untuk bagian sidebar–kanan dan kontent. Untuk id sidebar kanan tulis sidebar dan id kontent isi dengan content. Hapus tulisan ruang-sidebarkiri, kontent, dan ruang-sidebarkanan . dan hasilnya seperti di bawah ini :
  5. Langkah selanjutnya kita buat code CSS masing masing bagian . scroll layar ke atas sampai terlihat #top-menu {..... } copy paste code CSS dibawah ini untuk sidebar.
    #sidebar {
    margin:2px;
    padding:3px;
    width:200px;
    border:1px solid #000;background:#abc;
    float:left;
    Overflow:hidden;
    }
    Dan juga copy paste kode CSS di bawah ini untuk content.
    #content {
    Overflow:hidden;
    margin:2px;
    padding:3px;
    width:500px;
    border:1px solid #000;
    background:#eee;
    float:left;text-align: left;
    }
    Sudah dan haslinya seperti dibahah ini.. betul?

  6. OK sudah selesai pengaturan sidebar dan content, jangan lupa di simpan ya... crtl+s trus kalau mau lihat klik tab preview dan hasilnya seperti dibawah ini

OK sekian dulu ya untuk pengaturan sidebar dan content, untuk artikel berikutnya kita akan mengatur bagian footer(Part 5). Terus simak ya biar tuntas... kalau ada yang masih bingung comenta aja ya... ok ciau

Wednesday, February 9, 2011

Mengatur Header dan Top Menu (Part 3)Sudah Part 3 ya...hmmm ok kita akan melanjutkan dengan menata bagian header dan top menu, bagi yang ketinggalan kereta baca dulu artikel di bawah ini :

Cara Membuat Template Sederhana Blogspot :
Part 1,
Part 2

Sudah ? Mari kita mulai bermain di header dan top Menu. Di dalam header akan kita letakan Judul Blog dan Diskripsi. Dan top menu berisi menu-menu untuk memudahkan pengunjung blog menemukan artikel yang mereka cari. Ok langsung ikuti langkah-langkah di bawah ini :
  1. Buka Software HTML Kit , klik di Open from recent files this : dan pilih file yang sudah kita buat diawal kemarin(desain template blogspot )trus klik ok.
  2. Nah sekarang muncul halaman yang kita buat kemarin. Blok tulisan kotakblog lalu klik “HTML TagsWizard” pada toolbar atas, pilih DIV
    Setelah muncul boks TagsWizard ketik kotakblog pada kotak isian di samping “id” kemudaian klik ok. Makan akan muncul kode <div id="kotakblog">kotakblog</div>,pindah </div> ke posisi dibawah footer dan hapus tulisan kotakblog yang berwarna hitam.
  3. Setelah itu blok tulisan header, lalu ulangi langkah sebelumnya dengan mengklik “HTML TagsWizard” pada toolbar atas, pilih DIV. Dan pada kotak isian disamping id tulis header lalu klik ok.
    Maka akan muncul kode header pindah ke bawah diskripsi blog lalu hapus tulisan header yang diluar <> tara... jadilah seperti dibawah ini :
  4. Lakukan hal yang sama dengan tulisan top-menu, blog tulisan tersebut klik “HTML TagsWizard” , tulis top-menu di kotak isian disamping id klik ok. Akan muncul tags <div id="top-menu">top-menu</div> lalu hapus tulisan top-menu dan pindah </div> kebawah Contact Us. Hasilnya seperti dibawah ini :
  5. Nah sudah selesai membuat tag header dan top menu, sekarang saatnya mengatur letak masing – masing content dengan CSS.
  6. Scroll lembar halaman sampai ketemu <style type="text/css"><!-- // --> </style> nah disini kita tulis CSS nya. Input_Style_CSSb
  7. Langkah pertama copy paste kode dibawah ini diantara <!-- // --> :
    body {
    padding:3px;
    background:#fff;
    font-family:Century gothic, Arial,Tahoma,sans-serif;
    color:#126A9B;
    font-size:13px;
    text-align: center;
    margin:2px; }
    #kotakblog {
    margin:2px;
    padding:3px;
    width:930px;
    border:1px solid #000;
    background:#0ff;
    margin:0 auto;
    }
    Akan jadi seperti di bawah ini :Kemudian copy paste kode dibawah ini di bawahnya :
    #header {
    margin:2px;
    padding:3px;
    width:920px;
    height:100px;
    border:1px solid #000;
    background:#0f0;text-align: left;
    }
    #top-menu {
    margin:2px;
    padding:3px;
    width:920px;
    height:30px;
    border:1px solid #000;
    background:#ccc;text-align: left;
    }
    Akan jadi seperti di bawah ini :cara mengatur CSS top menu
  8. Save dengan menekan ctrl+s, nah selesai sudah tahap 3 mengaturan header dan top menu. Bila klik preview seharusnya hasilnya seperti dibawah ini :

Sekarang kita sudah membuat struktur ruangan untuk header dan top menu.Bagaimana mudah bukan? ok sampai disini dulu ya... :) di artikel berikutnya saya akan membagi ilmu lanjutan Bagaimana Mengatur bagian Sidebar dan Kontent.

Sunday, February 6, 2011

Template_BlogspotHalo ketemu lagi, apa kabarnya? Artikel kali ini melanjutkan artikel cara membuat template sederhana blogspot part 1, sudah pada baca belum ? yang belum baca dulu ya :

Cara Membuat Template Sederhana Blogspot (Part 1 )

Kalau yang sudah bisa langsung nich ke langkah selanjutnya, yaitu penulisan kode HTML dan Kode CSS. Untuk Part 2 ini kita akan membuat kode HTML standart, penulisan bagian-bagian yang akan di tampilkan pada template. Oh ya sudah download HTML Kit belum? Kalau belum nich download di sini Download HTML Kit , jangan lupa di instal ya. Kalau sudah mari kita memulai menulis kode HTML.

LANGKAH PERTAMA
  1. Buka Software HTML Kit , klik di Create a new file lalu klik ok
  2. Nah sekarang muncul halaman baru dengan beberapa kode HTML, ini kode standart yang ada di web . Ganti tulisan yang diapit <title>....</title> dengan judul blog yang kamu suka.Open_new_HTMLKit
  3. Setelah tag ...</title> klik enter, lalu tambahkan style. Caranya klik Action > Tools > HTML Tags Wizard > STYLE dan klik ok.Input_Style_CSSMaka pada halaman akan muncul tulisan <style type=”text/css”>....</style> , nah disinilah nanti kita akan meletakan kode CSS untuk mengatur letak komponen dari template.Input_Style_CSSb
  4. Langkah selanjutnya, pindah crusor ke antara <body>.... </body>. Di posisi ini digunakan untuk menempatkan isi dari bagian-bagian template blog. Sekarang siapkan struktur yang sudah di buat di kertas pada artikel Cara Membuat Template Sederhana Blogspot (Part 1 ) dan tulis seperti gambar di bawah ini :struktur-html Keterangan :
    Kotakblog – kotak dimana kita meletakan semua komponen yang akan kita tampilkan di template blog seperti header, sidebar, kontent dan footer.
    Header - Tempat diletakannya judul blog dan diskripsi
    Top menu - Tempat diletakannya menu-menu yang membantu pengunjung menemukan yang mereka cari dalam blog kamu
    Kotak-content - kotak dimana kita meletakan sidebar kiri, konten (postingan), dan sidebar kanan.
    Ruang-sidebarkiri - ruang dimana kita meletakan sidebar kiri
    Kontent – ruang dimana kita meletakan judul artikel, isi artikel, metatag komentar maupun form komentar
    Ruang-sidebarkanan - ruang dimana kita meletakan sidebar kanan
    Footer – biasanya sich digunakan untuk meletakan tahun pembuatan blog dan identitas pembuat.
  5. Sementara di simpan dulu ya, tekan ctrl+s dan beri nama desain template blogspot.
OK sudah mulai jelas ya ? kalau belum kontak kami aja atau tinggalkan komentar :). Untuk sementara segitu dulu ya karena sudah mulai ngatuk, mau tidur dulu... untuk part 3 kita akan membahas penulisan kode HTML dan CSS untuk bagian Header maupun Top Menu. Jadi jangan lupa ya mampir lagi di mari ... coming soon Mengatur Header dan Top Menu (Part 3 )