Linkkoe Jurnal: blog

Tools

Tampilkan postingan dengan label blog. Tampilkan semua postingan
Tampilkan postingan dengan label blog. Tampilkan semua postingan

Rabu, 06 Desember 2023

Tutorial: Cara Mudah Menambahkan Tombol Back to Top di Blogger

Cara Mudah Menambahkan Tombol Back to Top di Blogger



linkkoe.my.id - Jika ingin meningkatkan pengalaman pengunjung blog Anda dan memberikan kemudahan bagi mereka untuk kembali ke bagian atas halaman, memasang tombol "Back to Top" adalah pilihan yang bijak. Dalam tutorial ini, saya akan membimbing Anda langkah demi langkah tentang cara menambahkan tombol kembali ke atas dengan desain yang sederhana namun keren, beserta efek smooth scroll, di platform Blogger. Dengan mengikuti panduan ini, Anda dapat meningkatkan navigasi dan kenyamanan pembaca blog Anda.

Langkah 1: Masuk ke Blogger Dashboard

Langkah pertama adalah masuk ke dashboard Blogger Anda. Pastikan Anda sudah login dengan akun yang terkait dengan blog yang ingin Anda tambahkan tombol "Back to Top"-nya.

Langkah 2: Pilih Edit HTML

Setelah masuk ke dashboard, pilih opsi "Tema" dan kemudian klik "Edit HTML". Ini akan membawa Anda ke editor kode untuk mengelola template blog Anda.

Langkah 3: Tambahkan Kode CSS

Pertama-tama, kita perlu menambahkan kode CSS untuk mendesain tampilan tombol "Back to Top". Letakkan kode berikut sebelum kode `]]></b:skin>` atau `</style>`:


/* Back to top button caramanual.com */
.scroll-top-wrapper {
position: fixed;
opacity: 0;
visibility: hidden;
overflow: hidden;
text-align: center;
z-index: 99999999;
background-color: #777777;
color: #eeeeee;
width: 50px;
height: 48px;
line-height: 48px;
right: 30px;
bottom: 30px;
padding-top: 2px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
background-color: #888888;
}
.scroll-top-wrapper.show {
visibility:visible;
cursor:pointer;
opacity: 1.0;
}
.scroll-top-wrapper i.fa {
line-height: inherit;
}


Kode di atas mengatur tampilan tombol, termasuk posisi, warna latar belakang, warna teks, dan beberapa properti lainnya. Anda dapat menyesuaikannya sesuai dengan preferensi desain Anda.


Langkah 4: Tambahkan HTML untuk Tombol

Terakhir, tambahkan HTML untuk tombol "Back to Top". Tempatkan kode berikut di tempat yang Anda inginkan di dalam template, biasanya di akhir sebelum `</body>`:

<!-- Back to top button caramanual.com -->
<div class="scroll-top-wrapper">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.scroll-top-wrapper').addClass('show');
} else {
$('.scroll-top-wrapper').removeClass('show');
}
});
$('.scroll-top-wrapper').on('click', scrollToTop);
});
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 500, 'linear');
}
</script>


Simpan dan Lihat Perubahannya

Setelah menambahkan semua kode di atas, jangan lupa untuk menyimpan perubahan yang telah Anda lakukan pada editor HTML. Selanjutnya, buka blog Anda dan lihatlah tombol "Back to Top" yang baru muncul ketika Anda menggulir ke bawah.

Dengan menambahkan tombol "Back to Top" dengan desain yang menarik dan efek smooth scroll, Anda memberikan pengalaman yang lebih baik bagi pembaca blog Anda. Mereka dapat dengan mudah kembali ke bagian atas halaman tanpa harus melakukan scroll manual. Semoga tutorial ini membantu meningkatkan kualitas blog Anda! (lk)

Selasa, 28 April 2020

Widget Related Post Unik Untuk Blog

Widget Related Post Unik Untuk Blog





Widget Related Post adalah cara yang bagus untuk menunjukkan kepada pembaca Anda posting terkait dari label atau kategori tertentu. Dengan demikian, ini meningkatkan keterlibatan blog Anda dan mengurangi rasio pantulan Anda.

Jadi, jika posting Anda belum diberi label, tidak akan ada postingan terkait yang bisa ditampilkan kepada pembaca Anda.

Oleh karena itu, Anda harus memastikan bahwa Anda telah mempublikasikan label postingan blog Anda. 



Widget Related Post Unik Untuk Blog




Bagaimana cara menambahkan label ke postingan?

Sangat mudah. Ketika membuat postingan baru, di sidebar kanan, Anda akan menemukan Label. Tuliskan yang sesuai yang ingin Anda berikan untuk posting Anda dan klik Selesai.

Menambahkan widget  Related Post ke blog Blog Anda

Langkah 1. Login ke Blogger Anda dan pilih pada Template dan klik Edit HTML.








Langkah 2. Cukup klik di mana saja di dalam bagian editor HTML dan dengan menekan control + F bersama-sama mencari tag < b: Includedabe >.







Langkah 3. Tempelkan kode di bawah ini tepat di atas <code> < b: Includedabe > tag.


<!-- Related Posts widget by https://www.wonderkrish.com-->   
 <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> 
 </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + 
 &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' 
 type='text/javascript'/> </b:loop>  <div class='post-footer-line post-footer-line-4'>  <div 
 class='relatedpoststitle'>RELATED POSTS</div> <div id='relatedpostssum'>    <script 
 type='text/javascript'>showrelated();</script>   </div>   <div style='clear:both;'/>  </div> 
 </b:if> <!-- Related Posts with Thumbnails Code End by https://www.wonderkrish.com -->


Langkah 4. Anda harus mencari lagi dengan menekan Control + F bersamaan dan menemukan tag </head> 




Langkah 5. Tepat di atas tag </head>, rekatkan kode CSS dan JavaScript di bawah ini.


<script type='text/javascript'> //<![CDATA[ var relatedTitles = new Array(); var relatedUrls =
new Array(); var relatedpSummary = new Array(); var relatedThumb = new Array(); var
relatedTitlesNum = 0; var relatedPostsNum = 4; // number of entries to be shown var
relatedmaxnum = 75; // the number of characters of summary var relatednoimage =
"https://3.bp.blogspot.com/-
PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg"; // default
picture for entries with no image function readpostlabels(e){for(var
t,r,l,a=0;a<e.feed.entry.length&&(t=e.feed.entry[a],a!=e.feed.entry.length);a++){relatedTitles[rela
tedTitlesNum]=t.title.$t,l="","content"in t?l=t.content.$t:"summary"in
t&&(l=t.summary.$t),relatedpSummary[relatedTitlesNum]=removetags(l,relatedmaxnum),r="me
dia$thumbnail"in
t?t.media$thumbnail.url:relatednoimage,relatedThumb[relatedTitlesNum]=r;for(var
d=0;d<t.link.length;d++)if("alternate"==t.link[d].rel){relatedUrls[relatedTitlesNum]=t.link[d].hre
f;break}relatedTitlesNum++}}function showrelated(){for(var e=new Array(0),t=new Array(0),r=new Array(0),l=new
Array(0),a=0;a<relatedUrls.length;a++)contains(e,relatedUrls[a])||(e.length+=1,e[e.length-
1]=relatedUrls[a],t.length+=1,t[t.length-1]=relatedTitles[a],r.length+=1,r[r.length-
1]=relatedpSummary[a],l.length+=1,l[l.length-
1]=relatedThumb[a]);relatedTitles=t,relatedUrls=e,relatedpSummary=r,relatedThumb=l;for(var
a=0;a<relatedTitles.length;a++){var d=Math.floor((relatedTitles.length-
1)*Math.random()),n=relatedTitles[a],s=relatedUrls[a],m=relatedpSummary[a],i=relatedThumb[
a];relatedTitles[a]=relatedTitles[d],relatedUrls[a]=relatedUrls[d],relatedpSummary[a]=relatedpS
ummary[d],relatedThumb[a]=relatedThumb[d],relatedTitles[d]=n,relatedUrls[d]=s,relatedpSum
mary[d]=m,relatedThumb[d]=i}for(var u,h=0,o=Math.floor((relatedTitles.length-
1)*Math.random()),g=o,f=document.URL;h<relatedPostsNum&&(relatedUrls[o]==f||(u="<div
class='relatedsumposts'>",u+="<a href='"+relatedUrls[o]+"' title='"+relatedTitles[o]+"'><img
src='"+relatedThumb[o]+"' /></a>",u+="<h6><a href='"+relatedUrls[o]+"'
target='_self'>"+relatedTitles[o]+"</a></h6>",u+="<p>"+relatedpSummary[o]+" ...
</p>",u+="</div>",document.write(u),h++,h!=relatedPostsNum))&&(o<relatedTitles.length-
1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split("<"),l=0;l<r.length;l++)-
1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return
r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var
r=0;r<e.length;r++)if(e[r]==t)return!0;return!1} //]]> </script>

Dan pastekan kode ini juga:
<style> .relatedsumposts {margin:0 auto;padding:0;text-align:center; /* width of the related    posts area */ width: 120px; float:left;margin-bottom:15px; border-right: 1px dotted #E5E5E5;    display: inline-block; } .relatedsumposts h6 { margin: 5px 0; } .relatedsumposts h6 a { /* link    properties */ color: #linkcolor; text-transform: uppercase; font-size:12px; } .relatedsumposts    img{background-color:#fafafa;width:95%;height:auto;max-width:100%;margin:0 auto;vertical-   align:middle;} .relatedsumposts p { /* summary properties */ border-top: 1px solid #E5E5E5;    border-bottom: 1px solid #E5E5E5; color: #summarycolor; font-size: 12px; height: 4em; line-   height: 1; margin: 5px 0 0; padding: 5px 0 15px 0; } #relatedpostssum { width: 100%; }    .relatedpoststitle { font-size: 19px; margin-bottom:15px; ;text-align:center; font-style:bold}    </style>
Sekarang, pilih gaya apa saja yang ada di bawah ini sesuai dengan pilihan Anda, gambar telah ditempatkan untuk mendapatkan intisari, seperti apa sebenarnya bentuknya.

Untuk menambahkan gaya yang berbeda, Anda harus mengikuti dari langkah 1 hingga 3 untuk setiap gaya.


Gaya No. 1.  Widget posting yang indah dan indah dengan thumbnail postingan ditampilkan dalam format bulat.






Kode 1:

<script type='text/javascript'> //<![CDATA[ var relatedTitles = new Array(); var relatedUrls = new Array(); var relatedpSummary = new Array(); var relatedThumb = new Array(); var relatedTitlesNum = 0; var relatedPostsNum = 4; // number of entries to be shown var relatedmaxnum = 75; // the number of characters of summary var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GSigCHjv_b9WLsRKW_X2yfZljoCkivON4OLv-pE9JAuBooQotD0m1axkveQ2ahQV5ouEr2bxHwGwepIYnB8nuBA18tJu9rR5rW2s-wZ9mfJT1axLKeyS5i6qOeL0mWDHBH6BHx8UYR5E/s1600/no_image.jpg"; // default picture for entries with no image function readpostlabels(e){for(var t,r,l,a=0;a<e.feed.entry.length&&(t=e.feed.entry[a],a!=e.feed.entry.length);a++){relatedTitles[relatedTitlesNum]=t.title.$t,l="","content"in t?l=t.content.$t:"summary"in t&&(l=t.summary.$t),relatedpSummary[relatedTitlesNum]=removetags(l,relatedmaxnum),r="media$thumbnail"in t?t.media$thumbnail.url:relatednoimage,relatedThumb[relatedTitlesNum]=r;for(var d=0;d<t.link.length;d++)if("alternate"==t.link[d].rel)   {relatedUrls[relatedTitlesNum]=t.link[d].href;break}relatedTitlesNum++}}function showrelated(){for(var e=new Array(0),t=new Array(0),r=new Array(0),l=new Array(0),a=0;a<relatedUrls.length;a++)contains(e,relatedUrls[a])||(e.length+=1,e[e.length-1]=relatedUrls[a],t.length+=1,t[t.length-1]=relatedTitles[a],r.length+=1,r[r.length-1]=relatedpSummary[a],l.length+=1,l[l.length-1]=relatedThumb[a]);relatedTitles=t,relatedUrls=e,relatedpSummary=r,relatedThumb=l;for(var a=0;a<relatedTitles.length;a++){var d=Math.floor((relatedTitles.length-1)*Math.random()),n=relatedTitles[a],s=relatedUrls[a],m=relatedpSummary[a],i=relatedThumb[a];relatedTitles[a]=relatedTitles[d],relatedUrls[a]=relatedUrls[d],relatedpSummary[a]=relatedpSummary[d],relatedThumb[a]=relatedThumb[d],relatedTitles[d]=n,relatedUrls[d]=s,relatedpSummary[d]=m,relatedThumb[d]=i}for(var u,h=0,o=Math.floor((relatedTitles.length-1)*Math.random()),g=o,f=document.URL;h<relatedPostsNum&&(relatedUrls[o]==f||(u="<div class='relatedsumposts'>",u+="<a href='"+relatedUrls[o]+"' title='"+relatedTitles[o]+"'><img src='"+relatedThumb[o]+"' /></a>",u+="<h6><a href='"+relatedUrls[o]+"' target='_self'>"+relatedTitles[o]+"</a></h6>",u+="<p>"+relatedpSummary[o]+" ... </p>",u+="</div>",document.write(u),h++,h!=relatedPostsNum))&&(o<relatedTitles.length-1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split("<"),l=0;l<r.length;l++)-1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r<e.length;r++)if(e[r]==t)return!0;return!1} //]]> </script>

Kode 2:

<style> .relatedsumposts { padding: 0px 10px; text-align: center; /* width of the related posts area */ width: 120px; float:left;margin-bottom:15px; border-right: 1px dotted #E5E5E5; display: inline-block; } .relatedsumposts h6 { margin: 5px 0; } .relatedsumposts h6 a { /* link properties */ color: #linkcolor; text-transform: uppercase; font-size:12px; } .relatedsumposts img { /* thumbnail properties */ height: 82px; width: 82px; -webkit-border-radius: 50%; -moz-border-radius: 50%;    border-radius: 50%; } .relatedsumposts p { /* summary properties */ border-top: 1px dotted #E5E5E5; border-bottom: 1px dotted #E5E5E5; color: #summarycolor; font-size: 10px; height: 4em; line-height: 1; margin: 5px 0 0; padding: 5px 0 15px 0; } #relatedpostssum { width: 100%; } .relatedpoststitle { font-size: 19px; margin-bottom:15px; } </style>

Gaya No. 2.  Widget posting yang indah terkait dengan thumbnail posting menunjukkan dalam format persegi panjang dua masing-masing di kedua sisi.




Kode 1:

<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;Related    Posts:&lt;/h4&gt;&quot;,    numPosts: 4,    summaryLength: 70,    titleLength: &quot;auto&quot;,    thumbnailSize: 100,    noImage: &quot;&quot;,    containerId: &quot;bpostrelated-post&quot;,    newTabLink: false,    moreText: &quot;Read More&quot;,    widgetStyle: 2,    callBack: function() {} }; </script>  


Kode 2:

<style> .related-postbwrap{width:100%;float:left;background:#fff;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #E6E6E6;margin-bottom:10px;} .related-postbwrap h4{color: #2D2D2D; font-size: 15px; font-weight: bold; margin-bottom: 10px; text-align: left; text-transform: capitalize; margin: 0; background: #FCFCFC; padding: 15px; border-bottom: 1px solid #E6E6E6;} .related-post-style-2,.related-post-style-2 li{list-style:none;margin:0} .related-post-style-2 li{overflow:hidden;padding:10px 0;line-height:.9;width:47%;float:left;margin-right:20px} .related-post-style-2 .related-post-item-thumbnail{width:100px;height:85px;max-width:none;max-height:none;background-color:transparent;border:none;float:left;margin:2px 10px 0 0;padding:0} .related-post-style-2 .related-post-item-title{font-weight:700;font-size:13px;color:#2D2D5A;font-family:raleway;}    .related-post-style-2 .related-post-item-summary{display:block;font-size:12px;font-weight:600;margin-top:5px;line-height:1.3} .related-post-item-more{display:none} .related-postbwrap ul {padding:10px;overflow: hidden;} .post-body {width:auto!important;} .related-post-item-title {font-size:12px!important;} .related-post-style-2 li {width:100%;} .related-postbwrap {width:100%;} .related-post-style-2 li {width:100%!important} </style>


Gaya No. 3.  Widget posting yang indah terkait dengan thumbnail posting menunjukkan dalam format persegi panjang menunjukkan dalam satu baris dengan thumbnail posting, judul dan snippet posting.







Kode 1:

<script type='text/javascript'> //<![CDATA[ var relatedTitles = new Array(); var relatedUrls = new Array(); var relatedpSummary = new Array(); var relatedThumb = new Array(); var relatedTitlesNum = 0; var relatedPostsNum = 4; // number of entries to be shown var relatedmaxnum = 75; // the number of characters of summary var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8GSigCHjv_b9WLsRKW_X2yfZljoCkivON4OLv-pE9JAuBooQotD0m1axkveQ2ahQV5ouEr2bxHwGwepIYnB8nuBA18tJu9rR5rW2s-wZ9mfJT1axLKeyS5i6qOeL0mWDHBH6BHx8UYR5E/s1600/no_image.jpg"; // default picture for entries with no image function readpostlabels(e){for(var t,r,l,a=0;a<e.feed.entry.length&&(t=e.feed.entry[a],a!=e.feed.entry.length);a++){relatedTitles[relatedTitlesNum]=t.title.$t,l="","content"in t?l=t.content.$t:"summary"in t&&(l=t.summary.$t),relatedpSummary[relatedTitlesNum]=removetags(l,relatedmaxnum),r="media$thumbnail"in t?t.media$thumbnail.url:relatednoimage,relatedThumb[relatedTitlesNum]=r;for(var d=0;d<t.link.length;d++)if("alternate"==t.link[d].rel){relatedUrls[relatedTitlesNum]=t.link[d].href;break}relatedTitlesNum++}}function showrelated(){for(var e=new Array(0),t=new Array(0),r=new Array(0),l=new Array(0),a=0;a<relatedUrls.length;a++)contains(e,relatedUrls[a])||(e.length+=1,e[e.length-1]=relatedUrls[a],t.length+=1,t[t.length-1]=relatedTitles[a],r.length+=1,r[r.length-1]=relatedpSummary[a],l.length+=1,l[l.length-1]=relatedThumb[a]);relatedTitles=t,relatedUrls=e,relatedpSummary=r,relatedThumb=l;for(var a=0;a<relatedTitles.length;a++){var d=Math.floor((relatedTitles.length-1)*Math.random()),n=relatedTitles[a],s=relatedUrls[a],m=relatedpSummary[a],i=relatedThumb[a];relatedTitles[a]=relatedTitles[d],relatedUrls[a]=relatedUrls[d],relatedpSummary[a]=relatedpSummary[d],relatedThumb[a]=relatedThumb[d],relatedTitles[d]=n,relatedUrls[d]=s,relatedpSummary[d]=m,relatedThumb[d]=i}for(var u,h=0,o=Math.floor((relatedTitles.length-1)*Math.random()),g=o,f=document.URL;h<relatedPostsNum&&(relatedUrls[o]==f||(u="<div class='relatedsumposts'>",u+="<a href='"+relatedUrls[o]+"' title='"+relatedTitles[o]+"'><img src='"+relatedThumb[o]+"' /></a>",u+="<h6><a href='"+relatedUrls[o]+"'    target='_self'>"+relatedTitles[o]+"</a></h6>",u+="<p>"+relatedpSummary[o]+" ... </p>",u+="</div>",document.write(u),h++,h!=relatedPostsNum))&&(o<relatedTitles.length-1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split("<"),l=0;l<r.length;l++)-1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r<e.length;r++)if(e[r]==t)return!0;return!1} //]]> </script>

Kode 2:

<style> .relatedsumposts {margin:0 auto;padding:0;text-align:center; /* width of the related posts area */ width: 120px; float:left;margin-bottom:15px; border-right: 1px dotted #E5E5E5; display: inline-block; } .relatedsumposts h6 { margin: 5px 0; } .relatedsumposts h6 a { /* link properties */    color: #linkcolor; text-transform: uppercase; font-size:12px; } .relatedsumposts img{background-color:#fafafa;width:95%;height:auto;max-width:100%;margin:0 auto;vertical-align:middle;} .relatedsumposts p { /* summary properties */ border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; color: #summarycolor; font-size: 12px; height: 4em; line-height: 1; margin: 5px 0 0; padding: 5px 0 15px 0; } #relatedpostssum { width: 100%; } .relatedpoststitle { font-size: 19px; margin-bottom:15px; ;text-align:center; font-style:bold} </style> 
Ya, itulah 3 Widget Related Post Unik Untuk Blog yang bisa Anda terapkan. Selamat mencoba.


(Admin)


Copyright

Review

Food

pendidikan