IKLAN BULAN INI

Monday, 27 August 2012

Gratis Template ChromeGT

Petama - tama sebagai Admin saya mohon maaf pada kawan pengunjung setia BlogBego Creation karena ada sedikit kesibukan jadinya tak sempat mengurus Blog saya ini beberapa hari terakhir ini :q; Kedua saya ucapkan Selamat Lebaran bagi kawan yang merayakannya, serta Selamat Galungan dan Kuningan untuk kawan yang beragama Hindu :z;  Mohon maaf Lahir Bathin :w; 
Sekarang saya akan informasikan buat kawan pencinta Template Keren ciptaan SoraTemplate, yang bagi saya pribadi sungguh sangat menarik karena mempunyai beberapa kelebihan dan keunikan seperti Slide yang berada di bawah Header bisa ditampilkan maupun disembunyikan [Show / Hide]






                   
 



Karena ini merupakan Template Gratis, kita sebagai Blogger wajib dan harus menghormati hasil karya atau Design orang dengan jalan jangan sekali-sekali menghilangkan / menghapus URL / Link sipencipta ChromeGT :x;
Selamat Mencoba !!!

Read more ...

Saturday, 18 August 2012

Navbar Auto-Hidden disisi kanan

Sebelumnya saya membahas tentang Cara Membuat Navbar Menu Bertingkat, sekarang  kembali saya akan membahas Menu Navigasi yang pada umumnya Navbar berada diatas atau dibawah Header Blog, tapi    yang ini letaknya di sisi kanan Blog dengan variasi Auto Hidden :y; [akan keluar kalau mouse komputer kawan dekatkan, dan akan kembali sembunyi bila mouse kawan pindahkan] yang saya beri Nama Menu Navigasi Auto Hiden :z;

Screen shot

Setelah kawan melihat dan mencoba Demonya, mari kita lanjutkan ke Cara membuatnya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML/JavaScript atau bisa digabung dengan Gadget yang ada :w;
  • Copas Script berikut kedalamnya

<style>
ul#navigation1 {
position: fixed;
margin: 0px;
padding: 0px;
top: 150px;
right: 0px;
list-style: none;
z-index:9999;
}
ul#navigation1 li {
width: 42px;
border:0px;
display: block;
padding:1px;
}
ul#navigation1 li a {
display: block;
width: 150px;
height: 42px;
padding: 20px 5px 0 20px;
margin-top: -20px;
color: #FFF;
text-align: center;
font-family:"Tahoma", Verdana;
font-size:16px;
font-weight:bold;
background-color:transparent;
background-repeat:no-repeat;
background-position:left center;
border:0px solid #F00;-moz-border-radius:100px;-khtml-border-radius: 100px;-webkit-border-radius: 100px;
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation1 .Home a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDrRrMiJnPyXjsj4kgXAu_GQgjFu2pN18AQWKryDt5YOoWD-wj2w4fwzbwIjmFwgj3FpOabUVyQ2rHivvTXrKqL5D3v2gOlhF9c6L8nzxJlDkmf8Oe7O5KG7ju9ajJYiwpertcCYe5vMA/s1600/Home.png);
}
ul#navigation1 .Kreasi a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdZRRsDzJOyqSlBJSRH9A-1HjviQLlAvNMyk9-q4gTnimzJ0MuBd-ah5OXCKhHxTaTtul0gfsgSxx_EpYiMuRCTU5jCzSqPUc5naIZubQVMoUhRQRoFkD3EuIzxHKLI5XzLxR1IvY9hBo/s1600/Kreasi.png);
}
ul#navigation1 .TipsTrik a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtNW5WPZKJ_bz_-Zi5iGEA3UwrJamm12Ix8kq2JQljAyq_smPaxCmDM0nD5ExFgVJIlvKw4jy1E-aSPpQaP9sAPmLcppTiMBhnQsXm1-VfB5Y-gB7UoXM-Xdx3C0YyHggxjyzByMjamhM/s1600/Tips+Trik.png);
}
ul#navigation1 .Tutorial a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijdr8y27cEEm8JI9XrduRr5s0xW-9nbMwJ06uskkdYe0pdWIO6qEqhs8PF78yh3KQjU1Vpgdc8zyJN64XVZzgMNgJFZvj-ziQE0C2v57Q1JOtUfaIxzpT-_jU7glBbuPt0EMKQxAx2CbA/s1600/Tutorial.png);
}
ul#navigation1 .Widget a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaewn0Jwkml6bCXtbsO1Ni2Vv3pJht_A87vm22yx1DpPn5sjEZqBT0t6-uH9IXhS7SdMraroJOEzd3Ms060h-wBUL9FSZv9TfHNqApa8-gLtwZPFOFITBIdiDWjYe1sAbrbDpvR-Gd4xs/s1600/Widget.png);
}
ul#navigation1 .Animasi a {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyllgxWsxSZOsM3fq8qBQpxdm1SUbxoP-Pyq3ZJbcbFreldoVAHX0kdscVjhLPm9nVzzhQofGzat2Bva6wVh2SEiv5H1UxztQ5_nSBJS956tkBDg74ZrdCQ0pVW5xMlGNRGblXkv2GHQs/s1600/Navbar.png);
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
$('#navigation1 a').stop().animate({'marginLeft':'5px'},1000);
$('#navigation1 > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-112px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'5px'},200);
}
);
});
</script>
<ul id="navigation1">
<li class="Home"><a href="http://blogbego-creation.blogspot.com/" target="_blank" title="Kembali ke Halaman Depan">BERANDA</a></li>
<li class="Kreasi"><a href="http://blogbego-creation.blogspot.com/search/label/kreasi" target="_blank" title="Artikel dengan Katagori Kreasi">KREASI</a></li>
<li class="TipsTrik"><a href="http://blogbego-creation.blogspot.com/search/label/tips%20trik" target="_blank" title="Artikel dengan Katagori Tips Trik ">TIPS TRIK</a></li>
<li class="Tutorial"><a href="http://blogbego-creation.blogspot.com/search/label/tutorial" target="_blank" title="Artikel dengan Katagori Tutorial">TUTORIAL</a></li>
<li class="Widget"><a href="http://blogbego-creation.blogspot.com/search/label/widget" target="_blank" title="Artikel dengan Katagori Widget">WIDGET</a></li>
<li class="Animasi"><a href="http://blogbego-creation.blogspot.com/search/label/widget" target="_blank" title="Artikel dengan Katagori Animasi">ANIMASI</a></li>
</ul>
  • Teks yang berwarna merah adalah Image Navbar, silahkan ganti yang sesuai dengan tampilan, 
  • Teks yang berwarna Violet adalah URL saya silahkan ganti dengan URL Blog kawan begitu juga dengan Judulnya 
  • sedangkan untuk Target="_blank" title=".................." silahkan diganti juga dan bisa dihilangkan
Contoh Image Navbar

    • Selamat Mencoba, sukses selalu :


    Read more ...

    Thursday, 16 August 2012

    Daftar Isi BBC Gaya punya

    Dari sekian Daftar Isi Blog yang sudah saya bahas, baik yang biasa maupun yang seperti Slide / Animasi Otomatis silahkan kawan nanti lihat contohnya di Blog Demo saya :y; agar pembicaraan saya tidak ngelantur sekarangpun saya akan membahas Daftar Isi berdasarkan Katagori Otomatis Buka-Tutup yang saya beri Judul Daftar Isi BBC :z;


    Walau model yang ini sudah cukup lama, tapi tak ada salahnya saya bagikan sama kawan setia pengunjung BlogBego Creation ini yang belum mengetahui dan ingin mencobanya :w;


    Setelah kawan melihat Demonya, sekarang mari kita ke Cara Membuatnya :

    • Masuk Account Blogger dengan ID kawan
    • Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML / JavaScript
    • Copas Script berikut kedalamnya
    <style type="text/css">
    #daftar-Bbc{
    font-family:"Helvetica", Tahoma, Verdana;
    font-size:13px;
    font-weight:bold;
    color:#FF0;
    background:-moz-linear-gradient(top,#FFF,#000);background:-webkit-gradient(linear,left top,right bottom,from(#000),to(#FFF));
    padding:5px 0;
    border: 1px solid #0FF;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 0px 0px; -moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 20px 20px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 20px 20px; border-top-right-radius: 0px 0px;border-bottom-right-radius: 20px 20px;">
    }
    .daftar-label{
    background:-moz-linear-gradient(top,#236C90,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#236C90),to(#FFF));
    font-weight:bold;
    font-size: 13px;
    font-family: segoe Print;
    line-height:1.4em;
    text-transform: uppercase;
    overflow:hidden;
    white-space:nowrap;
    vertical-align: baseline;
    margin: 1px 5px;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    padding: 3px 10px;
    color: #FFF;
    border:1px solid #2F94BA;
    }
    .daftar-label:hover{
    background:#7CA9C0;
    color:#FF0;
    text-shadow: 2px 2px 2px #036;
    font-size: 13px;
    border: 1px solid #FFF;-moz-border-radius:10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px;
    }
    .daftar-daf ol{
    margin:0 0 0 35px !important;
    padding:0 !important;
    }
    .daftar-daf ol li{
    background-color:#C9E9F4 -moz-linear-gradient(top,#95CAFF,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#95CAFF),to(#FFF));
    line-height:1.5em;
    margin:0 5px !important;
    padding: 3px;
    white-space:nowrap;
    text-align:left;
    border:1px solid #339DC6;
    }
    .daftar-daf ol li a{
    text-decoration: none !important;
    color:#333; !important;
    display:block;
    font-size: 13px;
    padding:0 0 0 10px;
    }
    .daftar-daf ol li a:hover{
    background:#7CA9C0;
    border: 0px #FFF solid;-moz-border-radius:15px;-khtml-border-radius: 15px;-webkit-border-radius: 15px;
    padding: 0 5px;
    color: #FFF;
    font-size: 13px;
    text-shadow: 2px 2px 2px #F00;
    }
    </style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://sites.google.com/site/blogbegocreation/javascript/Bbc.js" type="text/javascript"></script>
    <script src="http://Nama Blog Kawan.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
    • Ganti teks yang berwarna merah [Nama Blog Kawan] dengan URL Blog Kawan :q;
    • Simpan Blog kawan dan lihat hasilnya



    Read more ...

    Tuesday, 14 August 2012

    Tampilkan Rating Bintang di Blog

    Setelah sebelumnya saya berbagi Tampilkan Image Author di Pencarian G+ tanpa harus Profil Blogger beralih ke Profil G+ :z; dan untuk melanjutkan G+ saya berbagi lagi dengan kawan Cara Menampilkan Rating Bintang pada Blog, apa itu Rating, apa gunanya / tujuannya dan lain sebagainya kalau kawan ada bertanya - jawaban saya sangat simple biar Blog kelihatan menarik, karena saat saya selusuri di mbah Google cara pemasangan Ranting Bintang [Rating Rich Snippet Review] pada umumnya dipasang secara manual dibawah posting setiap kali kita posting, sedangkan posting lama perlu diadakan setting ulang supaya bisa menampilkan Rating [Ribet dan membosankan],  :r;  
    Menurut pemikiran saya pribadi Rating seharusnya otomatis akan kelihatan berdasarkan banyaknya pengunjung yang memberikan penilaian seperti pada Alexa yang berisi 5 tanda bintang [1, 1.5 sampai 5], tapi kenyataannya para Blogger mengisinya diatas 4 - 4.5 dan 5 bintang, belum pernah saya lihat memakai 1 Bintang [termasuk saya juga] kwek kwek :q;
    Kalau kawan ingin memasang Rating Bintang di Blog dengan cara seperti saya ini [otomatis] tanpa perlu Ribet setiap posting tambahkan Rating Bintang :q;
    Caranya :
    • Masuk Account Blogger dengan ID kawan
    • Pada Dasbor pilih Template - Edit HTML - Lanjutkan
    • Beri tanda check  disamping 
    <div><div itemscope=''itemtype='http://data-vocabulary.org/Review'>
      • Tambahkan </div></div> sebelum tag </body> 
      • Selanjutnya cari <h1 class='post-title entry-title'> atau Script Judul Postingan kawan [untuk cepatnya pencarian kawan pakai Ctrl+F dan ketik <data:post.body/> terus scroll sedikit keatas perhatikan gambar berikut 
      Keterangan Gambar :
      <h1 class='post-title entry-title'> karena struktur Template berbeda-beda khusus h1 bisa h2 atau h3
      - Kode yang berlatar belakang warna biru <span itemprop='itemreviewed'><span itemprop='description'> letakkan diatas <h1 class='post-title entry-title'> merupakan tambahan yang selanjutnya ditutup dengan </span></span> setelah </h1> kwek kwek kwek ribet ya kawan, jangan khawatir saya kasi contoh
      <span itemprop='itemreviewed'><span itemprop='description'>
      <h1 class='post-title entry-title'>
           <b:if cond='data:post.link'>
             <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
           <b:else/>
              <b:if cond='data:post.url'>
                <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
           </b:if>
            </h1>
      </span></span>
      </b:if>
      <div class='post-header-line-1'/>
      <div class='post-body'>
      • Berikutnya cari  <span class='fn'><data:post.author/></span> atau pada Template saya kodenya seperti <div class='vcard' id='hcard-En sin' style='display: inline;'><span class='fn'><data:post.author/></span></div> tambahkan atau selipkan <span itemprop='reviewer'> sebelum  <data:post.author/></span></span> jadinya sebagai berikut

      <span class='fn'><span itemprop='reviewer'><data:post.author/></span></span>

      atau punya saya seperti 

      <div class='vcard' id='hcard-En sin' style='display: inline;'><span class='fn'><span itemprop='reviewer'><data:post.author/></span></span></div>

      • Selanjutnya untuk Pemasangan Kode Rating Bintang, kawan cari <data:post.body/>, seandainya ada  lebih dari 2 [karena pakai Readmore], kawan pilih yang pertama atau setelah Readmore [baca selengkapnya] 
      Rating: <span itemprop="rating">4.5</span>
      atau bisa yang lebih lengkap seperti berikut:

       <p>Description: <span itemprop="description"><data:post.title/></span> - 
      Rating: <span itemprop="rating">4.5</span></p> 
      <p>Reviewer: <span itemprop="reviewer"><data:post.author/></span> - 
      Itemreviewed: <span itemprop="itemreviewed"><data:post.title/></span></p> 


      Penjelasan » 4.5  seperti penjelasan saya diatas bisa dirubah antara 1 - 5 [1. - 1.5 - 2. - 2.5 sampai maksimal 5.]  INGAT :  jangan lebih dari 5 !!! :y;


      • Simpan Template dan cek pada Google Rich Snippet Testing dengan memasukkan URL salah satu Artikel / Postingan kawan yang ada pada kotak disamping Review atas

      contoh hasilnya »


      • Seandainya kawan hasilnya belum seperti Gambar diatas ini coba cek ulang, mungkin ada kesalahan menempatkan kode 

      Read more ...

      Sunday, 12 August 2012

      Tampilkan Image Author di Pencarian G+

      Dilema para Blogger yang mempergunakan modem USB [baca : Internet Unlimated] sangat terasa kalau beralih ke G+ [Google Plus] karena semua Profil Blogger diwajibkan beralih ke G+ yang berisi banyak fasilitas terkandung didalamnya, menyebabkan menjadi sangat berat :y;  salah satu fasilitasnya adalah agar Image / Gambar Author bisa tampil di Pencarian G+ :w; 
      Cara menampilkan Image Author di Pencarian G+ tanpa beralih ke Profil G+ [kawan tetap memakai Profil Blogger], saya bagikan dengan Gambar dan penjelasan seperlunya :
      • Masuk Account Blogger dengan ID kawan 


      • Coba masuk ke Google Rich Snippet - Masukkan URL salah satu postingan kawan pada kotak yang atas terus tekan Preview, maka hasilnya seperti dibawah ini

      Nah itulah salah satu kelebihan dari G+
      Sekarang mari kita mencoba menampilkan Image Author di Pencarian G+ dengan Cara beda dan sangat simple, silahkan baca dan simak kelnjutannya :

      • Kawan diminta buka Email untuk meng-verifikasi 
      • Setelah kawan meng-Klik Verifikasi, selanjutnya akan dibawa ke Frofil G+ 
      • Disamping Foto Profil kawan pilih [Klik] Edit Profil - terus scroll ke bawah sampai pada Kontributor untuk - arahkan mouse dan backgroundnya akan berubah dan silahkan Klik untuk Edit dan akan muncul PopUp 
      • Silahkan isi kotak Label untuk Nama Blog kawan dan URLnya, kalau sudah selesai jangan lupa Klik Simpan


      Sekarang beralih ke Dasbor dan pilih Template - Edit HTML - Lanjutkan
      • Cari ]]></b:skin>
      • Copas Kode berikut dibawahnya <link href='URL G+ Anda' rel='author'/>
      • Ganti teks yang berwarna merah itu dengan ID Google Plus Blog kawan [yang di copy tadi]
      Contohnya :
      • Simpan Template kawan
      Sampai disini sudah selesai :x; silahkan cek kembali di Google Rich Snippet 



      Kalau hasilnya sudah sepeti Gambar itu berarti kawan sudah sukses menampilkan Image Author di Pencarian, cuma untuk melihat hasil riilnya tidak bisa sesegera mungkin :w; 
      Mudah-mudahan ada manfaatnya untuk kawan dan selamat mencoba


      Read more ...

      Friday, 10 August 2012

      Cara Pasang Nomor Halaman Navigasi

      Pada umumnya dibawah Postingan Blog ada Link Previous - Home - Next dan ada juga yang berupa Image / Tanda atau memakai Nomor [angka] yang fungsinya tak perlu saya jelaskan karena semua kawan Blogger sudah mengetahuinya, tapi sekarang yang akan saya bahas adalah Cara Pasang Nomor Halaman Navigasi yang bahasanya mbah Google kurang lebih adalah Numbered Page Navigation,  contohnya bisa kawan lihat di Blog saya ini :z;


      Cara Pasangnya sebagai berikut :

      • Masuk Account Blogger dengan ID kawan
      • Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML / JavaScript
      • Copas script berikut kedalamnya

      <!-- Numbered Page Navigation Widget For Blogger oleh BlogBego @ http://blogbego-creation.blogspot.com -->
      <style type='text/css'>
      #blog-pager{
      font-size:normal;
      padding:10px 0;
      clear:both;
      }
      .showpageArea{
      font-family:verdana,arial,helvetica;
      color:#000;
      font-size:11px;
      margin:10px;
      }
      .showpageArea a{
      color:#fff;
      }
      .showpageNum a{
      padding:3px 8px;
      margin:0 1px;
      text-decoration:none;
      background:#FFF;
      border: 1px solid #999; -webkit-border-radius: 3px; -moz-border-radius:  3px; border-radius:3px;
      }
      .showpageNum a:hover{
      background: #3b679e; background: -moz-linear-gradient(top, #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca),  color-stop(100%,#7db9e8)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#3b679e&#39;, endColorstr=&#39;#7db9e8&#39;,GradientType=0 );
      border: 1px solid #333; -webkit-border-radius: 3px; -moz-border-radius:  3px; border-radius:3px;
      }
      .showpagePoint{
      color:#fff;
      padding: 4px 8px;
      margin: 0 5px;
      font-weight:700;
      background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#aebcbf&#39;, endColorstr=&#39;#0a0809&#39;,GradientType=0 );
      text-decoration:none;
      border: 2px solid #F00; -webkit-border-radius: 15px; -moz-border-radius:  15px; border-radius:15px;
      }
      .showpageOf{
      background:#95CAFF;
      border: 1px solid #333; -webkit-border-radius: 3px; -moz-border-radius:  3px; border-radius:3px;
      margin: 0 5px 0 0;
      padding:3px 8px;
      }
      </style>
      <script style='text/javascript'>
          var numshowpage=4;
          var postperpage =5;
          var upPageWord=&quot;Previous&quot;;
          var downPageWord=&quot;Next&quot;;
          var home_page=&quot;/&quot;;
          var urlactivepage=location.href;
      </script>
      <script src='https://sites.google.com/site/blogbegocreation/javascript/blogbego_pnavi.js' style='text/javascript'/>
      <!-- Numbered Page Navigation Widget For Blogger oleh BlogBego @ http://blogbego-creation.blogspot.com -->

      Kalau kawan ingin menyimpannya di Template 
      Caranya sebagai berikut :
      • Pada Dasbor pilih Template
      • Beri tanda check disamping  
      • Cari <b:includable id='shareButtons' var='post'> atau <data:homeMsg/> yang pertama sebelum </b:includable> selengkapnya kurang lebih sebagai berikut :
       <b:if cond='data:newerPageUrl'>
              <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
            </b:if>
          </b:if>
        </div>
        <div class='clear'/>

      SIMPAN DISINI SCRIPTNYA 

      </b:includable>
      <b:includable id='shareButtons' var='post'>

      Simpan Template kawan


      Read more ...

      Wednesday, 8 August 2012

      Gratis Blogger Template Main Kolom

      Blogger Template Main Kolom adalah Template Minima Flatform Blogger / Blogspot  yang saya modifikasi lagi supaya mengikuti perkembangan dan selera Blogger yang berkecimpung di Blogspot, ini merupakan Template pertama yang saya publish atau bagikan secara Gratis untuk kawan yang berminat mencoba, memakai pada Blog kawan dan untuk kawan Blogger Senior yang sudah ahli menciptakan Template saya mohon bimbingannya :z;








      Nama Template : Main Kolom
      Flatform : Blogger / Blogspot
      Nama Author & URL : Blogger Edan 

      Deskripsi : Template Blogger Main Kolom adalah Blogger Template Gratis kalau kawan ingin mencoba Template Minima yang sudah dimodifikasi ini untuk Blog kawan silahkan, Gratis..... Blogger Template Main Kolom ini berisi beberapa fitur yang menarik seperti Menu Navigasi, Readmore Otomatis, Relatif Post dan lain sebagainya, membuat tampilan Blog dengan kesan beda dan seperti profesional.

      Lisensi
      Blogger Template Main Kolom merupakan  Blogger Template Gratis  yang bisa kawan  pergunakan secara cuma-cuma, namun yang harus kawan patuhi adalah tidak boleh mengahapus Credit Link ke Desainer  Template yang ada dibagian footer [kanan bawah] Template.




      Read more ...

      Monday, 6 August 2012

      Cara Follow Blog dari Dasbor

      Mungkin kawan saat Blogwalking ketemu Blog / Site yang menarik perhatian dan disana widget follower sudah ada pasti kawan gampang untuk mengikutinya dan seandainya pada Blog tersebut tidak tersedia widget Followernya sedangkan kawan ingin sebagai pengikut, bagaimana caranya ?! :w; 
      Melanjutkan Dua postingan saya sebelumnya tentang Hapus-menghapus Follower Blog, yang akan saya bahas sekarang masih tetap tentang Follower Blog yaitu "Cara Follow Blog orang dari Dasbor" :z; 
      Caranya seperti dibawah :
      • Masuk Account Blogger dengan ID kawan
      • Pada Dasbor pilih lihat Gambar / Image yang saya beri merah

      • Pada Dasbor Baru kalau kawan pilih kata Tambah maka yang tampil seperti Image berikut
      • Kalau kawan pilih icon Kelola Daftar Bacaan dan dilanjutkan pilih kata Tambah perhatikan Gambar / Image berikut


      • Setelah kawan memasukkan URL / Link Blog yang akan kawan ikuti



      • Setelah kawan pilih Ikuti berarti tinggal selangkah lagi yaitu sudah selesai 
      Kesimpulan :
      • Avatar kawan tidak akan kelihatan karena yang mempunyai Blog tidak menyiapkan widget Follow, dan seandainya di kemudian hari yang punya Blog memasang widget Follow baru akan sadar bahwa Blognya mempunyai Pengikut :r; 
      • Follower [Join This Site] hampir sama dengan Email Berlangganan, [sama-sama menerima kiriman  Update Artikel Terbaru dari Blog yang kita ikuti], cuma bedanya pada Email dan Dasbor Blog kita, 
      • Kelebihan Join This Site dengan Berlangganan lewat Email [misal yang punya Blog menyiapkan Widget Join This Site] maka Avatar kita akan terpampang di sana. :z;





      Read more ...

      Friday, 3 August 2012

      Cara Menghapus Pengikut Blog......

      Seperti postingan saya sebelumnya tentang Cara Menghapus Follower Blog yang mungkin ada sedikit mis-Komunikasi penyampaian, maksud saya "Kita berhenti mengikuti Blog orang lain" :w; sekarang yang akan saya bahas kebalikannya yaitu "Meng-Blok Follower Blog atau Menghapus Pengikut Blog Kita" 
      Kalau ada kawan yang bertanya mengapa Pengikut Blog kita dihapus...... ?! :y; 
      Seperti apa yang saya sampaikan sebelumnya Follower Blog banyak kepentingan disana, seperti Fotonya kurang senonoh, tidak sopan atau Link Blognya [Blog-x] dan lain sebagainya. :z; 
      Pada penyampaian saya sekarang ini secara Image / Gambar, Caranya seperti berikut :
      • Masuk Account Blogger dengan ID kawan 
      • Pada Dasbor pilih Angka [Jumlah Pengikut]

      Dasbor Blogger Lama


      Dasbor Blogger Baru
      • Selanjutkan akan tampil Pengikut Blog dan pilih yang akan dihapus

      • Berikut akan kelihatan Pengikut Blog yang kita pilih tadi 
      • Image kiri pilih Block this user 
      • Akan keluar Image kanan - pilih Block
      Pilihan Menghapus

      • Sampai disini penghapusan Pengikut Blog sudah selesai
      • Seandainya kawan ingin menghapus yang lainnya lakukan seperti dari awal tadi
      • Kalau penghapusan sudah selesai, pilih Dasbor untuk kembali

      Pengikut Blog
      Nah cukup mudah bukan !!!
      Pesan saya : 
      Penghapusan Pengikut / Follower agar seselektif mungkin
      Contoh penghapusan yang saya lakukan karena itu [Blog-x]


      Read more ...

      Thursday, 2 August 2012

      Cara Menghapus Follower Blog

      Kalau berbicara mengenai Blog, sudah pasti tidak terlepas dari Posting / Artikel, Iklan Sponsor / Image / Banner, Chatt Box [CBox, Shoutmix dll] Follow / Pengikut dan lain sebagainya :r; 
      Sekarang saya akan berbagi dengan kawan khusus tentang Follow / Pengikut Blog / Teman Blogger :w; yang pada umumnya keinginan kawan kita itu berbeda-beda kepentingan [ada yang sekedar mengikuti Blog kita supaya kita senang], tapi sebenarnya Blogger tersebut ada keinginan tertentu misalnya ingin mendapatkan Backlink atau sebaliknya menaruh Link SPAM di Blog kita, ini hanya ilustrasi saja :y;
      Kembali kepokok Artikel tentang Follow Blog, sudah pasti Blog yang kita ikuti kemungkinan permintaan kawan Blogger lewat Komentar, Chatt dll [misalnya Follow saya] yang selanjutnya Blog tersebut ada yang masih jalan atau sebaliknya Blog yang sudah ditinggalkan oleh pemiliknya [tidak diurus] ini yang menjadi masalah untuk Blog kita. :z;
      Cara mengatasi masalah ini satu-satunya jalan dengan menghapus / berhenti mengikuti Blog tersebut, Untuk jelasnya saya tampilkan dengan gambar-gambar :


      • Masuk Account Blogger dengan ID kawan
      • Pada Dasbor Pilih - Lihat Image

      • Pada Daftar Follow tentukan pilihan yang akan dihapus


      • Selanjutnya akan muncul Tab Windows berikut 


      • Image berikut diminta konfirmasi tindak lanjut


      • Penghapusan sudah selesai dan kawan akan dibawa kembali ke Daftar Follow
      • Lakukan hal yang sama untuk menghapus Follow yang lain


      Read more ...

      Tuesday, 31 July 2012

      Slide Carousel untuk Daftar Isi

      Cara Membuat Animasi Daftar Isi Otomatis yang pernah saya posting disini dan disini yang Demonya disini, yang kalau dipraktekkan hasilnya selalu gagal [atau kemungkinan diperlukan Template khusus] tapi kawan tak usah berkecil hati karena saya sudah menemukan Cara Membuat Slider Carousel Otomatis Berdasarkan Label yang modelnya hampir sama dengan Animasi Daftar Isi Otomatis karena sudah saya modifikasi dari Berdasarkan Label menjadi Daftar Isi yang model tampilannya seperti Image berikut :

      Untuk Demonya kawan bisa lihat  
      Demo

      Setelah kawan melihat Demonya, mari kita langsung ke Cara Membuatnya
      • Masuk Account Blogger dengan ID kawan
      • Pada Dasbor pilih Template - Edit HTML - Lanjutkan 
      • Cari tag ]]></b:skin>
      • Copas Script berikut diatas ]]></b:skin>
      #bbccarousel{
      width: 980px;
      height:125px;
      border-bottom:1px solid #ccc;
      position:relative;
      display:block;
      background:#5599e6;
      margin-bottom:8px;
      }
      #bbccarousel h3{
      color:#555;margin:2px;
      }
      #bbccarousel .container{
      position:absolute;left:24px;
      width:930px;
      height:125px;
      overflow:hidden;
      }
      #bbccarousel .thumb{float:left;margin-right:5px;}
      #bbccarousel #previous_button{
      position:absolute;
      width:24px;height:125px;
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNYjvVzbkRd1s5mtagbmYC-GvDBwHLXgCA4XhOnx7Uzr5xal0UMlJiJiwAfjdAbxkYtr9yD9vWWZTaMyTGWoHzMMEoF9RDK9nPaMf94qkFmf9I4goD4WpvLAxZmBoEWNx8bMHuIYNwvP63/s1600/previous.png) center;z-index:100;cursor:pointer;}
      #bbccarousel #next_button{
      position:absolute; right:0;
      width:24px;height:125px;
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1DrxW11PvxoLCF7E6bLGik1nSCZB8gxIL_2jPZck5KEpWNKWec6pxkEM3P_4FElSQU-sUdpfQe4exBP00Bccos9I9uiEDmQtDcmOlbmV5EYZRsjJxeJFK4N_duX-O2h4xZkcCdJ1aPZF6/s1600/next.png) center;z-index:100;cursor:pointer;}
      #bbccarousel #next_button:hover,#bbccarousel .thumb:hover,#bbccarousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
      #bbccarousel ul{
      width:100000px;
      position:relative;
      margin-top:10px;
      }
      #bbccarousel ul li{
      background:#ebebeb;
      display:inline;
      float:left;text-align:left;
      font:bold 11px Arial;
      border:0px solid #ccc;
      width:212px;
      height:90px;
      margin:0 2px 20px 6px;
      padding:6px;
      }
      #bbccarousel ul li a.slider_title{
      color:#222;
      display:block;
      margin-top:0;
      padding-top:0;
      }
      #bbccarousel ul li a.slider_title:hover{color:#1b5d97}
      #bbccarousel a img{
      display:block;
      background:#fff;
      margin-top:0;
      }

      • Selanjutnya Copas script berikut dibawah ]]></b:skin> atau diatas </head> 
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
      <script src='https://sites.google.com/site/blogbegocreation/javascript/bbccarousel.js' type='text/javascript'/>
      <script type='text/javascript'>
      //<![CDATA[
      imgr = new Array();
      imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAH9dy09Chpwjh4oO5HUA3kSET13uhcNqyAHmHQjR17pSl0mAxFag3tC8zpkQiCxeNs5XNnjQzNDmQMfuiQMJyiDWdGV5T6S3oO6ibNCTM9NV6Fmd-nkhC7Nk-czJfFN120BqCLvHvKv0/s1600/no+image.jpg";
      showRandomImg = true;
      aBold = true;
      summaryPost = 140;
      summaryTitle = 25;
      numposts1 = 50;
      function removeHtmlTag(strx,chop){
      var s = strx.split("<");
      for(var i=0;i<s.length;i++){
      if(s[i].indexOf(">")!=-1){
      s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
      }
      }
      s = s.join("");
      s = s.substring(0,chop-1);
      return s;
      }
      function showrecentposts(json) {
      j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
      img = new Array();
      document.write('<ul>');
      for (var i = 0; i < numposts1; i++) {
      var entry = json.feed.entry[i];
      var posttitle = entry.title.$t;
      var pcm;
      var posturl;
      if (i == json.feed.entry.length) break;
      for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
      posturl = entry.link[k].href;
      break;
      }
      }
      for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
      pcm = entry.link[k].title.split(" ")[0];
      break;
      }
      }
      if ("content" in entry) {
      var postcontent = entry.content.$t;}
      else
      if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
      else var postcontent = "";
      postdate = entry.published.$t;
      if(j>imgr.length-1) j=0;
      img[i] = imgr[j];
      s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
      if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
      //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
      var month = [1,2,3,4,5,6,7,8,9,10,11,12];
      var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Ags","Sep","Okt","Nov","Des"];
      var day = postdate.split("-")[2].substring(0,2);
      var m = postdate.split("-")[1];
      var y = postdate.split("-")[0];
      for(var u2=0;u2<month.length;u2++){
      if(parseInt(m)==month[u2]) {
      m = month2[u2] ; break;
      }
      }
      var daystr = day+ ' ' + m + ' ' + y ;
      var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h3>'+daystr+'</h3><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
      document.write(trtd);
      j++;
      }
      document.write('</ul>');
      }
      //]]>
      </script>

      • Simpan Template kawan
      • Teks yang saya beri warna merah, seandainya pada Template kawan sudah berisi walaupun serialnya berbeda - bisa dihilangkan, cukup pasang satu saja
      • Teks yang saya beri warna Kuning adalah jumlah Posting yang dipakai Slider, bisa dirubah
      Langkah terakhir adalah memanggil Slide, disini kawan ada dua cara » Langsung di Template dan » Tambah Gadget [INGAT Pilih salah satu]
      Kalau langsung pada Template : 
      • Beri tanda check disamping 
      • <div id='main-wrapper'> 
      • Copas script berikut diatasnya [sebelumnya di Parse dulu]
      Kalau kawan ingin menaruhnya di Gadget :
      • Pada Tata Letak pilih Tambah Gadget - HTML / JavaScript
      • Copas script berikut kedalamnya
      <div id='bbccarousel'>
      <div id='previous_button'/>
      <div class='container'>
      <script>
      document.write(" <script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
      </script>      
      <div class='clear'/></div>
      <div id='next_button'/></div>
      <script type='text/javascript'>
      (function($) {     $(document).ready(function(){
      $("#bbccarousel .container").bbcCarousel({
          auto:4000,
          scroll: 3,
          speed: 800,  
          visible: 4,
          start: 1,
          circular: true,
          btnPrev: "#previous_button",
          btnNext: "#next_button",
          });
          })})(jQuery)  
      </script></div></div></div>

      • Simpan Kembali Template / Blog kawan

      Kelebihan Slider Carousel untuk Daftar Isi ini selain bisa dipanggil lewat Gadget juga bisa dipakai untuk Slider berdasarkan Label / Katagori :q; 

      Caranya sebagai berikut :
      misalnya kawan ingin Slide dengan Label tutorial maka 
      • numposts1 =50, bisa kawan sesuaikan dengan jumlah Label yang ingin dipakai Slide 
      • Tambahkan  label1="tutorial", dibawah  numposts1 = 50; 
      • Ganti  <script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\">  dengan  <script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\">
      • Simpan Template kawan


      Read more ...

      Sunday, 29 July 2012

      Slide Daftar Isi Lainnya

      Kawan masih ingat dengan Artikel saya tentang Slide Daftar Isi :z; kalau ingin membacanya dipersilahkan dulu, karena yang sekarang ini bentuk dan modelnya sama cuma ini mempunyai kelebihan tersendiri pokoknya Keren [bagi saya pribadi lho] karena yang ini bisa diatur misalnya ukuran, warna huruf, untuk lihat Demonya disini
      SCREENSHOT

      Cara membuatnya sebagai berikut :
      • Masuk Account Blogger dengan ID kawan
      • Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML / JavaScript
      • Copas Script berikut kedalamnya
      <style type="text/css">
      .gfg-root {
      width : 100%;
      height : auto;
      position : relative;
      overflow : hidden;
      text-align : center;
      font-family: "Arial", sans-serif;
      font-size: 14px;
      border: 1px solid #000;
      }
      .gfg-title {
      font-size: 20px;
      font-weight : bold;
      font-family: Segoe Print;
      color : #FF0;
      text-shadow: 1px 1px 1px #F00;
      background-color: #000;
      line-height : 1.4em;
      overflow : hidden;
      white-space : nowrap;
      padding: 5px;
      }
      .gfg-title a {
      color : #3366cc;
      }
      .gfg-subtitle {
      font-size: 15px;
      font-weight : bold;
      color : #3366cc;
      background-color: #E5ECF9;
      line-height : 1.4em;
      overflow : hidden;
      white-space : nowrap;
      margin-right: 5px;
      float: left;
      }
      .gfg-subtitle a {
      color : #3366cc;
      display:none !important;
      }
      .gfg-entry {
      background-color : white;
      width : 100%;
      height : 6.9em;
      position : relative;
      overflow : hidden;
      text-align : left;
      margin-top: 3px;
      padding: 5px;
      }
      /* To allow correct behavior for overlay */
      .gfg-root .gfg-entry .gf-result {
      position : relative;
      background-color : white;
      width : 480px;
      height : 100%;
      padding-left : 10px;
      padding-right : 10px;
      float: left;
      margin-right: 10px;
      }
      .gfg-list {
      position : relative;
      overflow : hidden;
      text-align : left;
      margin-bottom : 5px;
      display:none !important;
      }
      .gfg-listentry {
      line-height : 1.5em;
      overflow : hidden;
      white-space : nowrap;
      text-overflow : ellipsis;
      -o-text-overflow : ellipsis;
      padding-left : 15px;
      padding-right : 10px;
      margin-left : 5px;
      margin-right : 10px;
      }
      .gfg-listentry-odd {
      background-color : #F6F6F6;
      }
      .gfg-listentry-even {
      }
      .gfg-listentry-highlight {
      background-image : url('garrow.gif');
      background-repeat: no-repeat;
      background-position : center left;
      }
      /*
      * FeedControl customizations.
      */
      .gfg-root .gfg-entry .gf-result .gf-title {
      font-size: 24px;
      line-height : 1.2em;
      overflow : hidden;
      white-space : nowrap;
      text-overflow : ellipsis;
      -o-text-overflow : ellipsis;
      margin: 0 auto 2px;
      }
      .gfg-root .gfg-entry .gf-result .gf-snippet {
      height : 3.8em;
      color: #000000;
      margin-top : 3px;
      }
      /*
      * Easy way to get vertical mode, applicable via js options to gadget.
      */
      .gfg-vertical-container {
      position : relative;
      }
      .gfg-vertical-root {
      height : 1.5em;
      _height : 100%;
      position : relative;
      white-space : nowrap;
      overflow : hidden;
      text-align : center;
      font-family: "Arial", sans-serif;
      font-size: 13px;
      border: 1px solid #AAAAAA;
      padding : 5px;
      margin-right : 80px;
      }
      .gfg-vertical-root .gfg-title {
      font-weight : bold;
      background-color: #FFFFFF;
      line-height : 1.5em;
      overflow : hidden;
      white-space : nowrap;
      float : left;
      padding-left : 10px;
      padding-right : 12px;
      border-right: 1px solid #AAAAAA;
      }
      .gfg-vertical-root .gfg-title a {
      color : #444444;
      text-decoration : none;
      }
      .gfg-vertical-root .gfg-entry {
      width : auto;
      height : 1.5em;
      position : relative;
      overflow : hidden;
      text-align : left;
      margin-top : 0px;
      margin-left : 0px;
      padding-left : 10px;
      }
      /* To allow correct behavior for overlay */
      .gfg-vertical-root .gfg-entry .gf-result {
      position : relative;
      background-color : white;
      width : 100%;
      height : 100%;
      line-height : 1.5em;
      overflow : hidden;
      white-space : nowrap;
      }
      .gfg-vertical-root .gfg-list {
      display : none;
      }
      /*
      * FeedControl customizations.
      */
      .gfg-vertical-root .gfg-entry .gf-result .gf-snippet,
      .gfg-vertical-root .gfg-entry .gf-result .gf-author {
      display : none;
      }
      .gfg-vertical-root .gfg-entry .gf-result .gf-title {
      color: #0000cc;
      margin-right : 3px;
      float : left;
      }
      .gfg-vertical-root .gfg-entry .gf-result .gf-spacer {
      float : left;
      }
      .gfg-vertical-root .gfg-entry .gf-result .gf-spacer,
      .gfg-vertical-root .gfg-entry .gf-result .gf-relativePublishedDate {
      display : block;
      color: #AAAAAA;
      }
      .gfg-branding {
      white-space : nowrap;
      overflow : hidden;
      text-align : left;
      position : absolute;
      right : 0px;
      top : 0px;
      width : 80px;
      }
      .gfg-collapse-open, .gfg-collapse-closed {
      background-repeat : no-repeat;
      background-position : center;
      cursor : pointer;
      float : right;
      width : 17px;
      height : 20px;
      }
      .gfg-collapse-open {
      background-image : url('arrow_open.gif');
      }
      .gfg-collapse-closed {
      background-image : url('arrow_close.gif');
      }
      .gfg-collapse-href {
      float : left;
      }
      .clearFloat {
      clear : both;
      }
      #feedGadget {
      margin-top : 5px;
      margin-left: auto;
      margin-right: auto;
      width : 500px;
      font-size: 10px;
      color: #9CADD0;
      }
      </style>
      <noscript><a href="http://blogbego-creation.blogspot.com" target="_blank">BLOGBEGO CREATION</a></noscript>
      <script src="http://www.google.com/jsapi/?key=internal-sample"
      type="text/javascript"></script>
      <script src="https://sites.google.com/site/blogbegocreation/javascript/gfdynamicfeedcontrol.js" type="text/javascript"></script>
      <script type="text/javascript">
      function showGadget() {
      var feeds = [
      {title:'title',
      url:'http://blogbego-creation.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
      ];
      new GFdynamicFeedControl(feeds, 'feedGadget',
      {numResults : 1000, stacked : true,
      title: "BlogBego Creation Post"});
      }
      google.load("feeds", "1");
      google.setOnLoadCallback(showGadget);
      </script>
      <noscript><a href="http://blogbego-creation.blogspot.com" target="_blank">BLOGBEGO CREATION</a></noscript>
      <div id="feedGadget"><center><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRFDDgMikJ7d0r4cMhN26T-rC_NQY7qapK6siHaJgc-ht-KiduJi1ONQP7B4Vr4GBHs-c69CWmZFajxJ3-NCCC_NZGikySgFvXcwGaxwijlanBIXxmp_b-QaNE0j2OLwnDid-h0yUX3Wtf/s1600/loading+(1).gif" /></center></div>
      <div id="feedGadget"><a href="http://blogbego-creation.blogspot.com" target="_blank">widget</a>.</div>


      • Silahkan ganti teks yang saya beri warna merah sesuai URL kawan 
      • Simpan Blog kawan


      Read more ...