Cara Membuat Author Box Ala Bungfrangki

Pasti kalian tau bukan blog nya bungfrangki.com seorang desainer template ini sangat sudah populer di kalangan para Blogger pada pembahasan kali ini saya akan memberikan tutorial lagi buat kalian yaitu Cara Membuat Author Box Ala Bungfrangki pasti para blogger ingin membuat seperti author tersebut.

Author ini juga di lengkapi dengan deskripsi dan sosial media seperti facebook, twitter dan instagram nah jika kalian penasaran yuk simak berikut ini tutorial nya.
Cara Membuat Author Box Ala Bungfrangki 

1. Kalian buka akun Blogger kalian
2. Pilih Template > Edit HTML
3. Cari kode ]]></b:skin> atau bisa cari kode </style>

/* Post author info */
.post_info{background:#ece3d2;margin:30px auto 10px;display:block;position:relative;padding:35px 25px 25px;overflow:hidden}
.post_info:before{content:'';display:block;width:100%;height:88px;background:#5fa281;position:absolute;top:0;left:0;right:0;z-index:0}
.author-photo{display:inline-block;float:left;position:relative;z-index:1}
.about-author{z-index:1;position:relative;display:inline-block;float:right;width: calc(100% - 125px);}
.author-photo img{width:90px;height:90px;border-radius:99em;z-index:1;border:7px solid #f3ebdc}
.author{font-size:20px;font-weight:700!important;padding:0!important;display:block;margin:17px 0 32px!important;text-transform:uppercase}
.author a,.author a:hover{color:#fff}
.author-desc{font-size:15px;font-weight:400;line-height:1.6em;color:#777;}
ul.sosmed-saya{display:block;overflow:hidden;margin:20px auto 10px;padding:0}
ul.sosmed-saya li{display:inline-block}
ul.sosmed-saya li a,ul.sosmed-saya li.site{display:inline-block;margin-right:7px;margin-bottom:5px;font-size:15px;padding:0;width:45px;height:30px;line-height:30px;color:#545454;text-align:center;border-radius:2px}
ul.sosmed-saya li a:hover{opacity:1}
ul.sosmed-saya li a.efbi{background-color:#4a7fbb}
ul.sosmed-saya li a.tewe{background-color:#00aced}
ul.sosmed-saya li a.iige{background-color:#c4906e}
ul.sosmed-saya li.site{font-family:Consolas,Monaco;width:auto;background-color:#fff;border:1px solid #dbd2c0;padding:0 15px;font-style:italic;font-size:14px;color:#999}

4. Setelah itu kalian cari kode </article> taruh kode berikut ini dia bawah kode tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<span class='author-photo'>
<img alt='Mister Design' src='https://lh3.googleusercontent.com/-J6XerpE97Qk/AAAAAAAAAAI/AAAAAAAAAX8/KwPT40tab9Q/s60-p-no/photo.jpg' title='Mister Design'/>
</span>
<span class='about-author vcard'>
<span class='author'>
<span class='fn'><a class='g-profile' href='https://plus.google.com/105611265751427996934' itemprop='url' rel='author' title='author profile'><span itemprop='name'>Mister Design</span></a></span>
</span>
<span class='author-desc'>
Hanya bermodalkan Notepad, Paint, dan alat - alat bawaan windows ku mulai membuat postingan satu - persatu.
</span>
<ul class='sosmed-saya'>
<li><a class='fb' href='https://www.facebook.com/mrsdzgn/' itemprop='sameAs' rel='nofollow' title='Facebook Pribadi'><i aria-hidden='true' class='fa fa-facebook'/></a></li>
<li><a class='tw' href='https://www.twitter.com/afriza_mohammad' itemprop='sameAs' rel='nofollow' title='Twitter Pribadi'><i aria-hidden='true' class='fa fa-twitter'/></a></li>
<li><a class='ig' href='#' itemprop='sameAs' rel='nofollow' title='Instagram Pribadi'><i aria-hidden='true' class='fa fa-instagram'/></a></li>
<li class='site'>http://mrdzgn.blogspot.com</li>
</ul>
</span>
</span>
  </b:if>

Jika sudah masukan CSS tambahan berikut ini untuk menyempurnakan Author tersebut. 

 @media screen and (max-width:480px){.author-photo{display:block;float:none}.about-author{display:block;float:none;width:100%;text-align:center}.author{text-align:center;display:block;margin:15px 0 25px!important}.author-desc{text-align:center}ul.sosmed-saya{display:block;text-align:center}ul.sosmed-saya li{display:inline-block;text-align:center}.author a,.author a:hover{color:#888}

Nah sobat Blogger semoga bisa bermanfaat buat kalian dan gunanya dengan bijak.

Perbedaan VPS, Web Hosting dan Cloud Hosting

Perbedaan VPS, Web Hosting dan Cloud Hosting - Pada artikel kali ini ivhaa akan memberikan informasi buat kalian yang belum tau tentang VPS, Web hosting dan Cloud hosting banyak juga layanan untuk mengonline kan website bisnis, perusahaan atau personal dan lainnya.

Jika kalian mencari di mensin pencari atau google pasti ada beberapa perbedaan yaitu VPS, Web hosting dan Cloud hosting artikel kali ini kita akan membahas tentang 3 perbedaan tersebut mungkin dari 3 tersebut menurut kalian sama atau tidak??

Banyak yang mengira itu sama saja tapi sebenarnya itu tidak sama berikut ini adalah ulasan tentang VPS, Web hosting dan Cloud hosting.

1. Web Hosting

Web hosting adalah layanan yang menawarkan sewa space atau hosting berbasis web. Jika kalian menggunakan layanan ini kalian memiliki kewenangan untuk menggunakan nama web yang dimiliki nantinya nama web tersebut akan di arahkan ke hosting tersebut dengan menggunakan beberapa aplikasi tertentu serta beberapa konfigurasi tertentu.

Sebuah layanan web hosting juga menyediakan beberapa platform untuk ngeblog untuk menghubungkan nama blog kalian platform yang dimaksud itu seperti joomla, PHP, MyQl dan masih banyak lagi.

Tidak cuma itu saja jika kita menyewa layanan web hosting tersebut kalian di beri kewenangan untuk menejemen web atau aplikasi di dalam layanan hosting tersebut seperti cpanel, menguploud, edit dan mendownloud.

Layanan ini jika kita menyewanya terbilang murah dari yang lain ini juga sudah ketersediaan server yang di berikan oleh layanan tersebut penyedia biasanya memberikan layanan server ini satu aja tetapi di bagi - bagi jadi tidak kalian saja yang menggunakan layanan tersebut. Akibatnya jika server tersebut down jadi semua web yang ada di server tersebut juga offline atau tidak bisa di akses itu kekurangan jika kita menyewa web hosting untuk blog kita.

2. VPS (Virtual Privat Server)

VPS adalah layanan menyewa server secara virtual jika kita bandingkan dengan layanan web hosting sangat jauh banget.

Perbedaan yang sangat mendasar dari VPS dan Web hosting adalah kebebasan dalam mengkonfigurasi system dan platform yang kita gunakan perbedaan lainnya yaitu harga sewa nya jika memakai VPS kita membayar lebih mahal dari pada web hosting.

Persamaan VPS dan web hosting yaitu sama menggunakan satu server yang sama dan dishare di bagi - bagi dengan software virtual. Dengan itu akan mendapatkan OS gues server sendiri.

Jika di banding kan kualitas VPS dengan Layanan web hosting tidak jauh berbeda cuma VPS kita mempunyai kewenangan untuk konfirguri aplikasi yang kita inginkan.

3. Layanan Cloud Server

Cloud servet yaitu layanan server yang menyatukan menjadi satu yang bergfungsi sebagai disk virtual atau stroge. Tidak cuma begitu aja layanan server di jadikan menjadi satu untuk bertugas sebagai computing node (Cpu viertual) dan lainnya.

Jika kita menyewa layanan ini memungkinkan para penyewa memiliki saure VLAN. Fitur masing - masing yang tak kalah menarik  dari layanan ini ialah setiap pengguna bisa menaikkan atau menurunkan resoure server seperti jumlah CPU dan RAM dengan kebutuhan sesuai kita mau.

Nah demikian perbedaan antara VPS, Hosting dan Cloud server semoga bisa bermanfaat buat kalian semua yang belum tau tentang hal ini.

Sumber Gambar : bungfrangkin.com

Goomsite AMP HTML Blogger Template Premium Pro

Syukurlah alhamdulillah ivhaa bisa berbagi template buat kalian pada template kali ini yaitu template yang di pakai penyedia template yaitu Goomsite.net mungkin belum banyak yang tau kalau goomsite.com adalah penyedia template asal Indonesia.

Description :

Template ini sudah support AMP HTML tidak cuma itu template ini juga sangat ringan banget serta memiliki tampilan grid template ini sangat cocok untuk blog personal karena sangat elegan tapi pro banget, template ini support mobile frendly dan SEO.

Demo
Click here



Buy Now
Click here

Fitur :

• HTML AMP yang valid
• Responsif
• Seo Friendly
• Kotak
• Menu TopMenu Utama
• Menu Bawah
• Slider Carausel
• Pencaria
• Komentar Disqus
• Berlangganan footer
• Postmeta (Hiden)
• Breadcrumbs (Hiden)
• Berbagi Sosial
• Lebih...

Jika kalian tertarik dengan template ini langsung aja beli aja sobat karena template ini tidak gratis dan harganya lumayan sesuai dengan fitur nya.

Cara Membuat Post Pegination Di Blogger

Alhamdulillah pada kesempatan kali ini ivhaa masih bisa berbagi tutorial buat kalian semua nah pada tutorial kali ini saya akan membahas tentang Cara Membuat Pos Page Pagination Di Blogger mungkin post seperti ini di gunakan untuk blog di wordpress tapi untuk saat ini akan memberikan tutorial nya untuk blog dari Blogger.

Mungkin kalian pernah berkunjung ke situs besar pasti ada pos page nya bukan nah seperti itulah ntr itu demo nya

Kalian tertarik dengan tutorial ini yuk langsung simak aja artikel berikut ini

Cara Membuat Post Page Pagination Di Blogger 

1. Kalian login Blogger
2. Pilih > Template > Edit HTML
3. Kalian cek dulu kode berikut ini apakah ada atau belum di blog kalian jika memang sudah ada lebih baik jangan di masukan

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

4. Gunakan CSS berikut ini diatas kode ]]></b:skin>

.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 2px solid #007bfd;
font-weight: 900;
padding: 6px 36px;
color:#007bfd;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #007bfd;
color: #fff;
text-decoration: none;
}
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 2px solid #007bfd;
font-weight: 900;
padding: 6px 36px;
color:#007bfd;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #007bfd;
color: #fff;
text-decoration: none;
}

5. Kemudian taruh kode di bawah di atas kode </head>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#007bfd');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#007bfd');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#007bfd');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#007bfd');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#007bfd');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#007bfd');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#007bfd');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#007bfd');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#007bfd');
return false;
});
});
</script>

6. Jika sudah tinggal kalian save template

Kita sudah memasang kode atau struktur pada post page pegination untuk penerapan di artikel kalian tinggal masukan kode berikut ini di post kailan

<div class="content_1">
Teks pada Halaman 1 letakkan disini
</div>

<div class="content_2" style="display: none;">
Teks pada Halaman 2 letakkan disini
</div>

<div class="content_3" style="display: none;">
Teks pada Halaman 3 letakkan disini
</div>

<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>

Nah itu tadi dia pembahasan untuk kali ini semoga bisa bermanfaat buat kalian semua mungkin dari saya jika ada kesalahan mohon di manfaatkan. Happy Blogger 

Jobsmart.co.id : Situs Informasi Lowongan Kerja Terbaru di Indonesia

Assalamualaikum gays, di era sekarang ini semakin lama semakin sulit untuk mencari pekerjaan apalagi tambah hari malah banyak pengangguran di negeri ini, pada artikel kali ini ivhaa mau recomed nih buat kalian yang sulit mencari lowongan pekerjaan sana kesini tetapi tidak mendapatkan atau sudah lama tapi tidak panggilan.

Situs tersebut adalah Jobsmart.co.id situs inimenawarkan banyak informasi lowongan pekerjaan terbaru tidak cuma itu saja kalian bisa memilih pekerjaan sesuai dengan kepribadian mu serta skil apa yang kamu punya.

Gimana mantep bukan. . .  .

Mengapa Harus Jobsmart.co.id

Jobsmart.co.id adalah Situs lowongan terlengkap serta informasi yang selalu update di situs tersebut jadi jika ada lowongan baru pasti situs tersebut langsung update jadi tidak pernah ketinggalan informasi terkadang kita memilih situs untuk melihat lowongan kerja tapi hasil yang di dapat terkadang malah mengecewakan kita karena informasi yang di berikan situs tersebut kurang lengkap.

Lain dengan jobsmart ini situs ini menginformasikan lowongan pekerjaan terbaru dengan detail jadi kita bisa tau mana yang pas buat kita.

Kelebihan situs Jobsmart.co.id

Jomsmart.co.id ini memiliki kelebihan yang mungkin situs lain belum mempunyai nah berikut ini adalah kelebihan tersebut

Yang pertama yaitu tes kepribadian mungkin di situs lain belum ada tes seperti ini tes ini lebih mengenal kepribadian si calon pekerja yang terdaftar di situs tersebut. Tes tersebut dikemas sedimian rapinya oleh jobsmart salah satunya dengan bermain game jadi jangan takut untuk mengikuti tes tersebut.

Yang kedua yaitu dengan mengisi CV seperti pendidikan, pengalaman dan lainnya ini supaya perusahaan yang ingin mempekerjakan si calon pekerja bisa tau data diri kita dengan lengkap intinya seperti mengisi riwat hidup kita gays.

Yang ketiga yaitu kita interview langsung di situs tersebut ini sangat bagus buat kalian jadi bisa tunjukkan segalanya ke perusahaan tentang diri kalian jadi tidak usah takut seperti kita di interview langsung kita bisa pede jadinya.

Gimana masih bingung untuk cari lowongan pekerjaan dimana tinggal Download aja aplikasi jobsmart di smartphone kalian jadi bisa update informasi lowongan pekerjaan tersebut. 

Cara Memasang Back To Top Di Blogger

Mungkin di google sudah banyak artikel kali ini bahkan mungkin sudah mencapai ribuan di google, tapi back to top kali ini berbeda karena hanya menggunakan Javascript dan CSS biar tidak membebani blog gay

1. Login Blogger > Pilih Menu Template Terus klik > Edit HTML lalu simpan kode di bawah ini di bawah kode <head> atau sesudah </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika di blog sudah terpasang kode berikut lebih baik tidak usah di pasang lagi

2. Simpan kode di bawah ini di atas kode ]]></b:skin> atau kode </style>

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

3. Simpan Kode JQuary dan HTML ini di atas kode </body>

<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>

4. Simpan Template Dan Lihat Hasilnya

Fansmag Rensponsive Blogger Template Premium

Fansmag Rensponsive Blogger Template Premium - Alhamdulillah pada kesempatan kali ini ivhaa masih bisa berbagi template buat kalian semua template ini ivhaa dapat dari goomsite.com template tersebut rupanya sangat bagus makanya ivhaa mau berbagi untuk kalian semua jika di amati template tersebut persis seperti template flax mag wordpress template ya gays cuma yang membedakan cuma dari script dan plafrom nya saja.

Fitur Unggulan

• Desain Penuh Responsif
• SEO Siap
• Dukungan HTTPS (SSL)
• Untuk adsense
• RKPT Tinggi
• Menu lengket
• Menu MegaPemuatan cepat
• Advance Search Engine OptimizationTombol Berbagi Sosial (Tetap)
• Auto mengubah ukuran gambar kecil
• Menggunakan Disqus Comment
• Menggunakan Komentar Blogger
• Related Post dengan Thumbnail2 kolom
• Sidebar Benar
• Breadcrumbs SEO (Hiden)Dyamic Heading
• Kesalahan Khusus 404 Halaman
• Kompatibel dengan browser utama (IE8 +, Mozilla, Chrome, Safari, Opera)
• Lebih...

Demo
Click here



Buy Now
Click here

Nah itu tadi Fansmag Responsive Blogger Template semoga Kalian tertarik dan jangan pernah hapus link kredit dari template tersebut ya gays Happy Blogging.  . .