Tampilkan postingan dengan label Tip Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tip Blogger. Tampilkan semua postingan

Cara Membuat Menu Dropdown Responsif di HP atau Laptop

Kali ini saya akan memposting Menu Drop Dawn Responsif baik di HP maupun di laptop sehingga blog kita kelihatan menarik dan profesional .


 
Untuk mengaturnya kembali atau membuat menu sendiri diperlukan beberapa kode CSS dan langkah-langkah dibawah ini :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode ]]></b:skin>  (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  7. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>

    /* Responsive Drop Down Menu
    --------------------------------- */
    body {
    margin: 0px;
    }

    #menu{
    background: #222222; repeat-x;
    color: #FFF;
    height: 40px;
    border-bottom: 2px solid #DDD;
    box-shadow: 1px 2px 9px #B1B1B1;
    border-top: 2px solid #DDD;
    }

    #menu ul,#menu li{
    margin:0 auto;
    padding:0 0;
    list-style:none;
    }

    #menu ul{
    height:45px;
    width:1024px;
    }

    #menu li{
    border-right:1px solid #FFF;
    float:left;
    display:inline;
    position:relative;
    font:bold 0.9em Arial;
    text-transform: uppercase;
    }

    #menu a{display: block;
    line-height: 40px;
    padding: 0 14px;
    text-decoration: none;
    color: #FF9900;
    }

    #menu li a:hover{
    color: #fff;
    background: #696969;
    }

    #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
    #menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
    #menu label span{font-size:16px;position:absolute;left:35px}
    #menu ul.menus{
    height: auto;
    overflow: hidden;
    width: 170px;
    background: #696969;
    position: absolute;
    z-index: 99;
    display: none;
    }

    #menu ul.menus li{
    display: block;
    width: 100%;
    font:normal 0.9em Arial;
    text-transform: none;
    border-bottom: 1px solid #7B7B7B;
    border-top: 1px solid #595959;
    }

    #menu ul.menus a{
    color: #FFF;
    line-height: 35px;
    }

    #menu li:hover ul.menus{display:block}
    #menu ul.menus a:hover{
    background: #393939;
    color: #FFF;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;

    }
    @media screen and (max-width: 800px){
    #menu{position:relative }
    #menu ul{background:#111; width:100%; position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
    #menu ul.menus{width:90%; float:left; position:static;padding-left:20px}
    #menu li{display:block;float:left;width:98%; font:normal 0.8em Arial;}
    #menu input,#menu label{position:absolute;top:0;left:0;display:block}
    #menu input{z-index:4}
    #menu input:checked + label{color:white}
    #menu input:checked ~ ul{display:block
    }



    Kemudian cari kode
    1. <header> : untuk menu di atas header blog
    2. </header>: untuk menu di bawah header blog
    3. Copy dan pastekan kode dibawah ini dan letakkan diatas kode <header> dan atau </header> untuk menu dibawah header

    <nav id='menu'>
    <input type='checkbox'/>
    <label>&#8801;<span style='color: #ff9900; width:150px; '>NAMA BLOG</span></label>
    <ul>
    <li><a href='https:// nama-alamat.blogspot.com /'>Home</a></li>
    <li><a href='#'>About<font size='1'/></a>
    <ul class='menus'>
    <li><a href='https:// nama-alamat.blogspot.com' target='output'>Facebook</a></li>
    <li><a href='https:// nama-alamat.blogspot.com' target='output'>Twitter</a></li>
    </ul>
    </li><li><a href='#'>Menu 1<font size='1'/></a>
    <ul class='menus'>
    <li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 1</a></li>
    <li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 2</a></li>
    <li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 3</a></li>
    </ul>
    </li><li><a href='#'>Menu 2<font size='1'/></a>
    <ul class='menus'>
    <li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 1</a></li>
    <li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 2</a></li>
    <li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Menu 3<font size='1'/></a>
    <ul class='menus'>
    <li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 1</a></li>
    <li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 2</a></li>
    <li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 3</a></li>
    <li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 4</a></li>
    </ul>
    </li> </ul>
    </nav>


    Keterangan
    1. Kode berwarna biru adalah warna background dan warna Menu
    2. Kode berwarna merah adalah Url tujuan, ganti dengan Url pada blognya kawan
    Demikianlah postingan saya kali ini tentang cara membuat Menu Dropdown Responsif di HP atau Laptop diatas header atau dibawah header, semoga bermanfaat.

Cara membuat menu Drop Down Versi Mobile, HP dan Versi Komputer

Menu Drop Down ini bisa digunakan dan bisa tampil untuk versi mobile, HP dan versi web (dekstop/pc/laptop).

Contoh gambar


Untuk mengaturnya kembali atau membuat menu sendiri diperlukan beberapa kode CSS dan langkah-langkah dibawah ini :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode ]]></b:skin>  (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  7. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>  

  8. /* Menu Horizontal Dropdown
    ----------------------------------------------- */
    #menuhorizontal{
    background: #222222  repeat-x;
    width:100%;
    margin:0 auto;
    padding:0 auto
    }
    #menuhorizontal1{
    position:static;
    width:100%;
    height:30px;
    margin:0 auto
    }
    .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%}
    #submenubarhorizontal,#submenubarhorizontal ul{
    list-style:none;
    font-family:Arial, serif;
    margin:0;
    padding:0
    }
    #submenubarhorizontal a{
    display:block;
    text-decoration:none;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    color: #ff9900;
    border-right:1px solid #222222;
    padding:12px 10px 8px
    }
    #submenubarhorizontal
    a.trigger{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7sKlZ1ctefYLy7N24ZY8aXKJKHr4F2pXqxrJOod0SW8WAexg0TFETTDT7DyWxjPZXfzb5wiJoFbx_DUA1vrifg-yxLQn3P_xfYDYV0eV-j45_22ulqGgGfgOvbFSggbGKF-xoq2nQCHI/s1600/arrow_white.gif);
    background-repeat:no-repeat;
    background-position:right center;
    padding:12px 24px 8px 10px
    }
    #submenubarhorizontal li{
    float:left;
    position:static;
    width:auto
    }
    #submenubarhorizontal li ul,
    #submenubarhorizontal ul li{
    width:170px
    }
    #submenubarhorizontal ul li a{
    text-align:left;
    color:#fff;
    font-size:12px;
    font-weight:400;
    text-transform:none;
    font-family:Arial;border:none;padding:5px 10px
    }
    #submenubarhorizontal li ul{z-index:100;position:absolute;
    display:none;
    background:#C50A0A;padding-bottom:5px;
    -moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)
    }
    #submenubarhorizontal li:hover ul,
    #submenubarhorizontal li.hvr ul{display:block}
    #submenubarhorizontal li:hover ul a,
    #submenubarhorizontal li.hvr ul a{color:#edfdfd;
    background-color:transparent;
    text-decoration:none
    }
    #submenubarhorizontal li ul li.hr{border-bottom:1px solid #444;
    border-top:1px solid #000;
    display:block;font-size:1px;
    height:0;line-height:0;
    margin:4px 0
    }
    #submenubarhorizontal ul a:hover{
    background-color:#ff9900!important;
    color:#fff!important;text-decoration:none
    }

  9. Kemudian cari kode

    1. <header> : untuk menu di atas header blog
    2. </header>: untuk menu di bawah header blog

  10. Copy dan pastekan kode dibawah ini dan letakkan diatas kode <header> untuk menu diatas header dan atau diatas kode </header> untuk menu dibawah header

  11. <div id='menuhorizontal'>
    <div id='menuhorizontal1'>
    <ul id='submenubarhorizontal'>
    <li><a href=' nama-alamat-blog.html ' target='new'>Home</a></li>
    <li><a class='trigger'>nama menu 1</a>
    <ul><li class='hr'/>
    <li> <a href=' nama-alamat-blog.html ' target= ' new '>sub nama menu 1</a></li>
    <li class='hr'/>
    <li> <a href=' nama-alamat-blog.html ' target= ' new '> sub nama menu 1</a></li>
    <li class='hr'/>
    <li> <a href=' nama-alamat-blog.html ' target=' new '> sub nama menu 1</a></li>
    <li class='hr'/>
    <li><a href=' nama-alamat-blog.html  ' target=' new '> sub nama menu 1</a></li>
    </ul></li>
    <li><a href=' nama-alamat-blog.html  ' target=' new '>nama menu </a></li>
    <li><a href=' nama-alamat-blog.html ' target=' new '>nama menu</a></li>
    <li><a class='trigger'>nama menu 2</a>
    <ul><li class='hr'/>
    <li><a href='nama-alamat-blog.html ' target=' new '>sub nama menu 2</a></li>
    <li class='hr'/>
    <li><a href=' nama-alamat-blog.html ' target='_blank '> sub nama menu 2</a></li>
    <li class='hr'/>
    <li><a href=' nama-alamat-blog.html ' target='  new '> sub nama menu 2</a></li>
    </ul></li>
    <li><a class='trigger'>nama menu 3</a>
    <ul><li class='hr'/>
    <li><a href=' nama-alamat-blog.html ' target=' new  '> sub nama menu 3</a></li>
    <li class='hr'/>
    <li><a href=' nama-alamat-blog.html ' target='new'> sub nama menu 3</a></li>
    </ul></li>
    <li><a class='trigger'>nama menu 4</a>
    <ul><li class='hr'/>
    <li><a href= ' nama-alamat-blog.html '>Sub nama menu 4</a></li>
    <li class='hr'/>
    <li><a href= ' nama-alamat-blog.html '  target='new '> Sub nama menu 4</a></li>
    <li class='hr'/>
    <li><a href='  nama-alamat-blog.html ' target='new '> Sub nama menu 4</a></li>
    <li class='hr'/>
    <li><a href=' nama-alamat-blog.html  ' target='new '> Sub nama menu 4</a></li>
    </ul></li>
    <li><a href=' nama-alamat-blog.html ' target='new '> nama menu </a></li>
    </ul>
    </ul>
    <br class='clearit'/></div>
    <div style='clear:both;'/></div>

    Keterangan

    1. Kode berwarna merah adalah warna background utama
    2. Kode warna coklat adalah warna teks utama
    3. Kode berwarna biru adalah lebar menu
    4. Kode warna hijau adalah garis pembatas menu
    5. Kode warna biru langit adalah warna background sub menu
    6. Nama alamat blog adalah Url tujuan, ganti dengan Url pada blognya kawan

Demikianlah postingan saya kali ini tentang cara membuat menu dropdown diatas header atau dibawah header, semoga bermanfaat.

Cara memasang Breadcrumb diblog

Seperti apa yang saya ketahui dan sudah saya pasang seperti blog saya ini yang dimaksud dengan Breadcrumb Navigation adalah menu navigasi ataupun sebagi petunjuk arah halaman yang sedang dikunjungi yang berisi berupa link horisontal diatas blog yang sudah diatur sedemikian rupa sesuai dengan label yang dipasang/diatur dipostingan kita sebelumnya, biasanya link ini terpasang berurutan mulai dari menu Home >> Label >> Sub Label>>Judul Halaman Yang Sedang Dibuka, tujuannya untuk mempermudah dan memberikan informasi kepada pengunjung posisi halaman yang sedang dibuka sekarang, disamping itu akan mempermudah juga untuk kembali kehalaman Home/Beranda, adapun cara memasang Breadcrumb diblog sebagai berikut  :

  1. Sign in Ke blogger .
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari Kode ]]></b:skin> (biar lebih gampang gunakan tombol CTRL+F.)
  7. Kemudian copy dan paste kode dibawah ini dan letakkan diatas kode ]]></b:skin>

  8. /* Breadcrumbs
    ----------------------------------------------- */
    .breadcrumbs {
    padding:5px 5px 5px 0px; 
    margin: 0px 0px 15px 0px; 
    font-size:95%; line-height: 1.4em; 
    border-bottom:3px double #e6e4e3;
    }

  9. Kemudian cari kode <b:includable id='main' var='top'> (biar lebih gampang gunakan tombol CTRL+F.)
  10. Jika sudah ketemu, ganti code <b:includable id='main' var='top'> dengan code dibawah ini

  11. <b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- breadcrumb for the post page -->
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
    <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
    <b:loop values='data:post.labels' var='label'>
    &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
    </b:loop>
    &#187; <span><data:post.title/></span>
    </div>
    <b:else/>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
    </b:if>
    </b:loop>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <div class='breadcrumbs'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
    </div>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div class='breadcrumbs'>
    <b:if cond='data:blog.pageName == &quot;&quot;'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
    <b:else/>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
    </b:if>
    </div>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='main' var='top'>
    <b:include data='posts' name='breadcrumb'/>


  12. Klik Pratinjau untuk melihat kesalahan dan apabila sudah tidak ada masalah klik Simpan

  13. Demikianlah postingan saya kali ini tentang cara memasang breadcrumb diblog, semoga bermanfaat.

Cara membuat kotak komentar diblog

Pada halaman terakhir blog sering kita jumpai box/kotak yang berisikan tulisan “Tulis komentar disini”, yang artinya setiap pengunjung bisa memberikan komentar atas kunjungannya di blog tersebut, kolom komentar biasanya sudah disediakan pada masing-masing tempelate, namun oleh kalangan blogger sering didesign ataupun diganti tampilannya sedemikian rupa sehingga tampilan blog lebih menarik, adapun cara menganti box/kotak komentar sebagai berikut:


  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode ]]></b:skin> atau (gunakan tombol CTRL + F untuk mempermudahkan pencarian kode)
  7. Copy dan paste kode dibawah ini dan letakkan diatas kode ]]></b:skin>
  8. Klik Pratinjau utnuk melihat apabila ada kesalahan dan selanjutnya klik Simpan

  9.  /* CSS Komentar */
    #form-wrapper {margin-top:20px;}
    #comments{overflow:hidden;}
    .comments {clear: both;padding: 20px 30px 30px;margin: 10px 0px;background: none repeat scroll 0% 0% rgb(34, 34, 34);    border: 1px solid rgb(51, 51, 51);box-shadow: 0px 0px 3px black inset;color: white;}
    #comments h4{display:block;padding:5px;line-height:30px}
    #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
    #comments h4{background:rgba(255, 0, 0, 0.2); text-align:center;}
    #comments h4,.comments .user a{font-size:14px}
    #comments h4{font-weight:normal;color:#fff}
    #comments h4:after{content:"";position:absolute;bottom:-10px;left:20px;width: 0px;height: 0px;border-style: solid;
    border-width: 10px 7.5px 0 7.5px;border-color: rgba(255, 0, 0, 0.2) transparent transparent transparent;line-height:0}
    h4#comment-post-message {display:none}
    #comments .avatar-image-container img {border: 0px none; padding: 0px;box-shadow: none;border-radius: 30px;-webkit-border-radius:30px;-moz-border-radius:30px;}
    .comments .comments-content .datetime { float: right; font-size: 10px; margin-right:4px}
    .comments .comments-content .comment:first-child {padding-top: 0px;}
    .comments .thread-toggle { display: none;}
    .comments .comment .comment-actions a {padding: 2px 10px;background: rgb(51, 51, 51);border: 1px solid rgb(70, 70, 70);position: absolute;box-shadow: 0px 1px 2px black;color:rgb(230, 230, 230);-webkit-transition: all .05s linear;-moz-transition: all .05s linear;-o-transition: all .05s linear;transition: all .05s linear;}
    .comments .comment .comment-actions a:hover {background: none repeat scroll 0% 0% rgb(40, 40, 40);border: 1px solid rgb(51, 51, 51);text-decoration: none;box-shadow: 0px 0px 1px black;}
    .comment-thread{color:rgb(230, 230, 230); font-size:13px;}
    .comment-thread a{color:#777}
    .comment-thread ol{margin:0 0 20px}
    .comment-thread .comment-content a, .comments .user a, .comments .comment-thread.inline-thread .user a {color: rgb(230, 230, 230);font-weight: bold;font-size: 13px;text-shadow: 1px 1px rgb(0, 0, 0);}
    .comments .avatar-image-container, .comments .avatar-image-container img {width: 45px;max-width: 100%;height: 45px;    max-height: 100%;margin: 0px 0px 3px;vertical-align: middle;border: 1px solid rgb(51, 51, 51);padding: 4px;box-shadow: 0px 1px 2px black;background-color: transparent;background-clip: content-box;transition: all 0.5s ease-out 0s;border-radius: 30px 0px 0px 30px;-webkit-border-radius:30px 0px 0px 30px;-moz-border-radius:30px 0px 0px 30px;overflow:hidden;}
    .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:58px}
    .comments .comment-block{ border: 1px solid rgb(51, 51, 51);padding: 6px;background: none repeat scroll 0% 0% rgb(40, 40, 40);box-shadow: 0px 1px 2px black;position: relative;    transition: all 1s ease-out 0s;}
    .comments .comments-content .comment-header {margin: 2px 0px 0px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; }
    .comments .comments-content .comment-content {margin: 2px 0px 10px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; }
    .comments .comments-content .comment{margin:20px 0 0;padding:0;width:100%;line-height:1em}
    .comments .comments-content .comment-thread {margin: 20px 0px;}
    .comments .comments-content .icon.blog-author{display:block;  width:0;  height:0;  border:13px solid transparent;  border-right-color:rgba(255, 0, 0, 0.1);  position:absolute;  right:-1px;  bottom:4px;animation:author-icon .9s infinite;-moz-animation:author-icon .9s infinite; -webkit-animation:author-icon .9s infinite; }
    .comments .comments-content .inline-thread{padding:0 0 0 20px}
    .comments .comments-content .comment-replies{margin-top:0}
    .comments .comment-content{padding:5px 0;line-height:1.4em}
    .comments .comment-thread.inline-thread{border-left: 1px solid rgb(20, 20, 20);background: none repeat scroll 0% 0% transparent;box-shadow: -1px 0px 0px rgb(51, 51, 51);}
    .comments .comment-thread.inline-thread .comment{width:auto}
    .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
    .comments .comment-thread.inline-thread .comment-block{margin-left:48px}
    .comments .comment-thread.inline-thread .user a{font-size:13px}
    .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
    .comments .continue{border-top:0;width:100%}
    .comments .continue a, .comments .comments-content .loadmore a {background: none repeat scroll 0% 0% rgb(40, 40, 40);
    font-size: 16px;font-weight: normal;color: rgb(255, 255, 255);padding: 10px 0px;text-align: center;box-shadow: 0px 1px 2px black;
    text-transform: capitalize;text-shadow: 1px 1px rgb(0, 0, 0);-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;border: 1px solid rgb(59, 59, 59);}
    .comments .continue a:hover, .comments .comments-content .loadmore a:hover{box-shadow: 0px 0px 1px black;}
    .comments .continue a:active, .comments .comments-content .loadmore a:active{box-shadow: none;background:rgb(70, 70, 70);}
    .comments .comments-content .loadmore {margin-top:0px;}
    .comment .continue{display:none}
    #comment-editor{width:103%!important;}
    .comment-form{width:100%;max-width:100%;margin-top:20px;}

    Demikian postingan saya kali ini mudah – mudahan bisa bermanfaat 

Cara memasang iklan diheader blog

Sebelum memasang iklan Google Adsense diheader ada satu hal yang perlu diperhatikan yaitu menambahkan kolom gadget diblog dengan cara membagi kolom header menjadi dua bagian karena secara default kolom di header hanya disediakan cuma satu kolom carannya KLIK DISINI dan  apabila sudah membagi kolom header menjadi dua kolom tapi belum bekerjasama dengan Google Adsense silahkan ikuti cara memasang Iklan Google Adsense diblog KLIK DISINI , selanjutnya berikut cara memasang iklan diheader blog :
  1. "Sign in" diblogger
  2. Klik Opsi Lainnya
  3. Klik "Tata Letak" >> Klik "Tambahkan Gadget/Add Gadget"
  4. Selanjutnya gulir pilih Adsense
  5. Lalu klik Adsense lihat gambar




  6. Selanjutnya tampil menu "Mengonfigurasi Adsense" untuk mengatur iklan


  7. Silahkan Atur format iklan seperti Ukuran iklan yang akan dipasang digadget, Warna iklan agar menarik ditampilan blog silahkan atur sesuai selera


  8. Klik Simpan

  9. Demikian postingan saya kali ini mudah – mudahan bermanfaat

Cara memasang iklan dibawah judul dan dibawah postingan

Memasang iklan dibawah judul dan dibawah postingan blog tentu akan membuat tampilan menjadi menarik untuk dilihat termasuk ukuran dan posisi iklan juga sangat menentukan memberi kesan blog itu tersendiri, disamping itu memasang ikan dibawah judul dan dibawah postingan akan mempermudah orang melihat apa yang kita iklankan diblog, Apabila belum punya atau belum mendaftar di Google Adsense silahkan KLIK DISINI Cara memasang Iklan Google Adsense diblog, berikut cara memasang iklan dibawah judul dan dibawah postingan blog :
  1. Masuk Ke Google Adsense >> klik Iklan saya >> Klik +Unit Iklan Baru


  2. Silahkan Isi data form :
    Nama seperti contoh “namaanda_iklan dibawah header”
    Ukuran Iklan klik tanda bawah pilihan ukuran sesuaikan selera anda dst


  3. Klik Simpan dan dapatkan kode


  4. Apabila kode HTML sudah ditampilkan silahkan parse kode tersebut


  5. Bungkus kode yang diparse tadi seperti ini :

  6. <div style='clear:right; float:center; margin-left:15px;'>
    Kode Adsense yang sudah diparse disini
    </div>

  7. Sign in di blogger
  8. Klik Opsi lainnya
  9. Klik Templete
  10. klik Edit HTML
  11. Centang tulisan Expand Widget Templates
  12. Cari kode :
    <div class='post-header-line-1'/>  untuk dibawah judul
    <data:post.body/>  untuk dibawah postingan
    (gunakan tombol CTRL + F untuk mempermudahkan pencarian kode)
  13. copy dan pastekan kode yang sudah dibungkus dan diparse tadi dibawah kode :
    <div class='post-header-line-1'/>  untuk dibawah judul
    <data:post.body/>  untuk dibawah postingan
    (biasanya ada 2 kode , cari dan pasangkan di kode yang kedua)
  14. Klik Pratinjau dan apabila tidak ada kesalahan >> klik Simpan
Demikian postingan saya kali ini mudah – mudahan bermanfaat

Cara memasang iklan Google Adsense di gadget

Dalam membuat iklan di gadget haruslah ditentukan posisi iklan tersebut ditempatkan dan disesuaikan dengan tata letak template blog yang dipakai, kita dapat mengatur ulang Tata letak tempelate blog apabila posisi untuk menempatkan iklan tidak sesuai dengan keinginan. Berikut cara memasang iklan diblog. Cara memasang iklan di Sidebar atau Gadget
  1. "Sign in" diblogger
  2. Klik Opsi Lainnya
  3. Klik "Tata Letak" >> Klik "Tambahkan Gadget/Add Gadget"
  4. Selanjutnya gulir kebawah apabila sudah mendaftar di Google Adsense akan ada tulisan "Adsense", apabila belum dikaitkan dengan Google Adsense silahkan KLIK DISINI Cara memasang Iklan Google Adsense diblog"
  5. Lalu klik Adsense



  6. Selanjutnya tampil menu "Mengonfigurasi Adsense" untuk mengatur iklan



  7. Silahkan Atur format iklan seperti Ukuran iklan yang akan dipasang digadget, Warna iklan agar menarik ditampilan blog silahkan atur sesuai selera



  8. Klik Simpan

  9. Demikian postingan saya kali ini mudah – mudahan bermanfaat

Cara memasang Iklan Google Adsense diblog

Sambil menyelam minum air kata yang sudah tidak asing terdengar ditelinga kita, kalau diartikan secara sederhana maksudnya “cari uang tambahan”…heheheh..artikan sendiri deh…Sekarang banyak blog yang sudah dikaitkan dengan iklan Google Adsense untuk mendapatkan uang tambahan sehingga para blogger mendesign blognya sedemikian rupa agar kelihatan menarik, Google Adsense adalah salah satu fitur dari layanan Google yang merupakan suatu cara yang mudah dan gratis bagi para untuk mendapatkan uang dengan menampilkan iklan Google di websitenya, bagi para blogger yang ingin mendaftarkan blognya dengan iklan Google Andsense silahkan ikuti cara memasang iklan Google Adsense sebagai berikut :
  1. Sign in diblogger
  2. Klik Opsi Lainnya >>Klik Setelan >>Klik Bahasa dan Pemformatan >> Lihat Bahasa dan ganti menjadi Bahasa English (United Kingdom)
  3. Klik Simpan
  4. Selanjutnya kembali kehalaman utama blog dan Klik Opsi Lainnya sekali lagi >> Klik Penghasilan
  5. Maka akan muncul halaman Blogger + Google Adsense >> Klik Mendaftar Adsense


  6. Selanjutnya akan muncul halaman “Langkah 1:Pilih Akun Google Anda” >> Klik "Ya, gunakan namaakun @Gmail.com" lihat gambar


  7. Kemudian tampil halaman Langkah 2 : "Beri tahu kami tentang konten anda" >> lalu pilih "Bahasa konten" >> klik "Lanjutkan"


  8. Tampil menu Langkah 3 : "Kirim permohonan Adsense" dan isi data pada form dengan data anda dengan sebenarnya sebagai penerima pembayaran >> tandai “pilih jenis email yang dikirim google adsense kepada saya" >> klik "Kirim permohonan saya"


  9. Selanjutnya muncul tampilan menu "Selamat………">> Klik "Lanjutkan"


  10. Muncul "Nama blog anda. Penghasilan" dan ada tulisan Akun Adsense anda sedang dalam antrian persetujuan >>lihat juga tulisan "Tampilkan" dan pilih posisi tab iklan yang ingin ditentukan >> Klik "Simpan"


  11. Masih di halaman menu yang tadi klik "Tampilkan dasbord"


  12. Kemudian tampil menu "Sign In ke Google Adsense" >> Tinggal isikan passward anda >> Klik "Masuk"


  13. Akhirnya muncul menu utama "Dasbord Adsense" untuk mendapatkan scrift iklan dari Google Adsense, statistik penghasilan dll.


Demikian postingan saya kali ini mudah – mudahan bermanfaat

Cara membuat menu dropdown dibawah dan diatas header

Dalam membuat sebuah blog maka secara default kita sudah memiliki menu dengan bentuk horizontal yang letaknya diatas Header yang disebut navbar (Navigasi Bar). Pada navbar default tersebut kita sudah disediakan navbar tinggal memilh saja, namun bagi sebagian para blogger menu tersebut dihilangkan dan di atur ulang sesuai selera sehingga tampilan blog terlihat menarik.

Contoh gambar


Untuk mengaturnya kembali atau membuat menu sendiri diperlukan beberapa kode CSS dan langkah-langkah dibawah ini :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode ]]></b:skin>  (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  7. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>  

  8. /* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: #ff0000 repeat-x;width:980px;margin:0 auto;padding:0 auto} #menuwrapper{width:980px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#000000;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7sKlZ1ctefYLy7N24ZY8aXKJKHr4F2pXqxrJOod0SW8WAexg0TFETTDT7DyWxjPZXfzb5wiJoFbx_DUA1vrifg-yxLQn3P_xfYDYV0eV-j45_22ulqGgGfgOvbFSggbGKF-xoq2nQCHI/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

  9. Kemudian cari kode

    1. <header> : untuk menu di atas header blog
    2. </header>: untuk menu di bawah header blog

  10. Copy dan pastekan kode dibawah ini dan letakkan diatas kode <header> dan atau </header> untuk menu dibawah header

  11. <div id='menuwrapperpic'>
    <div id='menuwrapper'>
    <ul id='menubar'>
    <li><a href='nama-alamat-blog.html' target='new'>Home </a></li>
    <li><a href='nama-alamat-blog.html' target='new'>Menu 1</a></li>
    <li><a href='nama-alamat-blog.html' target='new'>Menu 2</a></li>
    <li><a class='trigger'>Menu 3</a>
    <ul>
    <li class='hr'/>
    <li><a href='nama-alamat-blog.html' target='new'>Sub Menu 3</a></li>
    <li class='hr'/>
    <li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 3</a></li>
    <li class='hr'/>
    <li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 3</a></li>
    </ul>
    </li>
    <li><a class='trigger'>Menu 4</a>
    <ul>
    <li class='hr'/>
    <li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 4</a></li>
    <li class='hr'/>
    <li><a href='nama-alamat-blog.html'  target='new'>Sub Menu 4</a></li>
    </ul>
    </li>
    </ul> <div class='menusearch'>
    <div style='float:right;padding:8px 8px 0 0;'>
    <form action='http://ketutjoel.blogspot.com/search' method='get' target=''>
    <input name='sitesearch' style='display:none;' value='http://ketutjoel.blogspot.com'/>
    <input id="search-box" name="q" size="25" type="text" style="background: #EEEDED; border: 1px solid #000000 "/>
    <input id="search-btn" value="Search" type="submit"/>
    </form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

    Keterangan

    1. Kode berwarna merah adalah Warna background, lebar Menu utama , lebar menu dan lebar Menu Search (sesuaikan dengan lebar blognya kawan)
    2. Kode berwarna merah adalah Url tujuan, ganti dengan Url pada blognya kawan
    3. Kode berwarna kuning adalah judul menu bar ganti dengan judul nya kawan
    4. Kode berwarna biru adalah sub judul dropdown ganti dengan judul nya kawan
    5. Kode berwarna hijau adalah alamat pencarian ganti dengan alamat blognya kawan

Demikianlah postingan saya kali ini tentang cara membuat menu dropdown diatas header atau dibawah header, semoga bermanfaat.

Cara membuat 1, 2, 3 kolom gadget diatas atau dibawah header dan post

Cara membuat kolom gadget artinya menambah ataupun menciptakan kolom gadget yang letaknya bisa dimana saja sesuai keinginan dan kebutuhan blog dengan cara memasukan dan membuat kode-kode scrift HTML sendiri, biasanya para blogger menambah kolom gadget digunakan untuk memasang iklan atau menambah aksesoris diblog sehingga blog kelihatan menarik, caranya sebagai berikut :

A. Cara membuat 1 kolom gadget diatas post, caranya sebagai berikut :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode <b:section class='main' id='main' showaddelement='no'> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  7. Apabila sudah ketemu ganti tulisan showaddelement='no' menjadi showaddelement='yes'
  8. Klik Simpan dan lihat hasilnya di tata letak diatas post
B. Cara membuat 1 kolom gadget diatas header, caranya sebagai berikut :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode <div class="region-inner header-inner"> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  7. Tambahkan Kode scrift ini <b:section class="header" id="topheader" preferred="yes">
    dibawah kode tersebut
  8. Selanjutnya dibawah kode diatas akan melihat kode ini <b:section class="header" id="header" maxwidgets="1" showaddelement="no"> ganti tulisan showaddelement='no' menjadi showaddelement='yes'
  9. Klik Simpan dan lihat hasilnya di tata letak diatas post
Cara menempatkanya lihat gambar dibawah ini


C. Cara membuat 1 kolom gadget dibawah header, caranya sebagai berikut :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode ]]></b:skin> 
  7. (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  8. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin> 


  9. #under_header
    { float:left; width:100%;
    }

  10. Cari kode  <div class="region-inner header-inner"> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  11. Tambahkan Kode <b:section class="header" id="underheader" preferred="yes"> letakkan dibawah kode <div class="region-inner header-inner">
  12. Klik Simpan dan lihat hasilnya di tata letak diatas post
D. Cara membuat 2 kolom gadget dibawah Header caranya sebagai berikut :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  7. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>

  8. #box-kolom-widget { clear:both;
     }
     .box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor;
     }

  9. Setelah itu cari kode dibawah ini :

    1. <div id="main-wrapper">
    2. atau <div id="main-outer">
    3. atau <div class="main-outer"> sesuai dengan versi HTML nya kawan (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)

  10. Copy paste kode dibawah ini dan letakan diatas salah satu kode diatas

  11. <div id='box-kolom-widget'>
    <div id='box1' style ='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget'id='col1'  preferred='yes'  style='float:left;'/>
    </div>
    <div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div style='clear:both;'/>
    </div>

  12. Klik Pratinjau, siapa tahu ada kesalahan
  13. Klik Simpan

E. Cara membuat 3 kolom gadget dibawah Header caranya sebagai berikut :

  1. Caranya sama seperti membuat 2 kolom gadget tinggal mengganti kode CSS dan scrift HTMLnya, seperti Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>

  2. <div id="box3" style="float: left; margin: 0; text-align: left; width: 35%;"> <b:section class="box-widget" id="col3" preferred="yes" style="float: left;">

  3. Setelah itu cari kode dibawah ini :

    1. <div id="main-wrapper">
    2. atau <div id="main-outer">
    3. atau <div class="main-outer"> sesuai dengan versi HTML nya kawan (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)

  4. Copy paste kode dibawah ini dan letakan diatas salah satu kode diatas

  5. <div id='box-kolom-widget'>
    <div id='box1' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
     </div>
    <div style='clear:both;'/>
    </div>

  6. Klik Simpan

Cara membuat tulisan berjalan diblog

Cara membuat tulisan berjalan diblog seperti tulisan yang bergerak kekiri atau kekanan, keatas atau kebawah dan sebagainya, untuk membuatnya tidaklah terlalu sulit yang penting teliti cara memasangnya dan penempatannya diblog, untuk menempatkannya bisa di post blog atau side bar sesuai keinginan dan kebutuhan, tertarik dengan tulisan berjalan coba ikuti cara dibawah ini :

  1. Sign in diblogger
  2. Klik Opsi lainnya (untuk memasang di Sidebar)
  3. Klik Tata letak
  4. Klik Tambah gadget dan cari HTML/Javascript
  5. Masukkan kode marquee yang diinginkan
  6. Klik Simpan
  7. Untuk memasang di Postingan >> klik Entri baru >>Pasang kode Marquee>>Pratinjau>>Simpan

  8. Contoh Tulisan Marquee

    Tulisan yang bergerak dari kanan ke kiri

     <marquee direction="left" scrollamount="4" align="center">Kekanan dan kekiri</marquee>

    Kekanan dan kekiri

    Tulisan yang bergerak dari kiri ke kanan

    <marquee align="center" direction="left" scrollamount="4"> Kekiri dan kekanan </marquee>

    Kekiri dan kekanan

    Tulisan yang bergerak dari atas ke bawah

    <marquee align="center" direction="down" scrollamount="4"> Atas - bawah </marquee>

    Atas - bawah

    Tulisan yang bergerak dari bawah ke atas

    <marquee align="center" direction="up" scrollamount="4"> Contoh Tulisan Berjalan </marquee>

    Contoh Tulisan Berjalan

    Tulisan bergerak bolak balik atau mondar - mandir dari kiri ke kanan

    <marquee align="center" behavior="alternate" direction="left" scrollamount="4"> Mondar  - mandir</marquee>

    Mondar - mandir

    Tulisan yang bergerak bolak balik atau mondar - mandir dari kanan ke kiri

    <marquee align="center" behavior="alternate" direction="right" scrollamount="4"> Mondar  - mandir</marquee>

    Mondar - mandir

    Untuk menambah link pada marquee stop, gunakan kode berikut :

    <marquee direction="left" onmouseout="this.start()"onmouseover="this.stop()" scrollamount="2"><a href="http://ketutjoel.blogspot.com/2012/07/cara-membuat-teks-berjalan-di-blog.htmltarget="_blank">Cara Membuat Tulisan Berjalan di Blog</a></marquee>


    Menambah background, padding, border, color, memperbesar tulisan pada marquee bisa menggunakan kode sebagai berikut :

    <div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 50px; font-weight: bold; height: 70px; letter-spacing: 0.5em; padding: 15px; width: 500px;"> <marquee align="center" direction="left" scrollamount="6">Contoh Tulisan Berjalan</marquee></div>

    Contoh Tulisan Berjalan

    Untuk Membuat menu menggunakan kode sebagai berikut:

    <div style="background-color: white; border: 2px solid #FF0000; height: 100px; overflow: auto; padding: 10px; width: 90%;">
    <marquee align="justipy" direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">
    <li><a href="URL alamat Blog">Judul Blog </a></li>
    <li><a href="URL alamat Blog">Judul Blog </a></li>
    <li><a href="URL alamat Blog">Judul Blog </a></li>
    <li><a href="URL alamat Blog">Judul Blog </a></li>
    <li><a href="URL alamat Blog">Judul Blog </a></li>
    <li><a href="URL alamat Blog">Judul Blog </a></li>
    <li><a href="URL alamat Blog">Judul Blog </a></li>
    </marquee></div>



    Keterangan

    1. Direction = Mengatur pola gerakan tulisan (left, right, up dan down)
    2. Scrollamount = Mengatur kecepatan gerakan tulisan
    3. Behavior ( scroll/slide/alternate ): Mengatur prilaku gerakan tulisan.
    4. Warna Merah Ganti dengan URLnya kawan

Cara menghapus tulisan Langganan Entri dan Diberdayakan oleh Blogger

Pada Tempelate blogger yang letaknya paling bawah sering kita jumpai link dengan tulisan “Langganan Entri : Atom” dan “Diberdayakan oleh : Blogger” Tulisan tersebut sebenarnya bisa dihilangkan/disembunyikan kalau tidak berkenan untuk menampilkannya. Apabila kita memakai blogger template, footer ini secara default akan memuat atribut Blogger sehingga tampil tulisan tersebut akan ditampilkan diblog kita. Itu semua karena template memang sudah di desain seperti itu. untuk menghilangkan ataupun menyembunyikan tulisan 'Diberdayakan oleh blogger' dibagian footer tempelate dapat dilakukan langkah-langkah sebagai berikut :


  1. Sign in Ke blogger .
  2. Klik Opsi lainnya.
  3. Klik Tempelate
  4. Klik Edit HTML.
  5. Cari Kode ]]></b:skin>   (biar lebih gampang gunakan tombol CTRL+F.)
  6. Kemudian copy dan paste kode dibawah ini dan letakkan diatasnya.
  7. Klik Simpan

  8. /* Langganan Entri
    ----------------------------------------------- */
    .feed-links{
    display:none;
    }



    /* Diberdayakan oleh
    ----------------------------------------------- */
    #Attribution1 {
    height:0px
    visibility:hidden;
    display:none }

    Demikian postingan kali ini dan kalau berkenan silahkan dicoba, mungkin dengan menyembunyikan atribut blogger sehingga bisa meminimalisir pengunjung yang iseng terhadap blognya kawan.

    Selamat mencoba

Cara menghapus tulisan Beranda, Postingan Lama dan Postingan Baru diblog

Pada tempelate yang asli yang merupakan bawaan dari design itu sendiri pada bagian bawah blog sering kita jumpai tulisan Beranda (Home), Postingan Lama dan Postingan Baru, terkadang ada yang berpendapat tulisan tersebut membuat blog gagah dan keren, disamping itu kita merasa kurang nyaman untuk melihatnya, oleh karena itu pada postingan saya kali ini mencoba untuk membagi pengalaman cara menghilangkan tulisan tersebut. Caranyapun cukup mudah dengan langkah - langkah sebagai berikut :


  1. Sign in Ke blogger .
  2. Klik Opsi lainnya.
  3. Klik Edit HTML.
  4. Centang tulisan Expand Widget Templates
  5. Cari Kode dibawah ini satu persatu (biar lebih gampang gunakan tombol CTRL+F.)
  6. Untuk menghilangkan tulisan Beranda, Postingan Lama dan Postingan Baru pada tampilan blog Hapuslah Kode-kode dibawah ini
  7. Tetapi bila ingin Mengganti dengan gambar, Silahkan hapus kode - kode dibawah ini dan ganti dengan URL gambar yang sudah diupload sebelumnya
  8. Klik Pratinjau untuk melihat kesalahan
  9. Apabila sudah terjadi perubahan yang diinginkan klik Simpan

  10. Kode HTML
    Tidak ditampilkan          URL gambar
    <data:newerPageTitle/>     Hapus Kode ini  Ganti dgn URL gambar  
    <data:olderPageTitle/>   Hapus Kode ini  Ganti dgn URL gambar
    <data:homeMsg/>    Hapus Kode ini  Ganti dgn URL gambar

    NB: jika terdapat 2 code , hapus kode yang berada dibagian atas, dan ketiga kode tersebut diatas biasanya posisinya berdekatan

    Demikian postingan saya kali ini semoga bermanfaat.

Cara membuat daftar isi bergerak diblog

Menu model ini akan bergerak berganti post dari atas ke bawah dan akan muncul postingan kita dari yang terdahulu sampai yang terbaru, dan cara pembuatannya pun sangat mudah, tinggal ikuti langkah berikut ini:
  1. Sign In diblogger
  2. Klik Opsi lainnya dan klik Tata Letak
  3. Klik Tambahkan Gadget/Add Gadget
  4. Cari dan klik HTML/JavaScript
  5. Copy Paste kode di bawah ini
  6. Klik Simpan

  7. <div style="background-color: white; border: 1px solid rgb(0, 0, 0); height: 300px; width: 300px; overflow: auto;">
    <div style="margin-bottom: 15px;">
    <style type="text/css">
    #rp_plus_img{height:300px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
    #rp_plus_img ul{list-style-type:none;margin:0;padding:0}
    #rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
    #rp_plus_img li{height:70px;padding:1px;list-style:none;}
    #rp_plus_img a{color:#3366ff;}
    #rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
    #rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
    #rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
    <script type="text/javascript">
    var speed = 400;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
    </script>
    <ul id="rp_plus_img">
    <script style="text/javascript">
    var numposts = 20;
    var numchars = 60;
    </script>
    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
    </ul>
    </div></div></div>


    Contoh Gambar


    Keterangan :
    1. Warna Merah = Backround menu
    2. Warna Hijau = tinggi dan lebar gambar dalam menu yang di tampilkan, ganti sesuai selera
    3. warna Biru = adalah kecepatan untuk berpindahnya post ke post lain, ganti sesuai selera
    4. warna Orange = jumlah post yang akan di tampilkan di recent post, ganti sesuai selera
    Silahkan dicoba apabila berminat