Langsung ke konten utama

Ontohod V2 Responsive Template


Setelah beberapa kali saya mengeluarkan template yang premium akhirnya lunak juga hati saya untuk berbagi sebuah template gratis tapi rasa premium hehe .. Ontohod V2 Responsive Template ya itulah nama untuk template gratis kali ini . Sebenarnya Ontohod V2 ini termasuk pada golongan template dengan konsep unik , kenapa ? karena strukturnya yang beda dari template blogger pada umumnya atau bisa juga dikatakan " Berbau Vcard " dan didalamnya terdapat beberapa fitur menarik seperti recent post slider , fast loading dan kategori dengan konsep overlay dan untuk lebih jelasnya silahkan deh sobat lihat saja sendiri .

Demo - download 

Fitur lengkap Ontohod V2 Responsive Template 
  1. Recent Post Slider 
  2. Search Ajax Jquery
  3. Thereaded Comments 
  4. Fast Loading 
  5. Simple Design 
  6. Social Button 
  7. Category with Overlay 
  8. And more ... 
Saya tidak punya cukup waktu untuk membuat template ini full fitur jadi silahkan sobat kreasikan kembali . 

Setelah sobat berhasil memasang template ini ada beberapa hal yang harus diperhatikan 
Pada Recent Posts Slider silahkan cari kode ini

$(document).ready(function () {
PostSlide({
blogURL:"http://reactorontohod.blogspot.com/",
MaxPost:8,
idcontaint:".my_slider",
ImageSize:785,
autoplay:true,
tagName:false
});
});

Silahkan ganti kode yang saya blok dengan url blog kalian
Untuk Recent posts kedua silahkan cari kode ini

var homePage = "http://duniaradioku.blogspot.com/",
numPosts = 5;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><strong><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></strong></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);

Silahkan ganti kode yang saya blok dengan url blog kalian
Pada bagian kategori silahkan meluncur pada bagian </body> dan cari kode ini

$(document).ready(function () {

        $('.followSelector').socialProfiles({
            animation: 'chain',
            blur: true,
            home: 'search/label/Maniax',
            category: 'search/label/Paranoid',
            link: 'search/label/Protect',
            about: 'search/label/Phobia'
        });
    });

untuk menautkan link label cukup ganti dengan label sobat
Contoh : http://reactorontohod.blogspot.com/search/label/Paranoid
Kalu sobat ingin membuat lebih dari empat kategori silahkan cari dan encode script nya hehe

Mungkin itu yang bisa saya kasih saat ini untuk selebihnya silahkan sobat renungkan karena saya benar-benar tidak punya banyak waktu .

Komentar

  1. Simple dan keren kang :D tapi cukup mewakili semuanya :) dan full jquery hehehe...

    BalasHapus
    Balasan
    1. hehe biasa kang made in mepet waktunya sama kebutuhan jadi alakadarnya saja ...

      Hapus
  2. Wah template yang sangat keren sekali... :)

    BalasHapus
  3. udah versi 2,, simple dan keren pastinya kang :)

    BalasHapus
    Balasan
    1. Tinggal versi 3 nya hehe .. biasa alkadarnya sob !!

      Hapus
  4. Kreatif banget kang..semi2 virtual card gitu...efek jquerynya lembut banget :-bd

    BalasHapus
    Balasan
    1. ya lumayan lah mas .. selembut sutera hehe

      Hapus
    2. O ya itu kang..share button kok ga berfungsi yach..hehehe
      coba linknya share pake ini
      <a class="bonfire-facebook-button" expr:href="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url" href="" rel="nofollow" target="_blank"></a>
      <a class="bonfire-twitter-button" expr:href="&quot;http://twittter.com/share?url=&quot; + data:post.url" href="" rel="nofollow" target="_blank"></a>
      <a class="bonfire-googleplus-button" expr:href="&quot;https://plus.google.com/share?url=&quot; + data:post.url" href="" rel="nofollow" target="_blank"></a>

      mungkin aja cocok

      Hapus
    3. Itu memang sengaja gak di isi link mas .. entah mau untuk button share atau button akun mas .. jadi terserah yg pake'y saja

      Hapus
    4. Owh maksud'y yang diketerangan author blog ini ? ya memang belum sih mas mungkin saya coba yg itu

      Hapus
    5. Sorry kang kodenya saya parse jadi ga jfix...

      yang ini :

      expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank'
      expr:href='"http://twittter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'
      expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'

      Hapus
    6. Udah ko mas .. kebetulan ada bekas yg dulu hehe

      Hapus
  5. Gak banyak widget tapi tampil penuh elegance.. khas created by mas Ruly deh
    Acung jempol, keren abis mas :)

    BalasHapus
  6. memang keren nih yang namanya Ontohod heuheu,,,( baturmah teu ngartieun meureunya Ontohod itu apa hahaha ) aya aya wae yeuh urang Cianjur hahaha

    BalasHapus
    Balasan
    1. Padahal deketna jeng borokokok nya kang heuheu ...
      tong disebut urg cianjur kang teu kieu-kieu acan mah wkwkwkwk

      Hapus
  7. mantep euy ontohod deh...borokokok teh :P

    BalasHapus
  8. template nya itu seo friendly gak?

    BalasHapus
  9. Wah ini cocok untuk protofolio kayaknya yah.

    BalasHapus
    Balasan
    1. Kurang cocok sob . cocoknya untuk blog curhat hehe

      Hapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition: