Template Fajri Awesome Responsive Blogger

Template Fajri Awesome Responsive Blogger - Hey bro ketemu lagi,kali ini admin akan bagikan sebuah template yang keren,bagus dan fast loading.Jika dilihat lihat template ini mirip dengan Templatenya kang ismet dan template subculture fix.

Yang bagusnya adalah  templatenya penuh dengan warna warna yang menarik apalagi labelnya yang pake CSS yang bagus.Dan juga ada dialog box dan notifikasi komentar.Penasaran ? yuk lihat penampakannya !

Template Fajri Awesome Responsive Blogger

Template Fajri Awesome Responsive Blogger
Template Fajri Awesome Responsive Blogger


Feature
  • Responsive
  • SEO
  • Flat UI Design
  • Vertical Menu
  • Dialog Box
  • Notification Comment
  • Search Box
  • Label Cloud Flat UI Design
  • Popular Post Widget Design
  • Blockquote Design
  • SyntaxHighlighter
  • And Many More


Modification

<script type='text/javascript'>

//<![CDATA[

var originalTitle = document.title;

var cm_config = {

  home_page: "http://fajriawesome.blogspot.com/",

    max_result: 20,

    t_w: 40,

    t_h: 40,

    summary: 9999,

    new_tab_link: false,

    ct_id: "comments-container",

    new_cm: " Komentar Baru!",

    interval: 30000,

    alert: true,

    alert: function (total) {

        document.getElementById("show-total").innerHTML = '<strong class='total-show'>' + total + '</strong>';

        document.title = '(' + total + ') ' + originalTitle

    }

};

$('#notif').click(function () {

    $("#cm-wrapper").css({

        right: "0px"

    });

    $("#bg, #notif2").show();

    $("#notif").hide()

});

$('#notif2').click(function () {

    $("#cm-wrapper").css({

        right: "-381px"

    });

    $("#bg, #notif2").hide();

    $("#notif").show()

});

$('#bg').click(function () {

    $("#cm-wrapper").css({

        right: "-381px"

    });

    $("#bg, #notif2").hide();

    $("#notif").show()

});

document.getElementById('notif').onclick = function () {

    document.title = originalTitle;

    $('#show-total').hide()

};

document.getElementById('show-total').onclick = function () {

    document.title = originalTitle;

    $('#show-total').hide();

    $("#cm-wrapper").css({

        right: "0px"

    });

    $("#bg").show()

};


//]]>

</script>
Yang diwarnai merah ganti dengan URL blog anda.


Dialog

Tekan Ctrl + F lalu ketik "Dialog Box" kemudian ganti dengan dialog/pesan yang
Tekan Ctrl + F lalu ketik "Masukkan Deskripsi Dialog" ganti dengan deskripsi blog nya.


Post Thumbnail

Cari code berikut

.thumbnail.Label1 {background: none repeat scroll 0% 0% #277FBF; }

.thumbnail.Label2 {background: none repeat scroll 0% 0% #F7C56C; }

.thumbnail.Label3 {background: none repeat scroll 0% 0% #3DA3A2; }

.thumbnail.Label4 {background: none repeat scroll 0% 0% #2A7BBA; }
Yang berwarna merah,kuning,hijau,biru ganti dengan Label anda agar Thumbnail nya berwarna.Jika labelnya lebih,copy salah satu kodenya kemudian pastekan dibawah kode label4



Menu

Cari kode ini dan ubah sesuai keinginan.

<ul class='sidebar-menu'>

<li class='active'><a expr:href='data:blog.homepageUrl'>

<i class='icon-home'/>

<span>Home</span></a></li>

<li class='sub-menu'>

<a href='javascript:;'>

<i class='icon-eye-open'/>

<span>Blogger Plugin</span>

<span class='arrow'/>

</a>

<ul class='sub' style='overflow: hidden; display: none;'>

<li><a href='#' title='CSS'>CSS</a></li>

<li><a href='#' title='SEO'>SEO</a></li>

<li><a href='#' title='jQuery'>jQuery</a></li>

<li><a href='#' title='Navigation'>Navigation</a></li>

<li><a href='#' title='Komentar'>Komentar</a></li>

</ul>

</li>

<li class='sub-menu'>

<a href='javascript:;'>

<i class='icon-heart'/>

<span>Social</span>

<span class='arrow'/>

</a>

<ul class='sub' style='overflow: hidden; display: none;'>

<li><a href='#' title='Facebook'>Facebook</a></li>

<li><a href='#' title='Google'>Google</a></li>

<li><a href='#' title='Twitter'>Twitter</a></li>

</ul>

</li>

<li>

<a href='#'>

<i class='icon-user'/>

<span>About Me</span>

</a>

</li>

<li>

<a href='#'>

<i class='icon-envelope'/>

<span>Contact</span>

</a>

</li>

<li>

<a href='#'>

<i class='icon-lock'/>

<span>Privacy Police</span>

</a>

</li>

<li>

<a href='#'>

<i class='icon-refresh'/>

<span>Link Exchange</span>

</a>

</li>

<li class='sub-menu'>

<a href='javascript:;'>

<i class='icon-star'/>

<span>More</span>

<span class='arrow'/>

</a>

<ul class='sub' style='overflow: hidden; display: none;'>

<li><a href='#' title='Ragam'>Ragam</a></li>

<li><a href='#' title='Lain-lain'>Lain-lain</a></li>

</ul>

</li>

</ul>

</div>


Back To Top

Tata Letak -> Tambahkan Gadget : HTML/Javascript lalu paste kode dibawah ini kemudian simpan.

<script type="text/javascript" >

var scrolltotop={

    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control

    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).

    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},

    controlHTML: '<img src="http://3.bp.blogspot.com/-mHWR8NrAqZ0/VDHS1eyxkfI/AAAAAAAAGQc/P04JK26ggGU/s1600/Untitled.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"

    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner

    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links



    state: {isvisible:false, shouldvisible:false},



    scrollup:function(){

        if (!this.cssfixedsupport) //if control is positioned using JavaScript

            this.$control.css({opacity:0}) //hide control immediately after clicking it

        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)

        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists

            dest=jQuery('#'+dest).offset().top

        else

            dest=0

        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);

    },



    keepfixed:function(){

        var $window=jQuery(window)

        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx

        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety

        this.$control.css({left:controlx+'px', top:controly+'px'})

    },



    togglecontrol:function(){

        var scrolltop=jQuery(window).scrollTop()

        if (!this.cssfixedsupport)

            this.keepfixed()

        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false

        if (this.state.shouldvisible && !this.state.isvisible){

            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])

            this.state.isvisible=true

        }

        else if (this.state.shouldvisible==false && this.state.isvisible){

            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])

            this.state.isvisible=false

        }

    },

   

    init:function(){

        jQuery(document).ready(function($){

            var mainobj=scrolltotop

            var iebrws=document.all

            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode

            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')

            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')

                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})

                .attr({title:'Scroll Back to Top'})

                .click(function(){mainobj.scrollup(); return false})

                .appendTo('body')

            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text

                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text

            mainobj.togglecontrol()

            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){

                mainobj.scrollup()

                return false

            })

            $(window).bind('scroll resize', function(e){

                mainobj.togglecontrol()

            })

        })

    }

}



scrolltotop.init()

</script>
Sudah selesai pada pertemuan kita ini.Jika diredesign bisa jadi lebih keren bro templatenya.Te
Author : Fajri Andaviar

Ingat,dilarang mengubah Credit/Author template ini untuk menghargai kerja keras sang pembuat template ini.
Previous
Next Post »

4 komentar

Click here for komentar
13 Maret 2015 15.04 ×

Mantap gan (y)

www.samuelarasmichael.blogspot.com

Balas
avatar
admin
13 Maret 2015 15.19 ×

Izin sedot, kwkwkwkw

Balas
avatar
admin
14 Maret 2015 07.58 ×

thanks agan...

http://tikayulilestari.blogspot.com/

Balas
avatar
admin
14 Maret 2015 18.05 ×

Wah, lumayan juga ya mas. Tapi blog saya yang : http://skapjcilveks.blogspot.com juga mungkin ga kalah kerennya. Btw. Thanks and keep posting bro!.

Balas
avatar
admin

Dilarang meletakkan Link Aktif
Dilarang SARA,Menghina,Melecehkan dan Lainnya yang bersifat Mengancam.
Dilarang SPAM dan lainnya yang merusak reputasi blog ini

Gunakan Name/Url untuk mendapatkan backlink,komentar yang relevan akan diterima. Show Conversion Code Hide Conversion Code Show Emoticon Hide Emoticon

Thanks for your comment