#blscoding

[todorokiscute]

Hello, I was wondering if you could a tutorial on how to make the ask as bubbles as yours and tumblr's :) thank you

Hi! I was a bit vague in this reply, right? sorry. I’ll try to make a simple tutorial.

Tutorial: Asks as bubble chat with arrows

First of all, search in your theme for {block:Answer} and delete everything to {/block:Answer} including this line. Paste this code instead:

{block:Answer}

{Asker}: {Question}

{Replies}

{/block:Answer}

Now, Let’s add the css before (if you had any question css, delete it, because if the divs name are the same it can cause some trouble):

/* question start by todorokiscute */.question{width:100%;position:relative;display:flex;}.ask{width:calc(100% - 70px); /* distance between the icon and the question*/background:;/* bubble/ask color*/padding:20px;position:relative;border-radius:3px; /* rounded bubbles*/}.ask::after{content:' ';display:block;border:13px solid transparent;border-left-color:; /* arrow color */position:absolute;right:-26px;top:12px;}.asker-avatar{width:50px; /* avatar width */height:50px; /* avatar height */object-fit:cover;position:absolute;right:0;border-radius:100%; /* rounded corners */}.asker b,.asker b a{color:black;/* color of the asker’s name*/font-family:''; /* font if you want to change*/} .replies{margin:1em auto; /* make the reply block a bit distant*/}/* question end */

You can edit as much as you want to. I advice to not edit or delete the lines in bold, though. They’re very important to make the whole bubble responsive or to work altogether with the arrow. Also do not remove the credits, since I came up with this alone :)

I hope this is easy to understand though. Any doubts don’t hesitate to send me asks.

[simpledatainfo]

KN95 Face Mask 60 Pack White, BLScode Individually Wrapped 5-Layer Breathable Mask with Comfortable Elastic Ear Loops, Filter Efficiency≥95%

KN95 Face Mask 60 Pack White, BLScode Individually Wrapped 5-Layer Breathable Mask with Comfortable Elastic Ear Loops, Filter Efficiency≥95%

[smallsandwiches]

The Gospel According to the Sun: A Review of KN95 Face Mask 60 Pack, BLScode White KN95 Mask Individually Wrapped, 5-Layer KN95 Face Mask with Comfortable Elastic Ear Loops, Filter Efficiency≥95% Breathable Cup Mask

I drew a big boner on this so I could charm the ladies behind the counter at the soda jerk shop that I frequent after a good vigorous workout. "Adjustable metal nose bridge wire clip designed to..." Fill in the blank and let the games begin! I bought this because I needed a hobby, an activity that could waste a few minutes of the long list of time I still have jotted down on the back of this match book. I read a few lines from the "good" book and devoured a hamburger drenched in mayo and mustard so heavily that it leaked out the sides and stained my new ironed white t-shirt. BUY THIS!!!

[cloutshoes]

KN95 Face Masks (60pcs White), BLScode Individually Wrapped 5-Layer

KN95 Face Masks (60pcs White), BLScode Individually Wrapped 5-Layer

KN95 Face Masks (60pcs White), BLScode Individually Wrapped 5-Layer Breathable Cup Dust Mask with Comfortable Elastic Ear Loops, Filter Effectivity≥95%, Suitable for Residence, Workplace, Outdoor Included on FDA EUA Listing: BLScode KN95 face masks is Included in FDA Emergency Use Authorization Listing. Manufactured by Sengtor Ltd. 5-Layer Filter, Filter Effectivity≥95%: Breathable KN95 face…

[faceshield4u]

2 PCS Safety Face Shields with Protective Clear Film, BLScode Clear Face Shield Visor Full

Safe and comfortable, the full face protective cap provides more comprehensive coverage and protects the face from saliva flying into the air. Face shield visor can be easily cleaned with water or disinfectant. Ultimate sun protection, scratch resistance, blocking more than 98% of harmful air. Material: PET Plastic face shield fully adjustable head harness that moves up and down easily and fits comfortably with most goggles and respirators.

[ezombybestdeals]

$9.99 BLScode Disposable Face Protective Masks, 3-Layer Facial Cover Masks with Elastic Ear Loops, Comfortable Universal Design for Adults & Kids, Suitable for Home, Office, Outdoor (Pack of 50) https://www.amazon.com/BLScode-Disposable-Protective-Comfortable-Universal/dp/B0897QZKNH/ref=sr_1_13?tag=ezomby02-20&fallback_lp=https://ezomby.com/ Checkout ezomby.com for great deals like these * Insta users, please click our profile @ezombybestdeals for the link to this deal. * Create Price based Deal Alerts #greatdeals #bestdeals #coupondeals #hotdeals #dealsdealsdeals #dealsshaker #dealsmaker #dealoftheday #dailydeals #Gooddeals #Follow #Likes #protectivemasks https://www.instagram.com/p/CEhSnB6p8xS/?igshid=ks42zj2o5fhk

[todorokiscute]

the problem is not the dark background (i think is charming), the problem is the new buttons controls (reblog/like/follow), that are blurred and the last button i can’t read what it is. Like the color is transparent the same as the background.

[todorokiscute]

I noticed that is more easy to both to a responsive layout with fixed sidebar and use sticky element with that sidebar if its positioned at left? There is a way to make it responsive and easy to apply the sticky tutorial (i mean yours, btw. very simple to use) and make it at the right??

Hello, I’m glad you like my simple tutorial :)

I’ve answered something similar here, but days after reply to that ask, I’ve realized something more useful than that. Instead of set up the sidebar at 20% at the right, relative to the content width, how about to put the number at left relative at the posts width?

Like: my posts has a width of 70%, if I put my sidebar to be 70% at the left, it will stay responsive (if the sidebar does not have a fixed width in px, but in percentage). I’m going to share some gifs and codes, you can see live in this editor.

code here

About that sticky problem, yes I’ve came trough that issue. This method may be  the best. But I’ve noticed that instead of float:right (to make sticky after scroll), you might use position absolute and left:70%

code here 

Is very simple :) Let me know if you have any other doubts.

[todorokiscute]

You know where I can find icons to replace the ones in the tutorial?

Hi! You can search in this site. Don’t search for ‘reblog’ icons, try refresh or recycle :)

[todorokiscute]

How do you make a stuck sidebar? Which tutorial you use? I don't know if I'm dumb or what, But I seem to never got to understand those github codes at all. Can you link me to a tutorial? pls

I feel you. Sometimes github codes are a puzzle.

That sidebar thing I just use the add and remove class basic jquery code.

First you set up your sidebar like this:

.sidebar{width:200px;float:left; /* or right */}

Add the jquery to your page, if you don’t have yet. This is the one I use.

before

paste:

$(document).scroll(function() {  var y = $(this).scrollTop();  if (y > <b>200) {    $('<b>.sidebar').addClass('sticky');  } else {    $('<b>.sidebar').removeClass('sticky');  }});

200 is how much the screen will scroll that you want to make the sticky work. 

now, to make the sidebar stuck at the top (or bottom) of your screen, in your css add:

.sticky{position:fixed;top:10px; /* change this */}

You can also, apply effects when it fixes, addying in the initial div code a transition:

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

If you want, like me, wants to apply effects or styles for the boxes, menu, links.. everything inside the sidebar, after it fixes just do like this:

.sticky .anotherdiv{margin-bottom:20px; /* to separate boxes, for example, you can change this to make a nice transition */background:pink; /* to change background for example*/width:300px; /* to change its widht, for example*/}

while you are using .sticky div, you can make everything change after the sidebar fixes. Just play with it.

Let me know if everything didn’t work for you. We’ll figured out together.

[todorokiscute]

Eu também coloquei meu tumblr no blogger (eu tenho um, blog de fanfics, e alguns posts estavam sendo censurados). Você sabe algum site que tenha uma boa base para criar layout de blogger??

Olha, eu ainda não pesquisei sobre template base porque gosto de fazer minhas coisas eu mesma. As dicas que eu posso dar, é escolher o modelo simples, lá na página de Tema

Abrir o editor html, pesquisar por   e  e apagar tudo que tiver dentro. Isso vai resetar todo o css. Para editar eu uso a ferramenta inspecionar do Chrome (ctrl+shift+i) para descobrir as class das coisas e ir editando

Essa setinha que tem, clica nela e depois posiciona em algum elemento da página, aí vai aparecer a class dela. 

Você também pode copiar o código fonte do blog e usar esse site para ir editando e vendo live. Depois é só copiar o css e colar entre e

Eu tentei procurar o código básico dos posts do blogger e achei esse site, mas os códigos são muito complexos e deu bastante trabalho entender. Então eu sugiro o esquema acima mesmo.

Desculpa se não ajudei muito :( nem sei se existem blogs que façam bases para blogger em pleno 2019.

[todorokiscute]

how do you make your menu with two columns but a one column at the bottom. is that the display grid?

I put the menu a to be display inline-block and have a width as calc(50% - 2px); and use .menu a:last-of-type  width 100%;   

[todorokiscute]

Hey! I've seen that the optica theme, the official, use its own captions blocks, which are not available in the docs. But a tumblr user did took that blocks and made a post but I seem to not understand where I should put the codes. Do you perhaps know that code and how to use? it seems I can't remember the user now. thank you.

Hello, I’ve received your ask weeks ago but only have the knowledge to reply now. 

Yes, I’ve seen people commenting on how tumblr has its own caption codes to not look ugly with all those blockquotes and it won’t update the documentation for us to use. The user you’re talking is bychloethemes and this is also the link to the undocs. 

I’ll try to explain how to use, let me know if you can’t understand or if I explained a bit vague. 

The default caption code is this:

{block:Caption}{Caption}{/block:Caption}

There are four block posts that use that caption block:

{block:Photo}{block:Photoset}{block:Audio}{block:Video}

So for these four blocks, all you have to do is search for the {block:caption} {caption} {/block:caption} code and replace with the following code:

{block:Caption}{block:NotReblog}

{Caption}

{/block:NotReblog}{block:RebloggedFrom}{block:Reblogs}

{block:IsActive}{/block:IsActive}{block:IsDeactivated}{block:IsDeactivated}{block:IsActive}{Username}{/block:IsActive}{block:IsDeactivated} {Username}{/block:IsDeactivated}

 {Body}

{/block:Reblogs}{/block:RebloggedFrom}{/block:Caption}

This code has to be followed by the end tag of the blocks mentioned above. ex: {/block:Photo} {/block:Video} etc…

For the Links posts (search for {block:Description} and delete until {/block:Desciption}) , you’ll use the same as the code for the photo, photosets, audio and video (above code), but you’ll have to change the

{Caption}

to:

{Description}

To add the captions to the answer block, use the same first code, and like the link post, change the

{Caption}

to:

{Replies}

Text posts are different, because they don’t have a caption block, they have a {Body} line. So search for the {block:Text} and find {Body}, delete and use the same previous code, just delete the first line {block:Caption} and the last line {/block:Caption} and instead of {Caption} change for {Body}. The code will be like this:

{block:NotReblog}

{block:AskPage}{/block:AskPage}{Body}

{/block:NotReblog}{block:RebloggedFrom}{block:Reblogs}

{block:IsActive}{/block:IsActive}{block:IsDeactivated}{block:IsDeactivated} {block:IsActive}{Username}{/block:IsActive}{block:IsDeactivated} {Username}{/block:IsDeactivated}

{Body}

{/block:Reblogs}{/block:RebloggedFrom}

To style the captions, the classes are:

.reblog-info{ } /* the wrapper to the icon and the name */

.reblog-info img{ } /* to apply css to the icon/avatar*/

.reblog-name{ } /* the name/link of the user who made the comment */

I tried this same codes in this blog and in my example blogs. But if anything goes wrong, let me know. Also, if the preview look funny, save and check the blog, because I was having an issue with the preview, and I thought it was some unclosed div, but when I checked the blog, it was normal. The captions will not show in the preview, only in the blog!

[todorokiscute]

How did you make the blog name has an arrow? Which tutorial you used, can you share it?

Hello, I just used ::before pseudo element to created a little square and rotate to appears like an arrow. Here’s an explaination.

[todorokiscute]

Correct me if i'm wrong, but you used pseudo elements to make the arrow on your github page, right? But how did you make with borders?

Yes I used pseudo ::after. I’ll share some example codes, you can copy them and paste it in this editor to see them live.

You can try to use both ::after and ::before and make one of them as the same color as your box border color, a little bigger and position behind the first pseudo element so it will make a border. 

code

Or you can use one pseudo element and make a square with border, and use transform rotate do rotate it until it’s a pointing arrow. Making only to borders and letting two witouth so will merge with the box background color

code

Altough I’m used to use the first method first, the second is more cute and less blurry. 

[todorokiscute]

Do you write your own java script or jquery? I'm curious, because you seem to know a lot of it.

Oh No!!! I don’t write jquery/Js codes from scratch!! LOL *i wanted to, tho* as I said here, I know what to do with the codes (search for the events and functions I want to use) I know how to for example, add class, remove, toggle, I know what to edit to make the code do what I want. I really wanted to write my own codes, it seems very fun, but I’m happy for now. Months ago I didn’t even know how to put scripts on my codes, so I’m happy that I can make hamburger menus, click and hide stuff etc.