Cara Membuat Table of Contents di Postingan Blogger

Table of Contents adalah daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat pada sebuah artikel. Table of Contents bisa kita gunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk memilih informasi bagian pokok bahasan apa yang akan dibacanya. Table of Contents ini sering kita temui pada situs Wikipedia, Ensiklopedia, dan juga file PDF dari E-Book yang biasanya diletakkan setelah tulisan kata pengantar atau ide pokok dari sebuah artikel.

Baiklah, di sini Arlina Design akan memberikan tips tentang bagaimana Cara Membuat Table of Contents di Postingan Blogger dengan mudah.
Selengkapnya »

Memasang Efek Preloading Keren di Blogger

Ada banyak cara usaha untuk mempercantik blog, salah satunya dengan Memasang Efek Preloading Keren di Blogger ini. Bagi yang penasaran, simak tipsnya di bawah ini.

Cara kerja dari Efek Preloading di Blogger ini yaitu transisi yang akan muncul otomatis saat memuat halaman di blog dan akan hilang setelah halaman tersebut termuat dengan penuh. Efek Preloading yang akan saya bagikan ini tidak akan mempengaruhi kecepatan blog karena sangat ringan murni CSS dan SVG tanpa gambar. Sebelumnya saya juga pernah berbagi postingan terkait di sini Cara Memberikan Efek Animasi Loading Sederhana Saat Halaman Dimuat. Berikut tips Cara Memasang Efek Preloading
Selengkapnya »

Cara Memasang Syntax Highlighter di Postingan Blog

Selain mempercantik tampilan barisan kode di postingan blog, penggunaan Syntax Highlighter juga dimaksudkan untuk pembaca agar dapat dengan mudah mengenali jenis kode yang diberikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya yaitu pengunjung akan merasa lebih nyaman membaca isi konten blog, dan bagi penulis atau admin blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorial mereka.

Syntax Highlighter merupakan fitur khusus sebuah proses pemindahan kode bahasa pemrograman tertentu dengan tulisan, warna teks, posisi sama persis dengan yang terdapat pada sebuah kode bahasa pemrograman untuk dipindahkan maupun disalin ke dalam bentuk tulisan lain agar lebih mudah dalam membaca atau mempelajarinya.
Selengkapnya »

Cara Membuat Judul Blog Muncul Satu Kata

Kali ini Arlina Design akan memberikan tips Cara Membuat Judul Blog Muncul Satu Kata. Tips ini bekerja jika sobat ingin memotong atau menyembunyikan judul blog yang terlalu panjang dan hanya satu kata pertama saja dari judul blog yang ingin dimunculkan.

Seperti contoh misalkan judul blog sobat adalah Tutorial Blogger 2017, maka dengan trik ini akan otomatis memotong judul blog menjadi Tutorial saja. Meskipun judul blog panjang agar terlihat rapi bisa diatasi dengan mengganti judul dengan logo, namun tidak ada salahnya untuk mencoba cara lain seperti yang akan saya berikan berikut ini.
Selengkapnya »

Membuat Tombol Demo dan Download Material Design

Membuat Tombol Demo dan Download Material Design - Seperti yang kita ketahui, kini Material Design sudah menjadi tren sebagai antarmuka web atau UI (User Interface) baik itu pada perangkat mobile maupun desktop dalam sebuah halaman website. Antarmuka web ini pun disambut baik oleh pengguna maupun pengembang website karena memiliki segudang fitur yang bermanfaat serta tampilan yang lebih menarik.

Pada kesempatan ini Arlina Design akan memberikan contoh tombol demo dan download yang ditambahkan dengan efek animasi ripple (gelombang) pada saat kita menekan tombol tersebut yang merupakan salah satu fitur seperti efek animasi dari Material Design.
Selengkapnya »

Membagi Konten Artikel Menjadi Beberapa Halaman dengan Efek Slide

Tutorial berikutnya Arlina Design akan memberikan sebuah tutorial Membagi Konten Artikel Menjadi Beberapa Halaman dengan Efek Slide. Di sini sobat hanya perlu menambahkan kode HTML di editor postingan yang nantinya akan muncul di blog sobat.

Tutorial ini sangat cocok bagi sobat yang memiliki tulisan artikel yang cukup panjang di blognya, sehingga akan menghemat ruang di halaman posting. Oke, langsung saja silakan ikuti langkah-langkah berikut ini.

Membagi Konten Artikel Menjadi Beberapa Halaman

Selengkapnya »

Memotong Snippet Popular Posts di Blogger

Memotong Snippet Popular Posts di Blogger - Kali ini Arlina Design akan berbagi tentang cara Memotong Snippet Popular Posts yang merupakan salah satu widget yang direkomendasikan untuk dipasang di blog.

Widget yang satu ini memberikan informasi kepada pembaca postingan atau artikel apa saja yang sering dilihat di blog yang bisa diatur berdasarkan 7 hari terakhir, 30 hari terakhir, atau setiap saat. Dengan begitu, pembaca mendapatkan lebih banyak pilihan untuk menjelajahi halaman blog kita. Yang pada akhirnya akan berdampak positif dan menambah pageview blog kita.
Selengkapnya »

Cara Memasang Lazy Load di Blog

Cara Memasang Lazy Load di Blog - Ada banyak cara untuk mempercepat loading suatu blog, yaitu salah satunya dengan cara memasang plugin Lazy Load. Kali ini Arlina Design akan berbagi trik yang merupakan salah satu dari optimasi blog dengan plug in jQuery Lazy Load untuk meringankan beban loading saat memuat halaman blog sobat.

Selengkapnya »

Membedakan Style Komentar Admin

Membedakan Style Komentar Admin - Membedakan Style Komentar Admin dengan pengunjung tentunya bisa dilakukan dengan CSS, namun di sini Saya mencoba untuk memanfaatkan penggunaan jQuery.

Selengkapnya »

Cara Memberikan Efek Animasi Loading Sederhana Saat Halaman Dimuat

Cara Memberikan Efek Animasi Loading Sederhana Saat Halaman Dimuat - Pada kesempatan ini Arlina Design akan berbagi tutorial memasang efek animasi loading saat halaman dimuat yang bisa sobat tambahkan di blog. Cara kerja dari trik ini sebetulnya sangat sederhana yaitu kode akan berjalan ketika sobat membuka blog saat proses memuat halaman dan akan berhenti secara otomatis ketika halaman tersebut telah termuat dengan penuh.

Bagi sobat yang ingin mencoba menambahkan Efek Animasi Loading Sederhana di blog, silakan ikuti langkah berikut ini

Memasang Efek Animasi Loading Sederhana di Blog

Selengkapnya »

Cara Membuat Sticky Widget di Sidebar Blog

Pada artikel sebelumnya saya pernah berbagi tutorial tentang Memasang Fungsi Sticky Pada Widget Blogger, kali ini saya akan berbagi tutorial dengan fungsi yang sama yaitu untuk membuat widget tertentu menjadi sticky atau melayang mengikuti halaman saat digulirkan ke bawah dan atas. Tutorial ini merupakan perbaikan sekaligus menjawab komentar sobat dari tutorial sebelumnya yang ketika halaman digulir ke bawah sticky widget akan melewati Footer Wrapper dan itu akan sedikit mengganggu karena menghalangi widget yang dipasang di area Footer.

Kode yang akan saya bagikan ini lebih cocok dipasang pada semua konten di Sidebar atau bisa juga dipasang pada salah satu widget tertentu.Bagi sobat yang ingin mencobanya, silakan ikuti tutorial Cara Membuat Sticky Widget di Sidebar Blog.

Selengkapnya »

Adding Pinterest 'Pin It' Button to Blogger Dynamic View Templates

Pinterest is a tool that lets you "organize and share all the beautiful things you find on the web" - at least that's what they said. To date, I've never really fully understood what it does. But I do realize that it is popular, and people have been looking for ways to integrate the 'Pin It' button to their blogs - to allow their their blogs to get pinned to other pinterest users' pinboards. It's kinda like inviting your readers to pin your work to Pinterest (correct me if I'm using the wrong terminologies here). It's pretty straight forward to add a 'Pin It' button to a non-dynamic view template, but that isn't the case for Dynamic View templates. Worry not, here's one way to add a 'Pin It' button to your Dynamic View blog.

Note: This tutorial teaches you how to add a 'Pin It' button for your whole blog, not individual posts.

Step 1:

First things first - backup your template by going to Dashboard - Template - Backup/Restore - Download Full Template. Next, go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.

.pin-it-button-ss{
position: fixed;
top: 23px !important;
right: 230px !important;
z-index: 100 !important;
}

Step 2:

In this step, please enter your blog URL and an address to an image that you'd like to use when your blog is pinned. When you've done inputting these two fields, click on the 'Generate Code' button.

Input the address of your blog here:


Input the address of the image that you'd like to use to pin your blog
(click here if you don't have one):

Step 3:

Go to Dashboard - Template - Edit HTML - Proceed - find for </body> - copy and paste the following code directly above </body> - Save Template:

<!-- ss pinterest starts -->
<script src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>$(document).ready(function() {function pinitss(){ if (document.readyState !== 'complete') setTimeout(pinitss,1000); else $("<a class='pin-it-button-ss' count-layout='horizontal' href='http://pinterest.com/pin/create/button/?url=&amp;media='><img border='0' src='//assets.pinterest.com/images/PinExt.png' title='Pin It'/></a>").insertBefore('#header .header-bar .title');}pinitss();});</script>
<!-- ss pinterest ends -->

Extra: Reposition the 'Pin It' button

To adjust the position of your 'Pin It' button, change the values from Lines 3 and 4 of the code in Step 1. The 'Top' and 'Right' attributes literally means the distance from top and from the right where the button should be placed.

Default Avatar in Blogger Threaded Comments

It seems like all the hype on the new threaded comment system is cooling off. But I've decided to keep throwing comment-related tutorials, since few of my previous comment-related tutorials have gotten obsolete. Gotta make up for those posts now, don't I? Right, now.. Blog reader John Bolch has given me a fantastic idea. He said Blogger should give a default avatar to those comments left by readers with no profile images, including anonymous readers. Right now, it'll just show a blank dull image if the user doesn't have a profile image set up. Instead of waiting for Blogger to fix that, let's put a temporary fix up there, shall we? In this post, I'm gonna show you how you can give a default profile image/avatar/whatever-you-wanna-call-it to those avatar-less users.

Go to Dashboard --> Template --> Backup/Restore --> Download Full Template --> Close --> Edit HTML --> Proceed --> Find for </body> --> Paste the following code directly above </body>.

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img1.blogblog.com/img/blank.gif']")
.attr('src', 'https://lh4.googleusercontent.com/-dK5aS3tBne0/AAAAAAAAAAI/AAAAAAAAABI/8YdPUpr9zOY/s48-c-k/photo.jpg')
.ssyby('blank')
</script>

The code in place:

That is all! Easy, isn't it? All you have to do now is replace the address in Line 4 above, with the image address that you'd like to use as your default avatar.

Update: Changing Blogger's Default Image

Looks like Blogger is rolling out an update on this. Blogger is using a default image for avatarless users. If you'd like to change this default image, use this code instead. Again, change the address in Line 4 to match the address of the default image that you'd like to use.

If you're seeing the avatar of a person's profile shadow, use this code:

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img1.blogblog.com/img/anon36.png']")
.attr('src', 'https://lh4.googleusercontent.com/-dK5aS3tBne0/AAAAAAAAAAI/AAAAAAAAABI/8YdPUpr9zOY/s48-c-k/photo.jpg')
.ssyby('blank')
</script>

If your default avatar is Blogger's rounded corner logo, use this one instead:

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img2.blogblog.com/img/b36-rounded.png']")
.attr('src', 'https://lh4.googleusercontent.com/-dK5aS3tBne0/AAAAAAAAAAI/AAAAAAAAABI/8YdPUpr9zOY/s48-c-k/photo.jpg')
.ssyby('blank')
</script>

Highlight Author Comments in Blogger's New Threaded Comment System

Still psyched about Blogger's new threaded comment system? Not really? Well, here's something to boost your spirit. In the old system, I used to have a way to highlight author's comments - you know, so that my comments stand out from my readers' comments. Unfortunately, with the release of the new threaded comment system, that tutorial got obsolete. So I dug further, and came up with a way to do the same in the threaded system. As a bonus, this tweak automatically highlights non-threaded old author comments as well! This is a response to blog readers Blaine and magda.

Go to Dashboard --> Template --> Backup/Restore --> Download Full Template --> Close --> Edit HTML --> Proceed --> Find for </body> --> Paste the following code directly above </body>.

<script src='http://code.jquery.com/jquery-latest.js'/>
<!-- ss highlight author starts -->
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', 'dashed blue 1px')
.css('background','#F0A2A2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
<!-- ss highlight author ends -->

The code in place:

You're basically done. If you want to personalize the highlight's design, see some of the options I've included below. If you have a specific design in mind, and you can't achieve it with the options I've given below, feel free to leave a comment and I'll let you know if and how it can be done.

Personalization:

Border	To adjust your border, modify Line 7 in the code above: .css('border', 'dashed blue 1px') 1) You can change the style of your border. I have used a dashed border. Other options are (simply replace 'dashed' with one of the following words): solid, dotted, dashed, groove, ridge, inset, outset 2) You can change the color to a different plain color. I've used blue in the code above. You can also use hex code for a specific color. 3) You can change the thickness of your border by adjusting the value 1px. If you want no border at all, you can set it to 0px.
Background	You can either use a plain color or an image as your background. I've used a combination of both (white transparent image with light pink plain color). For plain colors without any image, replace Line 8 in the code above with this: .css('background','red') If you want more choices of plain colors, use HEX code instead. I've used a HEX code in the code above. You can get the hex code for a given color from this useful site: .css('background','#F0A2A2') If you want to use only a background image, replace Line 8 in the code above with this (also replace IMAGEURLHERE with the URL of your image): .css('background','url("IMAGEURLHERE")')
Padding	I've included a padding in my code because I think without a padding, the border is too close to my comments. You can set the padding's value to 0 to see what I mean.
Comment Font Color, Size and Type	To adjust comment font color, size and type, refer to my previous tutorial. Change Blogger Comment Font, Size and Color