Add an Icon to Blog Post Titles with CSS

A little icon next to your post title is a cute way to bring the design elements of your theme into your blog posts. And, it's easy to do with a bit of CSS! You'll probably spend more time choosing the perfect icon than you will on adding the CSS to your blog.

ΠΩΣ ΠΡΟΣΘΕΤΩ ΠΑΝΩ ΑΠΟ 3 ΣΤΗΛΕΣ ΣΤΟ ΥΠΟΣΕΛΙΔΟ

ΠΩΣ ΠΡΟΣΘΕΤΩ ΠΑΝΩ ΑΠΟ 3 ΣΤΗΛΕΣ ΣΤΟ ΥΠΟΣΕΛΙΔΟ

ΠΩΣ ΠΡΟΣΘΕΤΩ ΠΑΝΩ ΑΠΟ 3 ΣΤΗΛΕΣ ΣΤΟ ΥΠΟΣΕΛΙΔΟ ΤΟΥ BLOGGER

Το υποσέλιδο του blogger μπορεί να χωριστεί σε περισσότερες στήλες από αυτές που μας επιτρέπει ο blogger μέσα από την αυτόματη προσαρμογή του προτύπου οι οποίες είναι μία εώς τρείς. Για να το κάνουμε αυτό πάμε στην επεξεργασία του προτύπου μας και αναζητούμε με την βοήθεια των πλήκρων Ctrl+F την γραμμή <footer> Όταν την βρούμε θα δούμε λίγες γραμμές παρακάτω την εξής γραμμή κώδικα : <macro:param default='2' name='num' value='3'/>

Αυτό που έχουμε να κάνουμε είναι να αλλάξουμε τον αριθμό με το γαλάζιο χρώμα ο οποίος μπορεί να είναι από προεπιλογής (1-3) και τον κάνουμε 4 ή 5 ή 6 ή όσο είναι βολικό για την εμφάνιση μικρότερου πλάτους widgets. Μετά σώνουμε το πρότυπο και ήμαστε έτοιμοι.

http://the-best-widgets.blogspot.gr/2015/12/3.html 

ΠΩΣ ΒΑΖΩ ΠΡΟΣΘΕΤΑ ΠΕΔΙΑ GADGETS ΣΤΟ ΥΠΟΣΕΛΙΔΟ

ΠΩΣ ΒΑΖΩ ΠΡΟΣΘΕΤΑ ΠΕΔΙΑ GADGETS ΣΤΟ ΥΠΟΣΕΛΙΔΟ

ΠΩΣ ΒΑΖΩ ΠΡΟΣΘΕΤΑ ΠΕΔΙΑ GADGETS ΣΤΟ ΥΠΟΣΕΛΙΔΟ ΜΕ ΟΣΕΣ ΣΤΗΛΕΣ ΘΕΛΩ
 

Για να προσθέσουμε στο υποσέλιδο του blogger επιπλέον πεδία gadgets με διαφορετικό αριθμό στηλών το κάθε ένα πρέπει να πάμε στην επεξεργασία του προτύπου και να αναζητήσουμε την ετικέτα <footer> Μόλις την βρούμε αντιγράφουμε και επικολλούμε ακριβώς από κάτω της όποιον από τους παρακάτω κώδικες θέλετε ή και όλους μαζί αναλόγως πόσες στήλες θέλετε να έχουν τα πεδία των gadgets. Μετά από την επικόλληση σώζετε το πρότυπο, βγαίνετε από το ιστολόγιο εντελώς και μόλις ξαναμπήτε στην διάταξη του ιστολογίου θα δείτε τα νέα πεδία των gadgets που προστέθηκαν.

 

ΠΩΣ ΑΦΑΙΡΩ ΤΟ «ΕΜΦΑΝΙΣΗ ΟΛΩΝ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ ΜΕ ΕΤΙΚΕΤΑ …»

ΠΩΣ ΑΦΑΙΡΩ ΤΟ «ΕΜΦΑΝΙΣΗ ΟΛΩΝ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ ΜΕ ΕΤΙΚΕΤΑ …»

Όταν πατήσουμε πάνω σε ένα link ετικέτας ο blogger μας εμφανίζει όλες τις αναρτήσεις που περιέχουν την συγκεκριμένη ετικέτα μαζί με ένα μήνυμα πάνω από αυτές «ΕΜΦΑΝΙΣΗ ΟΛΩΝ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ ΜΕ ΕΤΙΚΕΤΑ …» το οποίο είναι περιττό και πιάνει το χώρο πάνω από τις αναρτήσεις του blog μας και καλό θα ήταν να το αφαιρέσουμε.

 

Multilevel DropDown Menu

 Multilevel DropDown Menu

http://www.helperblogger.com/2012/03/cool-css3-multi-level-drop-down-menu.html#more

http://www.mybloggertricks.com/2011/07/create-drop-down-menu-in-facebook-style.html

http://www.mybloggertricks.com/2011/07/create-drop-down-menu-in-facebook-style.html

http://www.mjntechweb.com/2013/07/special-multilevel-dropdown-menu-with.html

http://icanbuildablog.com/2015/08/how-to-add-a-drop-down-menu-to-a-blogger-blog-without-javascript/

CSS MultiLevel DropDown Menu Maker

 CSS MultiLevel DropDown Menu Maker

 http://www.easycssmenu.com/

http://purecssmenu.com/  (you have to register first)

http://www.emanuelblagonic.com/2006/10/11/create-your-own-drop-down-menu-with-nested-submenus-using-css-and-a-little-javascript/

http://www.dropdownmenugenerator.com/

http://www.dynamicdrive.com/

Creating CSS3 Slideout Menu

Creating CSS3 Slideout Menu #5

CSS3 slideout menu tutorial. This is our fifth CSS3 menu. This will nice slideout menu with fading images (animated with transition effects). Make attention, that all these new effects (transitions) will work only in most fresh browsers like FF, Chrome, Safary browsers (possible in Opera too). But not in IE (transitions still not available here). I just added few hacks for IE – so menu will work here too (but not so smooth). Anyway – lets test our new menu.

Creating Style CSS3 Navigation Dropdown Menu

 Creating Style CSS3 Navigation Dropdown Menu

Ενδιαφέροντα Navigation Dropdown Menu

https://www.script-tutorials.com/tag/menu/page/2/ 

Insert Embed Radio Channel Code Widget in Blogger

How To Insert Embed Radio Channel Code Widget in Blogger

Entertainment is the most searched term on the internet most of the user use internet for only enjoying and spending their free time in playing games,watching videos but most commonly they play games while listening to the online radio.So if you owns Blogger and you want to transform your blog into a radio station without spending a single penny then you are at the right place.Today while I was roaming on internet I saw a Question at Yahoo Answers How to embed Radio channels on blogger website Asked by Miss Farha Tasnim.Which is the most common question usually users asks.So this tutorials will not only help Miss Farha Tasnim But it will also help other publishers.So let us start rolling our fingers on our today's topic 

Insert HTML-CSS-Javascript Codes in Blogger Posts As Plain Text

If you are using blogger platform, and want to insert HTML, JavaScript and CSS source codes in your posts then I am sure you are facing many problems. If you try to insert Html code or JavaScript in Blogger posts you will either get an error message or by chance if your post is published then it will not give the desirable result's which was expected .You can use HTML Encoders but they will never give an attractive look to your codes.

 

 

Create a jQuery Peel Away Effect on Your Blogger Blog

How to Create a jQuery Peel Away Effect on Your Blogger Blog

If anyone is guessing, how those Bloggers and Webmasters are able to create that little peel away effect on the top right corner of their blog then we assume that it is able to grasp your attention. The main intention of using this plugin is to make your visitor curious about a certain product because, your visitors will keep on guessing what will come out next time when they peel off. This is certainly one of the most prominent ways of diverting attention of your visitors towards a certain product or page. For Affiliate marketers, webmasters and online money makers it is a piece of gold if it is utilized purposely. Therefore, today in this article, we will learn How to Create a Peel Away Effect on Your Blogger Blog.

Peel Away Effect (DEMO) 

How to handle HTML entity nbsp in XSLT

How to handle HTML entity nbsp in XSLT. Without changing the input file

I am trying to convert an HTML file into XML file using XSLT (Using Oxygen 9.0 for transformation). When I configure and run the XSLT transformation with the HTML file then Oxygen outputs The entity 'nbsp' was referenced,but not declared. My input html file is: <div><span>&nbsp;some text</span></div> Note: I want to know how handle that entity only using the XSLT, I don't want to make any changes to the input file.

Create a Animated jQuery Quote Rotator

How to Create a Animated jQuery Quote Rotator in Blogger

Sometimes an article cannot be completed without a proper quote or quotation from an authentic source. People want the news to be accurate and precise. Therefore, they always count on a reliable source. Stuffing your articles with too many quotations might make your blog posts look lengthy, but you users might feel difficult to scroll too much. How about a jQuery Quote rotator and animator, which would not only make your quotations look remarkable but will also gather all the quotes at one place. In this article, we will show you How to create a jQuery Quote Rotator in Blogger? 

Create a jQuery Facebook Photo Gallery

How to Create a jQuery Facebook Photo Gallery in Blogger

Facebook is turning out to be the number one source for quality targeted traffic. This is the reason why webmasters are concentrated more towards connecting  their website with different Facebook Plugins and widgets. We have already covered How to Add Facebook comments, Facebook Recommendation box and Facebook Fan Box in Blogger. Recently, one of our visitors asked us How to Create a JQuery Facebook Photo Gallery in Blogger? Today in this article we will be showing you  How to Create a jQuery Facebook Photo Gallery in Blogger.

What is jQuery Facebook Photo Gallery For Blogger?

This plugin enables you to view and import your all Facebook Galleries and images to your website. It imports your all public albums, but it works only with Facebook Page galleries. It also gives you the flexibility and the freedom to exclude any album that you like. The whole system works on jQuery, so you get enough options to customize it they way you like. In case, you want to see this photo gallery in live action check out the following screenshot.

On the top of that, you can also view the photos within your site through Lightbox functionality. You can browse different albums and can go back to the place from where you started.

How to create jQuery Facebook Photo Gallery in Blogger?

Installing Facebook Gallery:
The first thing you need to do is to login into your Google account. After logging in go to Blogger.com >> Your blog >> Template >> Edit HTML and search for the ending </head> Tag. After finding the head tag just above it paste the following piece of code.

<!-- MyBloggrLab Jquery Facebook Gallery Plugin -->
<link media="all" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet" type="text/css" />

<link media="all" href="https://googledrive.com/host/0B-vz7n1QSdEfWE1Wbmxtc2FYN1k" rel="stylesheet" type="text/css" />
<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfRkNxSXVfYjlRU3c"></script>

<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfUDFxcEpsM1ZSTjQ"></script>

<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfaHU3dTFPallrU1E"></script>

<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfUFhSTlNaaU5tTkE"></script>

<script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfeVlQNnBDZGhtXzQ"></script>

After adding the above code in your template, just press the “Save Template” button and proceed to the next step.

Creating Facebook Gallery:
Now you need to find the ID of your Facebook Page profile (remember this only works for pages not profile). To find your Facebook Page ID go to http://findmyfacebookid.com/ enter your Page URL i.e. https://www.facebook.com/Templateism and hit “Lookup Numeric ID” to get a numeric Id of your page.

Now once you find out your ID, it's time to create a gallery. Now it depends on you where you would like to see the photo gallery either in your post or pages. If you like to create a page then, go to Blogger >> Your site >> Pages >> add a new page >> Give your page a title sometime like “Facebook Galleries”. After naming your page, simply paste the following code there. (Do not forget to replace Your-Page-ID with the numeric ID that you got from the previous step.

<script>
    $(document).ready(function ($) {
        $('#FB_Album_Frame').FB_Album({
            facebookID: 'Your-Page-ID',
            responsiveGallery: false,
            fixedWidth: 980
        });
    });
</script>

<div id="FB_Album_Frame"></div>

Congratulations: Once everything is done, publish it. You have successfully created a Facebook jQuery Photo Gallery in Blogger. Now go and check if it is working fine.

We hope this tutorial has helped you in learning How to Create a jQuery Facebook Photo Gallery in Blogger. This plugin would certainly help those who are really crazy about facebook and photo galleries.

http://www.mybloggerlab.com/2013/08/how-to-create-jquery-facebook-photo-gallery-in-blogger.html

Add a jQuery Tabbed Sidebar Widget in Blogger

How to Add a jQuery Tabbed Sidebar Widget in Blogger

Have you ever seen those blogs that has a tabbed widget area in the sidebar consisting of popular, recent and features posts within a single click? It is more commonly known as jQuery Tabbed widget, which allows you to save a lot of space in the sidebar keeping the interface user friendly for your users by combining 3 different widgets into just one. In this article, we will be showing you how to add a jQuery Tabbed Sidebar Widget in Blogger.

Add CSS Hover Effect to images in blogger

How to add CSS hover effect to images in blogger

Images bring life to content but do they really attract your visitors? Adding a nice CSS hover effect to your images could bring engagement benefits to your blog. Recently one of our users asked us that how to add CSS hover effect to images in blogger? There are many CSS hover effect available that could be applied with ease to your blogger site. Today, in this article we will show you how to add CSS hover effect to images in blogger.

Blockquotes a nice way to impress your users

Blockquotes a really a very nice way to differentiate some of the content from the rest. And it is also a nice way to impress the users by using a cool style for the quote
In this post i have given the different styles of blockquotes from different sources just check the styles.

Learn HTML And CSS For Novice Blogger

The Best Websites To Learn HTML And CSS For Novice Blogger

Guest Post - The people, who looks at some great sites to learn the basics of coding.

If you are thinking about starting you own blog, than it's extremely important for you to have, at the very least, a basic understanding and knowledge of how HTML and CSS can properly work to your advantage. Although learning these different coding languages may seem difficult and somewhat foreign at first, as you continue to familiarize yourself with the basics of HTML and CSS, the process will become more clear and easier for you to use. It's critical for you not to give up on learning the specific codes and maintain practicing how to create them in order for your blog to be fully successful. As you continue to learn the "ins and outs" of coding for HTML and CSS, there are many outlets that consist of different websites that will prove to be extremely beneficial in your quest to master these computer languages.Below we list the best sites you can visit to help you learn the basics and get you on the way to become an expert coder.

Sliding Underlines

Sliding Underlines On Blogger And Wordpress

 As someone constantly looking at design and ways to add to the design of blogs often it's the little things that amuse me.This post is definitely an example of that, something as simple as an underline sliding out under a heading or for that matter any text most would see mundane but I see as 'Cool'.So lets look at the effect, first up it's a very easy effect to use on your blog no code knowledge is needed.

Basically on any text on your blog you can make a sliding underline appear on hover (when you place the cursor over it).For me this effect works best on headings and links as these are the text visitors to your blog will hover on most.In future posts I may show how to add the effect to all links on your blog or maybe to Labels/Tags (Like the previous Bump effect for Blogger labels we published in 2011).

Image Morph Effect To Post Images

Add An Amazing Image Morph Effect To Post Images On Blogger

 In the last post we had a CSS Zoom effect for images on your blog.Now we are continuing with image effects this time with something really awesome.This effect has a number of layers but as with all our tutorials it can be easily added to your blog even for a newbie.

So what is the effect ? The main feature is on hover images will spin and morph from square to round, to help this effect images will also have a 3D style.Below I have created an animated GIF to give you an idea of how it looks, check out the demo for the real thing (On the demo page hover over any of the images in the post).