Tampilkan postingan dengan label CSS3. Tampilkan semua postingan
Tampilkan postingan dengan label CSS3. Tampilkan semua postingan
8/07/2019

Cara Membuat Recent Post Keren Dengan Nomor di Blogger

View Article

Cara Membuat Recent Post Keren Dengan Nomor di Blogger - Memasang Recent Post di Blog merupakan salah satu cara para blogger untuk menampilkan artikel terbaru dan baru di perbarui di blog. Widget Recent Post ini juga digunakan oleh para blogger untuk membuat atau bahkan untuk mengisi tempat kosong di sidebar blog agar blog tampak lebih hidup.

Widget Recent Post atau Artikel terbaru ini dilengkapi dengan trik numbering atau istilah lainnya widget ini tampil dengan nomor di bagian kiri judul postingan dan tersusun secara berurutan.

Pemasangan widget ini cukup mudah, dengan hanya menyimpan kode css dan javascript di template blog kita sudah bisa menampilkan widget recent post ini dengan kode pemanggil saja.

Widget Recent Post dengan nomor ini saya bagikan dengan dua model atau style berbeda, jadi sobat bisa memilih tampilan mana yang ingin sobat pilih.

Selanjutnya untuk sobat yang tertarik ingin mencoba memasang widget recent post ini, bisa langsung ikuti tutorial simple berikut.

Memasang Recent Post dengan Nomor di Blog

Pertama, silahkan simpan kode CSS sebelum kode </style>.

Kedua, silahkan simpan javascript sebelum kode </body>

Terakhir, kemudian tambahkan kode pemanggil sesuai dengan style recent post yang sobat ingin gunakan dengan cara klik menu Layout - Add a Gadget - Pilih HTML/JavaScript - Simpan kode pemanggilnya dan Simpan.

Widget Recent Post Style 1

Untuk menggunakan recent post style 1, silahkan gunakan kode-kode berikut

CSS Style 1

/* Recent Posts */

#recent-articles .widget-content, #recent-articles ul {padding: 0;counter-reset:count;margin: 0 auto;display: block}

#recent-articles a:link, #recent-articles a:visited {font-weight: normal}

#recent-articles ul li {background-color:#f7f7f7;margin:0 auto;padding:8px 8px 8px 60px;list-style:none;position:relative;border-bottom:1px solid #fff;font-size:90%;text-align:left}

#recent-articles ul li:before{color: #fff!important;counter-increment: count;content: counter(count);position: absolute;left:0;top:0;bottom:0;text-align: center;z-index: 51;transition: all .4s;width:50px;font-size: 150%!important;background:#2b71a2;font-weight:500;text-align: center;padding:0;border-right:1px solid #fff;display:flex;flex-direction:column;justify-content:center;height:100%}

#recent-articles ul li:last-child{border:none}

#recent-articles ul li a {font-weight:400 ;display:block;color:#222 ;text-decoration:none ;line-height:1.4em ;}

#recent-articles ul li:hover{background-color:#f5f5f5;}

#recent-articles ul li:hover:before{background-color:#24699A;}

#recent-articles ul li a:hover,#recent-articles ul li:hover a {color: #2b71a2 !important;}

#recent-articles ul li:before, #recent-articles ul li .item-title a {font-weight: 400;font-size: 12px;color: inherit;text-decoration: none}
Script Style 1

<script type='text/javascript'>

//<![CDATA[

numPosts = 10;function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");ct.async=true;for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.async=true;rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);

//]]>

</script>
Kode Pemanggil 1
<div id='recent-articles' class='recent-articles'><ul id="recent-posts"></ul></div>

Untuk melihat hasilnya silahkan cek di tombol demo berikut.

Dan untuk memasang recent post versi kedua, silahkan gunakan kode-kode berikut

CSS Style 2

/* Recent post */

ul#recent-post{list-style:none;margin:0 auto;padding:0;}

li.recent-post{counter-increment:num;display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;padding:7px 8px 7px 35px!important;margin:0;transition:all .3s;position:relative;line-height:1.4em}

li.recent-post:before{content:counter(num);display:block;position:absolute;font-size:27px!important;top:7px;left:7px;font-weight:normal!important;font-style:italic;color:#24699A!important}

li.recent-post a{color:#444;font-size:14px}

li.recent-post a:hover{color:#FF8100}
Script Style 2

<script>

//<![CDATA[

numPosts = 9;

function recentPosts(a){if(document.getElementById("recent-post")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-post");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-post"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);

//]]>

</script>
Kode Pemanggil 2

<div class='recent-post'><ul id="recent-post"></ul></div>

Untuk melihat hasilnya silahkan cek di tombol demo berikut.

Dan itulah tutorial Cara Membuat dan Memasang Recent Post Keren Dengan Nomor di Blogger yang saya bagikan ini bisa membantu sobat yang ingin memasang widget artikel terbaru di blog. Jika ada pertanyaan seputar artikel yang saya buat kali ini silahkan tnggalkan komentar. Selamat Mencoba dan Salam Luar Biasa.

6/20/2019

Cara Memasang Tombol Animasi Emoji Facebook di Blog

View Article

Pada tutorial terdahulu sudah saya bagikan tentang Cara memasang tombol reaksi sharethis di blogger dan pada postingan kali ini akan saya bagikan lanjutan dari postingan tersebut.

Kenapa saya mengatakan lanjutan? Karena pada tutorial kali ini kita akan memodifikasi tampilan tombol reaksi sharethis yang sudah kita buat berubah menjadi tombol reaksi dengan efek animasi layaknya tombol reaksi yang kita jumpai di facebook.

Seperti yang sudah kita ketahui, bahwa ShareThis merupakan salah satu layanan pihak ke-tiga yang bisa dipasang di Blogger. Secara umum, ShareThis berfungsi sebagai widget berbagi ke sosial media yang dapat Sobat modifikasi sesuai kebutuhan. Salah satu fitur dari ShareThis ini yaitu fitur Reaction Buttons, fitur ini berfungsi untuk memberikan feedback sebuah artikel dari pembaca dengan tombol reaksi berbentuk Emoji.

Cara Modifikasi Tombol Reaksi ShareThis dengan Animasi Emoji Facebook

Sebelum saya memberikan tips mengganti tombol reaksi, sebaiknya sobat membuat akun ShareThis terlebih dahulu di sini : Sign Up ShareThis. Setelah mendaftar, verifikasi alamat blog dengan menambahkan kode seperti ini sebelum kode </head> atau bisa juga sebelum </body> di Edit HTML halaman Blogger. Contohnya seperti ini :

<script async='async' src='//platform-api.sharethis.com/js/sharethis.js#property=5c9c2853fbd80b0011b664f6&amp;product=sop' type='text/javascript'/>

Perhatikan kode ini 5c9c2853fbd80b0011b664f6, tambahkan kode &amp; setelahnya. Contohnya seperti ini :

5c9c2853fbd80b0011b664f6&amp;

Agar nantinya setelah klik tombol Simpan tema tidak terdapat peringatan error

Setelah itu klik tombol Simpan tema dan klik tombol Verifikasi di halaman user situs ShareThis.

Jika sebelumnya sudah membuat akun di ShareThis, cukup skip langkah di atas. Untuk langkah selanjutnya aktifkan Reaction Buttons di halaman user ShareThis seperti gambar di bawah ini :


Baca Juga : Cara Memasang Tombol Reaksi Sharethis di Blog

Tambahkan kode Reaction Buttons yang disediakan dan salin ke Edit HTML Blogger setelah kode <data:post.body/> paling bawah atau yang dibungkus dengan tag kondisional halaman postingan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='sharethis-inline-reaction-buttons'/>

<div class='clear'/>

</b:if>

Jadi hasilnya seperti ini :

<data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='sharethis-inline-reaction-buttons'/>

<div class='clear'/>

</b:if>

Nah, sekarang untuk mengganti tombol reaksi bawaan ShareThis dengan Animasi Emoji Facebook. Tambahkan kode di bawah ini sebelum kode </head>

<style type='text/css'>

/*<![CDATA[*/

/* ShareThis Custom Reaction */

#st-1 .st-btn .st-text{display:none!important}

#st-1 .st-btn:hover &gt; span.st-count{display:inline-block!important}

#st-1 .st-btn &gt; svg{opacity:0}[data-reaction]{background-size:80px;background-position:center}

#st-1 .st-btn &gt; span.st-count{font-size:10px!important;padding:4px 7px;color:#222;background:#f0f0f0;line-height:1!important;border-radius:5px;font-weight:bold!important;display:inline-block!important;bottom:5px;right:10px;position:absolute}

[data-reaction=slight_smile]{background-image:url(https://3.bp.blogspot.com/-hNfE5e1Qo3c/XMLiPrFuOFI/AAAAAAAAOm8/pl6tOHh_y2AmumaMK6dQOQ36fP6BjC7_QCLcBGAs/s1600/like.gif)}

[data-reaction=heart_eyes]{background-image:url(https://1.bp.blogspot.com/-HgD0g2IiNLk/XMLiQOHSAxI/AAAAAAAAOnI/tC61Ug_I9zIpIeCVBrcg8QtoGQH7cOoNACLcBGAs/s1600/love.gif)}

[data-reaction=laughing]{background-image:url(https://1.bp.blogspot.com/-liSaUgXsZXo/XMLiP-Z3NkI/AAAAAAAAOnA/idWXMbOdLMIzaz7P_lYvH25NSu6UrPkuQCLcBGAs/s1600/haha.gif)}

[data-reaction=astonished]{background-image:url(https://2.bp.blogspot.com/-fEsfdOAj6m4/XJKUodnOstI/AAAAAAAAGuM/7HkgAaOkelo68pfgJUeQUqgK5If23LvkQCLcBGAs/s1600/wow.gif)}

[data-reaction=sob]{background-image:url(https://2.bp.blogspot.com/-8UjP6O6ZBus/XMLiQgaU5BI/AAAAAAAAOnM/mc0GAQW4kZg4BjtdiHFpBStGzMB6LYW6wCLcBGAs/s1600/sad.gif)}

[data-reaction=rage]{background-image:url(https://2.bp.blogspot.com/-aCtZlJ68tps/XMLiP-pNq7I/AAAAAAAAOnE/UTFuQzM58k4SnUvFGBXbh5bTnZsQYTvGACLcBGAs/s1600/angry.gif)}

/*]]>*/

</style>

Jika sudah, klik tombol Simpan tema dan lihat hasilnya di blog sobat!

Oke, sekian dari Namina untuk Cara Mengganti Tombol Reaksi ShareThis dengan Animasi Emoji Facebook. Semoga bermanfaat.

5/05/2019

Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog

View Article

Marhaban Ya Ramadhan, tidak terasa kini sudah memasuki bulan suci ramadhan 2019, bulan suci penuh berkah bagi kita semua. Bulan suci ramadhan merupakan salah satu momen penting yang ditunggu-tunggu oleh seluruh Umat Islam diseluruh Dunia. Momen dimana kita bisa melipat gandakan pahala ibadah kita kepada-Nya dan juga bulan yang penuh ampunan.

Dan berhubung sudah memasuki bulan suci ramadhan, maka pada kesempatan saya membagikan sebuah tutorial bagaimana Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog yang dapat sobat pasang di blog sobat.

Konsep dan cara kerja dari pop up ucapan selamat ramadhan ini sangat sederhana, pesan pop up ini akan ditampilkan ktika pengunjung membuka sebuah halaman di blog kita dan sobat menentukan dihalaman mana saja pop up ini akan di munculkan, seperti contoh di tutorial kali ini saya menggunakan tag kondisional khusus agar pop up ini dimunculkan di halaman beranda/home blog saja.

Tutorial Cara Memasang Pop Up Ucapan Selamat Berpuasa di Blog ini saya kutip dari blogger ternama (Arlina) dan saya pribadi sudah menggunakan tutorial ini di blog saya yang lain.

Untuk tutorial bisa langsung cek dibawah ini :

Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog

Login ke Blogger > Template > Edit HTML > dan simpan kode berikut sebelum kode </head>

<b:if cond='data:view.isHomepage'>

<style type='text/css'>

/* Pop Up Ramadhan */

@keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}}

#arlinapuasa2019ku{line-height:1.55;display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:600px;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);z-index:99;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 2s}#arlinapuasa2019ku .puasa19{position:absolute;color:#222;font-size:1.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;left:0;right:0;top:17%;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}#arlinapuasa2019ku .puasa19 p{margin:10px auto;font-style:italic;font-family:Georgia}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:2.5rem;font-style:normal}#arlinapuasa2019ku a.close-popup{background:#428bca;position:absolute;bottom:20px;right:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:13px;padding:4px 14px;min-width:60px;border:1px solid #3885c7;transition:all 0.3s}#arlinapuasa2019ku a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#arlinapuasa2019ku a.close-popup:active{opacity:.9}

.ketupat{position:absolute;left:0;right:0;top:-12px;margin:auto;width:10px;height:10px;background:#B9E937;box-shadow:10px 0 0 #57D131,10px 10px 0 #B9E937,0px 10px 0 #57D131,5px 5px 0 10px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.ketupat.duaa{top:initial;bottom:3px}

@media screen and (max-width:768px){#arlinapuasa2019ku .puasa19{font-size:1rem}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#arlinapuasa2019ku{min-height:260px;left:20px;right:20px}}

</style>

</b:if>

Secara default, css diatas di apit dengan tag kondisional khusus halaman utama. Jadi jika ingin pop up ini muncul di semua halaman, silakan hapus tag kondisional tersebut. Atau untuk mengatur di halaman mana sobat akan menampilkannya bisa langsung sobat cek di Tag Kondisional Blogger Terbaru

Kemudian tambahkan kode di bawah ini sebelum </body>

<b:if cond='data:view.isHomepage'>

<div id='arlinapuasa2019ku'>

<div class='ketupat'/>

<a class='close-popup' href='#' title='close'>Close</a>

<div class='puasa19'>

<p>Selamat Menunaikan Ibadah Puasa</p>

<p><span class='ramadhan2019'>Ramadhan 1440 H</span></p>

<p>Mohon Maaf Lahir Batin</p>

</div>

<div class='ketupat duaa'/>

</div>

<script type='text/javascript'>

//<![CDATA[

$(window).bind("load",function(){$("#arlinapuasa2019ku").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})});

//]]>

</script>

</b:if>

Jika sudah, klik tombol Simpan tema dan lihat hasilnya di blog sobat.

Itulah Cara Membuat Pop Up Ucapan Selamat Berpuasa di Blog kali ini semoga bermanfaat dan selamat mencoba

Source : https://www.arlinadzgn.com/2019/05/cara-memasang-pop-up-ucapan-selamat-berpuasa.html

2/04/2019

Cara Memasang Artikel Terkait Otomatis di Dalam Postingan Blog

View Article

Cara Memasang Artikel Terkait Otomatis di Dalam Postingan Blog - Related Post atau Artikel terkait di dalam postingan atau artikel blog ini memiliki peranan yang cukup penting terhadap blog kita. Karena dengan memasang related post atau artikel terkait otomatis di dalam postingan blog kita akan mendapatkan manfaat yang akan sangat terasa bagi blog kita.

Manfaat yang akan di dapatkan ketika kita memasang atau membuat artikel terkait di dalam postingan blog yang kita tulis akan menarik dan memudahkan pengunjung blog untuk membaca artikel lainnya yang otomatis di tampilkan di dalam postingan blog berdasarkan label atau kategori artikel yang sedang dibacanya.

Dengan adanya related post yang otomatis di tampilkan di tengah artikel ini akan meningkatkan kualitas kualitas internal link blog kita. Dan hal ini akan cukup membantu untuk menurunkan bounce rate blog sobat. Karena tidak sedikit yang mengatakan bahwa salah satu tekhnik ataupun cara menurunkan bounce rate blog adalah dengan memasang internal link di dalam postingan atau artikel blog.

Cara Membuat atau Memasang Artikel Terkait Otomatis di tengah artikel blog ini saya dapatkan dari blog igniel.com dan naminakiky.com/ yang kemudian saya padukan agar tampilan dari related post (baca juga) atau artikel terkait ini lebih menarik untuk di lihat dan mudah untuk dipasang atau diterapkan di blog sobat.

Untuk melihat hasil dan tampilan dari related post di dalam postingan blog ini, silahkan cek melalui link demo berikut:

Demo

Memasang Related Post di Tengah Artikel Blog Non AMP

Untuk sobat yang menggunakan blog non amp dan ingin memasang artikel terkait di tengah postingan yang saya bagikan kali ini, silahkan ikuti tutorial singkatnya berikut ini :

Pertama, silahkan login Blogger - Template - Edit HTML

Kemudian letakkan CSS berikut sebelum kode ]]></b:skin> atau </style>

.relatedPhw {display:inline-block;background:#fff;position:relative;padding:0;margin:36px auto 26px auto;width:100%;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #2B0C93;border-radius:30px;}

.relatedPhw .judul {background:#2B0C93;padding:4px 15px;position:absolute;margin:0;font-size:15px;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17);border-radius:30px;}

.relatedPhw ul {margin:0;padding:0}

.relatedPhw ul li {position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s}

.relatedPhw a{display:block;color:#2B0C93;font-size:15px;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}

.relatedPhw ul li:first-child {padding-top:0px;}

.relatedPhw ul li:last-child {padding-bottom:0px ; border:0px }

.relatedPhw ul li:first-child a{margin:15px auto 0 auto;}

.relatedPhw ul li:first-child a:hover,.relatedPhw a:hover{color:#000;padding-left:18px}

Sobat juga bisa mengotak-atik tampilan related post ini dengan mengedit kode css diatas

Terakhir silahkan simpan kode berikut setelah kode <data:post.body/>. Jika di template yang sobat gunakan terdapat beberapa kode <data:post.body/>, silahkan sobat coba satu persatu setelah kode <data:post.body/>.

<b:if cond='data:view.isPost'>

<script> //<![CDATA[

// Related Posts Middle by Pehawe.Me

var jumlah = 4;

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('c b=["G","H","I","$t","y","J","K","L","z","M","N","<A>","O",\'<B><a z="\',\'" y="\',\'">\',"</a></B>","</A>"];c d=n o;c p=0;c e=n o;q P(v){c r=0;h(;r<v[b[2]][b[1]][b[0]];r++){c k=v[b[2]][b[1]][r];d[p]=k[b[4]][b[3]];c l=0;h(;l<k[b[5]][b[0]];l++){s(k[b[5]][l][b[6]]==b[7]){e[p]=k[b[5]][l][b[8]];p++;Q}}}}q R(){c g=n o(0);c m=n o(0);c i=0;h(;i<e[b[0]];i++){s(!C(g,e[i])){g[b[0]]+=1;g[g[b[0]]-1]=e[i];m[b[0]]+=1;m[m[b[0]]-1]=d[i]}}d=m;e=g}q C(w,D){c j=0;h(;j<w[b[0]];j++){s(w[j]==D){E S}}E T}q U(){c f=F[b[10]]((d[b[0]]-1)*F[b[9]]());c u=0;x[b[12]](b[11]);h(;u<d[b[0]]&&u<V;){x[b[12]](b[13]+e[f]+b[14]+d[f]+b[W]+d[f]+b[X]);s(f<d[b[0]]-1){f++}Y{f=0}u++}x[b[12]](b[Z])}',62,67,'|||||||||||_0x22c4|var|relatedTitles|relatedUrls|indexLookupKey|value|for|||payload|id|errorsCopy|new|Array|relatedTitlesNum|function|signedTransactionsCounter|if||_0x6c56x6|canCreateDiscussions|lookIn|document|title|href|ul|li|contains|forWhat|return|Math|length|entry|feed|link|rel|alternate|random|floor|write|related_results_labels|break|removeRelatedDuplicates|true|false|ignielBacaJuga|jumlah|15|16|else|17|||||'.split('|'),0,{}))

//]]></script>

<div class='relatedPhw'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:view.isPost'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&
amp;callback=related_results_labels&amp;max-results=100&quot;'/>

</b:if>

</b:loop>

</b:if>

<span class='judul'><span>Baca Juga</span></span>

<script> //<![CDATA[

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('Z(z(p,a,c,k,e,r){e=z(c){A c.K(a)};B(!\'\'.E(/^/,N)){D(c--)r[e(c)]=k[c]||e(c);k=[z(e){A r[e]}];e=z(){A\'\\\\w+\'};c=1};D(c--)B(k[c])p=p.E(M L(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c]);A p}(\'j a=["k","l",".f-g m, .f-g p","n","o","q","r","s","t","u"];v();(w(){e d=h[a[1]](a[0])[0];i(d){e b=h[a[3]](a[2]);e c=x(b[a[4]]/2);i(b[c][a[5]]==a[6]){b[c][a[8]][a[7]](d,b[c])}y{b[c][a[8]][a[7]](d,b[c][a[9]])}}})();\',C,C,\'||||||||||O|Q|R|J|F|I|H|G|B|Y|14|11|13|16|15||12|P|U|T|S|V|z|W|10\'.X(\'|\'),0,{}))',62,69,'|||||||||||||||||||||||||||||||||||function|return|if|35|while|replace|let|document|body|post|artistTrack|toString|RegExp|new|String|_0x9301||nextIdLookup|indexLookupKey|nextSibling|parentNode|insertBefore|ignielBacaJuga|parseInt|split|var|eval|else|getElementsByClassName|nodeName|br|relatedPhw|length|querySelectorAll'.split('|'),0,{}))

//]]> </script>

</div>

</b:if>

Baca Juga: Cara Mempercepat Loading Gambar Blog

Memasang Related Post di Tengah Artikel Blog AMP

Untuk yang sudah menggunakan template AMP pada tampilan mobile, sobat juga bisa memasang related post ini khusus tampilan dekstop saja agar supaya template kita tetap valid AMP pada tampilan seluler

Untuk yang ingin mencoba memasang artikel terkait ini silahkan simpan css berikut di dalam style amp-custom template blog AMP sobat.

.relatedPhw {display:inline-block;background:#fff;position:relative;padding:0;margin:36px auto 26px auto;width:100%;box-shadow:0 0 20px -5px rgba(0,0,0,0.3);transition:all 0.3s cubic-bezier(.25,.8,.25,1);border-top:2px solid #2B0C93;border-radius:30px;}

.relatedPhw .judul {background:#2B0C93;padding:4px 15px;position:absolute;margin:0;font-size:15px;color:#fff;top:-14px;left:2.8%;box-shadow:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.17);border-radius:30px;}

.relatedPhw ul {margin:0;padding:0}

.relatedPhw ul li {position:relative;list-style:none;padding:0;margin:auto;line-height:1.4em;transition:all .3s}

.relatedPhw a{display:block;color:#2B0C93;font-size:15px;padding:5px 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}

.relatedPhw ul li:first-child {padding-top:0px;}

.relatedPhw ul li:last-child {padding-bottom:0px ; border:0px }

.relatedPhw ul li:first-child a{margin:15px auto 0 auto;}

.relatedPhw ul li:first-child a:hover,.relatedPhw a:hover{color:#000;padding-left:18px}

Sobat juga bisa mengotak-atik tampilan related post ini dengan mengedit kode css diatas

Kemudian simpan kode berikut setelah kode <data:post.body/>

<b:if cond='data:view.isPost and data:blog.isMobileRequest == &quot;false&quot;'>

<script> //<![CDATA[

// Related Posts Middle by Pehawe.info

var jumlah = 4;

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('c b=["G","H","I","$t","y","J","K","L","z","M","N","<A>","O",\'<B><a z="\',\'" y="\',\'">\',"</a></B>","</A>"];c d=n o;c p=0;c e=n o;q P(v){c r=0;h(;r<v[b[2]][b[1]][b[0]];r++){c k=v[b[2]][b[1]][r];d[p]=k[b[4]][b[3]];c l=0;h(;l<k[b[5]][b[0]];l++){s(k[b[5]][l][b[6]]==b[7]){e[p]=k[b[5]][l][b[8]];p++;Q}}}}q R(){c g=n o(0);c m=n o(0);c i=0;h(;i<e[b[0]];i++){s(!C(g,e[i])){g[b[0]]+=1;g[g[b[0]]-1]=e[i];m[b[0]]+=1;m[m[b[0]]-1]=d[i]}}d=m;e=g}q C(w,D){c j=0;h(;j<w[b[0]];j++){s(w[j]==D){E S}}E T}q U(){c f=F[b[10]]((d[b[0]]-1)*F[b[9]]());c u=0;x[b[12]](b[11]);h(;u<d[b[0]]&&u<V;){x[b[12]](b[13]+e[f]+b[14]+d[f]+b[W]+d[f]+b[X]);s(f<d[b[0]]-1){f++}Y{f=0}u++}x[b[12]](b[Z])}',62,67,'|||||||||||_0x22c4|var|relatedTitles|relatedUrls|indexLookupKey|value|for|||payload|id|errorsCopy|new|Array|relatedTitlesNum|function|signedTransactionsCounter|if||_0x6c56x6|canCreateDiscussions|lookIn|document|title|href|ul|li|contains|forWhat|return|Math|length|entry|feed|link|rel|alternate|random|floor|write|related_results_labels|break|removeRelatedDuplicates|true|false|ignielBacaJuga|jumlah|15|16|else|17|||||'.split('|'),0,{}))

//]]></script>

<div class='relatedPhw'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:view.isPost'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>

</b:if>

</b:loop>

</b:if>

<span class='judul'><span>Baca Juga</span></span>

<script> //<![CDATA[

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('Z(z(p,a,c,k,e,r){e=z(c){A c.K(a)};B(!\'\'.E(/^/,N)){D(c--)r[e(c)]=k[c]||e(c);k=[z(e){A r[e]}];e=z(){A\'\\\\w+\'};c=1};D(c--)B(k[c])p=p.E(M L(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c]);A p}(\'j a=["k","l",".f-g m, .f-g p","n","o","q","r","s","t","u"];v();(w(){e d=h[a[1]](a[0])[0];i(d){e b=h[a[3]](a[2]);e c=x(b[a[4]]/2);i(b[c][a[5]]==a[6]){b[c][a[8]][a[7]](d,b[c])}y{b[c][a[8]][a[7]](d,b[c][a[9]])}}})();\',C,C,\'||||||||||O|Q|R|J|F|I|H|G|B|Y|14|11|13|16|15||12|P|U|T|S|V|z|W|10\'.X(\'|\'),0,{}))',62,69,'|||||||||||||||||||||||||||||||||||function|return|if|35|while|replace|let|document|body|post|artistTrack|toString|RegExp|new|String|_0x9301||nextIdLookup|indexLookupKey|nextSibling|parentNode|insertBefore|ignielBacaJuga|parseInt|split|var|eval|else|getElementsByClassName|nodeName|br|relatedPhw|length|querySelectorAll'.split('|'),0,{}))

//]]> </script>

</div>

</b:if>

Tag kondisional yang ditandai diatas berfungsi untuk menampikan related post ini pada postingan blog tampilan dekstop saja. Agar supaya ketika blog di akses melalui seluler (AMP) tidak error.

Baca Juga: Cara Membuat Sitemap (Daftar ISI) Seo Responsive di Blog

Akhir kata dari saya semoga tutorial Cara Mmbuat atau Memasang Artikel Terkait atau Related yang Otomatis muncul di Dalam Postingan atau artikel Blog ini bermanfaat. Selamat mencoba

1/22/2019

Cara Membuat Tombol Direct Chat Whatsapp Di Blog Dengan SVG

View Article

Cara Membuat Tombol Direct Chat Whatsapp Di Blog Dengan SVG - Tombol direct chat whatsapp ini biasanya digunakan oleh pengguna blog/website yang berkeinginan untuk mempermudah pengunjung berkomunikasi via chatting whatsapp.

Beraneka ragam cara dari mereka untuk meletakkan tombol chat whatsapp, ada yang berbentuk tombol yang di sematkan setelah artikel yang mereka tulis dan ada juga yang meletakkannya di bagian bawah halaman blog dengan posisi melayang.

Memang benar adanya, jika ada yang mengatakan dengan menyediakan tombol direct chat whatsapp di halaman blog akan cukup bermanfaat. Karena dengan link atau tombol direct chat whatsapp ini, pengunjung blog kita akan dengan sangat mudahnya untuk menghubungi kita via whatsapp.

Tombol Direct Chat Whatsapp yang akan digunakan kali ini menggunakan icon svg dengan tambahan css untuk mengatur posisi dari ikon whatsapp nantinya.

Tombol Direct Chat Whatsapp Dengan icon SVG ini dapat di terapkan di blog AMP dan Non AMP, dan juga tersedia dua versi pilihan yang dapat kalian pilih sesuai dengan keinginan kalian

Bagi kalian yang tertarik untuk memasang Tombol Direct Chat Whatsapp Di Blog Dengan SVG ini di halaman blog kalian, silahkan ikuti tutorial singkatnya berikut :

Cara Memasang Tombol Direct Chat Whatsapp Di Blog

Login Bogger - Klik Template - Edit HTML

Silahkan pilih variasi tombol chat whatsapp berikut sesuai selera

1. Full CSS

Dengan menggunakan Full Css, maka kode HTML akan menjadi lebih simple karena tidak menggunakan kode HTML icon SVG

Simpan kode HTML berikut sebelum kode </body>

<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp' />

Ganti kode 628xxxxxxxxxx dengan nomor whatsapp kalian.

Kemudian tambahkan CSS berikut sebelum </style>.

.fixed-whatsapp {

  position: fixed;

  bottom: 20px;

  right: 20px;

  width: 50px;

  height: 50px;

  z-index: 9999;

}



.fixed-whatsapp:before {

  content: "";

  background-repeat: no-repeat;

  background-size: 34px 34px;

  background-position: center center;

  width: 50px;

  height: 50px;

  background-image: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='32' height='32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");

  background-color: #00C853;

  position: absolute;

  top: 0;

  left: 0;

  border-radius: 100%;

  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);

}

2. Ikon dengan HTML

Dengan hanya menggunakan HTML, maka ukuran CSS nya lebih kecil.

Simpan kode HTML berikut di atas kode </body>


<a class='fixed-whatsapp' href='https://api.whatsapp.com/send?phone=628xxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Whatsapp'>

<svg viewBox='0 0 24 24' width='34' height='34'>

<path fill='#ffffff' d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/>

</svg>

</a>

Ganti kode 628xxxxxxxxxx dengan nomor WA Anda.

Tambahkan CSS berikut sebelum kode </style>.


.fixed-whatsapp {

  position: fixed;

  bottom: 20px;

  right: 20px;

  width: 50px;

  height: 50px;

  line-height: 50px;

  z-index: 9999;

  text-align: center;

}



.fixed-whatsapp:before {

  content: "";

  width: 50px;

  height: 50px;

  background-color: #00C853;

  position: absolute;

  border-radius: 100%;

  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);

  z-index: 1;

  top: 0;

  left: 0;

}



.fixed-whatsapp svg {

  vertical-align: middle;

  z-index: 2;

  position: relative;

}

Jika ingin menambahkan pesan atau kata-kata di atasnya, silahkan tambahkan CSS berikut :


.fixed-whatsapp:after {

  content: "Hai...Sob, chat mimin di sini yah!";

  width: 100px;

  padding: 5px 10px;

  position: absolute;

  bottom: 100%;

  margin-bottom: 10px;

  right: -150px;

  text-align: right;

  color: #555;

  border: 1px solid #dedede;

  background: rgba(255,255,255,.5);

  border-radius: 4px;

  opacity: 0;

  transition:all .4s ease-in-out;

  font-size: 90%;

  line-height: 1.1;

}



.fixed-whatsapp:hover:after {

  opacity: 1;

  right: 0;

}

Yang ditandai silahkan sesuaikan dengan kata-kata yang ingin ditampilkan. Silahkan coba demonya dan hover ikonnya.

Jika ada yang ingin di tanyakan seputar tulisan kali ini, silahkan tinggalkan komentar.

Demikian artikel tentang bagaimana Cara Membuat Tombol Direct Chat Whatsapp Di Blog Dengan SVG ini semoga bermanfaat dan selamat mencoba.

Cara Membuat Progress Scrollbar Warna Gradien di Blog

View Article

Cara Membuat Progress Scrollbar Warna Gradien di Blog - Pada tutorial blogger kali ini saya akan membagikan sebuah tutorial bagaimana Cara Membuat Progress Scrollbar pada halaman bagian atas blog dengan motif warna gradasi/gradient color atau perpaduan warna yang bisa kalian terapkan di blogger/blogspot.

Page scroll progress indicator ini akan tampil berbentuk garis horizontal di bagian atas halaman blog atau bisa juga kalian pindah posisinya ke bagian bawah halaman blog dengan fungsi utama dari progress scrollbar ini adalah untuk menunjukan sampai dimana kita berada pada halaman blog.

Mungkin kalian pernah berkunjung ke sebuah blog/website dan menemukan sebuah progress indicator pada halaman blog tersebut, namun biasanya kebanyakan dari mereka menampilkan angka dan %. Beda halnya dengan yang satu ini, karena Page scroll progress indicator yang satu ini menggunakan warna gradasi/perpaduan warna yang menurut saya lebih enak di pandang.

Progress Scrollbar Warna Gradien di Blog cukup berguna jika Sebuah blog atau website tersebut memiliki konten atau postingan yang bisa di bilang cukup panjang. Karena dengan menggunakan progress indcator ini, pengunjung akan dengan mudah mengetahui sampai sejauh mana mereka membaca dan menscroll halaman blog tersebut.

Progress Scrollbar dengan warna gradasi ini menggunakan pure javascscript yang kemudian di padukan dengan css untuk megatur warna-warna yang bisa kalian atur sesuai selera kalian. Untuk mempermudah memilih warna yang ingin digunakan, silahkan gunakan Web Color Picker. Dan untuk mengetahui seperi apa hasilnya, silahkan cek demonya dibawah ini.

Demo

Selanjutnya jika kalian tertarik ingin mencoba memasang Progress Scrollbar Warna Gradien di Blog ini, kalian bisa langsung ikuti tutorial singkat berikut :

Membuat Animasi Scrollbar dengan Warna Gradasi di Halaman Blog

Login ke Blogger
Klik Template - Edit HTML
Letakkan CSS berikut sebelum kode ]]></b:skin> atau </style>

#top-scrollbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 0%;

    height: 4px;

    overflow: hidden;

    z-index: 99999;

}



#top-scrollbar-bg {

    width: 100%;

    height: 100%;

    position: absolute;

    background:-webkit-linear-gradient(left,#2B0C93 0,#ff2c02 56%,#FFB300 100%);

}

Kemudian letakkan javascript dibawah ini sebelum kode </body>

<script>

//<![CDATA[

var bar_bg = document.getElementById("top-scrollbar-bg"),

body = document.body,

html = document.documentElement;



bar_bg.style.minWidth = document.width + "px";


document.getElementsByTagName("body")[0].onresize = function() {

// Update the gradient width

bar_bg.style.minWidth = document.width + "px";

}



window.onscroll = function() {

// Change the width of the progress bar

var bar = document.getElementById("top-scrollbar"),

dw = document.documentElement.clientWidth,

dh = Math.max( body.scrollHeight, body.offsetHeight,

html.clientHeight, html.scrollHeight, html.offsetHeight ),

wh = window.innerHeight,

pos = pageYOffset || (document.documentElement.clientHeight ?

document.documentElement.scrollTop : document.body.scrollTop),

bw = ((pos / (dh - wh)) * 100);


bar.style.width = bw + "%";

}

//]]>

</script>

Silahkan tambakan div pemanggil berikut setelah <body>

<div id="top-scrollbar">

<div id="top-scrollbar-bg">

</div>

</div>

Terakhir silahkan simpan setelan template


Note :
  • Jika ingin mengganti warna silahkan ganti pada bagian -webkit-linear-gradient(left,#2B0C93 0,#ff2c02 56%,#FFB300 100%). Gunakan tool color picker untuk mempermudah kalian menentukan warna yang ingin kalian gunakan.
  • Jika ingin menggunakan satu warna saja silahkan hapus kode -webkit-linear-gradient(left,#2B0C93 0,#ff2c02 56%,#FFB300 100%); kemudian ganti menjadi #2B0C93 atau warna apa saja yang kalian kehendaki.
  • Solusi bagi yang menggunakan sticky menu navigasi, untuk mengatur letak progress scrollbar silahkan atur letak tingginya pada kode top: 0; menjadi top: 45px;
  • Untuk yang ingin mengubah posisi progress scrollbar menjadi di bawah silahkan ganti kode top: 0; menjadi bottom: 0;


Jika ada pertanyaan seputar membuat Page scroll progress indicator dengan warna gradasi/gradien di blog ini, kalian bisa tinggalkan jejak komentar.

Demikian tutorial Cara Membuat Progress Scrollbar Warna Gradien di Blog ini semoga berguna dan selamat mencoba.

10/17/2018

Cara Membuat Daftar Isi Berdasarkan Label Otomatis di Blog

View Article
Cara Membuat Daftar Isi Berdasarkan Label Otomatis di Blog - Daftar isi/Sitemap merupakan salah satu peta situs yang wajib di gunakan oleh para blogger. Karena dengan adanya sitemap/daftar isi di blog akan membantu pengunjung lebih mudah ketika sedang mencari artikel yang dibutuhkannya.

Jika sebelumnya sudah saya bagikan sebuah tutorial bagaimana cara membuat sitemap responsive ala kompiajaib, maka pada tutorial kali ini saya akan membagikan sebuah tutorial bagaimana cara membuat sitemap/daftar isi berdasarkan label yang secara otomatis akan menampilkan semua label dengan fitur tabbed click.

Daftar Isi Berdasarkan Label Otomatis akan menampilkan semua kategori/label dengan bentuk menu tab yang ketika sobat klik salah satu tab pilihan akan menampilkan semua artikel yang di kelompokkan pada label tersebut.

Cara Memasang Daftar Isi Berdasarkan Label Otomatis

Login Blogger - Klik Halaman dan Buatlah sebuah Halaman baru yang akan digunakan untuk menampilkan daftar isi ini, atau jika sudah ada sobat tinggal menggantinya dengan kode dibawah ini dalam mode HTML (bukan compose)

<div class="tabbed-toc" id="tabbed-toc"></div>

<script>

var tabbedTOC={blogUrl:"https://www.pehawe.me/",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' &ndash; <em style="color:red;">New</em>'};

</script>

<script src="https://cdn.staticaly.com/gh/pehawe/file/master/tabbed-sitemap.js"></script>

<style scoped="" type="text/css">

.tabbed-toc{margin:0 auto;position:relative;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite}

.tabbed-toc .loading{display:block;padding:2px 12px;color:#fff}

.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li{margin:0;padding:0;list-style:none}

.tabbed-toc .toc-tabs{width:20%;float:left}

.tabbed-toc .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}

.tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}

.tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}

.tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:right;background-color:#fff;box-sizing:border-box}

.tabbed-toc .toc-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}

.tabbed-toc .panel{position:relative;z-index:5}

.tabbed-toc .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}

.tabbed-toc .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:right}

.tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}

.tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}

.tabbed-toc .panel li{background-color:#f9f9f9;margin:0}

.tabbed-toc .panel li:nth-child(even){background-color:#fff}

.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}

.tabbed-toc .panel li a em{background:#f39c12;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px}

.tabbed-toc .panel li:before{display:none}

@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

@media (max-width:768px){.tabbed-toc .toc-tabs,.tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}.tabbed-toc .toc-tabs li{display:inline;float:left}.tabbed-toc .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.tabbed-toc .toc-content{border:none}.tabbed-toc .toc-line,.tabbed-toc .panel li time{display:none}}

</style>


Silahkan ganti https://www.pehawe.me/ dengan url blog sobat


Cara Membuat Daftar Isi Berdasarkan Label Otomatis di Blog kali ini bermanfaat. Selamat mencoba dan salam luar biasa

Source : naminakiky
10/01/2018

Cara Membuat Download Box Seperti Situs Anime di Blog

View Article
Cara Membuat Download Box Seperti Anime di Blog - Jika sobat pernah berkunjung ke situs download film seperti salah satunya samehadaku dan situs anime lainnya pasti sobat akan menjumpai kotak yang berisikan link download dengan tampilan yang cukup menarik.

Widget download link atau download box di postingan blogger ini akan membuat tampilan link download tersusun rapi sesuai keinginan sobat dan tentu saja widget ini tidak akan mempengaruhi loading blog ketika sedang di aksse. Karena download box untuk blog download film, anime dan aplikasi ini tidak di sertakan fontawesome dan lainnya.

Kotak download yang dibagikan ini memiliki tampilan sederhana dengan prataan warna ala material color dan beraturan. Untuk mengetahui tampilannya silahkan sobat cek di link berikut


Untuk menerapkan download box di dalam postingan blog ini, sobat hanya perlu meletakkan kode css pada Edit html template dan kemudian sobat bisa langsung memanggilnya di dalam artikel ataupun post yang sedang sobat tulis.

Membuat Download Box di Postingan Blog

Pertama, Silahkan sobat login ke Blogger - Template - Edit HTML

Kedua, Silahkan simpan css berikut sebelum kode ]]></b:skin atau </style>

.dbox-title {

background:#3b3b4f;

color:#fff;

margin-bottom: 1px;

border-radius:2px;

padding:10px 15px;

text-align:center;

vertical-align:top;

font-size:1.3rem

}


.dbox-list {

background: #e2e2e2;

font-size:15px;

margin-bottom: 1px;

line-height: 30px;

padding: 0 5px;

text-align:center;

border-radius:2px

}


.dbox-list strong {

background:#777;

border-right:2px solid #F5F5F5;

width:100px;

display:block;

float:left;

margin-left:-5px;

margin-right:2px;

color:#FFF;

padding:0 15px;

text-align:center;

font-weight:400

}


.dbox-list a {

color: #000;

}

.dbox-list a:hover {

color: #555;

}

@media only screen and (max-width: 360px) {

.dbox-list strong {

width:90%

}

.dbox-title {

text-align:center

}

}


Selanjutnya untuk membuat download box di dalam post silahkan pilih tab HTML (bukan compose) dan salin semua kode berikut.

<div class="dbox-title">Your Title</div>

<div class="dbox-list">

    <strong>480p</strong>

    <a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |

    <a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |

    <a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |

    <a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |

    <a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>

</div>

<div class="dbox-list">

    <strong>720p</strong>

    <a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |

    <a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |

    <a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |

    <a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |

    <a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>

</div>

<div class="dbox-list">

    <strong>1080p</strong>

    <a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |

    <a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |

    <a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |

    <a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |

    <a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>

</div>


Silahkan atur title dan link sesuai kebutuhan sobat dan Publish.

Demikian tutorial singkat kali ini semoga bermanfaat. Selamat Mencoba dan Salam Luar Biasa.