Tinggal beberapa hari lagi kita merayakan Kemenangan, Selamat menyambut Idul Fitri 1435 H tahun 2014 Semoga kita kembali fitri. Satu syawal telah hadir Disambut syahdu kumandang takbir Airmata bahagiapun mengalir Hiasi senyum tak hanya dibibir Tetapi dari hatiku untukmu terlahir Selamat Menyambut Malam Hari Raya Idul Fitri 1435 H Maaf Lahir Dan Batin Sebulan bulan suci Telah kita lewati Dan sampai kini Di satu syawal yang fitri Kemenangan selagai arti Selamat Lebaran Idul Fitri 1435 H Minal Aidin Wal-Faidzin Mohon Maaf Lahir Dan Batin Walau hanya lewat puisi Tak seindah ayat suci Tetapi kucipta sendiri Dari suara hati Untukmu yang jauh dari mata ini Selamat Hari Raya Idul Fitri Minal Aidin Wal-Faidzin Mohom Maaf Lahir Dan Batin Secerah cahaya mentari Sesejuk tetesan embun pagi Untukmu tulus kuucap suci Berharap engkau mau membuka hati Memaafkan dosa dan salahku selama ini Salam Idul Fitri 1435 H Minal Aidin Wal-Faidzin Mohon maaf Lahir Dan Batin Seindah bintang rembulan Sesegar langit baru turunkan hujan Aku ikhlas membuka senyuman Untukmu sekeluarga aku ucapkan Selamat Lebaran Idul Fitri Mohon Maaf Lahir Dan Batin Satu syawal telah hadir Disambut syahdu kumandang takbir Airmata bahagiapun mengalir Hiasi senyum tak hanya dibibir Tetapi dari hatiku untukmu terlahir Selamat Menyambut Malam Hari Raya Idul Fitri 1435 H Maaf Lahir Dan Batin Sebulan bulan suci Telah kita lewati Dan sampai kini Di satu syawal yang fitri Kemenangan selagai arti Selamat Lebaran Idul Fitri 1435 H Minal Aidin Wal-Faidzin Mohon Maaf Lahir Dan Batin Walau hanya lewat puisi Tak seindah ayat suci Tetapi kucipta sendiri Dari suara hati Untukmu yang jauh dari mata ini Selamat Hari Raya Idul Fitri Minal Aidin Wal-Faidzin Mohom Maaf Lahir Dan Batin Secerah cahaya mentari Sesejuk tetesan embun pagi Untukmu tulus kuucap suci Berharap engkau mau membuka hati Memaafkan dosa dan salahku selama ini Salam Idul Fitri 1435 H Minal Aidin Wal-Faidzin Mohon maaf Lahir Dan Batin Seindah bintang rembulan Sesegar langit baru turunkan hujan Aku ikhlas membuka senyuman Untukmu sekeluarga aku ucapkan Selamat Lebaran Idul Fitri Mohon Maaf Lahir Dan Batin Satu syawal telah hadir Disambut syahdu kumandang takbir Airmata bahagiapun mengalir Hiasi senyum tak hanya dibibir Tetapi dari hatiku untukmu terlahir Selamat Menyambut Malam Hari Raya Idul Fitri 1435 H Maaf Lahir Dan Batin Sebulan bulan suci Telah kita lewati Dan sampai kini Di satu syawal yang fitri Kemenangan selagai arti Selamat Lebaran Idul Fitri 1435 H Minal Aidin Wal-Faidzin Mohon Maaf Lahir Dan Batin
Saturday, 26 July 2014
Selamat Hari Raya Idul Fitri
Thursday, 24 July 2014
Anime First Responsive Blogger Template
Anime First Responsive Blogger Template - Template ini saya namakan Anime First Responsive Blogger Template karena template pertama saya dengan konsep Anime =D
Selain Responsive :) banyak fitur menarik yg terdapat dari template ini..
Fitur
- Seo Friendly
- 100% Seo score in chkme
- 100% Responsive
- Valid HTML 5
- Valid CSS3
- Thread comment add Backlist
- JSon Search result
- Auto Readmore (No Javascript)
- Breadcrumbs Seo Friendly
- Related Post
- Drop Down menu
- Error Page 404
- Flat Slide Button Share Button
- Schema webpage
- Fast Loading
Ada sedikit komplain : Header Source dari template Djogz tapi gaya saya sendiri :D bisa di bandingkan melalui tata letak html CSS dll.. Ciri khas'nya media 768px header float none align center..
Don't remove Credits Link ^_^Monday, 21 July 2014
Cara Mudah Membuat Design Responsive
Cara Mudah Membuat Design Responsif. Sebuah situs web atau blog yang baik adalah situs web dengan desain yang nyaman dan responsif yang dapat dengan mudah diakses oleh pengguna internet dari mana saja, melalui komputer atau smartphone. Pentingnya desain website responsif sebenarnya telah dibahas dalam beberapa posting sebelumnya, untuk itu di posting ini. Kami akan mengeksplorasi secara penuh, cara membuat dan membangun sebuah desain website responsif.
Sebenarnya ada dua cara bagaimana membuat website kita memiliki desain responsif. Cara pertama adalah dengan membuat dua versi dari desain, yang untuk desktop dan mobile versi terpisah sehingga ketika pengguna ponsel datang untuk mengunjungi, layar akan diarahkan ke versi mobile tentu jauh lebih ringan dan sederhana. Adapun cara kedua adalah dengan membuat desain khusus dengan menyesuaikan ukuran font dan layar ponsel sehingga website menjadi lebih mudah untuk melakukan akses dan membaca.
Dalam tutorial ini, kita akan membahas cara kedua, yaitu untuk membuat desain website dasar yang responsif terhadap browser layar.
Pertama, tentu saja adalah untuk membuat dokumen html.
Berikut html dasar untuk tata letak situs web:
<div id="wrapper">Kedua, pengaturan ukuran tata letak situs web. Sebagai layout default, kita akan menggunakan ukuran desktop lebar 1300px, untuk menyesuaikan panjang tata letak.
<div id="header-wrapper">
<h1>RESPONSIVE WEBSITE DESIGN</h1>
</div>
<div id="navigation">
<h2>HOME ABOUT CONTACT</h2>
</div>
<div id="content-wrapper">
<p> Easy Ways To Create And Build A Responsive Website Design </p>
<p> Actually there are two ways how to create a website we have a responsive design. The first way is to create 2 versions of the design, which is for the desktop and mobile versions separately so that when a mobile user comes to visit, the display will be redirected to the mobile version of course much lighter and simpler. As for the second way is to create a special design with adjust the size of font and mobile screen so that the website becomes easier to access and reading.</p>
</div>
<div id="sidebar-wrapper">
<p>Sidebar</p>
</div>
<div id="footer-wrapper">
<p>Footer</p>
</div>
</div>
Berikut css kode untuk keseluruhan tampilan website default:
#wrapper {
width:1300px;
margin:auto;
}
#header-wrapper {
width:1300px;
background:#90C;
border:solid #555;
}
#navigation {
width:1300px;
background:#36F;
border:solid #555;
margin-top:5px;
}
#content-wrapper{
width:775px;
float:left;
background:#900;
border:solid #555;
margin-top:5px;
}
#sidebar-wrapper{
margin-left:5px;
width:500px;
background:#0F6;
border:solid #555;
float:left;
margin-top:5px;
}
#footer-wrapper{
width:1300px;
border:solid #555;
float:left;
background:#F60;
margin-top:5px;
}Berikutnya adalah membuat css kode untuk layar ponsel. Untuk mobile dan gadget dengan layar seluas 1024px dan kurang, sebagai berikut:/* for 1024px or less */Teknik ini adalah mengubah ukuran lebar dari px awalnya persentase sehingga lebar akan berubah dari 1300px menjadi 100%.
@media screen and (max-width: 1024px){
#wrapper {
width:100%;
float:none;
}
#header-wrapper {
width:100%;
background:#90C;
border:solid #555;
}
#navigation {
width:100%;
font-size:0.7em;
background:#30F;
border:solid #555;
}
#content-wrapper{
width:63.8%;
float:left;
background:#900;
border:solid #555;
}
#sidebar-wrapper{
margin-left:0.5%;
width:34%;
background:#0F6;
border:solid #555;
float:left;
}
#footer-wrapper{
width:100%;
border:solid #555;
float:left;
}
}
Ukuran layar browser ponsel sangat beragam, dan bahkan ada lebar ukuran 320px. Jika kita hanya menggunakan ukuran 1024px, ukuran isi dan sidebar menjadi sangat kecil. Untuk itu, konten dan sidebar akan dibuat turun dan tidak sebelah. Bagaimana melakukan? menambahkan CSS di bawah ini.
Kali ini, pengaturan layar dengan lebar 700px atau kurang.
/* for 700px or less */Jika kita telah mengatur lebar layout website maka jangan lupa untuk mengatur ukuran font. Jangan lupa ketika ukuran font menjadi lebih kecil jika dilihat melalui mobile.
@media screen and (max-width: 700px) {
#content-wrapper {
width: auto;
float: none;
}
#sidebar-wrapper {
width: auto;
float: none;
}
}
1 em = 16 px -> untuk ukuran font pada paragraph (p)
1,5 em = 24 px -> untuk h1
1.25 em = 20 px -> untuk h2
dll
Jadi kode css untuk huruf yang digunakan dalam desain website responsif adalah:
h1 {
font-size:2em;
}
h2 {
font-size:1.5em;
}
p {
font-size:1em;
}Secara keseluruhan, berikut ini adalah html dan css kode untuk membuat desain website / blog responsif.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Dari tata letak dasar di atas, Anda dapat membangun berbagai bentuk tampilan desain website / blog responsif.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Easy Ways To Create And Build A Responsive Website Design </title>
<style>
#wrapper {
width:1300px;
margin:auto;
}
#header-wrapper {
width:1300px;
background:#90C;
border:solid #555;
}
#navigation {
width:1300px;
background:#36F;
border:solid #555;
margin-top:5px;
}
#content-wrapper{
width:775px;
float:left;
background:#900;
border:solid #555;
margin-top:5px;
}
#sidebar-wrapper{
margin-left:5px;
width:500px;
background:#0F6;
border:solid #555;
float:left;
margin-top:5px;
}
#footer-wrapper{
width:1300px;
border:solid #555;
float:left;
background:#F60;
margin-top:5px;
}
h1 a{
font-size:1.5em;
text-decoration:none;
}
h2 {
font-size:1.25em;
text-decoration:none;
}
p {
font-size:1em;
}
/* for 1024px or less */
@media screen and (max-width: 1024px){
#wrapper {
width:100%;
float:none;
}
#header-wrapper {
width:100%;
background:#90C;
border:solid #555;
}
#navigation {
width:100%;
font-size:0.7em;
background:#30F;
border:solid #555;
}
#content-wrapper{
width:63.8%;
float:left;
background:#900;
border:solid #555;
}
#sidebar-wrapper{
margin-left:0.5%;
width:34%;
background:#0F6;
border:solid #555;
float:left;
}
#footer-wrapper{
width:100%;
border:solid #555;
float:left;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {
#content-wrapper {
width: auto;
float: none;
}
#sidebar-wrapper {
width: auto;
float: none;
}
}
</style>
</head>
<body>
<div id="wrapper">
<header id="header-wrapper">
<h1><a href="#"> Easy Ways To Create And Build A Responsive Website Design </a></h1>
</header>
<nav id="navigation">
<h2>HOME ABOUT CONTACT</h2>
</nav>
<aside id="content-wrapper">
<p> Easy Ways To Create And Build A Responsive Website Design </p>
<p> Actually there are two ways how to create a website we have a responsive design. The first way is to create 2 versions of the design, which is for the desktop and mobile versions separately so that when a mobile user comes to visit, the display will be redirected to the mobile version of course much lighter and simpler. As for the second way is to create a special design with adjust the size of font and mobile screen so that the website becomes easier to access and reading.</p>
</aside>
<aside id="sidebar-wrapper">
<p>Sidebar</p>
</aside>
<footer id="footer-wrapper">
<p>Footer</p>
</footer>
</div>
</body>
</html>
Sebagai catatan, memiliki desain website responsif seperti ini memiliki kelemahan. Jika situs Web default Anda memiliki kapasitas yang tinggi dan memiliki sidebar banyak, pengguna yang berasal dari aplikasi mobile akan tetap sulit untuk mengakses website Anda. Bila ukuran situs sangat besar, Anda harus menggunakan cara pertama yang saya sebutkan di paragraf pertama di atas. Di lain waktu saya akan membicarakannya nanti.
Saya harap tutorial ini dapat berguna bagi Anda
Thursday, 17 July 2014
Jquery Image Tooltip
Tooltip Adalah Komponen grafis dalam user interface pengguna. Komponen ini biasanya muncul ketika pointer mouse diarahkan ke komponen.
Ini hanya sebuah fitur tambahan untuk mempercantik blog dan membuatnya tampil beda dimana sebagian situs besar seperti Kapanlagi.com sepertinya juga memasang tooltip khusus yang begitu menarik.
Buat yang belum pernah dengar, tooltip itu balon info yang muncul saat sebuah gambar atau link yang berisi tag title diarahkan oleh kursor [Contoh] tapi kali ini yg muncul bukan hanya title saja melainkan gambar (arahkan mouse anda di gambar bawah ini)
Bentuk default-nya seperti ketika sobat mengarahkan kursor mouse pada tab atas browser.
Tooltip kali ini menggunakan sedikit Javascript dan CSS, jadi bagi sobat yang merasa tidak begitu perlu ya tidak usah memaksakan kecantikan blognya :) karena ditakutkan akan sedikit memberatkan blog walau tidak banyak karena namanya javascript pasti sedikit memberatkan blog meski 0,0005 sekian detik.
Jika sobat ingin mempraktikkannya silakan ikuti langkah berikut ini.
Berikut caranya :
- Login Ke Akun Blogger sobat
- Pilih Rancangan/Design
- Pilih EDIT HTML
]]></b:skin> atau </style>#psychifio {
font-family: "Arial", Geneva, san-serif;
font-size: 11px;
color: #fbf7be;
text-align: center;
text-shadow: 0px 1px 0px #aca99e;
padding: 10px 0 30px 0;
position: absolute;
padding: 5px;
display: none;
border-radius: 25px;
box-shadow: 5px 5px 8px #999;
background: #333 url(http://image-on-tooltip.googlecode.com/files/jqttbg-1.gif) bottom left repeat;
max-width:220px;
border:5px solid #ccc;
}
#psychifio img {
border-radius: 15px;
height: auto;
margin-bottom: 10px;
max-width: 320px;
border: 7px solid black;
}2. Jika sudah tambahkan Javascript ini di atas
</body><script type="text/javascript">3. Klik save template.
//<![CDATA[
this.imagethumb = function() {
xOffset = 150;
yOffset = 10;
$(".post-body img").hover(function(e) {
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='psychifio' style='padding:10px 6px 10px;'><img src='" + this.src + "' alt='Image jqtt1' />" + c + "</p>");
$("#psychifio").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("slow")
}, function() {
this.title = this.t;
$("#psychifio").remove()
});
$(".post-body img").mousemove(function(e) {
$("#psychifio").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px")
})
};
$(document).ready(function() {
imagethumb()
});
//]]>
</script>
Semoga bermanfaat, jika ada yg ingin di tanyakan silahkan tinggalkan komentar sobaat...
Wednesday, 16 July 2014
RDFa License Dan Microdata dalam Blog
Dalam sebuah situs web atau blog, kita dapat menerapkan deskripsi mengenai apa yang terkandung dalam suatu halaman web. Boleh jadi ketika pengguna berkunjung ke blog kita & mengerti ketika mereka membaca halaman web itu. Namun dari sisi mesin penelusur, mungkin mempunyai pemahaman yang terbatas tentang apa yang sedang dibahas di halaman tersebut. Oleh karena itu tidaklah berlebihan apabila kita berusaha agar dokumen HTML atau XHTML dapat pula dipahami oleh mesin penelusuran, dengan catatan dilakukan (markup) secara baik & benar.
Secara menyeluruh perlakuan markah microdata terutama berkaitan dengan Blogger™ — dimana target tipe utama adalah http://schema.org/Blog. Pada kasus penerapan microdata dan RDFa license ini, kita mengacu pada tipe yang sama pula. Berbeda jika diterapkan pada tipe (itemtype) yang berbeda pula. Untuk memberikan pengkodean markah microdata pada blog, kita akan menggunakan itemtype='http://n.whatwg.org/work' (www.whatwg.org) dengan itemprop='copyrightHolder' (schema.org). Sedangkan contoh format RDFa akan ‘disarikan’ berdasarkan sumber lisensi Creative Commons (License mark: HTML + RDFa) dengan sedikit kustomisasi agar lebih standar.
<div id='content' itemscope='itemscope' itemtype='http://schema.org/Blog'>
… dan seterusnya …
<footer>
<div id='content-info' itemprop='copyrightHolder' itemscope='itemscope' itemtype='http://n.whatwg.org/work'>
<meta expr:content='data:blog.homepageUrl' itemprop='work'/>
<meta content='http://creativecommons.org/licenses/by/3.0/' itemprop='license'/>
<p>&copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script>
<cite itemprop='title'><a expr:href='data:blog.homepageUrl' property='dc:title' rel='dc:source' title='Beranda'><data:blog.title/></a></cite> powered by <a href='http://www.blogger.com' property='cc:attributionName' rel='cc:attributionURL'>Blogger.com</a><br/>
<a href='http://creativecommons.org/licenses/by/3.0/' rel='license' title='Creative Commons Attribution 3.0 Unported License'>All Right Reserved</a>.</p>
</div><!-- #content-info -->
</footer>
</div><!-- #content -->
Catatan: kode yang berwarna merah akan muncul pada rich snippets sebagai format microdata & kode berwarna biru untuk format RDFa. Pengkodean di atas hanya merupakan contoh untuk memudahkan pemahaman, bukan secara mutlak harus diterapkan.
Kemudian lakukan pegujian data rich snippets & lakukan pengujian pula melalui markup validation service.
Apabila markup tersebut tepat, maka microdata dan RDFa license pada elemen
<footer> dalam struktur blog akan lolos dari validasi data.Guest Post : OB Log
Monday, 14 July 2014
You Comment I Follow
DoFollow merupakan kebalikkan dari NoFollow, yakni memberikan kewenangan pada search engine untuk mengindeks semua elemen halaman blog (termasuk komentar) serta semua link-link yang melingkupinya, sehingga akan ber-efek secara signifikan terhadap link target tersebut. Artinya setiap orang yang meninggalkan komentar dan meninggalkan jejak link dalam blog dofollow, maka ia akan memperoleh backlink sekaligus dukungan terhadap blog mereka agar mendapat perhatian dari search engine.
Nah, untuk menjadikan blog kamu dofollow ada baiknya kalau kamu sering melakukan cek dan ricek komentar yang mungkin merupakan SPAM. Perkaya konten dengan sajian yang bermutu, sehingga pengunjung tertarik dan selalu mengikuti update-an posting kamu. Kemudian luangkan sedikit waktu untuk sekedar membuka-buka komentar dan memberikan respon yang positif terhadap komentar tersebut.
Dan bagi kamu para komentator, jika sudah menemukan blog dofollow jangan sekali-kali meninggalkan SPAM dalam komentar. Pemilik blog dengan segala kesungguhannya membuka pintu dofollow, namun kamu balas dengan "SPAM" apa tidak kurang ajar namanya. Jadikan blog tersebut untuk backlink (cukup dengan memasukkan nama dan alamat blog kamu, dibawah form komentar) dengan cara meninggalkan komentar yang positif, sehingga efek-nya akan dirasakan bersama-sama baik untuk blog yang kamu komentari maupun blog kamu. Pada akhirnya akan terjalin hubungan yang harmonis antara sesama blogger, blogger dan pengunjung, serta antara pengunjung sendiri.
Tambahan :
"U Comment I Follow" berarti orang berkomentar dan meninggalkan link blognya dalam blog kamu, kemudian secara otomatis akan terbentuk link back ke blog orang yang berkomentar tersebut.
Saturday, 12 July 2014
Cara Mendaftar, Mendaftarkan Dan Aktivasi Downline di MMM
Untuk cara bergabung di MMM bersama Team Cari Hoki, Silahkan Ikuti langkah - langkah berikut :
1. Kirimkan Data Anda via SMS ke 087806571906 dengan format NAMA_ANDA # KOTA_ANDA #
Note : Email Anda Harus Email Gmail
 |
 |
 |
Pastikan Email Sponsor anda adalah madnizar21@gmail.com kalau bukan, silahkan diganti dengan EMAIL tersebut |
 |
| Lalu Klik Save, Lalu Refresh Browser Anda. |
 |
 |
| Untuk Mengetahui Kode Swift bank, dan Kode Bank Anda silahkan Klik Disini |
