Comment créer un blog (blogger) étape par étape 2017
Comment créer un blog gratuit sur google :
Blogger est une plateforme de blog appartenant à Google. Cette plateforme permet de créer un gratuitement un blog et offrant une panoplie d'outils pour l'animer et le mettre à jour.
Blogger a l'intérêt d'être un service de blog gratuit et sans pub.
Blogger a l'intérêt d'être un service de blog gratuit et sans pub.
- S'inscrire sur Blogger
- Rédiger son premier article
- Modifier l'aspect graphique du blog (Thème) essayé Nanopress slider free version.xml
Création de la page Facebook:
1-Se connecté a votre blog
2-Aller sur Mise en page
3-Ajouter un gadget
4-Cliquer sur HTML/JavaScript
5-Coller le code suivant en modifiant ce qui est en rouge mettez URL de votre page Facebook
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/IrbahElMal/AstucesBlogger&width=292&height=258&
amp;colorscheme=light&show_faces=true&border_color&stream=false&header=false&" style="border:none; overflow:hidden; width:292px; height:258px;" ></iframe>
Création Abonnement YouTube:
1-Se connecté a votre blog
2-Aller sur Mise en page
3-Ajouter un gadget
4-Cliquer sur HTML/JavaScript
5-Coller le code suivant en modifiant ce qui est en rouge mettez ID de votre chaîne YouTube
Exemple de ma chaîne :https://www.youtube.com/channel/UCNNF1QFWx5EtI0ejBvc7RWw
Mon ID:UCNNF1QFWx5EtI0ejBvc7RWw
<script src="https://apis.google.com/js/platform.js"></script>
<script>
function onYtEvent(payload) {
if (payload.eventType == 'subscribe') {
// Add code to handle subscribe event.
} else if (payload.eventType == 'unsubscribe') {
// Add code to handle unsubscribe event.
}
if (window.console) { // for debugging only
window.console.log('YT event: ', payload);
}
}
</script>
<div class="g-ytsubscribe" data-channelid="UCNNF1QFWx5EtI0ejBvc7RWw" data-layout="full" data-count="default" data-onytevent="onYtEvent"></div>
Création slideshow déroulement des articles :
1-Se connecté a votre blog
2-Aller sur Modèle
3-Cliquer sur modifier le code HTML
4-Cliquer sur Ctrl +F puis taper </style> coller le code en dessous
<style>
/* CSS Responsive Slider Recent Post www.Ar1web.com */
#featuredpost {margin: 10px 0;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){right:0;top:0}
#slides li:nth-child(2){right:50%;width:25%;height:50%}
#slides li:nth-child(3){right:75%;width:25%;height:50%}
#slides li:nth-child(4){right:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){right:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:21px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:right;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:droid arabic kufi;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;right:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#0a7cd2;margin:0;text-align: center;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:droid arabic kufi;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:right;text-transform:uppercase;margin-left:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgb(10, 124, 210);padding:3px 6px;font-family:tahoma;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;right:0;width:50%}
#slides li:nth-child(3){right:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){right:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
5-Copier et coller le script avant </body>,puis modier URL de votre blog
<script type="text/javascript" src="//cdn.rawgit.com/iHussam/ar1web/master/slider-rep.js">
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"https://13lotfi.blogspot.com/",
MaxPost:10,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
6-Important la partie Div copie le code et mettez le sur l'endroit ou vous voulais défilé vos articles
<div id="featuredpost"></div>
Oui c'est très informatif , grand merci
RépondreSupprimerlipo dépots de graisse