Cara Merubah Model ScrollBar

Sekarang saya akan berbagi dengan kawan Cara merubah model ScrollBar :d; kawan tahu kan apa itu scrollbar yang biasanya berada dipinggir kanan Blog atau Komputer yang bisa digerakkan naik turun, :q; dengan kursor / mouse bertipe default milik webkit 

Seperti yang di posting oleh master kita Taufik Nurrohman secara sederhana bisa dimanipulasi menjadi pointer

screenshot

Cara membuatnya :

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

::-webkit-scrollbar {width:14px;background: -moz-linear-gradient(top,#999,#FFF);background:-webkit-gradient(linear, left top, right bottom, from(#999),to(#FFF));}

::-webkit-scrollbar-thumb {width:10px;background: -moz-linear-gradient(top,#fff,#333);background: -webkit-gradient(linear, left top, right bottom, from(#fff),to(#333));border:1px solid #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}

• Kalau kawan menginginkan tampil lain saya persilahkan meng-Edit ulang misalnya warna, width / lebar dan lain sebagainya 
• Simpan template kawan 

Read more ...

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 ...

Menu Navigasi dengan Image Hover

Sudah banyak postingan saya tentang Navigasi maupun Navbar ada yang menggulung atau menggelinding alias berputar begitu juga dengan yang saya beri nama Navbar Auto Hidden disisi kanan :q; yang merupakan kreasi untuk membuat Blog Tampil Beda :z;

Sekarang saya akan berbagi lagi dengan kawan Cara Membuat Menu Navigasi dengan Image, yang kalau di-Klik akan berubah warnanya seperti hover 

Tampilan Menu Navigasi

Seperti Judul Artikel ini Menu Navigasi sedangkan pada Demo hanya Navigasi Sosial itu hanyalah contoh saja, kalau kawan ingin untuk Menu, caranya sangat gampang, cukup siapkan image seperti berikut. :y;

Coba kawan perhatikan image tersebut, yang atas sedikit agak gelap, sedangkan yang bawahnya agak terang :r;

Oke kawan langsung ke Cara Membuatnya :

• Siapkan Image sesuai kebutuhan
• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML 
• Copas kode berikut diatas ]]></b:skin>

ul#bbc{width: 180px; margin: 0px auto 0px auto;list-style: none;padding-bottom:30px}
* html ul#bbc{width: 185px;list-style: none;padding-left:10px;padding-bottom:0px;margin:0;}
ul#bbc li {display: inline;}
ul#bbc li a {display: block;float: left;  height: 30px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL3l6cGCmRHfqmoFn6d2nbVvYiQFntgZNipe893ow68Ly0U7f_BUVEnCt_xGvEIgsDiumjF8LsamGXq_8YP3IheAk5OB6X8u_u58Zy83r812q8joIMg07FuVPeraiLix9K7HtdxyJTF_7J/s1600/sprite_thumb.png'); text-indent: -9999px;}
ul#bbc li a.facebook {width:30px;background-position:0 0;}
ul#bbc li a.twitter {width:30px; background-position: -34px 0;}
ul#bbc li a.gplus {width:30px;background-position: -68px 0;}
ul#bbc li a.email {width:30px;background-position: -102px 0;}
ul#bbc li a.rss {width:30px;background-position: -136px 0;}
ul#bbc li a.facebook:hover,ul#bbc li a.facebook:focus {background-position: 0 -30px;}
ul#bbc li a.twitter:hover,ul#bbc li a.twitter:focus{background-position:-34px -30px;}
ul#bbc li a.gplus:hover, ul#bbc li a.gplus:focus {background-position: -68px -30px;}
ul#bbc li a.email:hover, ul#bbc li a.email:focus {background-position: -102px -30px;}
ul#bbc li a.rss:hover, ul#bbc li a.rss:focus {background-position: -136px -30px;}

Teks yang saya beri warna merah [180px dan 185px] untuk lebar image, silahkan disesuaikan kalau kawan ingin menambah atau menguranginya, sedangkan teks yang berwarna merah berikutnya untuk nama dan Link yang ditampilkan, nilainya silahkan dihitung sendiri 

• Selanjutnya Copas script berikut dan simpan sesuai keinginan kawan masih pada Template atau bisa disimpan pada gadget untuk pemanggilan

<ul id='bbc'><li><a class='facebook' href='http://www.facebook.com/pages/KASTAONE/19292868552' title='facebook'>Facebook</a></li><li><a class='twitter' href='https://twitter.com/BLOGBEGO' title='Twitter'>Twitter</a></li><li><a class='gplus' href='https://plus.google.com/101141011579420362463' title='GPlus'>GPlus</a></li><li><a class='email' href='http://feedburner.google.com/fb/a/mailverify?uri=blogbegocreation' title='Email'>Email</a></li><li><a class='rss' href='http://feeds.feedburner.com/blogbegocreation' title='RSS'>RSS</a></li></ul>

• Silahkan kawan ganti Link-link saya tersebut dengan Link kawan 
• Simpan Template / Blog kawan

Read more ...

Pasang Avatar disamping Nama Author

Sebelumnya saya berbagi Cara Pasang Image disamping Judul Artikel dan Cara Pasang Avatar Author disamping Judul Artikel :q; yang sekarang masih tetap pada Avatar cuma penempatannya disamping Nama Author atau Admin :q; 

Nama Admin [pemilik Blog] biasanya diikuti dengan tanggal dan waktu posting yang penempatannya dibawah Judul atau dibawah Isi Artikel :r; 

Kalau kawan ingin memasangnya di Blog Kodenya hampir sama dengan Cara Pasang Avatar Author disamping Judul Artikel, yang beda cuma ukurannya :y; kalau ditempatkan dibawah Judul ukurannya lebih kecil disebabkan memakai huruf lebih kecil sedangkan kalau dibawah Isi Artikel ukurannya sedikit lebih besar dibandingkan yang lainnya :x; 

Cara membuatnya :

• Seperti biasa masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML
• Cari tag  ]]></b:skin> 
• Kalau sudah ketemu hapus atau ganti dengan script berikut 

.avatar-author{float:left;margin:0 5px 5px 0;border:0px solid #999;border-radius:50%;padding:0;width:20px;height:20px}
]]></b:skin>
<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>

Teks yang saya beri warna biru adalah posisi penempatannya - disesuaikan

Teks yang saya beri warna merah adalah besarnya Avatar - disesuaikan

• Selanjutnya cari  <data:post.body/> yang kedua, terus scroll keatas untuk mencari Judul atau kebawah untuk akhir Isi Artikel, yang kodenya kurang lebih seperti berikut :

<span class='vcard author'><span class='fn'>
<span itemprop='reviewer'><data:post.author/>
</span></span></span>,
<data:post.dateHeader/>
<script>document.write(date);</script>
- <span class='updated'>
<data:post.timestamp/></span>
-------------------dstnya
<data:post.body/> 

• Tambahkan kode berikut diatasnya  <script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/> sehingga menjadi seperti berikut 

<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>
<span class='vcard author'><span class='fn'>
<span itemprop='reviewer'><data:post.author/>
</span></span></span>,
<data:post.dateHeader/>
<script>document.write(date);</script>
<span class='updated'>
<data:post.timestamp/></span>
--------------- dstnya
<data:post.body/>

• Simpan Template kawan 

Read more ...

Pasang Avatar Author disamping Judul Artikel

Sebelumnya saya sudah berbagi dengan kawan Cara Pasang Image disamping Judul Artikel :q; sekarang saya akan berbagi lagi hal yang sama, cuma yang sekarang ini dengan Avatar Author atau Foto Profil kawan sendiri :r; bagaimana, perhatikan screenshotnya dibawah ini 

Kalau kawan ingi tahu caranya, silahkan dilanjutkan membacanya ! :y; 

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

.avatar-author{float:left;margin:0 10px 5px 0;border:0;border-radius:50%;padding:0;width:30px;height:30px}

• Selanjutnya Copas script berikut dibawah ]]></b:skin> atau diatas </head>

<script>

//<![CDATA[

function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}

//]]></script>

• Simpan sementara Template kawan
• Temukan <b:if cond='data:post.title'> yang kodenya kurang lebih seperti berikut

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

<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

Copas script berikut disini....!

    <b:if cond='data:post.title'>  

<h2 class='post-titles' itemprop='name'>
      <b:if cond='data:post.link'>
           .................. seterusnya....

• Copas script berikut diatas <b:if cond='data:post.title'>  

  <script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>

• Simpan Template kawan dan lihat hasilnya 

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 ...

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 ...

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 ...

Sembunyikan Isi Artikel di Beranda

Sebelumnya saya sudah berbagi dengan kawan Cara Menyembunyikan Postingan di Home Page sedangkan yang sekarang saya akan mencoba berbagi dengan kawan Cara Menyembunyikan Isi dari Artikel / Postingan pada Home Page [Beranda] :q; yang saya maksud disini pada Home Page hanya akan kelihatan Judulnya saja, sedangkan Isi sampai Readmore [Selengkapnya] akan kelihatan setelah mouse didekatkan :q; perhatikan gambar berikut 

Untuk Demo kawan bisa lihat

Cara membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML
• Copas Kode berikut tepat diatasnya

.post .sembunyi {display:none;}
.post:hover .sembunyi {display:inline;}

• Selanjutnya cari <data:post.body/>

yang selengkapnya kurang lebih seperti berikut

<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'>
<data:post.jumpText/></a>
</div></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Teks yang saya beri warna merah adalah Kode Readmore [selengkapnya]

• Hapus atau ganti dengan kode berikut 

<div class='sembunyi'><b:if cond='data:blog.pageType != &quot;item&quot;'><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> </div> </b:if></b:if></div><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> <div style='clear: both;'/> <!-- clear for photos floats -->    </div>

• Kalau Template kawan sudah memakai Readmore Otomatis, yang kodenya kurang lebih seperti berikut :

<b:if cond='data:blog.pageType != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><span class='rmlink' style='float:right'><a expr:href='data:post.url'>READ MORE</a></span></b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><div style='clear: both;'/> <!-- clear for photos floats -->    </div>

• Hapus atau ganti dengan kode berikut :

<div class='sembunyi'><b:if cond='data:blog.pageType != &quot;item&quot;'><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><span class='rmlink' style='float:right'><a expr:href='data:post.url'>READ MORE</a></span></b:if></div><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> <div style='clear: both;'/> <!-- clear for photos floats --></div>    

• Simpan Template kawan 

Seandainya kawan ingin biar Readmore kelihatan, kawan cukup memindahkan </div> teks yang saya beri warna merah keatas kode Readmore; begitu juga sebaliknya biar Readmore saja yang tidak kelihatan maka yang perlu kawan pindahkan hanya <div class='sembunyi'> taruh diatas kode Readmore :r;

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 ...

Cara Lain Mengganti Header dengan Animasi

Kawan masih ingat dengan Artikel saya Cara Mengganti Header dengan Animasi :z; yang sedikit agak ribet apalagi berisi mengganti dan merubah beberapa Script, tapi yang sekarang sangat gampang sekali, kawan cukup melihat lebar Header untuk membuat lebar maksimal Animasi :q;

oke langsung saja ke Cara membuatnya :

• Buat Animasi Header Blog kawan
• Simpan Animasi tersebut pada Hosting kawan dan ambil Link-nya
• Selanjutnya masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Tata Letak
• Lihat kiri atas atau pada bagian Header - Edit 

• Masukkan Link Animasi kawan tadi pada Kotak - Dari web Tempelkan URL gambar dibawah 
• Pada Penempatan silahkan pilih [asal jangan Dibalik judul dan keterangan

              > Selain judul dan keterangan artinya hanya Animasi saja yang tampil

              > Tempatkan keterangan setelah gambar artinya dibawah Animasi ada Discreption Blog

• Simpan Blog kawan 

Read more ...

Cara Membuat Obyek Berterbangan

Sebelumnya saya sudah berbagi dengan kawan Cara Membuat Salju dan Gelembung Berjatuhan :z; sekarang masih disekitar itu, yang pasti akan lebih keren karena yang ini bisa berterbangan kesana kemari alias tidak menoton berjatuhan :y; saja dari atas

Prinsip dasar cara kerjanya kawan harus mempunyai animasi yang dipakai elemen / obyek :q; yang disimpan pada file dengan ekstrak Js [JavaScript]  seandainya kawan ingin mengganti obyek elemennya silahkan simpan obyek tersebut pada hosting kawan dan ambil Linknya untuk dimasukkan pada Script Js tersebut, tentunya kawan perlu meng-Edit file js tersebut yang selanjutnya kawan simpan pada Hosting kawan dan unduh Linknya [URL Js] :r;

Cara membuatnya :

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

<script src='https://sites.google.com/site/blogbegocreation/animasi/Merah%20Putih.js' type='text/javascript'/>

<script src='https://sites.google.com/site/blogbegocreation/animasi/Bendera%20Indonesia.js' type='text/javascript'/>

<script src='https://sites.google.com/site/blogbegocreation/animasi/burung.js' type='text/javascript'/>

<script src='https://sites.google.com/site/blogbegocreation/animasi/burung-elang.js' type='text/javascript'/>

<script src='https://sites.google.com/site/blogbegocreation/animasi/Kumbang.js' type='text/javascript'/>

<script src='https://sites.google.com/site/blogbegocreation/animasi/Kumbang.js' type='text/javascript'/>

<script src='https://sites.google.com/site/blogbegocreation/animasi/Bola.js' type='text/javascript'/>

Cara Edit File Js

Perhatikan Gambar

untuk selengkapnya cara Edit silahkan baca   disini » 

• Kawan cukup mengganti Link yang saya kurung dengan garis merah dengan Link Image kawan
• Simpan Template kawan

Read more ...

Cara Membuat Salju dan Gelembung Berjatuhan

Kali ini saya akan berbagi dengan kawan Cara Membuat Salju dan Gelembung Berjatuhan :q; yang perlu kawan ketahui bahwa ini hanyalah selera saja dan merupakan pernak-pernik biar kelihatan Blog kita hidup :y; karena ada yang berjatuhan dari atas berterbangan :z;

Seperti kawan ketahui Salju warnanya Putih maka akan kelihatan asyik apabila warna latar belakang Blog dengan warna gelap sedangkan Gelembung dengan warna biru muda :x; 

Screenshot : Gelembung dan Salju

Oke langsung saja ke cara membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML
• Cari tag </head>
• Copas Script berikut tepat diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/bubble.js' type='text/javascript'/><script src='https://sites.google.com/site/blogbegocreation/javascript/jsnow.js' type='text/javascript'/>
  <script type='text/javascript'>
$(function() {
$().jSnow();
});
</script>

Kalau kawan berkeinginan akan menampilkan satu saja, kawan cukup menghapus salah satu teks yang berwarna merah atau teks yang berwarna biru

• Jangan lupa simpan template kawan

Read more ...

Komentar untuk dapatkan BackLink

Sebelumnya saya minta maaf yang sebesar-besarnya karena kesibukan saya pribadi :q; yang sampai-sampai tak sempat memposting atau mengurus Blog, untuk memecahkan suasana sekarang saya mulai dari yang ringan dan sedikit santai dan mudah-mudahan kawan setuju :y; 

Membaca Judulnya itu seperti nya kawan tidak akan percaya karena kurang masuk akal, Komentar untuk dapatkan BackLink benar-kan :r; tapi bagi saya sangat realistik, karena Komentar yang saya maksud Komentar yang punya bobot [versi BlogBego tentunya],
tapi sebelum lanjut mari kita lihat dan pilah dulu Komentar - Komentar itu secara garis besarnya ada :

• Komentar SPAM yang tak perlu saya jelaskan karena Robbot Google sudah punya Filter untuk menyaringnya misalnya 

• Komentar Pamrih maksudnya disini memberikan Komentar asal-asalan, meminta balasan dan lain sebagainya, untuk jelasnya lihat contoh : 

• nice posting gan kunjungan baliknya ya gan.

• kok saya udah coba ga bisa ya mas??? tolong donk pencerahannya 

• wahh keren artikel nya.. bikin senyum..wkkwkwkw... sbener nya siih gk ketawa... cekidoot... kunjung balik ya ke blog kami. di FOLLOW ya blog kami,kalo udah elu FOLLOW,nanti blog kalian juga ane follow,dan cantumkan nama blog kalian...

• Komentar yang punya bobot dan baik artinya yang memberikan Komentar mengerti apa yang dibaca dan seandainya ada yang kurang jelas atau mengalami kegagalan saat mencoba bisa menyampaikan masalah yang ditemukan dan solusi yang pernah dicoba 

• kok saya udah coba ga bisa ya mas??? tapi setelah saya rubah color: #FFFFFF; menjadi color:#000000; baru berhasil mas !!! mungkin dikarenakan background Template saya warna putih, tolong donk pencerahannya seandainya ada kekeliruan
  

saya udah coba dan berhasil mas??? cuma teks kurang jelas, setelah saya rubah background: #d9d7d7; menjadi #000000; menjadi kelihatan lebih jelas !!! terima kasih ya sudah berbagi

atau seperti berikut :

• saya udah coba sesuai petunjuk diatas ga mau jalan juga??? tapi setelah file yang berformat Js saya simpan di Hosting saya akhirnya baru berhasil, tapi hasilnya kurang maksimal seperti Demonya mohon bantuannya, trims sebelumnya

Seandainya kawan Blogger ada yang bertanya apa hubungannya memilah Komentar dengan Judul diatas
Jawabannya sudah pasti ada, mari kita lihat :

• Komentar Berbalas itu sudah biasa karena saya ini Calon Blogger Pasif artinya akan membalas semua pemberian kawan [Komentar dibalas Komentar] 
• Mari Belajar memberikan Komentar yang baik/berbobot karena tidak menutup kemungkinan dari Komentar yang baik ini Blog kita dikunjungi oleh Pengunjung nyasar sebagai contoh saya memberikan Komentar di Blog kawan, sudah pasti disana banyak yang memberikan Komentar, disini saya bisa memilah Komentar yang kira-kira berbobot dan mengerti permasalahan dan secara otomatis saya akan mengunjungi Blognya itu [inilah yang saya maksud mendapatkan BackLink secara tak langsung] 

Kesimpulan ala BlogBego Creation :

• Berikan Komentar sesuai Topik ini sangat penting, karena pengunjung lain mempunyai masalah yang sama kemungkinan mendapatkan solusinya di Komentar tersebut
• Komentar SPAM dan Komentar Pamrih diatas apalagi seperti menghina kalau bisa dihindari,
• Hormati si Admin tak perlu meminta atau menyuruh misalnya Kunjung balik, Follow dan lain sebagainya sebaiknya lakukan saja dan sampaikan mungkin lewat ChattBox » saya dah Like agan, 

Seandainya ada yang kurang berkenan, kawan bisa menyampaikan lewat Komentar tapi ingat saya bukan menggurui ini hanyalah saran orang lagi Ngoceh di pinggir jalan 

Untuk apa kawan Berkunjung tanpa meninggalkan Jejak [Komentar] karena di Blog ini semua pemberian kawan dibalas asal ada Link / URL Blog kawan

Read more ...

Tambahkan Kalender pada Blog

Pernahkah kawan menikmati makanan tanpa garam.......?! akan terasa hambar bukan ?, begitu juga dengan Web site atau Blog tampilannya akan terasa kurang lengkap tanpa diisi pernak-pernik seperti Jam, Kalender maupun yang lainnya :z; 

Sudah banyak para Blogger memasang Kalender tersebut di Blognya, dan banyak pula yang tidak memasangnya, yang kemungkinan disebabkan terlalu banyak memerlukan tempat pemasangan, atau mungkin dianggap memperlambat loading atau kawan ingin memasangnya tapi belum menemukan Kalender yang simple [karena pada umumnya Kalender seperti gambar disamping :r; 

Sekarang saya akan berbagi dengan kawan Cara Membuat dan Menampilkan Kalender di Blog yang sangat simpel

perhatikan Demo berikut atau kawan bisa lihat Kalender / Tanggal di bagian kanan bawah Blog ini :o;

Caranya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML
• Cari tag antara <body> sampai </body> 
• Copas script berikut dimana kawan suka [Header, Post, Sidebar, bottom]

<div id='Kalender'>
<script src='https://sites.google.com/site/blogbegocreation/javascript/Tanggal.js' type='text/javascript'/>
</div>

• Simpan Template kawan 
• Selamat berkreasi

Read more ...

Tampilkan Iklan disamping Thread Comment

Artikel saya sebelumnya tentang Tampilkan Iklan diatas Komentar Blog dan Tampilkan Iklan disamping Kanan Komentar untuk Komentar Default :y; sedangkan untuk Thread Comment dengan Judul Tampilkan Iklan diatas Thread Comment :z; sedangkan untuk menampilkan Iklan disamping Kanan Thread Comment sedikit mengalami masalah seperti Form Komentar tidak muncul atau Iklan Sponsor letaknya tidak tetap maksud saya pasang diatas bisa menjadi dibawah form Komentar :q;  [khusus untuk Thread Comment yang sudah dimodifikasi], karena ingin menempatkan Iklan disamping Thread Comment semakin membuat saya penasaran saja, [maklum saya hanyalah Calon Blogger] yang pada akhirnya saya berhasil menemukan solusinya :w;

Caranya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML - Lanjutkan 
• Beri tanda check pada  Expand Template Widget
• Sebaiknya Simpan dulu Template kawan
• Cari Kode Comment [Komentar Thread Modifikasi] bisa baca disini dan kawan akan menemukan 2 angka untuk lebar [width] Komentar yang harus kawan rubah/kurangi sesuai lebar kolom untuk Iklan 
• Selanjutnya cari  <div class='comments-content'> sampai </p> selengkapnya sebagai berikut :

<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
 <b:include data='post' name='threaded_comment_js'/>
 </b:if>
 <div id='comment-holder'>
 <data:post.commentHtml/>
 </div> </div>
<p class='comment-footer'>
 <b:if cond='data:post.allowNewComments'>
 <b:include data='post' name='threaded-comment-form'/>
 <b:else/>
 <data:post.noNewCommentsText/>
 </b:if> </p>

• Tambahkan Script berikut diatas  <div class='comments-content'> 

<table border='0' cellpadding='1' height='auto' width='780'><tr><td valign='top'>
<div style='width:530px;height:auto;padding:1px; align:left; border:0px solid #999'>
<div style='width:480px;height:60px; background:#0FF;text-align:center; border:1px solid #243B0B; padding:15px;font-size:30px;font-family:Tekton Pro;'><br/><b>MAU IKLAN ANDA TAMPIL DISINI</b></div>

dan dibawah </p>


</div> </td><td valign='top'> 
<div style='width:210px;height:auto;padding:5px; align:right;border:0px solid #F00;background:transparent;'>
<img border='0' height='600' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDIkrejlt01BumUsKsyPSij5JJZQUZMz3KVB1IIGF8ySAm1kjagrWrQPUYJIUzP6aDh2se29XOMIgtUpdYZRfQIuyK1W8BiTD-HUk9aihq7x6henZa-yk_DlX7UVwDYTfYpTW2YPMQt2cy/s640/Banner.png' width='200'/>

</div></td> </tr> </table>


Selengkapnya menjadi sebagai berikut :

<table border='0' cellpadding='1' height='auto' width='780'><tr><td valign='top'>
<div style='width:530px;height:auto;padding:1px; align:left; border:0px solid #999'>
<div style='width:480px;height:60px; background:#0FF;text-align:center; border:1px solid #243B0B; padding:15px;font-size:30px;font-family:Tekton Pro;'><br/><b>MAU IKLAN ANDA TAMPIL DISINI</b></div>
    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>
    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>
</div> </td><td valign='top'>
<div style='width:210px;height:auto;padding:5px; align:right;border:0px solid #F00;background:transparent;'>
<img border='0' height='600' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDIkrejlt01BumUsKsyPSij5JJZQUZMz3KVB1IIGF8ySAm1kjagrWrQPUYJIUzP6aDh2se29XOMIgtUpdYZRfQIuyK1W8BiTD-HUk9aihq7x6henZa-yk_DlX7UVwDYTfYpTW2YPMQt2cy/s640/Banner.png' width='200'/></div>
</td> </tr> </table>

• Sampai disini Simpan dulu Template kawan

Keterangan Tambahan :

• Silahkan kawan mengganti teks yang berwarna merah [780]sesuai Lebar [width] Form Komentar kawan, sedangkan [530px dan 210px] adalah Lebar Komentar dan Iklan 
• Silahkan ganti juga teks yang berwarna biru dengan script Iklan kawan
• Karena struktur Template berbeda-beda, atau seandainya template kawan sama seperti template saya ini, yang bisa menyebabkan Form Komentar menghilang, kawan jangan risau :w;  sekarang coba  perhatikan diatas <div class='comments-content'> scriptnya sebagai berikut sebelum perubahan [ditambahkan script Iklan]

<b:includable id='comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <b:if cond='data:mobile'> <h4 id='comment-post-message'> <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/> <b:else/> </b:if> <data:post.friendConnectJs/> <data:post.cmtfpIframe/> <script type='text/javascript'> BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;); </script> </div></b:includable>
<b:includable id='threaded_comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<h4><data:post.commentLabelFull/>:</h4>
<div class='comments-content'>

• Silahkan kawan ganti teks yang berwarna biru dengan teks berikut

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    <data:post.iframeColorizer/>
  </div>
</b:includable>
<b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
<h4>
      <b:if cond='data:post.numComments == 1'>
        1 <data:commentLabel/>:
      <b:else/>
        <data:post.numComments/> Pendapat pada : &#8220;<data:post.title/>&#8221;
      </b:if>
    </h4>

• Perlu kawan ketahui, Iklan Sponsor akan kelihatan kalau sudah ada Komentarnya
• Simpan Template kawan

Read more ...