Selamat Datang Pengunjung Blog-iyunk
Tampilkan postingan dengan label Original. Tampilkan semua postingan
Tampilkan postingan dengan label Original. Tampilkan semua postingan

 BlogaZine adalah gaya baru para blogger (khususnya indonesia) untuk berkreasi, perkembangan CSS memang sangat berpengaruh kepada dunia blogger, dengan perkembangan CSS yang sangat pesat ini para blogger mulai berkreasi menjadikan tampilan blognya seperti majalah.

Blogazine Sendiri berasal dari Blog + Magazine(Majalah). manfaatnya untuk blogaziner sendiri sangat banyak di antaranya untuk menambah Kreatifitas,memperbanyak ilmu Coding dal Lain-Lain.

Dengan adanya langkah ini saya pun tidak mau kalah dengan para Blogaziner lain, saya juga mencoba konsep blogazine ini untuk penerapanya di blog ini saya sudah terapkan pada laman Author. dan untuk penerapan penuh saya sudah terapkan pada blog saya ---> IyunKZine.blogspot.com :D.

saya sudah manerapkan konsep blogazine bagaimana dengan anda...?

Kali ini saya akan share template yang simpel banget langsung aja gk usah banyak bacot


DEMO

DONLOD

#Pengaturan Menu
<nav id='nav'><ul>
<li><a href='/'>Home</a></li>
<li><a href='/'>Home</a></li>
</ul></nav>

Ganti yang berwarna Merah Dengan Link Kamu
Ganti yang berwarna Hijau Dengan Text Kamu

Sekian posting saya kali ini Terimakasi
Melanjutkan posting yang sebelumnya tentang Loading blog dengan @keyframe. kali ini saya akan share loading blog seperti pada blog ini di bagian sidebar.


Penerapan Pada Blog

Letakkan kode di bawah ini di atas kode ]]></b:skin>

@-webkit-keyframes css3Animasi{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(10)}} @-moz-keyframes css3Animasi{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(10)}} @-ms-keyframes css3Animasi{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(10)}} @-o-keyframes css3Animasi{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(10)}} @keyframes css3Animasi{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(10)}}

Letakkan Kode di bawah ini di bagian code css bagian yang ingin di terapkan trik ini

-webkit-animation:css3Animasi 4s ease-in;-moz-animation:css3Animasi 4s ease-in;-ms-animation:css3Animasi 4s ease-in;-o-animation:css3Animasi 4s ease-in;animation:css3Animasi 4s ease-in}
Kali ini saya akan share tutorial membuat loading blog dengan @KeyFrame. tehnik ini lah yansaya terapkan di blog ini, contohnya adalah pada menu navigasi dan sidebar blog ini hampir sama seperti itu tutorial yang saya share kali ini.


Dari Kiri Ke Kanan

Penerapan Pada Blog

Letakkan kode di bawah ini di atas kode ]]></b:skin>

@-webkit-keyframes zoomnav{from{-webkit-transform:translate(-1000px,0px);opacity:0}to{-webkit-transform:translate(0px,0px);opacity:1}} @-moz-keyframes zoomnav{from{-moz-transform:translate(-1000px,0px);opacity:0}to{-moz-transform:translate(0px,0px);opacity:1}} @-ms-keyframes zoomnav{from{-ms-transform:translate(-1000px,0px);opacity:0}to{-ms-transform:translate(0px,0px);opacity:1}} @keyframes zoomnav{from{transform:translate(-1000px,0px);opacity:0}to{transform:translate(0px,0px);opacity:1}}

Letakkan kode di bawah ini di bagian code css bagian yang ingin di terapkan trik ini

-webkit-animation:zoomnav 2s;-moz-animation:zoomnav 2s;-ms-animation:zoomnav 2s;animation:zoomnav 2s
hehehe agak ribetya tulisanya gini contohnya: misalnya saya mau terapkan trik ini di bagian navigasi jadi taruh kode tadi di CSS bagian navigasi

CONTOH:
#navigiasi{
-webkit-animation:zoomnav 2s;-moz-animation:zoomnav 2s;-ms-animation:zoomnav 2s;animation:zoomnav 2s
}
kali ini baru satu trik yang saya bagi tentang loading blog trik yang ke dua akan saya share di posting selanjutnya jadi tunggu posting selanjutnya :D
Untuk pertama kalinya saya share template di blog ini nama template ini adalah PurpleCSS v1. template ini saya buat sendiri, membutuhkan waktu yang tidak sedikit untuk membuat template ini jadi tolong hargai kerja keras yang sudah saya lakukan dengan tidak menghapus Credit pada bagian footer.
ScreenShotnya kurang lebih seperti gambar di atas


Pengaturan Menu
<div id='nav'><ul>
<li class='atas'><a href='/'>Home</a></li>
<li class='bawah'><a href='/'>SiteMap</a></li>
<li class='atas'><a href='/'>About</a></li>
<li class='bawah'><a href='/'>Contact</a></li>
<li class='atas'><a href='/'>BackLink</a></li>
<li class='bawah'></li>
<li class='atas'></li>
<li class='bawah'></li>
<li class='atas'></li>
<li class='bawah'></li>
<li class='atas'></li>
<li class='bawah'></li>
<li class='atas'></li>
<li class='bawah'></li>
</ul>
</div>
Demo 

Sebernernya posting ini sudah banyak di temukan di google. dan sekedar untuk yang belum tau kali ini saya akan posting hal ini di blog saya langsung aja

Tag Conditional di gunakan untuk meletakkan sebuah widget atau sejenisnya yang lain di tempat-tempat yang kita inginkan langsung aja ini kodenya:


Menampilkan widget hanya di Homepage


<b:if cond="data:blog.url == data:blog.homepageUrl">
ini tempat kode widget
</b:if>


Menampilkan widget selain di Homepage


<b:if cond="data:blog.url != data:blog.homepageUrl">
ini tempat kode widget
</b:if>


Menampilkan widget hanya di Archivepage


<b:if cond="data:blog.pageType == "archive"">
ini tempat kode widget
</b:if>


Menampilkan Widget selain di Archivepages


<b:if cond="data:blog.pageType != "archive"">
ini tempat kode widget
</b:if>


Menampilkan widget hanya di Staticpages


<b:if cond="data:blog.pageType == "static_page"">
ini tempat kode widget
</b:if>


Menampilkan widget pada URL atau halaman tertentu


<b:if cond="data:blog.url == "alamatpostingan"">
ini tempat kode widget
</b:if>
karena keterbatasan waktu tag-tag di atas belum semua saya tulis mungkin saya akan update postingini di lain waktu.
Setelah sebelumnya saya telah menjelaskan cara menganti scrollbar pada blog kali ini saya akan share cara buat auto readmore pada blog. Posting auto readmore di tujukan unutk meringkan sebuah posting blog pada halaman home page ini di tujukan agar pengunjung bisa lebih leluasa melihat posting-posting lain yang ada di sebuah blog
Kitamulai langkah membuat auto Readmore

Pertama masuk halaman Edit HTML Blog anda
kemudian temukan kode </head> 
Salin Kode di bawah ini,dan letakkan di atasnya:

<script type="text/javascript" src="http://blog.iyunk21.com/readmore.js"> </script>
Setelah itu cari Kode ini <data:post.body/>
Ganti Kode Tersebut dengan Kode di bawah ini
<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='readmore'><a expr:href='data:post.url'>READ MORE>></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/>
 </b:if>
dengan begini auto readmore sudah terpasang di blog anda, tapi Bila anda masih kurang lega dengan tulisan READ MORE>> anda bisa menambahkan CSS di Tombbol readmore anda

untuk menanbahkan CSS ikuti langkah dibawah ini:

Cari Kode ]]></b:skin>

Kemudian salin kode dibawah ini,dan letakkan di atas kode ]]></b:skin>


.readmore{padding:5px;background:#f60;color:#fff}
SekianPosting kali ini nantikan posting selanjutnya di blog ini :D





Karena saya merasa blog saya yang sebelumnya yaitu http://iyunk-blog.blogspot.com kebanyakan postingnya  bukan asli postingan saya. di blog ini saya akan posting sebisa saya saya akan posting sebisa saya sayaakan berbagi ilmu yang saya bisa jadi nantikan posting blog ini :D
Langganan: Postingan (Atom)