Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe

Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe
Tutorial Membuat Notifikasi Show Hide Melayang dengan Animasi Keyframe

Pastikan sudah terdapat jQuery dan CSS Material Icons pada blog bapak.
Letakan CSS Material Icons tepat di atas kode </head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>

1. Masukan kode CSS dibawah ini tepat di atas kode ]]></b:skin> atau </style>
/* BLANTER Notif Box Created by Theboegis */
#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}}}

2. Letakan kode HTML notifikasi dibawah ini tepat di bawah kode <body atau di atas kode </body>
<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>

3. Letakan Javascript dibawah ini tepat di atas kode </body>
<script type='text/javascript'>
$(document).ready(function(){$(".blanternotif").click(function(){$(".notifbox,#notif-wrapper").toggleClass("aktif");});});
</script>

Simpan Template, dan lihat hasilnya.
Notifikasi ini bisa diisi pesan yang berbeda-beda di setiap postingan, bapak hanya perlu merubah tutorial nomer 2, dengan hanya memindahkan kode HTML notifikasi ke postingan mode HTML.

Cara Memasang Widget Popular Post di bawah Postingan

Cara Memasang Widget Popular Post di bawah Postingan
Jika bapak menggunakan template dengan ukuran wrapper yang berbeda dengan blog ini, maka bapak harus menyesuaikan ukuran popular post ini atau bisa juga dengan menambah list dari 6 menjadi 7. Untuk Responsive tentu saja widget ini sudah 100% Responsive, jika di smartphone widget ini akan berubah otomatis menjadi 2 kolom.

Langkah Pertama : Masuk ke Blogger > Edit HTML > Letakan kode di bawah ini tepat di bawah kode ]]></b:skin> atau di atas kode </head> memper mudah Ctrl + F
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
/* Popular Post Grid by IDBLANTER.COM */
#indexpopular ul li:hover .item-title a{color:#07ACEC!important}
#indexpopular ul{margin:0!important;padding:0!important}
#indexpopular ul li{width:150px;float:left;height:150px;border-radius:4px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);padding:10px!important;margin-right:10px;margin-bottom:15px}
#indexpopular .item-thumbnail{margin:0}
#indexpopular img{width:180px;height:100px}
#indexpopular .item-title{text-align:center;height:40px;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;float:left;overflow:hidden}
#indexpopular h2{text-align:center;background:#07acec;color:#fff;font-family:'Roboto',sans-serif;width:200px;padding:10px;margin:10px auto;text-transform:uppercase;border-radius:3px;font-size:15px}
</style>
</b:if>
</b:if>

Langkah Kedua : Bapak hanya perlu meletakan widget popular post di atas kode <footer atau lihat gambar :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:section class='indexpopular' id='indexpopular' maxwidgets='1' showaddelement='yes'>
<b:widget id='PopularPosts16' locked='false' title='Popular Of The Week' type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>6</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>false</b:widget-setting>
<b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 170, &quot;1:1&quot;) : data:post.thumbnail' var='image'>
<img alt='Popular Posts' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
<div class='clear'/>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
<div class='clear'/>
</b:if></b:if>

Simpan Template.

Popular Post ini hanya muncul di halaman index dan homepage, agar muncul di halaman postingan silahkan sobat hapus kode berikut ini :
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

dan jangan lupa untuk menghapus kode penutupnya.
</b:if>
</b:if>


By: www.idblanter.com

Cara Membuat Related Post di Blog Terbaru

Cara Membuat Related Post di Blog Terbaru
Tampilan related post yang menarik akan membuat pengunjung blog Bapak menjadi semakin tertarik untuk melihat post terkait, dengan style yang simple dan enak di pandang mata. Selain itu related post ini juga sudah responsive di semua perangkat yang menambah kesan elegan dan sesuai dengan berbagai device.
Tutorial Cara Membuat Related Post
Langkah Pertama : Letakan CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>
untuk mempercepat gunakan Ctl + F pada keyboard Pc bapak :D
/* Related Post CSS */
.related-post-item-tooltip{height:54px;overflow:hidden;width:50%;float:left;text-overflow:ellipsis;padding:10px}#related-post .material-icons{font-size:200%;right:20px;color:#607D8B;top:-1px;position:absolute}#related-post{background:#fff;margin:10px}.related-post{margin:30px 0 0;position:relative;padding:0 0 10px}.lol h4 i,.related-post h4 i{margin-right:14px}.lol h4,.related-post h4{border-radius:4px;color:#555;font-size:100%;font-family:'Roboto',Arial;text-transform:uppercase;text-align:left;font-weight:700;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);position:relative;padding:15px 20px 12px;margin:0 0 20px}.related-post-style-3,.related-post-style-3 li{margin:0 auto;padding:0!important;list-style:none;word-wrap:break-word}.related-post-style-3 li a{font-family:'Roboto',sans-serif;color:#666;font-weight:700!important;font-size:14px;line-height:1.4em}.related-post-style-3 li a:hover{color:#111}.related-post-style-3 .related-post-item{display:inline-block;float:left;border-radius:3px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);width:47%;margin-right:15px;height:auto;padding:0;margin-bottom:20px!important;position:relative;overflow:hidden}.related-post-style-3 .related-post-item:focus{outline:none;border:none}.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0;width:40%;height:100px;float:left}.related-post-style-3 .related-post-item-thumbnail img{width:100%;height:auto!important;transition:all 1s ease-out}.related-post-item:hover .related-post-item-tooltip a{opacity:1}.related-post-item-tooltip a{color:#666!important;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s;text-align:center;font-size:12px!important;position:relative}
@media screen and (max-width:480px){.related-post-style-3 .related-post-item{width:100%!important}.related-post-style-3 .related-post-item-thumbnail{height:100px!important}}

Langkah Kedua : Letakan kode di bawah ini tepat di bawah kode :
<div class='post-footer-line post-footer-line-3' atau di atas kode </article>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;&lt;h4&gt;&lt;i class=&#39;fa fa-bookmark&#39;&gt;&lt;/i&gt; Related Post&lt;/h4&gt;&quot;,
numPosts: 6,
summaryLength: 370,
titleLength: &quot;auto&quot;,
thumbnailSize: 300,
noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
moreText: &quot;Read More&quot;,
widgetStyle: 3,
callBack: function() {}
};
</script>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.idblanter.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+""):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'" title="'+t+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>

Simpan Template. 

by : www.idblanter.com

Cara Mewarnai Template Blog Dengan Animasi Gradasi Warna Dengan Mudah

Cara Mewarnai Template Blog Dengan Animasi Gradasi Warna Dengan Mudah
Cara Mewarnai Template Blog Dengan Animasi Gradasi Warna Dengan Mudah
Sebelum saya mulai saya mohon maaf kepada yang punya gambar ini ,, ane pake gk minta izin dulu... hehehe...
OK....
langsung aja ya?  Cara Mewarnai Template Blog Dengan Animasi Gradasi Warna Dengan Mudah

1. login dulu keblogger
2. Masuk Ke Template / Tema > Edit HTML
3. Copy CSS di bawah ini letakan kode di Atas ]]></b:skin> Atau </style>
.animasigradasi {
background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
background-size: 500% 500%;
-webkit-animation: ignielGradient 12s ease infinite;
-moz-animation: ignielGradient 12s ease infinite;
animation: ignielGradient 12s ease infinite;
}
@-webkit-keyframes ignielGradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes ignielGradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes ignielGradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

Anda juga bisa ganti warana Css ini dengan warana kesukaan nya : kode warna ya ane udah kasi tanda merah.  anda bisa ganti  warna pilih anda , bisa liat code warna disini ingat dengan cara [ kodewarna-koma-spasi baru kode warna lagi contoh : seperti #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f  ini ] jadi hasilnya seperti ini background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f)
Ok simpan template
pabila di ]]></b:skin> Atau </style> tidak bisa. : anda bisa  menepatkanya di atas code </head/> atau &lt;/head&gt;&lt; {untuk mempermudah menenmukanya Ctrl + F }  . tapi dengan cara menggunakan kode seperti ini :
</style>
kode Css disini....
<style>
4. Ok next deh ..Cara Penerapan Di Blog
contoh yg kita mau ubah adalah header
Tinggal tambahkan class animasigradasi ke elemen yang diinginkan.
Contoh kalau mau bikin efek gradasi warna bergerak di bagian header:
Cari kode <div id='header'>
Tambahkan class, sehingga hasilnya menjadi <div id='header' class='animasigradasi'>
Contoh :
<!-- SEBELUM -->

<div id='header'>
  ...
</div>
<!-- SESUDAH -->

<div id='header' class='animasigradasi'>
  ...
</div>
- Jika sudah ada class, tambahkan di belakang class sebelumnya.

<!-- SEBELUM -->

<div id='header' class='header'>
  ...
</div>

<!-- SESUDAH -->

<div id='header' class='header animasigradasi'>
  ...
</div>

5 Save Template 
nah .. kelar  Tapi pabila di atas malah berantakan hasil nya jagan berputus asa , banyak jalan menuju rumah tersayang ...
ini dia jurus terapuh :
pabila cara di atasa tidak work n tidak berhasil malah hasil nya 0 besar  ni-jlan nya :

<div class='animasigradasi'>
<div id='header'>
  ..............

</div>
</div>

Atau  

<div id='header'>
<div class='animasigradasi'>
  .............

</div>
</div>
Sedikit penjelasan : 
klau <div class= yang css berawalan titik contoh : <div class='animasigradasi'> sedang yg berawalan css nya # pagar <div id=' contoh : <div id='animasigradasi'> tapi haru di tutup dengan </div>

setelah itu kita sedikit ke ke Css header dengan cara naik motor ...brum....
Ctrl + F cari header sampai ketemu
/* Header */ atau /* Header cewek */ atau apalah yg ter tulis di <div id='header'>
kalau sudah ketemu . perhatikan #header{background:#fff; atau #header{position:relative;{background:#fff; em.. atau bagai mana gitu yg jelas kita cuma cari background:#fff;
Kalau sudah ketemu kaya itu hapus kode wanrna nya seperti ini :

Sebelum : background:#fff;

Sesudah: background:; bisa juga ganti dengan tulisan : transparan atau terang terus hasilnya gini : background:transparan;


Pabila kurang jelas / kurang mengerti  - atau kurang ajar di atas silahkan tinggalkan komentar anda di kolom ranjang
Kolom komentarlah ..

Postingan Populer

 

© 2013 NMEA Web. All rights resevered. Designed by Templateism

Back To Top