Loading...
ucapan
Tools Dahsyat untuk Membuat Konten Artikel Unik Tanpa Batas & Niche Apapun yang Anda Inginkan

Search, Edit, Spin, & Posting Ke Semua Blog Anda Cukup dari Satu Dashboard Saja.

Support WordPress, WordPress.com, Blogspot, Tumblr, & Twitter

Tools untuk Membuat Konten Artikel

Subsrcibe Ya.. Dan Tunggu Tutorial Lewat Video


Silahkan Pilih Warna Background Yang Cocok Buat Mata Anda


2015/03/05

Fajri Awesome Responsive Blogger Templates

Fajri Awesome Responsive Blogger Templates - Hay sobat, sudah lama saya tidak membuat artikel, akhirnya kali ini saya dapat membagikan Template yang sebelumnya saya gunakan, dan saya akan membagikan Template ini dengan Cuma-cuma (Gratis gan!).

Berikut Screenshot beserta Demo dan Download :

Fajri Awesome Responsive Blogger Templates
Fajri Awesome Responsive Blogger Templates


Features :

  • 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 Much More..

Modification :

Beberapa hal untuk diubah :

Cari kata "Deskripsi Blog" lalu ganti dengan Deskripsi Blog Sobat.
Cari kata "Keywords Blog" lalu ganti dengan Deskripsi Blog Sobat.
Cari kata "Kode Verifikasi Alexa" lalu ganti dengan kode verifikasi Alexa Blog Sobat.
Cari kata "Kode Verifikasi Google" lalu ganti dengan kode verifikasi Google Blog Sobat.
Cari kata "Url Google+" lalu ganti dengan Url Google+ Sobat.

Notifikasi :

Cari kode
<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>

Ganti "http://fajriawesome.blogspot.com/" dengan Url Blog Sobat.

Dialog Box :

  1. Cari kata "Dialog Box" (tanpa tanda kutip) lalu ganti dengan kata-kata Dialog/Informasi sobat.
  2. Cari kata "Masukkan Deskripsi Dialog." (tanpa tanda kutip) lalu ganti dengan Deskripsi sobat.

Post Thumbnail :

Cari kode
.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; }

Lalu ganti Label1,Label2,Label3,Label4 dengan Nama Label Post Sobat.

Vertikal Menu :

Cari kode
<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>

Lalu ubah sesuai keinginan Sobat.

Back To Top :

Tambahkan Javascript dibawah ini pada Tata Letak>Tambahkan Gadget>HTML/Javascript.
<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>

Cukup sekian Artikel saya kali ini, apabila ada kesalahan, atau permasalahan silahkan sobat berkomentar pada kolom yang telah disediakan, Terimakasih atas kunjungannya, Wassalam.

Pengelola Blog : ABDUL WAHAB

Judul : Fajri Awesome Responsive Blogger Templates
Ditulis oleh :Blog Shiro pada hari 2015/03/05
Rating Blog : 5 dari 5
Terima kasih sudah membaca artikel tentang Fajri Awesome Responsive Blogger Templates
Kalian boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman kalian.
Namun jangan lupa harap memberikan link aktif dofollow ke URL
https://fajriandaviar.blogspot.com/2014/12/fajri-awesome-responsive-blogger.html
Dan Terima kasih sekali lagi atas kunjungannya.

Kritik dan saran atau apapun bisa kalian sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak selalu online dikarenakan sibuk.

Title : Fajri Awesome Responsive Blogger Templates
Description : Fajri Awesome Responsive Blogger Templates - Hay sobat, sudah lama saya tidak membuat artikel, akhirnya kali ini saya dapat membagikan T...

36 komentar

Akhirnya Di Share Juga Ijin Sedot Yah Bang ^_^ + Kode Alexa Itu Saya Gx Punya Bang GImana GX Di Edit Kan Bisa Yah :/

Akhirnya di share juga, trimakasih ya sob dah bagi-bagi secara percuma :D

Sob Kok Header Saya Kan Otomatis Di tata Letak JAdi Bawah Terus Cara Hilangkan Header Nya GImana Gan :/

Saya senang pakai template buatan Mas Fajri, tampilannya selalu elegan :) Maaf mas, apa notifikasi bisa dihilangkan?

Itu Gan Cek In Ini Link Nya : https://kangkrishna.blogspot.com <<< Blog Dari Dulu Baru Saya Terusin :/

Kode Alexa + Kode Verifikasi Google Tidak Saya Edit Sob ^_^ Tapi Tidak Ada Masalah yang Error Cuma Nama Header Saya Jadi Di Bawah Gx bisa Dihilangkan Itu Saja Sob :D

izin share gan :)

Kang Ditun ggu Back Linnk Nya :D
http://kangkrishna.blogspot.com/p/blog-page.html
Sudah Saya Tempel Link Anda :ngakak:

Spesialis penyakit dalam, termasuk wasir atau wasir, pengobatan herbal
obat wasir

mantap template pribadinya di share..
klu boleh saya riqwest home page template Fuentes keren tuh home pagenya

woww ,, digratisin beneran ini.. kerenn mas.. ijin dunlut dulu

templatenya rasa premium :D ijin share ya mas

OOT nih mas.. lain kali bikin template yang ada gambar besarnya di atas kayak blog mas fajri ino lho :)

wah keren banget sob, ijin ctrl+d dulu ya :D

jika berkenan silahkan sob mampir lagi di postingan terbaru saya :)

Komentar ini telah dihapus oleh administrator blog.

akhirnya di share juga ni template,
ijin sedot gan

Want to earn some dollars...

coba diatur lagi buat menu samping, gk muncul, dan juga agak berat loadingnya. (y) mampir kalo ada waktu (y)

download om buat koleksi...

bang saya mau tanya ini penyebabnya karena apa ?? http://2.bp.blogspot.com/-r2JY3BShGfQ/VKkE6MuV89I/AAAAAAAAAvs/FAkzurT5go0/s320/Screenshot_2.png

Keren banget...ijin donlot buat koleksi

Bang Fajri Tolong Ganti Link Ane Di Lick Exchange Soalnya Ente Salah Masuk in Link Malah Pake Domain blospot.com :3

Fajri,,Silahkan Pasang Balik Link saya,,Link Kamu Udah Ane Tancapin Ke Blog Ane
Cek :http://bangwarsa.blogspot.com/p/blog-page_12.html
Link Saya Ada Di Halaman Itu Juga

Fitur Demo Dan Downloadnya ada Gak Sob ?

Bang kok popular psot di blog ku sama blog nya bang fajri kok beda?mohon penjelasannya dong...

thank linknya kakak admin :)

Cari kata "Kode Verifikasi Alexa" lalu ganti dengan kode verifikasi Alexa Blog Sobat.
Cari kata "Kode Verifikasi Google" lalu ganti dengan kode verifikasi Google Blog Sobat.
letak nyarinya dimana ya om? siapa tau aku punya

pengen download yg ini tp link downloadnya g ada yah gan ???

Gan,kok gak ada footernya ? update dong yang ada footernya

Mas, izin download nya yah. Thanks banget template nya bagus dan juga gratis. Btw, gak ada credit di footernya mas? Kalo ingin menambahkan dikasih kode html apa yah? Trims.

mas cara hide headernya gimana ya?

Terimakasih bro, saya suka template ini. Ijin share juga ya :D

Update link download dong mas :D

Keren bang.. Saya sudah aplikasikan salah satu templatenya di blog jualan saya.. Terima kasih sudah berbagi..

Berkomentarlah dengan bijak dan sopan, Dilarang menggunakan Link Aktif, Link Mati, Promo, dll.
Dan Berbagilah Jawaban atas apa kesulitan yang sobat-sobat lainnya dapatkan.
Mohon maaf jika ADA komentar atau pertanyaan tidak bisa cepat saya respon,
DIkarenakan Saya tidak selalu online selama 24 Jam.