Background Blog dengan Warna pilihan

Kawan masih ingat dengan postingan saya yang berjudul Tool untuk mengetahui Postingan Terpopuler :q; yang pada prinsip dasarnya merubah background Blog dengan warna berbeda, begitu juga dengan postingan saya yang sekarang ini menekankan pada background yang bekerja secara manual :r; sesuai selera pengunjung dengan meng-Klik salah satu warna yang dikehendaki :z; 

untuk Demo kawan bisa lihat

Cara membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Tata Letak - Tambah Gadget 
• Pilih tanda [+] pada HTML / JavaScript
• Copas kode berikut kedalamnya

<script type="text/javascript">
    function bgChange(bg)
    {
    document.body.style.background=bg;
    }
    </script>
    <table border="1" cellspacing="5" width="100%" height="30">
    <tr> <td
    onclick="bgChange('#ffffff')" bgcolor="white">
     <td
    onclick="bgChange('#000000')" bgcolor="#000000">
     <td
    onclick="bgChange('#0000FF')" bgcolor="#0000FF">
     <td
    onclick="bgChange('#800000')" bgcolor="#800000">
     <td
    onclick="bgChange('#008000')" bgcolor="#008000">
     <td
    onclick="bgChange('#808080')" bgcolor="#808080">
     <td
    onclick="bgChange('#FFFF00')" bgcolor="#FFFF00">
     <td
    onclick="bgChange('#FF00FF')" bgcolor="#FF00FF">
     <td
    onclick="bgChange('#A6CAF0')" bgcolor="#A6CAF0">
     </td
></td
></td
></td
></td
></td
></td
></td
></td
></tr>
    </table>

Kawan bisa menambah / mengurangi elemen warna yang saya contohkan, :d; dengan cara menambahkan atau mengurangi seperti kode berikut

  <td onclick="bgChange('#A6CAF0')" bgcolor="#A6CAF0">

     </td

• Teks yang saya beri warna merah adalah kode warna silahkan disesuaikan 
• Simpan Blog kawan

Read more ...

Pasang Image disamping Judul Artikel

Selamat malam kawan-kawan yang setia mengunjungi BlogBego Creation ini, :z; mudah-mudahan kawan masih betah berkunjung kemari karena sekarang saya akan mencoba berbagi dengan kawan Cara Pasang Image disamping Judul Artikel  :q; 

Cara membuatnya :

Silahkan kawan membuat image yang ukuranya kecil dulu, selanjutnya disimpan pada hosting kawan atau ditempat kawan menyimpan file, terus ambil Link-nya :r;

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML 
• Cari dan temukan kode sebagai berikut atau yang mirip-mirip seperti itu, dikarenakan struktur Template Blogger berbeda-beda 

<a expr:href='data:post.url'><data:post.title/></a> 
<b:else/> 
atau seperti ini : 
<a expr:href='data:post.url' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/> 
atau seperti ini : 
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
     <b:else/> 


• Sisipkan Link image yang kawan buat tadi sebelum <data:post.title/></a> contohnya sebagai berikut : 
<a expr:href='data:post.url'> sisipkan disini Link image <data:post.title/></a> 
<b:else/> 
atau  
<a expr:href='data:post.url' expr:title='data:post.title' rel='bookmark'> sisipkan disini Link image <data:post.title/></a> 
 <b:else/>

Contoh jadinya :

<a expr:href='data:post.url' expr:title='data:post.title' rel='bookmark'> 

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_s-vb9692QWqa4-yZeQDYEQCUDpRRh9KZxSc6K7JxU7lZu8pWeI5gq1-n33KDmlZTVNV_zBdY9Nd3FYIw31CTSqmVbHfUxWI1T21kTLb1kjUo0MMp5aUlGP3arMp0iXvc_vkTIMZBXXo/s1600/xKopi.gif'/>&nbsp; &nbsp;<data:post.title/></a>

        <b:else/>

• Biasanya kode tersebut diatas lebih dari satu, silahkan dicoba - coba penempatannya
• &nbsp; &nbsp; untuk spasi antara image dengan Judul Artikel bisa ditambah atau dihilangkan
• Silahkan ganti  image saya tersebut dengan image yang kawan buat tadi 
• Simpan Template

Read more ...

Pesan Contact us langsung masuk Email Blogger

Postingan saya tentang Cara Membuat Contact us di Docs Google, ::q; seandainya ada pesan masuk kita hanya bisa melihatnya di Google Drive bagi kawan yang ingin mencoba membuat Contact us, Kontak kami, Hubungi saya atau apalah namanya :r; silahkan kawan baca dulu disini, karena sekarang saya akan melanjutkan postingan tersebut biar pesan masuk nantinya bisa langsung ke Email kita :z;  

Setelah Contact us tercipta atau mungkin kawan mengulang membuatnya, karena sekarang saya akan melanjutkan ke tahap kedua yaitu Mengolah Data / Pesan yang masuk 

Caranya :

• Masuk atau buka halaman Dasbor Google Drive 
• Perhatikan dibagian atas klik - Pilih Tujuan Tanggapan
• Isi tanda cek pada opsi Spreadsheet Baru dan tulisan dibawahnya bisa kawan ganti bisa tidak

Gambar-1

• Pilih button Buat dan tunggu sampai Pilih Tujuan Tanggapan berubah menjadi Lihat Tanggapan, silahkan kawan klik untuk melihat Spreadsheet Formulir Kontak Tanggapan kawan

 

Gambar-2

• Berikutnya kawan klik Alat dan pilih Editor Skrip.... 

Disini kawan akan disuguhkan halaman Proyek tak berjudul, yang bernama Kode.gs; copas javascript berikut ke dalamnya

function sendFormByEmail(e) {
  // Tentukan teks subjek/perihal yang nantinya akan muncul pada pesan masuk email setiap kali pesan baru terkirim
  var emailSubject = "PESAN BARU!";
  // Tentukan alamat email di sini atau beberapa alamat email sekaligus yang dipisahkan dengan tanda koma
  var yourEmail = "email@domain.com";
  // Masukkan kunci spreadsheet yang terhubung dengan formulir kontak ini
  // Bisa ditemukan pada URL ketika Anda melihat spreadsheet tersebut
  var docKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
  // Jika Anda menginginkan skrip ini mengirim data secara otomatis ke semua editor sheet, set nilainya menjadi `1`
  // Jika Anda hanya ingin mengirimkan data ke `yourEmail`, set nilainya menjadi `0`
  var useEditors = 1;
  // Apakah Anda telah menambahkan kolom yang ternyata tidak Anda gunakan pada formulir?
  // Jika ya, set nilai ini ke nomor urut kolom terakhir yang Anda tambahkan pada spreadsheet.
  // Sebagai contoh: Kolom `C` ada pada nomor urut ke 3
  var extraColumns = 0;
  if (useEditors) {
    var editors = DocsList.getFileById(docKey).getEditors();
    var notify = (editors) ? editors.join(',') : yourEmail;
  } else {
    var notify = yourEmail;
  }
  // Variabel `e` memegang semua data di dalam array.
  // Loop semua data di dalam array dan sisipkan nilainya ke pesan.
  var s = SpreadsheetApp.getActive().getSheetByName("Data1");
  if (extraColumns) {
    var headers = s.getRange(1, 1, 1, extraColumns).getValues()[0];
  } else {
    var headers = s.getRange(1, 1, 1, s.getLastColumn()).getValues()[0];
    var message = "";
  }
  for (var i in headers) {
    message += headers[i] + ' = ' + e.values[i].toString() + '\n';
  }
  MailApp.sendEmail(notify, emailSubject, message);
}

  // Script oleh : DTE

silahkan ganti teks yang saya beri warna merah dengan milik kawan, khusus untuk var docKey bisa didapat pada jendela penelusuran [perhatikan Gambar-2 diatas]
contohnya :
https://docs.google.com/spreadsheet/ccc?key=0AmHOiaoeYjG2dDRONFhPN0ZoeW92N2FWb0tGNXEybVE#gid=0

Tetap pada halaman Spreadsheet dan lihat kebawah teks  Respons Formulir  spasinya dihilangkan

Halaman Spreadsheet bagian bawah

• Selanjutnya klik Sumber Daya - Pemicu proyek saat ini 
• Klik pada tautan No triggers set up. Click here to add one now 

• Klik Save setelah kawan mengadakan perubahan seperlunya, Perhatikan Image berikut 

• Terakhir akan muncul pesan authorisasi pilih Terima

Silahkan kawan mencoba Contact us yang baru dibuat, jika pesan sudah masuk di Email berarti kawan sudah berhasil, 

Read more ...

Perpendek Komentar dengan Slide Panel

Postingan sekarang ini saya dapatkan pada master  Taufik Nurrohman pada Blognya DTE yaitu Cara Memperpendek Komentar dengan Slide Panel :q; maksudnya Formulir dan Komentar yang ada di Blog   akan menjadi Slide Buka Tutup dan akan menutup dengan sendirinya setelah beberapa detik :r; 

Oke langsung saja ke Cara membuatnya 

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML
• Sebaiknya simpan Template kawan dulu
• Temukan Tag ]]></b:skin> 
• Kalau sudah ketemu Hapus atau dengan script berikut :

a.openpanel {display:block;clear:both;width:auto;padding:0px 0px;text-align:center;
font-weight:bold;line-height:32px;background-color:#000;color:white;text-decoration:none;margin:0px 0px;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);box-shadow:0px 1px 1px rgba(0,0,0,0.2);
position:relative;}
a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px;right: 15px;border:6px solid transparent;border-top-color:white;}
a.openpanel.active {background-color:#900;}
a.openpanel.active em {top:6px;border-color:transparent transparent white transparent;}
div.paneline {height:0px;border-bottom:4px solid #800;}
div.hompiPanel {padding:10px 20px 20px;-webkit-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);-moz-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);margin:0px 0px !important;}
]]></b:skin><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
    openPanelText = "Poskan Komentar",
    closePanelText = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed = 400;
//]]>
</script>
<script src='http://dte-project.googlecode.com/svn/trunk/blogger-slide-panel-comments.js'></script>

• Seandainya pada Template kawan sudah berisi jquery sejenis,  yang saya beri warna merah bisa kawan hilangkan atau hapus 
• Simpan Template kawan

Read more ...

Tool untuk Mengetahui Postingan ter-Populer

Kali ini saya akan berbagi dengan kawan pengunjung setia BlogBego Creation Tool untuk mengetahui Postingan yang paling sering dilihat :z; dengan kata lain Populer, maksudnya postingan Blog kita yang dilihat akan berbeda warnanya dengan latar belakangnya aslinya :q; maaf bahasanya sedikit Ribet

Oke langsung saja ke cara membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML 
• Sebaiknya simpan Template kawan dulu 

Ada 2 [dua] Caranya, silahkan pilih salah satu

Cara Pertama 

• Copas script berikut tepat diatas </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var bgU=location.href;bgPP=document.getElementById('PopularPosts1');bgTN=bgPP.getElementsByTagName('a');if(bgTN){bgH=bgTN.item(0).href;if(bgU.indexOf(bgH)!=-1){document.write('<style type="text/css">body{background:#ff00ff!important}</style>')}}
//]]>
</script>
</b:if>

Cara Kedua

• Copas script berikut diatas <b:if cond='data:showThumbnails == &quot;false&quot;'>

<b:if cond='data:post.href == data:blog.url'>
<style type='text/css'>body{background:#ff00ff!important}</style>
</b:if>

• Teks yang berwarna violet adalah warna latar belakang, silahkan disesuaikan asal berbeda dengan warna latar belakang Blog kawan :r; 
• Simpan Template kawan

        

Read more ...

Cara Membuat Artikel Terkait berisi Thumbnail

Seharusnya Cara Membuat Artikel Terkait berisi Thumbnail ini sudah lama saya bagikan biar ngumpul dengan Cara Membuat Artikel Terkait lainnya :y; tapi dasar saya sedikit pelupa ya terlupakan jadinya, 

Screenshot

Cara Membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML 
• Copas script berikut dibawah ]]></b:skin> atau diatas </head>

<!--Artikel Terkait berisi Thumbnail Script-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center;text-align:left;margin: 0 auto 0;text-transform:none;height:100%;min-height:100%;padding:5px 5px 0 5px;}
#related-posts h2{font-size: 1.6em;font-weight: normal;color: black;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;padding-top: 0em;}
#related-posts a{color:black;padding:0 2px;margin:0 5px 0;}
#related-posts a:hover{color:black;padding:0;background-color:#999;}
</style>
<script type='text/javascript'>
var defaultnoimage='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9j2XeQxCMpUvWVuNSoRtWW_gWx6__C4UA_1i8MSdlppPBZ6pu-_uwGkp113iIiUTZ_7zNxy4wsVsm9ntnprYM5xVPkFcBtaUpW4WrCvPO6OomPuhrzsrtUMqHVQfz0J_qbFnfoLxGn2A/s400/noimage.png';
var maxresults=6;
var splittercolor=&quot;#ff0000&quot;;
var relatedpoststitle=&quot;Artikel Terkait&quot;;
</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Artikel Terkait berisi Thumbnail Script End-->

• Selanjutnya cari <div class='post-footer-line post-footer-line-1'> 
• Copas Kode berikut dibawahnya 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Artikel Terkait berisi Thumbnail Code Start-->
<!-- remove --><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>
<script expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Artikel Terkait berisi Thumbnail Code End-->
</b:if> 

• Teks [angka 6 dan 7] yang saya beri warna merah adalah jumlah yang ditampilkan, dengan selisih 1[satu] 
• Teks yang saya beri warna Biru adalah Judul silahkan disesuaikan
• Simpan Tmplate kawan 

Read more ...

Mempercantik Border Table dengan CSS

Terus terang sekarang lagi Blank Mau posting apa.... !!! :r; sedangkan disatu sisi lainnya jadwal posting wajib untuk mengecilkan Traffic Blog, untuk itu saya mohon maaf untuk kawan yang setia mengunjungi BlogBego Creation :z; karena apa yang akan saya bagikan sekarang ini sudah umum diterapkan oleh para Blogger, tapi tak ada salahnya untuk kawan Blogger Pemula yang belum tahu atau mengetahui, Cara Mempercantik Border Table dengan CSS :y;

Sebelum melangkah lebih jauh alangkah baiknya kawan mengetahui Pedoman Dasar CSS, karena tanpa ini Tampilan Blog kawan sebagai contoh bagus di Chrome belum tentu bagus di Mozilla :q; 

Dasar CSS Border

screenshot untuk Tab Menu

Cara Membuatnya :

CONTOH	<div style="border: 2px solid #000; margin: 0; padding: 5px; text-align: center;"> CONTOH </div>
CONTOH	<div style="border:2px solid #000000;-moz-transform: skew(32deg,12deg);-       webkit-transform: skew(32deg,12deg);"> CONTOH </div>
CONTOH	<div style="-moz-transform: skew(02deg,150deg); -webkit-transform: skew(02deg,150deg); border: 2px solid #000000; "> &nbsp;CONTOH </div>
CONTOH	<div style="border:2px solid #000000;-moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius:0px 0px;border-bottom-right-radius: 10px 10px; "> CONTOH </div>
CONTOH	<div style="border:2px solid #000000;-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;">CONTOH</div>
CONTOH	<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 10px 10px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 10px 10px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 10px 10px;"> CONTOH </div>
CONTOH	<div style="border:2px solid #000000;-moz-border radius-topright: 10px 10px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 10px 10px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius: 10px 10px;border-bottom-right-radius: 10px 10px; ">CONTOH</div>
CONTOH	<div style="border:2px solid #000000;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 10px 10px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 10px 10px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 10px 10px;-moz-border-radius-topright: 10px 10px;-moz-border-radius-bottomright: 10px 10px; -webkit-border-top-right-radius: 10px 10px;-webkit-border-bottom-right-radius: 10px 10px; border-top-right-radius: 10px 10px;border-bottom-right-radius: 10px 10px;"> CONTOH </div> atau cara simpelnya <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid #000000;">CONTOH </div>
CONTOH	<div style="-moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; border: 2px solid #000000; height: 90px; padding: 5px; text-align: center; width: 90px;"> CONTOH </div>

Semoga ada manfaatnya

Read more ...

Cara Membuat Navbar Menu Berputar

Kawan masih ingat dengan postingan saya Cara Membuat Navbar Menu Menggulung yang tampilannya cukup unik, tapi yang sekarang ini jauh lebih unik lagi yang saya temukan pada Blogger Zhinto yang diberi nama Css3 Circle System Menu perhatikan screenshotnya

Oke langsung saja ke cara membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML 
• Cari tag  ]]></b:skin> 
• Copas kode berikut tepat diatasnya 

/* Name : Css3 Circle System Menu
 Author : zhinto
 URL : http://zhinto.blogspot.com/
*/
.hapus:after {
visibility: hidden;
display: block;
font-size: 0;
line-height: 0;
content: " ";
clear: both;
height: 0;
width: 0;
}
.hapus { display: inline-block; } * html .hapus { height: 1%; }
.hapus {
display: block;
}
ul.system-menu {
 margin: 0 auto 10px;
 padding: 0;
 position: relative;
 -moz-user-select: none;
 -webkit-user-select: none;
 user-select: none;
 width: 390px
 }
ul.system-menu li {
 list-style-type: none;
 margin: 0 5px 0 0;
 padding: 0;
 float: left;
 position: relative;
 width: 70px;
 height: 80px;
 -moz-transition: all 500ms linear;
 -o-transition: all 500ms linear;
 -webkit-transition: all 500ms linear;
 transition: all 500ms linear
 }
ul.system-menu li a {
 position: absolute;
 margin: -30px 0 0 -43%;
 text-decoration: none;
 font: bold 13px/40px Arial, sans-serif;
 padding: 0;
 background: #21D319;
 color: transparent;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px;
 display: block;
 width: 50px;
 height: 50px;
 text-align: center;
 top: 45%;
 left: 50%;
 outline: none;
 border: 5px inset #F8FBFC;
 -moz-box-shadow: 0 0 10px 4px #5E5E5E,
inset 0 0 20px rgba(0, 0, 0, 0.52);
-webkit-box-shadow: 0 0 10px 4px #5E5E5E,
inset 0 0 20px rgba(0, 0, 0, 0.52);
 box-shadow: 0 0 10px 4px #5E5E5E,
inset 0 0 20px rgba(0, 0, 0, 0.52);
 -moz-transition: all 100ms linear;
 -o-transition: all 100ms linear;
 -webkit-transition: all 100ms linear;
 transition: all 100ms linear
 }
ul.system-menu li a:hover {
 line-height: 130px;
 color: #000;
 border-color: #C5B386;
 background: #FAC800;
 -moz-transition-delay: 0.5s;
 -o-transition-delay: 0.5s;
 -webkit-transition-delay: 0.5s;
 transition-delay: 0.5s
 }
ul.system-menu li span.pembuka {
 position: absolute;
 left: 50%;
 margin: 0 0 0 -29%;
 top: 11px;
 width: 25px;
 height: 30px;
 background: #949596;
 -moz-box-shadow: 3px -3px 0 0 #ECECEC;
 -webkit-box-shadow: 3px -3px 0 0 #ECECEC;
 box-shadow: 3px -3px 0 0 #ECECEC
 }
ul.system-menu li span.satu, ul.system-menu li span.dua, ul.system-menu li span.tiga {
position: absolute;
background: #F0F0F0;
padding: 2px; width: 15px; left: 3px
 }
ul.system-menu li span.satu { top: 5px }
ul.system-menu li span.dua { top: 13px }
ul.system-menu li span.tiga { top: 22px }
.empat, .lima, .enam { position: absolute }
.empat {
 border: 15px solid;
 border-color: transparent transparent #EEE transparent; top: -7px; left: 10px
 }
.lima { padding: 4px; background: #EEE; height: 5px; top: 22px; left: 14px }
.enam { padding: 4px; background: #EEE; height: 5px; top: 22px; left: 28px }
.abot, .abit { position: absolute; left: 15px }
.abot {
 width: 20px;
 height: 20px;
 background: #EEE;
 top: 20%;
 -moz-border-radius: 100px;
 -webkit-border-radius: 100px;
 border-radius: 100px
 }
.abit { border: 10px solid; border-color: transparent transparent #EEE transparent; top: 33% }
.a, .b, .c, .d { position: absolute; padding: 5px; background: #FFF7F7; top: 26% }
.a { left: 25px; background: #39FF13 }
.b { top: 27px; left: 13px; background: #0070FF }
.c { left: 25px; top: 27px; background: #FFE000 }
.d { left: 13px }
.e, .f { position: absolute }
.e { width: 15px; height: 17px; background: rgb(171, 185, 163); top: 35%; left: 32%; border: 2px solid rgb(255, 255, 255) }
.f { border: 10px solid; border-color: transparent transparent rgb(255, 255, 255) transparent; top: -2px; left: 30% }
ul.system-menu:hover li:not(:hover) {
 -moz-transform: rotate(360deg) scale(0.7);
 -ms-transform: rotate(360deg) scale(0.7);
 -o-transform: rotate(360deg) scale(0.7);
 -webkit-transform: rotate(360deg) scale(0.7);
 transform: rotate(360deg) scale(0.7)
 }

• Sampai disini simpan Template kawan
• Selanjutnya pilih Tata Letak - Tambahkan Gadget
• Pilih tanda [+] pada HTML / JavaSript
• Copas kode berikut kedalamnya

<ul class='system-menu hapus'>
<li><a href="#">
<span class='empat'></span>
<span class='lima'></span>
<span class='enam'></span>Depan</a></li>
<li><a href="#"><span class='pembuka'>
<span class='satu'></span>
<span class='dua'></span>
<span class='tiga'></span></span>Artikel</a></li>
<li><a href="#"><span class='abot'></span><span class='abit'></span>Tentang</a></li>
<li><a href="#"> <span class='a'></span>
<span class='b'></span>
<span class='c'></span>
<span class='d'></span>Kategori</a></li>
<li><a href="#"><span class='e'></span><span class='f'></span>Coretan</a></li>
</ul>

• Simpan Blog kawan

Read more ...

Cara Membuat Tampilan Home Page Tersendiri

Seperti janji saya sebelumnya tentang Cara Menyembunyikan Tampilan di Home Page :q; atau dengan kata lain Cara Membuat Tampilan Home Page Tersendiri :z; yang mana triks ini hanyalah rekayasa saja karena elemen yang ada di Home Page kita sembunyikan :y;

Hal ini pernah saya posting di Blog yang lain, kalau kawan ingin membacanya silahkan disini dan Demonya disini cuma semenjak bergulirnya GPlus dan setelah saya coba menemui Kegagalan pada beberapa Template kalau kawan ingin mencobanya saya persilahkan seandainya gagal jangan berkecil hati alias ngambek, karena disini saya akan berbagi dengan kawan yang caranya lebih simpel sekali setelah saya mengadakan percobaan :r;

Tapi sebelumnya kita buat kesepakatan dulu tentang Struktur Template secara umum dari atas sampai kebawah yaitu - [Header - Menu Navigasi] -[Postingan - Sidebar] - [Footer - Credit] atau apalah namanya, silahkan kawan melihatnya pada Template masing-masing - OK langsung ke :

Cara Membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML 
• Cari ]]></b:skin>
• Copas kode berikut dibawahnya 

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#main-wrapper, #sidebar-wrapper, #sidebarkanan-wrapper, #sidebartengah-wrapper, #footer-wrapper, #credit-wrapper  {display:none}
  </b:if></style>

itu hanyalah contoh saja, silahkan kawan menyesuaikan dengan keadaan Template kawan
Kalau melihat kode diatas berarti yang ada pada Home Page hanya Header dan Menu Navigasi

• Sampai disini simpan Template kawan dulu 
• Selanjutnya cari <div id='main-wrapper'> untuk gampangnya pilih Lompat ke Widget - Blog1

• Tambahkan script berikut tepat diatasnya 

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <div class='container' style='text-align:center;width:100%;'>
<b:section class='container' id='container' showaddelement='yes'>
</b:section>
  </div></b:if>

• Simpan kembali Template kawan 
• Selanjutnya pilih Tata Letak dan lihat perubahan yang ada 

screenshot setelah ditambah gadget

Perhatikan yang saya kurung dengan warna merah

• Tambahkan Gadget - pilih tanda [+] pada HTML / JavaScript
• Simpan Script berikut kedalamnya

<center><a href="http://blogbego-creation.blogspot.com/search?max-results=10"><img border="0" height="270"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha9XWzV0SvE6jQtCx4O58fJbXvfCWbyFc3nS8KxyDPwIDwfvadEqqOxEKuolN6adyiOx4x30P7znYoOn-CDd_K-_ASPDad3m7EsXNBAb32LR5HtSdmjUTc1AFbfLs6YvcaNZorkSwsfUo/s1600/BOMO-.gif" width="500"/></a></center>

Hasilnya seperti berikut


Silahkan kawan ganti :
- Teks yang berwarna merah adalah URL Blog saya silahkan ganti dengan URL Blog kawan
- Angka 10 adalah jumlah postingan terakhir yang akan ditampilan [sesuaikan]
- Teks yang berwarna biru silahkan diganti dengan image kesukaan kawan atau dengan kata
Contohnya seperti berikut
<center><a href="http://NAMA BLOG KAWAN.blogspot.com/search?max-results=10"><button> Masuk </button></a></center>

• Terakhir simpan Blog kawan dan lihat hasilnya 

Seandainya kawan mempunyai masukkan atau cara yang lain bisa disampaikan lewat Komentar, semoga ada manfaatnya dan sukses selalu 

Read more ...

Sembunyikan Postingan pada Home Page

Pada Blog yang lain saya pernah membahas tentang Tampilan Home Page tanpa Postingan :z; dan Tampilan Home Page Full Hidden yang juga dibahas oleh :y; Master DTE dengan judul Tips membuat halaman muka Blog tersendiri dan setelah saya coba sedikit mengalami masalah pada Template saya khususnya pada Tata Letak yang tak bisa menyimpan seandainya mengadakan perubahan letak Gadget, begitu juga saat akan berpindah ke Template maupun menutup atau keluar dari Blog, perhatikan gambar berikut 

Tampilan pada Tata Letak

Tampilan saat berpindah ke Template

Untuk mengatasi masalah tersebut saya bereksprimen menggabungkan dan menemukan hasil yang caranya sangat simpel sekali, [perhatikan gambar pertama saya] kalau kawan ingin mencoba saya persilahkan dan ikuti caranya

• Seperti biasa masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Setelah - Pos dan Komentar 
• Lihat paling atas Pos - Tampilkan sebanyak mungkin ? rubah menjadi 0 posting terus simpan setelan

• Selanjutkan pilih Template - Edit HTML 
• Cari kode yang kurang lebih seperti berikut 

<b:section class='main' id='main' showaddelement='no'> 

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/> 

</b:section>

Tepat diatasnya tambahkan kode berikut :

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:section class='container' id='container' showaddelement='yes'>

</b:section>

</b:if>

Hasil jadinya sebagai berikut :

• Simpan Template kawan
• Selanjutnya pilih Tata Letak, seandainya tidak ada kesalahan Hasilnya sebagai berikut 

• Silahkan Tambahkan Gadget - HTML / JavaScript, soal isi [Gambar, atau Ucapan Selamat Datang] terserah kawan 

Kalau ada kawan bertanya - bagaimana cara membuat Tampilan di Home Page Full Hidden, tunggu postingan saya berikut :q; 

Read more ...

Tool untuk mengetahui Kawan Blogger

Kawan Blogger setelah sekian lama Ngeblog kemungkinan ada yang berkeinginan mengetahui para Blogger se-Wilayah [satu Kecamatan, satu Kabupaten / Kota, maupun satu Propinsi dan se-Negara] itulah yang akan saya bahas dan bagikan dengan kawan sekarang  :z;

Pada Google dulu pernah ada Tool untuk mengetahui kawan Blogger se-Wilayah, tapi karena sekarang sudah banyak perubahan terjadi yang menyebabkan banyak yang tidak berfungsi dengan baik dan sempurna :y; sama sekali

Tapi kawan jangan berkecil hati karena Master Beben Koben sudah berbaik hati membuatkan Tool tersebut dan kawan bisa mencobanya kira-kira siapa saja Blogger terdekat kita
Silahkan dicoba

Untuk mengetahui Blogger se-Wilayah

Kec.-Kota contoh: Mengwi-Badung

Propinsi contoh: Bali

Negara contoh: ID
AEAFAGAIALAMAOAQARASATAUAWAXAXAZBABBBDBEBFBGBHBIBJBLBMBNBOBQBRBSBTBVBWBYBZCACCCDCFCGCHCICKCLCMCNCOCRCUCVCWCXCYCZDEDJDKDMDODZECEEEGEHERESETFIFJFKFMFOFRGAGBGDGEGFGGGHGIGLGMGNGPGQGRGSGTGUGWGYHKHMHNHRHTHUIDIEILIMINIOIQIRISITJEJMJOJPKEKGKHKIKMKNKPKRKWKYKZLALBLCLILKLRLSLTLULVLYMAMCMDMEMFMGMHMKMLMMMNMOMPMQMRMSMTMUMVMWMXMYMZNANCNENFNGNINLNONPNRNUNZOMPAPEPFPGPHPKPLPMPNPRPSPTPWPYQARERORSRURWSASBSCSDSESGSHSISJSKSLSMSNSOSRSSSTSVSXSYSZTCTDTFTGTHTJTKTLTMTNTOTRTTTVTWTZUAUGUMUSUYUZVAVCVEVGVIVNVUWFWSYEYTZAZMZW

Design: Beben Koben - Modif :BlogBego 

Kalau kawan ingin memasang di Blog 

Caranya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Tata Letak - Tambah Gadget 
• Pilih tanda + pada HTML / JavaScript
• Copas Kode berikut kedalamnya 

<center><div style='font-size:16px;color:blue;'> Untuk mengetahui Blogger se-Wilayah </div></center>
<div style='overflow: hidden;width:270px;padding:5px 5px 0; display:block;text-align:center;margin: 5px auto 0; height:180px; background: rgb(255,255,255);border-top: 1px solid #333;border-left: 5px solid #000;border-right: 1px solid #333;border-bottom: 5px solid #000;-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;'>
  <br/>
<form action="http://www.blogger.com/profile-find.g" method="get" target="top"><input size="1" name="t" type="text" value="l" style="display:none" /><label>Kec.-Kota contoh: <b>Mengwi-Badung</b></label><br /><input size="25" name="loc2" type="text" /><br/><label>Propinsi contoh: <b>Bali</b></label><br /><input size="25" name="loc1" type="text" /><br/><label>Negara contoh: <b>ID</b></label><br /><select name="loc0"><option value="AE" />AE<option value="AF" />AF<option value="AG" />AG<option value="AI" />AI<option value="AL" />AL<option value="AM" />AM<option value="AO" />AO<option value="AQ" />AQ<option value="AR" />AR<option value="AS" />AS<option value="AT" />AT<option value="AU" />AU<option value="AW" />AW<option value="AX" />AX<option value="AX" />AX<option value="AZ" />AZ<option value="BA" />BA<option value="BB" />BB<option value="BD" />BD<option value="BE" />BE<option value="BF" />BF<option value="BG" />BG<option value="BH" />BH<option value="BI" />BI<option value="BJ" />BJ<option value="BL" />BL<option value="BM" />BM<option value="BN" />BN<option value="BO" />BO<option value="BQ" />BQ<option value="BR" />BR<option value="BS" />BS<option value="BT" />BT<option value="BV" />BV<option value="BW" />BW<option value="BY" />BY<option value="BZ" />BZ<option value="CA" />CA<option value="CC" />CC<option value="CD" />CD<option value="CF" />CF<option value="CG" />CG<option value="CH" />CH<option value="CI" />CI<option value="CK" />CK<option value="CL" />CL<option value="CM" />CM<option value="CN" />CN<option value="CO" />CO<option value="CR" />CR<option value="CU" />CU<option value="CV" />CV<option value="CW" />CW<option value="CX" />CX<option value="CY" />CY<option value="CZ" />CZ<option value="DE" />DE<option value="DJ" />DJ<option value="DK" />DK<option value="DM" />DM<option value="DO" />DO<option value="DZ" />DZ<option value="EC" />EC<option value="EE" />EE<option value="EG" />EG<option value="EH" />EH<option value="ER" />ER<option value="ES" />ES<option value="ET" />ET<option value="FI" />FI<option value="FJ" />FJ<option value="FK" />FK<option value="FM" />FM<option value="FO" />FO<option value="FR" />FR<option value="GA" />GA<option value="GB" />GB<option value="GD" />GD<option value="GE" />GE<option value="GF" />GF<option value="GG" />GG<option value="GH" />GH<option value="GI" />GI<option value="GL" />GL<option value="GM" />GM<option value="GN" />GN<option value="GP" />GP<option value="GQ" />GQ<option value="GR" />GR<option value="GS" />GS<option value="GT" />GT<option value="GU" />GU<option value="GW" />GW<option value="GY" />GY<option value="HK" />HK<option value="HM" />HM<option value="HN" />HN<option value="HR" />HR<option value="HT" />HT<option value="HU" />HU<option value="ID" selected />ID<option value="IE" />IE<option value="IL" />IL<option value="IM" />IM<option value="IN" />IN<option value="IO" />IO<option value="IQ" />IQ<option value="IR" />IR<option value="IS" />IS<option value="IT" />IT<option value="JE" />JE<option value="JM" />JM<option value="JO" />JO<option value="JP" />JP<option value="KE" />KE<option value="KG" />KG<option value="KH" />KH<option value="KI" />KI<option value="KM" />KM<option value="KN" />KN<option value="KP" />KP<option value="KR" />KR<option value="KW" />KW<option value="KY" />KY<option value="KZ" />KZ<option value="LA" />LA<option value="LB" />LB<option value="LC" />LC<option value="LI" />LI<option value="LK" />LK<option value="LR" />LR<option value="LS" />LS<option value="LT" />LT<option value="LU" />LU<option value="LV" />LV<option value="LY" />LY<option value="MA" />MA<option value="MC" />MC<option value="MD" />MD<option value="ME" />ME<option value="MF" />MF<option value="MG" />MG<option value="MH" />MH<option value="MK" />MK<option value="ML" />ML<option value="MM" />MM<option value="MN" />MN<option value="MO" />MO<option value="MP" />MP<option value="MQ" />MQ<option value="MR" />MR<option value="MS" />MS<option value="MT" />MT<option value="MU" />MU<option value="MV" />MV<option value="MW" />MW<option value="MX" />MX<option value="MY" />MY<option value="MZ" />MZ<option value="NA" />NA<option value="NC" />NC<option value="NE" />NE<option value="NF" />NF<option value="NG" />NG<option value="NI" />NI<option value="NL" />NL<option value="NO" />NO<option value="NP" />NP<option value="NR" />NR<option value="NU" />NU<option value="NZ" />NZ<option value="OM" />OM<option value="PA" />PA<option value="PE" />PE<option value="PF" />PF<option value="PG" />PG<option value="PH" />PH<option value="PK" />PK<option value="PL" />PL<option value="PM" />PM<option value="PN" />PN<option value="PR" />PR<option value="PS" />PS<option value="PT" />PT<option value="PW" />PW<option value="PY" />PY<option value="QA" />QA<option value="RE" />RE<option value="RO" />RO<option value="RS" />RS<option value="RU" />RU<option value="RW" />RW<option value="SA" />SA<option value="SB" />SB<option value="SC" />SC<option value="SD" />SD<option value="SE" />SE<option value="SG" />SG<option value="SH" />SH<option value="SI" />SI<option value="SJ" />SJ<option value="SK" />SK<option value="SL" />SL<option value="SM" />SM<option value="SN" />SN<option value="SO" />SO<option value="SR" />SR<option value="SS" />SS<option value="ST" />ST<option value="SV" />SV<option value="SX" />SX<option value="SY" />SY<option value="SZ" />SZ<option value="TC" />TC<option value="TD" />TD<option value="TF" />TF<option value="TG" />TG<option value="TH" />TH<option value="TJ" />TJ<option value="TK" />TK<option value="TL" />TL<option value="TM" />TM<option value="TN" />TN<option value="TO" />TO<option value="TR" />TR<option value="TT" />TT<option value="TV" />TV<option value="TW" />TW<option value="TZ" />TZ<option value="UA" />UA<option value="UG" />UG<option value="UM" />UM<option value="US" />US<option value="UY" />UY<option value="UZ" />UZ<option value="VA" />VA<option value="VC" />VC<option value="VE" />VE<option value="VG" />VG<option value="VI" />VI<option value="VN" />VN<option value="VU" />VU<option value="WF" />WF<option value="WS" />WS<option value="YE" />YE<option value="YT" />YT<option value="ZA" />ZA<option value="ZM" />ZM<option value="ZW" />ZW</select>
<input value="Lihat Blogger's" type="submit" /> <input value="Clear" type="reset" />
</form> </div>
  <center><div style='font-size:10px;'>Design: <a href='http://beben-koben.blogspot.com'>Beben Koben</a>   -    Modif :<a href='http://blogbego-creation.blogspot.com'>BlogBego</a></div></center>

Silahkan kawan ganti Teks yang berwarna biru sesuai selera kawan

Simpan Blog kawan

Read more ...

Cara Membuat Top Komentator

Setelah sekian lama Nge-Blog yang sudah pasti sudah banyak Artikel / Posting yang kawan buat, :q; begitu juga  dengan Komentar Blog yang kawan dapatkan dari para Blogger Pengunjung. :z; Pernahkan kawan berfikir kira-kira siapa ya Blogger Pengunjung yang paling sering dan paling banyak memberikan Komentar :y; di Blog kita, itulah sekelumit pengantar Artikel yang akan saya bahas dan bagikan sekarang ini

Kalau kawan ingin lihat Demonya   » disini

Oke langsung saja ke Cara membuatnya : 

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Tata Letak - Tambah Gadget 
• Pilih tanda [+] pada HTML / JavaScript 
• Copas Script berikut kedalamnya 

<div style="overflow: hidden;margin:0; padding:10px 5px; width:100%; border:1px solid #369;">
<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
 max = ccCount;
}
if (ccCount < min)
{
 min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";
display = display + ccLName + " ";
}
document.write(display);
}
</script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://tips-blogbego.blogspot.com/ &Exclusions=BLOGBEGO,TIPS BLOGBEGO
 &ShowHowMany=20 &Order=alphabet
 &_callback=cCloud
 &_id=cfa196644e1d6159c9183548c4b5e2f5
 &_render=json"
type="text/javascript"></script>
</div></div>

• Teks yang berwarna merah [tips-blogbego] silahkan ganti dengan Link kawan
• Sedangkan BLOGBEGO, TIPS BLOGBEGO silahkan ganti dengan Nama Admin / Athour Blog kawan termasuk aliasnya juga
• Teks yang berwarna biru [20] adalah jumlah Komentator yang akan ditampilkan dari Komentar terbanyak, silahkan disesuaikan 
• Simpan Blog kawan 

Read more ...

Investasi rumah perhatikan 5 hal penting ini

5 hal terpenting dalam berinvestasi rumah

Kita tau harga rumah terus akan naik dan tidak akan pernah turun kecuali oleh kuasa alam. Nah bagi sebagian orang rumah bukan hanya sebagai tempat tinggal saja, namun rumah bisa sebagai lahan bisnis mereka, mereka ini sudah mempunyai rumah untuk tempat tinggalnya namun mereka membeli rumah lagi untuk investasi dan dibisniskan dengan cara disekawannya.

Rumah merupakan sebuah kebutuhan primer bagi manusia namun juga sebagai kebutuhan mewah untuk di masa depan. Populasi manusia akan terus bertambah sementara tanah dan lahan semakin menyempit dan terbatas, otomatis sapa yang kuat membayar dialah yang menempati.

Membeli sebuah rumah bukanlah seperti membeli tempe goreng perlu adanya pertimbangan yang matang untuk menentukan keputusan untuk membeli sebuah rumah karena sekali kita membeli rumah dapat mempengaruhi keuangan dan finansial keluarga karena harganya yang tidak murah. Namun bagi beberapa orang dengan membeli sebuah rumah bisa dijadikan investasi terbesar yang bisa mendatangkan laba yang besar pula bagi keuangan mereka.

Nah dalam hal berinvestasi rumah banyak pertimbangan yang harus anda pertimbangkan jangan sampai menyesal di kemudian hari karena hal-hal yang tidak kita inginkan seperti sengketa atau masalah hukum yang lain, ada baiknya mari kita baca 5 hal penting dalam ber investasi rumah berikut ini.

5 hal penting dalam Investasi Rumah

1. Lokasi
Perhatikan lokasi karena ini merupakan faktor utama dan terpenting yang harus menjadi pertimbangan utama sebelum Anda membeli rumah. Perhatikan lingkungan sekitar, public area, fasilitas umum apakah lokasi rumah tersebut sudah berada di sekitar mereka, ya misal dekat dengan kantor Anda, sekolah anak, bandara, jalan raya, stasiun, pasar, akses kendaraan umum dan lainnya. Ya mungkin ini lokasinya belum semua terpenuhi namun kedepannya lokasi ini akan berkembang, faktor ini juga anda harus pintar membacanya.

2. Budget
Jangan memaksakan sesuatu hal yang sekiranya kita tidak mampu, ya sesuaikan saja dengan budget yang anda miliki dan sanggup untuk anda penuhi.

3. Posisi
Perhatikan posisi calon rumah yang akan anda beli apakah berada di pojokan, tengah atau paling ujung, hal ini bisa menjadi pertimbangan, karena beberapa orang masih mengenal fengsui atau aliran kepercayaan lain yang sangat memperhatikan detail posisi rumah untuk hal yang positif bagi si penghuni rumah tersebut.

4. Sertifikat
Nah kalau masalah ini anda harus serius dan jeli perhatikan kelengkapan dokumen, surat dan setifikat lahan dan properti rumah tersebut. Yakinkan bahwa lokasi rumah tersebut bebas sengketa, atau tidak tersangkut masalah hukum lainnya atau masih bersatatus hutang atau lain2nya. Hindarkan hal-hal yang tidak kita inginkan di kemudian hari.

5. Menawar
Setelah merasa cocok dengan rumah tersebut lakukan penawaran harga dengan semestinya jangan sampai si pemilik tidak mengijinkan anda untuk membeli rumah tersebut. Setalah deal harga, periksa semua kelangkapan dan dokumen ataukan sudah lengkap dan tidak ada kejanggalan satu apapun sesuai dengan perjanjian kedua belah pihak antara anda dan penjual.

Read more ...