SEMUA ADA DISINI: 2012-07-22

Friday, 27 July 2012

Cara Membuat Animasi Page-Loading

Sekarang saya akan berbagi dengan kawan Cara Membuat Animasi Page-Loading Blog yang saya maksud disini, kurang lebih seperti kalau kawan membuka Blog / site sebelum isinya terbuka 100% maka Animasi ini yang akan tampil dan sebagai tanda juga bahwa Loading Blog sedang berjalan :r; dan kalau sudah kebuka 100% Animasi ini dengan sendirinya akan menghilang :y;

Ok langsung saja ke cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Pakai Ctrl + F cari <body>
Hapus atau Ganti dengan Script berikut

<body onLoad='init()'>
<div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHWN0BvDPyjzhhwFmk-HvnhjEKnTo0J5y9ssuUjhwExOylmlf0Mq9mZs9jLBfOcw2MxOR1ZjvEZh9Hu3G8xQcoNH8NuGdwFdeVVISXocnZt2nKuzr3sJeS1IwxWv7CX6kYUBPOverrPhDm/s1600/loading+(6).gif'/></div>
<script src='https://sites.google.com/site/blogbegocreation/javascript/preloader.js' type='text/javascript'/>

Silahkan Ganti teks yang saya beri warna merah dengan Image Loading kesukaan kawan
Untuk lokasi tampilan silahkan rubah teks yang berwarna biru
Simpan Template kawan

Disini saya berikan kawan beberapa contoh Image Loading yang bisa dipakai atau kalau kawan ingin yang lain silahkan lihat Ajaxload.info atau Preloaders.net disana ada banyak pilihan dan bisa diatur durasi ukurannya :z;

Mohon Perhatian kawan, karena mengganti tag <body> apa melanggar TOS Blogger atau tidak, saya kurang tahu karena sampai posting ini saya publish tidak ada jawaban yang pasti :w; untuk itu saran saya kalau kawan ingin mencoba sebaiknya di pasang pada Blog percobaan bukan Blog Utama kawan dan jangan salahkan saya kalau terjadi masalah di kemudian hari :x; apa yang saya sampaikan ini bertujuan untuk diketahui saja

Selamat Berkreasi

Niat Benar, Bisnis Donat Jadi Berkah

Pada suatu hari ada seorang anak muda yang berniat mengawali untuk berdagang. Sipemuda inibelum pernah dagang dan berpikir tentang dagang yang cocok dan paling mungkin dilakukan saat ini. Singkat cerita sipemuda ini menemukan ide untuk menjual donat saja. Donat bisa diambil dari kenalanannya.
Hari minggu pagi yang cerah, Dengan membaca Bismillah dan meniatkan mencari Sang Pemberi Rizky sipemuda ini berangkat dari kost-kostannya menuju pembuat donat untuk mengambil donat. Alhamdulillah lancar negonya, pembayarannya bisa ditunda sampai sore. Setelah donat dikemas dalam kotak-kotak plastik transparan, sipemuda ini dengan gagahnya melanjutkan kembali perjalanannya dengan angkot ke GASIBU, sebuah lokasi di Bandung yang cukup terkenal dan ramai dihari Minggu dipadati pengujung dan pedagang.
Namun kemacetan terjadi dijalan Cihampelas , sehingga nyampe GASIBUnya juga udah siang. Wah terlambat nih. Jam 09:30 baru nyampe Gasibu. Subhanalloh padatnya GASIBU sama pedagang dan calon pembelinya.
Setelah turun dari angkot, sipemuda ini berhenti sejenak untuk meluruskan niat kembali "mencari Sang Pemberi Rizky". Dan kemudian dengan usaha dan kepasrahan, sipemuda ini menuju ke tengah-tengah lapangan dan menjual donat disana, bersebelahan dengan pedagang donat lainnya.
Dalam hati, sipemuda berkata ' Wah disamping pedagang donat yang senior nih. Pasti dia lebih berpengalaman berdagang. '... namun sipemuda tidak patah semangat namun membesarkan hatinya sendiri " saya sudah usaha, masalah rezeki Alloh yang ngatur. Luruskan niat... lusruskan niat "
Subhanalloh,... dagangan pemuda itu cepat sekali lakunya dan laris manis, bahkan habis lebih dahulu dari pedagang donat seniar disebelahnya yang datang lebih awal.

Semua kalau diawali dengan niat "mendekatkan kepadaNya" insyaAlloh nyaman.

Wednesday, 25 July 2012

Cara Membuat Navbar Menu Bertingkat

Kawan kita Umar menyampaikan pertanyaan di CBox yang isinya : "mo, nanya nih, bagaimana cara bikin dropdown menu bertingkat, thanks" tapi sayangnya Link yang ditinggalkan mengarah ke Emailnya, :w; dari pada tak menjawab mendingan saya jawab disini, hitung-hitung menambah postingan kwek kwek kwek :y;

Oke langsung saja ke cara membuatnya :

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

#NavbarMenu {
background:#7CA9C0;
height: 30px;
color: $navcolor;
margin: 0 auto 0;
padding: 0;
font: bold 10px Arial, Tahoma, Verdana;
border: 3px solid #699AB8
}
#nav {
width: 100%; float: left;
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: $navcolor;
display: block;
text-transform: uppercase;
margin: 0;
padding: 5px 15px;
font: bold 13px Tahoma, Georgia, Times New Roman;
border-right:0px solid #afcaee;
}
#nav li a:hover, #nav li a:active {
background: #699AB8;
border-top:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
color: #FFF;
text-shadow: 1px 1px 1px #F00;
text-decoration: none;
margin-top: 2px;
padding: 5px 15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #7CA9C0;
width: 150px;
color: #000;
text-transform: uppercase;
float: none;
margin : 0;
padding: 5px 10px;
border: 1px solid #afcaee;
font: normal 13px Tahoma, Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #699AB8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-u5ySm4XRFyj-wr_wLHXkPduzu22uQ6PGh3esPXqI5hWEVI1T1-AcB1X5De8vDjeU9L65Sm17R21wqMCXovUU3TUBozqM3hekme_0QiIVgKe-osLww3Yk9U7pbP4DwdfFPJfHA3uJSGw/s1600/arrow_right.gif) no-repeat right 10px;
border: 1px solid #ccc;
color: #FFF;
text-shadow: 1px 1px 1px #F00;
text-decoration: none;
font-size: 14px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 150px;
}
#nav li ul ul {
margin: -26px 0 0 172px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

Selanjutnya cari <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> [Ini Nama Blog Kawan] sampai </div> yang terakhir
Copas Script berikut dibawahnya setelah </div>

<div id='NavbarMenu'>
<ul id='nav'>
<li><a href='http://blogbego-creation.blogspot.com' title='KEMBALI KE BLOGBEGO CREATION'><img border='0' height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx_TfQ1_k-2t8wWJDgjUkbEllDFnMdZKsV23W6wPey83aBkOAl6Ceg8vSNUhjTPXgbwyFnsL66oV35q_QaazkHM1vUrZPajSnwCodnU4NyEes-IJUXEoCcugmJRrEKF2T1__T1I-t78YY/s200/HOME2.ICO' title='Kembali ke Beranda' width='20'/></a></li>
<li> <a href='#'>MY BLOG</a>
<ul>
<li><a href='http://tips-blogbego.blogspot.com' target='_blank'>TIPS BLOGBEGO </a></li>
<li><a href='http://info-blogbego.blogspot.com' target='_blank'>INFO BLOGBEGO Plus </a></li>
<li><a href='http://blog-renovasi.blogspot.com' target='_blank'>BLOG CREATION </a></li>
</ul></li>
<li> <a href='#'>BLOG DEMO</a>
<ul>
<li><a href='http://blog-bego.blogspot.com' target='_blank'>BLOG BEGO </a></li>
<li><a href='http://melajah-di.blogspot.com' target='_blank'>MELAJAH DI </a></li>
</ul></li>
<li><a href='http://astore.amazon.com/wacc01-20' target='_blank'> AMAZON </a></li>
<li><a href='http://pagespeed.googlelabs.com' target='_blank'> TEST BLOG </a></li>
<li> <a href='#'>Page</a>
<ul>
<li> <a href='#'>Edit Page #A</a>
<ul>
<li><a href='#'>Page #A-1</a>
<ul>
<li><a href='#'>Page #A-1-1</a></li>
<li><a href='#'>Page #A-1-2</a></li>
</ul> </li>
<li><a href='#'>Page #A-2</a></li>
<li><a href='#'>Page #A-3</a></li>
</ul> </li>
<li><a href='#'>Edit Page #B</a></li>
<li><a href='#'>Edit Page #C</a></li>
<li><a href='#'>Edit Page #D</a></li>
<li><a href='#'>Edit Page #E</a></li>
</ul></li>
</ul></div>

Atau kawan bisa menyimpannya pada Gadget, caranya : Pada Tata Letak pilih Tambah Gadget - HTML / JavaScript
Silahkan Ganti URL Blog saya dengan URL kawan
Simpan Template / Blog kawan

Kalau kawan ingin agar tampilan dengan warna berbeda silahkan disesuaikan :z;

Monday, 23 July 2012

Artikel Terkait Gaya Blogbego

Sekarang saya akan berbagi dengan kawan tentang Artikel Terkait Gaya Blogbego :z; Apa itu Artikel Terkait atau Artikel yang Berhubungan atau apalah namanya dan yang lazim dikenal pada dunia Blogger disebutkan dengan nama Relatif Post :y; Artikel Terkait seperti : ada yang hanya Judulnya saja, ada yang berisi Thumbnail dibawah Judulnya maupun yang bisa ditampilkan pada Sidebar :r; tapi yang ini hasil comot sana comot sini ditambahin bumbu-bumbu biar enak dan sedap dipandang mata [tentunya bagi saya pribadi lho] :w; sebagai contoh tampilannya seperti yang saya pakai di Blog ini atau seperti image berikut :

Cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Beri tanda check disamping Expand Template Widget
Copas Script berikut dibawah <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<style>
#related-posts {
float : left;
width : 98%;
margin: 0;
padding: 5px;
font : 13px Arial Narrow, Verdana;
border: 1px solid #000;
background: #FFF;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
color: #FFF;
text-shadow: 2px 2px 2px #F00;
}
#related-posts ul {
margin : 1px;
padding : 5px;
background :
}
#related-posts ul li {
float:left;
width: 44%; _44%; /* for IE dont delete */
display : block;
background : #D4E3EA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPMo3BdmWKQNJcp4pjnaP0eMAf6dUGzatwePigEVenXedxoU3EV7qYDLYJ4iA5LD4szFtjNGiar7-uprjZoxmR_QOwM4SXbN3TrYN8XtK79Hwv-id00WnjSAkscr61jXvFHTh3ZId-Uzo/s1600/feed-icon-1.gif) no-repeat left center;
margin: 0 3px 0;
padding : 0 0 1px 25px;
line-height : 2em;
border:1px dotted #FFF;
}
#related-posts ul li:hover {
background-color: #95CAFF;
color: #FFF;
text-shadow: 2px 2px 2px #F00;
border-bottom:1px dotted #000;
}
</style><script src='https://sites.google.com/site/blogbegocreation/javascript/relatif-post.js' type='text/javascript'/>
<div id='related-posts'>
<div style='width: 96%; height: 25px; margin:0 auto 0; padding:10px; color: #FFF; font-family: Segoe Print; text-shadow: 3px 3px 3px #000; font-size:16px; font-weight:normal;background:#699AB8;'>Artikel Terkait Menarik Lainnya : </div>
<b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div>
<br/>
</b:if>

Simpan Template kawan
Kalau hasilnya agak rapat dibawahnya, kawan bisa menambahkan <div style='clear: both;'/> dibawah </b:if>
Simpan kembali Template kawan

IKLAN BULAN INI

Friday, 27 July 2012

Cara Membuat Animasi Page-Loading

Niat Benar, Bisnis Donat Jadi Berkah

Wednesday, 25 July 2012

Cara Membuat Navbar Menu Bertingkat

Monday, 23 July 2012

Artikel Terkait Gaya Blogbego