Home ·

IKLAN ADSENSE

iklan resmi 1

Cara Membuat Text Alert Script / Kata Penutup Di Blogspot

Kata penutup di Blog merupakan salah satu trik dari pemilik blog atau admin untuk menyampaikan suatu pesan terima kasih kepada para pengunjungnya karena telah membuka blognya. Anda pasti sudah pahamkan maksud saya mengenai penutup blog itu.

Cara buatnya :

1. Login ke Blogger.

2. Klik Layout --> Edit HTML.

3. Cari kode
</head>

4. Copy pastekan script di bawah ini tepat dibawah kode </head> :

<script type='text/javascript'>

// goodbye alert

function goodbye(){

alert('Bagaimana Pendapat Anda Tentang Blog Saya ? Silahkan Kembali dan Beri Komentar Anda! Terimah Kasih !!');

}

parent.window.onunload=goodbye;

</script>

5. Klik Simpan Template.

Selamat mencoba ...

Related Posts :

    Cara burning (membuat) feed blog di feedburner (blogspot dan wordpress)

    Kegunaan feed pada feedburner ini buat blog anda adalah memudahkan pengguna:
    1. Untuk berlangganan email
    2. Untuk berlangganan feed
    3. Untuk melihat posting terbaru, dan lain lain
    Dan anda bisa memperoleh penghasilan dari google, jika telah terpasang program adsense text atau banner dari google

    Untuk melakukan burning blog ke feedburner, lakukan langkah berikut:

    1. Daftar blog anda ke : feedburner
    Masukkan google account anda
    Klik tombol Sign in



    2. Akan masuk ke halaman depan Feedbuner
    3. pada halaman di bawah masukkan alamat blog anda, misalnya: http://namablog.blogspot.com, contoh: http://artikelkomputerku.blogspot.com
    kemudian klik Next


    4. Masukkan nama/judul feed, dan alamat feed, klik tombol Activate Feed


    5. Feedburner akan melakukan identifikasi terhadap feed yang kita inginkan, jika tidak ada kesalahan akan muncul halaman berikut, klik Next


    6. Akan muncul halaman berikut, klik Activate Feed


    7. Setelah proses activated, akan dilakukan pembakaran (burning feed)
    Jika tidah ada kesalahan akan muncul halaman berikut
    catat url yang diberikan, misalnya http://feeds2.feedburner.com/artikelkomputerku anda nanti bisa menggunakan browser untuk melihat hasilnya.


    8. klik Next


    9. Klik Next, kan muncul pesan successfully


    Untuk anda yang menggunakan blog wordpress (domain gratis) jika ingin burning atau membuat feed blog wordpress bisa dilihat disini feed wordpress
    Untuk anda yang menggunakan blog wordpress (domain berbayar/self hosting) jika ingin burning atau membuat feed blog wordpress bisa dilihat disini feed wordpress

    Anda telah berhasil melakukan burning blog ke dalam bentuk feed.

    Related Posts :

      Memberi Bingkai pada Tulisan di Blogspot

      Pada tutorial kali ini , saya akan memberikan 7 bingkai yang anda dapat gunakan pada tulisan anda di Blog . Apa saja 7 bingkai tersebut , dapat anda lihat satu per satu beserta contohnya .

      1. Solid

      <div style="border: 1px solid #000000; background-color: #FFFFFF; padding: 5px; width: 400px;">
      Tulisan yang akan diberi bingkai
      </div>

      2. Dashed

      <div style="border: 1px dashed #000000; background- padding: 5px; width: 400px;">
      Tulisan yang akan diberi bingkai
      </div>

      3. Dotted

      <div style="border: 1px dotted #000000; background-color: #FFFFFF; padding: 5px; width: 400px;">
      Tulisan yang akan diberi bingkai
      </div>

      4. Double

      <div style="border: 4px double #000000; background- padding: 5px; width: 400px;">
      Tulisan yang akan diberi bingkai
      </div>

      5. Groove

      <div style="border: 4px groove #000000; background-color: #FFFFFF; padding: 5px; width: 400px;">
      Tulisan yang akan diberi bingkai
      </div>

      6. Outset

      <div style="border: 4px outset #000000; background- padding: 5px; width: 400px;">
      Tulisan yang akan diberi bingkai
      </div>

      7. Ridge

      <div style="border: 4px ridge #000000; background- padding: 5px; width: 400px;">
      Tulisan yang akan diberi bingkai
      </div>

      Untuk warna (background-color), border, dll bisa anda sesuaikan dengan keinginan anda. Selamat mencoba

      Related Posts :

        Membuat menu navigasi (horizontal) bercabang di blogspot


        Menu horizontal di atas dibuat dengan menggunakan html script dan css, menurut beberapa sumber menu horisontal yang dibuat menggunakan script css + html lebih mudah ditelusuri oleh robot search engine dibanding jika menggunakan menu yang dibuat menggunakan javascript.

        Untuk membuatnya bisa lakukan langkah berikut:

        1. Login ke account blogger anda
        Pilih Dashboard -> Tataletak -> Edit HTML

        cari kode berikut:
        ]]></b:skin>

        2. Di bagian atas kode tersebut masukkan kode berikut

        /* Navbar */
        #menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;
        opacity: 0.99; filter: alpha(opacity: 98);}
        #menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
        #menu ul{padding:0; margin:0;}
        #menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
        #menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
        #menu ul li a:hover{background-position:0px -60px; color:#ffffff;}
        #menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}
        #menu ul li ul {display:none;}
        #menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
        display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
        #menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
        #menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}
        #menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}
        .status-msg-wrap{
        display:none;
        }

        4. Klik tombol "Simpan Template"

        5. Buka halaman "Tata Letak -> Elemen Halaman"

        6. Pada Elemen header , klik " Tambah Gadget"




        Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang cara membagi kolom header


        7. setelah mengklik tombol "tambah gadget" pilih HTML/Javascript




        8. pada kotak dialog html/javascrpit masukkan kode html berikut:

        <div id="menu">
        <ul>
        <li><a class="active" href="/"> Home</a></li>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a>
        <ul>
        <li><a href="#">Menu 2.1</a></li>
        <li><a href="#">Menu 2.2</a></li>
        </ul></li>
        <li><a href="#">Menu 3</a>
        <ul>
        <li><a href="#">Menu 3.1</a></li>
        <li><a href="#">Menu 3.2</a></li>
        <li><a href="#">Menu 3.3</a></li>
        <li><a href="#">Menu 3.4</a></li>
        </ul></li>
        <li><a href="#">Menu 4</a></li>
        <ul>
        </ul>
        </ul></div>

        catatan:
        Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
        misalnya:
        http://mrcoppas.blogspot.com
        atau
        http://mrcoppas-tutorial.blogspot.com/2011/06/cara-mengganti-icon-b-di-blogspot.html
        http://mrcoppas-tutorial.blogspot.com/2011/06/cara-membuat-daftar-isi-sitemap-di.html
        teks setelah tanda # seperti Home, Menu 1, dst bisa anda ganti dengan teks sesuai dengan keinginan anda.

        9. Simpan perubahan yang anda buat, jika tidak ada masalah maka akan tampil menu navigasinya

        Related Posts :

          Membuat menu navigasi horisontal di blogspot

          Selain menggunakan menu horisontal bercabang (drop down menu) , kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun membuat menu horisotal bercabang dengan script css . Seperti yang telah saya buat dalam postingan sebelumnya tenang menu horisontal versi dynamic drive, maka kali ini akan dibuat versi css menu maker. Tampilan menunya bisa dilihat pada gambar di bawah ini. Ini adalah contoh menu navigasi horisontal yang dinamai oleh pembuatnya dengan nama massive blue



          Untuk membuatnya bisa lakukan posedur berikut:


          1. Login ke akun blogger
          Pilih Dashboard - Tata letak - Edit HTML



          cari kode berikut:
          ]]></b:skin>

          2. Di bagian atas kode tersebut masukkan kode berikut
          #menu {
          background: #333;
          float: left;
          list-style: none;
          margin: 0;
          padding: 0;
          width: 100%;
          }
          #menu li {
          float: left;
          font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
          margin: 0;
          padding: 0;
          }
          #menu a {
          background: #333 url("http://i47.tinypic.com/n1bj0j.jpg") bottom right no-repeat;
          color: #ccc;
          display: block;
          float: left;
          margin: 0;
          padding: 8px 12px;
          text-decoration: none;
          }
          #menu a:hover {
          background: #2580a2 url("http://i49.tinypic.com/2vjbz4g.jpg") bottom center no-repeat;
          color: #fff;
          padding-bottom: 8px;


          3. Klik tombol "Simpan Template"

          4. Buka halaman "Tata Letak -> Elemen Halaman"

          5. Pada Elemen header , klik " Tambah Gadget"


          Catatan: Jika anda menggunakan template default (bawaan) blogger maka tombol "Tambah gadget" tidak muncul pada bagian header, untuk menampilkannya bisa lihat postingan saya tentang cara menampilkan "tambah gadget" atau membagi 2 kolom di header

          6. Pilih gadget html/javascript
          masukkan script berikut :
          <ul id="menu">
          <li><a href="#">Clothes</a></li>
          <li><a href="#">Dress for man</a></li>
          <li><a href="#">Women's clothes</a></li>
          <li><a href="#">Summer dress</a></li>
          <li><a href="#">Mr Coppas</a></li>
          </ul>


          Catatan:
          Pada script di atas
          Ganti semua tanda # pada href="#" dengan url target atau url tujuan.
          Teks Clothes , Dress for man, Women's clothes ..., diganti dengan teks yang akan ditampilkan di menu

          Agar script bisa berfungsi dengan baik, maka sebaiknya dicopy ke notepad atau word pad kemdian diedit sesuai kebutuhan blog anda.

          Related Posts :

            Menampilkan Widget Di Halaman Tertentu Untuk Blogspot

            Langkah pertama yang harus Anda lakukan adalah masuk menu "Design" kemudian masuk ke bagian "Edit HTML" lalu centang kotak "Expand widget templates"

            lalu cari code widgetnya seperti ini

            <b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
            <b:includable id='main'>

            <!-- only display title if it's non-empty -->
            <b:if cond='data:title != &quot;&quot;'>
            <h2 class='title'><data:title/></h2>
            </b:if>
            <div class='widget-content'>
            <data:content/>
            </div>

            <b:include name='quickedit'/>

            </b:includable>
            </b:widget>

            Untuk mempermudah pencarian silahkan masukkan judul widget seperti "Pesan" kedalam kotak pencarian browser (ctrl + F)

            Kemudian tambah code
            <b:if cond='data:blog.url == data:blog.homepageUrl'>
            dan ditutup dengan code </b:if> untuk menempatkan di hanya halaman depan saja
            dan ditempatkan seperti dibawah ini

            <b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
            <b:includable id='main'>
            <b:if cond='data:blog.url == data:blog.homepageUrl'>
            <!-- only display title if it's non-empty -->
            <b:if cond='data:title != &quot;&quot;'>
            <h2 class='title'><data:title/></h2>
            </b:if>
            <div class='widget-content'>
            <data:content/>
            </div>

            <b:include name='quickedit'/>
            </b:if>
            </b:includable>
            </b:widget>
            Perhatikan penempatan code yang berwarna merah !

            kemudian save.

            Dan dibawah ini adalah code yang bisa digunakan untuk penempatan lainya

            Untuk menempatkan di halaman depan/index digunakan code
            <b:if cond='data:blog.pageType == data:blog.homepageUrl'>

            Untuk menempatkan di halaman Archive saja
            <b:if cond='data:blog.pageType == "archive"'>

            Untuk menempatkan dihalaman item/posting saja digunakan code
            <b:if cond='data:blog.pageType == "item"'>

            Dan untuk pada halaman pages atau static page blogger digunakan
            <b:if cond='data:blog.pageType == "static_page"'>

            Dan untuk tambahan, jika Anda ingin menempatkan di halaman tertentu dengan menggunakan URL gunakan code dibawah ini
            <b:if cond='data:blog.url == "URL_HERE"'>

            Ganti code URL_HERE dengan URL yang ingin anda tampilkan.

            Dan untuk pengecualian, misalnya anda tidak menempatkan widget hanya di halaman depan saja dengan cara mengganti tanda = pertama dengan tanda !


            Contoh
            <b:if cond='data:blog.pageType != data:blog.homepageUrl'>

            Nah tidak terlalu sulit kan? semoga bermanfaat bagi Anda.

            Related Posts :

              Cara Membuat Scroll Pada Related Post Di Blogspot



              1. Loggin ke blogger=> Klik layout=> Edit HTML=> Klik Expand Template Widget=> Cari kode

              <data:post.body/>

              Kalau sudah ketemu, copi dan pastekan script/ code berikut dibawah kode tadi

              <b:if cond='data:blog.pageType == &quot;item&quot;'>
              <br/>
              <br/>
              <H2>Artikel Terkait:</H2>
              <div class='rbbox'>
              <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
              <div id='albri'/>
              <script type='text/javascript'>
              var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
              var maxNumberOfPostsPerLabel = 4;
              var maxNumberOfLabels = 10;
              maxNumberOfPostsPerLabel = 10;
              maxNumberOfLabels = 3;
              function listEntries10(json) {
              var ul = document.createElement(&#39;ul&#39;);
              var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
              json.feed.entry.length : maxNumberOfPostsPerLabel;
              for (var i = 0; i &lt; maxPosts; i++) {
              var entry = json.feed.entry[i];
              var alturl;
              for (var k = 0; k &lt; entry.link.length; k++) {
              if (entry.link[k].rel == &#39;alternate&#39;) {
              alturl = entry.link[k].href;
              break;
              }
              }
              var li = document.createElement(&#39;li&#39;);
              var a = document.createElement(&#39;a&#39;);
              a.href = alturl;
              if(a.href!=location.href) {
              var txt = document.createTextNode(entry.title.$t);
              a.appendChild(txt);
              li.appendChild(a);
              ul.appendChild(li);
              }
              }
              for (var l = 0; l &lt; json.feed.link.length; l++) {
              if (json.feed.link[l].rel == &#39;alternate&#39;) {
              var raw = json.feed.link[l].href;
              var label = raw.substr(homeUrl3.length+13);
              var k;
              for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
              var txt = document.createTextNode(label);
              var h = document.createElement(&#39;b&#39;);
              h.appendChild(txt);
              var div1 = document.createElement(&#39;div&#39;);
              div1.appendChild(h);
              div1.appendChild(ul);
              document.getElementById(&#39;albri&#39;).appendChild(div1);
              }
              }
              }
              function search10(query, label) {
              var script = document.createElement(&#39;script&#39;);
              script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
              + label +
              &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
              script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
              document.documentElement.firstChild.appendChild(script);
              }
              var labelArray = new Array();
              var numLabel = 0;
              <b:loop values='data:posts' var='post'>
              <b:loop values='data:post.labels' var='label'>
              textLabel = &quot;<data:label.name/>&quot;;
              var test = 0;
              for (var i = 0; i &lt; labelArray.length; i++)
              if (labelArray[i] == textLabel) test = 1;
              if (test == 0) {
              labelArray.push(textLabel);
              var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
              labelArray.length : maxNumberOfLabels;
              if (numLabel &lt; maxLabels) {
              search10(homeUrl3, textLabel);
              numLabel++;
              }
              }
              </b:loop>
              </b:loop>
              </script>
              </div>
              <script type="text/javascript">RelPost();</script>
              </div>
              </b:if>

              2. Selanjutnya cari kode

              ]]></b:skin>

              3. JIka sudah ketemu copy dan pastekan code berikut diatas code tadi.

              .rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
              background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
              .rbbox:hover{background-color: rgb(255, 255, 255);}


              4. Simpan template

              Related Posts :

                Membuat Halaman 123 / Page Number Navigation Berurut di Blogspot



                Pertama,pergilah ke dashboard blogger anda,selanjutnya,pilih tata letak,dan pilih edit html.
                Seperti biasa,contreng option expand widget templates,
                selanjutnya cari kode berikut:
                ]]></b:skin>
                Setelah ketemu,letakkan persis diatasnya kode css dibawah ini:
                .showpageArea a {
                text-decoration:underline;
                }
                .showpageNum a {
                text-decoration:none;
                border: 1px solid #cccccc;
                margin:0 3px;
                padding:3px;
                }
                .showpageNum a:hover {
                border: 1px solid #cccccc;
                background-color:#cccccc;
                }
                .showpagePoint {
                color:#333;
                text-decoration:none;
                border: 1px solid #cccccc;
                background: #cccccc;
                margin:0 3px;
                padding:3px;
                }
                .showpageOf {
                text-decoration:none;
                padding:3px;
                margin: 0 3px 0 0;
                }
                .showpage a {
                text-decoration:none;
                border: 1px solid #cccccc;
                padding:3px;
                }
                .showpage a:hover {
                text-decoration:none;
                }
                .showpageNum a:link,.showpage a:link {
                text-decoration:none;
                color:#333333;
                }
                Lalu,cari lagi kode seperti ini:
                </body>
                Jika sudah ketemu,tepat diatasnya letakkan script dibawah ini:
                <b:if cond='data:blog.pageType != &quot;item&quot;'>
                <script type='text/javascript'>
                var pageCount=5;
                var displayPageNum=5;
                var upPageWord =&#39;Previous&#39;;
                var downPageWord =&#39;Next&#39;;
                </script>
                <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
                </b:if>
                Langkah terakhir,carilah kode berikut:
                'data:label.url'
                Jika sudah ketemu,hapus kode tersebut dan gantilah kode berikut:
                'data:label.url + &quot;?&amp;max-results=5&quot;'
                Sekarang,simpan templates anda,dan anda bisa lihat hasilnya sekarang

                Related Posts :

                  Cara Membuat Daftar Isi (Sitemap) Di Blogspot

                  Daftar isi kali ini dibuat dengan aturan javascript yang file-nya sudah saya upload dan dapat langsung digunakan. Isi yang ditampilkan dibagi berdasarkan label.
                   

                  Cara membuat daftar isi/sitemap blog di blogger/blogspot:

                  1. Buat sebuah halaman posting baru, sebaiknya halaman statis (static page).
                  Dashboard > New Post/Edit Post > Edit Pages > Create New Page
                  2. Beri judul sesuka anda, misalnya: "Daftar Isi", "Table of Content", "Sitemap Blog", dan lain lain.
                  3. Pada bagian kanan kotak posting klik "Edit HTML".

                  4. Masukkan script berikut:
                  <script src="http://buka-rahasia-blogspot-code-host.googlecode.com/files/bukarahasiablogspot.txt">
                  </script>
                  <script src="http://mrcoppas-tutorial.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
                  </script>

                  Ganti http://mrcoppas-tutorial.blogspot.com/ dengan url blog/website anda

                  5. Jika ingin melihat hasilnya klik "preview/pratinjau".
                  6. Publish post.
                  7. Pasang link halaman tersebut ke link list blog, menu, atau di tempat yang diinginkan.
                  8. Done!

                  Related Posts :

                    Cara Mengganti Icon B Di Blogspot

                    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsXdIn9DKTyckDvSKiY1XfUX484oT4CoHdNybhDk4gp7iWMUAGX0lQtrt0wFKHCtKVMFiK-aTzeM8G9hCf3fgN8I0eZSLrjUe7ucrZD1a2jtBwQhjrTEJMjEW-viQxmD_phvfCUDQpBbBN/s1600/icon_blog.jpg
                    Cara untuk mengubahnya cukup mudah, yaitu sebagai berikut:
                    Login terlebih dahulu ke blogger kamu

                    1 Pada halaman dashboard, klik Tataletak (Layout)
                    2 Selanjutnya klik Edit HTML
                    3 Pada kotak HTML, carilah kode ini ]]></b:skin> (gunakan Control F untuk memudahkan pencarian):
                    4 Kemudian masukkan kode yang terdapat pada kotak di bawah dan letakkan di bawah kode ]]></b:skin>, atau antara ]]></b:skin> dan </head>:

                    <link href="http://url_gambar_iconmu.png" rel="shortcut icon" type="image/x-icon"/>

                    Ganti url gambar icon, dengan gambar icon kamu
                    Untuk melihat hasil perubahan tersebut, klik Pratinjau (Preview) dan pastikan bahwa kamu sudah melakukan editing HTML dengan benar.

                    Related Posts :

                      Membuat Related Post Thumbnail Di Blogspot

                      Langkah-langkah pasang related post with thumbnail:
                      1. Login ke blogger.com, pada dashboard blogger sobat dan arahkan ke Layout > Edit HTML dan centang kotak "Expand Template Widget"

                      2. Cari kode </head> dan ganti dengan kode di bawah ini
                      <!--Related Posts with thumbnails Scripts and Styles Start-->
                      <b:if cond='data:blog.pageType == &quot;item&quot;'>
                      <style type="text/css">
                      #related-posts {
                      float:center;
                      text-transform:none;
                      height:100%;
                      min-height:100%;
                      padding-top:5px;
                      padding-left:5px;
                      }

                      #related-posts h2{
                      font-size: 1.6em;
                      font-weight: bold;
                      color: black;
                      font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
                      margin-bottom: 0.75em;
                      margin-top: 0em;
                      padding-top: 0em;
                      }
                      #related-posts a{
                      color:black;
                      }
                      #related-posts a:hover{
                      color:black;
                      }

                      #related-posts a:hover {
                      background-color:#d4eaf2;
                      }
                      </style>
                      <script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
                      </b:if>
                      <!--Related Posts with thumbnails Scripts and Styles End-->
                      </head>
                      3. Kemudian cari kode
                      <div class='post-footer-linepost-footer-line-1'>
                      jika tidak ditemukan coba cari kode di bawah ini
                      <p class='post-footer-linepost-footer-line-1'>
                      4. Sekarang tinggal meletakkan kode di bawah ini sesudahnya
                      <!-- Related Posts with Thumbnails Code Start-->
                      <b:if cond='data:blog.pageType == &quot;item&quot;'>
                      <div id='related-posts'>
                      <b:loop values='data:post.labels' var='label'>
                      <b:if cond='data:label.isLast != &quot;true&quot;'>
                      </b:if>
                      <b:if cond='data:blog.pageType == &quot;item&quot;'>
                      <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
                      <script type='text/javascript'>
                      var currentposturl=&quot;<data:post.url/>&quot;;
                      var maxresults=5;
                      var relatedpoststitle="Related Posts";
                      removeRelatedDuplicates_thumbs();
                      printRelatedLabels_thumbs();
                      </script>
                      </div><div style='clear:both'/>
                      </b:if>
                      <!-- Related Posts with Thumbnails Code End-->

                      4. Jika sobat ingin mengganti berapa banyak related post yang akan ditampilkan maka sobat harus mengganti kode atau script di bawah ini.

                      var maxresults=5;

                      5. Jika sobat ingin mengganti title atau judul dengan yang sobat inginkan maka sobat cukup mengganti kode atau script di bawah ini

                      var relatedpoststitle="Related Posts";

                      Selesai deh membuat related post with thumbnail. Ok blog belajar seo blogspot ini akan membahas lebih banyak lagi tentang blogger tutorial untuk itu sering-seringlah mampir lagi ok.
                      Selamat mencoba...

                      Related Posts :

                        Cara Membuat 'auto hide' Navbar Di Blogspot

                        Terdapat cara lain untuk menghilang Navbar pada blog anda selain dari menghilangkan terus.Kita juga boleh membuat Navbar tersebut menjadi Auto Hide (muncul bila diletakkan pointer pada nya).Cara ini tidak menyalahi peraturan Blogger kerana masih terdapat navbar lagi. Jika anda berminat dengan navbar ini ikuti langkah berikut.

                        1.Klik pada Dashboard,dan pilih Edit HTML.

                        2.Kemudian carilah kod berikut body {
                        body {
                        font: 100% Arial, Helvetica;
                        background: #000000;
                        color: #333;
                        }
                        3.Letakkan Kod berikut di atas kod tadi.
                        #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}

                        #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
                        4. Menjadi seperti ini:
                        #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}

                        #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

                        body {
                        font: 100% Arial, Helvetica;
                        background: #000000;
                        color: #333;
                        }

                        4.Kemudian klik save template

                        5.Lihat blog anda kembali untuk melihat tampilannya.

                        Related Posts :

                          Cara Memasang Tombol Share ke Facebook dan Twitter Di Blogspot

                          Cara Memasang Tombol Share ke Facebook dan Twitter Di Blogspot

                          1. Login ke Blogger.com
                          2. Masuk Ke Tab "Rancangan"
                          3. Pilih Edit/HTML
                          4. Centang Expand Template Widget
                          5. Cari kode ini: <p><data:post.body/></p> atau <data:post.body/>
                          6. Masukkan Kode Dibawah ini Diatas Kode No.6


                          <div style='float:right; margin:0 0 10px 10px; text-align:center;'>
                          KODE-FACEBOOK
                          <br />
                          <br />
                          KODE-TWEETMEME</div>

                          7. Ganti Tulisan yang Berwarna Merah dengan Kode Seperti ini

                          Kode Share Facebook
                          Kode Share Facebook-1


                          <a title='Share on Facebook' name='fb_share' type='box_count' href='http://www.facebook.com/sharer.php'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>
                          Kode Share Facebook-2


                          <a title='Share on Facebook' name='fb_share' type='button_count' href='http://www.facebook.com/sharer.php'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>

                          Kode Share Twitter
                          Kode Share Twitter-1

                          <script type='text/javascript' src='http://tweetmeme.com/i/scripts/button.js'></script>
                          Kode Share Twittwr-2


                          <script type='text/javascript'> tweetmeme_style = 'compact'; </script> <script type='text/javascript' src='http://tweetmeme.com/i/scripts/button.js'></script>



                          Semoga Artikel Cara Memasang Tombol Share ke Facebook dan Twitter dapat bermanfaat Bagi Anda Semua.

                          Related Posts :

                            Membagi Header 2 Kolom Template Di Blogspot

                            Membagi Header 2 Kolom Template Di Blogspot / Membelah Header Template Bogspot / Membagi 2 Kolom Header Blogspot

                            Bagi yang mau mencoba tips ini, silahkan ikuti langkah berikut ini:
                            1. Mencari Kode :
                            .header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}
                            2. Seluruh Kode tadi saya hapus dan ganti dengan kode ini:
                            .header-outer {

                            background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;

                            _background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */}

                            #header {

                            width: 45%; /* untuk mengatur lebar header kiri - title, description, image */

                            margin-right: 10px;float: left; }

                            #bgsGR_headerkanan {

                            float: right;

                            width: 49%; /* mengatur lebar header kanan */

                            margin: 20px 10px 5px 10px;

                            padding: 2px;}

                            #bgsGR_headerkanan .widget {margin: 3px;}
                            3. Selanjutnya cari kode :
                            <div class='region-inner header-inner'>
                            4. lalu menempatkan kode berikut ini di bawah kode no.3:
                            <b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

                            5. Save dan hasilnya bisa kita lihat seperti gambar di bawah ini:




                            Selamat berkreasi dan mempercantik blog.

                            Related Posts :