Tuesday, February 13, 2018

Cara Membuat Kotak Berlangganan Keren di Blog

✔ Loker Kesehatan Comment

Cara Membuat Kotak Berlangganan (Subscription Blog) yang Keren dan Responsive pada Blog - Kotak berlangganan sangatlah penting bagi blog, terutama blog yang mempunyai trafik tinggi. Kotak berlangganan ini dapat membantu dan meningkatkan jumlah pembaca, karena jika ada pengunjung yang mengisi email pada kotak berlangganan ini, maka orang tersebut akan mendapatkan informasi tentang artikel terbaru di blog sobat.

 Widget ini saya dapatkan dari blognya mbak Arlina. Langsung saja ke cara pemasangan widget kotak berlangganan ini:
  1. Pergi ke Blogger.
  2. Masuk ke menu Template.
  3. Pilih Edit HTML.
  4. Tambahkan kode CSS di bawah ini dan paste sebelum kode ]]></b:skin> atau </style> (warna bisa sobat atur sendiri susuai selera)
    5. /* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#B22222;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#374760;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#800000;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}
  5. Selanjutnya tambahkan kode HTML ini di antara tag pembuka <body> dan tag penutup </body>. Jika seperti blog ini yang terletak di footer, maka tambahkan kode berikut di bagian bottombar.
    6. <div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO GET</span> FREE UPDATES!</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=PasuruanCommunity' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=PasuruanCommunity&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='PasuruanCommunity'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='Submit'/></form>
</div>
</div>
</div>
  6. Jangan lupa untuk ganti kode yang ditandai PasuruanCommunity dengan ID feedburner blog sobat.
  7. Simpan template dan lihat hasilnya.
Jika ingin di pasang di bawh postingan, bisa paste kode HTMLnya di bawah widget share atau sebelum related-post. Sekian posting tentang Cara Membuat Kotak Berlangganan Keren di Blog. Terima kasih sudah berkunjung semoga bermanfaat.

Cara Membuat Tombol Share Keren, Ringan & Responsive di Blog

✔ Loker Kesehatan 1 Comment

Cara Membuat Tombol Bagikan Responsive, Ringan, dan Keren di Blogger - Tombol Berbagi ini sangat bermanfaat bagi blog karena pengunjung dengan mudah membagikan artikel blog tersebut ke beberapa sosial media, seperti facebook, twitter, google+, dan linkedin. Dengan begitu blog kita semakin ramai setelah dibagikan oleh pengunjung yang lain. 
Share button ini sangat ringan karena tanpa javascript dan tentunya enak di pandang. Dan berikut adalah tutorial pembuatan tombol share pada blog:

  1. Pergi ke Blogger.
  2. Masuk ke menu Template.
  3. Pilih Edit HTML.
  4. Copy kode CSS di bawah ini dan paste sebelum kode ]]></b:skin atau </style>
    5. /* CSS Share Button */
.tombol-berbagi-wjw{display:block;position:relative;height:33px;line-height:43px;padding:5px;border-top:2px solid #f0f0f0;margin:auto}
.tombol-berbagi-wjw-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-wjw-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #f0f0f0}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-wjw a{color:#999;transition:all .3s;}
.tombol-berbagi-wjw a:hover{color:#7cb0ed}
  5. Kemudian copy kode HTML di bawah ini dan paste setelah kode <data:post.body/> (mungkin sobat menemukan banyak kode tersebut, pilih yang kedua dari yang terkahir terakhir atau coba satu per satu).
    6. <!-- Tombol share media sosial -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-wjw'>
<div class='tombol-berbagi-wjw-fb'>
<a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='tombol-berbagi-wjw-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
</div>
  </div>
</b:if>
  6. Simpan template.
Cukup mudah kan sob? Oke cukup sekian Cara Membuat Tombol Share Keren, Ringan & Responsive di Blog. Terima kasih sudah berkujung mas bro dan mbak sis, semoga artikel ini bermanfaat bagi mas bro dan mbak sis.

Cara Menampilkan Profil Author Responsive di Bawah Postingan Blog

✔ Loker Kesehatan Comment

Cara Membuat Profil Author Responsive di Bawah Postingan Blog - Setelah kemarin saya membuat posting tentang cara membuat sticky widget pada blog, kali ini saya membagikan tentang cara membuat profil author yang responsive dan ada media sosialnya, kurang lebihnya seperti gambar di atas.

Kelebihan dari Profil author ini banyak sekali antara lain: Responsive, simple, elegan, keren, ada sosial medianya, fast loading, ringan karena tanpa javascript, multi author (lebih dari satu penulis blog).

Caranya sangat mudah, dan berikut adalah tutorial pembuatan Profil Author Responsive di Bawah Postingan:
  1. Pergi ke Blogger.
  2. Masuk ke Template.
  3. Pilih Edit HTML
  4. Copy kode CSS di bawah ini dan paste di atas kode ]]></b:skin>
 atau </style>
.authorboxwrap{Font-family: Sans Serif;background:#f8f8ff;margin:10px auto 10px;padding:10px;overflow:hidden;border:1px solid #fafafc;}
.avatar-container {float:left;margin-right:15px;border: 0px solid silver;padding: 3px;} 
.avatar-container img{width:110px;height:auto;} 
.author_description_container h4{font-family:Sans Serif; font-weight:700;font-size:20px;display:block;margin:0;margin-bottom:1px} 
.author_description_container h4 a{color:#ef4824} 
.author_description_container h4 a:hover{color:#404040} 
.author_description_container p{margin:0;color:#888;font-size:100%;margin-bottom:4px;font-family: Sans Serif;} 
.authorsocial a{display:inline-block;text-align:center;margin-right:10px} 
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:50%;transition:all .3s;} 
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;} 
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;} 
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;} 
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}

  • Kemudian copy juga kode HTML di bawah ini dan paste di bawah kode <data:post.body/> kedua dari yang terakhir. Atau juga bisa paste di atas kode  <div id='related-posts'>

    • b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='authorboxwrap'> <div class='authorboxfull'> <div class='avatar-container'>
<a href='#'> <img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/> </a> </div> <div class='author_description_container'>
<h4>Author <a href='#' rel='author'><data:post.author/></a></h4>
<p> <data:post.authorAboutMe/> </p>
<div class='authorsocial'>
<a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram'/></a>
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube'/></a>
 <div class='clr'/> </div> </div> </div> </div> <div style='clear:both'/> </b:if>

  • Jangan lupa ganti tanda # dengan link sosial media sobat.
  • Save template dan lanjut ke tutorial selanjutnya.
  • Pergi ke blogger > Tata Letak > Edit widget Blog Posts.
     
  •  Beri tanda centang pada Tampilkan Profil Pengarang Di Bawah Pos.
  • Jika deskripsi pada akun Google Plus sobat belum di atur, maka sobat atur terlebih dahulu di Google Plus sobat, klik link berikut Google+, edit pada bagian Cerita > Perkenalan.
  • Jika sudah tekan Oke dan lihat hasilnya.


    • Saya kira cukup mudah asalkan sobat teliti. Cukup sekian posting yang saya buat tentang Cara Menampilkan Profil Author Responsive di Bawah Postingan. Terima kasih sudah berkunjung dan semoga ini bermanfaat bagi sobat semua.

    Cara Membuat Sticky Widget pada Sidebar Blog 100% WORK

    ✔ Loker Kesehatan Comment

    Cara Membuat Responsive Sticky Widget di Sidebar Blog - Sticky widget adalah sebuah widget yang akan mengikuti jika di scroll atau widget yang melayang mengikuti halaman yang digulirkan ke atas dan ke bawah. Pada sticky widget ini bisa berhenti pada footer (bisa ditentukan sendiri tempat berhentinya) dan tidak menggangu pada tampilan ponsel. Sobat bisa lihat gambar di atas, seperti itulah Sticky widgetnya.

    Sebenarnya di luar sana banyak sekali tutorial membuat sticky widegt, tapi banyak yang tidak responsive, mengganggu pada tampilan ponsel, dll. Saya sendiri sudah mencari yang terbaik dan akhirnya ketemu kemudian saya bagikan di posting ini.

    Oke jika sobat penasaran, langsung saja ke tutorial pemasangannya:
    1. Pergi ke Blogger.
    2. Masuk ke menu Template.
    3. Pilih Edit HTML.
    4. Copy code di bawah ini dan paste di atas kode </body>
      5. <script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#PopularPosts2').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
    var el = $('#PopularPosts2');
    var stickyTop = $('#PopularPosts2').offset().top;
    var stickyHeight = $('#PopularPosts2').height();
    $(window).scroll(function() {
      var limit = $('#subscribe-css').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer"
      var windowTop = $(window).scrollTop();
        var lebar = $(window).width();
      if ((stickyTop < windowTop)&&(lebar > 759)) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>
    5. Perhatikan code tersebut, ganti kode yang ditandai dengan ID yang akan dibuat sticky.
      • #PopularPosts2 : ID widget / konten yang akan dibuat sticky
      • #subscribe-css : ID widget / konten untuk membatasi fungsi sticky
    6. Kemudian tambahkan kode CSS berikut yang berfugsi untuk membatasi lebar widget tersebut saat keadaan sticky. Copy kode dibawah ini dan paste di atas </style> atau ]]></b:skin>
      7. #PopularPosts2{width:100%;max-width:300px}
]]>
    7. Ganti #PopularPosts2 dengan ID widget / konten yang dibuat sticky. Kalian bisa atur nilai lebarnya pada max-width:300px.
    8. Simpan template dan lihat hasilnya.
    Bagaimana? Apakah sobat berhasil mencobanya? Jika masih belum berhasil silakan coba lagi dan diteliti lagi. Jika waktu kalian paste kode CSSnya di atas </style> tetapi tidak bisa, coba kalian paste kode CSSnya di atas kode ]]></b:skin> . 

    Saya kira cukup sampai di sini saja posting tentang Cara Membuat Sticky Widget pada Sidebar Blog. Terima kasih sudah berkunjung dan semoga ini bermanfaat bagi sobat semua.

    Cara Membuat Daftar Isi (Sitemap) Otomatis di Blog Berdasarkan Label atau Kategori

    ✔ Loker Kesehatan Comment

    Cara Membuat Daftar Isi (Sitemap) Otomatis di Blog - Sitemap atau Daftar isi memliki fungsi sangat penting pada blog, karena bisa memudahkan pengunjung blog untuk menelusiri konten yang ada di blog sobat. Daftar isi juga bermanfaat untuk Pengoptimalan Mesin Pencari (SEO) karena menyajikan kata kunci yang benar yang sudah digunakan.

    Kalian bisa melihat contoh daftar isinya di sini CONTOH DAFTAR ISI.

     Cara membuat daftar isi sangat mudah sekali, jika sobat tertarik memasang daftar ini pada blog sobat secara otomatis dan berdasarkan label atau kategori yang ada, di tambah lagi jika ada posting terbaru, maka ada tulisan NEW pada daftar isi tersebut. Berikut adalah tutorial pembuatannya:
    1. Pergi ke menu Laman pada dasbor blogger.
    2. Selanjutnya klik Laman Baru.
    3. Jika sudah, beri nama  terlebih dahulu, terserah mau di isi Daftar Isi, Sitemap, atau yang lain.
    4. Lalu pilih mode HTML.
    5. Copy dan paste kode di bawah ini.
      6. <div dir="ltr" style="text-align: left;" trbidi="on">
<div class="jontor">
<script src="https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=teknomia_Load"></script>
</div>
<style type="text/css">.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .teknomia_Label{background:#4ECDC4;display:block;padding:12px;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:14px 'times new roman';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.teknomia_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style></div>
    6. Dan publikasikan.
    Saya kira cukup itu saja Tutorial Pembuatan Daftar Isi (Sitemap) Otomatis pada Blog Berdasarkan Label atau Kategori. Oke terima kasih sudah berkunjung, semoga posting ini bermanfaat bagi sobat.

    Cara Menghilangkan Icon Palu dan Obeng di Blog Secara Permanen

    ✔ Loker Kesehatan Comment
    Cara Mengilangkan Logo Palu dan Obeng di Blog - Banyak blogger yang menganggap icon palu dan tang itu menggangu, mungkin karena mungkin icon ini mengganggu pemandangan blog. Sebenarnya gambar palu dan tang ini sangat bermanfaar, yaitu untuk mengedit widget tanpa harus masuk ke dasbor blogger dulu. Karena fungsinya untuk memudahkan pengeditan widget, icon ini hanya terlihat oleh pemilik blog saja, pengunjung tidak akan melihatnya.

    Jika sobat merasa terganggu dengan icon palu dan tang ini, sobat bisa menghilangkannya secara langsung, berikut adalah cara menghilangkan logo palu dan tang:
    1. Pergi ke Blogger.
    2. Masuk ke menu Template.
    3. Pilih Edit HTML.
    4. Copy code di bawah ini dan paste di atas kode ]]><</b:skin>
      5. .quickedit{
display:none;
}
    5. Simpan template dan lihat blog sobat.
    Nah saya kira cukup itu Tutorial Menghilangkan Logo Palu dan Tang pada Blog. Terima kasih sudah berkunjung, semoga informasi ini bermanfaat bagi sobat.

    Cara Membuat Website atau Blog Menjadi Aplikasi Android

    ✔ Loker Kesehatan Comment

    Cara Mengubah Web / Blog Menjadi Aplikasi (apk) Andorid tanpa Coding - Andoid merupakan sistem operasi yang banyak dipakai pada saat ini. Dengan adanya android, kita menjadi mudah untuk mengakses segala sesuatu dengan ponsel pintar kita.

    Pada kali ini, saya akan membagikan cara membuat website atau blog menjadi aplikasi (apk) android tanpa menggunakan coding sama sekali yang prosesnya sangat cepat, mungkin hanya 1 menit jika semua sudah disiapkan. Oke langsung saja kita ke tutorial pembuatannya:
    1. Buka www.appsgeyser.com
    2. Kita login terlebih dahulu, klik LOGIN, kita bisa login menggunakan Facebook atau mendaftar baru, terserah kalian.
    3. Jika sudah, klik CREATE APP.
    4. Pilih Website
    5. Pada menu APP SETTINGS, dan pada bagian Website URL isi dengan alamat website / blog yang akan kita jadikan aplikasi. Kemudian klik NEXT.
    6. Pada menu APP NAME, isi nama aplikasinya.
    7. Pada menu DESCRIPTION, isi deskripsinya.
    8. Pada menu ICON, silakan upload Logo untuk aplikasinya. Lalu klik SUBMIT.
    9. Jika sudah terupload tinggal klik NEXT.
    10. Selesai, kalian tinggal download aplikasinya pada bagian Download your App.
    Cukup mudah bukan? Saya kira cara ini cukup mudah karena kita tinggal mengisi saja tanpa melakukan coding sama sekali. Sekian posting yang saya tulis mengenai Tutorial Membuat Website / Blog Menjadi Aplikasi Android. Semoga posting ini bermanfaat bagi sobat semua, dan terima kasih sudah berkunjung.
    Subscribe to: Posts (Atom)