سلايدر لعرض صور الانستغرام في بلوجر كتبها: المدون التقني - الخبير عامر بشير

Admin Amer

أغسطس 16, 2016

0 تعليقات

شاركه غرد جوجل+

اليوم في فقرة اضافات بلوجر اعطيكم اضافة رائعة لعرض صورك على الانستغرام في بلوجر بطريقة رائعة 

ملاحظة 

 السلايدر من تصميم لبيهي عبدالعالي

 HTML/JavaScript افتح نافذة جديدة 

<div class="insta-wrap"><div class="featureinsta section" id="Instagram Widget"><div class="widget HTML" data-version="1" id="HTML2"><div class="widget-content"><div class="overlay"><h3>@Lebbihi39</h3><a href="https://instagram.com/lebbihi39" target="_blank"> تابعني </a></div><div id="instafeed"> <script type="text/javascript">//<![CDATA[ var feed = new Instafeed({ get: 'user', userId: 3541708255, limit:6, sortBy:'random', accessToken: '3541708255.1677ed0.5e79fa74dcac4a52bea0ebba51eacb88', template: ' <li><a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="display: table-cell; vertical-align: middle; height: 100%; width: 100%;">{{likes}} <i class="fa fa-heart"></i><br/>{{comments}} <i class="fa fa-comment"></i></span></div></div></a></li>', resolution: 'standard_resolution' }); feed.run(); //]]></script><li><a href="https://www.instagram.com/p/BHQb6qHA5bI/?taken-by=lebbihi39" target="_blank"><img src="https://igcdn-photos-b-a.akamaihd.net/hphotos-ak-xfp1/t51.2885-15/e35/12918617_1541988396097161_1243309675_n.jpg?ig_cache_key=MTIyNDY2MzI5Nzc3OTk1NDc0OQ%3D%3D.2" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="display: table-cell; vertical-align: middle; height: 100%; width: 100%;">2 <i class="fa fa-heart"></i><br />0 <i class="fa fa-comment"></i></span></div></div></a></li><li><a href="https://www.instagram.com/p/BHk_tFPgtmg/?taken-by=lebbihi39" target="_blank"><img src="https://igcdn-photos-e-a.akamaihd.net/hphotos-ak-xfp1/t51.2885-15/e35/13259504_1057948327621228_1535882602_n.jpg?ig_cache_key=MTI1NTM3MTQ4NDMyMTQxMjQ0Mw%3D%3D." /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="display: table-cell; vertical-align: middle; height: 100%; width: 100%;">1 <i class="fa fa-heart"></i><br />0 <i class="fa fa-comment"></i></span></div></div></a></li><li><a href="https://www.instagram.com/p/BHifabZAjIl/?taken-by=lebbihi39" target="_blank"><img src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xft1/t51.2885-15/e35/13549396_763379423765607_1559357063_n.jpg?ig_cache_key=MTI4MzY0ODY3MjAwMDg3NDE4NA%3D%3D.2" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="display: table-cell; vertical-align: middle; height: 100%; width: 100%;">0 <i class="fa fa-heart"></i><br />0 <i class="fa fa-comment"></i></span></div></div></a></li><li><a href="https://www.instagram.com/p/BH6jA2Tg9V1/" target="_blank"><img src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xft1/t51.2885-15/s320x320/e35/13551671_538019253072575_1063620005_n.jpg?ig_cache_key=MTI4NTg4NTUzNzcxODIwNTM3Ng%3D%3D.2" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="display: table-cell; vertical-align: middle; height: 100%; width: 100%;">1 <i class="fa fa-heart"></i><br />0 <i class="fa fa-comment"></i></span></div></div></a></li><li><a href="https://www.instagram.com/p/BHSZCmog4rh/?taken-by=lebbihi39" target="_blank"><img src="https://igcdn-photos-f-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/e35/13628471_1169289373135917_1025378909_n.jpg?ig_cache_key=MTI4OTQzNTU2ODI3MDM5OTkwNA%3D%3D.2" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="display: table-cell; vertical-align: middle; height: 100%; width: 100%;">2 <i class="fa fa-heart"></i><br />0 <i class="fa fa-comment"></i></span></div></div></a></li><li><a href="https://www.instagram.com/p/BEFBqOGIffs/?taken-by=lebbihi39" target="_blank"><img src="https://igcdn-photos-b-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/s640x640/sh0.08/e35/13562105_1005625566219153_517376340_n.jpg?ig_cache_key=MTI4NDE5ODk3MzgzNzY0MjQ2NQ%3D%3D.2" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="display: table-cell; vertical-align: middle; height: 100%; width: 100%;">2 <i class="fa fa-heart"></i><br />0 <i class="fa fa-comment"></i></span></div></div></a></li></div></div><div class="clear"></div><span class="widget-item-control"><span class="item-control blog-admin"><a class="quickedit" href="//www.blogger.com/rearrange?blogID=225862829300000356&widgetType=HTML&widgetId=HTML2&action=editWidget§ionId=Instagram+Widget" onclick="return _WidgetManager._PopupConfig(document.getElementById("HTML2"));" target="configHTML2" title="Edit"><img alt="" height="18" src="https://resources.blogblog.com/img/icon18_wrench_allbkg.png" width="18" /></a></span></span><div class="clear"></div></div></div></div><style>/** Instagram widget support **/ .instag ul.thumbnails > li { width:32% !important; } .instag ul.thumbnails > li img:hover { opacity:.8; } .instag ul li { margin:0; padding-bottom:0; border-bottom:none; } #instafeed{width:100%;display:block;margin:0;padding:0;line-height:0} #instafeed img{height:auto;width:100%} #instafeed a{padding:0;margin:0;display:inline-block;position:relative} #instafeed li{width:16.666%;display:inline-block;margin:0!important;padding:0!important} #instafeed .insta-likes{width:100%;height:100%;margin-top:-100%;opacity:0;text-align:center;letter-spacing:1px;background:rgba(255,255,255,0.4);position:absolute;text-shadow:2px 2px 8px #fff;font:normal 400 11px Montserrat,sans-serif;color:#222;line-height:normal;transition:all .35s ease-out;-o-transition:all .35s ease-out;-moz-transition:all .35s ease-out;-webkit-transition:all .35s ease-out} #instafeed a:hover .insta-likes{opacity:1} .featureinsta { margin: auto; position: relative; transition: all 1s ease; height: auto; overflow: hidden; } .featureinsta .overlay { opacity:0; background: rgba(17, 17, 17, 0.57); } .featureinsta:hover .overlay { opacity: 1; top:0; } .overlay { text-align: center; position: absolute; left: 0; font-weight: bold; right: 0; top: -200px; bottom: 0; margin: 0; padding: 0; width: 100%; z-index: 1; transition: all .25s; } .overlay h3 { font-size: 40px; color: #fff; letter-spacing: -1px; font-weight: bold; margin: 30px 0px 20px 0px; } .overlay a { border-width: 2px; padding: 1rem 1.5rem; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; color: #fff; text-decoration: none; display: inline-block; font-size: 17px; font-weight: 400; display: inline-block; float: none; cursor: pointer; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border: 1px solid #1c5380; -webkit-border-radius: 3px; border-radius: 3px; background-color: #6f97b6; background-image: -webkit-gradient(linear,left top,left bottom,from(#6f97b6),to(#3f729b)); background-image: -webkit-linear-gradient(top,#6f97b6,#3f729b); background-image: -moz-linear-gradient(top,#6f97b6,#3f729b); background-image: -o-linear-gradient(top,#6f97b6,#3f729b); background-image: -ms-linear-gradient(top,#6f97b6,#3f729b); background-image: linear-gradient(top,#6f97b6,#3f729b); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#6f97b6', EndColorStr='#3f729b'); background-position: 50% 50%; text-shadow: 0 1px 1px #1c5380; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1),inset 1px 0 0 rgba(255,255,255,.05),inset -1px 0 0 rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.2); -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1),inset 1px 0 0 rgba(255,255,255,.05),inset -1px 0 0 rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.2); box-shadow: 0 1px 1px rgba(0,0,0,.1),inset 1px 0 0 rgba(255,255,255,.05),inset -1px 0 0 rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.2); } .overlay a:before { content: "\f16d"; display: inline-block; font: normal normal normal 22px/1 FontAwesome; font-size: inherit; font-style: normal; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .cloud-label-widget-content { text-align: left } .cloud-label-widget-content .label-count { background: #efa48d; color: #fff!important; margin-left: -3px; padding-right: 3px; white-space: nowrap; border-radius: 2px; padding: 1px 4px !important; font-size: 12px !important; margin-right: 5px; } .cloud-label-widget-content .label-size { background: #f5f5f5; display: block; float: left; font-size: 11px; margin: 0 5px 5px 0 } .cloud-label-widget-content .label-size a, .cloud-label-widget-content .label-size span { height: 18px !important; color: #222222; display: inline-block; font-size: 12px; font-weight: 500!important; padding: 6px 8px } .cloud-label-widget-content .label-size a { padding: 6px 10px } .cloud-label-widget-content .label-size a:hover { color: #fff!important } .cloud-label-widget-content .label-size, .cloud-label-widget-content .label-count { height: 30px!important; line-height: 19px!important; border-radius: 2px } .cloud-label-widget-content .label-size:hover { background: #efa48d; color: #000000!important } .cloud-label-widget-content .label-size:hover a { color: #fff!important } .cloud-label-widget-content .label-size:hover span { background: #202020; color: #fff!important; cursor: pointer } .cloud-label-widget-content .label-size-1, .label-size-2, .label-size-3, .label-size-4, .label-size-5 { font-size: 100%; opacity: 10 } .label-size-1, .label-size-2 { opacity: 100 } .flickr_widget .flickr_badge_image{float:left;margin-bottom:5px;margin-right:10px;overflow:hidden;display:inline-block} .flickr_widget .flickr_badge_image:nth-of-type(4),.flickr_widget .flickr_badge_image:nth-of-type(8),.flickr_widget .flickr_badge_image:nth-of-type(12){margin-right:0} .flickr_widget .flickr_badge_image img{max-width:67px;height:auto} .flickr_widget .flickr_badge_image img:hover{opacity:.5} /* ######## Responsive Css ######################### */ @media only screen and (max-width: 1200px) { .row { width: 96% !important; margin: 0 auto; float: none; } .sticky-wrapper.is-sticky .row { width: 100% !important; } } @media only screen and (max-width: 980px) { #main-wrapper, #sidebar-wrapper { float: none; clear: both; width: 100%; margin: 0 auto; } #main-wrapper { max-width: 100%; } #sidebar-wrapper { padding-top: 20px; } .overlay a { float: right; margin: 30px 0; } .overlay h3 { float: left; } } </style>


 بروابط صورك في الانستغرام https://www.instagram.com/p/ غير روابط

 https://instagram.com/lebbihi39 غير رابط هذا برابط انستغرامك

@Lebbihi39 غير اليوزر ب اليوزر الخاص بك

غير الصور التي اخترت روابطها في مكانه
ستجد كل الصور لها رابط يشبه لهذا
https://igcdn-photos-f-a.akamaihd.net/hphotos-ak-xfa1/........الخ



لمعاينة الاضافة من هنا

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

https://ab-expert.blogspot.com/2016/08/blog-post_16.html

HTML Code Of Post:

<a href="https://ab-expert.blogspot.com/2016/08/blog-post_16.html">سلايدر لعرض صور الانستغرام في بلوجر كتبها: المدون التقني - الخبير عامر بشير</a>