Search bar

Help Customization
1

I’m searching for a way to add the kind of searchbar you can find on this (awesome) write blog:

https://plaintextproject.online/articles.html

2

You could use the various Glitch apps. I believe they are in the “what people are working on” thread.

3

@sfss This is easy to do. It just takes adding an html iframe snippet to a blog page, no javascript or CSS is needed. The blog must be public, if it’s a private blog it won’t work. Take a look at the source code for the page you linked (typically, right-click on the browser page and select View Source). You’ll find the following snippet embedded in that code:

<iframe src="https://duckduckgo.com/search.html?width=250&site=plaintextproject.online&prefill=Search The Plain Text Project" style="overflow:hidden;margin:0;padding:0;width:308px;height:40px;border-radius: 15px 50px 30px 5px;" frameborder="0"></iframe>

The DuckDuckGo search engine is used. Replace two parts of that code:

  1. Replace plaintextproject.online with either your personal domain name or your <blog>.writeas.com blog.

  2. Replace Search The Plain Text Project with your custom search message.

A couple points:

  1. You can search other public blogs or web sites if you want. It doesn’t have to be your own blog.

  2. Since this snippet is html with no javascript or CSS, this will work in an anonymous post also. However, you would have to search a public blog or site. Anonymous posts and private write.as blogs are not searchable.

  3. If your blog’s url is in the form write.as/blogname rather than blogname.writeas.com, that might work as well. I quickly did a test and it appeared to work.

  4. If your blog is private or if you want to search your anonymous posts, you can still do it using either (1) glitch apps that @nibl referred to in the previous message in this thread, or (2) if you have your own web server, you can use a PHP program in combination with data downloaded from the API; this technique is outlined here

Thanks Plain Text Project for showing how this can be done.

4 Likes
4

Thanks a ton!

5

Glitch apps are a bit slow to load… That being said some of the glitch apps created here (especially those created by CJ, but by others too, Dino for ex. ) are great.

6

The past few days I have been considering switching my Search app for this Duck Duck Go implementation. One of my reasons for considering a switch is that yes, the Glitch apps do take some time to load. Another reason is that I cannot control the url of my Search app with a custom domain, and even if I unlocked that ability in Glitch, I don’t know if I can set it in a way where it looks like just a page on my site. Anyway, thanks for this question and the solution shared by bugbuster, I’m going to give it a try. The fact that it is all html and doesn’t need javascript appeals to me a lot.

1 Like
7

We mention this very solution in the Adding Search to Blog topic. Check out the particular section below as it links to DuckDuckGo’s own searchbox creator. All you do is fill out their form and it creates the embed code for you to put in your blog.

4 Likes
8

So I did some more digging and saw that the folks at Micro.blog incorporate a similar DuckDuckGo search bar. However, they include custom HTML & CSS to make the search bar simply elegant. Check out an example at the bottom of founder Manton Reece’s blog.

With some Custom JS & CSS, I tried to replicate this on my blog. The resulting search bar is on the bottom of my blog. It looked so good that I deleted my search app to use it instead.

Check it out and let me know if it’s something you’d like on your blog. If the demand’s there I’ll write up how I did it. Thanks to everyone again for bringing up here. I would have never redid how I did search on my blog if it wasn’t for this topic.

4 Likes
9

That does look kind of cool! One less pinned page on the headers as well.

10

Thanks @dino! I just went ahead and made a post on it outlining how I did it. Let me know what y’all think and I’d be glad to clarify anything.

https://blog.cjeller.site/new-year-new-search

4 Likes
11

This is terrific and looks great! Thanks for your code, references, and website examples. And I loved the staircase wit blog post and the Denis Diderot quote.

2 Likes
12

Thanks for this!

1 Like
13

I just updated the CSS so it blends in with Write.as blogs a bit more. It takes the same styling as the Email subscription form. You can see the update on my blog. The updated CSS is below:

#search .field {
    width: 270px;
    height: 34px;
    text-indent: 0px;
    display: inline-block;
    text-align: left;
    background-color: white;
    margin: 0em;
3 Likes
14

simple, clean and eye-pleasing

Awesome!