Cara Membuat Postingan Dua Kolom

Cara Membuat Postingan Dua Kolom - Masih tentang  dua kolom kali ini saya terinspirasi dari teman saya Ady Blink yang kemaren berkomentar di posting Cara Membuat Posting Dua Kolom yang katanya juga pernah melihat tutorial yang seperti ini namun pada posting artikelnya.
Nah dari situlah saya terinspirasi dari pada ngak posting lebih baik posting walaupun sederhana karena saya pernah gagal dalam membuat posting yaitu Meta Tag Seo Friendly yahh beginilah kalau memposting artikel yang sangat simpel dan pasaran.
Tutorial Postingan Dua Kolom ini semoga ngak seterpuruk tutorial diatas walaupun tutorial ini biasanya digunakan oleh para Master Blogazine.

Cara ini merupakan cara manual karena jika kita menggunakan yang otomatis maka akan berakibat pada semua artikel dan saya rekomendasikan untuk memakai yang ini saja, tapi terserah lah anda mau memakai yang mana.
Disini kita bisa lihat contohnya pada tulisan ini dimana saya menggunakan yang manual dan cara kerjanya yaitu membagi tulisan dengan sama rata dan bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla. 

Capek juga nulisnya yaudah nih tutorial siap anda comot, copy saja kode dibawah ini lalu di pastekan ke postingan milih yang Edit HTML jangan yang Compose lalu setelah di pastekan di Edit HTML kita mau pindah ke Compose sudah ngak apa-apa.
<style type="text/css">
#twocolom{-moz-column-count:2;-moz-column-gap: 2em;-webkit-column-count: 2;-webkit-column-gap: 2em;} 
</style>
<div id="twocolom">LETAKKAN POSTINGAN DISINI</div>
Dengan kode diatas sepanjang apapun tulisan kita maka tulisan tersebut tinggi lebarnya akan terbagi rata menjadi dua, bagus kan hehe cukup sekian saja dari saya.

Cara Membuat Posting Dua Kolom

Cara Membuat Posting Dua Kolom - Yeahhh liburan sekolah hehehe akhirnya bisa luangin waktu juga untuk membuat postingan setelah beberapa hari yang agak nyandat karena sibuk, dan kali ini saya akan menghadirkan tutorial dari Kang Taufik Nurrrohman yaitu Cara Membuat Posting Dua Kolom, mengapa judul artikel ini saya agak samakan karena saya mau mencoba SEO dari pada blog ini yah itung itung untuk mengadu seberapa SEO-kah blog ini.

Kelebihan
? Dapat memuat postingan lebih banyak dalam home page
Membuat tampilan blog lebih rame
Serta memudahkan pencarian karena sudah tampil pada home page

Kekurangan
Lambatnya loding blog jika thumbnail pada read more terlalu besar
Ketidakrataan deskripsi blog
Lainnya cari sendiri...

Penerapannya
Salin semua kode dibawah ini diatas kode </head>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>
    .post-outer {
      width:50%;
      height:240px; /* Sesuaikan tingginya sesuka hati */
      float:left;
    }
    /* Clear CSS Float */
    #blog-pager,
    h2.date-header {
      clear:both !important;
    }
    </style>
</b:if>
</b:if>
Kemudian klik Simpan Template.

Notice
Ada tambahan nih kata Kang Taufik Nurrohman 
Beberapa elemen pembungkus posting juga terkadang memiliki kelas yang berbeda. Misalnya .wrapfullpost. Jadi jangan terlalu tergantung dengan kode di atas. Sebagai contoh, jika ternyata elemen luar posting pada template Anda berupa elemen <div class='wrapfullpost'>, maka Anda harus mengubah nama kelasnya menjadi seperti ini:
.wrapfullpost {
  width:50%;
  height:240px; /* Sesuaikan tingginya sesuka hati */
  float:left;
}
Nah cukup itu saja yang dapat saya share hari ini untuk Kang Taufik Nurrohman trimakasih banyak, semoga artikel ini bermanfaat selamat mencoba dan semoga berhasil :)

Teknik SEO Paling Ampuh

Teknik SEO ala Tutorial Blogspot - Pada judul diatas bisa kita baca bahwa saya akan menerangkan teknik SEO yang saya ketahui, yups selama ini saya menggunakan teknik ini untuk berusaha mencapai hasil yang maksimal tapi taukah teknik yang saya pakai ini adalah Teknik SEO ala EASY WP SEO, ya punyanya Wordpress tapi biarlah lha hasilnya sudah ada kok coba saja cari di pencarian google dengan keyword  kemudian cari dan hasilnya ada di 10 besar.
SEO
Sedikit ulasan saja bahwa trik ini merupakan bocoran yang telah lama terungkap kira-kitra pada bulan Februari kemaren namun masih tetap saya gunakan walau tidak semuanya saya terapkan, nah untuk penerapannya bisa lihat penjelasan dibawah ini.

Judul Posting
1. Judul postingan mengandung keyword
2. Setidaknya judul diawali dengan keyword
3. Judul minimal mengandung 3 kata
4. Judul maksimal mengandung 66 karakter
URL/Permalink
1. URL permalink mengandung keyword
2. Meta description mengandung keyword
3. Meta description diawali dengan keyword
4. Maksimal meta description 160 karakter

Isi Konten
1. Isi postingan setidaknya minimal 300 kata
2. Postingan setidaknya memiliki keyword antara 2.5%-5.5%
3. Paragraph pertama terdiri dari 50-100 kata dan mengandung keyword
4. Postingan setidaknya memiliki sebuah gambar dengan keyword sebagai ALTnya
5. Setidaknya terdapat satu keyword yang deberi style bold (B)
6. Setidaknya terdapat satu keyword yang deberi style italic (I)
7. Setidaknya terdapat satu keyword yang deberi style underline (U)
8. Terdapat keyword yang dijadikan sebuah anchor text yang berisi external link
9. Terdapat keyword yang dijadikan sebuah anchor text yang berisi internal link

Sudah cukup segitu saja yak, konten yang berkualitas, insyaAlloh bisa nangkring diPejwan, jangan lupa kasih  backlink biar tampah powerful :D Semoga bermanfaat :D

Cara Membuat Permalink Blog

Cara Membuat Permalink - Kode Permalink Blogspot - Apa itu Permalink? Permalink merupakan singkatan dari Permanent Link yaitu url atau link daripada url posting itu sendiri secara lengkapnya permalink adalah gabungan dari URL/link dan struktur kalimat yang terpotong dengan tanda slash (/) dan dash (-) tersebut merupakan URL spesifik sebuah content/posting blog yang disebut permalink. Permalink merupakan suatu susunan unik yang selalu berbeda dengan permalink lainnya meski dalam satu URL, dan jika sebuah permalink telah publish maka dia tidak bisa diganti (edit) lagi, sesuai dengan namanya permalink yang berarti permanent link. dikutip dari [hakimtea.com].

Sebenarnya contoh permalik itu sendiri simpel cuma url seperti ini:
http://syafdillah-blog.blogspot.com/2013/07/cara-membuat-table-sederhana.html
namun jika struktur yang akan kita tempelkan pada blog sesimpel itu akan terlihat kurang bagus makadari itu saya coba rancang sendiri paduan antara permalink dengan share button agar terlihat bagus (lihat gambar diatas).
Kegunaan permalink disamping untuk meningkatkan seo on page juga agar para copazer bisa diingatkan lewat pesan tersebut untuk menyertakan link yang akan dicopasnya.

Cara Membuatnya:
Letakkan kode CSS dibawah ini diatas ]]></b:skin>
/* Permalink
----------------------------------------------- */
.buatpermalinkblogger{
  border: 1px solid #E4E4E4;
  padding: 5px;
  background: #F4F4F4;-moz-border-radius:5px;
}

.buatpermalinkblogger a{
  background:none;
}

img.float-right {
  margin: 5px 0px 0 10px;
}

img.float-left {
  margin: 5px 10px 0 0px;
}

Kemudian Tambahkan scrip ini dibawah kode <data:post.body/> yang kedua
<div class='buatpermalinkblogger'>
<center><small>Semoga artikel tentang <u><b><a expr:href='data:post.url'><data:post.title/></a></b></u> bermanfaat untuk anda dan jika ingin mencopy artikel ini mohon untuk meletakkan link dibawah ini sebagai sumbernya.
<br/><strong><data:post.url/></strong><br/>
</small></center>
<textarea cols='65' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>
<a expr:href='data:post.url'><data:blog.pageName/></a></textarea>

<!-- Facebook Button BEGIN -->
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/>
<!-- Twitter Button END -->

<!-- Twitter Button BEGIN -->
<a class='twitter-share-button' data-via='koderator' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
<!-- Twitter Button END -->

<!-- Google+ Button BEGIN -->
<g:plusone annotation='inline' size='medium'/>
<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<!-- Google+ Button END -->
</div>

Biasanya script diatas akan terhimpit antara kode <data:post.body/> dengan </b:if> jika blog kita sudah mempunyai Read More, dan untuk hasil lebih jelasnya bisa dilihat dibawah ini.
Bila ada yang kebingungan tentang tutorial ini dan belum berhasil untuk menerapkan diblognya silahkan bisa ditanyakan lewat komentar, terimakasih :D.

Membuat Cloud Animasi Dengan CSS3

Membuat Cloud Animasi Dengan CSS3 - Animasi dengan CSS - Bagi anda yang suka mendesig blog atau semacamnya mungkin trik ini bisa anda coba, disini saya akan coba share tutorial tentang Animasi CSS3 yang agak rumit namun saya coba ulas dengan semudah mungkin, jika sebelumnya kita sudah bahas tentang basic dari blogger misal tentang Cara Membuat Permalink, Read More, Breadcrumbs, dan Related Post maka kita akan beranjak ke yang lebih "WEW" katakanlah, bukan bermaksud untuk copas tapi karena saya sudah baca aturan di blog itu maka saya tidak akan melanggar peraturannya saya mengambil tutorial ini dari blog tetangga tidak maling tentunya judul artikelnyapun saya buat sama dan sobat bisa menemukan tutorial aslinya di http://djogzs.blogspot.com jika sulit untuk memahami tutorial yang saya buat ini.

Membuat Cloud Animasi Dengan CSS3

Sebelum menuju ke tutorial lebih baik backup terlebih dahulu template Anda, gunanya untuk berjaga-jaga apabila ada kesalahan dalam penerapan tutorial ini.
Disini ada 2 Style Cloud yaitu awan putih biasa dan yang kedua awan akatsuki, bagi yang ngefans sama naruto mungkin alternatif yang kedua bisa jadi pilihan. Maaf kalo demonya tidak bagus karena template ini kurang suport.

Penerapannya letakkan kode CSS diatas ]]></b:skin> dan HTML dibawah kode <body>

1. Style Awan Putih

CSS
#awan1 {position: absolute;
z-index: 0;
width:100%;
margin-top: 0px;
height: 0px;}
.awan1 {
width: 200px; height: 60px;
background: #ffffff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.awan1:before, .awan1:after {
content: '';
position: absolute;
background: #ffffff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.awan1:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
.putih1 {
-webkit-animation: moveclouds1 15s linear infinite;
-moz-animation: moveclouds1 15s linear infinite;
-o-animation: moveclouds1 15s linear infinite;
}
.putih2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds1 25s linear infinite;
-moz-animation: moveclouds1 25s linear infinite;
-o-animation: moveclouds1 25s linear infinite;
}
.putih3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds1 20s linear infinite;
-moz-animation: moveclouds1 20s linear infinite;
-o-animation: moveclouds1 20s linear infinite;
}
.putih4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds1 18s linear infinite;
-moz-animation: moveclouds1 18s linear infinite;
-o-animation: moveclouds1 18s linear infinite;
}
.putih5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds1 20s linear infinite;
-moz-animation: moveclouds1 20s linear infinite;
-o-animation: moveclouds1 20s linear infinite;
}
@-webkit-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}

HTML
<div id='awan1'>
<div class='awan1 putih1'/>
<div class='awan1 putih2'/>
<div class='awan1 putih3'/>
<div class='awan1 putih4'/>
<div class='awan1 putih5'/></div>

2. Style Awan Akatsuki

CSS
#akatsuki{position: absolute;
z-index: 0;
width:100%;
margin-top: 0px;
height: 0px;}
.akatsuki {
width: 200px; height: 138px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsDC2-X6KLRSd4UBhKBn47oGqnH1MWFvoymixYfTuIIZhM1Y4XKqsXkNfpLm8XddezTbOknXUt8xMoqF-XEXAmpA0z_F4Zd54eKBNy5Cv053Nd9Gc0FvEo926CPB3tGWe71l3AR4prVz8/s1600/Untitled-1.png") no-repeat top center;
position: relative;
}

.awanmerah1 {
-webkit-animation: moveclouds2 15s linear infinite;
-moz-animation: moveclouds2 15s linear infinite;
-o-animation: moveclouds2 15s linear infinite;
}
.awanmerah2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds2 25s linear infinite;
-moz-animation: moveclouds2 25s linear infinite;
-o-animation: moveclouds2 25s linear infinite;
}
.awanmerah3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds2 20s linear infinite;
-moz-animation: moveclouds2 20s linear infinite;
-o-animation: moveclouds2 20s linear infinite;
}
.awanmerah4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds2 18s linear infinite;
-moz-animation: moveclouds2 18s linear infinite;
-o-animation: moveclouds2 18s linear infinite;
}
.awanmerah5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds2 20s linear infinite;
-moz-animation: moveclouds2 20s linear infinite;
-o-animation: moveclouds2 20s linear infinite;
}
@-webkit-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}

HTML
<div id='akatsuki'>
<div class='akatsuki awanmerah1'/><div class='akatsuki awanmerah2'/><div class='akatsuki awanmerah3'/><div class='akatsuki awanmerah4'/><div class='akatsuki awanmerah5'/></div>
Jika misal ada yang error dan template meminta untuk menambahkan kode </div> maka tambahkanlah 5 kode </div> dibawah HTML

Jangan lupa mampir kesini yak :D

Cara Membuat Tombol dengan CSS

Cara Membuat Tombol dengan CSS - Tombol CSS - CSS Button. Alhamdulillah bisa posting terus, kali ini akan posting tentang design, seputar css lagi tentunya, dengan CSS kita bisa membuat hal hal yang unik, kalau kita kreatif. Misalnya saja seperti tombol dibawah ini, atau biasanya kita sering menemui website-website yang menggunakan tombol dari CSS saat kita mengklik Register ataupun Logout pada sebuah website. Tombol-tombol seperti itu biasanya dibuat dengan menggunakan CSS. Oke deh langsung saja :

Cara Membuat Tombol dengan CSS
Berikut scriptnya:

CSS
tempatkan kode ini diatas kode ]]></b:skin>

.button {
  cursor:pointer;
  background:#328EC5;
  background:-webkit-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-moz-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-ms-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-o-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  padding:0.75em 1.5em;
  font:normal 1em Calibri,Arial,Sans-Serif;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  text-shadow:0px -1px 0px rgba(0,0,0,0.3);
  -webkit-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  -webkit-border-radius:0.7em;
  -moz-border-radius:0.7em;
  border-radius:0.7em;
  border:none;
}

.button:hover {
  background:#399BD6;
  background:-webkit-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-moz-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-ms-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-o-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  -webkit-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
  -moz-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
  box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
}

.button:active {
  background:-webkit-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-moz-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-ms-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-o-linear-gradient(bottom, #88CEF7, #399BD6);
  background:linear-gradient(bottom, #88CEF7, #399BD6);
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}


HTML / Kode pemanggil tombol
<a class="button" href="#">Get Started</a>



DEMO







Cara Menampilkan Widget Hanya Pada Homepage atau Postingan Saja

Cara Menampilkan Widget Hanya Pada Homepage atau Postingan Saja - Widget diHomePage saja - Widget diPostingan saja - Berkereasi dan menampilkan blog sebagus mungkin mungkin itulah yang dicapai oleh sebagian blogger, dan untuk mendukung mewujutkan hal itu saya coba share sedikit tutorial tentang Menampilkan Widget Hanya Pada Homepage atau Postingan Saja, kegunaannya cukup membantu karena untuk meminimalisir widget kita yang terlalu kebanyakan muncul di home page.
Demo


Pada halaman demo bisa kita lihat bahwa Blog Archive hanya ada pada home page saja dan pada halaman post tidak terlihat. jika ingin menggunakan tutorial ini berikut cara-caranya

Menampilkan Widget Hanya pada Homepage Saja
<b:if cond='data:blog.url == data:blog.homepageUrl'>content widget
</b:if>

Menampilkan Widget Hanya pada Postingan Saja
<b:if cond='data:blog.pageType == &quot;item&quot;'>
content widget
</b:if>

untuk penerapannya cari widget dengan judul yang ingin di tampilkan/hilangkan
misal ingin mencari widget Statistik maka kita cari nama tersebut
<b:widget id='HTML3' locked='false' title='Statistik' type='HTML'>
setelah ketemu lalu letakkan seperti pada contoh dibawah ini (lihat kode berwarna biru)

<b:widget id='HTML3' locked='false' title='Statistik' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Advertisement