ادوات بلوجر الاحترافية
اكواد القائمة المميزة من اقوي اضافات بلوجر احترافية و مميزة.
هل تعبت من كتابة الاكواد بنفسك ؟
الان يمكنك عمل اداه بنفسك بدون الحاجة الي كتابة اكواد بلغة HTML / CSS .
اهم ما يميزها.
- علس عكس كثير من الاكواد المنتشرة علي الانترنت فالاكواد سليمة ولا اخطاء في البرمجة
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
.dropbtn {
border: none;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 33px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
background-color: #32AEF1;
border-radius: 6px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #07a;
color: white;
border-color: rgb(255, 255, 255);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown {
position: relative;
display: inline-block;
float: right;
margin-right: 8px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
.button435 {
float: right;
border-radius: 5px;
border: none;
padding: 11px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 27px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
background-color: white;
color: black;
border: 2px solid #555555;
box-shadow: 3px 3px 10px 1px #444;
}
.button435:hover {
background-color: #555555;
color: white;
}
</style>
<style>
.overlay43 {
height: 0%;
width: 100%;
position: fixed;
z-index: 20;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content43 {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 20%;
}
.overlay43 a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay43 a:hover, .overlay43 a:focus {
color: #f1f1f1;
}
.overlay43 .closebtn43 {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: white;
}
@media screen and (max-height: 450px) {
.overlay43 {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay43 .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-chevron-down:before {
content: "\e114";
}
</style>
<style>
.overlay43ab {
height: 100%;
width: 0;
position: fixed;
z-index: 20;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content43ab {
position: relative;
top: 5%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay43ab .closebtn43ab {
position: absolute;
top: 3px;
right: 3px;
font-size: 60px;
z-index: 17;
color: white;
}
</style>
<style type="text/css">
#hbz-searchbox22 {
margin: 10px ;
border-radius: 3px;
overflow: hidden;
max-width: 100%;
}
#hbz-input {
width: 59.2%;
padding: 10.5px 4%;
font: bold 15px "lucida sans", "trebuchet MS", "Tahoma";
border: none;
background-color: #EEE;
}
#hbz-input:focus {
outline: none;
background-color: #FFF;
box-shadow: 0 0 2px #333333 inset;
}
#hbz-submit {
overflow: visible;
position: relative;
float: right;
border: none;
padding: 0;
cursor: pointer;
height: 40px;
width: 32.8%;
font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma";
color: #FFF;
text-transform: uppercase;
background-color: #32AEF1;
}
#hbz-submit::before {
content: "";
position: absolute;
border-width: 8px;
border-style: solid solid solid none;
border-color: transparent #32AEF1;
top: 12px;
left: -6px;
}
#hbz-submit:focus,
#hbz-submit:active {
background-color: #C42F2F;
outline: none;
}
#hbz-submit:focus::before,
#hbz-submit:active::before {
border-color: transparent #C42F2F;
}
#hbz-submit:hover {
background-color: #E54040;
}
#hbz-submit:hover::before {
border-color: transparent #E54040;
}
#copyrights43a {
text-align: left;
background-color: #fff;
margin-top: 0px;
padding: 5px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-width: 8px;
border-style: solid solid solid none;
border-color: transparent #32AEF1;
}
</style>
<style>
.pill-nav a {
display: inline-block;
color: #f1f1f1;
text-align: center;
padding: 4px 9px 9px;
text-decoration: none;
font-size: 39px;
border-radius: 2px;
}
.pill-nav a:hover {
background-color: #ddd;
color: black;
}
.pill-nav a.active {
background-color: dodgerblue;
color: white;
}
#copyrights43a .icon {
display: none;
border-radius: 5px;
border: none;
padding: 11px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 27px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
background-color: white;
color: #32AEF1;
border: 2px solid #32AEF1;
float: right;
margin: 0px 5px;
}
@media screen and (min-width: 600px) {
#copyrights43a .icon {
display: none;
}
}
@media screen and (max-width: 600px) {
.dropbtn {
display: none;
}
#copyrights43a .icon {
display: block;
}
}
</style>
<div id="copyrights43a">
<div class="pill-nav">
<a href="https://43araby.blogspot.com" target="_blank"> <i class="fa fa-home" style="color: #32AEF1;" ></i>
</a>
<div id="myNav43" class="overlay43" style="z-index: 20;">
<a href="javascript:void(0)" class="closebtn43" onclick="closeNav43()">×</a>
<div class="overlay-content43">
<form id="hbz-searchbox22" action="/search" method="get">
<input type="text" id="hbz-input" name="q" placeholder="Search..." />
<input type="hidden" name="max-results" value="8" />
<button id="hbz-submit" type="submit">Search</button>
</form>
</div>
</div>
<script>
function openNav43() {
document.getElementById("myNav43").style.height = "100%";
}
function closeNav43() {
document.getElementById("myNav43").style.height = "0%";
}
</script>
<div id="myNav43ab" class="overlay43ab" style="z-index: 20;">
<a href="javascript:void(0)" class="closebtn43ab" onclick="closeNav43ab()">×</a>
<div class="overlay-content43ab">
<a href="https://43araby.blogspot.com/p/blog-page_12.html" target="_blank" style="font-size: x-large;" >► Convert Video
</a><br />
<a href="https://43araby.blogspot.com/p/blog-page_7.html" target="_blank" style="font-size: x-large;">► Free Backlinks</a><br />
<a href="https://43araby.blogspot.com/p/document_7.html" target="_blank" style="font-size: x-large;">► Creat SOCIAL tool</a><br />
<a href="https://43araby.blogspot.com/p/plain-youtube-card.html" target="_blank" style="font-size: x-large;">► Creat youtube tool</a><br />
<a href="https://43araby.blogspot.com/p/modified-youtube-card.html" target="_blank" style="font-size: x-large;">► Creat youtube tool 2
</a><br />
<a href="https://43araby.blogspot.com/p/tryit-editor-v3_7.html" target="_blank" style="font-size: x-large;">► HTML Editor</a><br />
<a href="https://43araby.blogspot.com/p/person.html" target="_blank" style="font-size: x-large;">► Creat profile card</a><br />
<a href="https://43araby.blogspot.com/p/button-icon.html" target="_blank" style="font-size: x-large;">► css button icon</a><br />
<a href="https://43araby.blogspot.com/p/youtube-custom-embed-generator-hbz.html" target="_blank" style="font-size: x-large;">► YOUTUBE Custom Embed Generator</a><br />
</div>
</div>
<script>
function openNav43ab() {
document.getElementById("myNav43ab").style.width = "100%";
}
function closeNav43ab() {
document.getElementById("myNav43ab").style.width = "0%";
}
</script>
<button class="button button435" onclick="openNav43()" > <i class="fa fa-search"></i>
</button>
<button class="icon" onclick="openNav43ab()" >
<i class="fa fa-gear"></i>
</button>
<div class="dropdown">
<button onclick="openNav43ab()" class="dropbtn">TOOLS ►</button>
</div>
</div>
</div>
ليست هناك تعليقات: