Blogger coding

Zein · 9 Ιουνίου 2014

Λοιπον, θελω να φτιαξω ενα blog με blogger, οπου η αρχικη σελιδα θα εχει 4 κουτια με κατηγοριες θεματων (κατηγορια 1, 2, 3 , 4) οπου μολις κανεις hover (με ενα απλο εφε) πανω σε αυτα τα "κουτια" να βλεπεις το latest θεμα της καθε κατηγοριας. Μολις δε πατας κλικ να σε πηγαινει σε μια σελιδα που θα ειναι θεματα μονο αυτης της κατηγοριας.

Καμια ιδεα κανεις πως να το οργανωσω σαν concept αυτο??

vacilis · 9 Ιουνίου 2014

Καταρχας να τονίζω πως δεν υπάρχει αυτό που λες <<Blogger coding>>. Για αυτα τα 2 που θες να κανεις εσυ πρεπει να ασχολιθεις με css για το hover και με javascript για να δειχνει το latest post (λογικά εκτος αν έχει κάποιο api).

te0ne · 10 Ιουνίου 2014

Δεν υπαρχει blogger coding.. αυτα γινονται με καποιο cms και επεξεργασια του κωδικα εκτος αν βρεις καποιο ετοιμο template..

Zein · 10 Ιουνίου 2014

ευχαριστω για τις απαντησεις! Για τον ορο blogger coding εννοουσα τα στανταρ που πρεπει να ακολουθησω γιατι ειναι πολλα πραγματα που δε γνωριζω καλα πως λειτουργουνε ειδικα με το cms του. Αλλα ας το κανουμε στην ακρη αυτο για την ωρα και παμε μονο για το edit html/css κομματι.

Ναι, πανω σε ενα template θα δουλεψω -ωστε να γινει αγνωριστο- αλλα θελω να το κανω σωστα καθως και να μαθω κατι απο αυτη την διαδικασια. Τελικα αυτο με τα post/κατηγοριες το βρηκα , στην ουσια ενα link ειναι που σου κανει ταξινομηση αναλογα με το label. Αρα θα εχω 4 διαφορετικα links για τις 4 κατηγοριες μου.

Oποτε για να συνοψισουμε αυτο που μενει ειναι:

1) Πως μπορω να βαλω μια εικονα η οποια να "κουκουλωνει" ενα div κουτι ενος ποστ (ποστ της αρχικης σελιδας εννοω, αυτα που κανεις κλικ για να τα δεις ολοκληρα) , και μολις κανω hover πανω της τοτε να φυγει και να μου εμφανισει αυτο που εχει απο κατω?

Δε μπορω να σκεφτω εναν τροπο , δοκιμασα με background element αλλα δεν δουλευει. Μπορω να το κανω μονο με css ?

2) Πως γινεται να εχω μια διαφορετικη αρχικη custom σελιδα οπου θα μπορω να βαλω οτι θελω μεσα?

te0ne · 10 Ιουνίου 2014

<html>
<head>
    <script type="text/javascript">

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    function showImage(){
        document.getElementById('loadingImage').style.visibility='hidden';
    }

</script>
    </script>
</head>
<body>
<div>
<input type="button" value="Ajax Button" onclick="showImage();"/>
<img id="loadingImage" src="sk.png" style="visibility:visible"/>
</div>
</body>
</html>

Κατι τετοιο?

alou · 10 Ιουνίου 2014

Για το πρώτο, θα κάνεις κάτι τέτοιο:

http://jsfiddle.net/andreasloukakis/Utv89/

HTML

<div class="article">
    <div class="articleimagewrap">
        <a href="path/to/article">
        <img src="http://blog.lib.umn.edu/wlas0006/1001/insomnia1.jpg" class="articlelistimage">
            </a>
    </div>
    <div class="articlecontentwrap">
        <h3>Αι σάφερ φρομ ινσόμνια :/</h3>
        <p>Ένα πρόβατο, δύο πρόβατα, τρία πρόβατα...</p>
        <a href="path/to/article" class="readon">δες όλο το κοπάδι</a>
    </div>
</div>

CSS

.article {position:relative;overflow:hidden;width:300px;height:200px;margin:5px;display:inline-block;}
.articleimagewrap, .articlecontentwrap {position:absolute;}
.articleimagewrap {z-index:20;transition: all 0.3s ease 0s}
.articleimagewrap img {width:100% !important;}
.articlecontentwrap {z-index:10}

.article:hover .articleimagewrap {opacity:0;visibility:hidden}

Zein · 10 Ιουνίου 2014

Αψογοι και οι 2!!!!

Ευχαριστω για την βοηθεια!!!!!!!!!!!!!

Σύνδεση

Blogger coding

Προτεινόμενες αναρτήσεις

Zein

vacilis

te0ne

Zein

te0ne

alou

Zein

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση