05/10/17

Membuat Notifikasi Show Hide Melayang

By TUTORIALJIB on May 10, 2017

Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-0oalQQLwQKM/WQx8vaPD3SI/AAAAAAAAF78/dl0_adns2UcOeTAKRUujesV9Wx2BHL6AgCLcB/s1600/NotifikasiKeyframe.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Notifikasi Show Hide Melayang dengan Animasi Keyframe" border="0" height="422" src="https://2.bp.blogspot.com/-0oalQQLwQKM/WQx8vaPD3SI/AAAAAAAAF78/dl0_adns2UcOeTAKRUujesV9Wx2BHL6AgCLcB/s640/NotifikasiKeyframe.png" title="Notifikasi Show Hide Melayang dengan Animasi Keyframe" width="640" /></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
Ide membuat notifikasi ini datang mendadak 😲 dan langsung saya coba buat untuk saya publikasikan di blog ini. Notifikasi ini melayang dan tombolnya saya coba pasang di kiri tengah (mungkin bagi yang kurang cocok bisa di ubah posisinya), selain itu pada tombol dan kotak notif saat di klik memperlihatkan efek yang lembut dan elegan (menggunakan animasi keyframe).</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Yup, bagi yang sering liat style <a href="http://www.idblanter.com/2016/06/membuat-material-design-threaded-comment-di-blog.html" target="_blank">komentar material design (masign)</a> pasti kenal dengan desain kotak notifikasinya, mirip-mirip seperti style komentar template masign.<br />
<br />
<div style="text-align: center;">
<a class="buttonx" href="https://codepen.io/Idblanter/full/aWLGNj" target="_blank" title="Preview"><b><span style="font-size: large;">Preview</span></b></a></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
Sobat tertarik untuk membuatnya? silahkan ikuti tutorial dibawah ini :<br />
<br />
<b rel="quote">Pastikan sudah terdapat jQuery dan CSS Material Icons pada blog sobat.</b><br />
<br />
Letakan <b>CSS Material Icons</b> tepat di atas kode <code></head></code><br />
<br />
<pre><code><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/></code></pre>
<br />
1. Masukan kode CSS dibawah ini tepat di atas kode <code>]]></b:skin></code> atau <code></style></code><br />
<br />
<pre><code>/* BLANTER Notif Box Created by Idblanter.com */
#notif-wrapper{position:fixed;width:100%;z-index:999}
.blanternotif{background:#d32f2f;color:#FFF;width:50px;height:50px;border-radius:100%;position:fixed;z-index:999;bottom:45%;left:20px;-webkit-animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notifklik;animation-duration:5s;animation-iteration-count:infinite;animation-name:notifklik;transition:all 5s ease-in-out}
.blanternotif i{color:#FFF;font-size:25px;margin:11px 10px 10px 13px;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:notificon;animation-duration:2s;animation-iteration-count:infinite;animation-name:notificon;transition:all 2s ease-in-out}
@keyframes notifklik{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes notificon{0%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(-30deg)}}
@keyframes notifbox{0%{transform:rotateZ(-45deg);visibility:visible;opacity:0;bottom:68%;left:78px}100%{transform:none;visibility:visible;opacity:1;bottom:41%;left:110px}}
.notifbox{padding:20px;border-radius:3px;position:fixed;resize:none;line-height:1.5;z-index:999;left:110px;bottom:41%;max-width:30rem;background:#d32f2f;border:1px solid #d32f2f;color:#fff;font-size:13px;box-shadow:0 1px 1px 0 rgba(0,0,0,0.07),0 1px 1px 0 rgba(0,0,0,0.06);display:inline-block;opacity:0;visibility:hidden;transition:.4s ease-in-out}
.notifbox:before{content:"";width:0;height:0;position:absolute;top:-.7px;left:-15px;border-width:8px;border-style:solid;border-color:#d32f2f #d32f2f transparent transparent;display:block}.blanterxE5CD{display:none!important}#notif-wrapper.aktif .blanterxE5CD{display:block!important;animation-name:none!important}#notif-wrapper.aktif .blanterxE7F4{display:none!important}
.notifbox.aktif{-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;-webkit-animation-name:notifbox;animation-duration:1s;animation-iteration-count:1;animation-name:notifbox;transition:all 1s ease-in-out;opacity:1;visibility:visible}
@media screen and (max-width:680px){.notifbox:before{display:none}.notifbox{left:0%!important;bottom:0}@keyframes notifbox{0%{left:0!important}100%{left:0!important}}}</code></pre>
<br />
<br />
2. Letakan kode HTML notifikasi dibawah ini tepat di bawah kode <code><body</code> atau di atas kode <code></body></code><br />
<br />
<pre><code><div id='notif-wrapper'>
<a class='blanternotif' href='javascript:;' title='Notifications'><i class='material-icons blanterxE7F4'>&#59380;</i><i class='material-icons blanterxE5CD'>&#58829;</i></a>
<div class='notifbox'>
Blogger semakin lama semakin berkembang, jadi kita harus bisa menyesuaikan perubahan dan menggunakan kreatifitas untuk menyempurnakannya.
</div>
</div></code></pre>
<br />
<br />
3. Letakan Javascript dibawah ini tepat di atas kode <code></body></code><br />
<br />
<pre><code><script type='text/javascript'>
$(document).ready(function(){$(".blanternotif").click(function(){$(".notifbox,#notif-wrapper").toggleClass("aktif");});});
</script></code></pre>
<br />
<br />
Simpan Template, dan lihat hasilnya.<br />
<br />
<b>Lihat Juga : <a href="http://www.idblanter.com/2017/04/masign-orange-premium-responsive-blogger-template.html" rel="nofollow">Masign Orange Premium Material Design Blogger Template</a></b><br />
<br />
<em rel="note">Notifikasi ini bisa diisi pesan yang berbeda-beda di setiap postingan, sobat hanya perlu merubah tutorial <b>nomer 2</b>, dengan hanya memindahkan kode HTML notifikasi ke postingan mode HTML.</em><br />
<br />
Semoga bermanfaat. 😊</div>
</div>

Updated at: May 10, 2017

Membuat Autoload Page Navigation Dengan Saat Scroll di Blog

By TUTORIALJIB on May 10, 2017

<i><img alt="Membuat Autoload Page Navigation on Scroll di Blog" src="https://1.bp.blogspot.com/-vhHfVUq-IEI/WH3dZVpiLtI/AAAAAAAAFRU/Vb5LAA7qpWwHgbGlZKrBSYR__shGn0MwwCLcB/s1600/Autoload%2BPost.png" /></i><br />
<i><br /></i>
<i>sambil menunggu template baru yang akan saya publikasikan di blog ini, ada baiknya saya memberikan tutorial terlebih dahulu untuk menambah pengetahuan sobat tentang script-script pada Blogger. 😄
</i><br />
<div style="text-align: left;">
<i><br /></i></div>
<div style="text-align: left;">
<i>Mungkin beberapa dari sobat sudah tau tentang <b><a href="http://serba-berbagi-ilmu.blogspot.com/2017/05/membuat-autoload-page-navigation-dengan.html">Autoload Page Navigation</a> </b>ini, yaitu sebuah script yang akan membuat page navigation default atau modifikasi yang sebelumnya harus di klik untuk menuju ke posting lama maka dengan script ini postingan akan <b>load otomatis</b> ketika halaman <b>di scroll </b>ke bawah.</i></div>
<div style="text-align: left;">
<i><br /></i></div>
<div style="text-align: left;">
<i>Script ini akan memudahkan pengunjung untuk melihat postingan lama berikutnya yang pastinya halaman tidak perlu melakukan loading lagi untuk menuju ke index posting lama.</i></div>
<div style="text-align: left;">
<i><br /></i></div>
<div style="text-align: center;">
<a class="buttonx" href="http://redesigneditor.blogspot.com/" target="_blank"><i><b><span style="font-size: large;">Lihat Demo</span></b></i></a></div>
<div style="text-align: center;">
<i><br /></i></div>
<div style="text-align: left;">
<i>Nah bagi sobat yang tertarik untuk memasangnya pada blog sobat silahkan ikuti tutorial di bawah ini:</i></div>
<div style="text-align: left;">
<i><br /></i></div>
<div style="text-align: left;">
<i>Langkah Pertama masuk ke Blogger > Template > Edit HTML > lalu tambahkan <b>Script</b> di bawah ini tepat di atas kode <code></head></code></i></div>
<div style="text-align: left;">
<i><br /></i></div>
<div style="text-align: left;">
<pre><code><i><b:if cond='data:blog.pageType == &quot;index&quot;'>
<script src='https://cdn.rawgit.com/blanter/design/7a672c5d/autoloadpost.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.ias({
    container : '.blog-posts',
    item: '.post-outer',
    pagination: '#blog-pager',
    next: '#blog-pager-older-link a',
    loader: 'https://4.bp.blogspot.com/-kpYZSwETm70/WH3S5iFyYdI/AAAAAAAAFRE/wsLi021UrfQhyAEGMnxVDZfyE_zWIfXuwCLcB/s1600/idblanterloader.gif'
});
  </script>
</b:if></i></code></pre>
</div>
<div style="text-align: left;">
<i><br /></i></div>
<div style="text-align: left;">
<i>Selanjutnya cari kode di bawah ini : 🔍</i></div>
<div style="text-align: left;">
<i><br /></i></div>
<div style="text-align: left;">
<pre><code><i><b:includable id='nextprev'>...</b:includable></i></code></pre>
</div>
<div style="text-align: left;">
<i><br /></i></div>
<div style="text-align: left;">
<i>Lalu ganti dengan kode di bawah ini : 😁</i></div>
<div style="text-align: left;">
<i><br /></i></div>
<div style="text-align: left;">
<pre><code><i><b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
      <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'/>
      </span>
    </b:if>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'/>
      </span>
    </b:if>
     <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'/>
    </div>
<b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
    </b:if>
      <div class='clear'/>
</b:includable></i></code></pre>
</div>
<div style="text-align: left;">
<i><br /></i></div>
<div style="text-align: left;">
<i>Simpan Template. ✅</i></div>
<div style="text-align: left;">
<i><br /></i></div>
<div style="text-align: left;">
<blockquote class="tr_bq">
<span rel="note"><i>Setiap Template memiliki script page navigation yang berbeda, hapus script page number navigation yang ada pada template sobat agar script autoload ini dapat berjalan dengan lancar.</i></span></blockquote>
</div>

Updated at: May 10, 2017

Blanter Kurin Grid Full Colored

By TUTORIALJIB on May 10, 2017

<img alt="Blanter Kurin Responsive Grid Blogger Template" src="https://2.bp.blogspot.com/-fE9BMP7YfTE/WCgGCTIfmmI/AAAAAAAAE_s/pDacpYZJHV0UBzxTTdSfdwcEzebUMGr_gCLcB/s1600/Blanter%2BKurin%2BTemplate.png" /><br />
<b><br /></b>
<b>Blanter Kurin Grid Full Colored </b>- Berasal Dari Blanter, setelah sebelumnya saya sudah membagikan template AMP (Premium), sekarang saya akan membagikan template hasil modifikasi dari template <b>Devotion Grid</b>. 😲 <br />
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Dari segi desain, template ini memiliki desain grid dengan 3 kolom footer, di bagian atas terdapat header, slot iklan, dan juga menu navigasi yang terlihat elegan dan simple 😎. Untuk menambah ke indahan template ini saya juga menambahkan Widget Recent Post by Label dan menyesuaikannya pada struktur template ini</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Dengan warna dasar Semacamnya Sayah Design Kemaren memberikan kesan tersendiri pada template ini, apalagi saya menggunakan banyak warna putih di setiap background header dan footer yang menjadikan template ini terlihat bersih. 😁</div>
<br />
<div class="download download-info">
<h1>
Demoo Dan Download </h1>
<ul>
<li><a href="http://demo-design1005.blogspot.com/">Demo</a></li>
<li><a href="http://shtme.co/PWquk">Download</a></li>
</ul>
</div>
<br />
<h3>
<b>Fitur Blanter Kurin Grid Blogger Template</b></h3>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Features</th><th>Availability</th></tr>
<tr><td>Responsive</td><td>True</td></tr>
<tr><td>Google Testing Tool Validator</td><td>True <a href="https://developers.google.com/structured-data/testing-tool?url=http%253A%252F%252Fblanterkurin.blogspot.com%252F" rel="nofollow" target="_blank">Cek</a></td></tr>
<tr><td>Mobile Friendly</td><td>True <a href="https://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Fblanterkurin.blogspot.com" rel="nofollow" target="_blank">Cek</a></td></tr>
<tr><td>SEO Ready</td><td>True</td></tr>
<tr><td>Menu Navigation</td><td>True</td></tr>
<tr><td>2 Column Grid</td><td>True</td></tr>
<tr><td>3 Column Footer</td><td>True</td></tr>
<tr><td>Sidebar</td><td>True</td></tr>
<tr><td>Ads Ready</td><td>True</td></tr>
<tr><td>Recent Post by Label</td><td>True</td></tr>
<tr><td>Breadcrumbs</td><td>True</td></tr>
<tr><td>Big Popular Posts Thumbnail</td><td>True</td></tr>
<tr><td>Post Info</td><td>True</td></tr>
<tr><td>Share Post</td><td>True</td></tr>
<tr><td>Multi Author Box</td><td>True</td></tr>
<tr><td>Related Posts</td><td>True</td></tr>
<tr><td>Emoticon</td><td>True</td></tr>
<tr><td>Back To Top</td><td>True</td></tr>
<tr><td>Support Update 💕</td><td>Premium Only</td></tr>
<tr><td>And Much More...</td><td>-</td></tr>
</tbody></table>
</div>

Updated at: May 10, 2017

Download Game Need For Speed Offline

By TUTORIALJIB on May 10, 2017

<div dir="ltr" style="text-align: left;" trbidi="on">
games yang sekrang lagi ngetren di dalam games racing need for speed world offline yang tadi bisa bermain secara online di jaman 2013 saya berman games need for speed world secara online tapi kenapah pas pada tahun 2015 games need for speed world ga bisa di main kan secara online secara seluluhan teryata server games need for speed world telah di tutup .saya gat tau ke napah padahal games need for speed world offline paling papuler dan asik games balap mebol secara online .dari games games ke bayakn di halaman google adalah tentang petuwalangan dan games tembak sperti <b><span style="font-size: large;"><a href="http://forum.gemscool.com/main.forum" rel="nofollow" target="_blank">Gemscool</a> </span></b>point blank dan lost saga ,saudah sudah bosan sama games  Arcade ,waktu saya cari games yang bapalap mobil secara online di halamn google teryata ga ada ,ada juga games <b><a href="https://steamcommunity.com/sharedfiles/filedetails/?id=463231324" rel="nofollow" target="_blank"><span style="font-size: large;">DRIFT CITY</span></a> Online</b> bisa di main secara online tapi mobil persi cemen anda bisa lihat di SS di google .<br />
<br />
Nah dari situ mencari games need for speed world yang bisa di main secara offline saya udah car link link download need for speed world offline pada akhirnya ke temu juga langsung saja ,saya isntal need for speed world offline di cp saya mengunakan winsows xp rm 2gb teryata wrok bisa di main games need for speed world offline di winosws xp ke atas nah sakrang saya kan mebagikan Link download need for speed world offline pc biyar anda ge panasaran sama games  need for speed world offline  anda bisa langsung saja download  need for speed world offline pc full version di bawa ini<br />
<br />
<div style="text-align: center;">
<span style="font-size: x-large;">Download Need For Speed World Offline</span></div>
<div style="text-align: center;">
<span style="font-size: large;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Download Need For Speed World Offline" border="0" height="200" src="https://2.bp.blogspot.com/-IyPvpcdcrVo/WDVXle1XP1I/AAAAAAAAAcg/kLAJg6DTBaEyYHoZC4nkfUN2lyvFhWC3gCLcB/s320/Download%2BNeed%2BFor%2BSpeed%2BWorld%2BOffline.jpg" title="Download Need For Speed World Offline" width="320" /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Download Need For Speed World Offline" border="0" src="https://4.bp.blogspot.com/-Sb31_y4PFDA/WDVXk46j6sI/AAAAAAAAAcY/kteRYbI5H38phwZq9m5fMPjBwIThRjGCACLcB/s1600/Need%2BFor%2BSpeed%2BWorld%2BOffline.jpg" title="Download Need For Speed World Offline" /></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
<h3>
<b>Download Need For Speed World Offline installer terbaru </b></h3>
</div>
<ul>
<li>Download : <a href="http://sfl.ink/p2BR" rel="nofollow" target="_blank"><b><span style="font-size: large;">Need For Speed World Offline</span></b></a> : MeGa</li>
<li><b>Passwrod</b> <b>:</b> <input class="password" style="border-radius: 4px; border-width: 1px; color: black; font-size: 12px; height: 18px; margin-bottom: 0px; padding-bottom: 0px; padding-top: 0px; text-align: center; width: 140px;" type="text" value="gamekecil.com" /> - <b><span style="color: red;">Tested </span></b>Windows xp /7/8/9/10/ 32 BIT 64 BIT Wrok 100%</li>
</ul>
<h3>
Cara Isntal Need For Speed World Offline pc Full Version</h3>
<br />
<ul>
<li>1 Anda ambil file NFSWO_v1.1.exe </li>
<li>2 Tunggu Hingga selesay 100%</li>
<li>3 Udate Java Secara Online </li>
<li>4 Dan isntal  2-python-2.7.10</li>
<li>5 Jalan Setup NFSWO_v1.1.exe  SS destop anda </li>
<li>6 Samlamt Bermain </li>
<li><i><span style="color: red;"><b>Bila anda kurang </b></span></i>tau cara isntal Cara Need For Speed World Offline di pc anda anda bisa masuk halamn Sini <b><span style="color: lime; font-family: "georgia" , "times new roman" , serif;">Tutorial Cara Install Need For Speed World Offline Full Version Terbaru 2016</span></b></li>
</ul>
<br />
<div style="text-align: left;">
<br />
<b>Need for Speed: World Minimum Requirements</b><br />
<b><br /></b>
<br />
<ul>
<li>CPU:<span class="Apple-tab-span" style="white-space: pre;"> </span>Intel Core 2 Duo 2.0 GHz or AMD Athlon X2 4000+ at 2.1 GHz or greater</li>
<li>CPU Speed:<span class="Apple-tab-span" style="white-space: pre;"> </span>Intel Core 2 Duo 2.0 GHz or AMD X2 4000+ at 2.1GHz or greater</li>
<li>RAM:<span class="Apple-tab-span" style="white-space: pre;"> </span>2 GB</li>
<li>OS:<span class="Apple-tab-span" style="white-space: pre;"> </span>Windows XP Service Pack 3 / Windows Vista Service Pack 2 / Windows 7</li>
<li>Video Card:<span class="Apple-tab-span" style="white-space: pre;"> </span>512 MB DirectX 9.0 compatible. At least Shader Model 2.0 support</li>
<li>DirectX version:<span class="Apple-tab-span" style="white-space: pre;"> </span>DirectX version 9.0c</li>
<li>Sound Card:<span class="Apple-tab-span" style="white-space: pre;"> </span>Yes</li>
<li>Free Disk Space:<span class="Apple-tab-span" style="white-space: pre;"> </span>4 GB of space is required to install the game</li>
</ul>
<br />
Ya hanya ini saja yang bisa sampaikan ke pada anda tentang download Need For Speed World Offline installer Terbaru pc full version ,pasti games <a href="http://tutorialcid.blogspot.com/2017/02/need-for-speed-world-free-download-full.html" rel="nofollow" target="_blank">Need For Speed World Offline</a> bila anda belum pernah yobain games Need For Speed World Offline anda pasti akan asik karna games ini mirip gamesnfs most wanted NFS underground yang bila negbonti polisi sampai level tinggi dan anda akan mendapatkan uang untuk modifikasi mobil anda sendiri tentunya sangat asik yu tunggu apalagi gan download sekarang juga Need For Speed World Offline PC Full Version terbaru 2016 dah waslam<br />
<br />
<blockquote class="tr_bq">
<div style="text-align: center;">
<blockquote class="tr_bq">
<b>>>>>>VIDEO GAMES<<<<<</b></blockquote>
</div>
</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/njd7E7-Tpmo/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/njd7E7-Tpmo?feature=player_embedded" width="320"></iframe></div>
<div style="text-align: center;">
<br /></div>
<br />
Sumber : gamekecil.com<br />
<div>
<br /></div>
</div>
</div>

Updated at: May 10, 2017

Tutorialjib

Membuat Notifikasi Show Hide Melayang

Membuat Autoload Page Navigation Dengan Saat Scroll di Blog

Blanter Kurin Grid Full Colored

Download Game Need For Speed Offline

Popular Posts

Sponsor Iklan

Blog Archive