Tuesday, April 17, 2018

Post pagination in Blogger's newer themes (including custom next/previous post titles)


Here are 3 simple ways for you to add pagination back to posts in the newer Blogger templates.

These newer (2017) themes remove or hide the links to your next or previous posts, which were available in the older themes. Luckily it's not too hard to get them back.

Add post pagination back to new Blogger themes

Here are 3 different methods you can use to add these links back:
  1. Use Blogger's built-in Newer Posts and Older Posts links
  2. Customize the Newer Posts / Older Posts links to display what you want
  3. Show the titles of the next and previous posts as links to those posts

Note: I used the Soho theme for my testing, so these methods will all work great there. Contempo and Notable themes may require some slight tweaking, such as adding the pagination code to a different part of the template or adjusting the CSS selector. Emporio should work similarly, but I was unable to make the page pagination appear in that theme.

Before starting: Add custom CSS code


Before we start, for all 3 methods, we should add a line of CSS to make sure the links get displayed. So go to [ Theme > Customize > Advanced > Add CSS ] and add this line:

.blog-pager .blog-pager-newer-link, .blog-pager .home-link {display: block;}

This will stack the links. If you prefer them in a row or on the left/right sides of the page, just as the pager links used to look in the older themes, add this here also:

.blog-pager-newer-link {float: left;}
.blog-pager-older-link {float: right;}
.blog-pager .home-link {text-align: center;}


Method 1 - Use Blogger's built-in "Newer Posts" and "Older Posts" links


This is very easy. This will add simple links that read Newer Posts and Older Posts at the footer of your posts, along with a Home link.

Blogger's default Newer/Older Posts pagination links on a blog post 

Edit your theme's HTML, and find where you want the next/prev post links to appear. I think the footer is a good place, so I'll find this line in the theme:

<b:includable id='postFooter' var='post'>

Depending on which theme you're using, you may have more than one instance of this line. Check that you've found the one within the "Blog1" widget.

Now just add the following line under there:

<b:include cond='data:view.isPost' name='postPagination'/>

So the whole section for my footer looks like:

<div class='post-footer'>
    <b:include name='footerBylines'/>
<b:include cond='data:view.isPost' name='postPagination'/>    <b:include data='post' name='postFooterAuthorProfile'/>
  </div>
</b:includable>

That's it! Now on your blog, you should see links to Newer Posts, Older Posts, and Home at the bottom of individual posts.

This is a good method for blogs that may have international readers or multiple languages, because this relies on Blogger's own internal variables. This means that visitors who use another language will automatically see "Newer Posts / Older Posts / Home" translated in their own language.

Method 2 - Customize the "Newer Posts / Older Posts" links to display what you want


The Newer/Older Posts links can also be customized to display whatever you want. This can be text, emoji, images, or any combination.

Customized next/prev post links in Blogger's newer themes

First you should do the same steps as in Method 1.

When that is finished, find these two lines of code in your template HTML. Each is in a different, separate location within the Blog1 widget.

<b:includable id='nextPageLink'>

and

<b:includable id='previousPageLink'>

Expand their content by tapping the 3 grey dots (or small black arrow), and then edit their content to say whatever you want. Specifically, you'll want to find this line in both sections:

<data:messages.newerPosts/>

and

<data:messages.olderPosts/>

Replace those lines completely, or simply add text alongside them. Those are the codes that will display the phrase "Newer Posts" and "Older Posts" in the user's language.

You can include text, emoji, or other HTML to display images. Just ensure that your new content is enclosed. within the <a> if you want it to be linked.

Here's an example of what the section would look like. I've added a custom message alongside the original Blogger newer/older posts message, and an emoji (well, just an arrow like ">" but you can include any emoji using its decimal code:

 <b:includable id='nextPageLink'>
  <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:messages.olderPosts'>
    <data:messages.olderPosts/> are over here &#60;  </a>
</b:includable>

and

 <b:includable id='previousPageLink'>
  <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:messages.newerPosts'>
    &#62; <data:messages.newerPosts/> are over there   </a>
</b:includable>

You can, for example, include an <img> tag here to your own special arrow-style images hosted on Blogger.

Method 3 - Show the linked titles of the next and previous posts


A bit more complicated, but you can also display the actual titles of the next/previous posts as links directly to those posts. This is a nice way to give a small preview of what else your blog offers.

Titles of the next/previous posts, displayed and linked directly to those posts

This will require adding some custom code to grab the post titles. Blogger natively can grab the links to the next/previous posts, but not their titles, it seems.

Copy the following code, and paste it where ever in your blog template that you'd like the links to appear. For example, you can paste it under <b:includable id='postFooter' var='post'> for the links to appear in the post footer. 

<div class='next-previous-post-title-links'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?attredirects=0&amp;d=1"></script>
<script type="text/javascript">
$(document).ready(function(){
 var olderLink = $("a.blog-pager-older-link").attr("href");
 $(".blog-pager-older-title").load(olderLink+" .post-title:first", function() {
  $(".blog-pager-older-title").text($(this).text());
 });
 var newerLink = $("a.blog-pager-newer-link").attr("href");
 $(".blog-pager-newer-title").load(newerLink+" .post-title:first", function() {
  $(".blog-pager-newer-title").text($(this).text());
 });
});
</script>

Next, we should replace the "Newer/Older Posts" messages, similarly as we did in Method 2.

Replace <data:messages.olderPosts/> with the following:

<span class="label">&amp;laquo;</span>
<span class="blog-pager-newer-title"></span>

And replace <data:messages.newerPosts/> with:

<span class="blog-pager-older-title"></span>
<span class="label">&amp;raquo;</span>

So they should each of those sections should look like this:

<b:includable id='previousPageLink'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:messages.newerPosts'>
<span class="label">&amp;laquo;</span>
<span class="blog-pager-newer-title"></span>
</a>
</b:includable>

and

<b:includable id='nextPageLink'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:messages.olderPosts'>
<span class="blog-pager-older-title"></span>
<span class="label">&amp;raquo;</span>
</a>
</b:includable>

And that's it! Again, you may need to make slight tweaks or modifications to get it working right other than on Soho. For example, Contempo required different CSS. But you can play around with it. You may want to display:none the "Home" link, for example.

Have fun!

Read more ...

Sunday, April 15, 2018

Naver releases Whale browser for Android (screenshots and my review)


Naver has released the mobile version of their Whale browser for Android. Here is a screenshot tour highlighting the look and new features of Whale, plus my commentary and thoughts.

Whale on desktop and mobile. Image: Naver


What is Whale?


Whale is a browser made by Naver, based on Chrome. They released a desktop version awhile back for Windows, MacOS, and Linux, and even an English version. Now the Android version is out, though note that the app is currently only in Korean. I'm sure they'll release an English version soon, as some settings are already showing up in English. Whale's draw is that it's as smooth/secure as Chrome, but defaults into all the Naver ecosystem services that most Koreans use.

Anyway, I played around with it yesterday, and took extensive screenshots. Here's what it looks like in action.

Whale: Screenshot tour


First-run pages


Whale first-run pages

When you first run Whale, it will ask to to agree to their policies. The first option is mandatory. The second, about agreeing to send diagnostic data, is optional.

Next it will outline a few of the new features. Just keep clicking the right link to go "Next" or the left to skip this intro.

Then it will ask you if you want to sign-in to your Naver account. Since I already have the Naver app on my phone and was signed-in, it presented my credentials right away. One tap and I was in. If you want to sync your history/bookmarks/Belly/etc. with your desktop Whale, do this. Otherwise you can continue without signing-in by tapping the bottom link.

Whale main menu


Whale main menu

Whereas you access a right-side vertical menu in mobile Chrome, here in Whale you tap the center of the bottom-screen (shown below) menu bar. It brings up a box-style menu from the bottom (see above). From here are all your usual options:

First page (left above):

  • The circle icon at top is your profile. Blank because I didn't log-in. Tap it to log into your Naver account.
  • Add bookmark
  • Bookmarks list
  • Share
  • Screen shot capture/editor
  • Translate via Papago
  • Reading Mode
  • Download
  • Find in Page
Scroll the box right to get the Second-page (right above) options:
  • History
  • Belly list
  • Add shortcut to Android homescreen
  • PC/Desktop version of site
  • Add to Favorites
  • Feedback


For me, the Papago button to translate manually is a great feature. I've always hated that Chrome decides when/if it will ask me if I want a page translated. I want a manual way to trigger that translation.

Plus Papago is a great translation service. Nice to see it built right into your mobile browsing.

Whale tab management 


Using tabs in Whale

Whale starts with a beautiful customizable New Tab page. Those are the default sites. Tap an icon or else tab the little tab switcher icon to get a display of all your open tabs. You can also go Incognito from here.

I hate this. I hate that tab control is done via buttons. This is a key reason I refuse to use Firefox or almost any other mobile browser. Chrome tab management is just so smooth. I love dragging down from the URL bar and tossing aside tabs, or else sliding within the URL bar to switch between them. The milliseconds I waste having to tap tap tap on Whale drive me crazy.

Related: I've started using the Brave browser as my default, precisely because they finally rewrote their code based on the Chrome source code, so it behaves exactly like Chrome (it essentially is Chrome, plus AdBlock). With that welcome change, I made the switch. I was hopeful Whale browser, its guts still essentially Chrome, would keep Chrome's tab management. It didn't, and that's a big strike for me.

Whale settings pages



Whale settings pages

Whale lets you customize your new tab page to one of its pretty images, or a custom image of your own.

You also can choose the highlight color, to change the color of UI elements. Really this is hardly noticeable though.

Go into the full settings page, and bingo, there's your standard Chrome settings, perfectly in their original Chrome English.

Whale menu-bar themes


Whale menu bar themes

There are two "styles" for the Whale UI elements while browsing.

The standard is the URL bar up top, with quick-button to your chosen home-page (when I changed from Naver to Google, the big green N also changed to the rainbow G), plus a quick-link to save your current page in Belly. Additionally, there's another menu bar on the bottom for settings, tab-switcher page, quick-search, and forward/backward. They can fade away while scrolling. But I don't care. I hate two menus.

The other option is a "simplified" version where everything is crammed into the bottom bar. Call me crazy, but I never liked bottom menu bars. This one includes back/forth, menu, Belly save, and tab-switcher.

"Belly" note taking and web-clipping service


The "Belly" of the Whale

Here's a look at Belly in action. Just as on the desktop version of Whale, the mobile versions gives you quick access to you Belly clipped/saved items list. Think of it as Naver's version of Google Keep. While you surf, you can clip text, images, video, links, etc. into your list, which is then accessible and synced on all your Naver devices, including the web at https://m.belly.naver.com

Here's Naver's official English commentary about Belly:

What is Belly?

Belly is a login based scrapbook service. Unlike bookmarks that store your favorite sites, you can save the text, videos, images and anythings you want to see later. Once you add shopping items you are browsing, recipes for the weekend meal, and benchmarking materials for your work, it's very convenient to check them out with your desktop or mobile later on.

Super easy clipping anywhere on any device.
Just one tap a Belly heart to save content and easily access your content list regardless of whether you're using desktop or mobile.

Organize your content in a simple way!
Save any type of content such as images, videos, shopping links, etc. Then, Belly let them automatically classified. You can also make your own categories.

Bring your content to Whale Belly even favorites from other services, too!
Once you connect Belly with other services such as Naver Bookmarks, Naver Shopping, Naver TV, YouTube, etc., Belly will bring together all of your favorite content.

Feed Your Whale, "Whale Belly"
Save content you want to read later or keep in one place!
나만의 스크랩 서비스 벨리를 소개합니다 : 네이버 블로그

You can see more at the above link of Belly in action (Korean). Above in my screenshot you can see my saved items list on the left. I like that Whale has a quick-action button prominently near the URL bar for saving into Belly. I make extensive use of Google Keep, and wish I could stick its share button right in the URL bar too.

On the right is what you'll see if you're not logged into your Naver account. Notice it's in English already, as it's the web-based service (not directly tied to the browser).


More Belly fun

Belly how has categories you can sort by (Left) in addition to a neat new feature: auto-clipping. You can set it so that items added to these lists will be auto-added into Belly:

  • Naver Shopping Wishlist
  • Naver TV "Watch Later" playlist
  • Naver bookmarks
  • YouTube "liked" videos
It'd be nice if I could arrange something similar for Google Keep. Using IFTTT could be a workaround. I wonder what other services will be added to Belly later. Could be a useful tool after all. 

Quick Search



Whale quick-search

From the main bottom menu, you can also launch a quick-search, which is really just a fancy way to say "open a new tab on top on the current one". It's supposed to be for quick little Naver searches or quick one-box information checking, similar to how Google has "Now on Tap" or whatever they call it now. I don't see how this is useful over just highlighting a term and "Web search" from the context menu, or just plain opening a new tab. But to each their own. I guess it's an attempt at multitasking, but I'd rather have it in a separate normal tab to refer to again easily later.


Papago translation built-in


Papago Translation

Here's a sample of Papago's translation in-app. Visit a page, open menu, tap Translate, and the menu in the Left image appears. You can choose the languages and also choose if you want this site to be auto-translated next time. The post-translation result is on the Right.

To me, this is the best feature of the mobile Whale. I can be useful sometimes to compare translations from Google and Papago. This was difficult on mobile for websites. Not any more. Nice to have this built-in and manually controlled.

Reading mode


Reading mode

Like Firefox, there's also a reading mode that strips out the junk so you can focus on the text.

And that's Whale in a nutshell.

Other minor stuff


Whale also has an Android widget to show your bookmarks, but it's identical to the same Chrome widget.

Whale also adds an item to the Android "share" menu: an option to save to Belly. That's convenient for saving content from other apps into your Belly for later perusal within Whale.

Here's Whale's current user-agent string for nerds:
Mozilla/5.0 (Linux; Android 6.0.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Whale/0.9.5.0 Mobile Safari/537.36

Whale's English forums can be found here, to address any feedback or issues:
English - 웨일 연구소

And finally some other news articles about this mobile release. Most are just announcements with little info, but the final link is the official blog post which includes their English announcement:




Final verdict


This mobile version of Whale is nice, just like the desktop version is nice. But just like the desktop version, it's not going to make me switch from Chrome. It's still too gimmicky for me. Two UI bars? Reading mode? Slow tab switching? Pass.

If you're invested in the Naver ecosystem and want something working by default in it, this is for you. Easy, simple log-in via Naver, everything synced, etc. I just really prefer the smooth tab management of Chrome. If Whale adopts that, I'd consider switching. But I all but stopped using Whale on desktop in the past few months too.

Anyway download it and try it for yourself here:

🔗 Whale - 네이버 웨일 브라우저 - Apps on Google Play

Whale on Google Play Store

No iOS version quite yet. They say it's coming "soon" but I couldn't find an exact release date anywhere.

The other versions of Whale, including desktop, are here:
Whale official download

Have fun swimming the web with Whale.

Read more ...

Thursday, April 12, 2018

Watch free Marvel movies right inside KakaoTalk


KakaoTalk is showing free Marvel movies right inside the KakaoTalk app this month.

Update: I tried it. You can click through via KakaoTalk, but it looks like eventually it will direct you to download KakaoPage, a separate app.

Kakao's free Marvel movie lineup

They'll be showing
  • April 14 - Avengers: Age of Ultron
  • April 15 - Doctor Strange
  • April 21 - Captain America: Civil War
  • April 22 - Guardians of the Galaxy Vol 2

Then of course Infinity War comes out here in theaters on the 25th. You can also watch the livestream for the red carpet event when the Avengers actors come to Korea, starting at 6:40pm today (April 12). This too within KakaoTV section of KakaoTalk.

Some English users never really check this third tab, since it's a Korean-language feed of news, promos from other Kakao ecosystem services, etc. I've noticed quite a few live streaming sports events show up there from time to time. Interesting to see Kakao move forward with its offerings. Merging with Daum and taking on Melon was smart. They'd be crazy to just keep KakaoTalk as a pure messenger. Fate threw in their lap an app that nearly every Korean inherently uses. Why squander that opportunity?

HT: 어벤져스는 카카오페이지로 통한다 - 전자신문

Read more ...

Tuesday, April 10, 2018

3rd Naver Design Fellowship open to foreigners


Naver is offering a design fellowship which is open to foreigners. They posted the recruitment ad in both Korean and English.

Before you get excited, I goofed on this one and bookmarked it to post later, got busy, and forgot. The deadline was a couple of days ago. Sorry about that. I'll post it here anyway for future reference.




Here was the English version:

NAVER Design Fellowship 3rd


We are searching for students who can design the future of NAVER

What is NAVER Design Fellowship?

NAVER Design Fellowship is an intensive 8-week program where tasks are given and evaluated at
weekly meetings(every Wed, 7 ~ 9 pm), and it doesn't interfere with school studies.


Eligibility : Undergraduate / Graduate / International Students interested in mobile service (academic background is irrelevant)

Number of Fellowships : Approximately 10 fellowships will be granted

Program Timeline : April 25th, 2018 ~ June 14th, 2018 (8 weeks)
                                  Every Wednesdays from 7 to 9 pm @ NAVER HQ
                                  (meeting will be rescheduled to Thursday in case Wednesday is a holiday)

Admission Process : Document (+Assignment) Screening →  Interview


Admission Schedule :
  • Document Submission Period : March 23rd (Fri)  ~ April 6th (Fri) 23:59
  • Screening Result Notification : April 13th (Fri)
  • Interview Dates : will be announced individually to applicants who pass the document screening.
  • Final Result Notification : April 20th (Fri), will be announced individually to every interviewees.


Assignment : Design a 'NAVER app' screen, and explain you design in detail.
(Elements that comprise the first screen, such as search bar, Tab menu, do not have to be included.)

Benefits :  Basic activity cost + Incentives depending to the outcome of weekly tasks.
                   Notable fellowships may lead to full-time employment or 2018 Design Internship

모집소식 상세보기 : NAVER Career


You can still see more at the link above. They also have an extensive English language FAQs section:
[ENG]NAVER Design Fellows.. : 네이버블로그


Again, sorry I missed this. You can keep an eye out yourself by checking here:
NAVER Career

Obviously their offerings in English are rare but fellowships or workshops come up now and then.

Read more ...

Saturday, April 7, 2018

Make any Blogger widget adopt the drop-down style menu of "Archive" and "Labels" in new Blogger themes


Here is a simple way to make all of your Blogger sidebar widgets adopt your blog theme's new standard "drop down" widget style.

This will enclose your widget in the same "click to open" dropdown style that the Archive and Label widgets natively use in Blogger's newer Contempo, Soho, Emporio, and Notable themes. This has been a highly desired change, and you can easily apply the style to any widget with a small code change.

Modified Blogger widget in Emporio theme.
Left: standard widget with full content displayed, no drop-down styling.
Right: Same widget now using the theme's standard dropdown styling. 

Background


One frustration you may have experienced when switching to these newer (2017) themes is that your sidebar widgets do not fit the style of the new theme. The Archive and Label widgets were redesigned to smoothly match with these new themes with a sleek dropdown menu look that displays the widget title and expands to show widget content when clicked by users.

But this meant that other or custom widgets added to the new "pop-out" sidebar ended up looking ugly or out of place. This is true even for other common Blogger-made widgets like adding plain text, images, link lists, or of course especially the custom HTML/Javascript widget.

Luckily, we can apply the same basic native style to any widget, so that any can adopt this drop-down style and blend well with the rest of the theme. Since we're only applying Blogger's own native code to the widgets instead of picky CSS code, this should work no matter what customization you've made to the theme design, and will look professional.

How to apply the dropdown style to any widget


1. Find your widget


Go to the template editor (Theme -> Edit HTML) and from the "Jump to widget" drop-down menu find your widget.

2. Locate the line to add code


Find the end of the widget-settings code. It looks like this.

 </b:widget-settings>

You may need to expand the code with the side-arrow or the three-dots button.

3. Add the code


Just below the </b:widget-settings> code, paste the following:

 <b:includable id='main' var='this'>
          <details class='collapsible extendable'>       
            <b:with value='true' var='renderAsDetails'>
              <b:include name='super.main'/>
            </b:with>
          </details>
        </b:includable>

4. Replace the original includable


Your widget already had a "main" includable ID. But after pasting the code above, now there are two, and if you save you'll get a template error. Simply find the original main, which should be just below your newly-pasted code. It looks like this:

<b:includable id='main'>

And change it to a different ID, such as:

<b:includable id='main2'>

5. Done!




So, for comparison, the overall widget code for my plain text widget example in the image above will look like this:

<b:widget id='Text1' locked='false' title='Widget Test' type='Text' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'>Here is some plain text to demonstrate how this will look. Here is some plain text to demonstrate how this will look. Here is some plain text to demonstrate how this will look. Here is some plain text to demonstrate how this will look. Here is some plain text to demonstrate how this will look. Here is some plain text to demonstrate how this will look.</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<details class='collapsible extendable'><b:with value='true' var='renderAsDetails'><b:include name='super.main'/></b:with></details>
</b:includable>
<b:includable id='main2'>
<b:include name='widget-title'/>
<div class='widget-content'><data:content/></div>
</b:includable></b:widget>

Hopefully this will help your blog look smoother, more professional, and still utilize widgets in the sidebar. And since this is done per-widget, you can still choose to have some display their content not hidden behind the dropdown arrow.

Read more ...

Cherry blossom festivals on Naver maps


Naver Map has a cute new feature just in time for Cherry Blossom season. Just search "벚꽃" and the map will zoom in to where the nearest cherry blossom festival to your location is being held, along with providing supplementary info about it. Zoom out, and you can see several around the country, with cute pink icon labels. 

Searching 벚꽃 on Naver Map

I got slight different results when searching in English for "cherry blossom festival"

Searching "cherry blossom festival" on Naver Map

I can't believe the cherry blossoms are already in full bloom in my neighborhood. Seems pretty early this year, but I guess really it's not that unusual.

Here's a map of the blossom times, though it's fully out of date by now:

Image:  Korea’s Cherry Blossoms 2018 Forecast: When & Where to Catch Them? | Tripzilla 

Read more ...

Monday, April 2, 2018

Links for March 2018


It's time for another link roundup. Stuff I read in March that interested me. A whole lot for you this month.


Links for March 2018


General Tech stuff



This Korean Life



Korean News Links


Interesting articles that I couldn't find English versions of.


Shelly!


This adorable robotic turtle, named SHELLY (zomg), deserves his own category.

Headline Gore



And finally, something mildly interesting I saw one day:


Whew, that was a lot of links. Wonder if anybody even finds this useful. Think I ought to cut down and focus on just a few key links each time.

Anyway, thanks for reading and see you again next month.

Read more ...