Tutorial: Gadget - Schnee fallen lassen

Donnerstag, 5. Dezember 2013

Howdie!
Da ich gestern meinen Blog The Call of Freedom & Love Wintertauglich gemacht habe zeige ich euch heute wie ihr Schnee fallen lassen könnt :)


 Übrigens sehr einfach ;)

Tutorial: Hintergrund ändern/Problem mit zu großen Hintergründen

Sonntag, 1. Dezember 2013

Howdie!
Habt ihr auch das Problem das wenn ihr richtig schöne Hintegründe habt, die keine Pattern sind, und ihr sie hochladen wollt da dann steht "Der Hintergrund ist zu groß" weil er mehr als 300 KB hat?

Viel zu oft saß ich da seufzend und musste mich mit dem Schicksal abfinden. Ich wette es gingen auch vielen von euch so.

Aber hey - jetzt gibt es was dagegen! Diese Bilder könnt ihr trotzdem benutzen! Es geht ganz einfach :)

Anleitung:
Ladet euer Hintergrundbild auf Abload hoch.
Dann geht ihr auf euren Blog -> Design -> Vorlage -> HTML bearbeiten.

 Dort klickt ihr in das HTML-Feld und dann auf die Strg-Taste, drückt weiter und dann auf F sodass sich eine Suche öffnet.
Darin gebt ihr jetzt background: ein und auf enter. Da sollte dann das stehen:
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

Nun macht ihr es so und fügt folgene Zeile ein:
background:url(~Euer Hintergrund~) fixed center bottom no-repeat;

sodass es am Ende ungefährt so aussieht:
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  background:url(http://abload.de/img/backokcev.jpg) fixed center bottom no-repeat;
}

Änderbar:
Hier fügt ihr den Direktlink von dem Bild ein das ihr bei Abload hochgeladen habt.

Wenn ihr ein Pattern habt, also ein Bild/Muster das sich immer wiederholen soll müsst ihr statt no-repeat repeat schreiben.

center ist wenn das Bild zentriert ist. Wollt ihr es auf die rechte oder linke seite haben müsst ihr für links left und für rechts right schreiben.

Tutorial: Gadget - Zufällige Posts

Samstag, 2. November 2013

Howdie!
In diesem Tutorial geht es um ein Gadget das Posts zufällig anzeigt.

Ihr geht auf euren Blog -> Layout -> Gadget hinzufügen -> HTML/JavaScript
Dort kopiert ihr dann folgenes hinein:

<style>
#random-posts {
font-size:11px;
}
#random-posts img{
float:left;
margin-right:20px;
border:1px solid #eee;
background:#FFF;
width:36px;
height:36px;
padding:3px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Wenn ihr das nur so einfügt sieht es so aus:

Zur Erklärung:
Wenn ihr den Rahmen weghaben wollt dann müsst ihr das blaue weglöschen.
Wenn ihr einfach eine andere Ramenfarbe haben wollt müsst ihr das "eee" und das "FFF" in eure Wunschfarbe umändern, die ihr hier ermittel könnt. (Der Farbcode der eingesetzt werden muss wird dann über dem Farbfeld angezeigt)
Wenn ihr dort das Wort "Comments" durch "Kommentare" (oder was auch immer ihr wollt) eintauschen wollt, müsst ihr das rot makierte einfach ändern.
Wenn ihr die Bilder abgerundet haben wollt müsst ihr zwischen dem grünen und dem gelben das hier einfügen:
border-radius:20px;
Die Zahl 20 könnt ihr nach belieben umändern :)

Wenn hr die Schriftgröße ändern wöllt müsst ihr die Orangene Zahl anpassen.

Wenn ihr die Bilder größer oder kleiner haben wollt müsst ihr die lila Zahlen umändern.

Wenn ihr mehr als 5 Posts angezeigt haben wollt, müsst ihr die grellgrüne Zahl einfach ändern.

Zum No-Image-Bild:
Wenn ihr bei manchen Posts kein Bild habt wird beim Gadget das Bildchen angezeigt:
Wenn ihr das hässlich findet (so wie ich ^^) dann könnt ihr es umändern.
Unten findet ihr ein Bild von mir für euch das ihr benutzen könnt :)

Ihr könnt euch aber auch einfach das Bild (siehe hier) abspeichern und selbst gestalten.
Danach einfach hier hochladen und den Direktlink des Bildes benutzen. Dazu einfach das grellpinke löschen und euren Direktlink vom Bild einfügen.

http://abload.de/img/keinbild1nipip.jpg

 Wenn euch das Bild gefällt und ihr es benutzen wollt müsst ihr den Link einfach kopieren und den grellpinken Link mit diesem Link ersetzen :)


Thats all
Ich hoffe ich konnte helfen! :)

Tutorial: Weißen Rahmen/Hintergrund und Schatten bei Bildern entfernen

Dienstag, 15. Oktober 2013

Hallihallo :)
Viele von euch haben das Problem das sie ein Vorlage haben, wie die Watermark-Vorlage, und daher Beispielsweise hinter transparenten Bildern einen weißen Hintergrund haben, sodass auch transparent nicht.transparent wird. Ich, als Watermark-'Besitzerin' und totaler Transparent-Liebhaber habe mich darüber immer furchtbar aufgeregt. 
Am Ende habe ich es durch rumgelösche, das mir das halbe Design kaputt gemacht hat, es geschafft den Schatten wegzukriegen. Doch es geht einfacher :3

Folgene Schritte sind Nötig:
(Dieser Code funktioniert bei allen Vorlagen, außer bei der dynamischen.)
Geht auf euren Blog -> Design -> Vorlage -> Anpassen -> Erweitert -> CSS-Hinzufügen 
und dort fügt ihr folgenden Code ein:

.post-body img, .post-body .tr-caption-container, .Profile img,
.Image img, .BlogList .item-thumbnail img {
border: 0;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
background: transparent !important;
}

-  -  -  -  -  -  -  -  -  -  -  -  -  -  -
Wenn ihr den Schatten und weißen Rand/Hintergrund bei der dynamischen weghaben wollt müsst ihr wie folgt vorgehen:
Geht auf euren Blog -> Design -> Vorlage -> Anpassen -> Erweitert -> CSS hinzufügen
und dort fügt ihr folgenden Code ein:

.article img {

background-color: transparent !important;
border: 0 !important;
0 0 rgba(0, 0, 0, 0) !important;
-moz-box-shadow: 0
-webkit-box-shadow: 0
0 0 rgba(0, 0, 0, 0) !important;
0, 0, 0, 0) !important;
padding: 0 !important;
}
box-shadow: 0 0 0 rgba
(

Und wenn ihr den eingegeben habt, einmal auf die Enter-Taste klicken :)

Ich hoffe das konnte ein paar Leuten helfen :)

-> Quelle

Skala #12 - Easy Way

Sonntag, 15. September 2013


Diese Skala ist ganz einfach gemacht, nichts besonderes. Manche brauchen eben was einfaches ;)


-> *Download* <-

Skala #11 - Butterflies 2

Freitag, 13. September 2013


Wieder eine Skala mit Schmetterlingen :)


-> *Download* <-

Skala #10 - Photography

Montag, 9. September 2013


Für die Fotografen unter uns :)
Auch gut für Vintage-Blogs geeignet :)


-> *Download* <-

Skala #9 - Hello Kitty

Sonntag, 8. September 2013


Diese Skala ist für Hello Kitty Fans. Allerdings etwas weniger Pink als sonst ;)


-> *Download* <-

Skala #8 - Costumes

Donnerstag, 5. September 2013


Dieser Skala bedurfte es ein größeres Anzeigebild :D
Ich hoffe sie gefällt jemandem von euch :)


-> *Download* <-

Skala #7 - Butterflies

Mittwoch, 4. September 2013


Diese Skala ist nicht so detailreich etc. wie die anderen, aber vielleicht gefällt sie ja jemandem von euch :)


-> *Download* <-

Skala #6 - Owls

Dienstag, 3. September 2013


Heute gibt es eine Skala mit Eulen :)


-> *Download* <-

Skala #5 - Vintage Blossoms

Sonntag, 1. September 2013


Heute gibt es ein Skala von Blümchen-Icons, die mir persönlich echt gut gefällt :)
Passt perfekt auf Blogs mit Vintage-Background oder allen die Blumen lieben :)


-> *Download* <-

Skala #4 - Schleifen

Samstag, 31. August 2013


Heute gibt es süße Schleifen als Skala :3


-> *Download* <-

Skala #3 - Lady Gaga

Freitag, 30. August 2013


Eine Skala für alle Lady Gaga Fans :3


-> *Download* <-

Skala #2 - Pusheen Cat

Mittwoch, 28. August 2013


-> *Download* <-

Tutorial: Bloggerelemente zentrieren

Um diese Codes einzufügen müsst ihr einfach auf Vorlage -> Anpassen -> Erweitert -> CSS hinzufügen.

Code für den Header
#header-inner img {
margin: 0 auto
}

Code für das Postdatum
.main-inner h2.date-header{
text-align: center;
}

Code für die Post-Überschrift
.main-inner h3.post-title {
text-align: center;
}

Code für den Post-Text
.main-inner .post-body{
text-align: center;
}

Code für den Post-Footer
.main-inner .post-footer-line {
text-align: center;
}

Code für den Sidebar-Text
.sidebar{
text-align: center;
}

Code für den Blog-Footer
.footer-outer {
text-align:center;
}

Wenn ihr die einzelnen Elemente lieber links haben wollt oder rechts dann müsst ihr das 'center' nur durch left (für Links) oder right (für recht) ersetzen.

Noch wichtig: Wenn ihr die Codes in euer CSS einsetzt darf die Überschrift (Das Unterstrichene) nicht mitkopiert werden, sonst funktioniert er nicht!

Tutorial: Skalas downloaden & Entpacken

Dienstag, 27. August 2013

Howdie!
Hier erkläre ich heute, wie ihr Skalas richtig downloadet & entpackt.
 
Ihr sucht euch eine passende Skala aus, und klickt unter der Skala auf "Download".

Danach öffnet sich eine Seite, die so aussehen sollte.
Wartet ein paar Sekunden bis der Downloadlink geladen ist, danach klickt auf folgendes:


Danach werdet ihr aufgefordert die Datei zu speichern. Am besten speichert ihr sie auf eurem Desktop ab, damit ihr sie leicht wiederfindet.

Für den nächsten Schritt wird ein 'Entpacker' gebraucht, beispielsweise 7zip. Alle anderen sind auch genauso gut. Diesen Entpacker müsst ihr nun auf eurem PC installieren.

Wenn ihr das getan habt, klickt ihr mit der rechten Maustaste auf die Datei und klickt auf "Hier entpacken" (vielleicht steht bei euch etwas anderes, das variiert mit jedem Entpacker). Nun sollte dort ein Ordner entstehen, und in dieser befinden sich da die Skalen :)

Bei den Skalas #13 - #15 befinden sich die Skalas nicht in einem extra Ordner!

Jetzt könnt ihr die Skalas im Post einbinden und die Größe einstellen wie ihr möchtet.

Skala #1 ~ Blue Ivi


-> *Download* <-

Damm damm damm

Samstag, 24. August 2013

Hier sehen Sie einen Testpost :D